<template>
	<view class="whole">
		<view class="topBox">
			<view class="box">
				<view class="num">
					<text>{{ scoreInfo.score * 1 }}</text>&nbsp;积分
				</view>
				<view>
					<view class="pie flex_c" v-if="shopInfo.score_tips" @click="showInfo = true">积分规则</view>
					<view class="pie flex_c" @click="toScoreDetail()">查明细</view>
				</view>
			</view>
			<view class="desc">兑换超值奖品，兑越多，省越多</view>
			<view class="tip"><up-icon name="info-circle" color="#fff" :top="2" />&nbsp;福利款、活动产品、跨境产品不能使用且不能叠加</view>
		</view>
		
		<view class="descBox">
			<view class="title">获取更多积分</view>
			<view class="row" v-if="!scoreInfo.is_subscribe || !scoreInfo.is_subscribe_group">
				<view class="box">
					<up-icon name="bookmark" size="20" />
					<view class="tit">首次订阅团长</view>
					<text>得</text>&nbsp;<text class="orange">{{shopInfo.score_subscribe * 1 || 0}}积分</text>
				</view>
				<view v-if="scoreInfo.is_subscribe_group === 0" class="danger" @click="toSubscribe()">立即订阅</view>
				<view v-else class="danger" @click="cancelSubscribe()" style="opacity: 0.5;">立即订阅</view>
			</view>
			<div class="guanzhu" v-if="!scoreInfo.is_subscribe">
				<div class="txt">关注公众号接收最新开团消息</div>
				<div class="anniu" @click="followSubscribe()">关注</div>
			</div>
			<view class="row">
				<view class="box">
					<up-icon name="bag" size="20" />
					<view class="tit">跟团购物金额</view>
					<text>消费1元</text>&nbsp;<text class="orange">得{{shopInfo.score_trade * 1 || 0}}积分</text>
				</view>
				<view class="danger" @click="toFollowGroup()">去跟团</view>
			</view>
			<view class="row">
				<view class="box">
					<up-icon name="share" size="20" />
					<view class="tit">跟团后分享至群聊</view>
					<text>得</text>&nbsp;<text class="orange">{{shopInfo.score_trade_share * 1 || 0}}积分</text>
				</view>
				<view class="danger" @click="toFollowGroup()">去跟团</view>
			</view>
			<view class="row">
				<view class="box">
					<up-icon name="chat" size="20" />
					<view class="tit">收货后晒单</view>
					<text>得</text>&nbsp;<text class="orange">{{shopInfo.score_comment * 1 || 0}}积分</text>
				</view>
				<view class="danger" @click="toComment()">去晒单</view>
			</view>
			<view class="row" v-if="shopInfo.score_invite_new_user * 1">
				<view class="box">
					<up-icon name="man-add" size="20" />
					<view class="tit">邀请新用户</view>
					<text>得</text>&nbsp;<text class="orange">{{shopInfo.score_invite_new_user * 1 || 0}}积分</text>
				</view>
				<button @click="handleShare()" class="danger" id="invite">去邀请</button>
			</view>
			<view class="row" v-if="shopInfo.score_cash">
				<view class="box">
					<up-icon name="rmb-circle" size="20" />
					<view class="tit">订单积分抵扣</view>
					<text>100积分抵</text>&nbsp;<text class="orange">{{shopInfo.score_cash_amount * 1 || 0}}元</text>
				</view>
				<view class="danger" @click="toFollowGroup()">去跟团</view>
			</view>
		</view>
		<view class="descTxt">如您发生订单退款、取消订阅，将会扣除相应的积分</view>
		
		<view class="couponTit">
			<text>积分兑换奖励</text>
			<view @click="toMyPrize">我的奖品<up-icon name="arrow-right" /></view>
		</view>
		
		<view class="tabsBox">
			<text v-for="(it, index) in tabsList" :key="index" :class="it.id === tabsId ? 'active' : ''" @click="searchPrize(it.id)">{{ it.name }}</text>
		</view>
		
		<view class="couponBox">
			<view class="item" v-for="(item, index) in couponList" :key="item.id">
				<view class="one">
					<view class="label" v-if="item.is_need_use">已兑换抵扣券</view>
					<image v-if="item.shop_goods" @click="toGoodDetail(item)" :src="item.shop_goods.face_img + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					<view class="box" v-else>
						<view class="num">
							<view class="prefix">￥<text>{{item.amount * 1}}</text></view>
						</view>
						<view class="txt" v-if="item.use_type === 10">无门槛券</view>
						<view class="txt" v-else>满减券</view>
					</view>
				</view>
				<view class="two">
					<view class="tit" v-if="item.shop_goods">{{item.shop_goods && item.shop_goods.title}}</view>
					<template v-else>
						<view class="tit" v-if="item.use_type === 10">无门槛券</view>
						<view class="tit" v-else>满{{item.full_amount * 1}}减{{item.amount * 1}}优惠券</view>
					</template>
					
					<view class="red" v-if="item.shop_goods && item.shop_goods_id">
						¥<template v-if="item.shop_goods.price > 0">{{((item.shop_goods.price * 100 - item.amount * 100) / 100).toFixed(2)}}</template>
						<template v-else-if="item.shop_goods.min_price === item.shop_goods.max_price">{{((item.shop_goods.min_price * 100 - item.amount * 100) / 100).toFixed(2)}}</template>
						<template v-else>{{((item.shop_goods.min_price * 100 - item.amount * 100) / 100).toFixed(2)}}~{{((item.shop_goods.max_price * 100 - item.amount * 100) / 100).toFixed(2)}}</template>+{{item.exchange_score * 1}}积分
						&nbsp;<text style="color: #9C9C9C;font-size: 26rpx;text-decoration: line-through;">
							¥<template v-if="item.shop_goods.price > 0">{{item.shop_goods.price}}</template>
							<template v-else-if="item.shop_goods.min_price === item.shop_goods.max_price">{{item.shop_goods.min_price}}</template>
							<template v-else>{{item.shop_goods.min_price}}~{{item.shop_goods.max_price}}</template>
						</text>
					</view>
					<view class="red" v-else>{{item.exchange_score * 1}}积分</view>
					
					<view class="txt">已兑{{item.exchange_number}}份</view>
					
					<view v-if="item.is_need_use" class="btn" @click="openExchange(item)">去下单</view>
					<template v-else>
						<template v-if="item.number !== 0">
							<view v-if="scoreInfo.score * 1 < item.exchange_score * 1" class="btn dis">积分不足</view>
							<view v-else-if="compareDate(currentTime, item.start_time) && gapMilliSecond(item.start_time) > 0" class="btn dis small">	
								<up-count-down :time="gapMilliSecond(item.start_time)" format="DD天HH时mm分ss秒" @finish="finish(item)" />后开抢
							</view>
							<view v-else class="btn" @click="openExchange(item)">兑换</view>
						</template>
						<view v-else class="btn dis">已兑完</view>
					</template>
					
				</view>
			</view>
			<view v-if="loading" class="loadbox">
				<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
			</view>
			<view v-if="couponList.length !== 0 && !loading && (page == last_page)" class="noEmpty">没有更多了</view>
			<view v-if="couponList.length === 0 && !loading" class="noEmpty">团长还没有添加奖品</view>
		</view>
		
		<!-- 积分兑换奖励 -->
		<up-modal :show="showDialog" :showCancelButton="false" :showConfirmButton="false">
			<view class="dialogBox">
				<view style="position: absolute;top: 0;right: 0;" @click="closeDialog">
					<up-icon name="close" size="20" />
				</view>
				
				<view class="title">
					<up-icon v-if="status === 1" name="checkmark-circle-fill" size="20" color="#04BE02" />&nbsp;
					<text v-if="status === 1">兑换成功</text>
					<text v-if="status === 0">积分兑换奖励</text>
				</view>
				<template v-if="status === 0">
					<view class="mesg" v-if="couponInfo.use_type === 10">消耗<text>{{couponInfo.exchange_score * 1}}</text>积分兑换无门槛券</view>
					<view class="mesg" v-if="couponInfo.use_type === 30">消耗<text>{{couponInfo.exchange_score * 1}}</text>
						积分兑换满{{couponInfo.full_amount * 1}}减{{couponInfo.amount * 1}}优惠券
					</view>
				</template>
				
				<view class="box">
					<view class="numbox">
						<view class="num">￥<text>{{couponInfo.amount * 1}}</text></view>
						<view style="font-size: 22rpx;color: #999;">{{getOldDay('y-m-d h:i:s', -1 * couponInfo.valid_days)}} 到期</view>
					</view>
					<view class="row">
						<view class="tit" v-if="couponInfo.use_type === 10">无门槛券</view>
						<view class="tit" v-else>满减券</view>
						<!-- <view class="txt">在该团长团可用<br>领取后{{couponInfo.valid_days}}天内有效,特殊活动、跨境产品不能使用</view> -->
						<view class="txt"><up-icon name="error-circle" size="14" color="#f00" />福利款、活动产品、跨境产品不能使用且不能叠加</view>
					</view>
				</view>
				<view class="btn" v-if="status === 0" @click="toExchange()">确认兑换</view>
				<view class="btn" v-if="status === 1" @click="toUse()">去使用</view>
			</view>
		</up-modal>
		
		<!-- 实物兑换提示 -->
		<up-modal :title="'确定使用' + goodsCoupon.exchange_score + '积分兑换该商品吗？'"
			:show="showTips" @confirm="toExchangeGoods()" :showCancelButton="true" @cancel="showTips = false" cancelButtonText="再想想"
			confirmButtonText="兑换并购买" :confirmColor="Color">
			<view style="text-align: center;font-size: 28rpx;">
				兑换后将发放一张{{goodsCoupon.amount}}元的商品抵扣券，券后购买仅需
				<text :style="{color: Color}" v-if="goodsCoupon.shop_goods">
					<template v-if="goodsCoupon.shop_goods.price > 0">{{((goodsCoupon.shop_goods.price * 100 - goodsCoupon.amount * 100) / 100).toFixed(2)}}</template>
					<template v-else-if="goodsCoupon.shop_goods.min_price === goodsCoupon.shop_goods.max_price">{{((goodsCoupon.shop_goods.min_price * 100 - goodsCoupon.amount * 100) / 100).toFixed(2)}}</template>
					<template v-else>{{((goodsCoupon.shop_goods.min_price * 100 - goodsCoupon.amount * 100) / 100).toFixed(2)}}~{{((goodsCoupon.shop_goods.max_price * 100 - goodsCoupon.amount * 100) / 100).toFixed(2)}}</template>
				</text>元
			</view>
		</up-modal>
		
		<up-popup :round="10" :show="showInfo" closeable mode="bottom" custom-style="height: 80%" @close="showInfo = false">
			<view class="infoBox">
				<view class="tit">积分规则</view>
				<view class="row">
					<text v-text="shopInfo.score_tips"></text>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { gapTime, compareDate, showToast, getOldDay, uniShare } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	
	export default {
		setup() {
			const data = reactive({
				page: 1,
				last_page: 0,
				couponList: [],
				scoreInfo: {
					score: 0,
					is_subscribe: 1,
					is_subscribe_group: 1
				},
				showDialog: false,
				couponInfo: {},
				shopInfo: {},
				status: 0,
				loading: false,
				currentTime: '',
				goodsCoupon: {},
				showTips: false,
				tabsList: [
					{ id: 1, name: '兑换优惠券' },
					{ id: 2, name: '兑换实物' }
				],
				tabsId: 1,
				use_types: '10,30',
				isReachBottom: true,
				shareUrl: '',
				Color: '',
				Theme: 0,
				bgColor: '',
				priceColor: '',
				index_url: '',
				showInfo: false
			})
			
			function getUserInfo() {
				get('/api/v1/shopScore/user').then((res) => {
					data.scoreInfo = res.data.user
					uni.setStorageSync('subscribe', res.data.user.is_subscribe)
				})
			}
			
			function getShopInfo() {
				get('/api/v1/shop').then((res) => {
					data.shopInfo = res.data
				})
			}
			
			async function getFetchList(val = 1) {
				uni.showLoading({
					title: '加载中...'
				})
				data.loading = true
				getCurrentTime()
				await get('/api/v1/shopScore/coupon', { page: data.page, pageSize: 10, use_types: data.use_types }).then((res) => {
					data.last_page = res.meta.last_page
					data.couponList = val == 0 ? res.data : data.couponList.concat(res.data)
					data.loading = false
					uni.hideLoading()
					data.isReachBottom = false
					setTimeout(() => {
						data.isReachBottom = true
					}, 500)
				}).catch(() => {
					data.loading = false
				})
			}
			
			function toGoodDetail(item, type = 0) {
				uni.navigateTo({
					url: '/pages/mine/scoreShop/good?id=' + item.id + '&type=' + type
				})
			}
			
			function openExchange(item) {
				if(item.shop_goods_id) {
					if(item.is_need_use) {
						toGoodDetail(item, 1)
					} else {
						data.goodsCoupon = item
						data.showTips = true
					}
				} else {
					if(item.is_need_use) {
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else {
						data.status = 0
						data.couponInfo = item
						data.showDialog = true
					}
				}
			}
			
			function toExchange() {
				post('/api/v1/shopScore/coupon/exchange', { shop_coupon_id: data.couponInfo.id, exchange_score: data.couponInfo.exchange_score}).then((res) => {
					this.getUserInfo()
					data.couponInfo.exchange_number += 1
					data.couponInfo.number -= 1
					data.status = 1
				})
			}
			
			function toExchangeGoods() {
				post('/api/v1/shopScore/coupon/exchange', { shop_coupon_id: data.goodsCoupon.id, exchange_score: data.goodsCoupon.exchange_score}).then((res) => {
					this.getUserInfo()
					data.couponInfo.exchange_number += 1
					data.couponInfo.number -= 1
					const goods = [{
						shop_goods_id: data.goodsCoupon.shop_goods_id,
						shop_goods_sku_id: 0,
						num: 1,
						shop_group_goods_id: 0
					}]
					uni.setStorageSync('shopGoods', goods)
					data.goodsCoupon.is_need_use = true
					data.showTips = false
					uni.showToast({
						title: '兑换成功',
						icon: 'success',
						duration: 1000,
						mask: true,
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/mine/scoreShop/good?id=' + data.goodsCoupon.id + '&shop_goods_id=' + data.goodsCoupon.shop_goods_id + '&type=0'
								})
							}, 1000)
						}
					})
				})
			}
			
			function toUse() {
				data.showDialog = false
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
			
			function closeDialog() {
				data.showDialog = false
			}
			
			function toScoreDetail() {
				uni.navigateTo({
					url: '/pages/mine/scoreShop/detail'
				})
			}
			
			function getCurrentTime() {
				var date = new Date()
				var Y = date.getFullYear() + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
				var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
				var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
				data.currentTime = Y + M + D + h + m + s
			}
			
			function toFollowGroup() {
				uni.switchTab({ url: '/pages/index/index' })
			}
			
			function toComment() {
				uni.navigateTo({
					url: '/pages/order/list/index?type=4'
				})
			}
			
			function toSubscribe() {
				post(`/api/v1/goods/subscribe/0`).then((res) => {
					data.scoreInfo.is_subscribe_group = 1
					showToast('订阅成功', 'success')
					if(data.scoreInfo.is_subscribe === 0) {
						uni.navigateTo({
							url: '/pages/article/index'
						})
					}
				})
			}
			
			const followSubscribe = () => {
				uni.navigateTo({
					url: '/pages/article/index'
				})
			}
			
			function cancelSubscribe() {
				post(`/api/v1/goods/subscribe/cancel/0`).then((res) => {
					data.scoreInfo.is_subscribe_group = 0
					showToast('已退订')
				})
			}
			
			function searchPrize(val) {
				data.isReachBottom = false
				data.tabsId = val
				data.use_types = val === 1 ? '10,30' : '21'
				data.page = 1
				data.couponList = []
				getFetchList()
			}
			
			function toMyPrize() {
				uni.navigateTo({
					url: '/pages/mine/scoreShop/myprize'
				})
			}
			
			function gapMilliSecond(startTime) {
				let dateTime = new Date(startTime.replace(/-/g, "/"))
				let dateNow = new Date()
				return dateTime.getTime() - dateNow.getTime()
			}
			
			function onChange(e, item) {
				item.timeData = e.detail
			}
			
			function finish(item) {
				getCurrentTime()
			}
			
			const getShareUrl = () => {
				post('/api/v1/user/share', {
					page: 'pages/index/index',
					query: ``
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			
			const getIndexUrl = () => {
				post('/api/v1/user/share', {
					page: 'pages/mine/scoreShop/index',
					query: ``
				}).then((res) => {
					data.index_url = res.data.path
				})
			}
			
			function handleShare() {
				let title = data.shopInfo.share_title
				let imageUrl = data.shopInfo.share_image
				let path = data.shareUrl
				uniShare(title, imageUrl, path)
			}
			
			return {
				uniShare,
				gapTime,
				compareDate,
				getOldDay,
				...toRefs(data),
				getFetchList,
				toExchange,
				toUse,
				closeDialog,
				openExchange,
				toGoodDetail,
				toScoreDetail,
				getUserInfo,
				getShopInfo,
				getCurrentTime,
				toSubscribe,
				followSubscribe,
				toComment,
				toFollowGroup,
				cancelSubscribe,
				toExchangeGoods,
				searchPrize,
				toMyPrize,
				gapMilliSecond,
				onChange,
				finish,
				getShareUrl,
				getIndexUrl,
				handleShare
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.couponList = []
			this.getUserInfo()
			this.getFetchList()
			this.getIndexUrl()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			if(!this.isReachBottom) {
				return
			}
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList()
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			await this.getShopInfo()
			this.getShareUrl()
			this.getIndexUrl()
			this.Color = uni.getStorageSync('theme_color')
			this.Theme = uni.getStorageSync('theme_index') * 1
			this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
		},
		onShow() {
			this.page = 1
			this.getFetchList(0)
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex_c{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.whole{
		.topBox{
			padding: 50rpx 30rpx 50rpx 40rpx;
			box-sizing: border-box;
			color: #fff;
			background: v-bind('Color');
			width: calc(100% - 60rpx);
			border-radius: 16rpx;
			margin: 0 30rpx;
			.box{
				font-size: 32rpx;
				line-height: 1;
				display: flex;
				justify-content: space-between;
				text{
					font-size: 60rpx;
					font-weight: bold;
					line-height: 1;
				}
				.num{
					width: calc(100% - 200rpx);
					line-height: 1;
				}
			}
			.desc{
				font-size: 26rpx;
				margin-top: 20rpx;
			}
			.tip{
				font-size: 22rpx;
				margin-top: 10rpx;
				color: #e5e5e5;
			}
			.pie{
				width: 180rpx;
				height: 60rpx;
				color: #fff;
				font-size: 26rpx;
				border-radius: 60rpx;
				margin-bottom: 24rpx;
				background-color: rgba(255,255,255,0.3);
			}
		}
		.descBox{
			background: #fff;
			margin-top: 30rpx;
			.title{
				padding: 30rpx;
				color: #333;
				font-weight: 600;
				font-size: 32rpx;
			}
			.row{
				border-top: 1px solid #F6F6F6;
				padding: 24rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.box{
					width: calc(100% - 200rpx);
					display: flex;
					align-items: center;
					.tit{
						color: #444;
						font-weight: 600;
						font-size: 30rpx;
						margin: 0 10rpx 0 8rpx;
					}
					text{
						color: #888;
						font-size: 28rpx;
						&.orange{
							color: v-bind('Color');
						}
					}
				}
				.danger{
					width: 140rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: v-bind('Color');
					color: #fff;
					border-radius: 8rpx;
					font-size: 26rpx;
				}
			}
		}
		.descTxt{
			font-size: 24rpx;
			color: #888;
			padding: 16rpx 30rpx 20rpx;
		}
		.couponTit{
			padding: 30rpx;
			color: #9C9C9C;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			border-bottom: 1px solid #e5e5e5;
			text{
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}
		}
		.couponBox{
			padding: 30rpx 30rpx 2px;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 48%;
				margin-bottom: 30rpx;
				margin-right: 4%;
				background-color: #fff;
				border-radius: 8rpx;
				&:nth-child(2n+2) {
					margin-right: 0;
				}
				.one{
					height: 280rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-bottom: 1px solid #F4F4F4;
					position: relative;
					.label{
						position: absolute;
						left: 0;
						top: 0;
						padding: 6rpx 14rpx;
						background-color: rgba(0,0,0,0.6);
						color: #fff;
						font-size: 24rpx;
						border-radius: 0 0 10rpx 0;
					}
					.box{
						color: v-bind('priceColor');
						width: 70%;
						.num{
							border: 1px solid #F3E5E2;
							border-radius: 14rpx;
							border-bottom: 1px dashed #F3E5E2;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FDF8F2;
							height: 120rpx;
							font-weight: bold;
							.prefix{
								font-size: 32rpx;
								display: flex;
								align-items: baseline;
								line-height: 1;
								text{
									font-size: 60rpx;
								}
							}
						}
						.txt{
							border: 1px solid #F3E5E2;
							border-radius: 14rpx;
							border-top: none;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FDF8F2;
							height: 70rpx;
							font-size: 28rpx;
						}
					}
				}
				.two{
					padding: 20rpx;
					.tit{
						font-weight: 600;
						font-size: 26rpx;
						color: #333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.red{
						font-size: 28rpx;
						color: v-bind('Color');
						margin: 10rpx 0;
					}
					.txt{
						font-size: 24rpx;
						color: #9C9C9C;
					}
					.btn{
						font-size: 26rpx;
						color: #fff;
						background-color: v-bind('Color');
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 6rpx;
						margin-top: 20rpx;
						line-height: 60rpx;
						height: 60rpx;
						&.small{
							font-size: 22rpx;
						}
						&.dis{
							opacity: 0.6;
						}
					}
				}
			}
		}
	}
	.dialogBox{
		padding: 0 0 30rpx;
		position: relative;
		.title{
			font-size: 30rpx;
			color: #000;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.mesg{
			font-size: 26rpx;
			color: #666;
			text-align: center;
			margin-top: 16rpx;
			text{
				color: v-bind('Color');
			}
		}
		.box{
			width: 100%;
			height: 180rpx;
			display: flex;
			margin-top: 30rpx;
			.numbox{
				border: 1px solid #F3E5E2;
				border-radius: 8rpx;
				border-right: 1px dashed #F3E5E2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				background-color: #FDF8F2;
				width: 35%;
				text-align: center;
			}
			.num{
				font-weight: bold;
				font-size: 32rpx;
				line-height: 1;
				color: v-bind('Color');
				margin-bottom: 10rpx;
				text{
					font-size: 60rpx;
				}
			}
			.row{
				width: 65%;
				border: 1px solid #F3E5E2;
				border-radius: 8rpx;
				border-left: none;
				display: flex;
				justify-content: center;
				background-color: #FDF8F2;
				padding-left: 24rpx;
				box-sizing: border-box;
				flex-direction: column;
				.tit{
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}
				.txt{
					height: 70rpx;
					font-size: 24rpx;
					color: #9D9D9D;
					margin-top: 10rpx;
				}
			}
			
		}
		.btn{
			width: 100%;
			height: 80rpx;
			background: v-bind('Color');
			font-size: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx auto 0;
			border-radius: 8rpx;
		}
	}
	.loadbox{
		padding: 30rpx 0;
		margin: 0 auto;
	}
	.noEmpty{
		color:#999;
		font-size: 24rpx;
		text-align:center;
		padding: 30rpx 0;
		width: 100%;
	}
	.guanzhu {
		font-size: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: v-bind('bgColor');
		padding: 15rpx 30rpx;
		.anniu {
			background: v-bind('Color');
			border-radius: 8rpx;
			color: #fff;
			font-size: 24rpx;
			padding: 5rpx 25rpx;
		}
	}
	.tabsBox{
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		position: relative;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		height: 90rpx;
		text{
			margin-right: 30rpx;
			position: relative;
			display: flex;
			align-items: center;
			height: 100%;
			&:after{
				content: "";
				position: absolute;
				display: block;
				width: 80rpx;
				height: 4rpx;
				background-color: v-bind('Color');
				bottom: 0;
				left: 50%;
				margin-left: -40rpx;
				border-radius: 6rpx;
				opacity: 0;
				transform: scaleX(0);
				transition: all .3s cubic-bezier(.18,.89,.17,.88),opacity .2s ease;
			}
			&.active{
				color: v-bind('Color');
				&:after{
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}
	}
	.infoBox{
		.tit{
			font-size: 30rpx;
			line-height: 100rpx;
			margin-bottom: 30rpx;
			font-weight: 600;
			text-align: center;
		}
		.row{
			font-size: 28rpx;
			line-height: 60rpx;
			padding: 0 30rpx 80rpx;
			box-sizing: border-box;
			height: 70vh;
			overflow: auto;
		}
	}
	::v-deep .btn {
		.u-count-down__text {
			color: #fff !important;
			font-size: 22rpx !important;
		}
	}
</style>
