spark-student/pagesMain/openMember.vue

<template>
	<view class="content">
		<template v-if="memberCardList.length">
			<view class="card-list" v-for="(item,index) in memberCardList" :key="index">
				<view class="card-label" style="height:20rpx;">卡名: {{item.cardName}}</view>
				<view class="card-label" style="height:20rpx;">类型: {{item.typeValue}}</view>
				<view class="card-label">使用时间: {{ item.startDate }}~{{ item.endDate }}</view>
				<view class="card-num">￥{{ item.sellingPrice }}</view>
				<view class="card-icon iconfont iconzu4931"></view>
			</view>
		</template>
		<u-form :model="form" label-width="140" style="width: 100%; float: left;">
	<!-- 		<u-form-item label="选择场馆" :right-icon="venueEdit ? 'arrow-right' : ''" required @click.native="venueShow = venueEdit ? true : false">
				<text>{{venueName}}</text>
			</u-form-item> -->
		<!-- 	<u-form-item label="使用时间">
				<text>{{memberInfo.startDate + '~' + memberInfo.endDate}}</text>
			</u-form-item> -->
			<u-form-item label="学员姓名" :right-icon="studentEdit ? 'arrow-right' : ''" required @click.native="studentShow = studentEdit ? true : false">
				<text>{{studentName}}</text>
			</u-form-item>
			<u-form-item label="优惠金额" right-icon="arrow-right" @click.native="handleCouponClick">
				<!-- <text>{{couponId ? '-￥' + memberInfo.discountsAmount : ''}}</text> -->
				<text>{{  discountsAmount || 0 }}</text>
			</u-form-item>
			<u-form-item label="实际金额">
				<!-- <text>{{'￥' + (memberInfo.realPayAmount ? memberInfo.realPayAmount : 0)}}</text> -->
				<text> {{ '￥' + ( discountsAmount ? getRealPrice : realPayAmount ) }}</text>
			</u-form-item>
			<u-form-item label="家长名称" required>
				<u-input v-model="form.parentName" placeholder="请输入家长姓名" />
			</u-form-item>
	<!-- 		<u-form-item label="家长性别" prop="sex" required right-icon="arrow-right" @click.native="sexShow = true">
				<text>{{form.sex}}</text>
			</u-form-item> -->
		</u-form>
		<view class="handle-fix-box">
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="toPay()">确定支付￥{{ discountsAmount ? getRealPrice : realPayAmount }}</u-button>
		</view>
		<!-- 学员 -->
		<u-popup v-model="studentShow" mode="bottom" border-radius="30">
			<scroll-view scroll-y class="student-box">
				<u-card :head-border-bottom="false" :show-foot="false"
				 margin="10px" borderRadius="20" v-for="(item, index) in studentList" :key="index" @click="selectStudent(item)">
					<view slot="head" :style="cardStyle">
						<span style="font-size: 36rpx;">{{ item.studentName }}</span>
						<span v-if="item.headNum == -1" class="class-info-text" style="color:red;margin-left:10px;">资料不全</span><!--  -->
					</view>
					<view class="student-card" slot="body" style="display: flex;justify-content: space-between;">
						<view class="class-info-text">性别：{{item.sex}}&nbsp;&nbsp;年龄：{{item.age}}</view>
						<u-button type="warning" :custom-style="{background: mainColor}" size="mini" shape="circle" :ripple="true"  @click="handleUpdateClassClick(item)">修改</u-button>
					</view>
				</u-card>
			</scroll-view>
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="{...customStyle,margin:'15px',float: 'left',width: 'calc(100% - 30px)'}"
			 @click="goToSubscribelForm()">新增学员</u-button>
		</u-popup>
		<!-- 优惠券 -->
		<u-popup v-model="couponShow" mode="bottom" border-radius="30">
			<scroll-view scroll-y style="height:300px;margin: 30px 0 15px 0;">
				<template v-if="couponList.length">
					<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" v-if="item.discountType==3">{{item.name}}&nbsp;&nbsp;课时{{item.discountNum}}</view>
								<view class="class-info-label" v-else>{{item.name}}￥{{item.money}}</view>
								<view class="class-info-text">{{item.content}}</view>
								<view class="class-info-text">{{item.endDate}}&nbsp;&nbsp;到期</view>
							</view>
						</view>
					</u-card>
				</template>
				<template v-else>
					<u-empty mode="coupon"></u-empty>
				</template>
			</scroll-view>
		</u-popup>
		<!-- 场馆(废弃) -->
		<u-popup v-model="venueShow" 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 venueList" :key="index" @click="selectVenue(item)">
					<view class="student-card" slot="body">
						<view class="class-info-text">{{item.venueName}}</view>
					</view>
				</u-card>
			</scroll-view>
		</u-popup>
		<u-action-sheet :list="sexList" v-model="sexShow" @click="setSex"></u-action-sheet>
		<u-top-tips ref="uTips" z-index="11000"></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',
			]),
			getRealPrice() {
				if(this.discountsAmount==0){
					return this.realPayAmount
				}
				if(this.discountsAmount.indexOf("课时")>-1){
					return this.realPayAmount
				}else{
					return this.realPayAmount - Number(this.discountsAmount.replace("￥",''))
				}
			},
		},
		data() {
			return {
				cardIds: "",
				memberCardType: '',
				memberCardList: [],
				// 优惠金额
				discountsAmount: 0,
				// 实际金额
				realPayAmount: 0,
				memberInfo: {
					id: '',
					originalAmount: '',
					discountsAmount: '',
					realPayAmount: '',
					typeValue: '',
					endDate: '',
					startDate: '',
				},
				venueEdit: true,
				venueId: '',
				venueName: '',
				venueShow: false,
				venueList: [],
				couponId: '',
				couponShow: false,
				couponList: [],
				cardStyle: {
					fontWeight: 'bold'
				},
				studentEdit: true,
				// 选中的学员
				studentId: '',
				// 选中的学员名字
				studentName: '',
				studentShow: false,
				studentList: [],
				form: {
					parentName: '',
					sex: '',
				},
				sexShow: false,
				sexList: [{
						text: '男'
					},
					{
						text: '女'
					}
				],
			}
		},
		onLoad(options) {
			this.memberCardList = JSON.parse(decodeURIComponent(options.cardinfo))
			this.cardIds = this.memberCardList.map(item => { return item.id }).join(',')
			console.log(this.cardIds);
			// 计算实际金额
			let price = 0
			this.memberCardList.map(item => { return item.sellingPrice }).forEach(item => {
				price += item
			})
			this.realPayAmount = price
			this.memberInfo.realPayAmount = price
			// this.getMemberInfo(1)
			// if (options.venueId) {
			// 	this.venueEdit = false
			// 	this.venueId = options.venueId
			// 	this.venueName = options.venueName
			// }
			// if (options.studentId) {
			// 	this.studentEdit = false
			// 	this.studentId = options.studentId
			// 	this.studentName = options.studentName
			// }
			// this.memberCardType = options.memberCardType
			// if (this.venueId) {
			// 	this.getMemberInfo(1)
			// } else {
			// 	this.memberInfo.typeValue = options.typeValue
			// }
		},
		onShow() {
			// 场馆信息
			// NET.request(API.getAllVenueList, uni.getStorageSync('locationData'), 'POST').then(res => {
			// 	this.venueList = res.data
			// }).catch(error => {
			// 	this.$refs.uTips.show({
			// 		title: error.message,
			// 		type: 'warning',
			// 	})
			// })
			NET.request(API.getAllStudentList, {}, 'POST').then(res => {
				this.studentList = res.data
			}).catch(error => {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			})
			// 家长信息
			// NET.request(API.getParentInfo, {}, 'POST').then(res => {
			// 	this.form.parentName = res.data.parentName
			// 	this.form.sex = res.data.sex
			// }).catch(error => {
			// 	this.$refs.uTips.show({
			// 		title: error.message,
			// 		type: 'warning',
			// 	})
			// })
		},
		methods: {
			//  获取数据
			getMemberInfo(type) {
				NET.request(API.getMemberCardInfo, {
					type: this.memberCardType,
					venueId: this.venueId,
					couponId: this.couponId,
					studentId: this.studentId
				}, 'POST').then(res => {
					this.memberInfo = res.data
					if (type == 1) {
						this.getCouponList()
					}
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
					this.venueId = ''
					this.venueName = ''
					this.memberInfo = {
						id: '',
						originalAmount: '',
						discountsAmount: '',
						realPayAmount: '',
						typeValue: this.memberInfo.typeValue,
						endDate: '',
						startDate: '',
					}
				})
			},
			//  获取优惠券
			getCouponList() {
				// this.couponId = ''
				// 仅显示能使用的优惠券 
				const ids = this.memberCardList.map(item => { return item.id })
				NET.request(API.getUsableCouponList, {
					ids: ids,
					studentId: this.studentId
				}, 'POST').then(res => {
					this.couponList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  选择优惠券
			handleCouponClick() {
				// 是否选择了学生
				if(!this.studentId) {
					this.$refs.uTips.show({
						title: '请先选择学员~',
						type: 'warning',
					})
					return
				}
				//  选择一种卡,显示满减券和赠课券;多种卡,只显示满减券    
				//   discountType 1和2  满减券  3和4 赠课券
				if(this.memberCardList.length > 1) {
					this.couponList = Object.assign([],this.couponList.filter(item => item.discountType < 3))
				}
				this.couponShow = true
			},
			// 选择优惠券
			selectCoupon(item) {
				this.couponId = item.id
				if(item.discountType==3){
					this.discountsAmount = "课时"+item.discountNum
				}else{
					this.discountsAmount = "￥"+item.money
				}
				this.couponShow = false
				// this.getMemberInfo(2)
			},
			// 选择场馆
			selectVenue(item) {
				this.venueId = item.id
				this.venueName = item.venueName
				this.venueShow = false
				this.getMemberInfo(1)
			},
			// 选择学员
			selectStudent(item) {
				if(item.headNum == -1) {
					this.$refs.uTips.show({
						title: '将资料填全,才能选择',
						type: 'warning',
					})
					return
				}
				this.studentId = item.studentId
				this.studentName = item.studentName
				this.studentShow = false
				this.form.sex = item.sex
				// this.couponId = ''
				// this.getMemberInfo(1)
				this.getCouponList()
			},
			//  设置性别
			setSex(index) {
				this.form.sex = this.sexList[index].text
			},
			// 修改学员信息
			handleUpdateClassClick(item) {
				uni.navigateTo({
					url: '/pagesMember/subscribelForm?info=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			//  支付
			toPay(contractId) {
				if (!this.studentId) {
					this.$refs.uTips.show({
						title: '请选择学员',
						type: 'warning',
					})
					return
				}
				if (!this.form.parentName) {
					this.$refs.uTips.show({
						title: '请输入家长姓名',
						type: 'warning',
					})
					return
				}
				if (!this.form.sex) {
					this.$refs.uTips.show({
						title: '请选择性别',
						type: 'warning',
					})
					return
				}
				uni.navigateTo({
					url: '/pagesMain/contractInfo?memberCardId=' + this.cardIds + '&couponId=' + this.couponId + '&studentId=' +
						this.studentId + '&realPayAmount=' + this.memberInfo.realPayAmount + '&parentName=' + this.form.parentName +
						'&sex=' + this.form.sex
				});
			},
			//  跳转支付结果
			goToPayResult(oderNo) {
				uni.redirectTo({
					url: '/pagesMain/payResult?id=' + oderNo
				});
			},
			//  跳转新增学员表单
			goToSubscribelForm() {
				uni.navigateTo({
					url: '/pagesMember/subscribelForm'
				});
			},
		},
	}
</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;
		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: 14px;
				// font-weight: bold;
				// line-height: 20px;
			}

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

			.card-icon {
				font-size: 100px;
				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;
				margin-bottom: 5px;
			}

			.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;
			height: 60px;
			text-align: center;

			.contract-link {
				color: $mainColor;
				line-height: 25px;
			}
		}
	}
</style>