Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7aa51b03 1 parent b607177a

新增视频控件

Inline Side-by-side
Showing 8 changed files with 394 additions and 22 deletions
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 "js-cookie": "^3.0.1", 21 "js-cookie": "^3.0.1",
22 "lodash": "^4.17.21", 22 "lodash": "^4.17.21",
23 "moment": "^2.29.3", 23 "moment": "^2.29.3",
24 - "mui-player": "^1.6.0", 24 + "mui-player": "^1.7.0",
25 "typescript": "^4.7.3", 25 "typescript": "^4.7.3",
26 "uuid": "^8.3.2", 26 "uuid": "^8.3.2",
27 "vant": "^4.0.0-rc.8", 27 "vant": "^4.0.0-rc.8",
...@@ -4189,9 +4189,10 @@ ...@@ -4189,9 +4189,10 @@
4189 "license": "MIT" 4189 "license": "MIT"
4190 }, 4190 },
4191 "node_modules/mui-player": { 4191 "node_modules/mui-player": {
4192 - "version": "1.6.0", 4192 + "version": "1.7.0",
4193 - "resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz", 4193 + "resolved": "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz",
4194 - "integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA==" 4194 + "integrity": "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ==",
4195 + "license": "GPL-3.0"
4195 }, 4196 },
4196 "node_modules/mutation-observer": { 4197 "node_modules/mutation-observer": {
4197 "version": "1.0.3", 4198 "version": "1.0.3",
...@@ -9101,9 +9102,9 @@ ...@@ -9101,9 +9102,9 @@
9101 "dev": true 9102 "dev": true
9102 }, 9103 },
9103 "mui-player": { 9104 "mui-player": {
9104 - "version": "1.6.0", 9105 + "version": "1.7.0",
9105 - "resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz", 9106 + "resolved": "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz",
9106 - "integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA==" 9107 + "integrity": "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ=="
9107 }, 9108 },
9108 "mutation-observer": { 9109 "mutation-observer": {
9109 "version": "1.0.3", 9110 "version": "1.0.3",
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 "js-cookie": "^3.0.1", 25 "js-cookie": "^3.0.1",
26 "lodash": "^4.17.21", 26 "lodash": "^4.17.21",
27 "moment": "^2.29.3", 27 "moment": "^2.29.3",
28 - "mui-player": "^1.6.0", 28 + "mui-player": "^1.7.0",
29 "typescript": "^4.7.3", 29 "typescript": "^4.7.3",
30 "uuid": "^8.3.2", 30 "uuid": "^8.3.2",
31 "vant": "^4.0.0-rc.8", 31 "vant": "^4.0.0-rc.8",
......
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-23 13:42:35
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-11-22 17:12:52
6 + * @FilePath: /data-table/src/components/VideoField/index.vue
7 + * @Description:
8 +-->
9 +<template>
10 + <div class="video-wrapper">
11 + <div class="label">
12 + {{ item.component_props.label }}
13 + </div>
14 + <div id="mui-player" class="video-div" />
15 + </div>
16 +</template>
17 +
18 +<script setup>
19 +/**
20 + * 视频组件通用模块
21 + */
22 +import "mui-player/dist/mui-player.min.css";
23 +import MuiPlayer from "mui-player";
24 +import { onMounted } from "vue";
25 +import { useEventListener } from "@/composables";
26 +
27 +// 视频基础属性
28 +const props = defineProps({
29 + item: Object,
30 +});
31 +// 视频播放事件回调
32 +const emit = defineEmits(["active"]);
33 +let video = null;
34 +onMounted(() => {
35 + const mp = new MuiPlayer({
36 + container: "#mui-player",
37 + // title: props.item.component_props.title,
38 + src: props.item.component_props.src,
39 + poster: props.item.component_props.cover,
40 + autoFit: false,
41 + videoAttribute: [
42 + // 声明启用同层播放, 不让会自动全屏播放
43 + { attrKey: "webkit-playsinline", attrValue: "webkit-playsinline" },
44 + { attrKey: "playsinline", attrValue: "playsinline" },
45 + { attrKey: "x5-video-player-type", attrValue: "h5-page" },
46 + ],
47 + });
48 + video = mp.video();
49 + //视频播放事件监听
50 + video.addEventListener("play", function () {
51 + props.item.value = { key: "video", value: "play" };
52 + emit("active", props.item.value);
53 + });
54 + // 配置16:9高度比
55 + const width = document.getElementById("mui-player").clientWidth;
56 + const height = (width * 9) / 16;
57 + document.getElementById("mui-player").height = height;
58 +});
59 +
60 +onUnmounted(() => {
61 + video.removeEventListener("play", function () {});
62 +});
63 +</script>
64 +
65 +<style lang="less" scoped>
66 +.video-wrapper {
67 + position: relative;
68 + margin: 1rem 0;
69 + border-bottom-left-radius: 5px;
70 + border-bottom-right-radius: 5px;
71 + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
72 +
73 + .video-div {
74 + // border-top-left-radius: 5px;
75 + // border-top-right-radius: 5px;
76 + border-radius: 5px;
77 + }
78 +
79 + .video-bar {
80 + color: #713610;
81 + padding: 1rem;
82 + padding-bottom: 0.5rem;
83 + }
84 +}
85 +
86 +/deep/.back-button {
87 + display: none !important;
88 +}
89 +</style>
1 +export default [
2 + {
3 + "id": 315040,
4 + "localism_type": "普通话",
5 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095780.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:3kZFL-LK1CP0k8Iiewr6d4_kCas=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU3ODAucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
6 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095775.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2gmHTr1opoFCeuYjRPvxabflLZM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU3NzUubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
7 + "note": "Z",
8 + "status": "apply",
9 + "check_note": null,
10 + "kg_id": 314048,
11 + "kg_name": "上海市杨浦区科技幼儿园",
12 + "perf_id": 314880,
13 + "name": "王申羽",
14 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
15 + "book_id": 314483,
16 + "book_name": "《它们从哪里来》",
17 + "comment_num": 0,
18 + "like_num": 0,
19 + "favor_num": 0,
20 + "play_num": 0,
21 + "is_like": 0
22 + },
23 + {
24 + "id": 315041,
25 + "localism_type": "沪语",
26 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095788.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:km1-cl6r3X9BwYekqZHyo4kzbWo=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU3ODgucG5nKiIsIkUiOjE5Njg2NjUzMTB9",
27 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095786.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9kK2Nf96oLV0_t5dKXLnEC0QBLM=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU3ODYubXA0KiIsIkUiOjE5Njg2NjUzMTB9",
28 + "note": "Z",
29 + "status": "apply",
30 + "check_note": null,
31 + "kg_id": 314048,
32 + "kg_name": "上海市杨浦区科技幼儿园",
33 + "perf_id": 314880,
34 + "name": "王申羽",
35 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
36 + "book_id": 314483,
37 + "book_name": "《它们从哪里来》",
38 + "comment_num": 0,
39 + "like_num": 0,
40 + "favor_num": 0,
41 + "play_num": 0,
42 + "is_like": 0
43 + },
44 + {
45 + "id": 315036,
46 + "localism_type": "普通话",
47 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095579.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:TbYtglmAQrmsCpKulfIkdjrYsjc=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTU1NzkucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
48 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095576.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:CIcNhT-g-lmC1mv253Nnoz7EVKQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTU1NzYubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
49 + "note": "Z",
50 + "status": "apply",
51 + "check_note": null,
52 + "kg_id": 314048,
53 + "kg_name": "上海市杨浦区科技幼儿园",
54 + "perf_id": 314880,
55 + "name": "王申羽",
56 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
57 + "book_id": 314483,
58 + "book_name": "《它们从哪里来》",
59 + "comment_num": 0,
60 + "like_num": 0,
61 + "favor_num": 0,
62 + "play_num": 0,
63 + "is_like": 0
64 + },
65 + {
66 + "id": 315037,
67 + "localism_type": "沪语",
68 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095586.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:MaeVQ6AUQNzcWKDaMExdr7pFpZU=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTU1ODYucG5nKiIsIkUiOjE5Njg2NjUxMjd9",
69 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095584.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:Ox6WCAeG4ImThDZaoEc2v3mrcb8=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTU1ODQubXA0KiIsIkUiOjE5Njg2NjUxMjd9",
70 + "note": "Z",
71 + "status": "apply",
72 + "check_note": null,
73 + "kg_id": 314048,
74 + "kg_name": "上海市杨浦区科技幼儿园",
75 + "perf_id": 314880,
76 + "name": "王申羽",
77 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
78 + "book_id": 314483,
79 + "book_name": "《它们从哪里来》",
80 + "comment_num": 0,
81 + "like_num": 0,
82 + "favor_num": 0,
83 + "play_num": 0,
84 + "is_like": 0
85 + },
86 + {
87 + "id": 315033,
88 + "localism_type": "沪语",
89 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653095145.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:dzCQntH7aBmPGYyxvmiOTwgr8WY=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTUxNDUucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
90 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653095142.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:IygI0aLGuFR_DEgRtmsbNjAhVS0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTUxNDIubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
91 + "note": "2",
92 + "status": "apply",
93 + "check_note": null,
94 + "kg_id": 314048,
95 + "kg_name": "上海市杨浦区科技幼儿园",
96 + "perf_id": 314880,
97 + "name": "王申羽",
98 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
99 + "book_id": 314483,
100 + "book_name": "《它们从哪里来》",
101 + "comment_num": 0,
102 + "like_num": 0,
103 + "favor_num": 0,
104 + "play_num": 0,
105 + "is_like": 0
106 + },
107 + {
108 + "id": 315032,
109 + "localism_type": "普通话",
110 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
111 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
112 + "note": "1",
113 + "status": "apply",
114 + "check_note": null,
115 + "kg_id": 314048,
116 + "kg_name": "上海市杨浦区科技幼儿园",
117 + "perf_id": 314880,
118 + "name": "王申羽",
119 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
120 + "book_id": 314483,
121 + "book_name": "《它们从哪里来》",
122 + "comment_num": 0,
123 + "like_num": 0,
124 + "favor_num": 0,
125 + "play_num": 0,
126 + "is_like": 0
127 + },
128 + {
129 + "id": 315024,
130 + "localism_type": "普通话",
131 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094501.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:0fDZL_C8youKy-IftSFwyr3c36g=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ1MDEucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
132 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094499.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:BHD2B4D_CDzu9Tw48SvPAgfuJ90=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0OTkubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
133 + "note": "1",
134 + "status": "apply",
135 + "check_note": null,
136 + "kg_id": 314048,
137 + "kg_name": "上海市杨浦区科技幼儿园",
138 + "perf_id": 314880,
139 + "name": "王申羽",
140 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
141 + "book_id": 314483,
142 + "book_name": "《它们从哪里来》",
143 + "comment_num": 0,
144 + "like_num": 0,
145 + "favor_num": 0,
146 + "play_num": 0,
147 + "is_like": 0
148 + },
149 + {
150 + "id": 315025,
151 + "localism_type": "沪语",
152 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094509.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:qSjAFNlU3o6SduJzStxg49A8SK0=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ1MDkucG5nKiIsIkUiOjE5Njg2NjQwNDF9",
153 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094506.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:2Khn4cIo2mJo6Ty6qRvLB0Uus48=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ1MDYubXA0KiIsIkUiOjE5Njg2NjQwNDF9",
154 + "note": "2",
155 + "status": "apply",
156 + "check_note": null,
157 + "kg_id": 314048,
158 + "kg_name": "上海市杨浦区科技幼儿园",
159 + "perf_id": 314880,
160 + "name": "王申羽",
161 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
162 + "book_id": 314483,
163 + "book_name": "《它们从哪里来》",
164 + "comment_num": 0,
165 + "like_num": 0,
166 + "favor_num": 0,
167 + "play_num": 0,
168 + "is_like": 0
169 + },
170 + {
171 + "id": 315021,
172 + "localism_type": "沪语",
173 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_81_1653094433.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:AfRlQR8HGWV0y9kAeEAKd7jhj6I=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzgxXzE2NTMwOTQ0MzMucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
174 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_80_1653094431.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PjpJx-lC2kILJPBlpPJuJMqslrE=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzgwXzE2NTMwOTQ0MzEubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
175 + "note": "Z",
176 + "status": "apply",
177 + "check_note": null,
178 + "kg_id": 314048,
179 + "kg_name": "上海市杨浦区科技幼儿园",
180 + "perf_id": 314880,
181 + "name": "王申羽",
182 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
183 + "book_id": 314483,
184 + "book_name": "《它们从哪里来》",
185 + "comment_num": 0,
186 + "like_num": 0,
187 + "favor_num": 0,
188 + "play_num": 0,
189 + "is_like": 0
190 + },
191 + {
192 + "id": 315020,
193 + "localism_type": "普通话",
194 + "cover": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653094425.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:9BOVLskMMLE-pbqmb5rK_5qncNQ=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTQ0MjUucG5nKiIsIkUiOjE5Njg2NjM5NTV9",
195 + "video": "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653094423.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:uEz_Ke-BuliSvPQkvdwOAe42Hyk=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTQ0MjMubXA0KiIsIkUiOjE5Njg2NjM5NTV9",
196 + "note": "Z",
197 + "status": "apply",
198 + "check_note": null,
199 + "kg_id": 314048,
200 + "kg_name": "上海市杨浦区科技幼儿园",
201 + "perf_id": 314880,
202 + "name": "王申羽",
203 + "avatar": "https://cdn.ipadbiz.cn/ipadbiz/Njg3ZjY5Yzk2NGJhOWQ2NGNjODJmMzBhYWM2NmE3NDJhOTI2NTljNA.jpeg",
204 + "book_id": 314483,
205 + "book_name": "《它们从哪里来》",
206 + "comment_num": 0,
207 + "like_num": 0,
208 + "favor_num": 0,
209 + "play_num": 0,
210 + "is_like": 0
211 + }
212 +]
1 +<!--
2 + * @Author: hookehuyr hookehuyr@gmail.com
3 + * @Date: 2022-05-23 18:00:39
4 + * @LastEditors: hookehuyr hookehuyr@gmail.com
5 + * @LastEditTime: 2022-06-02 17:41:38
6 + * @FilePath: /tswj/src/components/MuiVideo/test.vue
7 + * @Description: 视频播放通用组件演示组件
8 + * @Description: type: video 为纯视频播放框，bookDetail为定制模式
9 +-->
10 +<template>
11 + <mui-video
12 + v-for="(item, index) in mock"
13 + :key="index"
14 + :item="item"
15 + type="video"
16 + @on-play="onPlay"
17 + />
18 +</template>
19 +
20 +<script setup>
21 + import mock from '@/components/MuiVideo/mock';
22 + import MuiVideo from '@/components/MuiVideo/index';
23 + import { ref } from 'vue';
24 + import { useRoute, useRouter } from 'vue-router';
25 +
26 + import {
27 + Cookies,
28 + $,
29 + _,
30 + axios,
31 + storeToRefs,
32 + mainStore,
33 + Toast,
34 + useTitle,
35 + } from '@/utils/generatePackage.js';
36 + //import { } from '@/utils/generateModules.js'
37 + //import { } from '@/utils/generateIcons.js'
38 + //import { } from '@/composables'
39 + const $route = useRoute();
40 + const $router = useRouter();
41 + useTitle($route.meta.title);
42 +
43 + const onPlay = ({ event, props }) => {
44 + console.warn(event);
45 + console.warn(props);
46 + };
47 +</script>
48 +
49 +<style
50 + lang="less"
51 + scoped></style>
...@@ -19,6 +19,7 @@ import IdentityField from '@/components/IdentityField/index.vue' ...@@ -19,6 +19,7 @@ import IdentityField from '@/components/IdentityField/index.vue'
19 import NumberField from '@/components/NumberField/index.vue' 19 import NumberField from '@/components/NumberField/index.vue'
20 import DesField from '@/components/DesField/index.vue' 20 import DesField from '@/components/DesField/index.vue'
21 import DividerField from '@/components/DividerField/index.vue' 21 import DividerField from '@/components/DividerField/index.vue'
22 +import VideoField from '@/components/VideoField/index.vue'
22 23
23 /** 24 /**
24 * 生成自定义组件类型 25 * 生成自定义组件类型
...@@ -39,6 +40,9 @@ import DividerField from '@/components/DividerField/index.vue' ...@@ -39,6 +40,9 @@ import DividerField from '@/components/DividerField/index.vue'
39 * @type rate_picker 评分选择器 RatePickerField 40 * @type rate_picker 评分选择器 RatePickerField
40 * @type calendar 日历选择器 CalendarField 41 * @type calendar 日历选择器 CalendarField
41 * @type id_code 日历选择器 IdentityField 42 * @type id_code 日历选择器 IdentityField
43 + * @type desc 文字描述 DesField
44 + * @type divider 分割线 DividerField
45 + * @type video 视频控件 VideoField
42 */ 46 */
43 export function createComponentType(data) { 47 export function createComponentType(data) {
44 // 判断类型和使用组件 48 // 判断类型和使用组件
...@@ -119,5 +123,9 @@ export function createComponentType(data) { ...@@ -119,5 +123,9 @@ export function createComponentType(data) {
119 item.name = item.key; 123 item.name = item.key;
120 item.component = DividerField; 124 item.component = DividerField;
121 } 125 }
126 + if (item.component_props.name === 'video') {
127 + item.name = item.key;
128 + item.component = VideoField;
129 + }
122 }) 130 })
123 } 131 }
......
1 <!-- 1 <!--
2 * @Date: 2022-07-18 10:22:22 2 * @Date: 2022-07-18 10:22:22
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-11-21 15:38:24 4 + * @LastEditTime: 2022-11-22 17:40:19
5 * @FilePath: /data-table/src/views/index.vue 5 * @FilePath: /data-table/src/views/index.vue
6 * @Description: 首页 6 * @Description: 首页
7 --> 7 -->
...@@ -61,12 +61,14 @@ const formatData = (data) => { ...@@ -61,12 +61,14 @@ const formatData = (data) => {
61 }; 61 };
62 Object.assign(component_props, obj); 62 Object.assign(component_props, obj);
63 }); 63 });
64 - arr.push({ 64 + // 绑定组件名称标识
65 + const temp = {
65 key: field.field_name, 66 key: field.field_name,
66 value: "", 67 value: "",
67 - component: "", 68 + component: field.component_code,
68 component_props, 69 component_props,
69 - }); 70 + };
71 + arr.push(temp);
70 }); 72 });
71 return arr; 73 return arr;
72 }; 74 };
...@@ -79,14 +81,16 @@ onMounted(async () => { ...@@ -79,14 +81,16 @@ onMounted(async () => {
79 formData.value = formatData(form_data.field_list); 81 formData.value = formatData(form_data.field_list);
80 // mockData.value = [ 82 // mockData.value = [
81 // { 83 // {
82 - // key: "phone", 84 + // key: "video",
83 - // value: "", 85 + // value: "false",
84 // component: "", 86 // component: "",
85 // component_props: { 87 // component_props: {
86 - // name: "phone", 88 + // name: "video",
87 - // label: "手机号", 89 + // label: "视频标题",
88 - // placeholder: "请输入手机号", 90 + // src:
89 - // required: true, 91 + // "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
92 + // cover:
93 + // "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
90 // }, 94 // },
91 // }, 95 // },
92 // ]; 96 // ];
...@@ -97,8 +101,15 @@ onMounted(async () => { ...@@ -97,8 +101,15 @@ onMounted(async () => {
97 101
98 const sign = ref(null); 102 const sign = ref(null);
99 const rate_picker = ref(null); 103 const rate_picker = ref(null);
104 +const video = ref(null);
100 105
101 const onSubmit = async (values) => { 106 const onSubmit = async (values) => {
107 + // 不是默认输入值类型的控件，需要重构结构，把相应key/value绑定进去
108 + formData.value.forEach((item) => {
109 + if (item.component_props.name === "video") {
110 + postData.value = _.assign(postData.value, { [item.key]: item.value });
111 + }
112 + });
102 // 合并自定义字段到提交表单字段 113 // 合并自定义字段到提交表单字段
103 postData.value = _.assign(postData.value, values); 114 postData.value = _.assign(postData.value, values);
104 // 检查非表单输入项 115 // 检查非表单输入项
......
...@@ -2202,10 +2202,10 @@ ...@@ -2202,10 +2202,10 @@
2202 "resolved" "https://mirrors.cloud.tencent.com/npm/ms/-/ms-2.1.3.tgz" 2202 "resolved" "https://mirrors.cloud.tencent.com/npm/ms/-/ms-2.1.3.tgz"
2203 "version" "2.1.3" 2203 "version" "2.1.3"
2204 2204
2205 -"mui-player@^1.6.0": 2205 +"mui-player@^1.7.0":
2206 - "integrity" "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA==" 2206 + "integrity" "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ=="
2207 - "resolved" "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz" 2207 + "resolved" "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz"
2208 - "version" "1.6.0" 2208 + "version" "1.7.0"
2209 2209
2210 "mutation-observer@^1.0.3": 2210 "mutation-observer@^1.0.3":
2211 "integrity" "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==" 2211 "integrity" "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
......