<template>
	<view class="whole">
		<view class="item" v-for="(item, index) in msgList" :key="item.id">
			<view class="title">
				<view class="tit" v-if="msgType == 6">{{item.title}}</view>
				<view class="tit" v-else>{{item.content && item.content.title}}</view>
				<view class="time">{{item.created_at && item.created_at.slice(0, 16)}}</view>
			</view>
			<view class="row">
				<view class="icon">
					<view v-if="item.content_type === 13" class="type">
						<text class="iconfont icon-shoukuan"></text>
					</view>
					<view v-else-if="item.content_type === 20 || item.content_type === 24 || item.content_type === 202" class="type">
						<text class="iconfont icon-refund"></text>
					</view>
					<view v-else-if="item.content_type === 21 || item.content_type === 22 || item.content_type === 23 || item.content_type === 26 || item.content_type === 27 || item.content_type === 28 || item.content_type === 201" class="type">
						<text class="iconfont icon-hezi"></text>
					</view>
					<view v-else-if="item.content_type === 29" class="type">
						<text class="iconfont icon-add"></text>
					</view>
					<view v-else class="type">
						<text class="iconfont icon-xiaoxi"></text>
					</view>
				</view>
				<view class="box">
					<view class="tag" v-if="msgType == 6">
						<up-tag type="error" v-if="item.top == 1" size="mini" plain style="margin: 0 8rpx 8rpx 0;" text="置顶"></up-tag>
						<up-tag v-if="item.tags" size="mini" plain style="margin: 0 8rpx 8rpx 0;" :text="item.tags"></up-tag>
					</view>
					<view class="desc" v-if="msgType == 6" v-html="item.content"></view>
					<view class="desc" v-else v-html="item.content.body"></view>
					<view class="btm">
						<view>
							<view class="btn" @click="viewDetail(item)">查看详情</view>
							<view class="btn" v-if="item.content_type == 12 && item.content.order_id" @click="viewOrder(item.content.order_id)">查看订单</view>
						</view>
						<text v-if="msgType == 6">发布人：{{item.created_user_name}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="noMore" v-if="msgList.length && page >= last_page && !loading">— 没有更多了 —</view>
		<view class="noMsg" v-if="!msgList.length && !loading">
			<up-empty mode="message" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/message.png" text="暂无消息"></up-empty>
		</view>
		<view v-if="loading" class="loadbox">
			<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
		</view>
		
		<!-- 详细信息 -->
		<up-popup :show="showInfo" :round="10" mode="bottom" closeable @close="showInfo = false" :safe-area-inset-bottom="true">
			<view class="infoBox">
				<view class="title">{{info.title}}</view>
				<view class="box">
					<view class="time" v-if="msgType == 6">发布人：{{info.created_user_name}}&nbsp;&nbsp;&nbsp;&nbsp;更新时间：{{info.updated_at}}</view>
					<view v-html="info.body"></view>
				</view>
			</view>
		</up-popup>
		
		<!-- 客户投诉信息 -->
		<up-popup :show="showFeedback" :round="10" mode="bottom" closeable @close="showFeedback = false" :safe-area-inset-bottom="true">
			<view class="infoBox">
				<view class="title">客户投诉
					<up-tag v-if="feedInfo.status == 1" plain type="success">处理完成</up-tag>
					<up-tag v-if="feedInfo.status == 0" plain type="warning">处理中</up-tag>
				</view>
				<view class="box">
					<view class="user" v-if="feedInfo.user">
						<image :src="feedInfo.user.avatar" class="avatar"></image>
						<text>{{feedInfo.user.nickname}}</text>
					</view>
					<view class="time">{{feedInfo.created_at}}</view>
					<view class="text">投诉原因：{{feedInfo.complain_reason}}</view>
					<view class="text">联系方式：{{feedInfo.contact_phone}}</view>
					<view class="text">补充描述：{{feedInfo.added_desc}}</view>
					<view class="text">图片凭证：</view>
					<view class="imgBox">
						<image v-for="(it, i) in feedInfo.images" :key="i" :src="it" mode="aspectFill" class="img" @click="preViewImg(i, feedInfo.images)"></image>
					</view>
					<view v-if="feedInfo.operator_comment" class="remark">处理备注：{{feedInfo.operator_comment}}</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 优惠券信息 -->
		<up-popup :show="showCoupon" :round="10" mode="bottom" :close-on-click-overlay="true" closeable @close="showCoupon = false" :safe-area-inset-bottom="true">
			<view class="couponBox">
				<view class="title">优惠券详情</view>
				<view class="coupon-box" :class="couponInfo.status == 1 ? '' : 'gray'">
					<view class="coupon-left" :class="couponInfo.status == 1 ? 'color1' : couponInfo.status == 2 || couponInfo.status == 3 ? 'color2' : ''">
						<text class="sign">￥<text class="money">{{couponInfo.amount}}</text></text>
						<view class="tit" v-if="couponInfo.use_type === 30 || couponInfo.use_type === 31">满{{couponInfo.full_amount}}元可用</view>
						<view class="tit" v-else>无门槛</view>
					</view>
					<view class="coupon-right">
						<view class="coupon-text">
							<view v-if="couponInfo.use_type == 20 || couponInfo.use_type === 31" class="text chang" :class="couponInfo.status == 1 ? 'color' : couponInfo.status == 2 || couponInfo.status == 3 ? 'color2' : ''">仅该团购可用：{{couponInfo.extend.title}}</view>
							<view v-else-if="couponInfo.use_type == 21 && couponInfo.type === 50" class="text" :class="couponInfo.status == 1 ? 'color' : couponInfo.status == 2 || couponInfo.status == 3 ? 'color2' : ''">
								{{couponInfo.extend && couponInfo.extend.title || '积分商品可用'}}
								<view class="red_label">
									<view class="red_col red_col1">积分实物兑换</view>
									<view class="red_col red_col2">抵扣券</view>
								</view>
							</view>
							<view v-else class="text" :class="couponInfo.status == 1 ? 'color' : couponInfo.status == 2 || couponInfo.status == 3 ? 'color2' : ''">
								<text v-if="Number(couponInfo.amount) < 3">全场通用</text>
								<text v-else>部分团可用</text>
							</view>
							<text class="time">{{couponInfo.finish_time && couponInfo.finish_time.substring(0, 16)}}前有效</text>
							<view class="tips">特殊活动、跨境产品不能使用</view>
						</view>
						<view class="coupon-btn" v-if="couponInfo.status == 1" @click="toCoupon()">去查看</view>
						<view v-if="couponInfo.status == 2" class="cannot one" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<view v-if="couponInfo.status == 3" class="cannot two" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
					</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 工单详情弹框 -->
		<up-popup :show="showWorkOrder" :round="10" mode="bottom" closeable @close="showWorkOrder = false" catchtouchmove="preventD" :safe-area-inset-bottom="true">
			<view class="workBox">
				<view class="userInfo">
					<view class="title">工单详情</view>
					<view class="box">
						<text class="col">用户昵称：{{ workDetail.user && workDetail.user.nickname }}</text>
						<block v-for="(item, index) in workDetail.good_info" :key="index">
							<text class="col">商品：{{item.goods_name}}</text>
						</block>
						<text class="col">工单id：{{ workDetail.id }}</text>
						<!-- <text class="col">供应商：{{ workDetail.supplier && workDetail.supplier.name }}</text> -->
						<text class="col">订单id：{{ workDetail.order_id }}</text>
						<text class="col" v-if="workDetail.requirement">诉求：{{ workDetail.requirement }}</text>
						<text class="col">工单分类：{{workDetail.type && workordeType[workDetail.type - 1].name || ''}}</text>
						<view class="col" style="width: 100%;">快递单号：{{ workDetail.ship_info && workDetail.ship_info.map(i => i.ship_sn).join(',')}}</view>
					</view>
				</view>
		
				<view class="chatBox">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;background-color: #f5f5f5;" :scroll-into-view="toView">
						<view class="box">
							<view class="col" v-for="(item, index) in boxWorkOrder" :key="index" :id="'item' + index"
								:class="(item.role_name == '销售' || item.role_name == '超级管理员' || item.role_name == '私聊运营') ? 'right' : 'left'">
								<view class="chat">
									<div>
										<text style=" font-size: 24rpx;">{{
											(item.role_name == '销售' || item.role_name == '超级管理员' || item.role_name == '私聊运营')
											? item.userName
											: workDetail.after_sale_group &&
											  workDetail.after_sale_group.name
										}}</text>
										<text style=" font-size: 24rpx;">&nbsp;{{ item.time }}</text>
									</div>
									<div class="kuang">
										<text v-if="item.type == 1" @longpress="copyTxt(item.content)">{{item.content}}</text>
										<bolck v-else-if="item.type == 2">
											<image :src="item.content" style="width: 36px;height: 36px;" @click="clickImg(item.content)"></image>
										</bolck>
										<bolck v-else>
											<video class="video" :src="item.content" loop="loop" controls="controls"
												style="height:200px;width:200px">
											</video>
										</bolck>
									</div>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="bottom">
					<view class="icon" @click="sendImg()"><up-icon name="photo-fill" color="#666" size="25" /></view>
					<input type="text" v-model="message" placeholder="" class="input">
					<view class="send" @click="sendText()">发送</view>
				</view>
			</view>
		</up-popup>
		
		<!-- 隐私协议弹窗 -->
		<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
		
	</view>
	
</template>

<script>
	import { get, post } from '@/api/request.js'
	import { ref, reactive, toRefs } from 'vue'
	import { sp2 } from '@/components/img.js'
	import api from '/api/index'
	import { workordeType } from '@/utils/list.js'
	import { judgePrivacy } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'

	export default {
		components: {
			privacyPopup
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				logo: uni.getStorageSync('logo'),
				page: 1,
				last_page: 1,
				msgList: [],
				loading: false,
				msgType: 0,
				showInfo: false,
				info: {},
				Theme: uni.getStorageSync('theme_index') * 1,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				showWorkOrder: false,
				workDetail: {},
				boxWorkOrder: [],
				message: '',
				toView: '',
				curWorkId: '',
				showPrivacy: false,
				feedInfo: {},
				showFeedback: false,
				couponInfo: {},
				showCoupon: false
			})
			
			function getFetchList() {
				data.loading = true
				let params = {
					type: data.msgType,
					page: data.page,
					pageSize: 10
				}
				let url = '/api/v1/messages'
				if(data.msgType == 6) {
					params = {
						page: data.page,
						pageSize: 10
					}
					url = '/api/v1/messages/announcement'
				}
				get(url, params).then((res) => {
					data.msgList = data.msgList.concat(res.data)
					data.last_page = res.meta.last_page
					data.loading = false
				}).catch(() => {
					data.loading = false
				})
			}
			
			function viewDetail(item) {
				if(data.msgType == 6) {
					data.info = {
						title: item.title,
						body: item.content,
						created_user_name: item.created_user_name,
						updated_at: item.updated_at
					}
					data.showInfo = true
				} else {
					// 10-普通消息 11-预约回访 12-工单消息 13-提现到账 14-库存提醒 20-退款申请 21-未收到货 22-超期发货 23-超期揽件 24-催发货扣款 
					// 25-工单率 26-超期揽件预警 202-用户直接退款 27-催发货通知 28-退签通知 29-新用户下单 40-客户投诉 50-订单发货 51-订单物流签收
					// 52-优惠券即将过期提醒 55-会员即将过期提醒 204-订单新备注 205-上门取件快递更换提醒
					// 用户端：208-退款审核通知 209-商品退货提醒 211-退款成功通知 210-上门取件通知
					if(item.content_type == 20) {
						uni.navigateTo({
							url: '/pages/salepage/refund/aftersale?refund_id=' + item.content.order_refund_apply_id
						})
					} else if(item.content_type == 21) {
						uni.navigateTo({
							url: '/pages/salepage/order/index?type=-1&order_type=14'
						})
					} else if(item.content_type == 50 || item.content_type == 51 || item.content_type == 53 || item.content_type == 56) {
						uni.navigateTo({
							url: '/pages/order/info/index?id=' + item.content.order_id
						})
					} else if(item.content_type == 27 || item.content_type == 28 || item.content_type == 29 || item.content_type == 204 || item.content_type == 205 || item.content_type == 202) {
						uni.navigateTo({
							url: '/pages/salepage/order/index?type=-1&order_id=' + (item.content.order_id || '')
						})
					} else if(item.content_type == 12 && item.content.work_order_id) {
						openWorkOrder(item.content.work_order_id)
					} else if(item.content_type == 40 && item.content.feedback_id) {
						get('/api/v1/sales/feedback/' + item.content.feedback_id).then((res) => {
							data.feedInfo = res.data
							data.showFeedback = true
						})
					} else if(item.content_type == 52 && item.content.user_coupon_id) {
						get('/api/v1/UserCoupon/' + item.content.user_coupon_id).then((res) => {
							data.couponInfo = res.data
							data.showCoupon = true
						})
					} else if(item.content_type == 54) {
						uni.navigateTo({
							url: '/pages/vip/mine/index'
						})
					} else if(item.content_type == 55 && item.content && item.content.order_invoice_id) {
						uni.navigateTo({
							url: '/pages/mine/invoice/detail?id=' + item.content.order_invoice_id
						})
					} else if((item.content_type == 208 || item.content_type == 209 || item.content_type == 210 || item.content_type == 211) && item.content && item.content.orderRefundApplyId) {
						uni.navigateTo({
							url: '/pages/mine/refund/aftersale/index?refund_id=' + item.content.orderRefundApplyId
						})
					} else {
						data.info = {
							title: item.content.title,
							body: item.content.body
						}
						data.showInfo = true
					}
				}
			}
			
			// 进入当前页面就将本类型消息全部设为已读
			function setRead() {
				post('/api/v1/messages/read', {type: data.msgType}).then((res) => {
					
				})
			}
			
			async function copyTxt(text) {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				uni.setClipboardData({
					data: String(text),
					success: function () {
						uni.showToast({
							icon: 'none',
							title: '内容已复制'
						})
					},
					fail: function () {
						uni.showToast({
							icon: 'none',
							title: '复制失败'
						})
					}
				})
			}
			
			const clickImg = (imgurl) => {
				uni.previewImage({
					urls: [imgurl]
				})
			}
			
			// 发送图片
			async function sendImg() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				selectImage()
			}
			
			function selectImage() {
				getApp().globalData.notClose = true
				uni.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title: '正在上传...',
							mask: true
						})
						uni.uploadFile({
							url: api.url + '/api/v1/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: uni.getStorageSync('token') || '',
								accept: 'application/json',
								appid: api.appId
							},
							success(req) {
								const imgUrl = JSON.parse(req.data).data.link
								uni.hideLoading()
								sendMessage(imgUrl)
							},
							fail() {
								uni.hideLoading()
							}
						})
					}
				})
			}
			
			function sendText() {
				const params = {
					workOrderId: data.curWorkId,
					message: {
						type: 1,
						content: data.message
					}
				}
				post('/api/v1/sales/workOrder/sendMessage', params).then(async(res) => {
					data.message = ''
					data.boxWorkOrder.push(res.data)
					scrollToBottom()
				})
			}
			
			function toCoupon() {
				data.showCoupon = false
				uni.navigateTo({
					url: '/pages/mine/coupon/index'
				})
			}
			
			function sendMessage(filelink){
				const params = {
					workOrderId: data.curWorkId,
					message: {
						type: 2,
						content: filelink
					}
				}
				post('/api/v1/sales/workOrder/sendMessage', params).then(async(res) => {
					data.boxWorkOrder.push(res.data)
					scrollToBottom()
				})
			}
			
			const scrollToBottom = () => {
				data.toView = 'item' + (data.boxWorkOrder.length - 1)
			}
			
			function preventD() {
				return
			}
			
			// 工单详情点击按钮
			const openWorkOrder = (id) => {
				data.curWorkId = id
				uni.showLoading({
					title: '正在加载...',
					mask: true
				})
				data.showWorkOrder = true
				get(`/api/v1/sales/workOrder/${id}`).then((res) => {
					data.workDetail = res.data
					data.boxWorkOrder = res.data.message
					scrollToBottom()
					uni.hideLoading()
				})
			}
			
			const preViewImg = (i, list) => {
				uni.previewImage({
					urls: list,
					current: i
				})
			}
			
			function viewOrder(id) {
				uni.navigateTo({
					url: '/pages/salepage/order/index?type=-1&order_id=' + id
				})
			}
			
			return {
				workordeType,
				...toRefs(data),
				getFetchList,
				viewDetail,
				setRead,
				copyTxt,
				clickImg,
				sendImg,
				sendText,
				sendMessage,
				scrollToBottom,
				preventD,
				openWorkOrder,
				preViewImg,
				toCoupon,
				viewOrder
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			uni.setNavigationBarTitle({
				title: options.tit || '通知信息'
			})
			this.msgType = options.type
			this.getFetchList()
			this.setRead()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page ++
				this.getFetchList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whole {
		padding: 24rpx 30rpx 0;
		box-sizing: border-box;
		.item{
			padding: 24rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				.tit{
					font-size: 32rpx;
					color: #333;
					width: calc(100% - 260rpx);
					font-weight: bold;
				}
				.time{
					font-size: 24rpx;
					color: #888;
				}
			}
			.row{
				display: flex;
				justify-content: space-between;
				.icon{
					width: 80px;
					height: 80px;
					border-radius: 10rpx;
					background-color: v-bind('bgColor');
					display: flex;
					align-items: center;
					justify-content: center;
					.type{
						.iconfont{
							color: v-bind('Color');
							font-size: 42px;
						}
					}
				}
				.box{
					width: calc(100% - 95px);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.tag{
						display: flex;
					}
					.desc{
						font-size: small;
						color: #666;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
						line-height: 48rpx;
						height: 96rpx;
					}
					.btm{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						text{
							color: #888;
						}
					}
					.btn{
						padding: 8rpx 10rpx;
						border: 1px solid v-bind('Color');
						border-radius: 6rpx;
						color: v-bind('Color');
						line-height: 1;
						width: fit-content;
						margin-right: 20rpx;
						display: inline-block;
					}
				}
			}
		}
		
		.noMore{
			text-align: center;
			font-size: 24rpx;
			color: #999;
			margin: auto;
			padding: 30rpx 0 60rpx;
			width: 100%;
		}
		.noMsg{
			width: 100%;
			height: 100vh;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 20%;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #9D9D9D;
		}
		.loadbox{
			padding: 30rpx 0;
			text-align: center;
			color: #666;
		}
		
		.infoBox{
			font-size: 28rpx;
			.title{
				font-size: 32rpx;
				color: #303030;
				font-weight: bold;
				padding: 40rpx 30rpx;
				border-bottom: 1px solid #f3f3f3;
			}
			.box{
				max-height: 75vh;
				min-height: 50vh;
				overflow: auto;
				padding: 24rpx 30rpx;
				color: #333;
				white-space: pre-wrap;
				line-height: 44rpx;
				.user{
					display: flex;
					align-items: center;
					font-size: 30rpx;
					.avatar{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}
				.time{
					font-size: 24rpx;
					color: #9D9D9D;
					margin: 10rpx 0 20rpx;
				}
				.text{
					margin-bottom: 20rpx;
				}
				.imgBox{
					.img{
						width: 180rpx;
						height: 180rpx;
						margin: 0 20rpx 20rpx 0;
					}
				}
				.remark{
					background-color: #f3f3f3;
					padding: 10rpx 16rpx;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #444;
					margin-top: 30rpx;
					min-height: 100rpx;
				}
			}
		}
	}
	.workBox{
		.userInfo{
			.title{
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
			}
			.box{
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx 0;
				box-sizing: border-box;
				.col{
					width: 50%;
					font-size: 26rpx;
					line-height: 50rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					padding: 0 30rpx;
					box-sizing: border-box;
					&:nth-child(2n+2){
						padding: 0 30rpx 0 0;
					}
				}
			}
		}
	
		.chatBox{
			height: calc(100vh - 600rpx);
			.box{
				padding: 20rpx 30rpx;
				height: 100%;
				.col{
					display: flex;
					margin-bottom: 20rpx;
					.chat{
						div {
							display: flex;
							align-items: center;
							text {
								color: #656565;
								font-size: 24rpx;
							}
							text:nth-child(2) {
								margin-left: 20rpx;
							}
						}
						.kuang {
							margin-top: 10rpx;
							background: #fff;
							border-radius: 20rpx;
							padding: 10rpx 40rpx;
							box-sizing: border-box;
							font-size: 24rpx;
							display: inline-block;
						}
					}
					image{
						width: 36px;
						height: 36px;
					}
				}
				.right {
					justify-content: flex-end;
				}
				.left {
					justify-content: flex-start;
				}
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
			height: 80rpx;
			background: #F5F5F5;
			box-sizing: border-box;
			.icon{
				width: 50rpx;
				height: 50rpx;
			}
			.input{
				width: calc(100% - 160rpx);
				height: 60rpx;
				background: #fff;
				border-radius: 8rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
				color: #444;
				padding-left: 16rpx;
				box-sizing: border-box;
			}
			.send{
				font-size: 30rpx;
				color: #1989fa;
				white-space: nowrap;
			}
		}
	}
	.couponBox{
		font-size: 28rpx;
		height: 50vh;
		.title{
			font-size: 32rpx;
			color: #303030;
			font-weight: bold;
			padding: 40rpx 30rpx;
			border-bottom: 1px solid #f3f3f3;
		}
		.coupon-box {
			margin: 30rpx;
			background-color: #ffffff;
			padding: 40rpx 0;
			display: flex;
			align-items: center;
			border-radius: 12rpx;
			background-color: v-bind('bgColor');
			&.gray{
				background-color: #f9f9f9;
			}
			.coupon-left {
				width: 190rpx;
				height: 100%;
				border-right: 2rpx dashed #f0f0f0;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.sign{
					font-size: 36rpx;
				}
				.money{
					font-size: 42rpx;
				}
				.tit{
					font-size: 28rpx;
					padding: 10rpx 16rpx 0;
				}
			}
			.coupon-right{
				width: calc(100% - 190rpx);
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.coupon-text{
					width: calc(100% - 130rpx);
					.text{
						font-size: 32rpx;
						margin-bottom: 10px;
						font-weight: 500;
						padding-right: 20rpx;
						&.chang{
							font-size: 32rpx;
						}
					}
					.time{
						font-size: 24rpx;
						color: #98989f;
					}
					.tips{
						font-size: 24rpx;
						color: #999;
					}
				}
				.coupon-btn{
					width: 120rpx;
					height: 50rpx;
					background: v-bind('Color');
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #ffffff;
					text-align: center;
					line-height: 50rpx;
				}
				.cannot{
					width: 52px;
					height: 52px;
					background-repeat: no-repeat;
					background-size: 678px 612px;
					&.one{
						background-position: -480px -30px;
					}
					&.two{
						background-position: -404px -30px;
					}
				}
			}
		}
		.color{
			color: #333;
		}
		.color1{
			color: v-bind('priceColor');
		}
		.color2{
			color: #98989f;
		}
	}
</style>
