Commit 29b696f119520c1649bee6ac31f1b37965cd9299
Merge branch 'ft-dev' into 'main'
fix: 修复视频管理关闭时还有声音问题,和清除控制台报黄问题, fix: 修复个人资料头像不全问题和限制用户名称问题 See merge request huang/yun-teng-iot-front!219
Showing
5 changed files
with
52 additions
and
40 deletions
1 | import { FormSchema } from '/@/components/Table'; | 1 | import { FormSchema } from '/@/components/Table'; |
2 | -import { phoneRule, emailRule } from '/@/utils/rules'; | 2 | +import { phoneRule, emailRule, ChineseRegVerify } from '/@/utils/rules'; |
3 | 3 | ||
4 | export const formSchema: FormSchema[] = [ | 4 | export const formSchema: FormSchema[] = [ |
5 | { | 5 | { |
@@ -9,8 +9,10 @@ export const formSchema: FormSchema[] = [ | @@ -9,8 +9,10 @@ export const formSchema: FormSchema[] = [ | ||
9 | required: true, | 9 | required: true, |
10 | component: 'Input', | 10 | component: 'Input', |
11 | componentProps: { | 11 | componentProps: { |
12 | + maxLength: 10, | ||
12 | placeholder: '请输入用户昵称', | 13 | placeholder: '请输入用户昵称', |
13 | }, | 14 | }, |
15 | + rules: ChineseRegVerify, | ||
14 | }, | 16 | }, |
15 | { | 17 | { |
16 | field: 'phoneNumber', | 18 | field: 'phoneNumber', |
@@ -24,28 +24,29 @@ | @@ -24,28 +24,29 @@ | ||
24 | > | 24 | > |
25 | <div class="change-avatar" style="text-align: center"> | 25 | <div class="change-avatar" style="text-align: center"> |
26 | <div class="mb-2" style="font-weight: 700">个人头像</div> | 26 | <div class="mb-2" style="font-weight: 700">个人头像</div> |
27 | - <div style="text-align: center; width: 100%"> | ||
28 | - <Upload | ||
29 | - style="width: 20vw" | ||
30 | - name="avatar" | ||
31 | - list-type="picture-card" | ||
32 | - class="avatar-uploader" | ||
33 | - :show-upload-list="false" | ||
34 | - :customRequest="customUploadqrcodePic" | ||
35 | - :before-upload="beforeUploadqrcodePic" | ||
36 | - > | ||
37 | - <img | ||
38 | - style="text-align: center; border-radius: 50%" | ||
39 | - v-if="peresonalPic" | ||
40 | - :src="peresonalPic" | ||
41 | - alt="avatar" | ||
42 | - /> | ||
43 | - <div v-else> | ||
44 | - <div style="margin-top: 5.2vh; margin-left: 3.21vw"> | ||
45 | - <PlusOutlined style="font-size: 30px" /> | 27 | + <div style="display: flex; align-items: center; justify-content: center; width: 35.6rem"> |
28 | + <div> | ||
29 | + <Upload | ||
30 | + name="avatar" | ||
31 | + list-type="picture-card" | ||
32 | + class="avatar-uploader" | ||
33 | + :show-upload-list="false" | ||
34 | + :customRequest="customUploadqrcodePic" | ||
35 | + :before-upload="beforeUploadqrcodePic" | ||
36 | + > | ||
37 | + <img | ||
38 | + style="border-radius: 50%; height: 8.75rem; width: 10rem" | ||
39 | + v-if="peresonalPic" | ||
40 | + :src="peresonalPic" | ||
41 | + alt="avatar" | ||
42 | + /> | ||
43 | + <div v-else> | ||
44 | + <div style="margin-top: 5.2vh; margin-left: 3.21vw"> | ||
45 | + <PlusOutlined style="font-size: 30px" /> | ||
46 | + </div> | ||
46 | </div> | 47 | </div> |
47 | - </div> | ||
48 | - </Upload> | 48 | + </Upload> |
49 | + </div> | ||
49 | </div> | 50 | </div> |
50 | </div> | 51 | </div> |
51 | <Description | 52 | <Description |
@@ -245,22 +246,9 @@ | @@ -245,22 +246,9 @@ | ||
245 | <style scoped lang="less"> | 246 | <style scoped lang="less"> |
246 | .change-avatar { | 247 | .change-avatar { |
247 | :deep .ant-upload-select-picture-card { | 248 | :deep .ant-upload-select-picture-card { |
248 | - display: inherit; | ||
249 | - float: none; | ||
250 | - width: 35%; | ||
251 | - height: 0; | ||
252 | - padding-bottom: 35%; | ||
253 | - margin: 0; | ||
254 | - | ||
255 | - // width: 8.6vw; | ||
256 | - // height: 17vh; | ||
257 | - // margin-right: 0.2vw; | ||
258 | - // margin-bottom: 0.2vw; | ||
259 | - text-align: center; | ||
260 | - vertical-align: top; | ||
261 | - background-color: #fafafa; | ||
262 | - border: 1px dashed #d9d9d9; | ||
263 | border-radius: 50%; | 249 | border-radius: 50%; |
250 | + width: 10rem; | ||
251 | + overflow: hidden; | ||
264 | cursor: pointer; | 252 | cursor: pointer; |
265 | transition: border-color 0.3s ease; | 253 | transition: border-color 0.3s ease; |
266 | } | 254 | } |
@@ -65,6 +65,21 @@ export const EmailRegexp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a | @@ -65,6 +65,21 @@ export const EmailRegexp = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a | ||
65 | // 手机号正则 | 65 | // 手机号正则 |
66 | export const PhoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; | 66 | export const PhoneRegexp = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; |
67 | 67 | ||
68 | +//中文正则 | ||
69 | +export const ChineseRegVerify: Rule[] = [ | ||
70 | + { | ||
71 | + required: true, | ||
72 | + validator: (_, value: string) => { | ||
73 | + const ChineseRegexp = /[\u4E00-\u9FA5]/; | ||
74 | + if (!ChineseRegexp.test(value)) { | ||
75 | + return Promise.reject('用户名只能是中文'); | ||
76 | + } | ||
77 | + return Promise.resolve(); | ||
78 | + }, | ||
79 | + validateTrigger: 'blur', | ||
80 | + }, | ||
81 | +]; | ||
82 | + | ||
68 | /** | 83 | /** |
69 | * 视频管理 | 84 | * 视频管理 |
70 | */ | 85 | */ |
@@ -11,7 +11,7 @@ | @@ -11,7 +11,7 @@ | ||
11 | > | 11 | > |
12 | <div class="video-sty"> | 12 | <div class="video-sty"> |
13 | <div> | 13 | <div> |
14 | - <vue3videoPlay v-bind="options" :poster="videoPoster" /> | 14 | + <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" /> |
15 | </div> | 15 | </div> |
16 | </div> | 16 | </div> |
17 | </BasicModal> | 17 | </BasicModal> |
@@ -32,11 +32,14 @@ | @@ -32,11 +32,14 @@ | ||
32 | emits: ['success', 'register'], | 32 | emits: ['success', 'register'], |
33 | setup() { | 33 | setup() { |
34 | let options: any = reactive({}); | 34 | let options: any = reactive({}); |
35 | + const videoRef: any = ref(null); | ||
36 | + const videoUrl = ref<String>(''); | ||
35 | const videoPoster = ref(''); | 37 | const videoPoster = ref(''); |
36 | const heightNum = ref(800); | 38 | const heightNum = ref(800); |
37 | const [register] = useModalInner(async (data) => { | 39 | const [register] = useModalInner(async (data) => { |
38 | if (data) { | 40 | if (data) { |
39 | if (data.record.videoUrl) { | 41 | if (data.record.videoUrl) { |
42 | + videoUrl.value = data.record.videoUrl; | ||
40 | nextTick(() => { | 43 | nextTick(() => { |
41 | /** | 44 | /** |
42 | * options配置项(使用vue3-video-play插件) | 45 | * options配置项(使用vue3-video-play插件) |
@@ -73,13 +76,18 @@ | @@ -73,13 +76,18 @@ | ||
73 | } | 76 | } |
74 | } | 77 | } |
75 | }); | 78 | }); |
76 | - const handleCancel = () => {}; | 79 | + const handleCancel = () => { |
80 | + //关闭暂停播放视频 | ||
81 | + videoRef.value.pause(); | ||
82 | + }; | ||
77 | return { | 83 | return { |
78 | register, | 84 | register, |
79 | handleCancel, | 85 | handleCancel, |
80 | options, | 86 | options, |
81 | heightNum, | 87 | heightNum, |
82 | videoPoster, | 88 | videoPoster, |
89 | + videoRef, | ||
90 | + videoUrl, | ||
83 | }; | 91 | }; |
84 | }, | 92 | }, |
85 | }); | 93 | }); |
@@ -2,7 +2,6 @@ | @@ -2,7 +2,6 @@ | ||
2 | <div> | 2 | <div> |
3 | <BasicTable | 3 | <BasicTable |
4 | :rowSelection="{ type: 'checkbox' }" | 4 | :rowSelection="{ type: 'checkbox' }" |
5 | - @selection-change="useSelectionChange" | ||
6 | @register="registerTable" | 5 | @register="registerTable" |
7 | :clickToRowSelect="false" | 6 | :clickToRowSelect="false" |
8 | > | 7 | > |