From fe7c450c7ceb8627eda57af7e3d31bff1a1497c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=B3=E5=8F=AF?= <1284707383@qq.com>
Date: Fri, 20 Aug 2021 18:07:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E8=BA=AB=E4=BB=BD=E8=AF=81?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/my/qzone.vue      |  32 +++++---
 pages/my/uploadInfo.vue | 176 ++++++++++++++++------------------------
 2 files changed, 89 insertions(+), 119 deletions(-)

diff --git a/pages/my/qzone.vue b/pages/my/qzone.vue
index 88698c8..e77120b 100644
--- a/pages/my/qzone.vue
+++ b/pages/my/qzone.vue
@@ -1,19 +1,19 @@
 <template>
 	<view>
-		<view class="lf-row-between lf-m-t-40">
-			<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">7月</view>
+		<view class="lf-m-t-40">
 			<view class="lf-row-between lf-p-r-30">
-				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
-				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
-				<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<view class="lf-font-32 lf-color-222 lf-p-l-30 march-tag">7月</view>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
 			</view>
 		</view>
-		<view class="lf-row-between lf-m-t-40">
-			<view class="lf-font-32 lf-color-222 lf-p-l-30 lf-text-center">8月</view>
+		<view class="lf-m-t-40">
 			<view class="lf-row-between lf-p-r-30">
-				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
-				<image src="../../static/my/authen.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
-				<image src="../../static/logo.png" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<view class="lf-font-32 lf-color-222 lf-p-l-30 march-tag">8月</view>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
+				<image src="https://picsum.photos/seed/picsum/200/300" class="lf-p-l-20 qzone-img" mode="aspectFill"></image>
 			</view>
 		</view>
 	</view>
@@ -24,7 +24,15 @@
 
 <style scoped="scoped">
 	.qzone-img {
-		width: 200rpx;
-		height: 200rpx;
+		width: 160rpx;
+		height: 160rpx;
+	}
+	.march-tag {
+		width: 160rpx;
+		height: 160rpx;
+		display: flex;
+		align-items: center;
+		text-align: center;
+		justify-content: center;
 	}
 </style>
diff --git a/pages/my/uploadInfo.vue b/pages/my/uploadInfo.vue
index 5efc8cb..5a481ed 100644
--- a/pages/my/uploadInfo.vue
+++ b/pages/my/uploadInfo.vue
@@ -24,10 +24,13 @@
 				请根据示例图上传清晰照片
 			</view>
 			<view class="authen-pic">
-				<view>
+				<view @click="lookImage(1,image_list.length-1)" v-if="image_list.length">
+					<image :src="image_list[image_list.length-1]" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image>
+				</view>
+				<view v-else>
 					<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image>
 				</view>
-				<view @tap="ChooseImage">
+				<view @tap="uploadImage(1)">
 					<view>
 						<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon>
 					</view>
@@ -39,10 +42,13 @@
 			<text style="color: #E21196;">*</text><text class="lf-m-l-10 lf-color-222">上传身份证正面</text>
 		</view>
 		<view class="authen-pic" style="margin-top: 60rpx;">
-			<view>
+			<view @click="lookImage(2,image_list_back.length-1)" v-if="image_list_back.length">
+				<image :src="image_list_back[image_list_back.length-1]" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image>
+			</view>
+			<view v-else>
 				<image src="../../static/logo.png" mode="aspectFill" style="width: 200rpx;height: 135rpx;"></image>
 			</view>
-			<view @tap="ChooseImage">
+			<view @tap="uploadImage(2)">
 				<view>
 					<u-icon name="camera-fill" style="font-size: 80rpx;"></u-icon>
 				</view>
