注册页面修改

付延余

2023-03-16 5355011b9d5e4f32a8751d1c2e600b2601fd8967

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

@@ -1,6 +1,6 @@
<template>
   <view class="driver-my">
      <view class="jifen">
      <!-- <view class="jifen">
         <view class="zheng">
            <image src="../../../static/image/无人值守/组 38_1.png"></image>
            <view class="font">
@@ -15,7 +15,7 @@
               <view class="font-bottom">负积分</view>
            </view>
         </view>
      </view>
      </view> -->

      <view class="personal-information-form">
         <u--form labelPosition="left" :model="userInfo" ref="form1">
@@ -34,68 +34,93 @@
            <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="BaseUrl + userInfo.carImg" width="80px" height="80px" @click="imageClick(1)"></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="BaseUrl + userInfo.drivingImg" width="80px" height="80px" @click="imageClick(2)"></u--image>
            </u-form-item>
         </u--form>
         <view class="push-information-button"><u-button text="修改个人资料" type="primary" @click="editBtnClick"></u-button></view>
         <view class="push-information-button">
            <u-button text="退出登录" type="primary" @click="logout"></u-button>
            <u-button text="修改个人资料" type="primary" @click="editBtnClick"></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="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 +128,6 @@
   },
   methods: {
      init() {
         // this.getUserById();
         this.getUserEntity();
      },
      getUserEntity() {
@@ -114,18 +138,14 @@
            console.log(res, '司机详情');
            uni.hideLoading();
            this.userInfo = res.data;
            Object.keys(this.editUserInfo).map(item => {
               console.log(res.data[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 +153,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 +179,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 +193,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 +233,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,6 +247,15 @@
               });
            }
         });
      },
      logout() {
         this.logoutShow = true;
      },
      logoutConfirm() {
         redirectLogin();
      },
      logoutCancel() {
         this.logoutShow = false;
      }
   }
};
@@ -289,10 +328,16 @@
   }
   // 表单
   .personal-information-form {
      margin-top: vww(24);
      // margin-top: vww(24);
      .push-information-button {
         display: flex;
         margin: vww(20) auto 0;
         width: 80%;
         .u-button {
            &:nth-of-type(2) {
               margin-left: vww(10);
            }
         }
      }
   }

@@ -305,13 +350,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;
                     }
                  }
               }
            }
         }
      }