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="'￥' + memberInfo.realPayAmount" :arrow="false"></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">
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="toPay()">确定支付￥{{memberInfo.realPayAmount}}</u-button>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	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: [],
			}
		},
		onLoad(options) {
			this.memberCardId = options.id
			this.getMemberInfo()
		},
		onReady() {},
		methods: {
			//  获取数据
			getMemberInfo() {
				NET.request(API.getMemberCardInfo, {
					id: this.memberCardId
				}, 'POST').then(res => {
					this.memberInfo = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
				NET.request(API.getUsableCouponList, {
					id: this.memberCardId
				}, 'POST').then(res => {
					this.couponList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  选择优惠券
			selectCoupon(item) {
				this.couponId = item.id
				NET.request(API.getMemberCardInfoAfterCoupon, {
					id: this.memberCardId,
					couponId: this.couponId
				}, 'POST').then(res => {
					this.memberInfo = res.data
					this.couponShow = false
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			//  支付
			toPay() {
				NET.request(API.getPayParams, {
					id: this.memberCardId,
					couponId: this.couponId
				}, 'POST').then(res => {
					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) => {
							uni.redirectTo({
								url: '/pagesMain/payResult?id=' + res.data.oderNo
							});
						},
						fail: (error) => {
							this.$refs.uTips.show({
								title: '支付未成功',
								type: 'warning',
							})
						}
					})
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
		},
	}
</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 60px 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;
			}
		}
	}
</style>