H5_module/match/activityDetail/activityDetail - 副本.vue

<template>
	<view v-if="isShow">
		<view class="top">
			<image :src="detail.pic" mode="scaleToFill" class="act-img"></image>
			<!-- <view class="title">{{detail.title}}</view>
			<view class="datas">浏览 {{browse}}</view>
			<view class="money free" v-if="userinfovip.levelGrade>0&& !userinfovip.end">￥{{detail.vipMoney}}</view>
			<view class="money free" v-else>￥{{detail.money}}</view> -->
		</view>
		<!-- <view class="date">
			<view class="datass">
				<view class="ddflex"><image src="../static/images/sjico.png" class="dimg"></image>报名时间：</view>
				<view>{{detail.enlistStartTime}} - {{detail.enlistEndTime}}</view>
			</view>
			<view class="datass ddflex">
				<view class="ddflex"><image src="../static/images/sjico.png" class="dimg"></image>活动时间：</view>
				<view>{{detail.startTime}} - {{detail.endTime}}</view>
			</view>
			<view class="datass ddflex" v-if="detail.address" @click="openMap()">
				<image src="../static/images/dzico1.png" class="dimg"></image>
				<view class="fflex">{{detail.address}}</view>
				<image src="../../static/pages/images/crico1.png" class="rico"></image>
			</view>
		</view> -->
		<view class="form">
			<view class="form-title"><view>免费报名</view></view>
			<view class="form-list">
				<view class="li">
					<view class="label">您的姓名</view>
					<input placeholder="请输入您的姓名" placeholder-class="placeholder" class="ipt fflex" />
				</view>
				<view class="li">
					<view class="label">您的电话</view>
					<input placeholder="请输入您的电话号码" placeholder-class="placeholder" class="ipt fflex" />
				</view>
				<view class="li">
					<view class="label">您的问题</view>
					<textarea placeholder="请输入您的问题" placeholder-class="placeholder" class="textarea fflex"></textarea>
				</view>
			</view>
			<view class="form-btn" @click="formSubmit()">立即报名</view>
		</view>
		<view class="det">
			<view class="det-tip">
				<view>1.活动期间报名成功后即可参加活动</view>
				<view>2.本次活动最终解释权归活动主办方所有</view>
			</view>
			<view class="content">
				<mp-html :content="detail.text" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
		</view>
		<!-- <view class="bot fixed bgfff ddflex">
			<view class="btnfot ddflex">
				<navigator class="botbtn" open-type="switchTab" url="/pages/index/index" hover-class="none">
					<image src="/static/pages/images/sy.png"></image>主页
				</navigator>
				<button open-type="share" class="botbtn">
					<image src="../../static/pages/images/fxico1_1.png"></image>分享
				</button>
			</view>
			<view class="btns" v-if="!isIos">
				<view class="btn" @click="jumpUrl('/mine/activity/activity')" v-if="detail.isEnlist">查看报名</view>
				<block v-else>
					<view class="btn" @click="showPop()" v-if="detail.state == 2">立即报名</view>
					<view class="btn" v-if="detail.state == 3">报名结束</view>
					<view class="btn" v-if="detail.state == 4">活动中</view>
					<view class="btn end" v-if="detail.state == 5">活动结束</view>
				</block>
			</view>
			<view class="btns" v-else>
				<view class="btn">立即报名</view>
			</view>
		</view>
		<view class="ceng" v-if="popShow" @click="hidePop()"></view>
		<view class="popup" v-if="popShow">
			<image src="../../static/pages/images/clear.png" class="close" @click="hidePop()"></image>
			<view class="p-title">{{detail.title}}</view>
			<view class="p-bri tovers">{{detail.brief}}</view>
			<view class="money free"><text>￥</text>{{price}}</view>
			<view class="pop-tit">报名项目</view>
			<view class="pop-con">
				<view class="p-list ddflex">
					<view :class="'li' + (priceIndex == index ? ' active' : '')" v-for="(item,index) in priceList" :key="index" @click="selProject(item,index)">{{item.title}}</view>
				</view>
			</view>
			<view class="pop-btn" @click="jumpUrl('/match/sign/sign?id=' + detail.id + '&priceId=' + priceId)">马上报名</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();
