H5_module/match/activityDet/activityDet.vue

<template>
	<view :style="[mainStyle]" v-if="isShow">
		<view class="top">
			<view class="tops 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"><text v-if="detail.money >0">￥</text>{{detail.money >0 ?detail.money:'免费'}}</view>
					</view>
				</view>
			</view>
			<block v-if="detail.actualMoney > 0">
			<view class="piao ddflex">
				<view class="fflex">总计</view>
				<view class="num">x{{detail.enlistExtendDTOS.length}}</view>
				<view class="money"><text>￥</text>{{detail.actualMoney}}</view>
			</view>
			<view class="piao ddflex">
				<view class="fflex">实付款</view>
				<view class="money"><text>￥</text>{{detail.actualMoney}}</view>
			</view>
			</block>
		</view>
		<view class="infos bgfff">
			<view class="tits">报名信息</view>
			<view class="li ddflex">
				<label>当前状态</label>
				<view class="flex" v-if="detail.enlistState == 0">未付款</view>
				<view class="flex" v-else>{{detail.state == 2 ? '报名成功' : '报名失败'}}</view>
			</view>
			<view class="li ddflex">
				<label>活动时间</label>
				<view class="flex">{{ getTimeText(detail.startTime,detail.endTime,true) }}</view>
			</view>
			<view class="li ats ddflex" v-if="detail.address">
				<label>活动地址</label>
				<view class="flex">{{detail.address}}</view>
			</view>
			<view class="li ats ddflex">
				<label>报名人员</label>
				<view class="flex">
					<view class="lis" v-for="(item,index) in detail.enlistExtendDTOS">
					<block v-for="(it,idx) in JSON.parse(item.params)" :key="idx">
					<block v-if="it.code == 'name'">{{it.value}}</block>
					<text v-if="it.code == 'phone'">{{it.value}}</text>
					</block>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="infos bgfff">
			<view class="tits">订单信息</view>
			<view class="li ddflex">
				<label>订单编号</label>
				<view class="flex">{{detail.orderId}}</view>
			</view>
			<view class="li ddflex">
				<label>支付时间</label>
				<view class="flex">{{detail.createDate}}</view>
			</view>
		</view> -->
		<view class="btn" v-if="detail.enlistState == 0" @click="againPay(options.id)">立即付款</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: [],
			name: '',
			phone: ''
		};
	},
	onLoad(options) {
		this.options = options;
		if(req.getStorage('personList')){
			this.personList = req.getStorage('personList')
		}
	},
	onShow() {
		this.getData(true);
	},
	methods: {
		getTimeText(startTime,endTime,isText){
			return util.getTimeText(startTime,endTime,isText);
		},
		getData(isShow){
			req.getRequest('/api/match/enlist/detailV2',{id: this.options.id},res => {
				this.detail = res;
				this.isShow = true;
			},isShow);
		},
		formatTimeCommStr(dataStr) {
			return util.formatTimeCommStr(dataStr, 'M/D');
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		},
		againPay(id){
			let pa = {
				id: id
			}
			req.postRequest(api.enlist_again_pay,pa,data=>{
				this.payOrder(data);
			})
		},
		async payOrder(id){
			// #ifdef MP-WEIXIN
			await requsetmessage.remindActivity().then(res => {});
			// #endif
			req.payOrders(id,success =>{
				this.getData();
			})
		}
	}
};
</script>

<style>page{background-color: #f6f6f6}</style>
<style>
	@import "./activityDet.css";
</style>