From 55b42a6324c878acf241f93d67704eba1d36ae87 Mon Sep 17 00:00:00 2001
From: 905166056 <905166056@qq.com>
Date: Tue, 12 Jul 2022 17:46:03 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A9=BA=E7=BD=AE=E6=88=BF?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=B5=84=E6=96=99=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/vc-upload/vc-upload.vue        | 197 ++++++++++++++++++++++
 pages/applyRoomDetail/applyRoomDetail.vue |  65 ++++++-
 pages/myApplyRoom/myApplyRoomDetail.vue   |  31 +++-
 pages/myApplyRoom/myApplyRoomList.vue     |   2 +-
 4 files changed, 290 insertions(+), 5 deletions(-)
 create mode 100644 components/vc-upload/vc-upload.vue

diff --git a/components/vc-upload/vc-upload.vue b/components/vc-upload/vc-upload.vue
new file mode 100644
index 0000000..2d92493
--- /dev/null
+++ b/components/vc-upload/vc-upload.vue
@@ -0,0 +1,197 @@
+<template>
+	<view>
+		<view class="cu-bar bg-white ">
+			<view class="action">
+				{{title}}
+			</view>
+			<view class="action" v-if="canEdit">
+				{{imgList.length}}/{{maxPhotoNum}}
+			</view>
+		</view>
+		<view class="cu-form-group">
+			<view class="grid col-4 grid-square flex-sub">
+				<view class="bg-img" v-for="(img,index) in imgList" @click.stop="preview(index)">
+					<image :src="img" mode='aspectFill'></image>
+					<view class="cu-tag bg-red" v-if="canEdit" @tap.stop="deleteImage(index)">
+						<text class="cuIcon-close"></text>
+					</view>
+				</view>
+				<view class="solids" @tap="ChooseImage" v-if="canEdit && imgList.length < maxPhotoNum">
+					<text class="cuIcon-cameraadd"></text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
+	import conf from '../../conf/config.js'
+	const context = require("../../lib/java110/Java110Context.js");
+	const factory = context.factory;
+	export default {
+		name:"vc-upload",
+		data() {
+			return {
+				photos: [],
+				imgList: [],
+			};
+		},
+		props: {
+			title: {
+				type: String,
+				default: '图片上传'
+			},
+			maxPhotoNum: {
+				type: Number,
+				default: 1
+			},
+			sendImgList: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			count: {
+				type: Number,
+				default: 1
+			},
+			sizeType: {
+				type: Array,
+				default () {
+					return ['original', 'compressed']
+				}
+			},
+			sourceType: {
+				type: Array,
+				default () {
+					return ['album', 'camera']
+				}
+			},
+			canEdit: {
+				type: Boolean,
+				default: true
+			}
+		},
+		watch: {
+			obj: {
+				photos(newName, oldName) {
+					this.sendData();
+				},
+				deep: true
+			}
+		},
+		watch:{
+			photos:function(val){
+				this.sendData();
+			},
+			deep: true
+		},
+		mounted() {
+			this.imgList = this.sendImgList;
+			if(this.imgList.length > 0){
+				uni.showLoading({
+					title: "图片加载中...",
+					mask: true
+				})
+			}
+			this.imgList.forEach((item, index) => {
+				let url = '';
+				if(item.indexOf("http") != -1){
+					url = item;
+				}else{
+					url = conf.commonBaseUrl + item;
+				}
+				uni.request({
+					url: url,
+					method: 'GET',
+					responseType: 'arraybuffer',
+					success: async res => {
+						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
+						let Base64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
+						this.photos.push(Base64Url);
+						if(this.photos.length == this.imgList.length){
+							uni.hideLoading();
+						}
+					}
+				});
+				// uni.downloadFile({
+				// 	url: conf.commonBaseUrl + item,
+				// 	success: (imgRes) => {
+				// 		this.imgList[index] = imgRes.tempFilePath;
+				// 		wx.getFileSystemManager().readFile({
+				// 			filePath: imgRes.tempFilePath,
+				// 			encoding: 'base64',
+				// 			success: (base64Res) => {
+				// 				let base64 = 'data:image/png;base64,' + base64Res.data
+				// 				this.photos.push(base64);
+				// 				if(this.photos.length == this.imgList.length){
+				// 					uni.hideLoading();
+				// 				}
+				// 			}
+				// 		})
+				// 	}
+				// })
+			})
+		},
+		methods:{
+			// 向父组件传递base64数据
+			sendData() {
+				this.$emit('sendImagesData', this.photos)
+			},
+			// 删除
+			deleteImage: function(index) {
+				this.imgList.splice(index, 1);
+				this.photos.splice(index, 1);
+			},
+			// 添加
+			ChooseImage: function() {
+				let that = this;
+				wx.chooseImage({
+					count: this.count, // 选择数量
+					sizeType: this.sizeType, //原图或压缩图
+					sourceType: this.sourceType, // 相册或拍摄
+					success: (res) => {
+						var tempFilePaths = res.tempFilePaths[0]
+						
+						that.imgList.push(tempFilePaths);
+						that.$forceUpdate();
+						//#ifdef H5
+						TanslateImage.translate(tempFilePaths, (url) => {
+							that.photos.push(url);
+						})
+						//#endif
+
+						//#ifdef MP-WEIXIN
+						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
+							that.photos.push(_res);
+						});
+						//#endif
+					}
+				});
+			},
+			// 预览
+			preview: function(index){
+				let urls = this.imgList;
+				// 空集合 return
+				if(urls.length < 1){
+					return;
+				}
+				// domain拼接
+				urls.forEach((item, index) => {
+					let start = item.indexOf("/callComponent");
+					if(start == 0){
+						urls[index] = conf.commonBaseUrl + item;
+					}
+				})
+				uni.previewImage({
+					current: index,
+					urls: urls
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/pages/applyRoomDetail/applyRoomDetail.vue b/pages/applyRoomDetail/applyRoomDetail.vue
index ceee398..67534d6 100644
--- a/pages/applyRoomDetail/applyRoomDetail.vue
+++ b/pages/applyRoomDetail/applyRoomDetail.vue
@@ -94,6 +94,28 @@
 			<view class="title">申请说明</view>
 			<input type="text" v-model="createRemark">
 		</view>
+		<view class="block__title">图片材料</view>
+		<view class="cu-bar bg-white ">
+			<view class="action">
+				图片上传
+			</view>
+			<view class="action">
+				{{imgList.length}}/4
+			</view>
+		</view>
+		<view class="cu-form-group">
+			<view class="grid col-4 grid-square flex-sub">
+				<view class="bg-img" v-for="(img,index) in imgList" :key='index' bindtap="ViewImage" :data-url="imgList[index]">
+					<image :src='imgList[index]' mode='aspectFill'></image>
+					<view class="cu-tag bg-red" @tap="deleteImage(index)" :data-index="index">
+						<text class="cuIcon-close"></text>
+					</view>
+				</view>
+				<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
+					<text class="cuIcon-cameraadd"></text>
+				</view>
+			</view>
+		</view>
 		<view class="btn-box">
 			<button type="default" class="btn-sub" @click="subApply()">提交申请</button>
 		</view>
@@ -105,6 +127,7 @@
 
 <script>
 	// pages/my/myHouseDetail.js
+	import * as TanslateImage from '../../lib/java110/utils/translate-image.js';
 	import context from '../../lib/java110/Java110Context.js'
 	const factory = context.factory;
 	import {compareDate,addDay,date2String} from '../../lib/java110/utils/DateUtil.js'
@@ -126,6 +149,8 @@
 				feeTypeCds: [],
 				feeId: '',
 				feeTypeCd: '',
+				imgList: [],
+				photos: [],
 			};
 		},
 
@@ -259,6 +284,44 @@
 				this.bindEndDate = e.detail.value;
 			},
 			
