renshou/match/activityDetail/activityDetail.vue

<template>
	<view v-if="isShow">
		<view class="top">
			<image :src="detail.pic" mode="aspectFill" class="act-img"></image>
			<view class="title">{{detail.title}}</view>
			<!-- <view class="datas">浏览 {{detail.browse}}</view> -->
			
			<view class="money-box ddflex">
				<!-- <view class="ddflex">
					<image src="../static/images/bmfy.png"></image>
					<text>报名费用</text>
				</view> -->
				<view>
					<view class="money free" v-if="userinfovip.levelGrade>0&& !userinfovip.end">{{detail.vipMoney!=0?('￥'+detail.vipMoney):'免费'}}</view>
					<view class="money free" v-else>{{detail.money!=0?('￥'+detail.money):'免费'}}</view>
				</view>
			</view>
			
			<view class="baoming-box">
				<view class="ddflex">
					<image src="../static/images/bmsj.png"></image>
					<text>报名时间</text>
				</view>
				<view class="baoming-time">{{formData(detail.enlistStartTime)}} 至 {{formData(detail.enlistEndTime)}}</view>
				<view class="ddflex" style="margin-top: 26rpx;">
					<image src="../static/images/bmfy.png" style="visibility: hidden;"></image>
					<text>活动时间</text>
				</view>
				<view class="baoming-time">
					{{formData(detail.startTime)}} 至 {{formData(detail.endTime)}}
				</view>
			</view>
			
			<view class="hddz-box" style="margin-top: 26rpx;" v-if="detail.address">
				<view class="ddflex">
					<image src="../static/images/hddz.png"></image>
					<text>活动地点</text>
				</view>
				<!-- v-if="detail.address" -->
				<view class="ddflex hddz-area" @click="openMap()">
					<view class="fflex tover">{{detail.address}}</view>
					<image src="../static/images/crico2.png" class="rico"></image>
				</view>
			</view>
		</view>
		
		<!-- <view class="date">
			<view class="datass">
				<view class="ddflex">
					<image :src="detail.associationLogo" style="width:80rpx ;height: 80rpx;border-radius: 100%;" mode="aspectFill" class="dimg"></image>
					<view style="font-size: 30rpx;">{{detail.associationTitle}}</view>
				</view>
			</view>
		</view> -->
		
		<view class="date">
			<view class="datass ddflex" style="justify-content: space-between;" v-if="detail.associationId" @click="jumpUrl('/businessAssociation/associationIndex/associationIndex?id='+detail.associationId)">
				<view class="ddflex">
					<image :src="detail.associationLogo" style="width:65rpx ;height: 65rpx;border-radius: 100%;" mode="aspectFill" class="dimg"></image>
					<view style="font-size: 28rpx;">{{detail.associationTitle}}</view>
				</view>
				<image src="../static/images/crico2.png" class="rico"></image>
			</view>
			<!-- 
			<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="det">
			<view class="tit ddflex">活动介绍<!-- <image src="../../static/pages/images/crico1.png" class="rico"></image> --></view>
			<view class="content">
				<mp-html :content="detail.text" :lazy-load="true" @imgtap="choose"></mp-html>
			</view>
		</view>
		<view class="savepadding"></view>
		<view class="bot fixed bgfff">
			<view class="savepadding ddflex" style="justify-content: space-between;">
				<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>
					<view class="botbtn" @tap="clickCollect">
						<image src="/static/pages/images/shoucang_h.png" v-if="detail.isCollect"></image>
						<image src="/static/pages/images/shoucang.png" v-else></image>收藏
					</view>
					<view class="botbtn" @click="showShare"><image src="../static/images/fxico1_1.png"></image>分享</view>
					<!-- <button open-type="share" class="botbtn">
						<image src="../../static/pages/images/fxico1_1.png"></image>分享
					</button> -->
				</view>
				<view class="btns ddflex" v-if="!isIos">
					<view class="btn" @click="jumpUrl('/match/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 ddflex" v-else>
					<view class="btn">立即报名</view>
				</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>
		<v-share :hide-toast="hideShare" :product="detail" :code-url="codeUrl" @onFather="click"></v-share>
	</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";