@@ -64,120 +70,76 @@
 	export default {
 		data() {
 			return {
-				hostImg: '',
-				frontPic: '',
-				backPic: ''
+				image_list: [],
+				image_list_back: [],
+				image_count: 6,
+				content: '',
+				frontImg: '',
+				backImg: ''
 			}
 		},
 		methods: {
-			checkImgInfo(tempFilePath, suc){
-				uni.getImageInfo({
-					src: tempFilePath,
-					success (res) {
-						let type = res.type;
-						console.log('checkImgInfo...', type);
-						if(type == 'png' || type == 'jpeg' || type == 'jpg'){
-							suc && suc(true);
-						} else {
-							suc && suc(false);
-						}
-					},
-					fail(err) {
-						suc && suc(false);
-					}
-				})
+			// 预览图片
+			lookImage(type,index){
+				if(type == 1) {
+					this.$u.throttle(() => {
+						uni.previewImage({
+							urls: this.image_list,
+							current: index
+						});
+					}, 500);
+				}else {
+					this.$u.throttle(() => {
+						uni.previewImage({
+							urls: this.image_list_back,
+							current: index
+						});
+					}, 500);
+				}
+				
+				
 			},
-			// 选择图片
-			ChooseImage(e) {
-				let that = this;
+			// 移除图片
+			removeInage(current){
+				this.image_list.splice(current, 1);
+			},
+			// 上传凭证图片
+			uploadImage(type){
+				let current_count = this.image_count - this.image_list.length;
+				if(current_count == 0) return;
 				uni.chooseImage({
-					count: 1,
-					sizeType: ['original'], // 可以指定是原图original还是压缩图compressed ，默认二者都有
-					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
-					success: res => {
-						that.hostImg = res.tempFilePaths[0];
-						let tempFile = res.tempFiles.shift();
-						let tempFilePath = res.tempFilePaths.shift();
-						console.log('临时路径',res)
-						that.checkImgInfo(tempFilePath, (res) => {
-							// 过滤不是图片不是png、jpeg 格式
-							if(res){
-								if(tempFile.size > 10000000){
-									uni.showModal({
-										title: '',
-										content: '您选择的图片过大：'+ (tempFile.size / 1024000).toFixed(2) +"M，请点击确定重新上传",
-										success: res2 => {
-											if(res2.confirm){
-												uni.chooseImage({
-													count: 1,
-													sizeType: ['compressed'],
-													sourceType: ['album', 'camera'],
-													success: (res3) => {
-														console.log(res3)
-														let tempFilePath = res3.tempFilePaths.shift();
-														that.frontPic = res3.tempFilePaths
-														that.is_wx_reduce = true;
-													}
-												})
-											}
-										}
-									})
-								} else{
-									that.frontPic = res3.tempFilePaths
+					count: current_count,
+					complete: result => {
+						let tempFiles = result.tempFiles;
+						let image_list = [];
+						let overstep = false;
+						tempFiles.map(item => {
+							// 上传的图片需小于10MB
+							if(item.size < 10464788){
+								if(type == 1) {
+									this.image_list.push(item.path)
+									console.log(this.image_list)
+									// this.frontImg = item.path
+								}else {
+									// this.backImg = item.path
+									this.image_list_back.push(item.path)
 								}
-							} else {
-								uni.showModal({
-									title: '',
-									content: '选择的图片须为jpg、jpeg或png格式',
-									showCancel: false,
-									confirmColor: '#1697EE'
-								})
+							}else{
+								overstep = true;
 							}
-						});
-					}
-				});
-			},
-			
-			// 上传图片到服务器
-			upload(url){
-				let that = this;
-				let uploads = [];
-				// 商品banner图上传
-				if (that.img_list.length > 0) {
-					for (let i = 0; i < that.img_list.length; i++) {
-						let upload_img = new Promise((resolve, reject) => {
-							that.uploadFile(that.img_list[i], (res) => {
-								resolve(res);
-							}, (err) => {
-								reject(err);
-							});	
 						})
-						uploads.push(upload_img);
-					}
-				}
-				if(uploads.length == 0) {
-					that.realSubmitInfo([]);
-					return
-				}
-				Promise.all(uploads).then((result) => {
-					let img_url_list = [];
-					if(result.length > 0){
-						img_url_list = result;
-					}
-					if(img_url_list) {
-						that.realSubmitInfo(img_url_list);
+						if(overstep){
+							uni.showModal({
+								title: '温馨提示',
+								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
+								showCancel: false
+							})
+						}
+						// this.image_list.push(...image_list);
 					}
-					
-					
-				}).catch(err => {
-					that.is_publish = false; // 恢复提交按钮
-					uni.showModal({
-						title: '',
-						content: '图片上传失败，请重新提交',
-						confirmColor: '#1697EE'
-					})
 				})
 			},
+		
 		}
 	}
 </script>