增加部分限制，增加新功能

qingyiay

2023-05-17 05273ace3da665cb10c36ca0dac4413a8284302a

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

@@ -1,23 +1,101 @@
<template>
   <view class="driver-my">
      <!-- <view class="jifen">
         <view class="zheng">
            <image src="../../../static/image/无人值守/组 38_1.png"></image>
            <view class="font">
               <view class="font-top">100</view>
               <view class="font-bottom">正积分</view>
      <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-name">{{ userInfo.name || '' }}</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="line-label">
                        <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">
                        {{ userInfo.idCard || '' }}
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.idCard"></u-icon> -->
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <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">
                        {{ userInfo.phone || '' }}
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.phone"></u-icon> -->
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <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">
                        {{ userInfo.carNo || '' }}
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.carNo"></u-icon> -->
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <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">
                        {{ userInfo.axleNum || '' }}
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.axleNum"></u-icon> -->
                     </view>
                  </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>
                        <view class="label-text">体重</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.weight || '' }}
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.weight"></u-icon> -->
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <view class="fu">
            <image src="../../../static/image/无人值守/组 38.png"></image>
            <view class="font">
               <view class="font-top">-60</view>
               <view class="font-bottom">负积分</view>
      </view>
      <view class="car-information">
         <view class="information-main">
            <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>
                     <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>
                  </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>
                     <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>
                  </view>
               </view>
            </view>
         </view>
      </view> -->

      <view class="personal-information-form">
      </view>
      <view class="loginout">
         <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">
            <u-form-item labelWidth="20%" label="姓名" ref="item1">
               <u--input v-model="userInfo.name" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
@@ -51,9 +129,9 @@
         <view class="push-information-button">
            <u-button text="修改个人资料" type="primary" @click="editBtnClick"></u-button>
            <u-button text="退出登录" type="primary" @click="logout"></u-button>
         </view>
         <!-- <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> -->
      </view>
         </view> -->
      <!-- <view class="statistics"><u-button text="发运统计" type="primary" @click="statistics"></u-button></view> -->
      <!-- </view> -->

      <!-- 图片预览弹出框 -->
      <view class="previewImage-container">
@@ -67,18 +145,50 @@
         <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="form1">
                  <u-form-item labelWidth="20%" label="姓名" ref="item1"><u--input v-model="editUserInfo.name" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="身份证号" ref="item1"><u--input v-model="editUserInfo.idCard" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="手机号" ref="item1"><u--input v-model="editUserInfo.phone" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="车牌号" ref="item1"><u--input v-model="editUserInfo.carNo" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="体重" ref="item1"><u--input v-model="editUserInfo.weight" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="车轴数" ref="item1"><u--input v-model="editUserInfo.axleNum" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="25%" label="车辆照片" ref="item1">
                     <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" width="250" height="150"></u-upload>
               <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="25%" label="行驶证照片" ref="item1">
                     <u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="1" width="250" height="150"></u-upload>
                  <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>
                  <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>
                  <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"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="1"
                        multiple
                        :maxCount="1"
                        width="250"
                        height="150"
                        :previewFullImage="true"
                     ></u-upload>
                  </u-form-item>
                  <u-form-item labelWidth="25%" label="行驶证照片" ref="item1" @click="beforeRead" prop="drivingImg" required>
                     <u-upload
                        :fileList="fileList2"
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="2"
                        multiple
                        :maxCount="1"
                        width="250"
                        height="150"
                        :previewFullImage="true"
                     ></u-upload>
                  </u-form-item>
               </u--form>
               <u-button text="提交" @click="updateUser" type="primary"></u-button>
