yangan
2024-06-28 3fef62b03c16aa69c109c355150cdb698b777feb
pages/driver-page/drvier-my/drvier-my.vue
@@ -1,24 +1,29 @@
<template>
   <view class="driver-my">
      <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 class=""
         style="height: 446rpx;width: 100%;">
         <view class="driver-banner">
            <view class="navgation">我的</view>
            <view class="avatar">
               <view class="avatar-imgage"
                  :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/driverava.png)`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
               </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="avatar-name">{{ userInfo.name || '' }}</view>
            <view class="edit-button"><u-button type="primary"
                  @click="editBtnClick"
                  shape="circle"
                  plain>编辑个人资料</u-button></view>
         </view>
      </view>
      <view class="information-block">
         <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"
                        <image :src="`${onlineurl}/appimg/image/banner/personalicon.png`"
                           mode="widthFix"></image>
                        <view class="label-text">身份证号</view>
                     </view>
@@ -29,7 +34,7 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/phonenum.png"
                        <image :src="`${onlineurl}/appimg/image/banner/phonenum.png`"
                           mode="widthFix"></image>
                        <view class="label-text">手机号</view>
                     </view>
@@ -40,7 +45,7 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carnum.png"
                        <image :src="`${onlineurl}/appimg/image/banner/carnum.png`"
                           mode="widthFix"></image>
                        <view class="label-text">车牌号</view>
                     </view>
@@ -51,7 +56,7 @@
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image src="https://mx.jzeg.cn:9095/appimg/image/banner/axisnum.png"
                        <image :src="`${onlineurl}/appimg/image/banner/axisnum.png`"
                           mode="widthFix"></image>
                        <view class="label-text">车轴数</view>
                     </view>
@@ -60,15 +65,25 @@
                        <!-- <u-icon name="arrow-right" color="#999999" size="30" v-if="userInfo.axleNum"></u-icon> -->
                     </view>
                  </view>
                  <view class="information-line">
                     <view class="line-label">
                        <image :src="`${onlineurl}/appimg/image/banner/axisnum.png`"
                           mode="widthFix"></image>
                        <view class="label-text">车牌颜色</view>
                     </view>
                     <view class="information-value">
                        {{ userInfo.vehicleColour || '' }}
                        <!-- <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"
                        <image :src="`${onlineurl}/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>
@@ -80,7 +95,7 @@
            <view class="information-body">
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/carimg.png"
                     <image :src="`${onlineurl}/appimg/image/banner/carimg.png`"
                        mode="widthFix"></image>
                     <view class="label-text">车辆照片</view>
                  </view>
@@ -97,7 +112,31 @@
               </view>
               <view class="car-img">
                  <view class="label-title">
                     <image src="https://mx.jzeg.cn:9095/appimg/image/banner/cardimg.png"
                     <image :src="`${onlineurl}/appimg/image/banner/cardimg.png`"
                        mode="widthFix"></image>
                     <view class="label-text">车头车尾车身照片</view>
                  </view>
                  <view class="img-container special">
                     <view class="img-container_item"
                        v-for="item in userInfo.bodyCarImg">
                        <u--image :showLoading="true"
                           :src="BaseUrl+item"
                           width="80px"
                           height="80px"
                           @click="imageClickCarBody(item)">
                           <view slot="error"
                              style="font-size: 24rpx;">加载失败</view>
                        </u--image>
                     </view>
                  </view>
                  <view style="display: flex;align-items: center;height: 100%; width: 150rpx;"
                     v-if='userInfo.bodyCarImg?(userInfo.bodyCarImg.length===0?true:false):true'>
                     暂无图片
                  </view>
               </view>
               <view class="car-img">
                  <view class="label-title">
                     <image :src="`${onlineurl}/appimg/image/banner/cardimg.png`"
                        mode="widthFix"></image>
                     <view class="label-text">行驶证照片</view>
                  </view>
