@10yun/cv-mobile-ui 0.5.44 → 0.5.45

package/ui-cv/components/cv-upload-image/demo.vue

@@ -0,0 +1,407 @@
+<template>
+  <!--上传图片-->
+  <view class="wm-common-uploadimg">
+    <form>
+      <view class="uni-list">
+        <view class="uni-list-cell">
+          <view class="uni-list-cell-left">
+            <view class="uni-label">图片来源</view>
+          </view>
+          <view class="uni-list-cell-right">
+            <picker :range="sourceType" @change="sourceTypeChange" :value="sourceTypeIndex" mode="selector">
+              <view class="uni-input">{{ sourceType[sourceTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="uni-list-cell">
+          <view class="uni-list-cell-left">
+            <view class="uni-label">图片质量</view>
+          </view>
+          <view class="uni-list-cell-right">
+            <picker :range="sizeType" @change="sizeTypeChange" :value="sizeTypeIndex" mode="selector">
+              <view class="uni-input">{{ sizeType[sizeTypeIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+        <view class="uni-list-cell">
+          <view class="uni-list-cell-left">
+            <view class="uni-label">数量限制</view>
+          </view>
+          <view class="uni-list-cell-right">
+            <picker :range="count" @change="countChange" mode="selector">
+              <view class="uni-input">{{ count[countIndex] }}</view>
+            </picker>
+          </view>
+        </view>
+      </view>
+      <cv-upload-image layout="more" maxlength="9" v-model="imageList" :src="imageList" :upApiFunc="upApiFunc" />
+      <view class="uni-list list-pd">
+        <view class="uni-list-cell cell-pd">
+          <view class="uni-uploader">
+            <view class="uni-uploader-head">
+              <view class="uni-uploader-title">上传图片</view>
+              <view class="uni-uploader-info">({{ imageList.length }}/9)</view>
+            </view>
+            <view class="uni-uploader-body">
+              <view class="uni-uploader__files">
+                <template v-for="(image, index) in imageList" :key="index">
+                  <view class="uni-uploader__file">
+                    <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
+                  </view>
+                </template>
+                <view class="uni-uploader__input-box">
+                  <view class="uni-uploader__input" @tap="chooseImage"></view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </form>
+  </view>
+</template>
+<script>
+// import permision from "@/utils/uni-geo/permission.js"
+var sourceType = [['camera'], ['album'], ['camera', 'album']];
+// var sizeType = [
+// 	['compressed'],
+// 	['original'],
+// 	['compressed', 'original']
+// ]
+export default {
+  data() {
+    return {
+      imageList: [],
+      sourceTypeIndex: 2,
+      sourceType: ['拍照', '相册', '拍照或相册'],
+      // sizeTypeIndex: 2,
+      sizeType: ['压缩', '原图', '压缩或原图'],
+      countIndex: 8,
+      count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
+    };
+  },
+  onUnload() {
+    this.imageList = [];
+    this.sourceTypeIndex = 2;
+    this.sourceType = ['拍照', '相册', '拍照或相册'];
+    // this.sizeTypeIndex = 2,
+    // this.sizeType = ['压缩', '原图', '压缩或原图'],
+    this.countIndex = 8;
+  },
+  methods: {
+    sourceTypeChange: function (e) {
+      this.sourceTypeIndex = parseInt(e.detail.value);
+    },
+    // sizeTypeChange: function(e) {
+    // 	this.sizeTypeIndex = parseInt(e.detail.value)
+    // },
+    // countChange: function(e) {
+    // 	this.countIndex = e.detail.value;
+    // },
+    chooseImage: async function () {
+      // #ifdef APP-PLUS
+      // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
+      if (this.sourceTypeIndex !== 2) {
+        let status = await this.checkPermission();
+        if (status !== 1) {
+          return;
+        }
+      }
+      // #endif
+
+      if (this.imageList.length === 9) {
+        let isContinue = await this.isFullImg();
+        console.log('是否继续?', isContinue);
+        if (!isContinue) {
+          return;
+        }
+      }
+      uni.chooseImage({
+        sourceType: sourceType[this.sourceTypeIndex],
+        // sizeType: sizeType[this.sizeTypeIndex],
+        count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
+        success: (res) => {
+          this.imageList = this.imageList.concat(res.tempFilePaths);
+        },
+        fail: (err) => {
+          // #ifdef APP-PLUS
+          if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
+            this.checkPermission(err.code);
+          }
+          // #endif
+          // #ifdef MP
+          uni.getSetting({
+            success: (res) => {
+              let authStatus = false;
+              switch (this.sourceTypeIndex) {
+                case 0:
+                  authStatus = res.authSetting['scope.camera'];
+                  break;
+                case 1:
+                  authStatus = res.authSetting['scope.album'];
+                  break;
+                case 2:
+                  authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
+                  break;
+                default:
+                  break;
+              }
+              if (!authStatus) {
+                uni.showModal({
+                  title: '授权失败',
+                  content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
+                  success: (res) => {
+                    if (res.confirm) {
+                      uni.openSetting();
+                    }
+                  }
+                });
+              }
+            }
+          });
+          // #endif
+        }
+      });
+    },
+    isFullImg: function () {
+      return new Promise((res) => {
+        uni.showModal({
+          content: '已经有9张图片了,是否清空现有图片？',
+          success: (e) => {
+            if (e.confirm) {
+              this.imageList = [];
+              res(true);
+            } else {
+              res(false);
+            }
+          },
+          fail: () => {
+            res(false);
+          }
+        });
+      });
+    },
+    async checkPermission(code) {
+      let type = code ? code - 1 : this.sourceTypeIndex;
+      let status = permision.isIOS
+        ? await permision.requestIOS(sourceType[type][0])
+        : await permision.requestAndroid(type === 0 ? 'android.permission.CAMERA' : 'android.permission.READ_EXTERNAL_STORAGE');
+
+      if (status === null || status === 1) {
+        status = 1;
+      } else {
+        uni.showModal({
+          content: '没有开启权限',
+          confirmText: '设置',
+          success: (res) => {
+            if (res.confirm) {
+              permision.gotoAppSetting();
+            }
+          }
+        });
+      }
+
+      return status;
+    }
+  }
+};
+</script>
+<style>
+/* .uni-list {
+  background-color: #ffffff;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.uni-list::before {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  top: 0;
+  left: 0;
+  height: 1px;
+  content: '';
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: #c8c7cc;
+}
+.uni-list-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.uni-list-cell-left {
+  white-space: nowrap;
+  font-size: 14px;
+  padding: 0 15px;
+}
+.uni-label {
+  width: 105px;
+  word-wrap: break-word;
+  word-break: break-all;
+  text-indent: 10px;
+}
+.uni-list-cell-db,
+.uni-list-cell-right {
+  flex: 1;
+} */
+/* uni-picker {
+  display: block;
+  cursor: pointer;
+}
+.uni-picker-container {
+  display: none;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  z-index: 999;
+  font-size: 16px;
+}
+.uni-mask {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.uni-picker-container .uni-picker {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  -webkit-transform: translateY(100%);
+  transform: translateY(100%);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  z-index: 999;
+  width: 100%;
+  background-color: #efeff4;
+  visibility: hidden;
+  -webkit-transition: visibility 0.3s, -webkit-transform 0.3s;
+  transition: visibility 0.3s, -webkit-transform 0.3s;
+  transition: transform 0.3s, visibility 0.3s;
+  transition: transform 0.3s, visibility 0.3s, -webkit-transform 0.3s;
+}
+.uni-picker-container .uni-picker-header {
+  display: block;
+  position: relative;
+  text-align: center;
+  width: 100%;
+  height: 45px;
+  background-color: #fff;
+}
+.uni-picker-container .uni-picker-action {
+  display: block;
+  max-width: 50%;
+  top: 0;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 14px;
+  font-size: 17px;
+  line-height: 45px;
+  overflow: hidden;
+  cursor: pointer;
+}
+.uni-picker-container .uni-picker-action.uni-picker-action-cancel {
+  float: left;
+  color: #888;
+}
+.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
+  float: right;
+  color: #007aff;
+} */
+.wm-common-uploadimg {
+  margin-top: 8px;
+}
+.wm-common-uploadimg .cell-pd {
+  padding: 22rpx 0;
+}
+.wm-common-uploadimg .list-pd {
+  margin-top: 30rpx;
+}
+.wm-common-uploadimg .uni-list::before {
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  top: 0;
+  left: 0;
+  height: 2rpx;
+  content: '';
+  transform: scaleY(0.5);
+  background-color: #c8c7cc;
+}
+.wm-common-uploadimg .uni-uploader {
+  flex: 1;
+  flex-direction: column;
+}
+.wm-common-uploadimg .uni-uploader-head {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.wm-common-uploadimg .uni-uploader-title {
+  font-size: 24rpx;
+}
+.wm-common-uploadimg .uni-uploader-info {
+  font-size: 24rpx;
+  color: #aaa;
+}
+.wm-common-uploadimg .uni-uploader-body {
+  margin-top: 8px;
+}
+.wm-common-uploadimg .uni-uploader__files {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.wm-common-uploadimg .uni-uploader__file {
+  margin: 10rpx 24rpx;
+  width: 80rpx;
+  height: 80rpx;
+}
+.wm-common-uploadimg .uni-uploader__img {
+  display: block;
+  width: 80rpx;
+  height: 80rpx;
+}
+.wm-common-uploadimg .uni-uploader__input-box {
+  position: relative;
+  margin: 10rpx 24rpx;
+  width: 80rpx;
+  height: 80rpx;
+  border: 1px solid #d9d9d9;
+}
+.wm-common-uploadimg .uni-uploader__input-box:before,
+.uni-uploader__input-box:after {
+  content: ' ';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: #d9d9d9;
+}
+.wm-common-uploadimg .uni-uploader__input-box:before {
+  width: 2rpx;
+  height: 50rpx;
+}
+.wm-common-uploadimg .uni-uploader__input {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.wm-common-uploadimg .uni-uploader__input-box:after {
+  width: 50rpx;
+  height: 2rpx;
+}
+</style>