CBB3/pages/guild/index.vue

<template>
	<view>
		<image :src="appConfig.appRequestUrl+`/h5/tipImg1.png`" style="width: 750rpx;height: 100%;" mode="widthFix">
		</image>
		<image :src="appConfig.appRequestUrl+`/h5/tipImg2.png`" style="width: 750rpx;height: 100%;" mode="widthFix">
		</image>
		<image :src="appConfig.appRequestUrl+`/h5/tipImg3.png`" style="width: 750rpx;height: 100%;" mode="widthFix">
		</image>
		<image :src="appConfig.appRequestUrl+`/h5/tipImg4.png`" style="width: 750rpx;height: 100%;" mode="widthFix">
		</image>
		<!-- <view class="app-bg">
			<image src="/static/img/tream_bg.png"></image>
		</view>
		<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" fixed title="我的会馆"></uni-nav-bar>
		<view class="swiper-img" id="app-top">
			<u-swiper
				:list="topData.banner"
				keyName="img"
				bgColor="transparent"
				indicator
				indicatorActiveColor="#DB292B"
				indicatorInactiveColor="#B7B7B7"
				previousMargin="15"
				nextMargin="15"
				indicatorMode="line"
			></u-swiper>
		</view> -->
		<!-- <view class="app-body" v-if="user != null">
			<view class="pannel fx-r fx-bc fx-ac" v-if="sysData.is_audit == 0">
				
				<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/integral">
					<view class="count">{{ user != null ? user.integral : 0 }}</view>
					<view class="label">趣豆</view>
				</view>
				<view class="line"></view>
				
				<view class="item fx-h fx-bc fx-ac">
					<view class="count">{{ user != null ? user.total_earnings : 0 }}</view>
					<view class="label">我的收益</view>
				</view>
				
				<view class="line"></view>
				
				<view class="item fx-h fx-bc fx-ac" @tap="tapOpen" data-url="/pages/user/detail/anticipate">
					<view class="count">{{ user != null ? user.anticipate : 0 }}</view>
					<view class="label">易趣卷</view>
				</view>
			</view>
			<view class="team-buy" v-if="data.guData != null">
				
				<view class="team-show">
					<view class="bg">
						<image src="../../static/ad/team-bg.png" mode="aspectFill"></image>
						<view class="h"></view>
					</view>
					
					<view class="body fx-h fx-bc fx-ac">
						<view class="top-input">
							<image src="/static/img/team-top-title.png" class="tbg"></image>
							<view class="inner fx-r fx-bc fx-ac">
								<image src="/static/img/team-top-location.png"></image>
								<view class="label">{{ data.guData.name }}</view>
							</view>
						</view>
						
						<view class="info fx-r fx-g1 fx-bc fx-ac">
							<view class="item fx-h fx-bc fx-ac">
								<view class="label" v-if="data.guData.status == 1">开放中</view>
								<view class="label" style="color: red;" v-else>闭馆中</view>
								<view class="name">状态</view>
							</view>
							
							<view class="halving"></view>
							
							<view class="item fx-h fx-bc fx-ac">
								<view class="label">{{ data.guData.nickname }}</view>
								<view class="name">部门总监</view>
							</view>
							
							<view class="halving"></view>
							
							<view class="item fx-h fx-bc fx-ac">
								<view class="people fx-r">
									<image :src="index == 0 ? '/static/img/hong_people.png' : '/static/img/while_people.png'" v-for="(item,index) in 5"></image>
								</view>
								<view class="name">流畅</view>
							</view>
							
						</view>
					</view>
				</view>
				
				
			</view>
			
			<view class="venue-list"  v-if="data.auction != null">
				<view class="item" v-for="(item,index) in data.auction">
					<view class="top-info fx-r">
						<view class="avatar">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title">{{ item.nickname }}</view>
							<view class="time fx-r fx-bc" v-if="item.is_today">
								<image src="/static/img/c-time.png"></image>
								开售：{{ utils.date('H:i:s',item.radd_time + item.in_time) }}
							</view>
							<view class="time fx-r fx-bc" v-else>
								<image src="/static/img/c-time.png"></image>
								场次时间：{{ item.next_day || "无" }}
							</view>
						</view>
					</view>
					<view class="yinfo fx-r">
						<view class="y-time">预约时间:
							<text v-if="item.add_time > 0">
								{{ utils.date('H:i',item.add_time) }}-{{ utils.date('H:i',item.end_time) }}
							</text>
						</view>
						<view class="fx-g1"></view>
						<view class="y-time">入场时间:
							<text>
								{{ utils.date('H:i',item.radd_time) }}-{{ utils.date('H:i',item.rend_time) }}
							</text>
						</view>
					</view>
					
					
					
					<view class="yfoot fx-r fx-bc" v-if="item.showType == 0">
						<view class="time1 fx-r" style="color: #787878;">预约时间:{{ utils.date('m-d H:i',item.add_time) }}</view>
						<view class="fx-g1"></view>
						<view class="sbtn-no">未到预约时间</view>
					</view>
					
					<view class="yfoot fx-r fx-bc" v-if="item.showType == 1">
						<view class="time1 fx-r">
							距预约结束:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:m',item.end_time)" />
						</view>
						<view class="fx-g1"></view>
						<view class="sbtn" v-if="item.booking_count <= 0" @tap="tapBooking(item)">立即预约</view>
						<view class="sbtn-no" v-else>已预约</view>
					</view>
					
					<view class="yfoot fx-r fx-bc" v-if="item.showType == 2">
						<view class="time1 fx-r" style="color: #787878;">入场时间:{{ utils.date('m-d H:i',item.radd_time) }}</view>
						<view class="fx-g1"></view>
						<view class="sbtn-no">未到入场时间</view>
					</view>
					
					
					
					<view class="yfoot fx-r fx-bc" v-if="item.showType == 3">
						
						<template  v-if="item.booking_count > 0">
							<view class="time1 fx-r" v-if=" item.radd_time >= utils.strtotime() &&  utils.strtotime() <  (item.radd_time + item.in_time) ">
								距入场时间:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.radd_time)" />
							</view>
							
							<view class="time1 fx-r" v-if=" (item.radd_time + item.in_time) >= utils.strtotime() &&  utils.strtotime() <  item.rend_time ">
								距开售时间:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',(item.radd_time + item.in_time))" />
							</view>
							
							<view class="time1 fx-r" v-if=" item.rend_time >= utils.strtotime() && utils.strtotime() > (item.radd_time + item.in_time) ">
								距结束:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.rend_time)" />
							</view>
						
							<view class="fx-g1"></view>
							<view class="sbtn" @tap="tapItem(item)">立即进入</view>
						</template>
						
						
						<template  v-if="item.booking_count == 0">
							<view class="time1 fx-r" v-if=" item.radd_time >= utils.strtotime() &&  utils.strtotime() <  (item.radd_time + item.in_time) ">
								距入场时间:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.radd_time)" />
							</view>
							
							<view class="time1 fx-r" v-if=" (item.radd_time + item.in_time) >= utils.strtotime() &&  utils.strtotime() <  item.rend_time ">
								距开售时间:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',(item.radd_time + item.in_time))" />
							</view>
							
							<view class="time1 fx-r" v-if=" item.rend_time >= utils.strtotime() && utils.strtotime() > (item.radd_time + item.in_time) ">
								距结束:<countdown  :startTime="utils.date('Y-m-d H:i:s')" :endTime="utils.date('Y-m-d H:i:s',item.rend_time)" />
							</view>
													
							<view class="fx-g1"></view>
							<view class="sbtn-no">未预约无法入场</view>
						</template>
					</view>
					
					
					
					
				</view>
			</view>
		</view>
		
		<view v-else :style="'height:60vh;'" class="user-bann fx-h fx-bc fx-ac">
			<view class="tips">你还未登录，请点击登录查看</view>
			<view class="btn" @tap="tapLogin" style="margin-top: 10px;">立即登录</view>
		</view>
		
		
		<view class="popwin fx-h fx-bc fx-ac" v-if="isShowContent">
			<view class="bg"></view>
			<view class="body fx-h fx-bc fx-ac">
				<view style="font-size: 16px;color: #333;font-weight: bold;">会员须知及寄售协议</view>
				<scroll-view scroll-y class="max-he">
					<u-parse :content="topData.content" :noData="topData.content" />
				</scroll-view>
				<view class="btn" @tap="tapAction">已阅读并同意</view>
			</view>
			
		</view>
		
		
			<u-modal :show="isBooking"  title="预约场次" :showConfirmButton="false">
					<view class="booking">
						<view class="booking-content">
							预约<text  v-if="itemData != null ">{{ itemData.reserve_count }}单</text>,需要<text v-if="itemData != null ">{{  itemData.all_anticipate  }}</text>易趣卷是否立即预约？
						</view>
						<view class="foot fx-r">
							<view class="btn ihover" @tap="tapBookAc">确认</view>
							<view class="nbtn ihover" @tap="isBooking = false">取消</view>
						</view>
					</view>
				</u-modal> -->
	</view>
