@10yun/cv-mobile-ui 0.5.17 → 0.5.19

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

@@ -0,0 +1,481 @@
+<template>
+  <view
+    class="cv-upload-img-wrap"
+    :style="{
+      marginTop: uploadType == 'one' ? '5px' : ''
+    }"
+  >
+    <block v-if="uploadType == 'big'">
+      <view class="cv-upload-imgbig_view" @tap="imgChoose" v-if="localSrc == ''">
+        <view class="cv-upload-imgbig-left">
+          <view class="cv-upload-imgbig-left__title">{{ uploadTitle }}</view>
+          <view>{{ uploadTip.dimension }}</view>
+          <view>{{ uploadTip.format }}</view>
+          <view>{{ uploadTip.size }}</view>
+        </view>
+        <view class="cv-upload-imgbig-right">
+          <view class="cv-upload-imgbig-right__upload">
+            <cv-icons type="action-quan-plus-filled" size="36" color="#999999"></cv-icons>
+            <view>添加图片</view>
+          </view>
+        </view>
+      </view>
+      <view class="cv-upload-imgbig_view cv-upload-img_noborder" v-else>
+        <view class="cv-upload-img__bd bigimg">
+          <image
+            class="cv-upload-img-preview"
+            lazy-load="true"
+            mode="aspectFit"
+            :src="localSrc[0]"
+            @tap="imgShowbig"
+            :data-src="localSrc[0]"
+          ></image>
+          <cv-icons
+            class="cv-uoload-img-remove"
+            type="action-quan-cha"
+            size="20"
+            color="#FF0101"
+            @tap="imgRemove(0)"
+            v-if="!disabled"
+          ></cv-icons>
+        </view>
+      </view>
+    </block>
+    <block v-else>
+      <view class="cv-upload-imgmore_img">
+        <block v-if="localSrc != ''">
+          <block v-for="(item, index) in localSrc" :key="index">
+            <view class="cv-upload-img__bd" :class="(index + 1) % 3 !== 0 ? 'cv-upload-img_img__body__mar' : ''">
+              <image
+                class="cv-upload-img-preview"
+                lazy-load="true"
+                mode="aspectFit"
+                :src="item"
+                @tap="imgShowbig"
+                :data-src="item"
+              ></image>
+              <cv-icons
+                class="cv-uoload-img-remove"
+                type="action-quan-cha"
+                size="20"
+                color="#FF0101"
+                @tap="imgRemove(index)"
+                v-if="!disabled"
+              ></cv-icons>
+            </view>
+          </block>
+        </block>
+        <view class="cv-upload-img__bd" v-if="localSrc.length < allowUploadNum">
+          <view class="cv-upload-img-choose" @tap="imgChoose">
+            <cv-icons :size="settAdd.size" :color="settAdd.color" :type="settAdd.icon"></cv-icons>
+            <view>可{{ settAdd.text }}{{ surplusUploadNum }}张</view>
+          </view>
+        </view>
+      </view>
+    </block>
+  </view>
+</template>
+<script>
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+export default {
+  mixins: [mpMixin, mixin],
+  name: 'cvUploadImg',
+  emits: ['input', 'update:modelValue'],
+  props: {
+    value: {
+      type: [Array, Object, String],
+      default() {
+        return [];
+      }
+    },
+    modelValue: {
+      type: [Array, Object, String],
+      default() {
+        return [];
+      }
+    },
+    uploadTitle: {
+      type: [String],
+      default: ''
+    },
+    // 风格：one单图，more多图，big大图
+    uploadType: {
+      type: String,
+      default: 'one'
+    },
+    uploadTip: {
+      type: Object,
+      default() {
+        return {
+          dimension: '长*宽：750*375像素;',
+          format: '格式：jpg/png;',
+          size: '大小：小于2MB'
+        };
+      }
+    },
+    //默认输入框
+    src: {
+      type: [Array, Object, String],
+      default(newVal) {
+        return [];
+      }
+    },
+    maxlength: {
+      type: [String, Number],
+      default: 1
+    },
+    addType: {
+      type: String,
+      default: 'add'
+    },
+    filename: {
+      type: String,
+      default: ''
+    },
+    uploadParam: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    apiFunc: {
+      type: Function,
+      default: null
+    },
+    disabled: {
+      type: [Boolean, String],
+      default() {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {
+      localVal: null,
+      localSrc: [],
+      settAdd: {
+        text: '添加',
+        //icon颜色
+        color: '#999999',
+        //图标类型，默认相机
+        icon: this.addType == 'camera' ? 'media-camera-filled' : 'media-image-filled',
+        // 图标
+        size: 26
+      },
+      // 每次选择图片数量
+      chooseNum: 1,
+      // 剩余允许上传数量
+      allowUploadNum: 1,
+      surplusUploadNum: 1
+    };
+  },
+  watch: {
+    value(newVal) {
+      this.localVal = newVal;
+    },
+    modelValue(newVal) {
+      this.localVal = newVal;
+    },
+    src(newVal) {
+      this.localSrc = this._dealSrc(newVal);
+      this._dealNum();
+    }
+  },
+  created() {
+    this.localVal = this.value;
+    this.localSrc = this._dealSrc(this.src);
+    this.allowUploadNum = parseInt(this.maxlength);
+    this._dealNum();
+  },
+  methods: {
+    _currShowToast(msg) {
+      uni.showToast({
+        title: msg,
+        duration: 1200,
+        icon: 'none'
+      });
+    },
+    _dealNum() {
+      this.surplusUploadNum = this.allowUploadNum - (this.localSrc.length || 0);
+    },
+    _dealSrc(oldSrc) {
+      let newSrc = [];
+      if (this.uploadType == 'big') {
+        if (typeof oldSrc == 'string') {
+          newSrc.push(oldSrc);
+        }
+      } else if (this.uploadType == 'one') {
+        if (typeof oldSrc == 'string') {
+          newSrc.push(oldSrc);
+        }
+      } else {
+        if (typeof oldSrc == 'object') {
+          return oldSrc;
+        }
+      }
+      return newSrc;
+    },
+    /** 图片选择 ：从本地相册选择图片或使用相机拍照 */
+    // async
+    async _chooseImage(type, source = 'album') {
+      uni.chooseImage({
+        count: this.surplusUploadNum, // 选择照片的总数
+        sizeType: ['compressed', 'original'], // 可选择原图或压缩后的图片
+        sizeType: ['compressed'], // 默认二者都有,original 原图，compressed 压缩图
+        sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
+        sourceType: [source], // 从相册选择 album 从相册选图，camera 使用相机
+        success: (res) => {
+          // console.warn(res.tempFilePaths);
+          // console.warn(res.tempFiles[0].path);
+
+          let uploadChooseNum = res.tempFilePaths.length;
+          let uploadCurrIndex = 0; //当前index
+          let uploadAlreadyNum = 0; //当前已上传页数
+
+          if (uploadChooseNum >= 9) {
+            uni.showToast({ icon: 'none', title: '超出9张~' });
+            return false;
+          }
+          if (uploadChooseNum > this.surplusUploadNum) {
+            uni.showToast({ icon: 'none', title: '已超过剩余数量~' });
+            return false;
+          }
+
+          var timer = setInterval(() => {
+            if (this.surplusUploadNum == 0) {
+              uni.showToast({
+                icon: 'none',
+                title: '已上传',
+                duration: 1000,
+                mask: true
+              });
+              uni.hideToast();
+              uni.hideLoading();
+              // TODO 追加到数组
+              clearInterval(timer);
+            } else if (uploadAlreadyNum < uploadChooseNum) {
+              uploadAlreadyNum++;
+              // TODO 上传
+              uni.showToast({
+                icon: 'loading',
+                title: '正在上传(' + uploadAlreadyNum + '/' + uploadChooseNum + ')',
+                duration: 3000000,
+                mask: true
+              });
+              this._uploadImage(res.tempFilePaths[uploadCurrIndex]);
+              uploadCurrIndex++;
+              this.surplusUploadNum--;
+            } else {
+              uni.hideToast();
+              uni.hideLoading();
+            }
+          }, 1000);
+
+          // for (let [index, val] of res.tempFilePaths.entries()) {
+          //   this._uploadImage(val); //上传图片
+          //   this.surplusUploadNum--;
+          // }
+        },
+        fail: (res) => {}
+      });
+    },
+    /** 图片验证 */
+    _imgCheck(imgItem) {
+      let imgSize = imgItem.size || 0;
+      if (imgSize > 2048) {
+      }
+    },
+    /** 图片上传 */
+    _uploadImage(tempFilePaths, type) {
+      let filename = this.filename || 'uni-upload'; // 'file_name'
+      let uploadParam = Object.assign(
+        {},
+        {
+          postType: 'create',
+          file_name: filename,
+          savesign: 'uni-upload'
+        },
+        this.uploadParam
+      );
+
+      //将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
+      this.apiFunc({
+        //要上传文件资源的路径。
+        filePath: tempFilePaths,
+        //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
+        name: filename,
+        //HTTP 请求中其他额外的 form data
+        formData: uploadParam
+      })
+        .then((uploadRes) => {
+          // let resData = JSON.parse(uploadRes.data);
+          let resData = uploadRes.data || {};
+          if (this.uploadType == 'more') {
+            //图集
+            if (this.localSrc.length >= 9) return;
+            this.localSrc.push(resData.img_cdn);
+            this.localVal.push(resData.img_time);
+          } else {
+            //单图
+            this.localSrc.push(resData.img_cdn);
+            this.localVal = resData.img_time;
+          }
+          // this.$forceUpdate();
+          this.$emit('input', this.localVal);
+          this.$emit('update:modelValue', this.localVal);
+        })
+        .catch((err) => {
+          uni.hideLoading();
+        });
+    },
+    // 删除引客卷图片
+    imgRemove(imgIndex) {
+      if (this.uploadType == 'more') {
+        this.localSrc.splice(imgIndex, 1);
+        this.localVal.splice(imgIndex, 1);
+      } else {
+        this.localSrc.splice(imgIndex, 1);
+        this.localVal = '';
+      }
+      this.surplusUploadNum++;
+    },
+    // 预览大图
+    imgShowbig(src) {
+      let srcUrl = src.currentTarget.dataset.src;
+      uni.previewImage({
+        urls: [srcUrl]
+        // current: srcUrl,
+      });
+    },
+    imgChoose() {
+      if (!this.apiFunc) {
+        this._currShowToast('上传方法错误');
+        return;
+      }
+      if (this.uploadType != 'more') {
+        this.allowUploadNum = 1;
+      }
+      if (this.localSrc.length + 1 > this.allowUploadNum) {
+        this._currShowToast('超出图片上传个数...');
+        return false;
+      }
+      return new Promise((resolve, reject) => {
+        this._chooseImage();
+        // this.$emit('input', this.localVal);
+        // this.$emit('update:modelValue', this.localVal);
+      });
+    }
+  }
+};
+</script>
+<style>
+.cv-upload-img-wrap {
+  width: 100%;
+}
+
+.cv-upload-img-hd {
+  color: #181818;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+/** 选择 */
+.cv-upload-img-choose {
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  color: #888888;
+}
+/** 上传后预览 */
+.cv-upload-img-preview {
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+}
+/** 移除 */
+.cv-uoload-img-remove {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 997;
+  background: #fff;
+  border-radius: 50%;
+}
+/* .cv-upload-img-choose icon {
+  font-size: 12px;
+  margin-bottom: 10px;
+  color: #c8c7cc;
+} */
+.cv-upload-imgmore_img {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cv-upload-img__bd {
+  width: 88px;
+  height: 66px;
+  border: 1px dashed #99999999;
+  border-radius: 10px;
+  margin-bottom: 5px;
+  position: relative;
+}
+
+.cv-upload-img__bd.bigimg {
+  width: 100%;
+  height: 100%;
+}
+
+.cv-upload-img_img__body__mar {
+  margin-right: 45rpx;
+}
+
+.cv-upload-img_noborder {
+  border: 0px !important;
+  padding: 0px !important;
+}
+.cv-upload-imgbig_view {
+  height: 170px;
+  padding: 10px 20px;
+  display: flex;
+  border: 1px dashed #c7c7c7;
+  color: #888888;
+  border-radius: 5px;
+  justify-content: space-between;
+  font-size: 24rpx;
+  margin-bottom: 5px;
+}
+.cv-upload-imgbig-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.cv-upload-imgbig-left view {
+  max-width: 400rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cv-upload-imgbig-left__title {
+  color: #181818;
+  font-size: 34rpx;
+  margin-bottom: 10rpx;
+}
+.cv-upload-imgbig-right {
+  display: flex;
+  align-items: center;
+}
+.cv-upload-imgbig-right__upload {
+  border-radius: 20rpx;
+  background: #e5e5e1;
+  width: 180rpx;
+  height: 180rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+</style>

package/ui-cv/libs/mixin/mixin.js

@@ -0,0 +1 @@
+export default {};

package/ui-cv/libs/mixin/mpMixin.js

@@ -0,0 +1,8 @@
+export default {
+  // #ifdef MP-WEIXIN
+  // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+  options: {
+    virtualHost: true
+  }
+  // #endif
+};

package/uni-ui/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.