renshou/match/signConfirm/signConfirm.vue

<template>
	<view>
		<view class="top">
			<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="time ddflex">
							<image style="width: 21rpx;height: 21rpx;margin-right: 10rpx;" src="../static/images/time.png"></image>
							<text class="flex">{{ detail.enlistStartTime?formatTime(detail.enlistStartTime):'' }}-{{ detail.enlistEndTime?formatTime(detail.enlistEndTime):'' }}</text>
						</view>
						<view  class="time ddflex" style="margin-top: 12rpx;" v-if="detail.address">
							<image style="width: 19rpx;height: 24rpx;margin-right: 10rpx;" src="../static/images/area.png"></image>
							<text class="flex">{{ detail.address?detail.address:'' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="li" v-for="(item,index) in personList" :key="index">
				<view class="ddflex">
					<view class="fflex">{{item.name}}</view>
					<view class="ddflex" style="color: #A1A1A1;font-size: 24rpx;" v-if="item.extend&&item.extend.length>0" @click="openExtend(item)">
						展开
						<image :style="'width: 9rpx;height: 19rpx;margin-left: 10rpx;'+(item.isOpen?'transform: rotate(90deg);':'')" src="/static/pages/images/more.png"></image>
					</view>
				</view>
				<view style="line-height: 42rpx;color: #A1A1A1;">{{item.phone}}</view>
				<view v-if="item.extend&&item.extend.length>0&&item.isOpen">
					<view v-for="it in item.extend">
						<view v-if="it.value" class="ddflex" style="font-size: 24rpx;margin-top: 20rpx;">
							<view style="color: #A1A1A1;margin-right: 24rpx;">{{it.chineseName}}</view>
							<view v-if="it.type==4||it.type==5" class="ddflex">
								<image :src="iit" v-for="iit in it.value.split(',')" style="width: 50rpx;height: 50rpx;margin-right: 10rpx;" mode="aspectFill"></image>
							</view>
							<view v-else style="color: #333333;">{{it.value}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ming">
			<view class="tits">活动说明</view>
			<view class="tips">
				<view>1、本活动由主办方处理退款事宜</view>
				<view>2、如需退款，请联系客服</view>
			</view>
		</view>
		<view class="bot ddflex">
			<!-- <view class="heji">合计：<text class="yuan">￥</text><text>{{money}}</text></view> -->
			<view class="btn flex" @click="pay()">提交报名</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 {
			isShow: false,
			options: {},
			detail: {},
			isAdd: false,
			personList: [],
			money: 0,
			userinfovip: {},
			price: 0
		};
	},
	onLoad(options) {
		this.options = options;
		if(req.getStorage('personList')){
			this.personList = req.getStorage('personList')
		}
	},
	onShow() {
		this.price = req.getStorage('actPrice');
		this.getuserVip();
		this.getData(true);
		this.money = this.personList.length * this.price;
	},
	methods: {
		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;
					// if(that.userinfovip.levelGrade>0&& !that.userinfovip.end){
					// 	that.money = that.personList.length * res.vipMoney;
					// }else{
					// 	that.money = that.personList.length * res.money;
					// }
					resolve();
				},isShow);
			})
		},
		formatTimeCommStr(dataStr) {
			return util.formatTimeCommStr(dataStr, 'M/D');
		},
		getuserVip() {
			return new Promise((resolve,reject)=>{
				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;
					}
					resolve();
				});
			})
		},
		toActivity(item){
			uni.navigateTo({
				url: '/match/activityDetail/activityDetail?id=' + item.id
			})
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		clickCollect(){
			req.postRequest('/api/collect',{
				bindId: this.detail.id,
				type: 2
			},res=>{
				this.detail.isCollect = !this.detail.isCollect;
			})
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		},
		async pay(){
			let param = {
				matchId: this.detail.id,
				money: this.money,
				// matchPriceId: this.options.priceId,
				scene: req.getStorage('scene'),
				list: JSON.stringify(this.personList)
			}
			// await requsetmessage.remindActivity().then(res => {});
			req.getRequest('/api/myMatch/order',param,async res=>{
				req.removeStorage('personList');
				this.jumpUrl('/match/success/success?id=' + this.detail.id)
				// await this.payOrder(res)
			})
		},
		payOrder(id){
			req.payOrders(id,success =>{
				this.jumpUrl('/match/success/success?id=' + this.detail.id)
			})
		},
		openExtend(item){
			item.isOpen = item.isOpen?false:true
			this.personList = JSON.parse(JSON.stringify(this.personList))
		},
		formatTime(date){
			date = new Date(date.replace(/-/g, '/'))
			return util.formatTime(date).t3
		}
	}
};
</script>

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