+			/**
+			 * 删除图片
+			 * @param {Object} e
+			 */
+			deleteImage: function(e) {
+				let imageArr = this.$data.imgList;
+				imageArr.splice(e, 1);
+				this.photos.splice(e, 1);
+			},
+			/**
+			 * 选择图片
+			 * @param {Object} e
+			 */
+			ChooseImage: function(e) {
+				let that = this;
+				wx.chooseImage({
+					count: 4, //默认9
+					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album','camera'], //从相册选择
+					success: (res) => {
+						that.$data.imgList.push(res.tempFilePaths[0]);
+						var tempFilePaths = res.tempFilePaths[0]
+			
+						//#ifdef H5
+						TanslateImage.translate(tempFilePaths, (url) => {
+							that.photos.push(url);
+						})
+						//#endif
+			
+						//#ifdef MP-WEIXIN
+						factory.base64.urlTobase64(tempFilePaths).then(function(_res) {
+							that.photos.push(_res);
+						});
+						//#endif
+					}
+				});
+			},
+			
 			/**
 			 * 提交申请
 			 */
@@ -298,8 +361,8 @@
 					ardId: '',
 					applyType: this.applyType,
 					feeId: this.feeId,
+					photos: this.photos
 				}
-				console.log(params);
 				saveApplyRoomDiscount(params).then(function(_res){
 					uni.showToast({
 						title: '申请成功'
diff --git a/pages/myApplyRoom/myApplyRoomDetail.vue b/pages/myApplyRoom/myApplyRoomDetail.vue
index 78a98b5..6167bc7 100644
--- a/pages/myApplyRoom/myApplyRoomDetail.vue
+++ b/pages/myApplyRoom/myApplyRoomDetail.vue
@@ -31,6 +31,7 @@
 			<view class="title">当前进度</view>
 			{{applyDetail.stateName}}
 		</view>
+		<uploadImage v-if="applyDetail.urls.length > 0" ref="vcUploadRef" :maxPhotoNum="maxPhotoNum" :sendImgList="sendImgList" :canEdit="canEdit" :title="imgTitle"></uploadImage>
 	
 		<view class="button_up_blank"></view>
 	
@@ -39,15 +40,23 @@
 
 <script>
 	import context from '../../lib/java110/Java110Context.js';
+	import {queryApplyRoomDiscount} from '../../api/applyRoom/applyRoomApi.js'	
+	import uploadImage from "../../components/vc-upload/vc-upload.vue";	
 	const factory = context.factory;
 	export default {
 		data() {
 			return {
 				applyDetail: {},
+				maxPhotoNum: 4,
+				sendImgList: [],
+				canEdit: false,
+				imgTitle: '图片材料'
 			};
 		},
 
-		components: {},
+		components: {
+			uploadImage
+		},
 		props: {},
 
 		/**
@@ -56,7 +65,17 @@
 		onLoad: function(options) {
 			let _that = this;
 			context.onLoad(options);
-			_that.applyDetail = JSON.parse(options.room);
+			
+			let params = {
+				communityId: options.communityId,
+				page: 1,
+				row: 1,
+				ardId: options.ardId
+			}
+			queryApplyRoomDiscount(params).then(function(_res){
+				_that.applyDetail = _res.data[0];
+				_that.sendImgList = _res.data[0].urls;
+			})
 		},
 
 		/**
@@ -98,8 +117,14 @@
 			 * 查看跟踪记录
 			 */
 			showRecord: function(){
+				let apply = {
+					communityId: this.applyDetail.communityId,
+					roomName: this.applyDetail.roomName,
+					roomId: this.applyDetail.roomId,
+					ardId: this.applyDetail.ardId,
+				}
 				uni.navigateTo({
-					url: '/pages/myApplyRoom/myApplyRoomRecord?apply=' + JSON.stringify(this.applyDetail)
+					url: '/pages/myApplyRoom/myApplyRoomRecord?apply=' + JSON.stringify(apply)
 				});
 			},
 		}
diff --git a/pages/myApplyRoom/myApplyRoomList.vue b/pages/myApplyRoom/myApplyRoomList.vue
index d0b98a3..af04bba 100644
--- a/pages/myApplyRoom/myApplyRoomList.vue
+++ b/pages/myApplyRoom/myApplyRoomList.vue
@@ -100,7 +100,7 @@
 			
 			toApplyRoomDetail: function(_item) {
 				this.vc.navigateTo({
-					url: '/pages/myApplyRoom/myApplyRoomDetail?room=' + JSON.stringify(_item)
+					url: '/pages/myApplyRoom/myApplyRoomDetail?ardId=' + _item.ardId + '&communityId=' + _item.communityId
 				});
 			},
 		}