renshou/match/sign/sign.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="info">
			<view class="tit ddflex">报名信息<text>{{personList.length}}人</text></view>
			<view class="add" @click="addSign()" v-if="!this.about.MATCH_ENLIST_PERSON_LIMIT || (this.about.MATCH_ENLIST_PERSON_LIMIT&&personList.length<this.about.MATCH_ENLIST_PERSON_LIMIT)">+ 添加报名人</view>
			<view class="list">
				<view class="li ddflex" v-for="(item,index) in personList" :key="index" @click="jumpUrl('/match/signPerson/signPerson?index='+(index+1)+'&id='+detail.id)">
					<image src="../../static/pages/images/userimg.png" mode="aspectFill" class="user"></image>
					<view class="fflex">{{item.name}}<text>{{item.phone}}</text></view>
					<image src="../static/images/jian.png" class="jian" @click.stop="delPerson(index)"></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="jumpUrlNext('/match/signConfirm/signConfirm?id=' + detail.id + '&priceId=' + options.priceId)">下一步</view>
		<!-- 添加报名信息 -->
		<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 app = getApp();
export default {
	components: {
	},
	data() {
		return {
			about:{},
			isShow: false,
			options: {},
			detail: {},
			isAdd: false,
			personList: [],
			name: '',
			phone: '',
			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();
		if(req.getStorage('personList')){
			this.personList = req.getStorage('personList')
		}
		this.getData(true);
		this.getConfig()
	},
	methods: {
		getConfig() {
			var _this = this;
			return new Promise((res, rej) => {
				req.g(
					'/api/other/config',
					data => {
						req.setStorage('configRes', JSON.stringify(data));
						this.about = data;
						res(data);
					},
					true
				);
			});
		},
		getData(isShow){
			req.getRequest('/api/match/detail',{id: this.options.id},res => {
				this.detail = res;
				this.isShow = true;
			},isShow);
		},
		formatTimeCommStr(dataStr) {
			return util.formatTimeCommStr(dataStr, 'M/D');
		},
		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;
				}
			});
		},
		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;
			})
		},
		jumpUrlNext(url){
			if(this.personList && this.personList.length < 1) return req.msg('请添加报名人员');
			uni.navigateTo({
				url: url
			})
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		},
		addSign(){
			// this.isAdd = true;
			uni.navigateTo({
				url: '/match/signPerson/signPerson?id='+this.detail.id
			})
		},
		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){
			this.personList.splice(index,1)
			req.setStorage('personList',this.personList)
		},
		formatTime(date){
			date = new Date(date.replace(/-/g, '/'))
			return util.formatTime(date).t3
		}
	}
};
</script>

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