weapp-online/pages/index/index.vue

<template>
	<!-- 首页 -->
	<view class="home">
		<view class="banner_main"><image :src="banner.banner_1"></image></view>
		<template v-if="!isAuthLogin">
			<view class="index_container">
				<view class="sign_up_container" @click="signUp(userInfo.type)">
					<view class="top">
						<text>第{{ userInfo.season ? userInfo.season : '' }}届大卫博士创业{{ userInfo.season_type | activityType }}</text>
					</view>
					<view class="bottom">
						<view class="desc_main">
							<view class="bot_parent" v-if="userInfo.province || userInfo.city">举办地址：{{ userInfo.province }} {{ userInfo.city }} {{ userInfo.area }}</view>
							<view class="bot_parent">
								<text>举办时间：</text>
								<text v-if="userInfo.time_start">{{ getTime(userInfo.time_start) }}</text>
								<text>-</text>
								<text v-if="userInfo.time_end">{{ getTime(userInfo.time_end) }}</text>
							</view>
						</view>
					</view>
					<view class="surplus signedNum">
						<view class="signedNum_item">
							<text>已报名：</text>
							<text style="color:#FF5432;font-size:32rpx;font-weight:bold">{{ userInfo.count || 0 }}人</text>
						</view>
						<view class="signedNum_item">
							<text>剩余名额：</text>
							<text style="color:#FF5432;font-size:32rpx;font-weight:bold">
								{{  userInfo.is_limit ? `${Number(userInfo.limit_num || 0) - (userInfo.count || 0)}人` : '不限制' }}
							</text>
						</view>
					</view>
					<view class="surplus" v-if="offStart || offEnd">
						<text>
							<text>距离报名</text>
							<text>{{ offStart ? '开始' : '截止' }}</text>
							<text>仅剩：</text>
						</text>
						<text style="color:#FF5432;font-size:32rpx;font-weight:bold">{{ offStart ? offStart : offEnd }}</text>
					</view>
					<view class="surplus" v-if="!offStart && !offEnd && timeStart">
						<text>距离培训开始仅剩：</text>
						<text style="color:#FF5432;font-size:32rpx;font-weight:bold">{{ timeStart }}</text>
					</view>
					<view class="tip_container" :class="offSate ? 'off_line' : 'finish'">{{ offSate ? '火爆开启' : '暂未开启' }}</view>
				</view>
				<view
					class="desc_btn flexCC"
					:class="(!offStart && offEnd && limitState) || userInfo.sign_up ? 'offline_btn' : 'no_btn'"
					v-if="userInfo.type == 0"
					@click="signUp(userInfo.type)"
				>
					<text v-if="userInfo.sign_up">报名成功</text>
					<text v-if="!userInfo.sign_up">{{ !offEnd && !offStart ? '报名截止' : !limitState ? '人数已满' : '立即报名' }}</text>
				</view>
				<view class="desc_btn look flexCC" v-if="userInfo.type == 1" @click="signUp(userInfo.type)">查看信息</view>
				<view class="tab" v-if="userInfo.type == 0 && userRoot">
					<view @click="tabSkip(1)" :class="tabType == 1 ? 'active' : ''">
						<image src="../../static/imgs/notice.png" mode=""></image>
						<text>报名须知</text>
					</view>
					<view @click="tabSkip(2)" :class="tabType == 2 ? 'active' : ''">
						<image src="../../static/imgs/course.png" mode=""></image>
						<text>课程介绍</text>
					</view>
					<view @click="tabSkip(3)" :class="tabType == 3 ? 'active' : ''">
						<image src="../../static/imgs/voucher.png" style="width: 35rpx;height:35rpx"></image>
						<text>报名凭证</text>
					</view>
				</view>
				<view class="richText ql-snow ql-editor" v-if="tabType == 1 && userInfo.type == 0 && userRoot && userInfo.notice">
					<rich-text :nodes="userInfo.notice | formatRichText"></rich-text>
				</view>
			</view>
			<view class="allCount" v-if="userInfo.type == 1" @click="skipList">
				<view class="flexB title">
					<text>报名管理</text>
					<view>
						<text>进入详情</text>
						<text class="iconfont iconyoujiantou"></text>
					</view>
				</view>
				<view class="flexB count">
					<view class="flexCC" style="border-right:1rpx solid #F2F4F5;width:30%;flex-shrink: 0;">
						<view>
							<text style="font-size:48rpx;">{{ signInfo.apply_num ? signInfo.apply_num : 0 }}</text>
							<text>人</text>
						</view>
						<text style="margin-top:35rpx;">有效报名</text>
					</view>
					<view class="flexCC">
						<view style="color:#EA4A41;">{{ signInfo.no_sign_num ? signInfo.no_sign_num : 0 }}人</view>
						<text>未签到</text>
					</view>
					<view class="flexCC">
						<view style="color:#19B766;">{{ signInfo.sign_num ? signInfo.sign_num : 0 }}人</view>
						<text>已签到</text>
					</view>
					<view class="flexCC">
						<view style="color:#666;">{{ signInfo.cancel_num ? signInfo.cancel_num : 0 }}人</view>
						<text>已退款</text>
					</view>
				</view>
			</view>
			<view class="allCount statistics" v-if="userInfo.type == 1" @click="skipData">
				<view class="flexB title">
					<text>代理数据显示</text>
					<view>
						<text>进入详情</text>
						<text class="iconfont iconyoujiantou"></text>
					</view>
				</view>
				<view class="classify flexB">
					<view class="flexCC">
						<image src="../../static/imgs/level.png"></image>
						<text>等级组成及占比</text>
					</view>
					<view class="flexCC">
						<image src="../../static/imgs/sex.png"></image>
						<text>性别组成及占比</text>
					</view>
					<view class="flexCC">
						<image src="../../static/imgs/age.png"></image>
						<text>年龄组成及占比</text>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="loginText">登录获取活动详情</view>
			<button open-type="getUserInfo" @getuserinfo="userLogin" class="loginBtn"></button>
		</template>
		<!-- <view class="auth_login flexC" v-if="isAuthLogin">
			<button open-type="getUserInfo" @getuserinfo="userLogin" class="auth_btn">点击登录</button>
		</view> -->
		<view class="submit_container" @click.stop="signIn" v-if="userInfo.type == 1">
			<view class="sign_up flexC">
				<text class="iconfont iconsaoma" style="color:#fff;font-size:55rpx;margin-right:10rpx;"></text>
				<text>代理签到</text>
			</view>
		</view>
		<view class="phone_login" v-if="isPhoneLogin">
			<view class="phone_container">
				<view class="close" @click="isPhoneLogin = false"></view>
				<view class="top">
					<text>手机号验证</text>
					<div class="userImg"><open-data type="userAvatarUrl" class="getImgBtn"></open-data></div>
				</view>
				<view class="bottom">
					<input v-model="phone" type="text" placeholder="请输入手机号" class="input" maxlength="11" />
					<view class="bottom_eqcode">
						<input v-model="code" type="text" placeholder="输入验证码" class="input eqcode_input" />
						<view class="eqcode" @click="getCode">{{ countDown ? `重新获取(${countDown}s)` : '获取验证码' }}</view>
					</view>
				</view>
				<view class="submit_btn" @click="phoneLogin">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
