增加新功能，修复bug

qingyiay

2023-05-30 4b74ae71c84d7c3a2fcc83d1ef75f11f8f8c05e0

 pages/driver-page/drvier-my/drvier-my.vue

@@ -3,16 +3,23 @@
      <view class="driver-banner">
         <view class="navgation">我的</view>
         <view class="avatar">
            <view class="avatar-imgage" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/driverava.png')no-repeat;background-size: cover;"></view>
            <view class="avatar-imgage"
               style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/driverava.png')no-repeat;background-size: cover;">
            </view>
            <view class="avatar-name">{{ userInfo.name || '' }}</view>
            <view class="edit-button"><u-button type="primary" @click="editBtnClick" shape="circle" plain>编辑个人资料</u-button></view>
            <view class="edit-button"><u-button type="primary"
                  @click="editBtnClick"
                  shape="circle"
                  plain>编辑个人资料</u-button></view>
         </view>
         <view class="personal-information">
            <view class="personal-information-block">
               <view class="block-main">
                  <view class="information-line" @click="">
                  <view class="information-line"
                     @click="">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/personalicon.png" mode="widthFix"></image>
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/personalicon.png"
                           mode="widthFix"></image>
                        <view class="label-text">身份证号</view>
                     </view>
                     <view class="information-value">
@@ -22,7 +29,8 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png" mode="widthFix"></image>
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png"
                           mode="widthFix"></image>
                        <view class="label-text">手机号</view>
                     </view>
                     <view class="information-value">
@@ -32,7 +40,8 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carnum.png" mode="widthFix"></image>
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carnum.png"
                           mode="widthFix"></image>
                        <view class="label-text">车牌号</view>
                     </view>
                     <view class="information-value">
@@ -42,7 +51,8 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/axisnum.png" mode="widthFix"></image>
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/axisnum.png"
                           mode="widthFix"></image>
                        <view class="label-text">车轴数</view>
                     </view>
                     <view class="information-value">
@@ -52,7 +62,8 @@
                  </view>
                  <view class="information-line last">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/weighnum.png" mode="widthFix"></image>
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/weighnum.png"
                           mode="widthFix"></image>
                        <view class="label-text">体重</view>
                     </view>
                     <view class="information-value">
@@ -69,23 +80,35 @@
            <view class="information-body">
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carimg.png" mode="widthFix"></image>
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carimg.png"
                        mode="widthFix"></image>
                     <view class="label-text">车辆照片</view>
                  </view>
                  <view class="img-container">
                     <u--image :showLoading="true" :src="userInfo.carImg != null ? BaseUrl + userInfo.carImg : ''" width="80px" height="80px" @click="imageClick(1)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                     <u--image :showLoading="true"
                        :src="userInfo.carImg != null ? BaseUrl + userInfo.carImg : ''"
                        width="80px"
                        height="80px"
                        @click="imageClick(1)">
                        <view slot="error"
                           style="font-size: 24rpx;">加载失败</view>
                     </u--image>
                  </view>
               </view>
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/cardimg.png" mode="widthFix"></image>
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/cardimg.png"
                        mode="widthFix"></image>
                     <view class="label-text">行驶证照片</view>
                  </view>
                  <view class="img-container">
                     <u--image :showLoading="true" :src="userInfo.drivingImg != null ? BaseUrl + userInfo.drivingImg : ''" width="80px" height="80px" @click="imageClick(2)">
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>
                     <u--image :showLoading="true"
                        :src="userInfo.drivingImg != null ? BaseUrl + userInfo.drivingImg : ''"
                        width="80px"
                        height="80px"
                        @click="imageClick(2)">
                        <view slot="error"
                           style="font-size: 24rpx;">加载失败</view>
                     </u--image>
                  </view>
               </view>
@@ -93,7 +116,11 @@
         </view>
      </view>
      <view class="loginout">
         <view class="loginout-main"><u-button text="退出登录" type="primary" @click="logout" shape="circle" plain></u-button></view>
         <view class="loginout-main"><u-button text="退出登录"
               type="primary"
               @click="logout"
               shape="circle"
               plain></u-button></view>
      </view>
      <!-- <view class="personal-information-form">
         <u--form labelPosition="left" :model="userInfo" ref="form1">
