Pārlūkot izejas kodu

渠道客诉填写任务增加上传照片功能

zhujindu 11 mēneši atpakaļ
vecāks
revīzija
145859f18e

+ 154 - 0
src/components/complaintImg.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="cameraDiv1">
+    <p class="coverImg" @click="uploadImg">
+      <van-icon class="photo ico" name="photograph" size="16px" color="#969696"></van-icon>
+    </p>
+  </div>
+</template>
+
+<script>
+import { ImagePreview } from 'vant';
+import axios from 'axios';
+import { uploadImagev } from '@/api/index';
+import { getPosition, getTicketFun } from '@/utils/TXApiFun';
+
+export default {
+  name: 'uploadImg',
+  props: {
+    imgArr: {
+      type: String,
+      default: '',
+    },
+    itemData: {
+      type: Object,
+      default: {},
+    },
+    isRequired: {
+      // 是否开启拍照前校验
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  created() {
+    // 授权
+    getTicketFun(['chooseImage', 'uploadImage']).then(() => {});
+  },
+  methods: {
+    deleteImgs(val) {
+      ImagePreview([val]);
+    },
+    uploadImg() {
+      // 拍照前校验
+      if (this.required) {
+      }
+      this.wx.ready(() => {
+        this.wx.chooseImage({
+          count: 1,
+          sizeType: ['original'], // 可以指定是原图还是压缩图,默认二者都有 compressed:压缩后的图片;original:原图
+          sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
+          defaultCameraMode: 'normal', //表示进入拍照界面的默认模式,目前有normal与batch两种选择,normal表示普通单拍模式,batch表示连拍模式,不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值,其中front表示默认为前置摄像头单拍模式,batch_front表示默认为前置摄像头连拍模式。(注:用户进入拍照界面仍然可自由切换两种模式)
+          isSaveToAlbum: 0,
+          success: (res) => {
+            let localIds = '';
+            if (res.localIds != undefined) {
+              localIds = res.localIds[0];
+            } else {
+              localIds = res.localId;
+            }
+            // andriod中localId可以作为img标签的src属性显示图片;
+            // iOS应当使用 getLocalImgData 获取图片base64数据,从而用于img标签的显示(在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功)
+            wx.uploadImage({
+              localId: localIds, // 需要上传的图片的本地ID,由chooseImage接口获得
+              isShowProgressTips: 1, // 默认为1,显示进度提示
+              success: (res) => {
+                this.uploadImagev(res.serverId);
+              },
+            });
+          },
+        });
+      });
+    },
+    uploadImagev(meidaId) {
+      var form = {
+        mediaId: meidaId,
+        storeName: localStorage.getItem('chainName'),
+      };
+      this.toastLoading(0, '加载中...', true);
+      uploadImagev(form).then((res) => {
+        this.toastLoading().clear();
+        if (res.code == 200) {
+          let imgArr = [];
+          res.data.forEach((item) => {
+            imgArr.push(item.url);
+          });
+          this.$toast('上传成功!');
+          this.$emit('newimgarr', {
+            fileUrl: imgArr.join(','),
+            itemData: itemData,
+          });
+        } else {
+          this.$toast('上传失败!');
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.cameraDiv1 {
+  position: relative;
+  height: 20px;
+  width: 100%;
+}
+
+.cameraDiv1 img {
+  position: absolute;
+  width: 100%;
+  display: block;
+  height: 20px;
+  top: 0;
+}
+
+.imgPre {
+  height: 20px;
+  width: 100%;
+  background-color: white;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.photos1 {
+  margin: 0px auto;
+  left: 20%;
+  margin-left: -14px;
+}
+
+.photobrowsing {
+  position: absolute;
+  padding: 4px;
+  right: 0;
+  top: 0;
+  z-index: 99;
+  background-color: rgba(255, 255, 255, 0.8);
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+.coverImg {
+  text-align: right;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 20px;
+  width: 100%;
+  margin: 0;
+}
+
+.coverImg .ico {
+  top: 0%;
+}
+</style>

+ 4 - 4
src/views/clew/complaintDetail/radioGroup.vue

@@ -74,13 +74,13 @@
           <template #right-icon>
             <span v-if="val.isMust == '0'" style="color: red">图片必填</span>
             <div class="uploadImg" style="width: 30px">
-              <upload-imgc
+              <complaintImg
                 uploadid="uploadid2"
                 :itemData="val"
                 :imgArr="val.answerValue"
                 @newimgarr="newimgarr1"
                 :required="false">
-              </upload-imgc>
+              </complaintImg>
             </div>
             <!-- <van-icon color="#666" name="photograph" size="24" @click="imgClick(val)" /> -->
           </template>
@@ -93,9 +93,9 @@
 <script>
 import taskTips from '@/views/deviceWithin/taskTips';
 import deleteImgView from '@/components/deleteUploadImg3';
-import uploadImgc from '@/components/uploadImgVStorec';
+import complaintImg from '@/components/complaintImg';
 export default {
-  components: { deleteImgView, taskTips, uploadImgc },
+  components: { deleteImgView, taskTips, complaintImg },
   name: 'radioGroup',
   props: {
     clueOptionList: {