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"></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-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>
	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: [],
			}
		},
		onLoad(options) {
			this.memberCardId = options.id
			this.getMemberInfo()
		},
		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',
					})
				})
			},
			//  更新数据
			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()
			},
			//  支付
			toPay() {
				if (!this.studentId) {
					this.$refs.uTips.show({
						title: '请选择学员',
						type: 'warning',
					})
					return
				}
				uni.navigateTo({
					url: '/pagesMain/contractInfo?memberCardId=' + this.memberCardId + '&couponId=' + this.couponId + '&studentId=' +
						this.studentId
				});
			},
		},
	}
</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;
			}
		}

		.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;
			}
		}
	}
</style>