driverSchool/newPages/informationAdd/index.vue

<template>
  <view class="page flex-col">
    <view class="box_1 flex-row">


    </view>
    <view class="box_4 flex-col">
      <view class="box_5 flex-row">
        <image
            class="label_1"
            referrerpolicy="no-referrer"
            src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGacf527a62cbe7351c6472edd8f5b2814.png"
            @click="handleBack()"
        />
        <text class="text_1">个人信息</text>

      </view>
      <view class="box_6 flex-col">
        <view class="box_7 flex-row justify-between">
          <text class="text_2">头像</text>
          <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              :maxCount="1"
              width="80"
              height="80"
              :previewFullImage="true"
          >
            <image
                v-if="userDetails.avatar"
                class="label_2"
                :src="userDetails.avatar"
                mode="aspectFill"
            />
            <image
                v-else
                class="label_2"
                src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGcc6ee579083c2c921f6c93c250df5d44.png"
            />
          </u-upload>
          <!-- <image
       class="label_2"
       referrerpolicy="no-referrer"
       src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGcc6ee579083c2c921f6c93c250df5d44.png"
     /> -->

        </view>
        <view class="text-wrapper_1 flex-row justify-between">
          <text class="text_3">昵称</text>
          <input class="text_4" v-model="name" type="text" placeholder="请填写昵称">
          <!-- <text class="text_4">千舟寻渡</text> -->
        </view>
        <view class="text-wrapper_2 flex-row justify-between">
          <text class="text_5">联系方式</text>
          <input class="text_6" v-model="name" type="text" placeholder="请填写联系方式">
          <!-- <text class="text_6">166&nbsp;8888&nbsp;6666</text> -->
        </view>
      </view>
      <view class="box_8 flex-col">
        <view class="text-wrapper_3 flex-row">
          <text class="text_7">身份证照片</text>
        </view>
        <view class="group_2 flex-row justify-between">
          <view class="image-wrapper_2 flex-col">
            <image
                class="image_3"
                referrerpolicy="no-referrer"
                src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNG613ddce187a71bcc667c56c84cd2d022.png"
            />
          </view>
          <view class="image-wrapper_3 flex-col">
            <image
                class="image_4"
                referrerpolicy="no-referrer"
                src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNGc70887b65324cf1c7b3d66fcb7a32970.png"
            />
          </view>
        </view>
      </view>
      <view class="box_9 flex-col">
        <text class="text_8">生活照片</text>
        <view class="block_2 flex-row">
          <view class="image-text_1 flex-col justify-between">
            <image
                class="label_3"
                referrerpolicy="no-referrer"
                src="/static/lanhu_gerenxinxiweitianxie/FigmaDDSSlicePNG6ea89e46a56641bc7e118ef1d4d789d5.png"
            />
            <text class="text-group_1">添加图片</text>
          </view>
        </view>
      </view>
    </view>
    <view class="box_10 flex-col">
      <view class="text-wrapper_4 flex-col">
        <text class="text_9">保存</text>
      </view>
    </view>
  </view>
</template>
<script>
import upload from '@/utils/upload.js'
import request from '@/utils/request.js'
import {getLocalUserInfo} from '../../utils/auth';

export default {
  data() {
    return {
      // userDetails: [],
      userId: null,
      constants: {},
      avatarList: [],// 用于上传组件的文件列表
      idCardfileList: [],
      idCardList: [],
      lifePhotoList: [],
      imageUrl: this.$imagesUrl,
      userDetails: {
        avatar: '',
        name: null,
        phone: null,
        idCardImg: '',
        lifeImg: '',
      },
    };
  },
  onLoad(option) {
    this.userId = option.userId;
    this.getUserInfo()
  },
  methods: {
    handleBack() {
      uni.navigateBack({
        delta: 1
      });
    },

    getUserInfo() {
      request({
        url: '/app-api/small/dl-drive-school-student/getByUserId',
        method: 'GET',
        params: {
          userId: this.userId,
        },
      }).then(res => {
        this.userDetails = res.data
        if (res.data.avatar) {
          this.fileList1 = [{
            url: res.data.avatar,
            status: 'success'
          }]
        }
      })
    },

    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1)
      this.userDetails.avatar = '' // 清空头像
    },

    // 新增图片
    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: '上传中'
        })
      })

      // 上传图片到服务器
      lists.map((item, index) => {
        this.uploadFilePromise(item.url).then(res => {
          let item = this[`fileList${event.name}`][fileListLen + index]
          this[`fileList${event.name}`].splice(fileListLen + index, 1, {
            ...item,
            status: 'success',
            message: '',
            url: res.data.url
          })
          // 更新用户头像
          this.userDetails.avatar = this.baseUrl + '/' + res.data.url
        }).catch(err => {
          let item = this[`fileList${event.name}`][fileListLen + index]
          this[`fileList${event.name}`].splice(fileListLen + index, 1, {
            ...item,
            status: 'failed',
            message: '上传失败'
          })
        })
      })
    },

    // 上传文件方法
    uploadFilePromise(e) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          url: '/app-api/small-upload/common/upload',
          filePath: e,
          name: 'file',
          success: (res) => {
            if (res.statusCode === 200) {
              resolve(JSON.parse(res.data))
            } else {
              reject(new Error('上传失败'))
            }
          },
          fail: (err) => {
            reject(err)
          }
        })
      })
    }
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';
</style>