Signed-off-by: liuboyan <632697560@qq.com>

1

pages/index/index.vue

@@ -92,9 +92,9 @@
 					url: '/pages/login/index'
 				});
 			}
-				// uni.navigateTo({
-				// 	url: '/pagesMain/contractInfo?memberCardId=1&couponId=&studentId=2628'
-				// });
+			uni.navigateTo({
+				url: '/pagesMain/openMember?id=1'
+			});
 		},
 		onPullDownRefresh() {
 			this.initialize()
@@ -229,8 +229,8 @@
 					width: 100%;
 					height: 30vw;
 					float: left;
-						border-radius: 10px;
-						overflow: hidden;
+					border-radius: 10px;
+					overflow: hidden;
 
 					video {
 						width: 100%;

pagesMain/contractInfo.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 		<!-- <u-image width="100vw" height="100vh" :src="contractInfo.url"></u-image> -->
-		<web-view :src="contractInfo.url" class="web-view"></web-view>
+		<!-- <web-view :src="contractInfo.url" class="web-view"></web-view> -->
 		<view class="canvas-container">
 			<canvas canvas-id="canvas" id="canvas" :disable-scroll="true" style="width: 100%; height: 200px;background-color: #FFFFFF;"
 			 @touchstart="handleTouchStart($event)" @touchmove="handleTouchMove($event)" @touchend="handleTouchEnd($event)"
@@ -72,7 +72,15 @@
 				NET.request(API.getContractInfo, {
 					cardId: this.orderInfo.id
 				}, 'POST').then(res => {
-					this.contractInfo = res.data
+					uni.downloadFile({
+						url: res.data.url,
+						success: (res2) => {
+							uni.openDocument({
+								filePath: res2.tempFilePath,
+							});
+						}
+					})
+					// this.contractInfo = res.data
 				}).catch(error => {
 					this.$refs.uTips.show({
 						title: error.message,
@@ -174,8 +182,9 @@
 		float: left;
 		padding: 15px 15px 60px 15px;
 		box-sizing: border-box;
-		.web-view{
-			height: 200px!important;
+
+		.web-view {
+			height: 200px !important;
 		}
 	}
 </style>

pagesMain/openMember.vue

@@ -8,8 +8,15 @@
 		<u-cell-group style="width: 100%; float: left;">
 			<u-cell-item title="使用时间" :value="memberInfo.startDate + '~' + memberInfo.endDate" :arrow="false"></u-cell-item>
 			<u-cell-item title="优惠金额" :value="couponId ? '-￥' + memberInfo.discountsAmount : ''" @click="couponShow = true"></u-cell-item>
-			<u-cell-item title="学员姓名" :value="studentName" @click="studentShow = true"></u-cell-item>
+			<u-cell-item title="学员姓名" :value="studentName" @click="studentShow = true" required></u-cell-item>
 			<u-cell-item title="实际金额" :value="'￥' + memberInfo.realPayAmount" :arrow="false"></u-cell-item>
+			<u-cell-item title="乙方签字" :arrow="false" :title-style="{width: '100%'}" required>
+				<view class="canvas-container" slot="label">
+					<canvas canvas-id="canvas" id="canvas" :disable-scroll="true" style="width: 100%; height: 200px;background-color: #FFFFFF;"
+					 @touchstart="handleTouchStart($event)" @touchmove="handleTouchMove($event)" @touchend="handleTouchEnd($event)"
+					 @touchcancel="handleEnd($event)"></canvas>
+				</view>
+			</u-cell-item>
 		</u-cell-group>
 		<u-popup v-model="couponShow" mode="bottom" border-radius="30" closeable>
 			<scroll-view scroll-y style="height:300px;margin: 30px 0 15px 0;">
@@ -29,7 +36,8 @@
 			</scroll-view>
 		</u-popup>
 		<view class="handle-fix-box">
-			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="toPay()">确定支付￥{{memberInfo.realPayAmount}}</u-button>
+			<text class="contract-link" @click="checkContract()">点击查看合同协议</text>
+			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="submitContract()">确定支付￥{{memberInfo.realPayAmount}}</u-button>
 		</view>
 		<u-popup v-model="studentShow" mode="bottom" border-radius="30">
 			<scroll-view scroll-y class="student-box">
@@ -47,6 +55,7 @@
 </template>
 
 <script>
+	var context = null
 	import {
 		mapGetters
 	} from 'vuex'
@@ -80,11 +89,31 @@
 				studentName: '',
 				studentShow: false,
 				studentList: [],
+				contractInfo: {
+					id: '',
+					url: '',
+				},
+				canvasData: [],
+				signUrl: ''
+			}
+		},
+		watch: {
+			canvasData() {
+				context.moveTo(this.canvasData[0].x, this.canvasData[0].y)
+				for (let i = 0; i < this.canvasData.length; i++) {
+					context.lineTo(this.canvasData[i].x, this.canvasData[i].y)
+				}
+				context.stroke()
+				context.draw(true)
 			}
 		},
 		onLoad(options) {
 			this.memberCardId = options.id
 			this.getMemberInfo()
+			context = uni.createCanvasContext('canvas')
+			context.setLineWidth(3)
+			context.setStrokeStyle("#000000")
+			this.reset()
 		},
 		onShow() {
 			NET.request(API.getAllStudentList, {}, 'POST').then(res => {
@@ -119,6 +148,16 @@
 						type: 'warning',
 					})
 				})
+				NET.request(API.getContractInfo, {
+					cardId: this.memberCardId
+				}, 'POST').then(res => {
+					this.contractInfo = res.data
+				}).catch(error => {
+					this.$refs.uTips.show({
+						title: error.message,
+						type: 'warning',
+					})
+				})
 			},
 			//  更新数据
 			refreshMemberInfo() {
@@ -148,8 +187,47 @@
 				this.studentName = item.studentName
 				this.refreshMemberInfo()
 			},
-			//  支付
-			toPay() {
+			//  显示合同
+			checkContract() {
+				uni.downloadFile({
+					url: this.contractInfo.url,
+					success: (res) => {
+						uni.openDocument({
+							filePath: res.tempFilePath,
+						});
+					}
+				})
+			},
+			reset() {
+				context.draw()
+			},
+			handleTouchStart(e) {
+				this.canvasData = []
+				const a = e.changedTouches[0]
+				this.canvasData.push({
+					x: a.x,
+					y: a.y
+				})
+			},
+			handleTouchMove(e) {
+				const a = e.changedTouches[0]
+				this.canvasData.push({
+					x: a.x,
+					y: a.y
+				})
+			},
+			handleTouchEnd(e) {
+				const a = e.changedTouches[0]
+				this.canvasData.push({
+					x: a.x,
+					y: a.y
+				})
+			},
+			handleEnd() {
+				context.stroke()
+				context.draw(true)
+			},
+			submitContract() {
 				if (!this.studentId) {
 					this.$refs.uTips.show({
 						title: '请选择学员',
@@ -157,11 +235,81 @@
 					})
 					return
 				}
-				uni.navigateTo({
-					url: '/pagesMain/contractInfo?memberCardId=' + this.memberCardId + '&couponId=' + this.couponId + '&studentId=' +
-						this.studentId
-				});
+				let that = this
+				uni.canvasToTempFilePath({
+					canvasId: 'canvas',
+					success: res => {
+						uni.uploadFile({
+							url: API.uploadFile,
+							filePath: res.tempFilePath,
+							name: 'file',
+							header: {
+								Authorization: uni.getStorageSync('token')
+							},
+							success: (uploadFileRes) => {
+								that.signUrl = JSON.parse(uploadFileRes.data).data.id
+								NET.request(API.submitContractForm, {
+									contractId: that.contractInfo.id,
+									fileId: that.signUrl,
+								}, 'POST').then(res => {
+									that.toPay(res.data.id)
+								}).catch(error => {
+									that.$refs.uTips.show({
+										title: error.message,
+										type: 'warning',
+									})
+								})
+							}
+						});
+					}
+				})
+			},
+			//  支付
+			toPay(contractId) {
+				NET.request(API.getPayParams, {
+					id: this.memberCardId,
+					couponId: this.couponId,
+					studentId: this.studentId,
+					contractId: contractId
+				}, 'POST').then(res => {
+					if (this.memberInfo.realPayAmount <= 0) {
+						this.goToPayResult(res.data.oderNo)
+						return false
+					}
+					uni.requestPayment({
+						provider: 'wxpay',
+						timeStamp: res.data.timeStamp,
+						nonceStr: res.data.nonceStr,
+						package: res.data.packageString,
+						signType: res.data.signType,
+						paySign: res.data.paySign,
+						success: (payRes) => {
+							this.goToPayResult(res.data.oderNo)
+						},
+						fail: (error) => {
+							this.$refs.uTips.show({
+								title: '支付未成功',
+								type: 'warning',
+							})
+						}
+					})
+				}).catch(error => {
+					this.$refs.uTips.show({
+						title: error.message,
+						type: 'warning',
+					})
+				})
+				// uni.navigateTo({
+				// 	url: '/pagesMain/contractInfo?memberCardId=' + this.memberCardId + '&couponId=' + this.couponId + '&studentId=' +
+				// 		this.studentId
+				// });
 			},
+			//  跳转支付结果
+			goToPayResult(oderNo) {
+				uni.redirectTo({
+					url: '/pagesMain/payResult?id=' + oderNo
+				});
+			}
 		},
 	}
 </script>
@@ -178,7 +326,7 @@
 	.content {
 		width: 100%;
 		float: left;
-		padding: 15px 15px 60px 15px;
+		padding: 15px 15px 85px 15px;
 		box-sizing: border-box;
 
 		.card-list {
@@ -260,5 +408,20 @@
 				padding-bottom: 0px !important;
 			}
 		}
+
+		.canvas-container {
+			width: 100%;
+			height: 200px;
+		}
+
+		.handle-fix-box {
+			height: 85px;
+			text-align: center;
+
+			.contract-link {
+				color: $mainColor;
+				line-height: 25px;
+			}
+		}
 	}
 </style>