douhuo-h5/pages/empower/buy.vue

<template>
	<view class="content">
		<!-- 课程信息 -->
		<view class="info">
			<image class="info-cover" :src="empower.cover" mode="aspectFill"></image>
			<view class="info-text">
				<view class="info-title">{{empower.title}}</view>
				<view class="info-subtitle">{{empower.sub_title}}</view>
				<view class="info-price"><text>￥</text>{{empower.price}}</view>
			</view>
		</view>
		<!-- 报名信息 -->
		<view class="user-title">报名人</view>
		<view class="user-block" v-for="(item, index) in formData" :key="index">
			<view class="user-block-flex">报名信息{{index + 1}}<view class="user-block-remove" v-if="formData.length > 1" @click="onRemoveUser(index)">删除</view></view>
			<view class="user-block-input">
				<label>真实姓名</label>
				<input placeholder="输入姓名" v-model="item.name" maxlength="10" />
			</view>
			<view class="user-block-input">
				<label>手机号码</label>
				<input placeholder="输入手机号码" v-model="item.mobile" maxlength="11" type="number" />
			</view>
			<view class="user-block-input" v-if="semesters.length > 0">
				<label>选择学期</label>
				<picker mode="selector" :value="item.index" :range="semesters" range-key="title" @change="onChange($event, index, item)">
					<view class="user-block-picker">{{semesters[item.index].title}}<uni-icons class="user-block-icon" type="bottom" size="20" color="#999"></uni-icons></view>
				</picker>
			</view>
		</view>
		<view class="user-add" @click="onAddUser"><uni-icons type="plus" size="24" color="#da2b56"></uni-icons> 添加报名人</view>
		<view class="footer">
			<view class="footer-text">
				<view class="footer-text-price"><text>￥</text>{{allPrice}}</view>
				<view class="footer-text-subtitle">共计{{formData.length}}人报名</view>
			</view>
			<button class="footer-btn" @click="onSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	// ($event) => item.index = $event.detail.value
	import { buyInit, buy } from '@/apis/interfaces/empower.js'
	export default {
		data() {
			return {
				semesters: [],
				formData : [{
					name	: '',
					mobile	: '',
					index	: 0
				}],
				empower	 : {},
				allPrice : '0.00'
			};
		},
		onShow() {
			buyInit(this.$Route.query.id).then(res => {
				let { empower, semesters } = res;
				this.empower   = empower
				this.semesters = semesters
				this.getTotalPrice()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			// 计算价格
			getTotalPrice(){
				let totalPrice = 0
				this.formData.map(val => {
					totalPrice += Number(this.semesters[val.index].price)
				})
				this.allPrice = totalPrice.toFixed(2)
			},
			// 选择学期
			onChange(e, index, item){
				item.index = e.detail.value
				this.$set(this.formData, index, item)
				this.getTotalPrice()
			},
			// 删除用户数据
			onRemoveUser(index){
				this.formData.splice(index,1)
				this.getTotalPrice()
			},
			// 添加新用户
			onAddUser(){
				this.formData.push({
					name	: '',
					mobile	: '',
					index	: 0
				})
				this.getTotalPrice()
			},
			// 提交报名
			onSubmit(){
				let submitData = this.formData.map(val => {
					return {
						name		: val.name,
						mobile		: val.mobile,
						semester_id	: this.semesters[val.index].id
					}
				})
				buy({
					empower_id: this.$Route.query.id,
					data: submitData
				}).then(res => {
					let { order_type, order_id } = res;
					this.$Router.replace({
						name: 'Pay',
						params: {
							orderId		: order_id,
							orderType	: order_type,
						},
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{ background: #f7f8f9; padding: 30rpx 30rpx 210rpx; min-height: calc(100vh - 44px); box-sizing: border-box; }
	// 报名人信息
	.user-title{ padding-top: 30rpx; font-size: 30rpx; line-height: 40rpx; color: gray; }
	.user-block{
		background: white;
		margin-top: 30rpx;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		&-flex{
			display: flex;
			justify-content: space-between;
			height: 90rpx;
			align-items: center;
			font-size: 30rpx;
			color: gray;
			// @extend .border-solid;
		}
		&-remove{ color: $mian-color; line-height: 90rpx; }
		&-input{
			display: flex;
			justify-content: space-between;
			height: 90rpx;
			align-items: center;
			flex-wrap: wrap;
			label{ font-size: 32rpx; width: 200rpx; }
			picker,
			input{ width: calc(100% - 200rpx); font-size: 32rpx; }
			.user-block-picker{
				padding-right: 50rpx;
				box-sizing: border-box;
				position: relative;
				@extend .nowrap;
				.user-block-icon{ position: absolute; right: 0; }
			}
		}
	}
	.user-add{ text-align: center; background: white; border-radius: 20rpx; margin-top: 30rpx; display: flex; align-items: center; height: 120rpx; justify-content: center; color: $mian-color; font-size: 32rpx; }
	// 报名课程信息
	.info{
		display: flex;
		background: white;
		padding: 30rpx;
		border-radius: 20rpx;
		flex-wrap: wrap;
		justify-content: space-between;
		&-cover{ width: 180rpx; height: 180rpx; border-radius: 10rpx; }
		&-text{ width: calc(100% - 210rpx); }
		&-title{ font-size: 38rpx; font-weight: bold; line-height: 50rpx; height: 50rpx; }
		&-subtitle{ line-height: 40rpx; height: 80rpx; font-size: 30rpx; }
		&-price{
			font-weight: bold;
			color: $mian-color;
			font-size: 42rpx;
			font-family: Arial, Helvetica, sans-serif;
			line-height: 50rpx;
			height: 50rpx;
			text{
				font-size: 80%;
				margin-right: 5rpx;
			}
		}
	}
	// 底部
	.footer{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 30rpx 50rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		z-index: 99;
		box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .04);
		background: white;
		.footer-text{
			width: 200rpx;
			&-price{ font-weight: bold; color: $mian-color; font-size: 40rpx; text{ font-size: 80%; margin-right: 5rpx; } }
			&-subtitle{ font-size: 28rpx; color: gray; }
		}
		.footer-btn{
			background: $mian-color;
			color: white;
			line-height: 100rpx;
			border-radius: 50rpx;
			flex: 1;
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			margin-left: 50rpx;
			&::after{ display: none; }
		}
	}
</style>