</template>

<script>
	import appConfig from '../../config/global.js'
	import countdown from "@/components/cz-countdown/cz-countdown.vue";
	import uParse from '@/components/gaoyia-parse/parse.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			countdown,
			uParse
		},
		computed: mapState(['user', 'sysData']),
		data() {
			return {
				appConfig,
				barheight: 0,
				data: {
					guData: null,
					auction: null
				},
				topData: {
					banner: [],
					content: ""
				},
				isShowContent: false,
				itemData: null,
				actionType: "",
				isBooking: false,
				isSubmit: false,
			}
		},
		onLoad() {
			this.initView();
			setInterval(this.interval, 1000);
		},

		onShow() {
			this.checkUserLogin({
				page: this,
				isLogion: false,
				fn: this.uInit
			});
		},

		methods: {
			...mapMutations(['checkUserLogin']),
			initView: function() {

				this.$nextTick(() => {
					uni.createSelectorQuery().select("#app-top").boundingClientRect(res => {
						this.barheight = res.height;
					}).exec();
				});
				// #ifdef H5
				this.footHeight = 60;
				// #endif	

				this
					.request
					.get("guInit")
					.then(res => {
						if (res.code == 200) {
							this.topData = res.data;
						}
					});
			},
			/**
			 * 获取其他信息
			 */
			uInit: function() {
				this
					.request
					.post("getUserGu")
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.data = res.data;
							this.interval();
						}
					})
					.catch(err => {
						this.utils.Tip("加载失败，重新点击尝试！" + JSON.stringify(error));
						uni.hideLoading();
					});
			},
			/**
			 * 预约操作
			 */
			tapBooking: function(item) {
				if (this.user == null) {
					uni.navigateTo({
						url: "/pages/login/index"
					});
					return;
				}
				//是否认证
				if (this.user.is_auth != 1) {
					this.utils.showModal("您还未认证，点击进行认证", () => {
						uni.navigateTo({
							url: "/pages/user/approve"
						});
					});
					return;
				}
				//是否填写银行信息
				if (this.user.is_bank != 1) {
					this.utils.showModal("您还配置收款信息，点击配置", () => {
						uni.navigateTo({
							url: "/pages/user/bank/bank"
						});
					});
					return;
				}

				this.isShowContent = true;
				this.itemData = item;
				this.actionType = "booking";
			},

			tapAction: function() {
				this.isShowContent = false;
				if (this.actionType == "booking") {
					this.isBooking = true;
				}
			},
			/**
			 * 预约单
			 */
			tapBookAc: function() {
				this.isBooking = false;
				if (this.isSubmit) return;
				this.isSubmit = true;
				uni.showLoading({
					title: '提交数据..'
				});
				this
					.request
					.post("auctionSubscribe", {
						id: this.itemData.id
					})
					.then(res => {
						uni.hideLoading();
						this.isSubmit = false;
						if (res.code == 200) {
							this.utils.Tip(res.msg);
							this.uInit();
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err => {
						this.isSubmit = false;
						this.utils.Tip("加载失败，重新点击尝试！" + JSON.stringify(error));
						uni.hideLoading();
					});
			},
			/**
			 * 
			 */
			tapLogin: function() {
				uni.navigateTo({
					url: "../login/index"
				});
			},
			tapAdver: function() {

			},
			/**
			 * 详情页面
			 */
			tapItem: function(item) {
				uni.navigateTo({
					url: "./rush?id=" + item.id
				})
			},
			/**
			 * 打开Open
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},
			interval: function() {
				if (this.data.auction != null) {
					let time = this.utils.strtotime();
					for (let i in this.data.auction) {
						let d = this.data.auction[i];
						//判断是否预约时间
						if (time >= d.add_time && time < d.end_time) {
							this.$set(this.data.auction[i], 'showType', 1);
						}

						//入场时间
						if (time >= d.end_time && time < d.radd_time) {
							this.$set(this.data.auction[i], 'showType', 2);
						}

						//判断是否入场-判断是不是到预约时间-是否已预约
						if (d.booking_count > 0 && time >= d.radd_time && time < d.rend_time) {
							this.$set(this.data.auction[i], 'showType', 3);
						}

						if (d.booking_count <= 0 && time >= d.radd_time && time < d.rend_time && time > d.end_time) {
							this.$set(this.data.auction[i], 'showType', 3);
						}


						if (time > d.rend_time) {
							this.$set(this.data.auction[i], 'showType', 4);
						}

					}

				}
			}
		}
	}
</script>

<style lang="scss">
	@import url("/components/gaoyia-parse/parse.css");

	.app-bg {
		position: absolute;

		image {
			width: 100vw;
			height: 45vw;
		}
	}

	.app-body {
		position: relative;
		z-index: 9;
		padding: 0px 30rpx;
	}

	//业绩通道
	.pannel {
		background: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 60rpx 0;

		.item {
			width: calc(33% - 1px);

			.label {
				font-size: 14px;
				color: #666666;
				margin-top: 5px;
			}

			.count {
				font-weight: bold;
				font-size: 21px;
				color: #0C1732;
			}
		}

		.line {
			width: 1px;
			height: 45px;
			background: #DCDCDC;
		}
	}


	//抢货通道
	.team-buy {
		background: #F8F8FA;

		.top {
			.label {
				color: #DB292B;
				font-size: 30rpx;
				font-weight: bold;
			}

			.sbtn {
				border: 2rpx solid #DB292B;
				border-radius: 10rpx;
				color: #DB292B;
				font-size: 24rpx;
				padding: 14rpx 16rpx;
			}
		}

		.team-show {
			width: 100%;
			height: 260rpx;
			border-radius: 20rpx;
			margin-top: 20rpx;
			position: relative;

			.bg {
				width: 100%;
				height: 260rpx;
				position: absolute;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

				.h {
					background-color: rgba(0, 0, 0, 0.2);
					position: absolute;
					z-index: 9;
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					top: 0;
				}
			}

			.body {
				position: relative;
				z-index: 10;
				height: 100%;

				.top-input {
					position: relative;

					.tbg {
						width: 250rpx;
						height: 70rpx;
					}

					.inner {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						.label {
							color: #fff;
							font-weight: bold;
							font-size: 36rpx;
							margin-left: 6rpx;
						}
					}
				}

				.info {
					width: 100%;

					.item {
						width: calc(33% - 1px);

						.name {
							color: #fff;
							font-size: 30rpx;
							margin-top: 24rpx;
						}

						.label {
							color: #fff;
							width: 80%;
							font-size: 30rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
						}

						.people {
							image {
								width: 26rpx;
								height: 34rpx;
							}
						}
					}

					.halving {
						width: 2rpx;
						height: 80rpx;
						background: #fff;
					}
				}
			}
		}
	}

	.venue-list {
		.item {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-top: 20rpx;

			.top-info {
				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					background: #f1f1f1;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 10rpx;
					}
				}

				.info {
					width: calc(100% - 120rpx);
					margin-left: 20rpx;

					.title {
						color: #081734;
						font-size: 34rpx;
						font-weight: bold;
					}

					.time {
						font-size: 22rpx;
						color: #666666;

						image {
							width: 30rpx;
							height: 28rpx;
							margin-right: 8rpx;
						}

						margin-top: 20rpx;
					}
				}
			}

			.yinfo {
				padding: 40rpx 0;

				.y-time {
					color: #666666;
					font-size: 26rpx;

					text {
						color: #081734;
					}
				}

				border-bottom: 1px solid #f1f1f1;
			}

			.yfoot {
				padding-top: 10px;

				.time1 {
					font-size: 14px;
				}

				.sbtn {
					background: #d13737;
					color: #fff;
					font-size: 14px;
					border-radius: 20rpx;
					padding: 4px 10px;
				}

				.sbtn-no {
					background: #f1f1f1;
					color: #787878;
					font-size: 14px;
					border-radius: 20rpx;
					padding: 4px 10px
				}
			}

		}
	}

	.user-bann {
		.tips {
			font-size: 14px;
			color: #787878;
		}

		.btn {
			background: $ic-appcolor;
			font-size: 14px;
			color: #fff;
			width: 160px;
			border-radius: 20px;
			height: 40px;
			text-align: center;
			line-height: 40px;
		}

	}

	/**弹出框 **/
	.popwin {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 88;
	}

	.popwin .bg {
		background: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}

	.popwin .body {
		padding: 20px;
		width: 80%;
		background: #fff;
		position: relative;
		border-radius: 8px;
	}

	.max-he {
		height: 60vh;
	}

	.popwin .btn {
		margin-top: 6px;
		border-radius: 4px;
		background: #dc262b;
		font-size: 14px;
		color: #fff;
		width: 100px;
		text-align: center;
		padding: 6px 2px;
	}

	.popwin .btn.no {
		background: #f1f1f1;
		color: #ccc
	}


	.booking {
		.booking-content {
			font-size: 26px;
			padding: 10px 0;

			text {
				color: #d13737;
			}
		}

		.foot {
			padding: 20rpx 0;

			.btn {
				height: 40px;
				background: #dc262b;
				border-radius: 5px;
				font-size: 14px;
				color: #fff;
				text-align: center;
				line-height: 40px;
				width: 30vw;
				margin-right: 4vw;
			}

			.nbtn {
				height: 40px;
				border: 1px solid #dc262b;
				border-radius: 5px;
				font-size: 14px;
				color: #dc262b;
				text-align: center;
				line-height: 40px;
				width: 30vw;
				margin-left: 4vw;
			}
		}
	}
</style>