pz/pages/index/cardDetail.vue

<template>
	<view class="container">
		<view class="top">
			<image :src="info.details_image" mode=""></image>
		</view>
		<view class="main">
			<view class="title">
				<view class="title-left"></view>
				<view class="title-font">卡片详情</view>
				<view class="title-right"></view>
			</view>
			<view class="detail-desc"><rich-text :nodes="info.introduce"></rich-text></view>
			<view class="btn" @click="buy()">立即购买(￥{{ info.price }})</view>
			<view class="two">
				<label @click="checkboxChange">
					<radio style="transform:scale(0.7)" color="#5dbc7c" :checked="istype" />
					已阅读并同意
					<text>《优惠卡服务协议》</text>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		carddetails,
		wechat,
		routine
	} from '@/api/jdr.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				id: '',
				info: '',
				istype: false,
				isbuy: false
			};
		},
		computed: {
			// #ifdef H5
			...mapState(['weichatObj']),
			// #endif
			...mapState('user', ['userInfo'])
		},
		onLoad(opt) {
			this.id = opt.id;
			this.loadData();
		},
		methods: {
			loadData() {
				carddetails({}, this.id).then(({
					data
				}) => {
					this.info = data;
				});
			},
			navTo(opt) {
				uni.navigateTo({
					url: '/pages/index/cardDetail?id='
				});
			},
			checkboxChange() {
				this.istype = !this.istype;
				console.log(this.istype);
			},
			buy() {
				const obj = this;
				if (!this.istype) {
					return this.$api.msg('请阅读并同意优惠卡服务协议');
				}
				if (this.isbuy) {
					return;
				}
				this.isbuy = true;
				// #ifdef H5
				wechat({
					card_id: this.id
				}).then(e => {
					let da = e.data.data;
					obj.weichatObj.chooseWXPay({
						timestamp: da.timestamp,
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							obj.isbuy = false;
							uni.showModal({
								title: '提示',
								content: '购买优惠卡成功是否前往卡券中心激活卡',
								cancelText: '保存卡券',
								confirmText: '立即激活',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/coupon'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					});
				});
				// #endif
				// #ifdef MP-WEIXIN
				routine({
					card_id: this.id
				}).then(e => {
					let da = e.data;
					let data = {
						// #ifdef H5
						timestamp: da.timestamp,
						// #endif
						// #ifdef MP
						timeStamp: da.timestamp,
						// #endif
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							obj.isbuy = false;
							uni.showModal({
								title: '提示',
								content: '购买优惠卡成功是否前往卡券中心激活卡',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/coupon'
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						},
						fail: () => {
							obj.isbuy = false;
						}
					};
					wx.requestPayment(data);
				});
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 100%;
		height: auto;
		background: #ffffff;
	}

	.top {
		position: relative;
		height: 346rpx;
		width: 750rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.main {
		position: relative;
		z-index: 2;
		width: 750rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 5rpx 5rpx;
		margin-top: -10rpx;
		padding: 46rpx 44rpx;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.title-font {
				font-size: 32rpx;
				font-family: ZhenyanGB;
				font-weight: 400;
				color: #bd9360;
			}
		}
	}

	.btn {
		width: 620rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #ffe7c4, #ffce8a);
		border-radius: 40rpx;
		margin: 58rpx auto 0;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #9f570e;
		line-height: 80rpx;
		text-align: center;
	}

	.two {
		margin: 26rpx 0 0;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;

		text {
			color: #ff383e;
		}
	}
</style>