H5_module/match/signConfirm/signConfirm.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="area fflex ddflex">
						<image src="../static/images/sjico.png"></image>
						<view class="tover fflex">{{ getTimeText(detail.startTime,detail.endTime,true) }}</view>
					</view>
					<view class="sta 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 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">活动说明</view>
			<view class="tips">
				<view>1、本活动由主办方处理退款事宜</view>
				<view>2、如需退款，请联系团长或客服</view>
			</view>
		</view>
		<view class="bot ddflex">
			<block v-if="money > 0">
			<view class="heji">合计：<text class="yuan">￥</text><text>{{money}}</text></view>
			<view class="btn" @click="createEnlist()">提交报名</view><!-- 原来的方法pay() -->
			</block>
			<view class="btn fflex" @click="createEnlist()" v-else>提交报名</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: [],
			money: 0,
			userinfovip: {},
			price: 0
		};
	},
	onLoad(options) {
		this.options = options;
		if(req.getStorage('personList')){
			let personList = req.getStorage('personList');
			let arr = []
			personList.map(it=>{
				let obj = {
					isShowChild: false,
					child: it
				}
				arr.push(obj);
			})
			this.personList = personList;
			this.personPramas = arr;
		}
		// if(req.getStorage('personPramas')) {
		// 	let personPramas = req.getStorage('personPramas');
		// 	personPramas.map(it=>{
		// 		it.isShowChild = false;
		// 		it.child = it;
		// 		return it;
		// 	})
		// 	this.personPramas = personPramas;
		// }
		console.log('personList==',this.personList)
	},
	onShow() {
		this.price = req.getStorage('actPrice');
		this.getData(false);
		// this.money = this.personList.length * this.price;
		this.money = this.price;
	},
	methods: {
		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();
		},
		getTimeText(startTime,endTime,isText){
			return util.getTimeText(startTime,endTime,isText);
		},
		getData(isShow){
			let that = this;
			return new Promise((resolve,reject)=>{
				req.getRequest('/api/match/detail',{id: this.options.id},res => {
					that.detail = res;
					that.isShow = true;
					resolve();
				},isShow);
			})
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		},
		async pay(){
			let arryNew = [];
		    this.personList.map((item, index) => {
			   arryNew.push(Object.assign({}, item, { phone: item.mobile }));
			   return arryNew;
		    });
			for(let key in arryNew){
				delete arryNew[key].mobile;
			}
			let param = {
				// matchId: this.detail.id,
				money: this.money,
				matchPriceId: this.options.priceId,
				list: JSON.stringify(arryNew)
			}
			if(req.getStorage('scene')) param.scene = req.getStorage('scene');
			// #ifdef MP-WEIXIN
			await requsetmessage.remindActivity().then(res => {});
			// #endif
			req.postRequest('api/myMatch/order',param,async res=>{
				await this.payOrder(res)
			})
		},
		payOrder(id){
			req.payOrders(id,success =>{
				let dataP = {
					id: this.detail.id
				}
				uni.$emit( 'em.close.page', dataP);
				uni.navigateBack()
				// console.log('success==',success)
				// uni.navigateBack({
				//   delta: 1
				// })
				// uni.redirectTo({
				// 	url: '/match/success/success?id=' + this.detail.id
				// })
			})
		},
		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)
			})
		},
	}
};
</script>

<style>
	@import "./signConfirm.css";
</style>