|
@@ -4,7 +4,6 @@
|
|
|
<van-col span="6" style="" v-if="insert == 'true' && formData.processStatus != 1">
|
|
<van-col span="6" style="" v-if="insert == 'true' && formData.processStatus != 1">
|
|
|
<div class="addImg">
|
|
<div class="addImg">
|
|
|
<uploadVNormalTaskPhoto
|
|
<uploadVNormalTaskPhoto
|
|
|
- :imgArr="imgs"
|
|
|
|
|
:shouws="true"
|
|
:shouws="true"
|
|
|
:storeGroupId="storeGroupId"
|
|
:storeGroupId="storeGroupId"
|
|
|
:taskList="taskIds.split(',')"
|
|
:taskList="taskIds.split(',')"
|
|
@@ -20,39 +19,27 @@
|
|
|
ref="uploadVNormal" />
|
|
ref="uploadVNormal" />
|
|
|
</div>
|
|
</div>
|
|
|
</van-col>
|
|
</van-col>
|
|
|
- <van-col span="6" v-for="(urls, index) in imgs" :key="urls.id">
|
|
|
|
|
|
|
+ <van-col span="6" v-for="(urls, index) in imgArr" :key="index">
|
|
|
<div class="imgview">
|
|
<div class="imgview">
|
|
|
<van-icon
|
|
<van-icon
|
|
|
- v-if="
|
|
|
|
|
- (photoIdentifyType != 6 || photoIdentifyType != 7) &&
|
|
|
|
|
- insert == 'true' &&
|
|
|
|
|
- formData.processStatus != 1
|
|
|
|
|
- "
|
|
|
|
|
|
|
+ v-if="insert == 'true' && formData.processStatus != 1"
|
|
|
name="close"
|
|
name="close"
|
|
|
size="16"
|
|
size="16"
|
|
|
- v-on:click="deleteImg(index, urls.fileIdSplicing)" />
|
|
|
|
|
|
|
+ v-on:click="deleteImg(index, urls)" />
|
|
|
<img
|
|
<img
|
|
|
- v-if="urls.type == '2'"
|
|
|
|
|
- :src="urls.fileUrl"
|
|
|
|
|
|
|
+ :src="urls.fileUrl || urls.mediaFileUrl"
|
|
|
width="100px"
|
|
width="100px"
|
|
|
height="100px"
|
|
height="100px"
|
|
|
@click="previewsImg(index)" />
|
|
@click="previewsImg(index)" />
|
|
|
- <img
|
|
|
|
|
|
|
+ <!-- <img
|
|
|
v-else
|
|
v-else
|
|
|
:src="urls.fileUrl"
|
|
:src="urls.fileUrl"
|
|
|
width="100px"
|
|
width="100px"
|
|
|
height="100px"
|
|
height="100px"
|
|
|
- @click="previewsImg(index)" />
|
|
|
|
|
|
|
+ @click="previewsImg(index)" /> -->
|
|
|
</div>
|
|
</div>
|
|
|
</van-col>
|
|
</van-col>
|
|
|
</van-row>
|
|
</van-row>
|
|
|
- <!-- <div style="padding: 10px 16px 0;">-->
|
|
|
|
|
- <!-- <div class="img-box" v-for="(urls, index) in imgs" :key="index">-->
|
|
|
|
|
- <!-- <van-icon name="clear" v-on:click="deleteImg(index,urls.id)"/>-->
|
|
|
|
|
- <!-- <img v-if="urls.type=='2'" :src="urls.fileUrl" width="100px" height="100px" @click="previewsImg(index)"/>-->
|
|
|
|
|
- <!-- <img v-else :src="urls.fileUrl" width="100px" height="100px" @click="previewsImg(index)"/>-->
|
|
|
|
|
- <!-- </div>-->
|
|
|
|
|
- <!-- </div>-->
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -60,9 +47,16 @@
|
|
|
import { ImagePreview } from 'vant';
|
|
import { ImagePreview } from 'vant';
|
|
|
import { removePhotoBatch } from '@/api/index';
|
|
import { removePhotoBatch } from '@/api/index';
|
|
|
import uploadVNormalTaskPhoto from '@/components/uploadVNormalTaskPhoto';
|
|
import uploadVNormalTaskPhoto from '@/components/uploadVNormalTaskPhoto';
|
|
|
|
|
+import { mapState } from 'vuex';
|
|
|
|
|
+import { getTicketFun } from '@/utils/TXApiFun';
|
|
|
export default {
|
|
export default {
|
|
|
name: 'deleteUploadImgTaskPhoto',
|
|
name: 'deleteUploadImgTaskPhoto',
|
|
|
components: { uploadVNormalTaskPhoto },
|
|
components: { uploadVNormalTaskPhoto },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ ...mapState({
|
|
|
|
|
+ userInfo: (state) => state.user.userInfo,
|
|
|
|
|
+ }),
|
|
|
|
|
+ },
|
|
|
props: {
|
|
props: {
|
|
|
formData: {
|
|
formData: {
|
|
|
type: Object,
|
|
type: Object,
|
|
@@ -70,12 +64,6 @@ export default {
|
|
|
return {};
|
|
return {};
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
- imgs: {
|
|
|
|
|
- type: Array,
|
|
|
|
|
- default() {
|
|
|
|
|
- return [];
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
photoIdentifyType: {
|
|
photoIdentifyType: {
|
|
|
// 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招,6:sku陈列照)
|
|
// 图匠识别目的(1:店招内容识别,2:门店代码识别,3:调色机识别,4:更换店招,6:sku陈列照)
|
|
|
type: String,
|
|
type: String,
|
|
@@ -119,10 +107,30 @@ export default {
|
|
|
type: String,
|
|
type: String,
|
|
|
default: 'false',
|
|
default: 'false',
|
|
|
},
|
|
},
|
|
|
|
|
+ fileInfoList: {
|
|
|
|
|
+ type: Array,
|
|
|
|
|
+ default() {
|
|
|
|
|
+ return [];
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
watch: {
|
|
watch: {
|
|
|
- imgs: {
|
|
|
|
|
- handler(val) {},
|
|
|
|
|
|
|
+ formData: {
|
|
|
|
|
+ handler(val) {
|
|
|
|
|
+ // <!-- 0=企业微信,1=H5相机 -->
|
|
|
|
|
+ if (this.userInfo.photoMethod == '1') {
|
|
|
|
|
+ this.imgArr = this.fileInfoList || [];
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.imgArr = [];
|
|
|
|
|
+ if (this.formData.mediaInfos) {
|
|
|
|
|
+ getTicketFun(['downloadImage']).then(() => {
|
|
|
|
|
+ this.toastLoading(0, '加载中,请稍候...', true);
|
|
|
|
|
+ let mediaInfosCopy = JSON.parse(JSON.stringify(this.formData.mediaInfos));
|
|
|
|
|
+ this.downloadImage(mediaInfosCopy);
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
deep: true,
|
|
deep: true,
|
|
|
immediate: true,
|
|
immediate: true,
|
|
|
},
|
|
},
|
|
@@ -130,34 +138,140 @@ export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
|
|
url: process.env.VUE_APP_Target1 + process.env.VUE_APP_BASE_API,
|
|
|
|
|
+ imgArr: [],
|
|
|
|
|
+ mediaIds: [],
|
|
|
|
|
+ locationRemark: '',
|
|
|
|
|
+ isUploadImg: true,
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- deleteImg(index, fileIdList) {
|
|
|
|
|
- removePhotoBatch({ fileIdList: fileIdList.split(',') }).then((res) => {
|
|
|
|
|
- if (res.code == 200) {
|
|
|
|
|
- this.$toast('删除成功!');
|
|
|
|
|
- this.$emit('upDataDetail');
|
|
|
|
|
|
|
+ downloadImage(mediaInfos) {
|
|
|
|
|
+ if (!mediaInfos.length) {
|
|
|
|
|
+ this.toastLoading().clear();
|
|
|
|
|
+ return;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ let mediaitem = mediaInfos.pop();
|
|
|
|
|
+ if (mediaitem.fileUrl) {
|
|
|
|
|
+ this.imgArr.push(mediaitem);
|
|
|
|
|
+ this.downloadImage(mediaInfos);
|
|
|
} else {
|
|
} else {
|
|
|
- this.$toast('删除失败!');
|
|
|
|
|
|
|
+ wx.downloadImage({
|
|
|
|
|
+ serverId: mediaitem.mediaId,
|
|
|
|
|
+ isShowProgressTips: 0, // 默认为1,显示进度提示
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ wx.getLocalImgData({
|
|
|
|
|
+ localId: res.localId,
|
|
|
|
|
+ success: (res2) => {
|
|
|
|
|
+ this.imgArr.push({
|
|
|
|
|
+ mediaId: mediaitem.mediaId,
|
|
|
|
|
+ mediaFileUrl: res2.localData,
|
|
|
|
|
+ });
|
|
|
|
|
+ this.downloadImage(mediaInfos);
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ console.error('获取本地图片数据失败:', err);
|
|
|
|
|
+ this.$toast('获取图片数据失败');
|
|
|
|
|
+ this.toastLoading().clear();
|
|
|
|
|
+ this.downloadImage(mediaInfos);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ fail: (err) => {
|
|
|
|
|
+ console.error('下载图片失败:', err);
|
|
|
|
|
+ this.$toast('下载图片失败,请重试');
|
|
|
|
|
+ // 可以选择继续下载其他图片或停止
|
|
|
|
|
+ this.downloadImage(mediaInfos);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
- });
|
|
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- previewsImg(index) {
|
|
|
|
|
- var arrimg = [];
|
|
|
|
|
- for (var imgi = 0; imgi < this.imgs.length; imgi++) {
|
|
|
|
|
- arrimg.push(this.imgs[imgi].fileUrl);
|
|
|
|
|
|
|
+ deleteImg(index, urls) {
|
|
|
|
|
+ // <!-- 0=企业微信,1=H5相机 -->
|
|
|
|
|
+ if (this.userInfo.photoMethod == '1') {
|
|
|
|
|
+ removePhotoBatch({ fileIdList: urls.fileIdSplicing.split(',') }).then((res) => {
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ this.$toast('删除成功!');
|
|
|
|
|
+ this.$emit('upDataDetail');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$toast('删除失败!');
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.imgArr.splice(index, 1);
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ previewsImg(index) {
|
|
|
|
|
+ let urls = this.imgArr.map((item) => item.fileUrl || item.mediaFileUrl);
|
|
|
ImagePreview({
|
|
ImagePreview({
|
|
|
- images: arrimg,
|
|
|
|
|
|
|
+ images: urls,
|
|
|
startPosition: index,
|
|
startPosition: index,
|
|
|
- onClose() {
|
|
|
|
|
- // do something
|
|
|
|
|
- },
|
|
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
- newimgarr() {
|
|
|
|
|
- this.$emit('upDataDetail');
|
|
|
|
|
|
|
+ newimgarr(data) {
|
|
|
|
|
+ const { localIds, locationRemark, source } = data;
|
|
|
|
|
+ this.locationRemark = locationRemark;
|
|
|
|
|
+ console.log(source);
|
|
|
|
|
+ // 0=企业微信,1=H5相机
|
|
|
|
|
+ if (this.userInfo.photoMethod == '0') {
|
|
|
|
|
+ this.isUploadImg = false;
|
|
|
|
|
+ const startIndex = this.imgArr.length;
|
|
|
|
|
+ this.imgArr = this.imgArr.concat(
|
|
|
|
|
+ localIds.map((item) => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ mediaId: '',
|
|
|
|
|
+ mediaFileUrl: item,
|
|
|
|
|
+ };
|
|
|
|
|
+ }),
|
|
|
|
|
+ );
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
|
+ this.syncUpload(localIds, startIndex);
|
|
|
|
|
+ });
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$emit('upDataDetail');
|
|
|
|
|
+ }
|
|
|
|
|
+ // if (this.isIOS()) {
|
|
|
|
|
+ // this.imgArr = this.imgArr.concat([...localIds]);
|
|
|
|
|
+ // // 解决ios微信localId无法直接使用的问题,获取base64后再上传
|
|
|
|
|
+ // // this.setIosImg(localIds);
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // this.imgArr = this.imgArr.concat([...localIds]);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // this.$emit('upDataDetail');
|
|
|
|
|
+ },
|
|
|
|
|
+ syncUpload(localIds, baseIndex = 0, callback) {
|
|
|
|
|
+ if (!localIds.length) {
|
|
|
|
|
+ this.isUploadImg = true;
|
|
|
|
|
+ callback && callback();
|
|
|
|
|
+ return;
|
|
|
|
|
+ } else {
|
|
|
|
|
+ var localId = localIds.pop();
|
|
|
|
|
+ wx.uploadImage({
|
|
|
|
|
+ localId: localId,
|
|
|
|
|
+ isShowProgressTips: 0, // 默认为1,显示进度提示
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ const index = baseIndex + localIds.length;
|
|
|
|
|
+ if (this.imgArr[index]) {
|
|
|
|
|
+ this.imgArr[index].mediaId = res.serverId;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.syncUpload(localIds, baseIndex, callback);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ isIOS() {
|
|
|
|
|
+ return /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
|
|
|
+ },
|
|
|
|
|
+ setIosImg(localIds) {
|
|
|
|
|
+ localIds.forEach((localId) => {
|
|
|
|
|
+ this.wx.getLocalImgData({
|
|
|
|
|
+ localId: localId, // 图片的localID
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ console.log(res.localData);
|
|
|
|
|
+ // this.imgArr.push(res.localData);
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
},
|
|
},
|
|
|
};
|
|
};
|