fanyunAi/pages/user/member/member.vue

<template>
	<view>
		<view style="color: #000;">
			<tn-nav-bar backgroundColor="#ffffff"
				:bottomShadow="false">我的{{appInfo.number_alias?appInfo.number_alias:'点数'}}{{appInfo.time_member==1?'/会员套餐':''}}
			</tn-nav-bar>
		</view>


		<view :style="{height: tobheight+'px'}"></view>
		<view class="flex-rb-cc infoBg" style="padding: 25px 15px 20px;justify-content: end;">
			<!-- <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill"></image> -->
			<u-avatar :src="userInfo.avatar" size="70" mode="aspectFill"></u-avatar>
			<view class="flex-fill ml20">
				<view class="u-flex align-center justify-between" style="margin-bottom: 16rpx">
					<view class="bold" style="font-size: 36rpx;color: #fff;">{{userInfo.nickname}}</view>
					<u-tag @click="getrecord" text="记录" type="warning" shape="circle"></u-tag>
				</view>

				<view class="flex-cc align-center ">
					<!-- <text style="font-size: 30rpx;font-weight: bold;color: #ffc107;">剩余次数：{{userData.coin?userData.coin:0}}次</text> -->
					<!-- {{(appInfo.number_alias?appInfo.number_alias+':':'点数:')}} -->
					<u-tag
						:text="userData.coin?(appInfo.number_alias?appInfo.number_alias+':':'点数:')+userData.coin:(appInfo.number_alias?appInfo.number_alias+':':'点数:')+0"
						plain type="warning" shape="circle" color="#ffeb3b" borderColor="#ffeb3b"></u-tag>
					<block v-if="appInfo.time_member && appInfo.time_member==1">
						<view style="width: 10rpx;"></view>
						<u-tag
							:text="userData.is_validity == 1?'会员套餐:'+ (userData.vip_time == 9999?'永久':userData.countdown+'天'):'会员套餐:0天'"
							plain type="warning" shape="circle" color="#ffeb3b" borderColor="#ffeb3b"></u-tag>
						<!-- <u-tag :text="userData.is_validity == 1?'会员套餐:'+ (userData.vip_time == 9999?'永久':userData.countdown+'天'):'会员套餐:0天'" plain
								type="warning" shape="circle" color="#ffeb3b" borderColor="#ffeb3b"></u-tag> -->
					</block>
					<!-- <image class="ico-vip mr10" :src="userInfo.coin>0?'/static/images/diamond_fill_vippage_icon@2x.png':'/static/images/diamond_vippage_icon@2x.png'"></image> -->
					<!-- <text class="tn-color-brown" style="opacity: 0.5;font-size: 28rpx;">1</text> -->
				</view>
			</view>

		</view>

		<u-tabs v-if="showtabs" :list="tabList" lineWidth="50" lineHeight="5" lineColor="#207CF7" :current="tabindex"
			:activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
						fontSize: '32rpx',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
						fontSize: '32rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" @click="gettabs">
		</u-tabs>
		<blcok v-if="list.length&&tabindex < 2">
			<view class="form">
				<view class="form-choice " :class="current==index?'active':''" v-for="(item,index) in list" :key="index"
					@click="setItem(index)">
					<view class="flex-rb-cc">
						<view class="fz-32 bold flex-cc">
							<text style="font-size: 40rpx;max-width: 380rpx;">{{item.title}}</text>
							<!-- <text v-if="item.coin" style="font-size: 38rpx;">{{item.coin}} 次数</text> -->
							<!-- <image class="ico-special" style="margin-left: 40rpx;" :src="current==index?'/static/images/special_time_w@2x.png':'/static/images/special_time_w@2x.png'" v-if="item.is_preferential ==1"></image> -->
						</view>
						<view class="tr ">
							<view class="mt10 fz-24 fc-c5 line-through" v-if="item.original_price">
								¥{{item.original_price}}</view>
							<view class="bold">
								<text class="fz-32">¥ </text>
								<text class="fz-38 pricefont">{{item.price}}</text>
							</view>

						</view>
					</view>
					<!-- <view v-else class="mt10 fz-26" :class="current==index?'selected':'fc-c5'">会员天数
							{{item.day == 9999?'永久':item.day}}
						</view> -->
					<view class="form-special" v-if="item.is_preferential === 1">(限时特价)</view>
					<view v-if="type==1&&item.coin" class="mt10 fz-26" :class="current==index?'selected':'fc-c5'">
						{{appInfo.number_alias?appInfo.number_alias:'点数'}}
						{{item.coin}}

					</view>
					<view v-else class="u-flex flex-wrap">
						<view v-if="item.gpt35_times == -1 || item.gpt35_times > 0" class="packagetag">
							<u-tag @click="setItem(index)"
								:text="appInfo.gpt35_alias ? appInfo.gpt35_alias+(item.gpt35_times == -1?' 无限量':' '+item.gpt35_times+'次')+(item.gpt35_type=='time'?'/天':'') : 'ChatGPT 3.5'+(item.gpt35_times == -1?' 无限量':' '+item.gpt35_times+'次')+(item.gpt35_type=='time'?'/天':'')"
								plain type="warning" size="mini" shape="circle" :color="current==index?'#ffeb3b':'#ccc'"
								:borderColor="current==index?'#ffeb3b':'#ccc'"></u-tag>
						</view>
						<view v-if="item.gpt4_times == -1 || item.gpt4_times > 0" class="packagetag">
							<u-tag @click="setItem(index)"
								:text="appInfo.gpt4_alias ? appInfo.gpt4_alias+(item.gpt4_times == -1?' 无限量':' '+item.gpt4_times+'次')+(item.gpt4_type=='time'?'/天':'') : 'ChatGPT 4.0'+(item.gpt4_times == -1?' 无限量':' '+item.gpt4_times+'次')+(item.gpt4_type=='time'?'/天':'')"
								plain type="warning" size="mini" shape="circle" :color="current==index?'#ffeb3b':'#ccc'"
								:borderColor="current==index?'#ffeb3b':'#ccc'"></u-tag>
						</view>
						<view v-if="item.sd_times == -1 || item.sd_times > 0" class="packagetag">
							<u-tag @click="setItem(index)"
								:text="'StableDiffusion绘图'+(item.sd_times == -1?' 无限量':' '+item.sd_times+'次')+(item.sd_type=='time'?'/天':'')"
								plain type="warning" size="mini" shape="circle" :color="current==index?'#ffeb3b':'#ccc'"
								:borderColor="current==index?'#ffeb3b':'#ccc'"></u-tag>
						</view>
						<view v-if="item.mj_times == -1 || item.mj_times > 0" class="packagetag">
							<u-tag @click="setItem(index)"
								:text="'MidJourney绘图'+(item.mj_times == -1?' 无限量':' '+item.mj_times+'次')+(item.mj_type=='time'?'/天':'')"
								plain type="warning" size="mini" shape="circle" :color="current==index?'#ffeb3b':'#ccc'"
								:borderColor="current==index?'#ffeb3b':'#ccc'"></u-tag>
						</view>
					</view>
				</view>
			</view>


			<block v-if="instructions">
				<view style="margin: 20rpx 30rpx;">
					<text style="font-size: 26rpx;color: #9e9e9e;">{{instructions}}</text>
				</view>
			</block>
			<view v-if="appInfo.kf_qrcode_path&&platform == 'H5'" class="explain">
				<view class="kf_qrcode tn-flex justify-center">
					<u--image :showLoading="true" :src="appInfo.kf_qrcode_path" width="150px" height="150px"
						@click="clickuimage(appInfo.kf_qrcode_path)"></u--image>
				</view>
				<view class="u-text-center">
					<!-- #ifdef MP-WEIXIN -->
					长按上方二维码，添加客服购买卡密
					<!-- #endif -->
					<!-- #ifdef H5 -->
					保存上方二维码，添加客服购买卡密
					<!-- #endif -->
				</view>

			</view>
			<view style="padding-top: 136rpx;width: 1rpx;">
				<!-- <Xbottom></Xbottom> -->
			</view>
			<!-- &&platform != 'H5' -->
			<view class="bottom-page" v-if="list.length>0">
				<view class="flex-rb-cc">
					<view>
						<view class="bold mb10">
							<text class="fz-48 pricefont" style="line-height: 62rpx;">{{list[current].price}}</text>
							<text class="fz-24"> 元</text>
						</view>
						<view class="flex-cc">
						</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<view @click="buy" v-if="device != 'ios'" class="bottom-btn">购买</view>
					<view @click="buy" v-else-if="device == 'ios'&&show_ios_pay" class="bottom-btn">购买</view>
					<!-- <view class="bottom-btn" v-else>IOS暂不支持购买</view> -->
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view @click="buy" class="bottom-btn">购买</view>
					<!-- #endif -->
				</view>
				<!-- <Xbottom></Xbottom> -->
			</view>
		</blcok>
		<!-- <block v-else>
				<view v-if="appInfo.kf_qrcode_path" class="explain">
					<view class="kf_qrcode tn-flex justify-center">
						<u--image :showLoading="true" :src="appInfo.kf_qrcode_path" width="150px" height="150px" @click="clickuimage(appInfo.kf_qrcode_path)"></u--image>
					</view>
					<view class="u-text-center">
						<!-- #ifdef MP-WEIXIN -->
		<!-- 长按上方二维码，添加客服了解详情 -->
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<!-- 保存上方二维码，添加客服了解详情 -->
		<!-- #endif -->
		<!-- </view>
				</view>
			</block> -->
		<block v-if="tabindex == everyday">
			<view v-if="plan.sign>0" class="task-item flxe align-center justify-between">
				<view class="task-title">
					<view class="task-content">
						签到领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{userData.sign_count_today}}/1)
					</view>
					<view class="task-frequency">{{plan.sign}}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
					</view>
				</view>
				<view v-if="userData.sign_count_today == 1" class="task-buttons">立即签到</view>
				<view v-else class="task-button" @click="memberaddCoin('sign')">立即签到</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="plan.video>0" class="task-item flxe align-center justify-between">
				<view class="task-title">
					<view class="task-content">
						观看视频领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{userData.video_count_today}}/{{plan.video_limit}})
					</view>
					<view class="task-frequency">{{plan.video}}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
					</view>
				</view>
				<view v-if="userData.video_count_today == plan.video_limit" class="task-buttons">立即观看</view>
				<view v-else class="task-button" @click="showInterstitialAd">立即观看</view>
			</view>
			<view v-if="plan.share>0" class="task-item flxe align-center justify-between">
				<view class="task-title">
					<view class="task-content">
						分享给好友领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{userData.share_count_today}}/{{plan.share_limit}})
					</view>
					<view class="task-frequency">{{plan.share}}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次
					</view>
				</view>
				<block>
					<view v-if="userData.share_count_today == plan.share_limit" class="task-buttons">立即分享</view>
					<view v-else class="task-button">立即分享</view>
				</block>

				<button v-if="userData.share_count_today < plan.share_limit" class="share-button"
					open-type="share"></button>
				<!-- <button class="share-button"
					open-type="share"></button>	 -->
			</view>
			<!-- #endif -->
			<!-- <block v-if="$platform.get() === 'wxOfficialAccount'">
			<view class="task-item flxe align-center justify-between">
				<view class="task-title">
					<view class="task-content">
						分享给好友领{{appInfo.number_alias?appInfo.number_alias:'点数'}}(今日{{ userData.share_count_today ? userData.share_count_today : 0 }}/{{ plan.share_limit ? plan.share_limit : 0 }})
					</view>
					<view class="task-frequency">{{ plan.share ? plan.share : 0 }}{{appInfo.number_alias?appInfo.number_alias:'点数'}}/次</view>
				</view>
				<block>
					<view  v-if="userData.share_count_today == plan.share_limit" class="task-buttons">立即分享</view>
					<view v-else @click="tabh5share" class="task-button">立即分享</view>
				</block>
			</view>
			</block> -->

			<!-- device == 'ios'&&!show_ios_pay -->
			<view style="margin: 30rpx;">
				<wike-ad></wike-ad>
			</view>

		</block>

		<!-- <u-loading-page :loading="loading" loading-text="正在加载" icon-size="35" color="#9e9e9e" loadingColor="#9e9e9e">
		</u-loading-page> -->
		<!-- #ifdef H5 -->
		<u-popup :show="h5share" mode="center" @close="offh5share">
			<view class="cu-dialog">
				<image class="guide-img" src="http://shopro.7wpp.com/imgs/modal/share_guide.png" mode=""></image>
			</view>
		</u-popup>
		<!-- #endif -->
		<wike-loading-page :isLoading="isLoading"></wike-loading-page>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import ShoproPay from '@/common/pay';
	import share from '@/common/share';
	import {
		API_STEROOT,
	} from '@/common/request/request';
	let rewardedVideoAd = null;
	let sharetime;
	export default {
		data() {
			return {
				tabindex: 0,
				current: 0,
				list: [],
				device: this.$platform.device(),
				loading: true,
				tabList: [


					{
						id: 1,
						name: '购买点数'
					},
					{
						id: 2,
						name: '购买会员套餐'
					},
					// {
					// 	id: 3,
					// 	name: '免费领次数',
					// 	badge: {
					// 		isDot: true
					// 	}
					// },
				],
				tobheight: 45,
				platform: this.$platform.get(),
				plan: {},
				show_ios_pay: false,
				isLoading: true,
				type: 1,
				instructions: '',
				h5share: false,
				showshare: false,
				everyday: 2,
				showtabs: true
			}
		},
		computed: {
			...mapGetters(['appInfo', 'userInfo', 'userData', 'isLogin'])
		},
		watch: {
			appInfo: function(e) {
				if (this.isLogin) {
					this.getUserData();
				}
			}
		},
		onUnload() {

			share.setShareInfo();
		},
		onLoad(e) {
			// console.log(e);
			var that = this;
			if (this.platform == 'wxMiniProgram') {
				var menumtop = uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight
				var paddingtop = uni.getSystemInfoSync().statusBarHeight + menumtop
				this.tobheight = (menumtop + paddingtop + uni.getMenuButtonBoundingClientRect().height)
			}
			// if (e && e.id) {
			// 	this.tabindex = Number(e.id)
			// 	if (Number(e.id) < 3) {
			// 		this.type = Number(e.id)
			// 		this.memberlist();
			// 	} else {
			// 		this.isLoading = false
			// 	}

			// } else {

			// }

			this.getPlan()

			// #ifdef MP-WEIXIN
			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: this.appInfo.video_id
				})
				rewardedVideoAd.onLoad(() => {
					// console.log('onLoad event emit')
				});
				rewardedVideoAd.onError(err => {
					// console.log('onError event emit', err)
				});
				rewardedVideoAd.onClose(res => {
					if (res && res.isEnded) {
						// 正常播放结束，可以下发游戏奖励
						uni.showToast({
							title: (this.appInfo.number_alias ? this.appInfo.number_alias + ' +' :
								'点数 +') + this.plan.video
						})
						this.memberaddCoin('video')
					} else {
						// 播放中途退出，不下发游戏奖励
						uni.showToast({
							title: '看完视频后才可获得' + this.appInfo.number_alias ? this.appInfo.number_alias +
								'奖励' : '点数奖励',
							icon: 'none'
						});
					}
				});
			}
			// #endif
			// if (!this.appInfo.time_member || this.appInfo.time_member != 1) {
			// 	this.tabList.splice(1,1)
			// }



			// #ifdef H5
			share.setShareInfo({
				title: that.appInfo.site_name,
				image: that.appInfo.share_img_path,
			});

			// #endif
		},

		onShareAppMessage: function(res) {

			if (res.from === 'button') {
				this.memberaddCoin('share')
			}
			return {
				title: this.appInfo.site_name,
				imageUrl: this.appInfo.share_img_path
			}

		},
		onShow() {
			if (this.isLogin) {
				this.getUserData();
			} else {
				// if (getApp().from == 'index') {
				// 	uni.setStorageSync('route', '/pages/index/index');
				// } else {
				uni.setStorageSync('route', '/pages/user/member/member');
				// }
				uni.navigateTo({
					url: '/pages/user/signin'
				});
				return;
			}
			// this.getPlan()
		},
		methods: {
			...mapActions(['getUserData']),
			memberlist(i) {
				// console.log(i);
				var that = this;
				this.$http('member.list', {
					type: i
				}).then(res => {

					if (res.code == 0) {
						uni.setNavigationBarTitle({
							title: this.appInfo.site_name
						});

						// #ifdef MP-WEIXIN
						if (this.device != 'ios') {
							this.list = res.data
						} else if (this.device == 'ios' && this.show_ios_pay) {
							this.list = res.data
						} else {
							this.list = []
							this.showtabs = false
						}
						// #endif
						// #ifdef H5
						this.list = res.data

						console.log('套餐列表：', this.list);
						// #endif


						this.isLoading = false


					} else {
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
						this.isLoading = false
					}
				});
			},
			tabh5share() {
				this.h5share = true
				sharetime = setTimeout(() => {
					this.showshare = true
					// console.log(this.showshare,1);
				}, 3000);
			},
			offh5share() {
				this.h5share = false
				// console.log(this.showshare,2);
				if (this.showshare) {
					this.memberaddCoin('share');
					this.showshare = false
				} else {
					clearTimeout(sharetime)
				}
			},
			clickuimage(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			setItem(e) {
				// console.log(e);
				this.current = e
			},
			showInterstitialAd() {
				// rewardedVideoAd.show();
				if (rewardedVideoAd && this.appInfo.video_status == 1) {
					uni.showToast({
						title: '广告拉取中',
						icon: 'loading'
					})
					rewardedVideoAd.show().catch(() => {
						// 失败重试
						rewardedVideoAd.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								// console.log('激励视频 广告显示失败')
								uni.showToast({
									title: '广告显示失败',
									icon: 'none'
								})
							})
					})
				} else {
					uni.showToast({
						title: '广告显示错误',
						icon: 'none'
					})
				}
			},
			ytrty() {
				var that = this;
				if (that.$Route.query.id) {
					for (var i = 0; i < this.tabList.length; i++) {
						// console.log(that.$Route.query.id);

						if (that.tabList[i].id == that.$Route.query.id) {
							that.tabindex = i
							// console.log(that.$Route.query.id);
							if (that.$Route.query.id == 3) {
								this.isLoading = false
								return;
							}
							this.memberlist(that.$Route.query.id);


						}
					}
				} else {
					this.memberlist(that.tabList[0].id);
				}
			},
			systemmember() {
				this.$http('conf.getGroupConf', {
					group: 'system.member'
				}).then(res => {
					if (res.code == 0) {
						this.instructions = res.data.instructions
						// console.log(this.instructions);
					}
				})
			},
			getPlan() {
				let that = this;
				this.$http('conf.getGroupConf', {
					group: 'system.plan'
				}).then(res => {
					if (res.code == 0) {

						for (var i = 0; i < this.tabList.length; i++) {
							if (that.tabList[i].id == 1) {

								that.tabList[i].name = '购买' + (that.appInfo.number_alias ? that.appInfo
									.number_alias : '点数')
							}
						}
						this.plan = res.data
						// console.log();
						// console.log(this.appInfo.time_member);
						if (this.appInfo.is_time_front && this.appInfo.is_time_front == 1) {
							this.tabList.reverse()
						}
						if (this.appInfo.time_member && this.appInfo.time_member == 2) {
							for (var i = 0; i < this.tabList.length; i++) {
								if (that.tabList[i].id == 2) {
									this.tabList.splice(i, 1)

								}
							}
						}

						if (this.appInfo.number_member && this.appInfo.number_member == 2) {
							for (var i = 0; i < this.tabList.length; i++) {
								if (that.tabList[i].id == 1) {
									// console.log(i);
									this.tabList.splice(i, 1)

								}
							}
						}

						let tntv = {
							id: 3,
							name: '免费领' + (that.appInfo.number_alias ? that.appInfo.number_alias : '点数'),
							badge: {
								isDot: true
							}
						}

						this.tabList.push(tntv)
						this.everyday = this.tabList.length == 2 ? 1 : 2
						this.ytrty()
						this.systemmember()
						if (res.data.is_ios_pay == 1 && that.checkTimeLimit()) {
							// ios可以付钱
							that.show_ios_pay = true
						}
					}

				})
			},
			buy() {
				let that = this;
				// console.log(that.tabindex);
				if (that.tabindex == 0 && that.userData.vip_time == 9999) {
					uni.showModal({
						confirmColor: '#207CF7',
						confirmText: '确定',
						cancelText: '退出',
						title: '提示',
						content: '您已购买永久会员，无需再次购买',
						success(src) {
							if (src.confirm) {

							} else if (src.cancel) {
								uni.navigateBack()
							}
						}
					});
					return
				}
				that.$http('order.create', {
					pay_type: 'wechat',
					link_id: that.list[that.current].id
				}).then(res => {
					if (res.code === 0) {
						if (that.userInfo.openid_miniapp || that.userInfo.openid_wechat) {
							let pay = new ShoproPay('wechat', res.data, 0);
						} else {
							// console.log(res.data);
							that.paytest(res.data.order_number, res.data.id)
						}

					} else {
						that.$u.toast(res.msg);
					}
				});
			},
			paytest(e, id) {
				uni.showLoading({
					title: '支付跳转中...'
				})
				let uniacid = uni.getStorageSync("uniacid") || "";
				this.$http('pay.hupijiaopay', {
					order_number: e,
					is_commission: 0,
					return_url: window.location.href.split('/h5')[0] +
						'/h5/pages/user/public/paymentdetail?uniacid=' + uniacid + '&orderType=0&orderId=' + id,
					callback_url: window.location.href,
				}).then(res => {
					// console.log(res);
					if (res.code === 0) {
						// console.log(res.data);

						window.location.href = res.data.url
						// console.log('return_url', res.data.url);
						// uni.navigateTo({
						// 	url:'pages/user/public/webview?url='+res.data.url
						// })

					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			gettabs(e) {
				// console.log(e.index);
				this.tabindex = e.index
				if (this.tabList.length == 3) {
					this.list = []
					if (e.index < 2) {
						// this.type = e.id
						this.current = 0

						this.memberlist(e.id);
					}
				} else {
					this.list = []
					if (e.index < 1) {
						// this.type = e.id
						this.current = 0

						this.memberlist(e.id);
					}
				}




			},
			getrecord() {
				uni.navigateTo({
					url: '/pages/user/member/record'
				})
			},
			goBack() {
				uni.navigateBack({

				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index'
				})
			},
			memberaddCoin(e) {
				this.$http('member.addCoin', {
					type: e,
				}).then(res => {
					if (res.code === 0) {
						if (e == 'sign') {
							uni.showToast({
								title: (this.appInfo.number_alias ? this.appInfo.number_alias + ' +' :
									'点数 +') + this.plan.sign
							})
						}
						if (e == 'share') {
							setTimeout(() => {
								uni.showToast({
									title: (this.appInfo.number_alias ? this.appInfo.number_alias +
										' +' : '点数 +') + this.plan.share
								})
							}, 1000)
						}
						this.getUserData();
					}
				});
			},
			checkTimeLimit() {
				if (this.plan.open_period == 1) {
					return true;
				} else {
					if (this.time_range('8:00', '20:00')) {
						return false;
					} else {
						return true;
					}
				}
			},
			time_range(beginTime, endTime) {
				var strb = beginTime.split(':');
				if (strb.length != 2) {
					return false;
				}
				var stre = endTime.split(':');
				if (stre.length != 2) {
					return false;
				}
				var b = new Date();
				var e = new Date();
				var n = new Date();
				b.setHours(strb[0]);
				b.setMinutes(strb[1]);
				e.setHours(stre[0]);
				e.setMinutes(stre[1]);

				if (n.getTime() - b.getTime() > 0 && n.getTime() - e.getTime() < 0) {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.infoBg {
		background: linear-gradient(to right, $tc, $tc2);
	}

	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.03);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.05;
			background-color: #fff;
		}

	}

	.title-text {
		color: #fff;
	}

	.user-avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}

	.ico-vip {
		width: 28rpx;
		height: 28rpx;
	}

	.form {
		margin: 0 30rpx 60rpx;
	}

	.form-choice {
		margin: 20rpx 0;
		padding: 30rpx 40rpx;
		// height: 164rpx;
		background-color: #f5f5f5;
		border-radius: 14rpx;
		position: relative;
	}

	.form-choice.active {
		color: #ffffff;
		// background-color: #207CF7;
		background: linear-gradient(to right, $tc, $tc2);
	}

	.ico-special {
		width: 158rpx;
		height: 48rpx;
	}

	.explain {
		margin: 20rpx 0 20rpx;
	}

	.explain-title {
		margin: 0 0 40rpx;
	}

	.explain-item {
		flex-grow: 1;
		text-align: center;
	}

	.kf_qrcode {
		margin-bottom: 20rpx;
	}

	.ico-explain {
		padding: 18rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 50%;
	}

	.bottom-page {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 40rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
		background-color: #F5F5F5;
	}

	.ico-check {
		width: 28rpx;
		height: 28rpx;
	}

	.bottom-btn {
		margin: 20rpx 0;
		width: 200rpx;
		height: 84rpx;
		font-weight: bold;
		line-height: 84rpx;
		text-align: center;
		color: #ffffff;
		background: linear-gradient(to right, $tc, $tc2);
		border-radius: 42rpx;
	}

	.flex-rb-cc {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flex-cc {
		display: flex;
		align-items: center;
	}

	.ml20 {
		margin-left: 30rpx;
		width: 100%;
	}

	.mb10 {
		margin: 10rpx;
	}

	.fz-24 {
		font-size: 24rpx;
	}

	.fz-38 {
		font-size: 38rpx;
	}

	.mt10 {
		margin-top: 10rpx;
	}

	.fc-999 {
		color: #999;
	}

	.fz-32 {
		font-size: 32rpx;
	}

	.fz-48 {
		font-size: 48rpx;
	}

	.pricefont {
		font-weight: bold;
	}

	.bold {
		font-weight: bold;
	}

	.fc-white5 {
		color: white;
	}

	.fc-c5 {
		color: #ccc;
		// color: #9e9e9e;
	}

	.line-through {
		text-decoration-line: line-through;
		margin-right: 10rpx;
	}

	.form-special {
		//    position: absolute;
		//    left: 0;
		// top: 0;
		font-size: 24rpx;
	}

	.selected {
		color: #ffeb3b;
	}

	.fz-42 {
		font-size: 42rpx;
	}

	.tr {
		display: flex;
		// flex-direction: column;
		align-items: flex-end;
	}

	.task-item {
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 14rpx;
		background-color: #f5f5f5;

		.task-content {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 12rpx;
		}

		.task-frequency {
			color: #f9ae3d;
		}

		.task-button {
			background: linear-gradient(to right, $tc, $tc2);
			color: #fff;
			padding: 12rpx 22rpx;
			font-size: 25rpx;
			border-radius: 30rpx;
		}

		.task-buttons {
			background: #9e9e9e;
			color: #fff;
			padding: 12rpx 22rpx;
			font-size: 25rpx;
			border-radius: 30rpx;
		}
	}

	.share-button {
		position: absolute;
		width: 70px;
		height: 28px;
		border-radius: 30rpx;
		right: 60rpx;
		opacity: 0;
	}

	.cu-dialog {
		position: fixed;
		top: 60rpx;
		left: 100rpx;
	}

	.guide-img {
		width: 580rpx;
		height: 430rpx;
	}

	.packagetag {
		margin-right: 15rpx;
		margin-top: 15rpx;
	}
</style>