import { wecatLogin, getUserInfo, phoneLogin, sendCode, getBanner, signInfo } from '../../api/index.js';
import { activityType } from "../../utiils/filters.js"
export default {
	data() {
		return {
			timeStart: '', //开始倒计时
			limitState: true, //报名人数是否已满  true未满  false已满
			tabType: 1, //0 报名须知 1 课程介绍 2报名凭证
			title: '', //当前页面标题
			userInfo: '', //用户相关信息
			offStart: '', //活动开始倒计时
			offEnd: '', //活动结束倒计时
			offTimer: null, //报名倒计时定时器
			startTimer: null, //培训开始倒计时
			offSate: true, //是否在活动中  true 是  false 不是
			isAuthLogin: false, //是否显示登陆授权按钮 true显示 false不显示
			isPhoneLogin: false, //是否显示手机登陆弹窗  true显示  false不显示
			wechatInfo: {
				latitude: '',
				longitude: '',
				avatarUrl: '',
				nickName: ''
			}, //微信信息
			phone: '', //手机号
			code: '', //验证码
			loginStatus: true, //登陆状态
			banner: '', //banner图
			userRoot: false, //是否有查看报名须知 和 课程介绍的权限
			signInfo: '', //报名的数据信息
			countDown: 0 //验证码倒计时
		};
	},
	watch: {
		isAuthLogin(a) {
			if (!a) {
				let that = this;
				wx.login({
					success({ code }) {
						that.wechatInfo.code = code;
					}
				});
			}
		},
		isPhoneLogin(a) {
			if (!a) {
				this.phone = '';
				this.code = '';
			}
		}
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			if (html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		}
	},
	onLoad(options) {
		if (options.isPhone) {
			this.isPhoneLogin = true;
		}
	},

	onShow() {
		let that = this;
		that.getSetting();
		if (!uni.getStorageSync('token')) {
			that.isAuthLogin = true;
			uni.hideTabBar();
		} else {
			that.getUserInfo();
		}
		that.getBanner();
		that.tabType = 1;
	},
	onPullDownRefresh() {
		if (uni.getStorageSync('token')) {
			this.getUserInfo();
		} else {
			uni.stopPullDownRefresh();
		}
	},
	onShareAppMessage: function(res) {
		const { season_type } = this.userInfo
		return {
			title: `大卫博士创业${activityType(season_type)}`,
			path: '/pages/index/index'
		};
	},
	beforeDestroy() {
		clearInterval(this.startTimer, this.offTimer);
	},
	methods: {
		skipData() {
			uni.navigateTo({
				url: '../statistics/statistics'
			});
		},
		//判断用户是否打开定位权限
		getSetting() {
			let that = this;
			uni.getSetting({
				success: res => {
					// 从未触发过授权的情况
					if (typeof res.authSetting['scope.userLocation'] == 'undefined') {
						this.getLocation();
						return false;
					}
					//位置授权关闭 引导开启
					if (!res.authSetting['scope.userLocation']) {
						uni.showModal({
							title: '是否授权当前位置',
							content: '如需正常使用本程序，请在授权管理中选中“地理位置”，然后点按返回即可正常使用',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									that.openSetting();
								}
							}
						});
						return false;
					}
					//位置授权开启，获取当前位置
					if (res.authSetting['scope.userLocation']) {
						this.getLocation();
					}
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		/*引导用户开启定位权限*/
		openSetting() {
			wx.openSetting({
				success: res => {
					let that = this;
					if (res.authSetting['scope.userLocation']) {
						this.getLocation();
					}
				},
				fail: err => {
					console.log(err);
					uni.showModal({
						content: '开启位置权限失败,请手动开启',
						showCancel: false
					});
				}
			});
		},
		getLocation() {
			let that = this;
			uni.getLocation({
				// 用户同意授权地理位置
				success: ({ latitude, longitude }) => {
					that.wechatInfo.latitude = latitude;
					that.wechatInfo.longitude = longitude;
				},
				fail: function(err) {
					// 授权地理位置调用失败
					// if (err.errMsg == 'getLocation:fail system permission denied') {
					// 	uni.showModal({
					// 		content: '获取位置失败，请检查手机GPS或者微信使用手机定位权限是否开启',
					// 		showCancel: false
					// 	});
					// 	return false;
					// }
					if (err.errMsg == 'getLocation:fail auth deny') {
						uni.showModal({
							title: '是否授权当前位置',
							content: '取消位置授权，将影响您使用小程序，请重新开启授权',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									that.openSetting();
								}
							}
						});
					}
				}
			});
		},
		getSignInfo() {
			signInfo().then(res => {
				if (res.code == 200) {
					this.signInfo = res.data;
				} else {
					uni.showModal({
						content: res.msg || '获取失败',
						showCancel: false
					});
				}
			});
		},
		//跳转到报名管理
		skipList() {
			uni.navigateTo({
				url: '../sign_up_list/sign_up_list'
			});
		},
		// 代理签到
		signIn() {
			uni.navigateTo({
				url: '../sign_in/sign_in'
			});
		},
		//获取活动banner
		getBanner() {
			getBanner().then(res => {
				this.banner = res.data;
			});
		},
		/*tab 切换
		 * 1 报名须知  2 课程介绍 3 报名凭证
		 */
		tabSkip(type) {
			this.tabType = type;
			if (type == 2) {
				uni.navigateTo({
					url: '../course_intr/course_intr?banner=' + this.banner.banner_2
				});
				return false;
			}
			if (type == 3) {
				if (!this.userInfo.sign_type) {
					this.tabType = 1;
					uni.showModal({
						content: '您还未报过名',
						showCancel: false
					});
					return false;
				}
				uni.navigateTo({
					url: '../sign_up_voucher/sign_up_voucher'
				});
			}
		},
		/*  获取验证码
		 *@params phone 手机号
		 */
		getCode() {
			let that = this;
			if (that.countDown) {
				uni.showModal({
					content: '验证码已发送，请稍后重试',
					showCancel: false
				});
				return false;
			}
			if (!that.phone) {
				uni.showModal({
					content: '请输入手机号',
					showCancel: false
				});
				return false;
			}
			sendCode({
				phone: that.phone
			}).then(res => {
				if (res.code != 200) {
					uni.showModal({
						content: res.message || '获取验证码失败',
						showCancel: false
					});
					return false;
				}
				if (res.code == 200) {
					uni.showModal({
						content: '验证码发送成功',
						showCancel: false
					});
					this.countDown = 60;
					this.timer = setInterval(() => {
						this.countDown--;
						if (!this.countDown) {
							this.countDown = 0;
							clearInterval(this.timer);
						}
					}, 1000);
				}
			});
		},
		/*微信登录获取 token
		 * @params openid用户openid 传空
		 * @params avatar 用户头像
		 * @params nickname  用户昵称
		 * @params code  微信登录code
		 * @params longitude 用户位置经度
		 * @params latitude  用户位置维度
		 */
		userLogin({ detail }) {
			let that = this;
			if (detail.errMsg === 'getUserInfo:ok') {
				that.wechatInfo.avatarUrl = detail.userInfo.avatarUrl;
				that.wechatInfo.nickName = detail.userInfo.nickName;
				uni.login({
					success: ({ code }) => {
						that.wechatInfo.code = code;
						// if (!that.wechatInfo.longitude && !that.wechatInfo.latitude) {
						// 	uni.showModal({
						// 		content: '暂无位置信息，请检查手机GPS或者微信使用手机定位权限是否开启',
						// 		showCancel: false
						// 	});
						// 	return false;
						// }
						let { avatarUrl, nickName, latitude, longitude } = that.wechatInfo;
						wecatLogin({
							openid: '',
							avatar: avatarUrl,
							nickname: nickName,
							code: code,
							longitude: longitude,
							latitude: latitude
						})
							.then(res => {
								if (res.code === 300) {
									that.isAuthLogin = false;
									that.isPhoneLogin = true;
								} else if (res.code === 200) {
									uni.showTabBar();
									uni.setStorageSync('token', res.data.token);
									that.getUserInfo();
								} else {
									uni.showModal({
										content: res.message,
										showCancel: false
									});
								}
							})
							.catch(e => {})
							.finally(() => {
								that.isAuthLogin = false;
							});
					}
				});
			} else {
				uni.showModal({
					content: '不授权将无法获取到您的信息，请手动开启授权',
					showCancel: false,
					success: res => {
						if (res.confirm) {
							wx.openSetting({
								success: res => {
									let that = this;
									if (res.authSetting['scope.userInfo']) {
										uni.showModal({
											content: '用户权限已开启',
											showCancel: false
										});
									} else {
										uni.showModal({
											content: '您拒绝了用户信息权限',
											showCancel: false
										});
									}
								},
								fail: err => {
									uni.showModal({
										content: '开启用户信息权限失败',
										showCancel: false
									});
								}
							});
						}
					}
				});
			}
		},
		/*手机验证码登陆
		 * @params phone 用户手机号
		 * @params phone_code 用户验证码
		 * @params avatar 用户头像
		 * @params nickname 用户昵称
		 * @params longitude 用户位置经度
		 * @params latitude 用户位置维度
		 * @params code 微信登录code
		 */
		phoneLogin() {
			let that = this;
			if (!that.phone) {
				uni.showModal({
					content: '手机号不存在',
					showCancel: false
				});
				return false;
			}
			if (!that.code) {
				uni.showModal({
					content: '验证码不存在',
					showCancel: false
				});
				return false;
			}
			if (!that.loginStatus) return false;
			that.loginStatus = false;
			uni.login({
				success: ({ code }) => {
					phoneLogin({
						phone: that.phone,
						phone_code: that.code,
						avatar: that.wechatInfo.avatarUrl,
						nickname: that.wechatInfo.nickName,
						longitude: that.wechatInfo.longitude,
						latitude: that.wechatInfo.latitude,
						code
					})
						.then(res => {
							if (res.code === 200) {
								this.isPhoneLogin = false;
								uni.setStorageSync('token', res.data.token);
								that.getUserInfo();
							} else {
								uni.showModal({
									content: res.message || '请求失败',
									showCancel: false
								});
							}
						})
						.catch(e => {})
						.finally(() => {
							that.loginStatus = true;
						});
				}
			});
		},
		// 倒计时
		coutdown(date) {
			const add0 = num => (num < 10 ? '0' + num : num);
			const now = Math.floor(Date.now() / 1000);
			let sec = Math.floor(Number(date) - now);
			if (sec > 0) {
				const day = Math.floor(sec / 86400);
				const hour = Math.floor((sec % 86400) / 3600);
				const minite = Math.floor((sec - 86400 * day - hour * 3600) / 60);
				const second = Math.floor(sec - 86400 * day - hour * 3600 - minite * 60);
				return `${add0(day)}天${add0(hour)}时${add0(minite)}分${add0(second)}秒`;
			} else {
				this.offTimer = this.startTimer = null;
				return false;
			}
		},
		startLine() {
			let that = this;
			let now = Math.floor(Date.now() / 1000);
			let offStart = Math.floor(Number(that.userInfo.sign_start) - now);
			if (offStart > 0) {
				that.offTimer = setInterval(() => {
					that.offStart = that.coutdown(that.userInfo.sign_start);
				}, 1000);
				if (!that.offStart) {
					this.offline();
				}
			}
		},
		//报名倒计时
		offline() {
			let that = this;
			let now = Math.floor(Date.now() / 1000);
			// let offStart = Math.floor(Number(that.userInfo.sign_start) - now);
			let offEnd = Math.floor(Number(that.userInfo.sign_end) - now);
			// if (offStart > 0) {
			// 	that.offTimer = setInterval(() => {
			// 		that.offStart = that.coutdown(that.userInfo.sign_start);
			// 	}, 1000);
			// }
			if (offEnd > 0) {
				that.offTimer = setInterval(() => {
					that.offEnd = that.coutdown(that.userInfo.sign_end);
				}, 1000);
				if (!that.offEnd) {
					that.timeLine();
				}
			}
		},
		//培训开始时间倒计时
		timeLine() {
			let that = this;
			let now = Math.floor(Date.now() / 1000);
			let timeStart = Math.floor(Number(that.userInfo.time_start) - now);
			if (timeStart > 0) {
				that.startTimer = setInterval(() => {
					that.timeStart = that.coutdown(that.userInfo.time_start);
				}, 1000);
			}
		},
		// 获取用户信息
		getUserInfo() {
			var that = this;
			that.getSetting();
			// if (!that.wechatInfo.latitude && that.wechatInfo.longitude) {
			// 	that.getSetting();
			// 	return false;
			// }
			// uni.getLocation({

			// })
			let { latitude, longitude } = that.wechatInfo;
			getUserInfo({
				latitude,
				longitude
			})
				.then(res => {
					if (res.code === 200) {
						uni.showTabBar();
						this.userInfo = res.data;
						// this.userInfo.type = 1
						uni.setStorageSync('userInfo', res.data);
						let { time_start, time_end, sign_start, sign_end, is_limit, count, limit_num, level, season_type, type } = this.userInfo;
						if (type == 1) {
							this.getSignInfo();
						}
						if (sign_start * 1000 > Date.now()) {
							//报名未开始
							this.startLine();
						}
						if (sign_end * 1000 > Date.now()) {
							//报名未结束
							this.offline();
						}
						if (sign_end * 1000 < Date.now() && time_start * 1000 > Date.now()) {
							//报名已截止，活动未开始  距离培训开始倒计时
							this.timeLine();
						}
						if (sign_start * 1000 < Date.now() && sign_end * 1000 > Date.now() && is_limit && Number(count) === Number(limit_num)) {
							//报名进行中 但是报名人数已满
							this.limitState = false;
						} else {
							this.limitState = true;
						}

						if (time_start * 1000 > Date.now() || time_end * 1000 < Date.now()) {
							//活动还未开始 或者活动已结束
							this.offSate = false;
						} else {
							this.offSate = true;
						}
						if (season_type == '0' && (level == '销售经理' || level == '代理公司')) {
							//实战营 报名须知 课程介绍只能有权限报名的人看
							this.userRoot = true;
						}
						if (season_type == '1' && level == '代理公司') {
							this.userRoot = true;
						}
					} else {
						uni.showModal({
							content: res.message,
							showCancel: false
						});
					}
				})
				.catch(e => {})
				.finally(() => {
					uni.stopPullDownRefresh();
				});
		},
		//活动报名
		signUp(type) {			
			let that = this;
			if (!uni.getStorageSync('userInfo')) {
				uni.showModal({
					content: '请先登录',
					showCancel: false,
					success: () => {
						this.isPhoneLogin = true;
					}
				});
				return false;
			}
			if (type == 1) {
				//如果是管理员
				uni.navigateTo({
					url: '../sign_manage/sign_manage?from=' + 'index' + '&banner=' + this.banner.banner_1
				});
				return false;
			}
			if (that.userInfo.sign_up) {
				//已报名
				uni.navigateTo({
					url: '../sign_up_info/sign_up_info'
				});
				return false;
			}
			//未报名
			if (that.offStart) {
				uni.showModal({
					content: '报名还未开始',
					showCancel: false
				});
				return false;
			}
			if (!that.offEnd && !that.offStart) {
				uni.showModal({
					content: '本届报名已截止，欢迎下次报名',
					showCancel: false
				});
				return false;
			}
			if (that.userInfo.is_limit && Number(that.userInfo.count) == Number(that.userInfo.limit_num)) {
				uni.showModal({
					content: '报名人数已满',
					showCancel: false
				});
				return false;
			}
			if (that.userInfo.enroll_t) {
				//报名之后退款 无法重复报名
				uni.showModal({
					title: '温馨提示',
					content: '已发生过一次退款，本届你不能再报名\n欢迎下次报名参加！',
					showCancel: false
				});
				return false;
			}
			if (that.userInfo.season_type == 1 && that.userInfo.level != '代理公司') {
				uni.showModal({
					content: '密训营只能代理公司参加',
					showCancel: false
				});
				return false;
			}

			// if (that.userInfo.season_type == 0 && (that.userInfo.level != '销售经理' || that.userInfo.level != '代理公司')) {
			// 	uni.showModal({
			// 		content: '实战营只能销售经理或代理公司参加',
			// 		showCancel: false
			// 	});
			// 	return false;
			// }
			uni.navigateTo({
				url: '../sign_up/sign_up?banner=' + this.banner.banner_1
			});
		},
		getTime(date) {
			var time = new Date(Number(date) * 1000);
			var year = time.getFullYear();
			var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
			var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
			var today = year + '.' + month + '.' + day;
			return today;
		}
	}
};
</script>
<style lang="scss" scoped>
.loginText {
	padding: 20rpx;
	font-size: 32rpx;
	line-height: 50rpx;
}
.loginBtn {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 99;
	opacity: 0;
}
.allCount {
	width: 690rpx;
	height: 320rpx;
	margin: 0 auto;
	background-color: #fff;
	padding: 25rpx 30rpx;
	box-sizing: border-box;
	border-radius: 8rpx;
	.title {
		margin-bottom: 50rpx;
		> text {
			font-size: 32rpx;
			color: #333;
		}
		> view {
			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.count {
		width: 98%;
		margin: 0 auto;
	}
	image {
		height: 30rpx;
		width: 30rpx;
		vertical-align: middle;
	}
	.flexCC {
		> text {
			font-size: 28rpx;
			margin-top: 50rpx;
		}
		view {
			s text {
				font-size: 36rpx;
			}
		}
	}
}
.statistics {
	height: 352rpx;
	margin-top: 20rpx;
	.classify {
		image {
			height: 193rpx;
			width: 193rpx;
		}
		text {
			font-size: 26rpx;
			color: #333;
			margin-top: 15rpx;
		}
	}
	.title {
		margin-bottom: 20rpx;
	}
}
.submit_container {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	font-size: 36rpx;
	background: #fff;
	z-index: 999;
	height: 118rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1rpx solid #f9f9f9;
	padding: 0 30rpx;
	box-sizing: border-box;

	.share {
		image {
			height: 46rpx;
			width: 46rpx;
		}

		view {
			font-size: 28rpx;
			color: #333333;
			margin-top: 5rpx;
		}
	}

	.sign_up {
		width: 690rpx;
		height: 90rpx;
		background-color: #ea4a41;
		border-radius: 45rpx;
		color: #ffffff;
		letter-spacing: 5rpx;

		image {
			width: 42rpx;
			height: 42rpx;
			margin-right: 17rpx;
		}
	}
}

.home {
	width: 100vw;
	position: relative;
	padding-bottom: 130rpx;
}

.desc_btn {
	width: 100%;
	height: 80rpx;
	background: #ea4a41;
	border-radius: 0 0 8rpx 8rpx;
	color: #fff;
	font-size: 36rpx;
	margin-bottom: 15rpx;
}

.offline_btn,
.look {
	background: $offline-color;
	// border: 4rpx solid $offline-color;
}

.no_btn {
	background: #cdcbcc;
	// border: 4rpx solid #cdcbcc;
}

.tab {
	width: 100%;
	height: 90rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #fff;

	view {
		height: 85rpx;
		line-height: 85rpx;
		font-size: 32rpx;
		letter-spacing: 5rpx;
		font-weight: 500;
		color: #666;

		&::after {
			content: '';
			display: block;
			width: 130rpx;
			height: 4rpx;
			border-radius: 2rpx;
			margin-left: 19rpx;
		}

		image {
			height: 40rpx;
			width: 40rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}

		text {
			font-size: 24rpx;
			color: #333;
		}
	}

	.active {
		color: #ea4a41;

		&::after {
			background-color: #ea4a41;
		}
	}
}

.richText {
	width: 690rpx;
	margin: 0 auto;
	padding: 20rpx;
	background-color: #fff;
	font-size: 28rpx;
}

uni-rich-text img {
	max-width: 100% !important;
}

.phone_login {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);

	.phone_container {
		width: 570rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		.close {
			&::before {
				position: absolute;
				top: 26rpx;
				right: 26rpx;
				content: '\2716';
				display: block;
				width: 30rpx;
				height: 30rpx;
				color: #ffffff;
				z-index: 9999;
			}
		}

		.top {
			width: 100%;
			height: 220rpx;
			background-color: #fa6342;
			color: #ffffff;
			font-size: 40rpx;
			padding-top: 50rpx;
			font-weight: blod;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			align-items: center;
			position: relative;

			.userImg {
				position: absolute;
				width: 138rpx;
				height: 138rpx;
				border-radius: 50%;
				bottom: -69rpx;
				overflow: hidden;

				.getImgBtn {
					width: 138rpx;
					height: 138rpx;
				}
			}
		}

		.bottom {
			padding: 100rpx 60rpx 30rpx;
			background-color: #ffffff;

			.input {
				width: 100%;
				height: 70rpx;
				padding: 0 17rpx;
				box-sizing: border-box;
				color: #000000;
				font-size: 30rpx;
				background-color: #eeeeee;
				border-radius: 2rpx;
			}

			.bottom_eqcode {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;

				.eqcode_input {
					width: 240rpx;
				}

				.eqcode {
					width: calc(100% - 240rpx);
					color: #fa6342;
					font-size: 32rpx;
					text-align: right;
				}
			}
		}

		.submit_btn {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			background-color: rgba(250, 99, 66, 0.2);
			color: #fa6342;
			font-size: 32rpx;
		}
	}
}
.no_location,
.auth_login {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
}
.no_location {
	.no_con {
		width: 80%;
		background: #fff;
		margin: 0 auto;
	}
}
.auth_login {
	.auth_btn {
		width: 80%;
		height: 88rpx;
		background: #ea4a41;
		color: #fff;
	}
}

.phone_login {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.3);

	.phone_container {
		width: 570rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;

		.close {
			&::before {
				position: absolute;
				top: 26rpx;
				right: 26rpx;
				content: '\2716';
				display: block;
				width: 30rpx;
				height: 30rpx;
				color: #ffffff;
				z-index: 9999;
			}
		}

		.top {
			width: 100%;
			height: 220rpx;
			background-color: #fa6342;
			color: #ffffff;
			font-size: 40rpx;
			padding-top: 50rpx;
			font-weight: blod;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			flex-direction: column;
			align-items: center;
			position: relative;

			.userImg {
				position: absolute;
				width: 138rpx;
				height: 138rpx;
				border-radius: 50%;
				bottom: -69rpx;
				overflow: hidden;

				.getImgBtn {
					width: 138rpx;
					height: 138rpx;
				}
			}
		}

		.bottom {
			padding: 100rpx 60rpx 30rpx;
			background-color: #ffffff;

			.input {
				width: 100%;
				height: 70rpx;
				padding: 0 17rpx;
				box-sizing: border-box;
				color: #000000;
				font-size: 30rpx;
				background-color: #eeeeee;
				border-radius: 2rpx;
			}

			.bottom_eqcode {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 60rpx;

				.eqcode_input {
					width: 240rpx;
				}

				.eqcode {
					width: calc(100% - 240rpx);
					color: #fa6342;
					font-size: 32rpx;
					text-align: right;
				}
			}
		}

		.submit_btn {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			background-color: rgba(250, 99, 66, 0.2);
			color: #fa6342;
			font-size: 32rpx;
		}
	}
}

