后置付费

pages/display/display.vue

@@ -21,14 +21,28 @@
 			</view>
 			<view class="box_show" v-if="!wait">
 				<image class="showImage" :src="showImage" mode="aspectFill" @tap="previewImage(showImage)"/>
+				<image class="image-sy" v-if="template.paymentType == 3 && template.fee != 0 && !isPay"
+					src="https://humeng-res.oss-cn-beijing.aliyuncs.com/humeng/vlog/whiteboard_portraitmode.png" mode="aspectFill"></image>
 				<view class="printTip" v-if="buyType == 2">{{ printScreenTip }}</view>
-				<view class="upload-btn" @tap="saveImage()">保存到手机</view>
+				<view class="upload-btn" v-if="template.paymentType != 3" @tap="saveImage()">保存到手机</view>
+				<view class="btn_content" v-if="template.paymentType == 3 && template.fee != 0">
+					<view class="buyBtn" v-if="!isPay" @tap="toPay()">
+						{{template.fee}}购买高清版
+					</view>
+					<view class="buyBtn" v-if="isPay" @tap="saveImage()">
+						保存到手机
+					</view>
+					<view class="skipBtn" @tap="jumpApplet()">
+						去定制
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
+	import { mul } from "@/utils/calculate/calculate.js"
 	const getNowTime = require('../../utils/timeUtil/timeUtil.js')
 	let pageNumber = 4;
 	let startTime = '';
@@ -49,7 +63,14 @@
 				downloading: false,
 				buyType: 0,
 				printCode: '',
-				printScreenTip: ''
+				printScreenTip: '',
+				template: {},
+				templateSet: {},
+				payId: '',
+				isPay: false,
+				record: {},
+				templateSetId: '',
+				isOnUnload: 0
 			}
 		},
 		onLoad(option) {
@@ -61,25 +82,187 @@
 			this.uniMenuInfo = uni.getStorageSync('uniMenuInfo');
 			this.code = option.code;
 			this.templateId = Number(option.templateId);
+			this.templateSetId = Number(option.templateSetId);
 			this.mchId = Number(option.mchId);
 			this.buyType = Number(option.buyType);
-			this.firstGetPhoto(_this.code);
+			if(option.myPhoto == "1") {
-			this.getPhoto(this.code);
+				this.wait = false
+				this.record = uni.getStorageSync('record')
+				this.isPay = this.record.payId != "-1"
+				this.showImage = 'https://oss.humengfilms.com/' +  this.record.aiPhoto;
+				if(this.record.printCode != null) {
+					_this.printCode = this.record.printCode;
+					let text = _this.template.printScreenTip;
+					_this.printScreenTip = text.replace("*", resData.printCode);
+				}
+			} else {
+				this.getPhotoGenerationRecord();
+				this.firstGetPhoto(_this.code);
+				this.getPhoto(this.code);
+			}
+			this.getTemplate(this.templateId)
+			this.getTemplateSet(this.templateSetId);
 		},
 		onShow() {
 			startTime = getNowTime();
 		},
 		onHide() {
+			console.log('onHide')
 			if(uni.getStorageSync('userInfo').id) {
 				this.logRecord();
 			}
 		},
 		onUnload() {
+			this.isOnUnload = 1
 			if(uni.getStorageSync('userInfo').id) {
 				this.logRecord();
 			}
 		},
 		methods: {
+			getTemplateSet(id) {
+				var _this = this;
+				uni.request({
+					url: _this.java_http_url + '/aiweb/templateSet/getTemplateSetById',
+					method: "POST",
+					header: {
+						'content-type': "application/x-www-form-urlencoded"
+					},
+					data: {
+						id: id 
+					},
+					success(res) {
+						_this.templateSet = res.data.data
+					}
+				})
+			},
+			getTemplate(id) {
+				var _this = this;
+				uni.request({
+					url: _this.java_http_url + '/aiweb/sdTemplate/getSdTemplateById',
+					method: "POST",
+					data: {
+						id: id 
+					},
+					success(res) {
+						_this.template = res.data.data
+					}
+				})
+			},
+			recordBindPayId(payId) {
+				var _this = this;
+				uni.request({
+					url: _this.java_http_url + '/applet/photo_generation_record/updateRecord',
+					method: 'POST',
+					data: {
+						id: _this.record.id,
+						payId: payId
+					},
+					success(res) {
+						console.log('payIdRes:', res)
+					}
+				})
+			},
+			getPhotoGenerationRecord() {
+				var _this = this;
+				uni.request({
+					url: _this.java_http_url + '/applet/photo_generation_record/getRecordByCode',
+					method: 'POST',
+					data: {
+						userId: uni.getStorageSync('userInfo').id,
+						code: _this.code,
+					},
+					success(res) {
+						console.log('res:', res)
+						_this.record = res.data.data
+					}
+				})
+			},
+			toPay(e) {
+				uni.showLoading({
+					title: '请稍候',
+					mask: true
+				})
+				var _this = this;
+				let totalFee = mul(_this.template.fee, 100);
+				let triesLimit = 1;
+				let data = {
+					open_id: uni.getStorageSync('userInfo').openId,
+					user_id: uni.getStorageSync('userInfo').id,
+					total_fee: totalFee,
+					merchant_id: _this.templateSet.mchId,
+					template_id: _this.template.id,
+					template_name: _this.template.templateName,
+					payment_type: _this.template.paymentType,
+					tries_limit: triesLimit
+				};
+				console.log('支付参数', data)
+				if (e != 0) {
+					console.log('data', data)
+					uni.request({
+						url: _this.pay_http_url + '/wxpay/pay',
+						method: 'POST',
+						data: data,
+						success: res => {
+							console.log('pay request success', res);
+							if (res.statusCode !== 200) {
+								uni.showModal({
+									content: '支付失败，请重试！',
+									showCancel: false,
+									success() {
+										uni.hideLoading();
+									}
+								});
+							} else {
+								if (res.data.code == 'pay') {
+									console.log('res', res.data)
+									let payId = res.data.order_id;
+									uni.requestPayment({
+										timeStamp: res.data.timeStamp,
+										nonceStr: res.data.nonceStr,
+										package: res.data.package,
+										signType: 'MD5',
+										paySign: res.data.paySign,
+										success: res => {
+											console.log('res', res)
+											_this.payId = payId;
+											_this.isPay = true;
+											console.log('支付成功')
+											_this.recordBindPayId(payId);
+											uni.hideLoading()
+										},
+										fail() {
+											uni.hideLoading()
+										}
+									})
+								}
+							}
+						},
+						fail() {
+							uni.hideLoading();
+							uni.showToast({
+								title: '支付失败',
+								icon: "error",
+								mask: true
+							})
+						}
+					})
+				}
+			},
+			jumpApplet() {
+				wx.navigateToMiniProgram({
+					appId: 'wx1aee6186e7cfd004',
+					path: 'pages/home/home?aid=33304411&yid=1&storeId=1&_r=1',
+					//develop开发版；trial体验版；release正式版
+					envVersion: 'release', 
+					success(res) {
+						// 打开成功
+						console.log("跳转小程序成功！",res);
+					},
+					fail(err) {
+						console.log('跳转失败', err)
+					}
+				})
+			},
 			logRecord() {
 				var _this = this;
 				destroyTime = getNowTime();
@@ -224,6 +407,9 @@
 									pageNumber = 5;
 									_this.wait = false;
 								}
+								if(_this.isOnUnload == 1) {
+									clearInterval(stateInterval)
+								}
 							}
 						}
 					})