import vShare from "../../components/share-activity/share";
export default {
	components: {
		mpHtml,
		vShare
	},
	data() {
		return {
			isShow: false,
			options: {},
			detail: {},
			isLogin: false,
			userinfovip: {},
			isIos: false,
			priceIndex: 0,
			priceList: [],
			popShow: false,
			priceId: '',
			price: 0,
			hideShare: true,
			codeUrl: '',
		};
	},
	onLoad(options) {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		this.options = options;
		// req.silenceLogin(options.userId, '');
	},
	async onShow() {
		this.isLogin = req.isAuth();
		await this.loadCodeParams();
		await this.getConfig();
		await this.getData(true);
		if(this.isLogin){
			await this.getuserVip();
		}
		this.getBrowse();
		await this.getPrice();
	},
	onReachBottom: function() {
	},
	onShareAppMessage: function() {
		let url = '/match/activityDetail/activityDetail?id=' + this.detail.id
		if(req.getStorage('userInfo')){
			url += '&userId=' + req.getStorage('userInfo').id
		}
		return {
			title: this.detail.title,
			imageUrl: this.detail.pic,
			path: url
		};
	},
	onShareTimeline() {
		let query = {
			id: this.detail.id
		}
		if(req.getStorage('userInfo')){
			query.userId = req.getStorage('userInfo').id
		}
		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');
		},
		formData(validDate){
			let time = new Date(validDate.replace(/-/g, '/'));
			return util.formatTime(time).t2
		},
		formDataObj(validDate){
			let time = new Date(validDate.replace(/-/g, '/'));
			return util.formatTime(time)
		},
		formDatahd(){
			if(this.detail.startTime&&this.detail.endTime){}
			else return false
			return this.formDataObj(this.detail.startTime).t2==this.formDataObj(this.detail.endTime).t2?
			(this.formDataObj(this.detail.startTime).t2+' '+this.formDataObj(this.detail.startTime).t6+' - '+this.formDataObj(this.detail.endTime).t6)
			:(this.formDataObj(this.detail.startTime).t5+' - '+this.formDataObj(this.detail.endTime).t5)
		},
		getBrowse(){
			let params={
				bindId: this.options.id,
				type: 10
			}
			req.postRequest('/api/browse', params, 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;
				console.log('that.priceList.length-',that.priceList.length)
			if(that.priceList && that.priceList.length == 1){
				that.priceList.map(it=>{
					if(!it.title){
						let price = 0;
						if(that.userinfovip.levelGrade>0&& !that.userinfovip.end){
							price = it.vipMoney;
						}else{
							price = it.money;
						}
						req.setStorage('actPrice',price)
						that.jumpUrl('/match/sign/sign?id=' + that.detail.id + '&priceId=' + it.id);
					}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();
		},
		showShare() {
			// console.log(11111,this.hideShare)
			// #ifdef H5 
			this.setData({
				hideShare: false
			});
		
			// #endif
			// #ifndef H5
			req.isLogin().then(success => {
				// console.log(success)
				if (success) {
					this.getCodeUrl()
					this.setData({
						hideShare: false
					});
					// console.log(this.hideShare)
				}
			});
			// #endif
		},
		getCodeUrl() {
			let that = this;
			let scene = that.detail.id;
			// console.log(scene); //获取小程序码
			const params = {
				page: 'match/activityDetail/activityDetail',
				scene: scene
			};
			req.getRequest('/api/program/codev', params, url => {
				that.setData({
					codeUrl: url
				});
			});
		},
		click(e) {
			// console.log(e,"7899")
			this.hideShare = e
		},
		loadCodeParams() {
			let _ts = this;
			return new Promise((resolve, reject) => {
				let form = {
					scene: _ts.options.scene
				};
				if (!_ts.options.scene) {
					resolve();
					return false;
				}
				req.getRequest('/api/code/params', form, data => {
					let res = data.scene.split('_');
					this.options.id = res[0];
					req.setStorage('pidCode', data.userId);
					resolve();
				});
			});
		},
	}
};
</script>

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