@@ -116,49 +155,42 @@
         </view>
      </view>
      <view class="loginout">
         <view class="loginout-main"><u-button text="修改密码"
               type="primary"
               @click="initPwd"
               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">
            <u-form-item labelWidth="20%" label="姓名" ref="item1">
               <u--input v-model="userInfo.name" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="身份证号" ref="item1">
               <u--input v-model="userInfo.idCard" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="手机号" ref="item1">
               <u--input v-model="userInfo.phone" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="车牌号" ref="item1">
               <u--input v-model="userInfo.carNo" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="体重" ref="item1">
               <u--input v-model="userInfo.weight" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item v-model="userInfo.axleNum" labelWidth="20%" label="车轴数" ref="item1">
               <u--input border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            </u-form-item>
            <u-form-item labelWidth="20%" label="车辆照片" ref="item1">
               <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>
            </u-form-item>
            <u-form-item labelWidth="25%" label="行驶证照片" ref="item1">
               <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>
            </u-form-item>
         </u--form>
         <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 class="noob-tour"
         style="margin-top: 80rpx;">
         <combined-title title="操作指引"></combined-title>
         <u-cell-group>
            <u-cell title="新手指引"
               name='1'
               :clickable="true"
               @click="noobTour">
               <u-badge type="primary"
                  value="01"
                  slot='icon'></u-badge>
               <u-icon slot="value"
                  name="arrow-right"
                  size="30"
                  color="#b8b8b8"></u-icon>
            </u-cell>
         </u-cell-group>
      </view>
      <!-- 图片预览弹出框 -->
      <view class="previewImage-container">
         <previewImage ref="previewImage"
            :imgs="driverTourImgList"
            :saveBtn='false'></previewImage>
      </view>
      <!-- 图片预览弹出框 -->
      <view class="previewImage-container">
@@ -210,12 +242,37 @@
                        inputAlign="left"></u--input>
                  </u-form-item>
                  <u-form-item labelWidth="20%"
                     label="修改密码"
                     prop="password">
                     <u--input v-model="editUserInfo.password"
                        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="车牌颜色"
                     required
                     prop="vehicleColour">
                     <u-radio-group v-model="editUserInfo.vehicleColour"
                        placement="row"
                        size="30"
                        shape="circle"
                        iconSize="20">
                        <u-radio labelSize="14px"
                           size="20px"
                           :customStyle="{ marginBottom: '8px' }"
                           v-for="(item, index) in radiolist2"
                           :key="index"
                           :label="item.name"
                           :name="item.value"></u-radio>
                     </u-radio-group>
                  </u-form-item>
                  <u-form-item labelWidth="20%"
                     label="体重"
@@ -249,6 +306,23 @@
                        height="150"
                        :previewFullImage="true"></u-upload>
                  </u-form-item>
                  <u-form-item prop="bodyofcarJpg"
                     label="车头车尾车身照片"
                     labelWidth="20%"
                     required
                     @click="beforeRead">
                     <u-upload :fileList="fileList3"
                        deletable
                        @afterRead="afterRead"
                        @delete="deletePic"
                        name="3"
                        multiple
                        :maxCount="3"
                        width="250"
                        height="150"
                        :previewFullImage="true">
                     </u-upload>
                  </u-form-item>
                  <u-form-item labelWidth="25%"
                     label="行驶证照片"
                     ref="item1"
@@ -280,14 +354,32 @@
            @confirm="logoutConfirm"
            @cancel="logoutCancel"></u-modal>
      </view>
      <view class="initPwdModal">
         <u-modal :show="initPwdShow"
            title="重置密码"
            showCancelButton
            content="初始密码将变更为123456,是否确认重置"
            @confirm="initPwdConfirm"
            @cancel="initPwdCancel"></u-modal>
      </view>
   </view>