pages/display/index.css

@@ -93,6 +93,15 @@
 	border-radius: 20px;
 }
 
+.image-sy {
+	position: absolute;
+	border: #fff 1px solid;
+	height: 60vh;
+	width: 80%;
+	border-radius: 20px;
+	z-index: 10;
+}
+
 .printTip {
 	width: 80%;
 	margin-top: 20rpx;
@@ -135,3 +144,34 @@
 	width: 80%;
 	margin-top: 40rpx;
 }
+
+.btn_content {
+	background: url(https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/btn%404x.png)
+		100% no-repeat;
+	background-size: 100% 100%;
+	height: 100rpx;
+	line-height: 100rpx;
+	width: 80%;
+	margin-top: 20rpx;
+	overflow-wrap: break-word;
+	color: rgba(255, 255, 255, 1);
+	font-size: 16px;
+	font-family: 'Microsoft YaHei', 'Microsoft Yahei', Arial, sans-serif;
+	text-align: center;
+	white-space: nowrap;
+	position: absolute;
+	bottom: 0;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.buyBtn {
+	width: 50%;
+	border-radius: 50% 0 0 50%;
+}
+
+.skipBtn {
+	width: 50%;
+	border-radius: 0 30% 5% 0;
+}

pages/myPhoto/index.css

@@ -42,21 +42,46 @@
 
 .img {
 	position: relative;
-	width: 45%;
+	width: 93%;
 	left: calc((100vw - 96%)/2);
-	height: 420rpx;
+	height: 120rpx;
 	background: #FFFFFF;
 	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.02);
 	margin: 20rpx 10rpx 0 10rpx;
 	border-radius: 12px;
+	display: flex;
+	flex-wrap: wrap;
+	overflow-y: scroll;
+	align-items: center;
 }
 