import mpHtml from "../../components/mp-html/components/mp-html/mp-html";
export default {
	components: {
		mpHtml,
	},
	data() {
		return {
			isShow: false,
			options: {},
			detail: {},
			isLogin: false,
			userinfovip: {},
			isIos: false,
			priceIndex: 0,
			priceList: [],
			popShow: false,
			priceId: '',
			price: 0,
			browse: 0
		};
	},
	onLoad(options) {
		if(options.appId) req.setStorage('appId',options.appId);
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.options = options;
	},
	async onShow() {
		this.isLogin = req.isAuth();
		await this.getConfig();
		await this.getData(true);
		if(this.isLogin){
			await this.getuserVip();
		}
		this.getBrowse();
		await this.getPrice();
	},
	onReachBottom: function() {
	},
	onShareAppMessage: function() {
		let path = '';
		let isSolution = req.env[req.env.NODE_ENV].isSolution;
		let userInfo = req.getStorage('userInfo');
		if(isSolution){
			path = '/share/home/index?appId='+req.getStorage('appId')+'&userId='+userInfo.id;
		}else{
			path = '/match/activityDetail/activityDetail?id=' + this.detail.id;
		}
		return {
			title: this.detail.title,
			imageUrl: this.detail.pic,
			path: path
		};
	},
	onShareTimeline() {
		let query = {
			id: this.detail.id,
			appId: req.getStorage('appId')
		}
		return {
			title: this.detail.title,
			imageUrl: this.detail.pic,
			query: query
		};
	},
	methods: {
		getConfig() {
			var _this = this;
			return new Promise((resolve, reject) => {
				req.getRequest('/api/config', {}, function(res) {
					_this.about = res;
					_this.getSystem();
					resolve();
				});
			});
		},
		getSystem(){
			if(uni.getSystemInfoSync().platform == 'ios'){
				if(this.about.is_open_iosPay == 1){
					this.isIos = false;
				}else{
					this.isIos = true;
				}
			}else{
				this.isIos = false;
			}
		},
		openMap(){
			let that = this;
			console.log('打开地图')
			uni.openLocation({
				latitude: Number(that.detail.lat),
				longitude: Number(that.detail.lng),
				address: that.detail.address,
				success: function () {
					console.log('success');
				},
				fail(res){
					console.log('fail=='+JSON.stringify(res))
				}
			})
		},
		getData(isShow){
			return new Promise((resolve, reject) => {
				req.getRequest('/api/match/detail',{id: this.options.id},res => {
					this.detail = res;
					this.isShow = true;
					resolve();
				},isShow);
			})
		},
		getPrice(){
			return new Promise((resolve, reject) => {
				req.getRequest('/api/match/price',{id: this.options.id},res=>{
					this.priceList = res;
					this.priceId = res[0].id;
					let price = 0;
					if(this.userinfovip.levelGrade>0&& !this.userinfovip.end){
						price = res[0].vipMoney;
					}else{
						price = res[0].money;
					}
					this.price = price;
					req.setStorage('actPrice',price)
					resolve();
				})
			})
		},
		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();
			})
		},
		formatTimeCommStr(dataStr) {
			return util.formatTimeCommStr(dataStr, 'M/D 00:00');
		},
		getBrowse(){
			let params={
				behavior: 4,
				bindId: this.options.id,
				type: 2
			}
			req.saveBehavior(params,data=>{})
			req.getBehaviorCount(params,data=>{
				this.browse = data
			})
		},
		toActivity(item){
			uni.navigateTo({
				url: '/match/activityDetail/activityDetail?id=' + item.id
			})
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		clickCollect(){
			req.isLogin().then(success => {
				if(success){
					req.postRequest('/api/collect',{
						bindId: this.detail.id,
						type: 2
					},res=>{
						this.detail.isCollect = !this.detail.isCollect;
					})
				}
			})
		},
		showPop(){
			let that = this;
			if(that.priceList && that.priceList.length == 1){
				that.priceList.map(it=>{
					if(!it.title){
						that.jumpUrl('/match/sign/sign?id=' + that.detail.id + '&priceId=' + it.id);
						let price = 0;
						if(that.userinfovip.levelGrade>0&& !that.userinfovip.end){
							price = it.vipMoney;
						}else{
							price = it.money;
						}
						req.setStorage('actPrice',price)
					}else{
						that.popShow = true;
					}
				})
			}else{
				this.popShow = true;
			}
		},
		hidePop(){
			this.popShow = false;
		},
		selProject(it,idx){
			if(this.priceIndex == idx) return false;
			this.priceIndex = idx;
			this.priceId = it.id;
			console.log('priceId==' + this.priceId)
			let price = 0;
			if(this.userinfovip.levelGrade>0&& !this.userinfovip.end){
				price = it.vipMoney;
			}else{
				price = it.money;
			}
			this.price = price;
			req.setStorage('actPrice',price)
		},
		jumpUrl(url){
			req.isLogin().then(success => {
				if(success){
					uni.navigateTo({
						url: url
					})
				}
			})
			this.hidePop();
		}
	}
};
</script>

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