</template>
<script>
   import { customerId, userInfo, redirectLogin } from '@/utils/status';
   import { BaseUrl } from '@/api/publicInterface.js';
   import { mapMutations } from 'vuex';
   import { mapMutations, mapState } from 'vuex';
   import { onlineurl } from '@/api/request.js'
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   export default {
      components: {
         combinedTitle,
         previewImage
      },
      computed: {
         ...mapState(['driverTourImgList']),
      },
      data() {
         return {
            // 获取的司机详情
@@ -304,7 +396,10 @@
               drivingImg: '',
               axleNum: '',
               weight: '',
               userId: ''
               userId: '',
               vehicleColour: '',
               bodyofcarJpg: '',
               password: ''
            },
            rules: {
               name: {
@@ -346,8 +441,22 @@
               weight: {
                  type: 'number',
                  required: true,
                  message: '请填写体重',
                  trigger: ['blur', 'change']
                  trigger: ['blur', 'change'],
                  transform(value) {
                     return Number(value);
                  },
                  validator: (rule, value, callback) => {
                     if (!value) {
                        callback(new Error('请填写体重'))
                     } else if (value > 200) {
                        callback(new Error('请填写合理体重'))
                     } else {
                        callback()
                     }
                  }
               },
               password: {
                  required: false,
               },
               carNo: [{
                     type: 'string',
@@ -366,6 +475,12 @@
                     trigger: ['change', 'blur']
                  }
               ],
               vehicleColour: {
                  type: 'string',
                  required: true,
                  message: '请选择车牌颜色',
                  trigger: ['blur', 'change']
               },
               axleNum: [{
                  transform(value) {
                     return Number(value);
@@ -382,6 +497,12 @@
                  message: '请上传车辆图片',
                  trigger: ['blur', 'change']
               },
               bodyofcarJpg: {
                  type: 'string',
                  required: true,
                  message: '请上传车辆图片',
                  trigger: ['blur', 'change']
               },
               drivingImg: {
                  type: 'string',
                  required: true,
@@ -392,6 +513,9 @@
            src: '',
            fileList1: [],
            fileList2: [],
            // 车头车身车尾照片
            fileList3: [],
            carBody: [],
            // 修改信息弹出框
            editDriverPopupShow: false,
            // previewImage
@@ -401,7 +525,22 @@
            logoutShow: false,
            logoutTitle: '提示',
            logoutContent: '是否确认退出',
            BaseUrl
            BaseUrl,
            onlineurl,
            radiolist2: [{
                  name: '黄色',
                  value: '黄色'
               },
               {
                  name: '黄绿色',
                  value: '黄绿色'
               },
               {
                  name: '蓝色',
                  value: '蓝色'
               }
            ],
            initPwdShow: false
         };
      },
      onShow() {
@@ -411,7 +550,7 @@
         this.$refs.editRef.setRules(this.rules);
      },
      methods: {
         ...mapMutations(['changeisUploadimg']),
         ...mapMutations(['changeisUploadimg', 'changeisLogin']),
         init() {
            this.getUserEntity();
         },
@@ -421,24 +560,41 @@
            });
            this.$reqGet('getUserEntity').then(res => {
               uni.hideLoading();
               this.userInfo = res.data;
               this.editUserInfo = this.userInfo = res.data;
               this.userInfo.bodyCarImg = this.userInfo.bodyofcarJpg ? this.userInfo.bodyofcarJpg.split(',') :
                  [];
               console.log(this.userInfo.bodyCarImg);
               this.editUserInfo.password = ""
               uni.setStorageSync('carImg', this.userInfo.carImg);
               uni.setStorageSync('drivingImg', this.userInfo.drivingImg);
               uni.setStorageSync('bodyofcarJpg', this.userInfo.bodyofcarJpg)
               if (this.fileList1.length == 0) {
                  this.fileList1.push({
                     url: `${BaseUrl}${this.userInfo.carImg}`
                  });
                  })
               }
               if (this.fileList2.length == 0) {
                  if (!this.userInfo.drivingImg) return
                  this.fileList2.push({
                     url: `${BaseUrl}${this.userInfo.drivingImg}`
                  });
               }
               Object.keys(this.editUserInfo).map(item => {
                  if (res.data[item]) {
                     this.editUserInfo[item] = res.data[item];
               if (this.fileList3.length == 0) {
                  if (!this.userInfo.bodyofcarJpg) return
                  if (this.userInfo.bodyofcarJpg.indexOf(',') !== -1) {
                     let bodyofcarJpg = this.userInfo.bodyofcarJpg.split(',')
                     bodyofcarJpg.forEach(v => {
                        this.fileList3.push({
                           url: `${BaseUrl}${v}`
                        });
                     })
                  } else {
                     this.fileList3.push({
                        url: `${BaseUrl}${this.userInfo.bodyofcarJpg}`
                     });
                  }
               });
               }
            });
         },
         // 修改按钮点击
@@ -446,13 +602,17 @@
            this.editDriverPopupShow = true;
         },
         imageClick(index) {
            // 通过index切换图片
            console.log('切换图片', index);
            if (index == 1) {
               this.previewImageSrc = this.userInfo.carImg;
            } else {
               this.previewImageSrc = this.userInfo.drivingImg;
            }
            this.$nextTick(() => {
               this.previewImageShow = true;
            });
         },
         imageClickCarBody(url) {
            this.previewImageSrc = url;
            this.$nextTick(() => {
               this.previewImageShow = true;
            });
@@ -498,9 +658,6 @@
                  url: BaseUrl + '/admin/sys-file/uploadUnToken',
                  filePath: url,
                  name: 'file',
                  // formData: {
                  //    user: 'test'
                  // },
                  success: res => {
                     if (num == 1) {
                        this.editUserInfo.carImg = JSON.parse(res.data).data.url;
@@ -509,6 +666,12 @@
                     } 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}`);
                     } else if (num == 3) {
                        let imageUrl = JSON.parse(res.data).data.url
                        this.carBody.push(imageUrl)
                        uni.setStorageSync('bodyofcarJpg', this.carBody.join(','));
                        this.editUserInfo.bodyofcarJpg = this.carBody.join(',')
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                     }
                  }
@@ -538,7 +701,8 @@
            this.editUserInfo = {
               ...this.editUserInfo,
               carImg: uni.getStorageSync('carImg'),
               drivingImg: uni.getStorageSync('drivingImg')
               drivingImg: uni.getStorageSync('drivingImg'),
               bodyofcarJpg: uni.getStorageSync('bodyofcarJpg')
            };
            this.$refs.editRef
               .validate()
@@ -562,20 +726,50 @@
                  this.$u.toast('修改失败');
               });
         },
         initPwd() {
        uni.navigateTo({
          url: `/pages/login/resetPassword/resetPassword`
        })
         },
         initPwdConfirm() {
            this.initPwdShow = false
            uni.showLoading({
               title: '加载中...'
            });
            this.editUserInfo.password = '123456';
            this.editUserInfo.carImg = uni.getStorageSync('carImg');
            this.editUserInfo.drivingImg = uni.getStorageSync('drivingImg')
            this.$reqPost('updateUser', this.editUserInfo, 'json').then(res => {
               uni.hideLoading()
               if (res.code == 0) {
                  uni.showToast({
                     title: '重置成功',
                     duration: 2000,
                     icon: 'success'
                  })
               } else {
                  this.$u.toast(res.msg ? res.msg : '修改失败');
               }
            }).catch(err => {
               this.$u.toast('修改失败');
            });
         },
         initPwdCancel() {
            this.initPwdShow = false
         },
         logout() {
            this.logoutShow = true;
         },
         logoutConfirm() {
            redirectLogin();
            this.changeisLogin(false)
            this.$store.dispatch('websocketOnClose')
         },
         logoutCancel() {
            this.logoutShow = false;
         },
         // 跳转发运统计页面
         statistics() {
            uni.navigateTo({
               url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics'
            });
         noobTour() {
            this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj1.jpg')
         }
      }
   };
@@ -589,15 +783,10 @@
      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);
      padding-bottom: vww(100);
      .driver-banner {
         width: 100%;
@@ -650,17 +839,21 @@
               top: vww(4);
            }
         }
      }
      .information-block {
         width: 100%;
         .personal-information {
            width: 100%;
            display: flex;
            justify-content: center;
            position: relative;
            top: vww(20);
            top: vww(-20);
            &-block {
               width: 690rpx;
               height: 478rpx;
               height: 550rpx;
               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;
@@ -716,12 +909,11 @@
      .car-information {
         width: 100%;
         position: relative;
         top: vww(410);
         @include flex justify-content: center;
         .information-main {
            width: 690rpx;
            height: 552rpx;
            height: 828rpx;
            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;
@@ -740,7 +932,7 @@
                  .label-title {
                     @include flex;
                     width: 220rpx;
                     width: 300rpx;
                     height: 100rpx;
                     .label-text {
@@ -753,6 +945,13 @@
                        height: 50rpx;
                     }
                  }
                  .special {
                     width: 100%;
                     flex-wrap: wrap;
                     height: 100%;
                     @include flex;
                  }
               }
            }
         }
@@ -764,7 +963,7 @@
         @include flex;
         justify-content: center;
         position: relative;
         bottom: vww(-430);
         top: vww(20);
         .loginout-main {
            width: 84%;
@@ -795,7 +994,7 @@
      .editDriverPopup-container {
         .u-popup {
            .u-transition {
               height: 75%;
               height: 80%;
               .u-popup__content {
                  overflow: scroll !important;
@@ -820,4 +1019,4 @@
         }
      }
   }
</style>
</style>