@@ -135,38 +162,84 @@

      <!-- 图片预览弹出框 -->
      <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 :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 class="editDriverPopup-container">
         <u-popup :show="editDriverPopupShow" mode="bottom" @close="editDriverPopupClose" @open="editDriverPopupOpen" :closeable="true">
            <combined-title title="修改个人信息" style="margin-left:20rpx"></combined-title>
         <u-popup :show="editDriverPopupShow"
            mode="bottom"
            @close="editDriverPopupClose"
            @open="editDriverPopupOpen"
            :closeable="true">
            <combined-title title="修改个人信息"
               style="margin-left:20rpx"></combined-title>
            <view class="editDriverPopup-container-box">
               <u--form labelPosition="left" :model="editUserInfo" ref="editRef">
                  <u-form-item labelWidth="20%" label="姓名" prop="name" required>
                     <u--input v-model="editUserInfo.name" border="none" inputAlign="left"></u--input>
               <u--form labelPosition="left"
                  :model="editUserInfo"
                  ref="editRef">
                  <u-form-item labelWidth="20%"
                     label="姓名"
                     prop="name"
                     required>
                     <u--input v-model="editUserInfo.name"
                        border="none"
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%" label="身份证号" prop="idCard" required>
                     <u--input v-model="editUserInfo.idCard" border="none" inputAlign="left"></u--input>
                  <u-form-item labelWidth="20%"
                     label="身份证号"
                     prop="idCard"
                     required>
                     <u--input v-model="editUserInfo.idCard"
                        border="none"
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%" label="手机号" prop="phone" required>
                     <u--input v-model="editUserInfo.phone" border="none" inputAlign="left"></u--input>
                  <u-form-item labelWidth="20%"
                     label="手机号"
                     prop="phone"
                     required>
                     <u--input v-model="editUserInfo.phone"
                        border="none"
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%" label="车牌号" prop="carNo" required>
                     <u--input v-model="editUserInfo.carNo" border="none" inputAlign="left"></u--input>
                  <u-form-item labelWidth="20%"
                     label="车牌号"
                     prop="carNo"
                     required>
                     <u--input v-model="editUserInfo.carNo"
                        border="none"
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%" label="体重" prop="weight" required>
                     <u--input v-model="editUserInfo.weight" border="none" inputAlign="left" placeholder="体重以kg作为单位"></u--input>
                  <u-form-item labelWidth="20%"
                     label="体重"
                     prop="weight"
                     required>
                     <u--input v-model="editUserInfo.weight"
                        border="none"
                        inputAlign="left"
                        placeholder="体重以kg作为单位"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%" label="车轴数" prop="axleNum" required>
                     <u--input v-model="editUserInfo.axleNum" border="none" inputAlign="left"></u--input>
                  <u-form-item labelWidth="20%"
                     label="车轴数"
                     prop="axleNum"
                     required>
                     <u--input v-model="editUserInfo.axleNum"
                        border="none"
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="25%" label="车辆照片" @click="beforeRead" prop="carImg" required>
                     <u-upload
                        :fileList="fileList1"
                  <u-form-item labelWidth="25%"
                     label="车辆照片"
                     @click="beforeRead"
                     prop="carImg"
                     required>
                     <u-upload :fileList="fileList1"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
@@ -174,12 +247,15 @@
                        :maxCount="1"
                        width="250"
                        height="150"
                        :previewFullImage="true"
                     ></u-upload>
                        :previewFullImage="true"></u-upload>
                  </u-form-item>
                  <u-form-item labelWidth="25%" label="行驶证照片" ref="item1" @click="beforeRead" prop="drivingImg" required>
                     <u-upload
                        :fileList="fileList2"
                  <u-form-item labelWidth="25%"
                     label="行驶证照片"
                     ref="item1"
                     @click="beforeRead"
                     prop="drivingImg"
                     required>
                     <u-upload :fileList="fileList2"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="2"
@@ -187,16 +263,22 @@
                        :maxCount="1"
                        width="250"
                        height="150"
                        :previewFullImage="true"
                     ></u-upload>
                        :previewFullImage="true"></u-upload>
                  </u-form-item>
               </u--form>
               <u-button text="提交" @click="updateUser" type="primary"></u-button>
               <u-button text="提交"
                  @click="updateUser"
                  type="primary"></u-button>
            </view>
         </u-popup>
      </view>
      <view class="logoutModel">
         <u-modal :show="logoutShow" :title="logoutTitle" showCancelButton :content="logoutContent" @confirm="logoutConfirm" @cancel="logoutCancel"></u-modal>
         <u-modal :show="logoutShow"
            :title="logoutTitle"
            showCancelButton
            :content="logoutContent"
            @confirm="logoutConfirm"
            @cancel="logoutCancel"></u-modal>
      </view>
   </view>