-image {
+.img-photo {
-	width: 100%;
+	width: 10%;
-	height: 100%;
+	height: 85%;
 	border-radius: 12px;
+	margin-left: 3%;
 }
 
-.center :last-child {
+.img-time {
+	width: 55%;
+	margin-left: 20rpx;
+	font-size: 15px;
+}
+
+.img-state {
+	width: 20%;
+	margin-left: 10rpx;
+	font-size: 14px;
+	color: #66c5ff;
+}
+
+.img-icon {
+	position: absolute;
+	width: 50rpx;
+	height: 50rpx;
+	right: 15rpx;
+}
+
+.center .img:last-child {
 	margin-bottom: 50rpx;
 }

pages/myPhoto/myPhoto.vue

@@ -4,8 +4,14 @@
 		<view class="back" @tap="goBack()" :style="{'top' : uniMenuInfo.top - 12 + 'px'}"></view>
 		<view class="center" v-if="uniMenuInfo.bottom"
 			:style="{'height': 'calc(100vh - ' + (uniMenuInfo.bottom + 10) + 'px)', 'top': uniMenuInfo.top + 35 + 'px'}">
-			<view class="img" v-for="(item, idx) in imgUrlList" @tap="previewImage(item.aiPhoto)" :key="item.id">
+			<view class="img" v-for="(item, idx) in imgUrlList" :key="item.id" @tap="goDisplay(item)">
-				<image :src="item.aiPhoto+'?x-oss-process=image/resize,m_lfit,h_800,w_800'" mode="aspectFill" />
+				<image class="img-photo" 
+					:src="'https://oss.humengfilms.com/' + item.aiPhoto+'?x-oss-process=image/resize,m_lfit,h_800,w_800'" 
+					mode="aspectFill" />
+				<view class="img-time">{{item.createTime}}</view>
+				<view class="img-state">{{item.aiPhoto!=null?'生成完成':'生成中'}}</view>
+				<image class="img-icon" 
+					src="https://humeng-res.oss-cn-beijing.aliyuncs.com/hm_aigc/applet/right.png" />
 			</view>
 		</view>
 	</view>
@@ -25,9 +31,24 @@
 				mask: true
 			});
 			this.uniMenuInfo = uni.getStorageSync('uniMenuInfo');
+		},
+		onShow() {
 			this.initializeLoading();
 		},
 		methods: {
+			goDisplay(record) {
+				console.log(record)
+				let myPhoto = record.aiPhoto == null?2:1
+				uni.setStorageSync('record', record)
+				uni.navigateTo({
+					url: "../display/display?code=" + record.code + "&templateId=" + record.templateId
+						+ "&mchId=" + record.mchId +"&buyType=" + record.buyType + "&templateSetId=" + record.templateSetId
+						+ "&myPhoto=" + myPhoto,
+					success() {
+						uni.hideLoading();
+					}
+				})
+			},
 			previewImage(url) {
 				let previewImageList = [];
 				previewImageList.push(url);
@@ -46,15 +67,16 @@
 					url: _this.java_http_url + '/applet/smart_camera/getMyAiPhoto',
 					method: 'POST',
 					data: {
-						userId: uni.getStorageSync('userInfo').id
+						userId: uni.getStorageSync('userInfo').id,
+						type: 2
 					},
 					success(res) {
 						console.log('用户生成ai照片', res)
 						if(res.data.code == 200) {
 							_this.imgUrlList = res.data.data;
-							_this.imgUrlList.forEach((el, idx)=> {
+							// _this.imgUrlList.forEach((el, idx)=> {
-								el.aiPhoto = 'https://oss.humengfilms.com/' + el.aiPhoto
+							// 	el.aiPhoto = 'https://oss.humengfilms.com/' + el.aiPhoto
-							})
+							// })
 						}
 					},
 					complete() {

pages/selectPhoto/selectPhoto.vue

@@ -10,6 +10,9 @@
 			<view class="tries-limit" v-if="template.paymentType == 1">
 				付费 {{ template.fee }} 元 &nbsp;&nbsp;体验{{ template.triesLimit }} 次
 			</view>
+			<view class="tries-limit" v-if="template.paymentType == 3">
+				免费体验一次
+			</view>
 			<view class="section_11 flex-row">
 				<view class="section_8 flex-row" @tap="chooseImage('album')">
 					<view class="image-text_7 flex-col">
@@ -244,6 +247,7 @@
 						data: {
 							'code': code,
 							'templateId': _this.template.id,
+							'templateSetId': _this.templateSet.id,
 							'photo': res[0],
 							'userId': uni.getStorageSync('userInfo').id,
 							'payId': _this.payId,
@@ -256,7 +260,8 @@
 							if(res.data.code == 200) {
 								uni.navigateTo({
 									url: "../display/display?code=" + code + "&templateId=" + _this.template.id
-										+ "&mchId=" + _this.template.mchId +"&buyType=" + _this.buyType,
+										+ "&mchId=" + _this.template.mchId +"&buyType=" + _this.buyType 
+										+ "&templateSetId=" + _this.templateSet.id,
 									success() {
 										uni.hideLoading();
 									}