@@ -94,6 +204,7 @@
<script>
import { customerId, userInfo, redirectLogin } from '@/utils/status';
import { BaseUrl } from '@/api/publicInterface.js';
import { mapMutations } from 'vuex';
export default {
   data() {
      return {
@@ -113,6 +224,94 @@
            weight: '',
            userId: ''
         },
         rules: {
            name: {
               type: 'string',
               required: true,
               message: '请填写姓名',
               trigger: ['blur', 'change']
            },
            idCard: [
               {
                  type: 'string',
                  required: true,
                  message: '请输入身份证号',
                  trigger: ['blur', 'change']
               },
               {
                  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: '身份证号格式不正确'
               }
            ],
            phone: [
               {
                  required: true,
                  message: '此项为必填项',
                  // blur和change事件触发检验
                  trigger: ['blur', 'change']
               },
               {
                  min: 11,
                  max: 11,
                  message: '请输入合法手机号'
               },
               {
                  validator: (rule, value, callback) => {
                     return uni.$u.test.mobile(value);
                  },
                  message: '手机号码格式不正确',
                  trigger: ['change', 'blur']
               }
            ],
            weight: {
               type: 'number',
               required: true,
               message: '请填写体重',
               trigger: ['blur', 'change']
            },
            carNo: [
               {
                  type: 'string',
                  required: true,
                  message: '请输入车牌号',
                  trigger: ['blur', 'change']
               },
               {
                  transform(value) {
                     return String(value);
                  },
                  validator: (rule, value, callback) => {
                     return uni.$u.test.carNo(value);
                  },
                  message: '请输入正确的车牌号',
                  trigger: ['change', 'blur']
               }
            ],
            axleNum: [
               {
                  transform(value) {
                     return Number(value);
                  },
                  validator: (rule, value, callback) => {
                     return value <= 10;
                  },
                  message: '请输入正确的车轴数',
                  trigger: ['change', 'blur']
               }
            ],
            carImg: {
               type: 'string',
               required: true,
               message: '请上传车辆图片',
               trigger: ['blur', 'change']
            },
            drivingImg: {
               type: 'string',
               required: true,
               message: '请上传行驶证照片',
               trigger: ['blur', 'change']
            }
         },
         src: '',
         fileList1: [],
         fileList2: [],
@@ -131,7 +330,11 @@
   onShow() {
      // this.init();
   },
   onReady() {
      this.$refs.editRef.setRules(this.rules);
   },
   methods: {
      ...mapMutations(['changeisUploadimg']),
      init() {
         this.getUserEntity();
      },
@@ -142,6 +345,18 @@
         this.$reqGet('getUserEntity').then(res => {
            uni.hideLoading();
            this.userInfo = res.data;
            uni.setStorageSync('carImg', this.userInfo.carImg);
            uni.setStorageSync('drivingImg', this.userInfo.drivingImg);
            if (this.fileList1.length == 0) {
               this.fileList1.push({
                  url: `${BaseUrl}${this.userInfo.carImg}`
               });
            }
            if (this.fileList2.length == 0) {
               this.fileList2.push({
                  url: `${BaseUrl}${this.userInfo.drivingImg}`
               });
            }
            Object.keys(this.editUserInfo).map(item => {
               if (res.data[item]) {
                  this.editUserInfo[item] = res.data[item];
@@ -165,8 +380,12 @@
            this.previewImageShow = true;
         });
      },
      beforeRead() {
         this.changeisUploadimg(true);
      },
      // 删除
      deletePic(event) {
         this.changeisUploadimg(true);
         this[`fileList${event.name}`].splice(event.index, 1);
      },
      // 新增图片
@@ -189,7 +408,7 @@
               1,
               Object.assign(item, {
                  status: 'success',
                  message: '',
                  message: '上传成功',
                  url: result
               })
            );
@@ -199,18 +418,21 @@
      uploadFilePromise(url, num) {
         return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
               url: BaseUrl + '/admin/sys-file/uploadUnToken', // 仅为示例，非真实的接口地址
               url: BaseUrl + '/admin/sys-file/uploadUnToken',
               filePath: url,
               name: 'file',
               // formData: {
               //    user: 'test'
               // },
               success: res => {
                  resolve(JSON.parse(res.data).data.url);
                  if (num == 1) {
                     this.editUserInfo.carImg = JSON.parse(res.data).data.url;
                     uni.setStorageSync('carImg', JSON.parse(res.data).data.url);
                     resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                  } else if (num == 2) {
                     this.editUserInfo.drivingImg = JSON.parse(res.data).data.url;
                     uni.setStorageSync('drivingImg', JSON.parse(res.data).data.url);
                     resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                  }
               }
            });
@@ -236,20 +458,32 @@
      },
      // 修改用户信息
      updateUser() {
         this.$reqPost('updateUser', this.editUserInfo, 'json').then(res => {
            console.log('更新数据', res);
            this.editDriverPopupShow = false;
            if (res.code == 0) {
               this.$u.toast('修改成功');
               this.init();
            } else {
               uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  duration: 2000
         this.editUserInfo = {
            ...this.editUserInfo,
            carImg: uni.getStorageSync('carImg'),
            drivingImg: uni.getStorageSync('drivingImg')
         };
         this.$refs.editRef
            .validate()
            .then(res => {
               this.$reqPost('updateUser', this.editUserInfo, 'json').then(res => {
                  console.log('更新数据', res);
                  this.editDriverPopupShow = false;
                  if (res.code == 0) {
                     this.$u.toast('修改成功');
                     this.init();
                  } else {
                     uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                     });
                  }
               });
            }
         });
            })
            .catch(err => {
               this.$u.toast('修改失败');
            });
      },
      logout() {
         this.logoutShow = true;
@@ -271,77 +505,170 @@
</script>

<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: 90%;
   width: 100%;
   margin: 0 auto;
   padding-bottom: vww(60);
   // 积分
   .jifen {
      margin-top: vww(24);
   .driver-banner {
      width: 100%;
      height: vww(120);
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
      display: flex;
      flex-direction: row;
      align-items: center;
      .zheng {
         width: 50%;
      height: 430rpx;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      background-size: contain;
      position: fixed;
      top: 0;
      .navgation {
         width: 80rpx;
         height: 37rpx;
         font-size: 40rpx;
         font-weight: normal;
         color: #ffffff;
         line-height: 69rpx;
         margin: vww(60) auto;
      }
      .avatar {
         width: 100%;
         height: 430rpx;
         display: flex;
         image {
            margin-left: vww(32);
            width: vww(48);
            height: vww(48);
         align-items: center;
         position: fixed;
         top: 0;
         .avatar-imgage {
            width: 98rpx;
            height: 98rpx;
            margin-left: vww(18);
            @include flex;
            justify-content: center;
         }
         .font {
            margin-left: vww(8);
            &-top {
               font-size: vww(28);
               font-weight: 700;
               text-align: left;
               color: #1987ff;
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;
            }
         .avatar-name {
            width: 200rpx;
            display: flex;
            flex-wrap: wrap;
            height: 32rpx;
            font-size: 34rpx;
            font-weight: bold;
            color: #ffffff;
            margin-left: vww(17);
         }
         .edit-button {
            position: relative;
            left: vww(73);
            top: vww(4);
         }
      }
      .fu {
         width: 50%;
      .personal-information {
         width: 100%;
         display: flex;
         image {
            margin-left: vww(32);
            width: vww(48);
            height: vww(48);
         }
         .font {
            margin-left: vww(8);
            &-top {
               font-size: vww(28);
               font-weight: 700;
               text-align: left;
               color: #ff4233;
         justify-content: center;
         position: relative;
         top: vww(20);
         &-block {
            width: 690rpx;
            height: 478rpx;
            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;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .block-main {
               width: 636rpx;
               margin: vww(10) vww(14);
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;

            .information-line {
               @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;
                     font-weight: 400;
                     color: #000000;
                     line-height: 85rpx;
                  }
               }
               .information-value {
                  min-width: vww(125);
                  @include flex;
                  font-size: 30rpx;
                  font-weight: 400;
                  color: #000000;
                  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;
               align-items: flex-start;
               .label-title {
                  @include flex width: 200rpx;
                  height: 100rpx;
                  .label-text {
                     width: 200rpx;
                     height: 50rpx;
                  }
                  image {
                     width: 50rpx;
                     height: 50rpx;
                  }
               }
            }
         }
      }
   }
   .loginout {
      width: 100%;
      height: 74rpx;
      @include flex;
      justify-content: center;
      position: relative;
      bottom: vww(-430);
      .loginout-main {
         width: 84%;
      }
   }
   // 表单
   .personal-information-form {
      // margin-top: vww(24);
      margin-top: vww(200);

      .push-information-button {
         display: flex;
         margin: vww(20) auto 0;
@@ -362,7 +689,7 @@
   .editDriverPopup-container {
      .u-popup {
         .u-transition {
            height: 95%;
            height: 75%;
            .u-popup__content {
               overflow: scroll !important;
               .editDriverPopup-container-box {