Commit a4ada4e069094a3167f3f865c962c8c1857e342c

Authored by fengtao
1 parent 0f61b62f

fix: 修复个人资料头像不全问题和限制用户名称问题

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