Hooke / data-table

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

新增视频控件

Expand all
Inline Side-by-side
Showing 8 changed files with 182 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>
This diff is collapsed. Click to expand it.
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=="
......