修改部分错误，增加新功能

qingyiay

2023-05-17 af436aa050f76584cd5cb88e413e45cd08c15d50

 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>
      <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="fu">
            <image src="../../../static/image/无人值守/组 38.png"></image>
            <view class="font">
               <view class="font-top">-60</view>
               <view class="font-bottom">负积分</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>

      <view class="personal-information-form">
      <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="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>
@@ -34,68 +112,98 @@
            <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 labelWidth="20%" label="车轴数" ref="item1">
               <u--input v-model="userInfo.carNo" border="none" inputAlign="right" disabled disabledColor="#fff"></u--input>
            <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-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" disabled></u-upload> -->
               <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="imageClick(0)"></u--image>
               <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="20%" label="行驶证照片" ref="item1">
               <!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" disabled></u-upload> -->
               <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="imageClick(1)"></u--image>
            <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></view>
      </view>
         <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="previewImage-container">
         <u-popup :show="previewImageShow" mode="center" @close="previewImageClose" @open="previewImageOpen">
            <u--image :src="previewImageSrc" width="200px" height="200px"></u--image>
            <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">
         <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="userInfo" ref="form1">
                  <u-form-item labelWidth="20%" label="姓名" ref="item1"><u--input v-model="userInfo.name" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="身份证号" ref="item1"><u--input v-model="userInfo.idCard" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="手机号" ref="item1"><u--input v-model="userInfo.phone" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="车牌号" ref="item1"><u--input v-model="userInfo.carNo" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="体重" ref="item1"><u--input v-model="userInfo.weight" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="车轴数" ref="item1"><u--input v-model="userInfo.carCS" border="none" inputAlign="left"></u--input></u-form-item>
                  <u-form-item labelWidth="20%" label="车辆照片" ref="item1">
                     <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
               <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-item>
                  <u-form-item labelWidth="20%" label="行驶证照片" ref="item1">
                     <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
                  <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>
               </u--form>
               <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>
      </view>
   </view>
</template>

<script>
import { customerId, userInfo } from '@/utils/status';
import { customerId, userInfo, redirectLogin } from '@/utils/status';
import { BaseUrl } from '@/api/publicInterface.js';
export default {
   data() {
      return {
         userInfo: {
            carCS:'',
         // 获取的司机详情
         userInfo: {},
         // 修改司机详情
         editUserInfo: {
            phone: '',
            name: '',
            username: '',
            type: 3,
            idCard: '',
            carNo: '',
            carImg: '',
            drivingImg: '',
            axleNum: '',
            weight: '',
            userId: ''
         },
         src: 'https://cdn.uviewui.com/uview/album/1.jpg',
         src: '',
         fileList1: [],
         fileList2: [],
         // 修改信息弹出框
         editDriverPopupShow: false,
         // previewImage
         previewImageShow: false,
         previewImageSrc: 'https://cdn.uviewui.com/uview/album/1.jpg'
         previewImageSrc: '',
         // 退出模态框
         logoutShow: false,
         logoutTitle: '提示',
         logoutContent: '是否确认退出',
         BaseUrl
      };
   },
   onShow() {
@@ -103,7 +211,6 @@
   },
   methods: {
      init() {
         // this.getUserById();
         this.getUserEntity();
      },
      getUserEntity() {
@@ -111,21 +218,15 @@
            title: '加载中...'
         });
         this.$reqGet('getUserEntity').then(res => {
            console.log(res, '司机详情');
            uni.hideLoading();
            this.userInfo = res.data;
            Object.keys(this.editUserInfo).map(item => {
               if (res.data[item]) {
                  this.editUserInfo[item] = res.data[item];
               }
            });
         });
      },
      // 获取用户信息
      // getUserById() {
      //    uni.showLoading({
      //       title: '加载中...'
      //    });
      //    this.$reqPost('getUserById', { id: customerId }, 'params').then(res => {
      //       uni.hideLoading();
      //       this.userInfo = res.data;
      //    });
      // },
      // 修改按钮点击
      editBtnClick() {
         this.editDriverPopupShow = true;
@@ -133,7 +234,14 @@
      imageClick(index) {
         // 通过index切换图片
         console.log('切换图片', index);
         this.previewImageShow = true;
         if (index == 1) {
            this.previewImageSrc = this.userInfo.carImg;
         } else {
            this.previewImageSrc = this.userInfo.drivingImg;
         }
         this.$nextTick(() => {
            this.previewImageShow = true;
         });
      },
      // 删除
      deletePic(event) {
@@ -152,7 +260,7 @@
            });
         });
         for (let i = 0; i < lists.length; i++) {
            const result = await this.uploadFilePromise(lists[i].url);
            const result = await this.uploadFilePromise(lists[i].url, event.name);
            let item = this[`fileList${event.name}`][fileListLen];
            this[`fileList${event.name}`].splice(
               fileListLen,
@@ -166,19 +274,22 @@
            fileListLen++;
         }
      },
      uploadFilePromise(url) {
      uploadFilePromise(url, num) {
         return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
               url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
               url: BaseUrl + '/admin/sys-file/uploadUnToken',
               filePath: url,
               name: 'file',
               formData: {
                  user: 'test'
               },
               // formData: {
               //    user: 'test'
               // },
               success: res => {
                  setTimeout(() => {
                     resolve(res.data.data);
                  }, 1000);
                  resolve(JSON.parse(res.data).data.url);
                  if (num == 1) {
                     this.editUserInfo.carImg = JSON.parse(res.data).data.url;
                  } else if (num == 2) {
                     this.editUserInfo.drivingImg = JSON.parse(res.data).data.url;
                  }
               }
            });
         });
@@ -203,12 +314,12 @@
      },
      // 修改用户信息
      updateUser() {
         this.$reqPost('updateUser', this.userInfo, 'params').then(res => {
         this.$reqPost('updateUser', this.editUserInfo, 'json').then(res => {
            console.log('更新数据', res);
            this.editDriverPopupShow = false;
            if (res.code == 0) {
               this.$u.toast('修改成功');
               this.getUserById();
               this.init();
            } else {
               uni.showToast({
                  title: res.msg,
@@ -217,82 +328,200 @@
               });
            }
         });
      },
      logout() {
         this.logoutShow = true;
      },
      logoutConfirm() {
         redirectLogin();
      },
      logoutCancel() {
         this.logoutShow = false;
      },
      // 跳转发运统计页面
      statistics() {
         uni.navigateTo({
            url: '/pages/customer-page/customer-my/faYunstatistics/faYunstatistics'
         });
      }
   }
};
</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;
         width: 80%;
         .u-button {
            &:nth-of-type(2) {
               margin-left: vww(10);
            }
         }
      }
   }

@@ -305,13 +534,22 @@
      .u-popup {
         .u-transition {
            height: 95%;

            .u-popup__content {
               overflow: scroll !important;
               .editDriverPopup-container-box {
                  width: 90%;
                  margin: 0 auto;
               }

               //closeIcon
               .u-popup__content__close--top-right {
                  top: vww(20) !important;
                  .u-icon {
                     .u-icon__icon {
                        font-size: vww(20) !important;
                     }
                  }
               }
            }
         }
      }