细节问题

819527061@qq.com

2024-07-18 825abb00f52fe7d68b3479f328928bf74a47171e

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

@@ -1,376 +1,1025 @@
<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>
         <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>
      </view> -->
  <view class="driver-my">
    <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>
    </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="`${onlineurl}/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="`${onlineurl}/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="`${onlineurl}/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="`${onlineurl}/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">
              <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="`${onlineurl}/appimg/image/banner/weighnum.png`"
                       mode="widthFix"></image>
                <view class="label-text">体重</view>
              </view>
              <view class="information-value">
                {{ userInfo.weight || '' }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="car-information">
      <view class="information-main">
        <view class="information-body">
          <view class="car-img">
            <view class="label-title">
              <image :src="`${onlineurl}/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="`${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>
            <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="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="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="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="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 != null ? BaseUrl + previewImageSrc : ''"
                  width="400px"
                  height="400px"></u--image>
      </u-popup>
    </view>

      <!-- 图片预览弹出框 -->
      <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>
      </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>
        <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-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>
            <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="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="体重"
                         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"
                         >
              <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 prop="bodyofcarJpg"
                         label="车头车尾车身照片"
                         labelWidth="20%"

      <!-- 修改弹出框 -->
      <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>
            <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-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>
               </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>
                         @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"
                         @click="beforeRead"
                         prop="drivingImg"
                         >
              <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>
        </view>
      </u-popup>
    </view>
    <view class="logoutModel">
      <u-modal :show="logoutShow"
               :title="logoutTitle"
               showCancelButton
               :content="logoutContent"
               @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, 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 {
   data() {
      return {
         // 获取的司机详情
         userInfo: {},
         // 修改司机详情
         editUserInfo: {
            phone: '',
            name: '',
            username: '',
            type: 3,
            idCard: '',
            carNo: '',
            carImg: '',
            drivingImg: '',
            axleNum: '',
            weight: '',
            userId: ''
         },
         src: '',
         fileList1: [],
         fileList2: [],
         // 修改信息弹出框
         editDriverPopupShow: false,
         // previewImage
         previewImageShow: false,
         previewImageSrc: '',
         // 退出模态框
         logoutShow: false,
         logoutTitle: '提示',
         logoutContent: '是否确认退出',
         BaseUrl
      };
   },
   onShow() {
      // this.init();
   },
   methods: {
      init() {
         this.getUserEntity();
      },
      getUserEntity() {
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqGet('getUserEntity').then(res => {
            uni.hideLoading();
            this.userInfo = res.data;
            Object.keys(this.editUserInfo).map(item => {
               if (res.data[item]) {
                  this.editUserInfo[item] = res.data[item];
               }
            });
         });
      },
      // 修改按钮点击
      editBtnClick() {
         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;
         });
      },
      // 删除
      deletePic(event) {
         this[`fileList${event.name}`].splice(event.index, 1);
      },
      // 新增图片
      async afterRead(event) {
         // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
         let lists = [].concat(event.file);
         let fileListLen = this[`fileList${event.name}`].length;
         lists.map(item => {
            this[`fileList${event.name}`].push({
               ...item,
               status: 'uploading',
               message: '上传中'
            });
         });
         for (let i = 0; i < lists.length; i++) {
            const result = await this.uploadFilePromise(lists[i].url, event.name);
            let item = this[`fileList${event.name}`][fileListLen];
            this[`fileList${event.name}`].splice(
               fileListLen,
               1,
               Object.assign(item, {
                  status: 'success',
                  message: '',
                  url: result
               })
            );
            fileListLen++;
         }
      },
      uploadFilePromise(url, num) {
         return new Promise((resolve, reject) => {
            let a = uni.uploadFile({
               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;
                  } else if (num == 2) {
                     this.editUserInfo.drivingImg = JSON.parse(res.data).data.url;
                  }
               }
            });
         });
      },
      /**
       * @preview 预览图片
       */
      previewImageClose() {
         this.previewImageShow = false;
      },
      previewImageOpen() {
         console.log('preview open');
      },
      /**
       * @editPopup 修改弹出框事件
       */
      editDriverPopupClose() {
         this.editDriverPopupShow = false;
      },
      editDriverPopupOpen() {
         console.log('打开了');
      },
      // 修改用户信息
      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
               });
            }
         });
      },
      logout() {
         this.logoutShow = true;
      },
      logoutConfirm() {
         redirectLogin();
      },
      logoutCancel() {
         this.logoutShow = false;
      }
   }
  components: {
    combinedTitle,
    previewImage
  },
  computed: {
    ...mapState(['driverTourImgList']),
  },
  data() {
    return {
      // 获取的司机详情
      userInfo: {},
      // 修改司机详情
      editUserInfo: {
        phone: '',
        name: '',
        username: '',
        type: 3,
        idCard: '',
        carNo: '',
        carImg: '',
        drivingImg: '',
        axleNum: '',
        weight: '',
        userId: '',
        vehicleColour: '',
        bodyofcarJpg: '',
        password: ''
      },
      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,
          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',
          required: false,
          message: '请输入车牌号',
          trigger: ['blur', 'change']
        },
          {
            transform(value) {
              return String(value);
            },
            validator: (rule, value, callback) => {
              return uni.$u.test.carNo(value);
            },
            message: '请输入正确的车牌号',
            trigger: ['change', 'blur']
          }
        ],
        vehicleColour: {
          type: 'string',
          required: true,
          message: '请选择车牌颜色',
          trigger: ['blur', 'change']
        },
        axleNum: [{
          transform(value) {
            return Number(value);
          },
          validator: (rule, value, callback) => {
            return value <= 10;
          },
          message: '请输入正确的车轴数',
          trigger: ['change', 'blur']
        }],
        carImg: {
          type: 'string',
          message: '请上传车辆图片',
          trigger: ['blur', 'change']
        },
        bodyofcarJpg: {
          type: 'string',
          message: '请上传车辆图片',
          trigger: ['blur', 'change']
        },
        drivingImg: {
          type: 'string',
          message: '请上传行驶证照片',
          trigger: ['blur', 'change']
        }
      },
      src: '',
      fileList1: [],
      fileList2: [],
      // 车头车身车尾照片
      fileList3: [],
      carBody: [],
      // 修改信息弹出框
      editDriverPopupShow: false,
      // previewImage
      previewImageShow: false,
      previewImageSrc: '',
      // 退出模态框
      logoutShow: false,
      logoutTitle: '提示',
      logoutContent: '是否确认退出',
      BaseUrl,
      onlineurl,
      radiolist2: [{
        name: '黄色',
        value: '黄色'
      },
        {
          name: '黄绿色',
          value: '黄绿色'
        },
        {
          name: '蓝色',
          value: '蓝色'
        }
      ],
      initPwdShow: false
    };
  },
  onShow() {
    // this.init();
  },
  onReady() {
    this.$refs.editRef.setRules(this.rules);
  },
  methods: {
    ...mapMutations(['changeisUploadimg', 'changeisLogin']),
    init() {
      this.getUserEntity();
    },
    getUserEntity() {
      uni.showLoading({
        title: '加载中...'
      });
      this.$reqGet('getUserEntity').then(res => {
        uni.hideLoading();
        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}`
          });
        }
        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}`
            });
          }
        }
      });
    },
    // 修改按钮点击
    editBtnClick() {
      this.editDriverPopupShow = true;
    },
    imageClick(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;
      });
    },
    beforeRead() {
      this.changeisUploadimg(true);
    },
    // 删除
    deletePic(event) {
      this.changeisUploadimg(true);
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map(item => {
        this[`fileList${event.name}`].push({
          ...item,
          status: 'uploading',
          message: '上传中'
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, event.name);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: 'success',
              message: '上传成功',
              url: result
            })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url, num) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: BaseUrl + '/admin/sys-file/uploadUnToken',
          filePath: url,
          name: 'file',
          success: res => {
            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}`);
            } 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}`);
            }
          }
        });
      });
    },
    /**
     * @preview 预览图片
     */
    previewImageClose() {
      this.previewImageShow = false;
    },
    previewImageOpen() {
      console.log('preview open');
    },
    /**
     * @editPopup 修改弹出框事件
     */
    editDriverPopupClose() {
      this.editDriverPopupShow = false;
    },
    editDriverPopupOpen() {
      console.log('打开了');
    },
    // 修改用户信息
    updateUser() {
      this.editUserInfo = {
        ...this.editUserInfo,
        carImg: uni.getStorageSync('carImg'),
        drivingImg: uni.getStorageSync('drivingImg'),
        bodyofcarJpg: uni.getStorageSync('bodyofcarJpg')
      };
      if(this.fileList3 && this.fileList3.length > 0) {  //车头车尾车身需要3张图片也可以一张也不传
        if(this.fileList3.length !== 3) {
          this.$u.toast('车头车尾车身需要3张图片');
          return
        }
      }
      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('修改失败');
          });
    },
    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;
    },
    noobTour() {
      this.$refs.previewImage.open('https://mx.jzeg.cn:9095/appimg/image/tour/driver/sj1.jpg')
    }
  }
};
</script>

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

::v-deep.driver-my {
   width: 90%;
   margin: 0 auto;
   padding-bottom: vww(60);
   // 积分
   .jifen {
      margin-top: vww(24);
      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%;
         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: #1987ff;
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;
            }
         }
      }
      .fu {
         width: 50%;
         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;
            }
            &-bottom {
               font-size: 14px;
               font-weight: 400;
               text-align: left;
               color: #111111;
            }
         }
      }
   }
   // 表单
   .personal-information-form {
      // 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);
            }
         }
      }
   }
  width: 100%;
  margin: 0 auto;
  padding-bottom: vww(100);

   // 预览图片
   .previewImage-container {
   }
  .driver-banner {
    width: 100%;
    height: 430rpx;
    background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
    background-size: contain;
    position: fixed;
    top: 0;

   // 修改弹出框
   .editDriverPopup-container {
      .u-popup {
         .u-transition {
            height: 95%;
            .u-popup__content {
               overflow: scroll !important;
               .editDriverPopup-container-box {
                  width: 90%;
                  margin: 0 auto;
               }
    .navgation {
      width: 80rpx;
      height: 37rpx;
      font-size: 40rpx;
      font-weight: normal;
      color: #ffffff;
      line-height: 69rpx;
      margin: vww(60) auto;
    }

               //closeIcon
               .u-popup__content__close--top-right {
                  top: vww(20) !important;
                  .u-icon {
                     .u-icon__icon {
                        font-size: vww(20) !important;
                     }
                  }
               }
            }
         }
      }
   }
    .avatar {
      width: 100%;
      height: 430rpx;
      display: flex;
      align-items: center;
      position: fixed;
      top: 0;

      .avatar-imgage {
        width: 98rpx;
        height: 98rpx;
        margin-left: vww(18);
        @include flex;
        justify-content: center;
      }

      .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);
      }
    }
  }

  .information-block {
    width: 100%;

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

      &-block {
        width: 690rpx;
        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;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .block-main {
          width: 636rpx;
          margin: vww(10) vww(14);
        }

        .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;
    @include flex justify-content: center;

    .information-main {
      width: 690rpx;
      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;

      .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: 300rpx;
            height: 100rpx;

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

            image {
              width: 50rpx;
              height: 50rpx;
            }
          }

          .special {
            width: 100%;
            flex-wrap: wrap;
            height: 100%;
            @include flex;
          }
        }
      }
    }
  }

  .loginout {
    width: 100%;
    height: 74rpx;
    @include flex;
    justify-content: center;
    position: relative;
    top: vww(20);

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

  // 表单
  .personal-information-form {
    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);
        }
      }
    }
  }

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

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

        .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;
              }
            }
          }
        }
      }
    }
  }
}
</style>