@10yun/cv-mobile-ui 0.5.50 → 0.5.52

package/ui-fireui/components/u-upload2/u-upload.vue

@@ -0,0 +1,464 @@
+<template>
+  <view class="up-container">
+    <view class="up-upload-box">
+      <view class="up-image-item" v-for="(item, index) in imageList" :key="index">
+        <image :src="item" class="up-item-img" @tap.stop="previewImage(index)" mode="aspectFill"></image>
+        <view v-if="!forbidDel" class="up-img-del" @tap.stop="delImage(index)">
+          <image class="del-img" src="/static/images/share/icon_del.png" mode="widthFix"></image>
+        </view>
+        <view v-if="statusArr[index] != 1" class="up-upload-mask">
+          <view class="up-upload-loading" v-if="statusArr[index] == 2"></view>
+          <text class="up-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
+          <view
+            class="up-mask-btn"
+            v-if="statusArr[index] == 3"
+            @tap.stop="reUpLoad(index)"
+            hover-class="up-btn-hover"
+            :hover-stay-time="150"
+          >
+            重新上传
+          </view>
+        </view>
+      </view>
+      <view v-if="isShowAdd" class="up-upload-add" @tap="chooseImage">
+        <uni-icons type="camera" size="30" color="#00AFC7" />
+        <view class="" style="font-size: 24rpx; margin-top: 20rpx">添加</view>
+        <!-- <image class="add-img" src="/static/images/share/ad.png" mode="widthFix"></image> -->
+        <!-- <view class="up-upload-icon up-icon-plus"></view> -->
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  name: 'fuiUpload',
+  props: {
+    //初始化图片路径
+    value: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //禁用删除
+    forbidDel: {
+      type: Boolean,
+      default: false
+    },
+    //禁用添加
+    forbidAdd: {
+      type: Boolean,
+      default: false
+    },
+    //服务器地址
+    serverUrl: {
+      type: String,
+      default: ''
+    },
+    //限制数
+    limit: {
+      type: Number,
+      default: 9
+    },
+    //original 原图，compressed 压缩图，默认二者都有
+    sizeType: {
+      type: Array,
+      default() {
+        return ['original', 'compressed'];
+      }
+    },
+    //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
+    sourceType: {
+      type: Array,
+      default() {
+        return ['album', 'camera'];
+      }
+    },
+    //可上传图片类型，默认为空，不限制  Array<String> ['jpg','png','gif']
+    imageFormat: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    //单张图片大小限制 MB
+    size: {
+      type: Number,
+      default: 4
+    },
+    //项目名，默认为 file
+    fileKeyName: {
+      type: String,
+      default: 'file'
+    },
+    //HTTP 请求 Header, header 中不能设置 Referer。
+    header: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    //HTTP 请求中其他额外的 form data
+    formData: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      //图片地址
+      imageList: [],
+      //上传状态：1-上传成功 2-上传中 3-上传失败
+      statusArr: []
+    };
+  },
+  created() {
+    this.initImages();
+  },
+  watch: {
+    value(val) {
+      console.log('监听', val);
+      if (val) {
+        this.initImages();
+      }
+    }
+  },
+  computed: {
+    isShowAdd() {
+      let isShow = true;
+      if (this.forbidAdd || (this.limit && this.imageList.length >= this.limit)) {
+        isShow = false;
+      }
+      return isShow;
+    }
+  },
+  methods: {
+    initImages() {
+      this.imageList = [...this.value];
+      for (let item of this.imageList) {
+        this.statusArr.push('1');
+      }
+    },
+    // 重新上传
+    reUpLoad(index) {
+      this.statusArr[index] = '2';
+      this.change();
+      this.uploadImage(index, this.imageList[index])
+        .then(() => {
+          this.change();
+        })
+        .catch(() => {
+          this.change();
+        });
+    },
+    change() {
+      let status = ~this.statusArr.indexOf('2') ? 2 : 1;
+      if (status != 2 && ~this.statusArr.indexOf('3')) {
+        // 上传失败
+        status = 3;
+      }
+      this.$emit('complete', {
+        status: status,
+        imgArr: this.imageList
+      });
+    },
+    chooseImage() {
+      let _this = this;
+      uni.chooseImage({
+        count: _this.limit - _this.imageList.length,
+        success: function (e) {
+          let imageArr = [];
+          for (let i = 0; i < e.tempFilePaths.length; i++) {
+            let len = _this.imageList.length;
+            if (len >= _this.limit) {
+              uni.showToast({
+                title: `最多可上传${_this.limit}张图片`,
+                icon: 'none'
+              });
+              break;
+            }
+            let path = e.tempFilePaths[i];
+            imageArr.push(path);
+            _this.imageList.push(path);
+            _this.statusArr.push('2');
+          }
+          _this.change();
+
+          let start = _this.imageList.length - imageArr.length;
+          for (let j = 0; j < imageArr.length; j++) {
+            let index = start + j;
+            //服务器地址
+            if (_this.serverUrl) {
+              _this
+                .uploadImage(index, imageArr[j])
+                .then(() => {
+                  _this.change();
+                })
+                .catch(() => {
+                  _this.change();
+                });
+            } else {
+              //无服务器地址则直接返回成功
+              this.statusArr[index] = 1;
+              _this.change();
+            }
+          }
+        }
+      });
+    },
+    uploadImage(index, url) {
+      let _this = this;
+      return new Promise((resolve, reject) => {
+        uni.uploadFile({
+          url: this.serverUrl,
+          name: this.fileKeyName,
+          header: {
+            //设置请求头
+          },
+          formData: {},
+          filePath: url,
+          success: function (res) {
+            console.log(res);
+            if (res.statusCode == 200) {
+              //返回结果 此处需要按接口实际返回进行修改
+              let d = JSON.parse(res.data.replace(/\ufeff/g, '') || '{}');
+              //判断code，以实际接口规范判断
+              if (d.code % 100 === 0) {
+                // 上传成功 d.url 为上传后图片地址，以实际接口返回为准
+                d.url && (_this.imageList[index] = d.url);
+                this.statusArr[index] = d.url ? '1' : '3';
+              } else {
+                // 上传失败
+                this.statusArr[index] = 3;
+              }
+              resolve(index);
+            } else {
+              this.statusArr[index] = 3;
+
+              reject(index);
+            }
+          },
+          fail: function (res) {
+            this.statusArr[index] = 3;
+
+            reject(index);
+          }
+        });
+      });
+    },
+    delImage(index) {
+      this.imageList.splice(index, 1);
+      this.statusArr.splice(index, 1);
+      this.$emit('remove', {
+        index: index
+      });
+      this.change();
+    },
+    previewImage(index) {
+      if (!this.imageList.length) return;
+      uni.previewImage({
+        current: this.imageList[index],
+        loop: true,
+        urls: this.imageList
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+@font-face {
+  font-family: 'tuiUpload';
+  src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAATcAA0AAAAAByQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEwAAAABoAAAAciR52BUdERUYAAASgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABCAAAAVjxvR/tjbWFwAAAB+AAAAEUAAAFK5ibpuGdhc3AAAASYAAAACAAAAAj//wADZ2x5ZgAAAkwAAADXAAABAAmNjcZoZWFkAAABMAAAAC8AAAA2FpiS+WhoZWEAAAFgAAAAHQAAACQH3QOFaG10eAAAAeQAAAARAAAAEgwAACBsb2NhAAACQAAAAAwAAAAMAEoAgG1heHAAAAGAAAAAHwAAACABEgA2bmFtZQAAAyQAAAFJAAACiCnmEVVwb3N0AAAEcAAAACgAAAA6OMUs4HjaY2BkYGAAYo3boY/i+W2+MnCzMIDAzb3qdQj6fwPzf+YGIJeDgQkkCgA/KAtvAHjaY2BkYGBu+N/AEMPCAALM/xkYGVABCwBZ4wNrAAAAeNpjYGRgYGBl0GJgZgABJiDmAkIGhv9gPgMADTABSQB42mNgZGFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDA7PGJ9xMjf8b2CIYW5gaAAKM4LkANt9C+UAAHjaY2GAABYIVmBgAAAA+gAtAAAAeNpjYGBgZoBgGQZGBhBwAfIYwXwWBg0gzQakGRmYnjE+4/z/n4EBQksxSf6GqgcCRjYGOIeRCUgwMaACRoZhDwCiLwmoAAAAAAAAAAAAAAAASgCAeNpdjkFKw0AARf/vkIR0BkPayWRKQZtYY90ohJju2kOIbtz0KD1HVm50UfEmWXoAr9ADOHFARHHzeY//Fx8Ci+FJfIgdJFa4AhgiMshbrCuIsLxhFJZVs+Vl1bT1GddtbXTC3OhohN4dg4BJ3zMJAnccyfm468ZzHXddrH9ZKbHzdf9n/vkY/xv9sPQXgGEvBrHHwst5kTbXLE+YpYVPkxepPmW94W16UbdNJd6f3SAzo5W7m1jaKd+8ZZIvk5nlKw9SK6Wle7BLS3f/bTzQLmfAF2T1NsQAeNp9kD1OAzEQhZ/zByQSQiCoXVEA2vyUKRMp9Ailo0g23pBo1155nUg5AS0VB6DlGByAGyDRcgpelkmTImvt6PObmeexAZzjGwr/3yXuhBWO8ShcwREy4Sr1F+Ea+V24jhY+hRvUf4SbuFUD4RYu1BsdVO2Eu5vSbcsKZxgIV3CKJ+Eq9ZVwjfwqXMcVPoQb1L+EmxjjV7iFa2WpDOFhMEFgnEFjig3jAjEcLJIyBtahOfRmEsxMTzd6ETubOBso71dilwMeaDnngCntPbdmvkon/mDLgdSYbh4FS7YpjS4idCgbXyyc1d2oc7D9nu22tNi/a4E1x+xRDWzU/D3bM9JIbAyvkJI18jK3pBJTj2hrrPG7ZynW814IiU68y/SIx5o0dTr3bmniwOLn8owcfbS5kj33qBw+Y1kIeb/dTsQgil2GP5PYcRkAAAB42mNgYoAALjDJyIAOWMGiTIxMjMxsKak5qSWpbFmZiRmJ+QAmgAUIAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9M296nUwGgA+8QYgAAA=)
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.up-upload-icon {
+  font-family: 'tuiUpload' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 10rpx;
+}
+
+.up-icon-delete:before {
+  content: '\e601';
+}
+
+.up-icon-plus:before {
+  content: '\e609';
+}
+
+.up-upload-box {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.up-upload-add {
+  width: 220rpx;
+  height: 220rpx;
+  font-size: 68rpx;
+  font-weight: 100;
+  color: #888;
+  background-color: #f7f7f7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.up-image-item {
+  width: 220rpx;
+  height: 220rpx;
+  position: relative;
+  margin-right: 20rpx;
+  margin-bottom: 20rpx;
+}
+
+.up-image-item:nth-of-type(3n) {
+  margin-right: 0;
+}
+
+.up-item-img {
+  width: 220rpx;
+  height: 220rpx;
+  display: block;
+}
+
+.up-img-del {
+  width: 36rpx;
+  height: 36rpx;
+  position: absolute;
+  right: -12rpx;
+  top: -12rpx;
+  background-color: #eb0909;
+  border-radius: 50%;
+  color: white;
+  font-size: 34rpx;
+  z-index: 999;
+}
+
+.up-img-del::before {
+  content: '';
+  width: 16rpx;
+  height: 1px;
+  position: absolute;
+  left: 10rpx;
+  top: 18rpx;
+  background-color: #fff;
+}
+
+.up-upload-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  padding: 40rpx 0;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.up-upload-loading {
+  width: 28rpx;
+  height: 28rpx;
+  border-radius: 50%;
+  border: 2px solid;
+  border-color: #b2b2b2 #b2b2b2 #b2b2b2 #fff;
+  animation: up-rotate 0.7s linear infinite;
+}
+
+@keyframes up-rotate {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.up-tips {
+  font-size: 26rpx;
+  color: #fff;
+}
+
+.up-mask-btn {
+  padding: 4rpx 16rpx;
+  border-radius: 40rpx;
+  text-align: center;
+  font-size: 24rpx;
+  color: #fff;
+  border: 1rpx solid #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.up-btn-hover {
+  opacity: 0.8;
+}
+
+/**
+* css 中的
+*/
+
+.up-upload-box {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.up-upload-item {
+  width: 153rpx;
+  height: 153rpx;
+  border: 1rpx solid #e6e6e6;
+  box-sizing: border-box;
+  border-radius: 4rpx;
+  position: relative;
+  margin-bottom: 36rpx;
+  margin-right: 26rpx;
+}
+
+.up-upload-item:nth-of-type(4n) {
+  margin-right: 0 !important;
+}
+
+.up-upload-img {
+  width: 153rpx;
+  height: 153rpx;
+  border-radius: 4rpx;
+}
+
+.up-upload-del {
+  position: absolute;
+  /* font-size: 24px !important; */
+  right: -18rpx;
+  top: -18rpx;
+  /* color: #ed3f14 !important; */
+}
+
+.up-upload-add {
+  color: #e6e6e6;
+  font-weight: 200;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.up-upload-add text {
+  font-size: 84rpx;
+  line-height: 38rpx;
+  height: 48rpx;
+}
+</style>

package/ui-fireui/components/{fui-uploadsamll/fui-uploadsamll.vue → u-uploadsamll/u-uploadsamll.vue}

@@ -1,38 +1,38 @@
 <template>
-  <view class="fui-container">
-    <view class="fui-upload-box" :class="[isShowAdd ? 'fui-uploadd' : 'fui-none']">
-      <view class="fui-image-item" v-for="(item, index) in imageList" :key="index">
+  <view class="up-container">
+    <view class="up-upload-box" :class="[isShowAdd ? 'up-uploadd' : 'up-none']">
+      <view class="up-image-item" v-for="(item, index) in imageList" :key="index">
         <image
           :src="item"
           :style="[{ borderRadius: borderRadius + 'rpx' }]"
-          class="fui-item-img"
+          class="up-item-img"
           @tap.stop="previewImage(index)"
           mode="aspectFill"
         ></image>
-        <view v-if="!forbidDel" class="fui-img-del" @tap.stop="delImage(index)"></view>
-        <view v-if="statusArr[index] != 1" class="fui-upload-mask">
-          <view class="fui-upload-loading" v-if="statusArr[index] == 2"></view>
-          <text class="fui-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
+        <view v-if="!forbidDel" class="up-img-del" @tap.stop="delImage(index)"></view>
+        <view v-if="statusArr[index] != 1" class="up-upload-mask">
+          <view class="up-upload-loading" v-if="statusArr[index] == 2"></view>
+          <text class="up-tips">{{ statusArr[index] == 2 ? '上传中...' : '上传失败' }}</text>
           <view
-            class="fui-mask-btn"
+            class="up-mask-btn"
             v-if="statusArr[index] == 3"
             @tap.stop="reUpLoad(index)"
-            hover-class="fui-btn-hover"
+            hover-class="up-btn-hover"
             :hover-stay-time="150"
           >
             重新上传
           </view>
         </view>
       </view>
-      <view v-if="isShowAdd" class="fui-upload-addicon" @tap="chooseImage">
-        <view class="fui-upload-item">
+      <view v-if="isShowAdd" class="up-upload-addicon" @tap="chooseImage">
+        <view class="up-upload-item">
           <image style="width: 45rpx; height: 45rpx" src="/static/images/img.png" mode="widthFix"></image>
           <!-- <cv-icons type="media-camera-filled" size="44" color="#262871" /> -->
           <!-- <view class="fontS_15" :style="[{ fontSize: fontSize + 'rpx' }]" style="margin-top: 10upx; color: #4fb49b">
             请上传照片
           </view> -->
         </view>
-        <!-- <view class="fui-upload-icon fui-icon-plus"></view> -->
+        <!-- <view class="up-upload-icon up-icon-plus"></view> -->
       </view>
     </view>
   </view>
@@ -327,7 +327,7 @@ export default {
   font-style: normal;
 }
 
-.fui-upload-icon {
+.up-upload-icon {
   font-family: 'fuiUpload' !important;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -335,26 +335,26 @@ export default {
   padding: 10rpx;
 }
 
-.fui-icon-delete:before {
+.up-icon-delete:before {
   content: '\e601';
 }
 
-.fui-icon-plus:before {
+.up-icon-plus:before {
   content: '\e609';
 }
 
-.fui-upload-box {
+.up-upload-box {
   width: 100%;
   border-radius: 50%;
 }
-.fui-uploadd {
+.up-uploadd {
   border: 1rpx solid #cccccc;
   border-radius: 0;
 }
-.fui-none {
+.up-none {
   border: none;
 }
-.fui-upload-add {
+.up-upload-add {
   width: 62rpx;
   height: 62rpx;
   font-weight: 100;
@@ -363,12 +363,12 @@ export default {
   padding: 0;
   background-color: #fff;
 }
-.fui-upload-addicon {
+.up-upload-addicon {
   width: 62rpx;
   height: 62rpx;
   background-color: #fff;
 }
-.fui-upload-item {
+.up-upload-item {
   margin: auto;
   vertical-align: middle;
   text-align: center;
@@ -376,7 +376,7 @@ export default {
   height: 62rpx;
   padding: 14rpx 0;
 }
-.fui-image-item {
+.up-image-item {
   width: 62rpx;
   height: 62rpx;
   position: relative;
@@ -384,17 +384,17 @@ export default {
   border-radius: 50%;
 }
 
-.fui-image-item:nth-of-type(3n) {
+.up-image-item:nth-of-type(3n) {
   margin-right: 0;
 }
 
-.fui-item-img {
+.up-item-img {
   width: 100%;
   height: 100%;
   display: block;
 }
 
-.fui-img-del {
+.up-img-del {
   width: 36rpx;
   height: 36rpx;
   position: absolute;
@@ -407,7 +407,7 @@ export default {
   z-index: 999;
 }
 
-.fui-img-del::before {
+.up-img-del::before {
   content: '';
   width: 16rpx;
   height: 1px;
@@ -417,7 +417,7 @@ export default {
   background-color: #fff;
 }
 
-.fui-upload-mask {
+.up-upload-mask {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -431,16 +431,16 @@ export default {
   background-color: rgba(0, 0, 0, 0.6);
 }
 
-.fui-upload-loading {
+.up-upload-loading {
   width: 28rpx;
   height: 28rpx;
   border-radius: 50%;
   border: 2px solid;
   border-color: #b2b2b2 #b2b2b2 #b2b2b2 #fff;
-  animation: fui-rotate 0.7s linear infinite;
+  animation: up-rotate 0.7s linear infinite;
 }
 
-@keyframes fui-rotate {
+@keyframes up-rotate {
   0% {
     transform: rotate(0);
   }
@@ -450,12 +450,12 @@ export default {
   }
 }
 
-.fui-tips {
+.up-tips {
   font-size: 26rpx;
   color: #fff;
 }
 
-.fui-mask-btn {
+.up-mask-btn {
   padding: 4rpx 16rpx;
   border-radius: 40rpx;
   text-align: center;
@@ -466,7 +466,7 @@ export default {
   justify-content: center;
 }
 
-.fui-btn-hover {
+.up-btn-hover {
   opacity: 0.8;
 }
 </style>