renshou/pages/matchList/index.vue

<template>
	<view v-if="isShow">
		<view :class="(about.greyTheme==1?' grayTheme':'')">
			<view style="width: 100%;">
				<view v-for="(item, index) in contact" :key="index">
					<!-- 弹窗广告 -->
					<view v-if="bannerList&&bannerList.length>0">
						<banner v-if="item == 'ad' && bannerShow" :bannerList="bannerList" :url="site" :web="url"
							:config="about" :couponList="[]" :officeList="[]"
							:districtTemplate="districtTemplate"></banner>
					</view>
					<district v-if="item == 'king_kong_district' && districtShow" :url="site" :web="url"
						:districtTemplate="districtTemplate"></district>
				
				</view>
			</view>
			<!-- <view class="ddflex" style="margin: 0 60rpx;">
				<view class="fflex">
					<image style="width: 86rpx;height: 86rpx;margin: 0 auto 20rpx;" src="/static/images/rmhd.png"></image>
					<view style="font-size: 24rpx;color: #302222;text-align: center;">热门活动</view>
				</view>
				<view class="fflex">
					<image style="width: 86rpx;height: 86rpx;margin: 0 auto 20rpx;" src="/static/images/ttcj.png"></image>
					<view style="font-size: 24rpx;color: #302222;text-align: center;">天天抽奖</view>
				</view>
				<view class="fflex">
					<image style="width: 86rpx;height: 86rpx;margin: 0 auto 20rpx;" src="/static/images/zxzq.png"></image>
					<view style="font-size: 24rpx;color: #302222;text-align: center;">赠险专区</view>
				</view>
			</view> -->
			<view class="act-list" v-if="pageList && pageList.length > 0">
				<view class="li" v-for="(item, index) in pageList" :key="index" @click="toActivity(item)">
					<view class="imgbox"><image :src="item.pic" mode="aspectFill"></image></view>
					<view class="infos fflex">
						<view class="act-tit tovers">{{ item.title }}</view>
						<view class="stas ddflex">
							<view class="fflex">
								<view class="tag-box tovers">{{ item.brief }}</view>
								<view class="area">
									<block v-if="item.state < 4">报名截止时间：{{ item.enlistEndTime }}</block>
									<block v-else>活动结束时间：{{ item.endTime }}</block>
								</view>
								<!-- <view class="money" v-if="userinfovip.levelGrade>0&& !userinfovip.end"><text>￥</text>{{item.vipMoney}}</view>
								<view class="money" v-else><text>￥</text>{{item.money}}</view> -->
							</view>
							<view class="act-btn" @click.stop="jumpUrl('/match/activity/activity')" v-if="item.isEnlist">我已报名</view>
							<block v-else>
								<view class="act-btn" @click.stop="toActivity(item)" v-if="item.state == 2">立即报名</view>
								<view class="act-btn" @click.stop="toActivity(item)" v-if="item.state == 3">报名结束</view>
								<view class="act-btn" @click.stop="toActivity(item)" v-if="item.state == 4">活动中</view>
								<view class="act-btn end" @click.stop="toActivity(item)" v-if="item.state == 5">活动结束</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else>
				<image :src="picUrlss + 'empty_dd.png'"></image>
				<text>暂无记录~</text>
			</view>
		</view>
		
		<foot channel="match" :isUpdate="isUpdate"></foot>
	</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 foot from '../../components/nav-bar/index';
import banner from '../../template/banner/banner';
import district from '../../template/king_kong_district/king_kong_district';
export default {
	components: {
		foot,
		banner,
		district
	},
	data() {
		return {
			picUrlss: req.public.picUrls,
			isShow: false,
			pageList: [],
			isLoad: true,
			form: {
				page: 1,
				limit: 10
			},
			isLogin: false,
			userinfovip: {},
			about:'',
			
			bannerShow: false,
			bannerList: [],
			districtShow:false,
			districtTemplate: {},
			homeTemplate: [],//首页栏目配置
			templateType: {
				module_ad: 'ad',
				//广告
				module_type_district: 'type_district',
				//分类导航
				module_king_kong_district: 'king_kong_district', //金刚区
			},
		};
	},
	onLoad() {
		this.getHomeTemplateConfig()
		req.saveBehaviorNew('',12,4)
	},
	async onShow() {
		this.about = await req.getsysConfig()
		this.isLogin = req.isAuth();
		this.getPageList(true);
		if (this.isLogin) {
			this.getuserVip();
		}
	},
	onReachBottom: function() {
		this.form.page++;
		this.getPageList(false);
	},
	onShareAppMessage() {
		
	},
	onShareTimeline() {
		
	},

	methods: {
		jumpUrl(url) {
			if (!req.isLogins(true)) {
				return;
			}
			uni.navigateTo({
				url: url
			});
		},
		
		// 自定义
		getHomeTemplateConfig() {
			let _ts = this;
			let page = 'matchIndex';
			req.getRequest(
				'/api/template/getTemplate', {
					page: page
				},
				data => {
					let arr = [];
					data.forEach(it => {
						arr.push(it.module);
					});
					this.setData({
						contact: [...new Set(arr)],
						contactShow: false
					});
					this.setData({
						homeTemplate: data
					});
		
					this.getRqeDatas();
				}
			);
		},
		async getRqeDatas() {
			let that = this; //多门店
			// 金刚区
			let district = that.homeTemplate.filter(it => it.module == that.templateType
				.module_king_kong_district);
			if (district && district.length > 0 && district[0].state == 0) {
				let data = district[0];
				data.content = JSON.parse(district[0].content);
				that.districtTemplate = data;
				that.districtShow = true;
			}
			//顶部banner
			let ad = that.homeTemplate.filter(it => it.module == that.templateType.module_ad);
			if (ad && ad.length > 0 && ad[0].state == 0) {
				await that.getBannerList(ad[0].module, ad[0].contentId);
			}
		},
		
		getBannerList(module, contentId) {
			//banner图
			let that = this;
			return new Promise((resolve, reject) => {
				req.getRequest(
					'/api/banner', {
						groupId: contentId
					},
					data => {
						if (module == that.templateType.module_ad) {
							that.setData({
								bannerList: data,
								bannerShow: true
							});
						} else {
							that.setData({
								popAdList: data[0]
							});
						}
						resolve();
					}
				);
			})
		},

		getPageList(isShow) {
			if (!this.isLoad) return false;
			this.isLoad = false;
			let form = this.form;
			if(req.getStorage("shareId")){
				form.shareSaleNo = req.getStorage("shareId")
			}
			uni.showLoading();
			req.getRequest(
				'/api/match/list',
				form,
				res => {
					this.isShow = true;
					if (res && res.length == 10) {
						this.isLoad = true;
					}
					if (this.form.page > 1) {
						res = this.pageList.concat(res);
					}
					this.pageList = res;
					uni.hideLoading();
				},
				isShow
			);
		},
		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
			});
		}
	}
};
</script>

<style>
@import './index.css';
</style>