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 | > |