feat:小程序增加客户注册页面，修改页面若干bug

yangan

2024-04-25 ffc2eddb1c4f534075fdc5787cbca06e847c576c

 pages/register/register.vue

@@ -17,7 +17,6 @@
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     :customStyle="{ marginBottom: '8px' }"
                     v-for="(item, index) in radiolist1"
                     :key="index"
                     :label="item.name"
@@ -73,6 +72,45 @@
                  clearable
                  @blur="jiaoYanPassword"></u--input>
            </u-form-item>
            <!-- 客户独有的  是否管理员--> 

            <u-form-item labelWidth="30%"
               label="是否管理员"
               borderBottom
               prop="isHostUser"
               v-if="radiovalue1 == '客户'"
               ref="roleRef"
               required>
               <u-radio-group v-model="registerFormModel.isHostUser"
                  placement="row"
                  size="30"
                  shape="circle"
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     :key="0"
                     :label="'是'"
                     :name="0"></u-radio>
                     <u-radio labelSize="14px"
                     size="20px"
                     :key="1"
                     :label="'否'"
                     :name="1"></u-radio>
               </u-radio-group>
            </u-form-item>

            <u-form-item prop="invitationCode"
               label="邀请码"
               v-if="radiovalue1 == '客户'"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.invitationCode"
                  placeholder="请输入邀请码"
                  password
                  clearable
                  @blur="jiaoYanPassword"></u--input>
            </u-form-item>
            <u-form-item prop="carNo"
               label="车牌号"
               labelWidth="20%"
@@ -100,8 +138,6 @@
                  width="250"
                  height="150"
                  :previewFullImage="true">
                  <!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                  mode="widthFix" style="width: 250px;height: 150px;"></image> -->
               </u-upload>
            </u-form-item>
            <u-form-item prop="drivingImg"
@@ -121,16 +157,95 @@
                  width="250"
                  height="150"
                  :previewFullImage="true">
                  <!-- <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png"
                  mode="widthFix" style="width: 250px;height: 150px;"></image> -->
               </u-upload>
            </u-form-item>
            <u-form-item label="推荐人账号"
               labelWidth="25%"
               borderBottom>
               <u--input v-model="registerFormModel.tuiJianMa"
                  placeholder="请输入内容"
                  clearable></u--input>
            <u-form-item prop="roadTransportImg"
               label="道路运输证"
               labelWidth="24%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList3"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="3"
                  multiple
                  :maxCount="1"
                  width="250"
                  height="150"
                  :previewFullImage="true">
               </u-upload>
            </u-form-item>
            <u-form-item prop="tradeQualificationImg"
               label="从业资格证"
               labelWidth="24%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList4"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="4"
                  multiple
                  :maxCount="1"
                  width="250"
                  height="150"
                  :previewFullImage="true">
               </u-upload>
            </u-form-item>
            <u-form-item prop="inventoryImg"
               label="环保清单"
               labelWidth="24%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               @click="beforeRead">
               <u-upload :fileList="fileList5"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
                  name="5"
                  multiple
                  :maxCount="3"
                  width="250"
                  height="150"
                  :previewFullImage="true">
               </u-upload>
            </u-form-item>
            <u-form-item label="是否非煤车辆"
               v-if="radiovalue1 == '司机'"
               labelWidth="30%"
               borderBottom
               prop="isNonCoal">
               <u-checkbox-group v-model="registerFormModel.isNonCoal"
                  placement="row"
                  size="40"
                  @change="isNonCoalChange">
                  <u-checkbox name="是"
                     label-size="30">
                  </u-checkbox>
               </u-checkbox-group>
            </u-form-item>
            <u-form-item labelWidth="20%"
               v-if="radiovalue1 == '司机'"
               label="车辆类型"
               borderBottom
               prop="countryNumberCar">
               <u-radio-group v-model="registerFormModel.countryNumberCar"
                  placement="row"
                  size="30"
                  shape="circle"
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     v-for="(item, index) in countryNumberCarList"
                     :key="index"
                     :label="item.label"
                     :name="item.name"></u-radio>
               </u-radio-group>
            </u-form-item>
         </u--form>
      </view>
@@ -146,12 +261,6 @@
            type="primary"
            @click="registerClick"
            :loading="registerClickloading"></u-button></view>
      <!-- 图片预览弹出框 -->
      <!-- <view class="previewImage-container">
         <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen">
            <u--image :src="previewImageSrc != null ? BaseUrl + previewImageSrc : ''" width="400px" height="400px"></u--image>
         </u-popup>
      </view> -->
   </view>
</template>

