<template>
	<view class="whole">
		<div class="input_list">
			<view class="input_box">
				<up-icon name="search" size="20" />
				<input class="input" type="text" v-model="goods_name" placeholder="请输入商品名称" @confirm="hanleupdateList" />
			</view>
		</div>
		<view class="order">
			<view class="tabbox">
				<up-tabs
					:current="curTab"
					keyName="text"
					:lineHeight="2"
					:list="statusList"
					:lineColor="Color"
					:activeStyle="{ color: Color }"
					@click="changeTabs">
				</up-tabs>
			</view>
			
			<view class="order-list" v-if="list.length || status == 4">
				<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scrolltolower="scorllBottom">
					
					<view class="order-list-item comment" v-if="status == 4" @click="toComment">
						<text>我的评价</text>
						<view class="right">
							<text>查看全部</text>
							<up-icon name="arrow-right" />
						</view>
					</view>
					<view class="order-list-item" v-for="(order, index) in list" :key="order.id">
						<view class="order-list-item-top box">
							<view>{{order.order_sn}}&nbsp;<up-tag v-if="order.another_pay" type="warning" size="mini" text="好友代付"></up-tag></view>

							<text class="status warn" v-if="order.status === 0">待付款</text>
							<text class="status warn" v-if="order.status === 1">待发货</text>
							<text class="status warn" v-if="order.status === 2">处理中</text>
							<text class="status warn" v-if="order.status === 3">待收货</text>
							<text class="status" v-if="order.status === 7">已完成</text>
							<text class="status" v-if="order.status === 6">退款成功</text>
							<text class="status fail" v-if="order.status === 8">关闭订单</text>
							<text class="status fail" v-if="order.status === 9">取消订单</text>
						</view>
						<view class="order-list-item-goods" @click="toInfo(order.id)">
							<view class="item" v-for="item in order.items" :key="item.id">
								<view class="bbox">
									<image :src="item.pic_url + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
									<view class="info">
										<view class="info-name box">
											<text class="name">{{item.goods_name}}</text>
											<view class="price">
												<text class="icon">￥</text>
												<text>{{item.price}}</text>
											</view>
										</view>
										<view class="info-num box">
											<text class="text">{{item.sku_name}}</text>
											<view class="num">×{{item.number}}</view>
										</view>
										<view class="info-num box" style="justify-content: flex-end;margin-top: 0;">
											<text class="btn2" @click.stop="toRefund(order.id, item)"
												v-if="((order.status !== 0 && order.status !== 4 && order.status !== 7 && order.status !== 8 && order.status !== 9) || (order.status == 4 && order.settle_status == 0)) && (item.refund_status !== 3 && item.refund_status !== 4 && item.refund_status !== 1 && item.refund_status !== 6 && item.refund_status !== 7 || (item.refund_status == 2 && item.could_refund_amount * 100 > 0 && item.refund_amount == 0)) && order.pay_time">
												申请退款
											</text>
											<text class="btn2" @click.stop="toAfterDetail(item.refund.order_refund_apply_id)" v-if="item.status !== 0 && item.refund && item.refund.order_refund_apply_id">售后详情</text>
										</view>
										<view class="info-num box" style="justify-content: flex-end;">
											<text :style="{color: Color}" v-if="item.refund_status === 4">拒绝退款</text>
											<text :style="{color: Color}" v-if="item.refund_status === 3">退款中</text>
											<text :style="{color: Color}" v-if="item.refund_status === 2">退款成功</text>
											<text :style="{color: Color}" v-if="item.refund_status === 1">申请退款</text>
										</view>
									</view>
								</view>
								<view v-if="((order.status == 1 || order.status == 2) && item.delivery_expect_time)" class="chuli">
									<span class="iconfont icon-daifahuo"></span>&nbsp;
									<text v-if="order.status == 1">待发货</text>
									<text v-if="order.status == 2">处理中</text>
									&nbsp;最晚{{parseTime(item.delivery_expect_time)}}发货
								</view>
							</view>
						</view>
						
						<template v-if="order.status == 3">
							<template v-if="order.ships.length !== 0">
								<template v-for="(it, i) in order.ships" :key="i">
									<template v-if="it.logs">
										<view class="chuli">
											<span class="iconfont icon-yunshuzhong" v-if="it.status == 102 || it.status == 103"></span>
											<span class="iconfont icon-yishouhuo" v-else-if="it.status == 104 || it.status == 112"></span>
											<span class="iconfont icon-daifahuo" v-else></span>
											<text v-if="expressStatus[it.status]">&nbsp;{{expressStatus[it.status]}}</text>&nbsp;
											{{it.logs[0] && it.logs[0].context}}
										</view>
									</template>
								</template>
							</template>
							<view v-else class="chuli">
								<span class="iconfont icon-yifahuo"></span>
								<text>&nbsp;已发货</text>
							</view>
						</template>
						
						<view class="order-list-item-qian box">
							<view class="left">
								<view class="item">
									<text>总价</text>
									<text class="icon">￥</text>
									<text>{{order.goods_price}}</text>
								</view>
								<view class="item">
									<text>运费</text>
									<text class="icon">￥</text>
									<text>{{order.freight_price}}</text>
								</view>
								<view class="item" v-if="order.active_discount_amount * 1">
									<text>优惠金额</text>
									<text class="icon">￥</text>
									<text>{{order.active_discount_amount}}</text>
								</view>
								<view class="item" v-if="order.coupon_price * 1">
									<text>优惠券</text>
									<text class="icon">￥</text>
									<text>{{order.coupon_price}}</text>
								</view>
								<view class="item" v-if="order.score_profit * 1">
									<text>积分抵扣</text>
									<text class="icon">￥</text>
									<text>{{order.score_profit}}</text>
								</view>
							</view>
							<view class="right">
								<text>实付款：</text>
								<text class="icon">￥</text>
								<text class="price">{{order.total_price}}</text>
							</view>
						</view>
						<view class="message" v-if="order.public_message || order.supplier_message">
							<up-icon name="file-text-fill" size="18" />
							<view class="order-list-item-price">
								<text v-if="order.public_message">团长备注：{{order.public_message}}</text>
								<text v-if="order.supplier_message">商家备注：{{order.supplier_message}}</text>
							</view>
						</view>
						<view class="order-list-item-btn" v-if="order.status === 0">
							<view class="btn1" @click.stop="cancelBtn(order.id)">取消订单</view>
							<view class="btn2 vbn" @click.stop="selectMethod(order.id, order.items[0] && order.items[0].level_link_id || 0)">付款</view>
						</view>
						<view class="order-list-item-btn order-list-item-btn1" v-else>
							<view>
								<view @click.stop="hanleMore(index)" style="font-size: 28rpx; color: #676767;"
									v-if="order.status == 7 || order.status == 8 || order.status == 4 || order.status == 6">更多
								</view>
							</view>
							
							<div style="display: flex; justify-content: flex-end;width: 80%;">
								<view class="btn1" v-if="(order.status == 1 || order.status == 2) && deduct_overtime_ship_on && order.couldShipUrge == 1" @click.stop="urgeDelivery(order)">催发货</view>
								<view class="btn1" v-if="order.ships && order.status === 3" @click="toShip(order)">物流</view>
								<view class="btn2" @click.stop="confirmBtn(order.id)" v-if="order.status === 3 && !order.show">
									<up-icon v-if="isReward == 1" name="red-packet-fill" color="#f00" size="16"></up-icon>
									确认收货
								</view>
								
								<!-- 待评价 -->
								<view class="btn2" @click.stop="toWrite(order.id)" v-if="order.status === 4">
									<up-icon v-if="isReward == 1" name="red-packet-fill" color="#f00" size="16"></up-icon>
									我要晒单
								</view>
								
								<!-- 已评价 -->
								<button v-if="order.status === 7" class="buttom" @click.stop="shareBtn(order)">我要晒单</button>
								<view class="btn1" @click.stop="adddCartBatch(order.items)">再来一单</view>
							</div>

						</view>

						<div v-if="order.show &&(order.status == 7 || order.status == 8 || order.status == 4 || order.status == 6) " class="felx">
							<view class="row" @click.stop="hanleDelete(order.id, index)">删除订单</view>
							<view class="row" v-if="(order.status == 4 || order.status == 7) && !order.has_cross_border && order.invoice" @click.stop="toApply(order)">查看发票</view>
							<view class="row" v-if="(order.status == 4 || order.status == 7) && !order.has_cross_border && !order.invoice && getIntervalDay(nowTime, order.created_at)" @click.stop="toApply(order)">申请发票</view>
						</div>
					</view>
					<view style="width: 100%;height: 24rpx;"></view>
				</scroll-view>
			</view>
			<view class="order-none" v-if="list.length === 0 && isLoading && status !== 4">
				<up-empty mode="order" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/order.png" text="还没有喜欢的商品"></up-empty>
				<view class="btn" @click="toHome">去逛逛</view>
			</view>
			
			<cancel-order :showCancel="showCancel" @close="showCancel = false" @cancelOrder="cancelOrder" />
		</view>
		<div class="top" v-if="top">已确认收货，正在前往晒单...</div>
		
		<!-- 催发货 -->
		<urge-delivery :show="showUrge" @close="showUrge = false" :info="orderInfo" @contactTeamer="contactTeamer" />
		
		<!-- 客服 -->
		<call-center :show="showService" @close="showService = false" :type="2" :orderId="orderId" />
		
		<up-popup :show="showMethod" :round="10" mode="bottom" @close="showMethod = false, payData = {}" catchtouchmove="preventDefault" :safe-area-inset-bottom="true">
			<view class="reTitle">
				<text>选择支付方式</text>
				<up-icon name="close" color="#777" size="20" @click="showMethod = false, payData = {}"/>
			</view>
			<view class="payBox">
				<view class="row flex" v-for="it in payList" :key="it.id" @click="pay_method = it.id">
					<view class="flex1">
						<text class="iconfont logo" :class="'icon-' + it.icon" :style="{color: it.color}"></text>
						<text>{{it.name}}</text>
					</view>
					<text class="iconfont icon-checked" v-if="it.id == pay_method"></text>
					<text class="iconfont icon-circle" v-else></text>
				</view>
			</view>
			<view style="padding: 30rpx;box-sizing: border-box;">
				<view @click="toPay()" class="box_btn">支&nbsp;付</view>
			</view>
		</up-popup>
		
	</view>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import cancelOrder from '@/components/order/CancelOrder.vue'
	import callCenter from '@/components/callCenter/index.vue'
	import urgeDelivery from '@/components/order/urgeDelivery.vue'
	import { showToast, adddCartBatch, toWrite, getShopInfo, getIntervalDay, getOldDay, uniShare } from '@/components/common.js'
	import { expressStatus, Style } from '@/utils/list.js'
	import { sp2 } from '@/components/img.js'

	export default {
		components: {
			cancelOrder,
			urgeDelivery,
			callCenter
		},
		setup() {
			const data = reactive({
				sp2: sp2,
				idss: '',
				ids: '',
				top: false,
				status: -1,
				list: [],
				id: '',
				page: 1,
				lastPage: 0,
				isLoading: false,
				goods: {},
				imageUrl: '',
				shareUrl: '',
				isReward: '',
				goods_name: '',
				orderId: 0,
				showService: false,
				showUrge: false,
				orderInfo: {},
				deduct_overtime_ship_on: 0,
				Color: uni.getStorageSync('theme_color'),
				priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
				bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
				logo: uni.getStorageSync('logo'),
				is_subscribe: 1,
				refund_mode: uni.getStorageSync('refund_mode') == 1,
				nowTime: '',
				curTab: 0,
				tabObj: {
					'-1': 0,
					'0': 1,
					'1': 2,
					'3': 3,
					'4': 4,
					'11': 5,
					'7': 6,
					'6': 7,
					'8': 8
				},
				payData: {},
				pay_method: 'alipay',
				payList: [
					// { id: 'wxpay', icon: 'wxpay', color: '#15BA11', name: '微信支付' },
					{ id: 'alipay', icon: 'alipay', color: '#00A0EA', name: '支付宝' }
				],
				showMethod: false
			})
			const statusList = [
				{ id: -1, text: '全部' },
				{ id: 0, text: '待付款' },
				{ id: 1, text: '待发货' },
				{ id: 3, text: '待收货' },
				{ id: 4, text: '评论' },
				{ id: 11, text: '售后中' },
				{ id: 7, text: '已完成' },
				{ id: 6, text: '已退款' },
				{ id: 8, text: '已关闭' },
				// { id: 2, text: '处理中' },
				// { id: 5, text: '退款中' },
				// { id: 9, text: '取消订单' }
			]

			const hanleDelete = (id, index) => {
				data.list.forEach(item => {
					item.show = false
				})
				uni.showModal({
					title: '提示',
					content: '确定要删除当前订单吗？',
					confirmColor: '#42b983',
					success(res) {
						if (res.confirm) {
							post(`/api/v1/order/${id}`, '', 'DELETE').then((res) => {
								showToast('删除成功')
								data.list.splice(index, 1)
							})
						}
					}
				})
			}
			const hanleMore = (index) => {
				data.list.forEach((item, i) => {
					if(index == i) {
						item.show = !item.show
					} else {
						item.show = false
					}
				})
				
			}
			// 搜索商品名称
			const hanleupdateList = () => {
				data.list = []
				data.page = 1
				getList()
			}

			async function getList() {
				uni.showLoading({
					title: '加载中...',
				})
				let res = await get('/api/v1/order', {
					status: data.status == -1 ? '' : data.status,
					page: data.page,
					goods_name: data.goods_name,
				})
				data.list = data.list.concat(res.data)
				data.lastPage = res.meta.last_page
				data.isLoading = true
				uni.hideLoading()
			}

			// 触底加载下一页
			function scorllBottom() {
				if (data.page < data.lastPage) {
					data.page++
					getList()
				}
			}
			
			const changeTabs = (event) => {
				data.curTab = event.index
				data.status = event.id
				updateList()
			}

			function updateList() {
				data.payData = {}
				data.isLoading = false
				data.list = []
				data.page = 1
				getList()
			}
			// 取消订单弹窗
			const showCancel = ref(false)

			function cancelBtn(id) {
				data.id = id
				showCancel.value = true
			}
			async function cancelOrder(reason) {
				let res = await get(`/api/v1/order/cancel/${data.id}`, {
					reason
				})
				if (res.code === 0) {
					showToast('取消成功')
					showCancel.value = false
					updateList()
				}
			}

			function toInfo(id) {
				uni.navigateTo({
					url: '/pages/order/info/index?id=' + id
				})
			}

			function toHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
			const showBuy = ref(false)

			// 我的评论
			const toComment = () => {
				uni.navigateTo({
					url: '/pages/order/comment/index'
				})
			}

			// 晒单按钮
			const shareBtn = async (item) => {
				if (item.items[0].shop_group_goods_id != 0) {
					await getShareTemplate(item.items[0].shop_group_goods_id)
				} else {
					await getShareTemplate(item.items[0].shop_goods_id)
				}
				await getShareUrl(item.id)
				let title = '本团已收到多个好评，快来看看吧！'
				let imageUrl = data.imageUrl
				let path = data.shareUrl
				uniShare(title, imageUrl, path)
			}

			// 确认收货
			const confirmBtn = (id) => {
				data.ids = id
				uni.showModal({
					title: '确认收到货了吗',
					content: '为了保证你的售后权益，请收到商品确认无误后再确认收货',
					confirmColor: '#42b983',
					success: function(res) {
						if (res.confirm) {
							data.list.forEach((res) => {
								if (res.id === id) {
									res.show = true
								}
							})
							get(`/api/v1/order/confirm/${id}`).then((res) => {
								data.top = true
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/order/comment/write?id=' + id
									})
									data.top = false
								}, 1500)
							})
						}
					}
				})
			}
			// 获取分享图
			const getShareTemplate = async (ids) => {
				await post('/api/v1/sales/share', {
					shop_goods_id: ids
				}).then((res) => {
					res.data.forEach((item) => {
						if (item.type === 4) {
							data.imageUrl = item.image
						}
					})
				})
			}
			//获取是否设置优惠券
			const getShopBaskSetting = () => {
				post('/api/v1/Shop/getShopBaskSetting').then((res) => {
					data.isReward = res.data.is_reward
				})
			}

			// 分享路径
			const getShareUrl = async (id) => {
				await post('/api/v1/user/share', {
					page: 'pages/share/index',
					query: `id=${id}`
				}).then((res) => {
					data.shareUrl = res.data.path
				})
			}
			// 查看物流
			const toShip = (orderInfo) => {
				if(orderInfo.ships.length == 1) {
					uni.navigateTo({
						url: '/pages/order/express/index?id=' + orderInfo.ships[0].id
					})
				} else {
					uni.navigateTo({
						url: '/pages/order/info/index?id=' + orderInfo.id
					})
				}
			}
			
			// 催发货
			function urgeDelivery(order) {
				uni.showLoading({
					mask: true,
					title: '加载中...'
				})
				get('/api/v1/order/urgeShip/' + order.id).then((res) => {
					data.orderInfo = {
						...order,
						urge_status: res.data.urge_status,
						delivery_time: order.delivery_expect_time ? parseTime(order.delivery_expect_time) : '',
						deduct_amount: res.data.deduct_amount || 0
					}
					data.showUrge = true
					uni.hideLoading()
				})
			}
			
			function contactTeamer(orderId) {
				data.orderId = orderId
				data.showService = true
			}
			
			function parseTime(time) {
				let month = Number(time.substr(0, 10).split('-')[1])
				let day = Number(time.substr(0, 10).split('-')[2])
				return month + '月' + day + '日'
			}
			
			const toWeb = () => {
				uni.navigateTo({
					url: '/pages/article/index'
				})
			}
			
			function getSubscribe() {
				get('/api/v1/shopScore/user').then((res) => {
					data.is_subscribe = res.data.user.is_subscribe
					uni.setStorageSync('subscribe', res.data.user.is_subscribe)
				})
			}
			
			function toApply(order) {
				data.list.forEach(item => {
					item.show = false
				})
				if(order.invoice) {
					uni.navigateTo({
						url: '/pages/mine/invoice/detail?id=' + order.invoice.id
					})
				} else {
					uni.navigateTo({
						url: '/pages/mine/invoice/apply?id=' + order.id
					})
				}
			}
			
			
			function selectMethod(id, link_id) {
				data.payData = {
					id: id,
					link_id: link_id
				}
				data.pay_method == 'wxpay'
				data.showMethod = true
			}
			
			function toPay() {
				if(data.payData.link_id) {
					get(`/api/v1/goods/levelLink/${data.payData.link_id}`).then((res) => {
						if(res.data.add_customer) {
							payAgain(data.payData.id, data.payData.link_id)
						} else {
							payAgain(data.payData.id, 0)
						}
					})
				} else {
					payAgain(data.payData.id, 0)
				}
			}
			
			function payAgain(id, link_id) {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				get(`/api/v1/pay/${id}`, { pay_style: 'app_pay', pay_type: data.pay_method == 'wxpay' ? 1 : 2 }).then((res) => {
					if(data.pay_method == 'wxpay') {
						// 跳转微信小程序
						plus.share.getServices((ress) => {
							let sweixin = null
							for(let i = 0; i < ress.length; i++) {
								if(ress[i].id == 'weixin') {
									sweixin = ress[i]
								}
							}
							if(sweixin) {
								const path = res.data.jump_mini_path
								sweixin.launchMiniProgram({
									id: res.data.jump_mini_org_id, // 原始id：gh_开头 要跳转的微信小程序原始ID
									path,
									type: 0 // 默认为0, 0: 正式版 1：测试版 2：体验版
								}, (success) => {
									
								}, (err) => {
									console.log(err)
									return uni.showToast({
										title: '请检查手机是否有微信应用~',
										icon: 'none'
									})
								})
							}
						})
					} else if(data.pay_method == 'alipay') {
						// 跳转支付宝小程序
						let alipayUrl = res.data.jump_mini_path
						// let alipayUrl = res.data.jump_mini_path + '&returnSchema=miaoxuan://'
						if (uni.getSystemInfoSync().platform == "ios") {
							alipayUrl = res.data.jump_mini_path.replace('alipays', 'alipay')
						}
						console.log(alipayUrl)
						plus.runtime.openURL(alipayUrl)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			}
			
			function toRefund(id, item) {
				if(item.ship_status === 0) {
					uni.navigateTo({
						url: '/pages/mine/refund/choice/index?id=' + id + '&order_id=' + item.id
					})
				} else {
					if (data.refund_mode) {
						uni.navigateTo({
							url: '/pages/mine/refund/service/index?order_id=' + id
						})
					} else {
						data.orderId = id
						data.showService = true
					}
				}
			}
			
			const toAfterDetail = (id) => {
				uni.navigateTo({
					url: '/pages/mine/refund/aftersale/index?refund_id=' + id
				})
			}
			
			return {
				getShopInfo,
				expressStatus,
				getIntervalDay,
				getOldDay,
				uniShare,
				...toRefs(data),
				getShareTemplate,
				getShareUrl,
				hanleupdateList,
				getList,
				updateList,
				scorllBottom,
				statusList,
				changeTabs,
				showCancel,
				cancelBtn,
				cancelOrder,
				toInfo,
				toHome,
				showBuy,
				payAgain,
				toComment,
				toWrite,
				confirmBtn,
				shareBtn,
				adddCartBatch,
				getShopBaskSetting,
				hanleMore,
				hanleDelete,
				toShip,
				parseTime,
				urgeDelivery,
				contactTeamer,
				toWeb,
				getSubscribe,
				toApply,
				toPay,
				selectMethod,
				toRefund,
				toAfterDetail
			}
		},
		async onLoad(options) {
			// await this.$onLaunched
			this.status = parseInt(options.type || -1)
			this.curTab = this.tabObj[this.status]
			this.list = []
			if(!uni.getStorageSync('shop_id')) {
				await getShopInfo()
			}
			this.nowTime = this.getOldDay()
			console.log(this.nowTime)
			this.deduct_overtime_ship_on = Number(uni.getStorageSync('deduct_overtime_ship_on'))
			this.Color = uni.getStorageSync('theme_color')
			this.priceColor = Style[uni.getStorageSync('theme_index') * 1].priceColor
			this.bgColor = Style[uni.getStorageSync('theme_index') * 1].bgColor
			this.logo = uni.getStorageSync('logo')
			await this.getList()
			this.getShopBaskSetting()
		},
		onShow() {
			this.getSubscribe()
			
			let args = plus.runtime.arguments
			if (args || data.payData.id) {
				this.showMethod = false
				uni.hideLoading()
				plus.runtime.arguments = null
				this.updateList()
			}
		},
		onPullDownRefresh() {
			this.list = []
			this.getList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		}
	}
</script>

<style lang="scss" scoped>
	.whole{
		width: 100%;
		height: 100vh;
		overflow: hidden;
		.tabbox{
			background-color: #fff;
		}
	}
	.order-list-item-btn1 {
		justify-content: space-between !important;
		align-items: center;
	}

	.felx {
		position: absolute;
		bottom: 16rpx;
		left: 100rpx;
		width: 200rpx;
		padding: 10rpx 20rpx;
		z-index: 99;
		box-sizing: border-box;
		background: #fff;
		color: #676767;
		box-shadow: 0 0px 30px rgba(0, 0, 0, 0.2);
		font-size: 26rpx;

		&:after {
			position: absolute;
			bottom: 26rpx;
			left: -16rpx;
			content: '';
			border-right: 16rpx solid #fff;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
		}
		.row{
			padding: 14rpx 0;
		}
	}

	.input {
		font-size: 28rpx;
		width: 100%;
	}

	.input_list {
		background: #fff;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.input_box {
		display: flex;
		justify-content: flex-start;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		height: 70rpx;
		align-items: center;
		padding: 0 10rpx;

		image {
			width: 38rpx;
			height: 19rpx;
			margin-right: 10rpx;
		}
	}

	.top {
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%);
		background: rgba(0, 0, 0, 0.7);
		color: #fff;
		font-size: 25rpx;
		padding: 25rpx;
		border-radius: 10rpx;
	}

	.buttom {
		width: 147rpx;
		height: 50rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		margin-left: 18rpx;
		color: v-bind('Color');
		border: 2rpx solid v-bind('Color');
	}
	.chuli{
		padding: 10rpx 20rpx;
		font-size: 26rpx;
		color: #656565;
		background: #F7F7F7;
		margin-top: 16rpx;
		border-radius: 6rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text{
			color: #222;
			font-weight: bold;
		}
	}
	.order {
		height: 100%;
		.careBox{
			padding: 24rpx;
			background-color: #fff;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			margin-top: 24rpx;
			.logo{
				width: 80rpx;
				height: 80rpx;
				border-radius: 6rpx;
			}
			.text{
				width: calc(100% - 240rpx);
				font-size: 24rpx;
				color: #7b7b7b;
				display: flex;
				flex-direction: column;
				.tit{
					color: #333;
					margin-bottom: 10rpx;
					font-size: 28rpx;
				}
			}
			.btn{
				padding: 4rpx 16rpx;
				border-radius: 8rpx;
				border: 1px solid v-bind('Color');
				background-color: v-bind('bgColor');
				color: v-bind('Color');
			}
		}
		.box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.order-status {
			white-space: nowrap;
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			&-item {
				display: inline-block;
				width: 20%;
				text-align: center;
				font-size: 28rpx;
				color: #656565;
				font-weight: bold;
			}
			.choose {
				color: #f14939;
			}
		}

		.order-list {
			padding: 0 24rpx;
			height: calc(100% - 160rpx);
			overflow: auto;
			box-sizing: border-box;
			.comment {
				display: flex;
				justify-content: space-between;
				padding: 20rpx !important;
				font-size: 26rpx;

				.right {
					color: #98989f;
				}
			}

			.order-list-item {
				background-color: #fff;
				position: relative;
				border-radius: 12rpx;
				margin-top: 24rpx;
				padding: 24rpx 20rpx;

				&-top {
					font-size: 26rpx;
					justify-content: space-between;
					.status {
						padding: 0 24rpx;
						height: 52rpx;
						border-radius: 52rpx;
						background-color: v-bind('bgColor');
						color: v-bind('Color');
						line-height: 52rpx;
						font-size: 24rpx;
						&.warn{
							background-color: #FFF7F0;
							color: #FA9D3B;
						}
						&.fail{
							background-color: #EDEDED;
							color: #9C9C9C;
						}
					}
				}

				&-goods {
					.item {
						margin-top: 24rpx;
						.bbox{
							display: flex;
						}
						image {
							width: 160rpx;
							height: 160rpx;
							background: #bbbbbb;
							border-radius: 15rpx;
							margin-right: 26rpx;
						}

						.info {
							flex: 1;
							font-size: 24rpx;
							&-name {
								align-items: flex-start;

								.name {
									flex: 1;
									font-size: 28rpx;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
								}

								.price {
									font-size: 30rpx;
									margin-left: 15rpx;

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

							.text {
								color: #7b7b7b;
							}

							&-num {
								margin-top: 12rpx;
								.num {
									font-size: 28rpx;
									border: 2rpx solid #d1d1d1;
									padding: 0 5rpx;
									border-radius: 8rpx;
								}
								.btn2{
									border-radius: 30rpx;
									padding: 5rpx 20rpx;
									box-sizing: border-box;
									text-align: center;
									color: v-bind('Color');
									border: 2rpx solid v-bind('Color');
									font-size: 24rpx;
									margin-top: 12rpx;
								}
							}
						}
					}
				}
				&-price {
					font-size: 24rpx;
					width: calc(100% - 70rpx);
				}
				&-qian {
					font-size: 24rpx;
					.left {
						width: 60%;
						display: flex;
						flex-wrap: wrap;
						padding: 4rpx 0;
						.item {
							color: #7b7b7b;
							width: 50%;
							padding: 4rpx 0;
							.icon {
								font-size: 20rpx;
							}
						}

						.item:first-child {
							// margin-right: 10rpx;
						}
					}

					.right {
						width: 40%;
						height: 64rpx;
						line-height: 58rpx;
						text-align: right;

						.icon,
						.price {
							color: v-bind('priceColor');
						}

						.price {
							font-size: 30rpx;
						}
					}
				}

				&-btn {
					display: flex;
					justify-content: flex-end;
					margin-top: 14rpx;

					.btn1,
					.btn2 {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 147rpx;
						height: 50rpx;
						border-radius: 30rpx;
						font-size: 24rpx;
						line-height: 50rpx;
						text-align: center;
						margin-left: 18rpx;
					}

					.btn1 {
						border: 2rpx solid #bbbbbb;
					}

					.btn2 {
						color: #f14939;
						border: 2rpx solid #f14939;
						&.vbn{
							color: v-bind('Color');
							border: 2rpx solid v-bind('Color');
						}
						.img{
							width: 16px;
							height: 16px;
							background-repeat: no-repeat;
							background-size: 452px 408px;
							background-position: -259.67px -136.67px;
						}
					}
				}
			}
		}

		&-none {
			height: calc(100% - 160rpx);
			background-color: #fff;
			.btn {
				font-size: 30rpx;
				color: v-bind('Color');
				border: 2rpx solid v-bind('Color');
				border-radius: 34rpx;
				width: 215rpx;
				height: 67rpx;
				line-height: 67rpx;
				margin: 50rpx auto 0;
				text-align: center;
			}
		}
	}
	.message{
		color: #676767;
		background: #f1f1f1;
		padding: 5px;
		display: flex;
		align-items: flex-end;
		text{
			display: block;
			line-height: 42rpx;
		}
	}
	.iconfont {
	    font-size: 18px;
	    vertical-align: text-top;
	}
	.icon-checked{
		color: v-bind('Color');
	}
	.icon-circle{
		color: #aaa;
	}
	.reTitle{
		font-size: 30rpx;
		color: #000;
		padding: 30rpx;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #e5e5e5;
		background-color: #F6F6F6;
		border-radius: 10px 10px 0 0;
	}
	.payBox{
		background: #ffffff;
		border-radius: 10rpx;
		padding: 30rpx;
		font-size: 28rpx;
		height: 40vh;
		.row{
			padding: 20rpx 0;
			.logo{
				font-size: 16px;
				margin-right: 10rpx;
				display: inline-block;
				width: 20px;
				text-align: center;
			}
		}
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flexc{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flex1{
		display: flex;
		align-items: center;
	}
	.box_btn{
		width: 100%;
		height: 80rpx;
		background: v-bind('Color');
		font-size: 30rpx;
		border-radius: 80rpx;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
	}
</style>
