qingyiay
2023-08-08 40a7d8db73f81ad10de03684dc9f6720e18cc315
pages/register/register.vue
@@ -1,42 +1,96 @@
<template>
   <view class="register">
      <view class="registerForm">
         <u--form :rules="rules" :model="registerFormModel" ref="regesterFormRef">
            <u-form-item labelWidth="20%" label="选择身份" borderBottom ref="roleRef" required>
               <u-radio-group v-model="radiovalue1" placement="row" @change="groupChange" size="30" shape="circle" iconSize="20">
                  <u-radio
                     labelSize="14px"
         <u--form :rules="rules"
            :model="registerFormModel"
            ref="regesterFormRef">
            <u-form-item labelWidth="20%"
               label="选择身份"
               borderBottom
               ref="roleRef"
               required>
               <u-radio-group v-model="radiovalue1"
                  placement="row"
                  @change="groupChange"
                  size="30"
                  shape="circle"
                  iconSize="20">
                  <u-radio labelSize="14px"
                     size="20px"
                     :customStyle="{ marginBottom: '8px' }"
                     v-for="(item, index) in radiolist1"
                     :key="index"
                     :label="item.name"
                     :name="item.name"
                     @change="radioChange"
                  ></u-radio>
                     @change="radioChange"></u-radio>
               </u-radio-group>
            </u-form-item>
            <u-form-item prop="name" label="姓名" labelWidth="20%" borderBottom required>
               <u--input v-model="registerFormModel.name" placeholder="请输入内容" clearable></u--input>
            <u-form-item prop="name"
               label="姓名"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.name"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="idCard" label="身份证" labelWidth="20%" borderBottom required>
               <u--input v-model="registerFormModel.idCard" placeholder="请输入内容" clearable></u--input>
            <u-form-item prop="idCard"
               label="身份证"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.idCard"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="phone" label="手机号" labelWidth="20%" borderBottom required>
               <u--input v-model="registerFormModel.phone" placeholder="请输入内容" clearable></u--input>
            <u-form-item prop="phone"
               label="手机号"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.phone"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="password" label="密码" labelWidth="20%" borderBottom required>
               <u--input v-model="registerFormModel.password" placeholder="请输入内容" password clearable></u--input>
            <u-form-item prop="password"
               label="密码"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.password"
                  placeholder="请输入内容"
                  password
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="confirmPassword" label="确认密码" labelWidth="20%" borderBottom required>
               <u--input v-model="registerFormModel.confirmPassword" placeholder="请输入内容" password clearable @blur="jiaoYanPassword"></u--input>
            <u-form-item prop="confirmPassword"
               label="确认密码"
               labelWidth="20%"
               borderBottom
               required>
               <u--input v-model="registerFormModel.confirmPassword"
                  placeholder="请输入内容"
                  password
                  clearable
                  @blur="jiaoYanPassword"></u--input>
            </u-form-item>
            <u-form-item prop="carNo" label="车牌号" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required>
               <u--input v-model="registerFormModel.carNo" placeholder="请输入内容" clearable></u--input>
            <u-form-item prop="carNo"
               label="车牌号"
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required>
               <u--input v-model="registerFormModel.carNo"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
            <u-form-item prop="carImg" label="车辆照片" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required @click="beforeRead">
               <u-upload
                  :fileList="fileList1"
            <u-form-item prop="carImg"
               label="车辆照片"
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList1"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
@@ -45,15 +99,19 @@
                  :maxCount="1"
                  width="250"
                  height="150"
                  :previewFullImage="true"
               >
                  :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" label="行驶证" labelWidth="20%" borderBottom v-if="radiovalue1 == '司机'" required @click="beforeRead">
               <u-upload
                  :fileList="fileList2"
            <u-form-item prop="drivingImg"
               label="行驶证"
               labelWidth="20%"
               borderBottom
               v-if="radiovalue1 == '司机'"
               required
               @click="beforeRead">
               <u-upload :fileList="fileList2"
                  deletable
                  @afterRead="afterRead"
                  @delete="deletePic"