@@ -160,27 +269,9 @@
   import { BaseUrl } from '@/api/publicInterface.js';
   import { mapMutations } from 'vuex';
   export default {
      // onLoad: function() {
      //   // 查看是否授权
      //   wx.getSetting({
      //     success (res){
      //       if (res.authSetting['scope.userInfo']) {
      //         // 已经授权，可以直接调用 getUserInfo 获取头像昵称
      //         wx.getUserInfo({
      //           success: function(res) {
      //             console.log('res.userInfo',res.userInfo)
      //           }
      //         })
      //       }
      //     }
      //   })
      // },
      // 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
      onReady() {
         this.$refs.regesterFormRef.setRules(this.rules);
         // this.$refs.regesterFormRef.validate().then(res => {}).catch(err => {
         //   console.log(err);
         // })
      },
      onLoad(params) {
         if (params) {
@@ -199,17 +290,35 @@
               name: '',
               username: '',
               openId: '',
               type: 2,
               type: 3,
               idCard: '',
               isHostUser:'',
               carNo: '',
               carImg: '',
               drivingImg: '',
               tuiJianMa: '',
               confirmPassword: ''
               invitationCode:'', //邀请码
               confirmPassword: '',
               tradeQualificationImg: '',
               roadTransportImg: '',
               isNonCoal: [],
               isCoalCar: 1, //是否为煤炭车辆(司机使用字段) 1 是 2 不是
               inventoryImg: '',
               countryNumberCar: 0, //车辆类型;国五 1，国六 2
            },
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            fileList5: [],
            fileList6: [],
            rules: {
               inventoryImg: {
                  required: false,
               },
               countryNumberCar: {
                  required: false,
               },
               name: {
                  type: 'string',
                  required: true,
@@ -224,12 +333,13 @@
                  },
                  {
                     pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                     message: '身份证号格式不正确'
                     message: '身份证号格式不正确',
                     trigger: ['blur', 'change']
                  }
               ],
               phone: [{
                     required: true,
                     message: '此项为必填项',
                     message: '请输入手机号',
                     // blur和change事件触发检验
                     trigger: ['blur', 'change']
                  },
@@ -242,7 +352,7 @@
                     validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                     },
                     message: '手机号码不正确',
                     message: '手机号码格式不正确',
                     trigger: ['change', 'blur']
                  }
               ],
@@ -296,20 +406,47 @@
                  required: true,
                  message: '请上传行驶证照片',
                  trigger: ['blur', 'change']
               }
               },
               roadTransportImg: {
                  type: 'string',
                  required: true,
                  message: '请上传道路运输证照片',
                  trigger: ['blur', 'change']
               },
               tradeQualificationImg: {
                  type: 'string',
                  required: true,
                  message: '请上传从业资格证照片',
                  trigger: ['blur', 'change']
               },
            },
            // 基本案列数据
            radiolist1: [{
                  name: '司机',
                  disabled: false
               },
               {
                  name: '货代',
                  disabled: false
               },
               {
                  name: '司机',
                  name: '客户',
                  disabled: false
               }
            ],
            // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
            radiovalue1: '货代',
            countryNumberCarList: [{
                  name: 1,
                  label: '国五',
               },
               {
                  name: 2,
                  label: '国六',
               },
               {
                  name: 3,
                  label: '新能源',
               }
            ],
            radiovalue1: '司机',
            beforeChangeValue: '',
            // 更换角色弹框
            editRoleModelShow: false,
@@ -317,7 +454,7 @@
            content: '当前填入信息，切换角色后，即清除，是否切换？',
            wxcode: '',
            openid: '',
            registerClickloading: false
            registerClickloading: false,
         };
      },
      watch: {
@@ -337,6 +474,9 @@
               case '司机':
                  this.registerFormModel.type = 3;
                  break;
               case '客户':
                  this.registerFormModel.type = 1;
                  break;
               default:
                  break;
            }
@@ -350,7 +490,7 @@
               this.$refs.regesterFormRef
                  .validate()
                  .then(res => {
                     console.log(this.registerFormModel);
                     console.log(this.registerFormModel,'isHostUserisHostUser');
                     this.registerClickloading = true;
                     this.registerFormModel.username = this.registerFormModel.phone;
                     apiRegister(this.registerFormModel)
@@ -442,15 +582,24 @@
                  url: BaseUrl + '/admin/sys-file/uploadUnToken',
                  filePath: url,
                  name: 'file',
                  formData: {
                     // user: ''
                  },
                  success: res => {
                     if (num == 1) {
                        this.registerFormModel.carImg = JSON.parse(res.data).data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     } else if (num == 2) {
                        this.registerFormModel.drivingImg = JSON.parse(res.data).data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     } else if (num == 3) {
                        this.registerFormModel.roadTransportImg = JSON.parse(res.data).data
                           .url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     } else if (num == 4) {
                        this.registerFormModel.tradeQualificationImg = JSON.parse(res.data)
                           .data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     } else if (num == 5) {
                        this.registerFormModel.inventoryImg = JSON.parse(res.data)
                           .data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     }
                  }
@@ -476,6 +625,9 @@
            this.$nextTick(() => {
               this.editRoleModelShow = false;
            });
         },
         isNonCoalChange() {
            this.registerFormModel.isCoalCar = this.registerFormModel.isNonCoal.length !== 0 ? 1 : 2
         }
      }
   };