feat:增加类型显示

yangan

23 小时以前 a28d0135ee42809b2c5863609da37155d3ecba5b

 pages/password/face.vue

@@ -3,21 +3,21 @@
    <view class="addForm">
      <u--form labelPosition="top" :model="form">
        <u-form-item labelWidth="25%" label="" @click="beforeRead" required>
          <view class="deleteImg" v-if="fileList1.length" @click="deletePic">
            <u-icon name="close" color="#000000" size="30"></u-icon>
          </view>
          <view class="upload">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              :maxCount="1"
              width="180"
              height="180"
              customStyle="margin-left:8px;margin-top:8px;"
              previewFullImage
            ></u-upload>
          </view>
         <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>
@@ -100,6 +100,7 @@
    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({
@@ -144,6 +145,7 @@
};
</script>
<style lang="scss" scoped>
	
/deep/.u-form-item__body__right__content__slot {
  width: 100%;
  display: flex;
@@ -152,36 +154,62 @@
  /deep/u-view.u-upload__button[data-v-69e2a36e] {
    margin: 0 !important;
  }
  .deleteImg {
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: relative;
    right: -80px;
    top: -25px;
    z-index: 999;
  .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 {
    width: 80px;
    height: 77px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
   font-size: 3vh;
  }
}

.addBtn {
  width: 120px;
  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>