H5_module/match/activityDetail/activityDetail.vue

<template>
	<view :style="[mainStyle]" v-if="isShow">
		<view class="top">
			<view class="banner">
				<swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
					<block v-for="(item, index) in detail.imageList" :key="index">
						<swiper-item @click="clickBanner(item)"><image lazy-load="true" :src="item.url" mode="aspectFill"></image></swiper-item>
					</block>
				</swiper>
				<view class="dots dflex" v-if="detail.imageList.length > 1">
					<block v-for="(item, index) in detail.imageList" :key="index"><view :class="['dot', index == swiperCurrent ? 'active' : '']"></view></block>
				</view>
			</view>
			<!-- <image :src="detail.imageList[0]" mode="aspectFill" class="act-img"></image> -->
			<view class="title">{{detail.title}}</view>
			<view class="xq-datas ddflex">
				<view class="xq-data fflex ddflex">
					<view class="datas ddflex"><image src="../static/images/xq_llico.png" style="width: 32rpx;height: 24rpx;"></image>{{detail.popularity}}</view>
					<view class="datas ddflex"><image src="../static/images/xq_fxico.png" style="width: 26rpx;height: 26rpx;"></image>{{detail.share}}</view>
					<view class="datas ddflex"><image src="../static/images/xq_scico.png" style="width: 29rpx;height: 28rpx;"></image>{{detail.collect}}</view>
				</view>
				<view class="tuibao ddflex">
					<view class="ddflex"><image src="../static/images/xq_bao.png"></image>交易保障</view>
					<view class="ddflex"><image src="../static/images/xq_tui.png"></image>支持退款</view>
				</view>
			</view>
			<!-- <view class="money free" v-if="userinfovip.levelGrade>0&& !userinfovip.end"><text>￥</text>{{detail.vipMoney}}</view> -->
			<view class="money free"><text v-if="detail.money > 0">￥</text>{{detail.money > 0 ? detail.money : '免费'}}</view>
		</view>
		<view class="date">
			<view class="datass ddflex">
				<image src="../static/images/xq_sjico.png" class="dimg"></image>
				<view>{{ getTimeText(detail.startTime,detail.endTime,true) }}</view>
			</view>
			<view class="datass ddflex" style="align-items: flex-start;" v-if="detail.address" @click="openMap()">
				<image src="../static/images/xq_dzico.png" class="dimg" style="margin-top: 5rpx;"></image>
				<view class="fflex">{{detail.address}}</view>
				<image src="../../static/pages/images/crico1.png" class="rico" style="margin-top: 10rpx;"></image>
			</view>
			<view class="datass ddflex">
				<image src="../static/images/xq_rsico.png" class="dimg"></image>
				<view class="fflex">已报名{{detail.person}}人</view>
			</view>
			<view class="act-sta" v-if="detail.state == 1">活动报名尚未开始</view>
			<view class="sign-user ddflex" v-else>
				<swiper class="sign-user-swiper" :autoplay="true" :disable-touch="true" :vertical="true" v-if="enlistUserList.length >0">
					<swiper-item class="ddflex" v-for="(it,idx) in enlistUserList" :key="index">
						<image :src="item.avatar ? item.avatar : '../../static/pages/images/userimg.png'" mode="aspectFill" v-for="item,index in it" :key="index"></image>
					</swiper-item>
				</swiper>
				<!-- <image :src="item.avatar ? item.avatar : '../../static/pages/images/userimg.png'" mode="aspectFill" v-for="item,index in enlistUserList" :key="index"></image> -->
			</view>
			<image src="../static/images/sta_not.png" class="sta-img" v-if="detail.state == 1"></image>
			<image src="../static/images/sta_ing.png" class="sta-img" v-if="detail.state == 2"></image>
			<image src="../static/images/sta_end.png" class="sta-img" v-if="detail.state == 3"></image>
			<image src="../static/images/sta_ing_hd.png" class="sta-img" v-if="detail.state == 4"></image>
			<image src="../static/images/sta_end_hd.png" class="sta-img" v-if="detail.state == 5"></image>
		</view>
		<view class="zhubanf dflex">
			<view class="fflex">
				<view class="zbf-name ddflex">{{detail.partyName}}</view>
				<view class="zbf-bri"><rich-text :nodes="detail.partyBrief"></rich-text></view>
			</view>
			<!-- <image src="../static/images/vip_bg.png" mode="aspectFill" class="zbf-logo"></image>
			<view class="fflex">
				<view class="zbf-name ddflex">黄飞鸿热炙理疗馆<text class="zbf-tag">优选</text></view>
				<view class="zbf-bri">养生理疗  中电软件园</view>
			</view>
			<image src="../../static/pages/images/crico1.png" class="rico"></image> -->
		</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 style="height: 120rpx;"></view>
		<view class="bot fixed bgfff ddflex">
			<view class="btnfot ddflex">
				<!-- #ifdef H5 -->
				<navigator class="botbtn" url="/match/activity/activity" hover-class="none">
					<image src="../static/images/sy.png"></image>主页
				</navigator>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<navigator class="botbtn" url="/pages/index/index" hover-class="none">
					<image src="../static/images/sy.png"></image>主页
				</navigator>
				<!-- #endif -->
				<view class="botbtn" @tap="clickCollect">
					<image src="../static/images/sc_h.png" v-if="detail.isCollect"></image>
					<image src="../static/images/sc.png" v-else></image>收藏
				</view>
				<view class="botbtn" @click="showShare"><image src="../static/images/fx.png"></image>分享</view>
				<!-- <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('/match/activitys/activity')" v-if="detail.isEnlist">我已报名</view>
				<block v-else>					
					<view class="btn end" v-if="detail.state == 1">报名未开始</view>
					<view class="btn" @click="showPop()" v-if="detail.state == 2">立即报名</view>
					<view class="btn end" 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 p-money free"><text v-if="price > 0">￥</text>{{price > 0?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 + '&personCount=' + personCount)">马上报名</view>
		</view>
		<!-- #ifndef H5 -->
		<v-share :hide-toast="hideShare" :product="detail" :code-url="codeUrl" @onFather="click"></v-share>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="share-pop" @click="hideSharePop" v-if="isShowSharePop">
			<image src="../static/fx-tip1.png"></image>
		</view>
		<wx-share :title="detail.title" :image="detail.pic" :desc="detail.brief" :type="2" :id="options.id" />
		<!-- #endif -->
	</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 {
			appId: '',
			mainStyle: app.globalData.mainStyle,
			isShow: false,
			options: {},
			detail: {},
			swiperCurrent: 0,
			isLogin: false,
			userinfovip: {},
			isIos: false,
			priceIndex: 0,
			priceList: [],
			popShow: false,
			priceId: '',
			personCount: 1,//价格档位对应的人数
			price: 0,
			hideShare: true,
			codeUrl: '',
			about: '',
			enlistUserList: [],//报名人员
			initEnlistUserList: [],//真实报名人员
			
			isShowSharePop: false,
			
			isFirst: true
		};
	},
	async onLoad(options) {
		// #ifdef H5
		if(options.appId) req.setStorage('appId',options.appId);
		if(options['amp;appId'])  req.setStorage('appId',options['amp;appId']);
		// #endif
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		this.options = options;
		// req.silenceLogin(options.userId, '');
		await this.loadCodeParams();
		await this.getConfig();
		await this.getData(true);
		if(this.isLogin){
			await this.getuserVip();
			this.getEnlistUser();
		}
		this.getBrowse();
		await this.getPrice();
	},
	async onShow() {
		this.appId = req.getStorage('appId')
		this.isLogin = req.isAuth();
		if(!this.isFirst) {
			await this.getData(true);
			if(this.isLogin){
				await this.getuserVip();
				this.getEnlistUser();
			}
			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
		}
		this.saveShareBehavior();
		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
		}
		this.saveShareBehavior();
		return {
			title: this.detail.title,
			imageUrl: this.detail.pic,
			query: query
		};
	},
	methods: {
		showSharePop() {
			this.isShowSharePop = true;
		},
		hideSharePop() {
			this.isShowSharePop = false;
		},
		swiperChange(e) {
			if(e.detail.source == 'autoplay' || e.detail.source == 'touch') this.swiperCurrent = e.detail.current;
		},
		getTimeText(startTime,endTime,isText){
			return util.getTimeText(startTime,endTime,isText);
		},
		group(array, subGroupLength) {
			let index = 0;
			let newArray = [];
		
			while (index < array.length) {
				newArray.push(array.slice(index, index += subGroupLength));
			}
		
			return newArray;
		},
		getMachAvatarList(num){
			req.getRequest(api.match_avatar_list,{random: num},data=>{
				let arr = this.initEnlistUserList;
				arr = arr.concat(data);
				console.log('arr==',arr)
				let newArr = this.group(arr,5);
				this.enlistUserList = newArr;
				console.log('newArr==',newArr)
			})
		},
		getEnlistUser(){
			let form = {
				page: 1,
				limit: 10,
				matchId: this.options.id
			}
			req.getRequest('/api/match/enlist/user',form,data=>{
				if(this.detail.person > data.length){
					let num = this.detail.person - data.length;
					this.initEnlistUserList = data;
					this.getMachAvatarList(num);
				}else{
					let newArr = this.group(data,5);
					this.enlistUserList = newArr;
				}
			})
		},
		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;
					this.isFirst = false;
					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;
					this.personCount = res[0].personCount;
					let price = 0;
					if(this.userinfovip.levelGrade>0&& !this.userinfovip.end){
						price = res[0].vipMoney;
					}else{
						price = res[0].money;
					}
					this.price = price;
					this.priceIndex = 0;
					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();
			})
		},
		getBrowse(){
			let params={
				behavior: 4,
				type: 2,
				bindId: this.options.id,
			}
			req.saveBehavior(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){
					let params={
						behavior: 2,
						type: 2,
						bindId: this.options.id,
					}
					req.saveBehavior(params, data => {
						if(this.detail.isCollect) this.detail.collect--;
						else this.detail.collect++;
						this.detail.isCollect = !this.detail.isCollect;
					});
					// req.postRequest('/api/collect',this.appId,{
					// 	bindId: this.detail.id,
					// 	type: 2
					// },res=>{
					// 	this.detail.isCollect = !this.detail.isCollect;
					// })
				}
			})
		},
		showPop(){
			let that = this;
			if(!req.isLogins(true)) return false;
			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;
			this.personCount = it.personCount;
			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.hideShare = false;
			this.showSharePop();
			console.log('引导分享==')
			// #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?_ts.options.scene:_ts.options.x_code_id
				};
				if (!_ts.options.scene && !_ts.options.x_code_id) {
					resolve();
					return false;
				}
				req.getRequest('/api/code/params', form, data => {
					if(_ts.options.x_code_id){
						let res = JSON.parse(data.scene)
						for(let key in res){
							this.options[key] = res[key]
						}
						resolve();
					}else{
						let res = data.scene.split('_');
						this.options.id = res[0];
						req.setStorage('pidCode', data.userId);
						resolve();
					}
				});
			});
		},
		saveShareBehavior(){
			let params={
				behavior: 6,
				type: 2,
				bindId: this.options.id,
			}
			req.saveBehavior(params, data => {});
		},
	}
};
</script>
<style>page{background: #fff;}</style>
<style>
	@import "./activityDetail.css";
</style>