@@ -62,21 +120,31 @@
                  :maxCount="1"
                  width="250"
                  height="150"
                  :previewFullImage="true"
               >
                  :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 label="推荐人账号"
               labelWidth="25%"
               borderBottom>
               <u--input v-model="registerFormModel.tuiJianMa"
                  placeholder="请输入内容"
                  clearable></u--input>
            </u-form-item>
         </u--form>
      </view>
      <view class="roleModel">
         <u-modal :show="editRoleModelShow" :title="title" :content="content" :showCancelButton="true" @confirm="roleConfirm" @cancel="roleCancel"></u-modal>
         <u-modal :show="editRoleModelShow"
            :title="title"
            :content="content"
            :showCancelButton="true"
            @confirm="roleConfirm"
            @cancel="roleCancel"></u-modal>
      </view>
      <view class="registerBtn"><u-button text="注册" type="primary" @click="registerClick"></u-button></view>
      <view class="registerBtn"><u-button text="注册"
            type="primary"
            @click="registerClick"></u-button></view>
      <!-- 图片预览弹出框 -->
      <!-- <view class="previewImage-container">
         <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen">
@@ -147,8 +215,7 @@
               message: '请填写姓名',
               trigger: ['blur', 'change']
            },
            idCard: [
               {
               idCard: [{
                  type: 'string',
                  required: true,
                  message: '请输入身份证号',
@@ -159,8 +226,7 @@
                  message: '身份证号格式不正确'
               }
            ],
            phone: [
               {
               phone: [{
                  required: true,
                  message: '此项为必填项',
                  // blur和change事件触发检验
@@ -179,8 +245,7 @@
                  trigger: ['change', 'blur']
               }
            ],
            password: [
               {
               password: [{
                  required: true,
                  message: '请设置初始密码',
                  trigger: ['blur', 'change']
@@ -191,8 +256,7 @@
                  message: '长度在6-12个字符之间'
               }
            ],
            confirmPassword: [
               {
               confirmPassword: [{
                  required: true,
                  message: '请设置初始密码',
                  trigger: ['blur', 'change']
@@ -203,8 +267,7 @@
                  message: '长度在6-12个字符之间'
               }
            ],
            carNo: [
               {
               carNo: [{
                  type: 'string',
                  required: true,
                  message: '请输入车牌号',
@@ -235,8 +298,7 @@
            }
         },
         // 基本案列数据
         radiolist1: [
            {
            radiolist1: [{
               name: '货代',
               disabled: false
            },
@@ -258,7 +320,8 @@
   },
   watch: {
      radiovalue1(newV) {
         if (this.registerFormModel.name || this.registerFormModel.idCard || this.registerFormModel.phone || this.registerFormModel.carNo || this.registerFormModel.password) {
            if (this.registerFormModel.name || this.registerFormModel.idCard || this.registerFormModel.phone || this
               .registerFormModel.carNo || this.registerFormModel.password) {
            if (this.editRoleModelShow == true) {
               this.editRoleModelShow = false;
            } else {
@@ -299,7 +362,7 @@
                              uni.redirectTo({ url: '/pages/login/login' });
                           }, 1000);
                        } else {
                           this.$u.toast(res.msg ? res.msg : '添加失败');
                              this.$u.toast(res.data.msg ? res.data.msg : '添加失败');
                        }
                     })
                     .catch(err => {
@@ -414,28 +477,34 @@
};
</script>
<style lang="scss" scoped>
<style lang="scss"
   scoped>
::v-deep.register {
   width: 94%;
   padding: 0 0 vww(20) 0;
   margin: 0 auto;
   .registerForm {
      width: 94%;
      margin: 0 auto;
      font-size: 16px !important;
      .u-form {
         .u-radio {
            width: 33%;
         }
      }
   }
   .registerBtn {
      width: 94%;
      margin: vww(50) auto 0;
   }
   .utils {
      line-height: vww(30);
      text-align: center;
      text:nth-of-type(1) {
         margin-right: vww(10);
      }