feat:增加类型显示

yangan

22 小时以前 a28d0135ee42809b2c5863609da37155d3ecba5b

 pages/password/face.vue

@@ -1,136 +1,215 @@
<template>
   <view class="addTo-freightForwarder-drvier">
      <view class="addForm">
         <u--form labelPosition="top"
         :model="form">
            <u-form-item labelWidth="25%"
               label="头像"
               @click="beforeRead"
               required>
               <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>
      </view>
      <view class="addBtn"><u-button text="确认"
            type="primary"
            @click="addToHuoDaiOrDriver"
            :loading="loading"></u-button></view>
   </view>
  <view class="addTo-freightForwarder-drvier">
    <view class="addForm">
      <u--form labelPosition="top" :model="form">
        <u-form-item labelWidth="25%" label="" @click="beforeRead" required>
         <view class="views">
            <view class="upload">
              <u-upload
               :fileList="fileList1"
               @afterRead="afterRead"
               @delete="deletePic"
               name="1"
               :maxCount="1"
               previewFullImage
              ></u-upload>
            </view>
            <view class="deleteImg" v-if="fileList1.length" @click="deletePic">
              <u-icon name="close" color="#000000" ></u-icon>
            </view>
         </view>
        </u-form-item>
      </u--form>
    </view>
    <view class="addBtn"
      ><u-button
        text="确认"
        type="primary"
        @click="addToHuoDaiOrDriver"
        :loading="loading"
      ></u-button
    ></view>
  </view>
</template>

<script>
   import { BaseUrl } from '@/api/publicInterface.js';
   import { mapMutations, mapState } from 'vuex';
   export default {
      data() {
         return {
            form:{
               userId:"",
               imgPath:"",
               username:""
            },
            loading:false,
            fileList1: [],
         };
      },
      onLoad(params) {
         let that=this
         if (params.id) {
           this.form.userId = params.id
         }
         if (params.username) {
           this.form.username = params.username
         }
         if(params.imgPath){
            this.form.imgPath = params.imgPath
            if (this.fileList1.length == 0 && params.imgPath) {
               this.fileList1.push({
                  url: `${BaseUrl}${params.imgPath}`
               });
            }
         }
      },
      onShow() {
         this.init();
      },
      methods: {
         ...mapMutations(['changeisUploadimg']),
         init() {
         },
         addToHuoDaiOrDriver() {
            this.loading=true
                if(this.form.imgPath){
               this.$reqPut('faceEdit', this.form, 'json').then(result => {
                  if (result.code == 0) {
                     this.loading=false
                     this.$u.toast('上传成功');
                     let timer = setTimeout(() => {
                        uni.navigateBack({
                           delta: 1
                        });
                     }, 500);
                  } else {
                     this.$u.toast(result.msg ? result.msg : '上传失败');
                  }
               });
                }
         },
         beforeRead() {
            this.changeisUploadimg(true);
         },
         // 新增图片
         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++;
            }
         },
         // 删除
         deletePic(event) {
            this.changeisUploadimg(true);
            this[`fileList${event.name}`].splice(event.index, 1);
         },
         uploadFilePromise(url, num) {
            return new Promise((resolve, reject) => {
               let a = uni.uploadFile({
                  url: BaseUrl + '/admin/sys-file/uploadUnToken',
                  filePath: url,
                  name: 'file',
                  success: res => {
                        this.form.imgPath = JSON.parse(res.data).data.url;
                        resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
                  }
               });
            });
         },
      },
   };
</script>
// #ifdef H5
const BaseUrl = window.location.origin;
//#endif
//#ifdef MP-WEIXIN
import { BaseUrl } from "@/api/publicInterface.js";
//#endif
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      form: {
        userId: "",
        imgPath: "",
        username: "",
      },
      loading: false,
      fileList1: [],
    };
  },
  onLoad(params) {
    let that = this;
    if (params.id) {
      this.form.userId = params.id;
    }
    if (params.username) {
      this.form.username = params.username;
    }
    if (params.imgPath) {
      this.form.imgPath = params.imgPath;
      if (this.fileList1.length == 0 && params.imgPath) {
        this.fileList1.push({
          url: `${BaseUrl}${params.imgPath}`,
        });
      }
    }
  },
  onShow() {
    this.init();
  },
  methods: {
    ...mapMutations(["changeisUploadimg"]),
    init() {},
    addToHuoDaiOrDriver() {
      this.loading = true;
      if (this.form.imgPath) {
        this.$reqPut("faceEdit", this.form, "json").then((result) => {
          if (result.code == 0) {
            this.loading = false;
            this.$u.toast("上传成功");
            let timer = setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 500);
          } else {
            this.$u.toast(result.msg ? result.msg : "上传失败");
          }
        });
      }
    },
    beforeRead() {
      this.changeisUploadimg(true);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
     console.log(this.fileList1, event)
      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++;
      }
    },
    // 删除
    deletePic(event) {
      this.fileList1.splice(0, 1);
    },
    uploadFilePromise(url, num) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: BaseUrl + "/admin/sys-file/uploadUnToken",
          filePath: url,
          name: "file",
          success: (res) => {
            this.form.imgPath = JSON.parse(res.data).data.url;
            resolve(`${BaseUrl}${JSON.parse(res.data).data.url}`);
          },
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
	
/deep/.u-form-item__body__right__content__slot {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /deep/u-view.u-upload__button[data-v-69e2a36e] {
    margin: 0 !important;
  }
  .views{
     width: 30vh;
     height: 30vh;
     .deleteImg {
       width: 5vh;
       height: 5vh;
       background-color: #ffffff;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 50%;
       position: relative;
       left: 80%;
       bottom: 28vh;
       z-index: 999;
     }
  }

  .upload {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
   font-size: 3vh;
  }
}

.addBtn {
  width: 40vw;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/deep/ .u-upload__button{
   margin: 0 !important;
}
/deep/ .u-upload{
   width: 30vh;
   height: 30vh;
}
/deep/ .u-upload__wrap__preview__image{
   width: 30vh !important;
   height: 30vh !important;
}
/deep/ .u-upload__button{
   width: 30vh !important;
   height: 30vh !important;
}

/deep/ .u-icon__icon {
   font-size: 4vh !important;
   font-weight: bold;
}
/deep/ .uicon-camera-fill{
   font-size: 6vh !important;
}
</style>