spark-student/pagesMain/openMember.vue

<template>
	<view class="content">
		<view class="card-list">
			<view class="card-label">{{memberInfo.typeValue}}</view>
			<view class="card-num">￥{{memberInfo.originalAmount}}</view>
			<view class="card-icon iconfont iconzu4931"></view>
		</view>
		<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" 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;">
				<u-card :show-head="false" :show-foot="false" padding="0px" margin="0px 30px 20px 30px" borderRadius="40" v-for="(item, index) in couponList"
				 :key="index" class="class-card" @click="selectCoupon(item)">
					<view class="class-content" slot="body">
						<view class="class-info-img">
							<u-image width="60px" height="60px" :src="item.url" shape="circle"></u-image>
						</view>
						<view class="class-info-content">
							<view class="class-info-label">{{item.name}}￥{{item.amount}}</view>
							<view class="class-info-text">{{item.typeValue}}&nbsp;&nbsp;{{item.content}}</view>
							<view class="class-info-text">{{item.endDate}}&nbsp;&nbsp;到期</view>
						</view>
					</view>
				</u-card>
			</scroll-view>
		</u-popup>
		<view class="handle-fix-box">
			<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">
				<u-card :title="item.studentName" title-size="32" :head-style="cardStyle" :head-border-bottom="false" :show-foot="false"
				 margin="10px" borderRadius="20" v-for="(item, index) in studentList" :key="index" @click="selectStudent(item)">
					<view class="student-card" slot="body">
						<view class="class-info-text">性别：{{item.sex}}&nbsp;&nbsp;年龄：{{item.age}}</view>
					</view>
				</u-card>
			</scroll-view>
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="{...customStyle,margin:'15px'}" @click="goToSubscribelForm()">新增学员</u-button>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	var context = null
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'customStyle',
			])
		},
		data() {
			return {
				memberCardId: '',
				memberInfo: {
					originalAmount: '',
					discountsAmount: '',
					realPayAmount: '',
					typeValue: '',
					endDate: '',
					startDate: '',
				},
				couponId: '',
				couponShow: false,
				couponList: [],
				cardStyle: {
					fontWeight: 'bold'
				},
				studentId: '',
				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 => {
				this.studentList = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
		},
		methods: {
			//  获取数据
			getMemberInfo() {
				NET.request(API.getMemberCardInfo, {
					id: this.memberCardId
				}, 'POST').then(res => {
					this.memberInfo = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				NET.request(API.getUsableCouponList, {
					id: this.memberCardId
				}, 'POST').then(res => {
					this.couponList = res.data.row
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						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() {
				NET.request(API.getMemberCardInfoAfterCoupon, {
					memberId: this.memberCardId,
					couponId: this.couponId,
					studentId: this.studentId
				}, 'POST').then(res => {
					this.memberInfo = res.data
					this.couponShow = false
					this.studentShow = false
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  选择优惠券
			selectCoupon(item) {
				this.couponId = item.id
				this.refreshMemberInfo()
			},
			//  选择学员
			selectStudent(item) {
				this.studentId = item.studentId
				this.studentName = item.studentName
				this.refreshMemberInfo()
			},
			//  显示合同
			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: '请选择学员',
						type: 'warning',
					})
					return
				}
				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>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		padding: 15px 15px 85px 15px;
		box-sizing: border-box;

		.card-list {
			width: 100%;
			padding: 15px 20px;
			margin-bottom: 15px;
			float: left;
			background-color: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
			position: relative;
			overflow: hidden;

			.card-label {
				width: 100%;
				margin-bottom: 10px;
				float: left;
				font-size: 18px;
				font-weight: bold;
				line-height: 20px;
			}

			.card-num {
				width: 100%;
				float: left;
				font-size: 28px;
				line-height: 28px;
				color: $mainColor;
			}

			.card-icon {
				font-size: 80px;
				color: $mainColor;
				position: absolute;
				right: -15px;
				bottom: -15x;
				opacity: 0.5;
			}
		}

		.class-card {
			.class-content {
				padding: 10px 15px;
				display: flex;
				align-items: center;
				position: relative;
			}

			.class-info-img {
				width: 60px;
				height: 60px;
				margin-right: 10px;
			}

			.class-info-content {
				flex: 1;
			}

			.class-info-label {
				font-size: 16px;
				color: #000000;
				word-break: break-all;
			}

			.class-info-text {
				color: #999999;
				margin-bottom: 5px;
			}
		}

		.student-box {
			max-height: 200px;
			padding: 0 15px;
			margin: 25px 0 0 0;
			box-sizing: border-box;
			overflow: auto;

			/deep/.u-card__head {
				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>