.banner_main {
	width: 730rpx;
	height: 369rpx;
	margin: 0 auto;

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

.index_container {
	width: 690rpx;
	margin: 0 auto;
	padding-top: 20rpx;

	.sign_up_container {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		background-color: #ffffff;
		// border-radius: 8rpx;
		border-radius: 8rpx 8rpx 0 0;
		margin-top: 16rpx;
		overflow: hidden;

		.top {
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 40rpx;
			padding-top: 25rpx;

			&::before {
				content: '';
				display: block;
				width: 44rpx;
				height: 44rpx;
				background-image: url(../../static/imgs/offline.png);
				background-size: 100% 100%;
				margin-right: 10rpx;
			}
		}

		.line {
			&::before {
				background-image: url(../../static/imgs/online.png);
			}
		}

		.bottom {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.desc_main {
				width: calc(100% - 168rpx);
				color: #333333;
				font-size: 26rpx;

				.bot_parent,
				.online {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom: 16rpx;

					&:nth-last-of-type(1) {
						margin-bottom: 0;
					}

					&::before {
						content: '';
						display: block;
						width: 10rpx;
						height: 10rpx;
						border-radius: 50%;
						background-color: #f76454;
						margin-right: 14rpx;
					}
				}

				.online {
					&::before {
						background-color: #fcbe18;
					}
				}
			}
		}

		.surplus,
		.line_surplus {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			font-size: 26rpx;
			color: #333333;

			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #f76454;
				margin-right: 14rpx;
			}
		}
		.signedNum {
			justify-content: space-between;
			&_item {
				flex:1;
				overflow: hidden;
			}
		}

		.line_surplus {
			&::before {
				background-color: #fcbe18;
			}
		}

		.tip_container {
			width: 138rpx;
			height: 55rpx;
			position: absolute;
			top: 0;
			right: 0;
			border-bottom-left-radius: 55rpx;
			color: #ffffff;
			font-size: 26rpx;
			line-height: 55rpx;
			text-align: right;
			padding: 0 14rpx;
			box-sizing: border-box;
		}

		.on_line {
			background-color: $online-color;
		}

		.off_line {
			background-color: $offline-color;
		}

		.finish {
			background-color: #cdcbcc;
		}
	}
}
</style>