</template>
@@ -231,8 +313,7 @@
               message: '请填写姓名',
               trigger: ['blur', 'change']
            },
            idCard: [
               {
               idCard: [{
                  type: 'string',
                  required: true,
                  message: '请输入身份证号',
@@ -243,8 +324,7 @@
                  message: '身份证号格式不正确'
               }
            ],
            phone: [
               {
               phone: [{
                  required: true,
                  message: '此项为必填项',
                  // blur和change事件触发检验
@@ -269,8 +349,7 @@
               message: '请填写体重',
               trigger: ['blur', 'change']
            },
            carNo: [
               {
               carNo: [{
                  type: 'string',
                  required: true,
                  message: '请输入车牌号',
@@ -287,8 +366,7 @@
                  trigger: ['change', 'blur']
               }
            ],
            axleNum: [
               {
               axleNum: [{
                  transform(value) {
                     return Number(value);
                  },
@@ -297,8 +375,7 @@
                  },
                  message: '请输入正确的车轴数',
                  trigger: ['change', 'blur']
               }
            ],
               }],
            carImg: {
               type: 'string',
               required: true,
@@ -504,20 +581,24 @@
};
</script>

<style lang="scss" scoped>
<style lang="scss"
   scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.statistics {
   margin-top: vww(10);
   margin-bottom: vww(10);
}

::v-deep.driver-my {
   width: 100%;
   margin: 0 auto;
   padding-bottom: vww(60);

   .driver-banner {
      width: 100%;
      height: 430rpx;
@@ -525,6 +606,7 @@
      background-size: contain;
      position: fixed;
      top: 0;

      .navgation {
         width: 80rpx;
         height: 37rpx;
@@ -534,6 +616,7 @@
         line-height: 69rpx;
         margin: vww(60) auto;
      }

      .avatar {
         width: 100%;
         height: 430rpx;
@@ -541,6 +624,7 @@
         align-items: center;
         position: fixed;
         top: 0;

         .avatar-imgage {
            width: 98rpx;
            height: 98rpx;
@@ -548,6 +632,7 @@
            @include flex;
            justify-content: center;
         }

         .avatar-name {
            width: 200rpx;
            display: flex;
@@ -558,18 +643,21 @@
            color: #ffffff;
            margin-left: vww(17);
         }

         .edit-button {
            position: relative;
            left: vww(73);
            top: vww(4);
         }
      }

      .personal-information {
         width: 100%;
         display: flex;
         justify-content: center;
         position: relative;
         top: vww(20);

         &-block {
            width: 690rpx;
            height: 478rpx;
@@ -579,6 +667,7 @@
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .block-main {
               width: 636rpx;
               margin: vww(10) vww(14);
@@ -588,13 +677,16 @@
               @include flex width: 636rpx;
               height: vww(45);
               border-bottom: 1rpx solid #f0f1f6;

               .line-label {
                  width: 188rpx;
                  height: 90rpx;

                  @include flex image {
                     width: 50rpx;
                     height: 50rpx;
                  }

                  .label-text {
                     width: 120rpx;
                     font-size: 30rpx;
@@ -603,6 +695,7 @@
                     line-height: 85rpx;
                  }
               }

               .information-value {
                  min-width: vww(125);
                  @include flex;
@@ -612,39 +705,49 @@
                  line-height: 85rpx;
               }
            }

            .last {
               border-bottom: 0;
            }
         }
      }
   }

   .car-information {
      width: 100%;
      position: relative;
      top: vww(410);
      @include flex justify-content: center;

      .information-main {
         width: 690rpx;
         height: 552rpx;
         background: #ffffff;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
         border-radius: 20rpx;

         .information-body {
            width: 636rpx;
            margin: vww(15) vww(14);
            @include flex flex-direction: column;

            .car-img {
               height: 246rpx;
               width: 100%;
               @include flex flex-direction: column;
                  @include flex;
                  flex-direction: column;
               align-items: flex-start;

               .label-title {
                  @include flex width: 200rpx;
                     @include flex;
                     width: 220rpx;
                  height: 100rpx;

                  .label-text {
                     width: 200rpx;
                        width: 100%;
                     height: 50rpx;
                  }

                  image {
                     width: 50rpx;
                     height: 50rpx;
@@ -654,6 +757,7 @@
         }
      }
   }

   .loginout {
      width: 100%;
      height: 74rpx;
@@ -661,10 +765,12 @@
      justify-content: center;
      position: relative;
      bottom: vww(-430);

      .loginout-main {
         width: 84%;
      }
   }

   // 表单
   .personal-information-form {
      margin-top: vww(200);
@@ -673,6 +779,7 @@
         display: flex;
         margin: vww(20) auto 0;
         width: 80%;

         .u-button {
            &:nth-of-type(2) {
               margin-left: vww(10);
@@ -682,16 +789,17 @@
   }

   // 预览图片
   .previewImage-container {
   }
      .previewImage-container {}

   // 修改弹出框
   .editDriverPopup-container {
      .u-popup {
         .u-transition {
            height: 75%;

            .u-popup__content {
               overflow: scroll !important;

               .editDriverPopup-container-box {
                  width: 90%;
                  margin: 0 auto;
@@ -700,6 +808,7 @@
               //closeIcon
               .u-popup__content__close--top-right {
                  top: vww(20) !important;

                  .u-icon {
                     .u-icon__icon {
                        font-size: vww(20) !important;