H5_module/match/sign/sign.vue

<template>
	<view :style="[mainStyle]">
		<view class="top" v-if="detail">
			<view class="ddflex">
				<image :src="detail.pic" mode="aspectFill" class="act-img"></image>
				<view class="fflex">
					<view class="title tovers">{{detail.title}}</view>
					<view class="sta">
						<view class="area fflex ddflex">
							<image src="../static/images/sjico.png"></image>
							<view class="tover fflex">{{ getTimeText(detail.startTime,detail.endTime,true) }}</view>
						</view>
						<view class="ddflex" style="margin-top: 10rpx;">
							<view class="area fflex ddflex" v-if="detail.address">
								<image src="../static/images/dzico.png"></image>
								<view class="tover fflex">{{detail.address}}</view>
							</view>
							<!-- <view class="money" v-if="userinfovip.levelGrade>0&& !userinfovip.end">￥{{detail.vipMoney}}</view> -->
							<view class="money"><block v-if="price > 0">￥</block>{{price > 0 ? price : '免费'}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="step == 1">
			<view class="info">
				<view class="tit ddflex">
					<view class="fflex">报名信息<text style="color: #999;" v-if="options.personCount && price > 0">（最多添加{{options.personCount}}名人员）</text></view>
					<text>{{personList.length}}人</text>
				</view>
				<view class="add" @click="addSign()">+ 添加报名人</view>
				<view class="list">
					<view class="li ddflex" v-for="(item,index) in personList" :key="index">
						<image src="../static/images/userimg.png" mode="aspectFill" class="user"></image>
						<view class="fflex">
						<block v-for="it,idx in item" :key="idx">
						<block v-if="it.code == 'name'">{{it.value}}</block>
						<text v-if="it.code == 'phone'">{{it.value}}</text>
						</block>
						</view>
						<image src="../static/images/jian.png" class="jian" @click="delPerson(index)"></image>
					</view>
				</view>
			</view>
			<view class="btn" @click="jumpStep(2)">下一步</view>
			<!-- <view class="btn" @click="jumpUrl('/match/signConfirm/signConfirm?id=' + detail.id + '&priceId=' + options.priceId)">下一步</view> -->
		</block>
		<block v-else>
			<view class="lists">
				<view class="li active" v-for="item,index in personPramas" :key="index">
					<view class="li-top ddflex">
						<view class="fflex">
							<block v-for="it,idx in item.child" :key="idx">
							<view class="name" v-if="it.code == 'name'">{{it.value}}</view>
							<view class="phone" v-if="it.code == 'phone'">{{it.value}}</view>
							</block>
						</view>
						<view :class="'li-opt ddflex'+(item.isShowChild ? ' active':'')" @click="showChild(index)">{{item.isShowChild ? '收起':'展开'}}<image src="../../static/pages/images/more.png" class="rico"></image></view>
					</view>
					<view class="li-bot" v-if="item.isShowChild">
						<block v-for="it,idx in item.child" :key="idx">
						<view class="lis ddflex" v-if="it.code != 'name' && it.code != 'phone'">
							<view class="fflex">{{it.title}}</view>
							<view v-if="it.code == 'sex'">{{it.value ? item.value == 1 ? '男' : '女' : '--'}}</view>
							<view v-else>{{it.value ? it.value : '--'}}</view>
						</view>
						</block>
					</view>
				</view>
			</view>
			<!-- <view class="list">
				<view class="li ddflex" v-for="(item,index) in personList" :key="index">
					<view class="fflex">{{item.name}}</view>
					<text>{{item.phone}}</text>
				</view>
			</view> -->
			<view class="ming">
				<view class="tits-step2">活动说明</view>
				<view class="tips">
					<view>1、本活动由主办方处理退款事宜</view>
					<view>2、如需退款，请联系团长或客服</view>
				</view>
			</view>
			<view class="bot ddflex">
				<block v-if="money > 0">
				<view class="heji fflex">合计：<text class="yuan">￥</text><text>{{money}}</text></view>
				<view class="back-step" @click="jumpStep(1)">上一步</view>
				<view class="btn-step2" @click="createEnlist()">提交报名</view><!-- 原来的方法pay() -->
				</block>
				<block v-else>
				<view class="back-step" @click="jumpStep(1)">上一步</view>
				<view class="btn-step2 fflex" @click="createEnlist()">提交报名</view>
				</block>
			</view>
		</block>
		<!-- 添加报名信息 -->
		<view class="ceng" v-if="isAdd"></view>
		<view class="popup" v-if="isAdd">
			<view class="tits">姓名</view>
			<input placeholder="请输入真实姓名" placeholder-class="placeholder" class="ipt" @input="intName" />
			<view class="tits">手机号码</view>
			<input placeholder="请输入手机号码" placeholder-class="placeholder" class="ipt" @input="intPhone" />
			<view class="pop-btn ddflex">
				<view class="cancel" @click="cancel()">取消</view>
				<view class="save" @click="save()">保存</view>
			</view>
		</view>
	</view>
</template>

<script>
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
const requsetmessage = require('../../utils/requestmessage.js');
const app = getApp();
export default {
	components: {
	},
	data() {
		return {
			mainStyle: app.globalData.mainStyle,
			isShow: false,
			options: {},
			detail: '',
			isAdd: false,
			personList: [],
			personPramas: [],
			name: '',
			phone: '',
			userinfovip: {},
			price: 0,
			
			step: 1,
			money: 0
		};
	},
	onLoad(options) {
		this.options = options;
		// if(req.getStorage('personList')){
		// 	this.personList = req.getStorage('personList')
		// }
		// if(req.getStorage('personPramas')) {
		// 	this.personPramas = req.getStorage('personPramas');
		// }
	},
	onShow() {
		this.price = req.getStorage('actPrice');
		this.getData(false);
		// this.getuserVip();
		console.log('personList==',this.personList)
	},
	onUnload() {
	},
	methods: {
		getTimeText(startTime,endTime,isText){
			return util.getTimeText(startTime,endTime,isText);
		},
		getData(isShow){
			req.getRequest('/api/match/detail',{id: this.options.id},res => {
				this.detail = res;
				this.isShow = true;
			},isShow);
		},
		getuserVip() {
			req.getRequest('/api/user/levelDetails', {}, data => {
				let expireTime = Array;
				if (data.expireTime) {
					expireTime = data.expireTime.split(" ");
					data.expireTime = data.expireTime.replace(/-/g, '/');
				} // 解决苹果不兼容---日期
				let nowTime = new Date().getTime();
				let endTime = new Date(data.expireTime).getTime();
				let times = parseInt((endTime - nowTime) / 1000); // var expireTime= new Date(data.expireTime)
				// console.log(times, nowTime, endTime, data.expireTime);
				this.userinfovip = data;
				if (times <= 0) {
					this.userinfovip.end = true;
				} else {
					this.userinfovip.end = false;
				}
			});
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		jumpUrl(url){
			if(this.personList && this.personList.length < 1) return req.msg('请添加报名人员');
			if(this.price > 0 && this.personList.length > this.options.personCount) return req.msg('最多添加' + this.options.personCount + '名人员')
			req.setStorage('personList',this.personList);
			// req.setStorage('personPramas',this.personPramas);
			uni.navigateTo({
				url: url
			})
		},
		addSign(){
			if(this.price > 0 && this.personList.length >= this.options.personCount) return req.msg('最多添加' + this.options.personCount + '名人员')
			req.setStorage('personList',this.personList);
			// req.setStorage('personPramas',this.personPramas);
			uni.navigateTo({
				url: '/match/form/index'
			})
			// this.isAdd = true;
		},
		cancel(){
			this.isAdd = false;
		},
		intName(e) {
			this.name = e.detail.value;
		},
		intPhone(e) {
			this.phone = e.detail.value;
		},
		save(){
			if(!this.name)  return req.msg('请填写报名人员姓名');
			if(!this.phone)  return req.msg('请填写报名人员手机号码');
			if(!util.isMobile(this.phone)) return req.msg('请填写正确的手机号码')
			let personList = this.personList;
			let arr = {
				name: this.name,
				phone: this.phone
			}
			this.personList = personList.concat(arr);
			req.setStorage('personList',this.personList)
			this.isAdd = false;
		},
		delPerson(index){
			// let cur;
			// this.personList.map((it,idx)=>{
			// 	if(index == idx) cur = it;
			// })
			// console.log('cur===',cur)
			this.personList.splice(index,1);
			// this.personPramas.map((it,idx)=>{
			// 	it.map(its=>{
			// 		if(cur[its.code] == its.value) this.personPramas.splice(idx,1)
			// 	})
			// })
			req.setStorage('personList',this.personList)
			// req.setStorage('personPramas',this.personPramas)
			this.$forceUpdate();
		},
		
		jumpStep(step){
			if(step == 2){
				if(this.personList && this.personList.length < 1) return req.msg('请添加报名人员');
				if(this.price > 0 && this.personList.length > this.options.personCount) return req.msg('最多添加' + this.options.personCount + '名人员')
				this.step = 2;
				let arr = [];
				this.personList.map(it=>{
					let obj = {
						isShowChild: false,
						child: it
					}
					arr.push(obj);
				})
				this.personPramas = arr;
				this.money = req.getStorage('actPrice');
			}else{
				this.step = 1;
			}
		},
		showChild(index){
			if(this.personPramas[index].isShowChild){
				this.personPramas[index].isShowChild = false;
			}else{
				console.log('未展开')
				this.personPramas.map((it,idx)=>{
					if(index == idx) it.isShowChild = true;
					else it.isShowChild = false;
					return it;
				})
			}
			this.$forceUpdate();
		},
		async createEnlist(){
			let pa = {
				matchId: this.detail.id,
				money: this.money,
				id: this.options.priceId
			}
			pa.params = JSON.stringify(this.personList);
			// #ifdef MP-WEIXIN
			await requsetmessage.remindActivity().then(res => {});
			// #endif
			req.postRequest(api.enlist_create,pa,async res=>{
				this.enlistLaunchCrowd(res);
			})
		},
		enlistLaunchCrowd(enlistId){
			let pa = {
				enlistId: enlistId,
				type: 2
			}
			req.postRequest(api.enlist_launchCrowd,pa,async data=>{
				await this.payOrder(data)
			})
		},
		payOrder(id){
			req.payOrders(id,success =>{
				uni.redirectTo({
					url: '/match/success/success?id=' + this.detail.id
				})
			})
		},
	}
};
</script>
<style>page{background: #F6F6F6;}</style>
<style>
	@import "./sign.css";
</style>