<template>
	<view class="container" :style="appThemeStyle">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }"
			@down="downCallback" :up="upOption" @up="upCallback">
			<!-- tab栏 -->
			<u-tabs :list="tabs" :is-scroll="false" :current="curTab" :active-color="appTheme.mainBg" :duration="0.2"
				@change="onChangeTab" />
			<!-- 订单列表 -->
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in list" :key="index" v-if="item.equipmentGoods">
					<view class="item-top">
						<view class="item-top-left">
							<text class="order-time">{{ item.merchantName }}</text>
						</view>
						<view class="item-top-right">
							<text class="state-text" v-if="item.payStatus == 10">待支付</text>
							<text class="state-text"
								v-if="item.payStatus == 20 && item.deliveryStatus <= 20 && item.receiptStatus == 10">待收货</text>
							<text class="state-text"
								v-if="item.payStatus == 20 && item.deliveryStatus == 20 && item.receiptStatus == 20">待绑定</text>
							<!-- <text class="state-text" v-else-if="item.receiptStatus == 21">进行中</text> -->
							<text class="state-text"
								v-if="item.payStatus == 20 && item.deliveryStatus == 40 && item.receiptStatus == 20">进行中</text>
							<text class="state-text"
								v-else-if="item.payStatus == 20 && item.receiptStatus == 21">退租中</text>
							<text class="state-text"
								v-else-if="item.payStatus == 20 && item.orderStatus == 40">已完成</text>
						</view>
					</view>
					<!-- 商品列表 -->
					<view class="goods-list" @click="handleTargetDetail(item.orderId)">
						<view class="goods-item">
							<!-- 商品图片 -->
							<view class="goods-image">
								<image v-if="item.image" :src="item.image" class="equipment-image" mode="aspectFit">
								</image>
								<image v-else class="image" src="/static/goods/battery.png" mode="scaleToFill"></image>
							</view>
							<!-- 商品信息 -->
							<view class="goods-content">
								<view class="goods-title">
									<text class="twoline-hide">
										下单类型：
										<span v-if="item.equipmentGoods.equipmentCategory == 10">销售</span>
										<span v-if="item.equipmentGoods.equipmentCategory == 20">分期</span>
										<span v-if="item.equipmentGoods.equipmentCategory == 30">以租代购</span>
										<span v-if="item.equipmentGoods.equipmentCategory == 40">租赁</span>
									</text>
									<text class="twoline-hide">订单编号：{{ item.orderNo }}</text>
									<text class="twoline-hide"
										v-if="item.orderStatus == 30">到期时间：{{ item.expirationTime }}</text>
									<text class="twoline-hide" v-else>下单时间：{{ item.payTime }}</text>
									<text
										class="twoline-hide">设备编号：{{ item.equipment.equipmentCode ? item.equipment.equipmentCode : ''}}</text>
									<text class="twoline-hide">设备名称：{{ item.equipmentGoods.goodsName }}</text>
									<text class="twoline-hide">设备型号：{{ item.equipmentGoods.batteryModel }}</text>
									<text class="twoline-hide">下单用户：{{ item.nickname }}</text>
									<text class="twoline-hide yuqi-text" v-if="item.refuseDesc">退租被拒绝：{{ item.refuseDesc }}</text>
									<text class="twoline-hide yuqi-text"
										v-if="item.payStatus == 10 && item.expirationDay < 0">逾期状态:(已逾期{{ Math.abs(item.expirationDay) }}天)</text>
									<text class="twoline-hide yuqi-text"
										v-if="item.payStatus == 10 && item.expirationDay < 7 && item.expirationDay > 0">逾期状态:
										即将过期</text>
									<!-- <view class="order-total">
										<text>合计:</text>
										<text class="unit" style="color: #ff0000;">￥</text>
										<text class="money">{{ item.totalPrice }}</text>
									</view> -->
									<!-- <text class="twoline-hide">合计：{{ item.equipmentGoods.batteryModel }}</text> -->
									<text class="twoline-hide" style="padding-left: 52rpx;">合计：<span
											style="color: #ff0000;">￥{{ item.totalPrice }}</span></text>
								</view>
							</view>
							<!-- 交易信息 -->
							<!-- <view class="goods-trade">
								<view class="goods-price">
									<text class="unit">￥</text>
									<text class="value">{{ item.batteryRent }}</text>
								</view>
								<view class="goods-num">
									<text>x1</text>
								</view>
							</view> -->
						</view>
					</view>
					<!-- 订单合计 -->

					<!-- 订单操作 -->
					<view v-if="item.orderStatus != OrderStatusEnum.CANCELLED.value" class="order-handle">
						<view class="btn-group clearfix">
							<view class="btn-item active" v-if="item.receiptStatus==10" @click="onBind(item)">绑定设备</view>
							<view  
								class="btn-item active" v-if="item.receiptStatus==20&&item.idCode==null" @click="onReceipt(item.orderId)">确认身份</view>
							<!-- 未支付取消订单 -->
							<block v-if="item.payStatus == PayStatusEnum.PENDING.value&&item.receiptStatus==20&&item.idCode">
								<view class="btn-item active" @click="onPay(item.orderId)">去支付</view>
								<view class="btn-item" @click="onCancel(item.orderId)">取消</view>
							</block>
							<!-- 已支付进行中的订单 -->
							<block v-if="item.orderStatus != OrderStatusEnum.APPLY_CANCEL.value">
								<!-- 订单核销码 -->
								<block
									v-if="item.payStatus == PayStatusEnum.SUCCESS.value && item.deliveryType == DeliveryTypeEnum.EXTRACT.value && item.deliveryStatus == DeliveryStatusEnum.NOT_DELIVERED.value">
									<view class="btn-item active" @click="onExtractQRCode(item.orderId)">
										<text class="iconfont icon-qr-extract"></text>
										<text class="m-l-10">核销码</text>
									</view>
								</block>
							</block>
							<!-- 已申请取消 -->
							<view v-else class="f-28 col-8">取消申请中</view>
							<!-- 确认收货 -->
							<block v-if="item.payStatus == PayStatusEnum.SUCCESS.value">
						


								<view class="btn-item" @click="handleRentingOut(item)"
									v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus != 21 && item.receiptStatus != 30">
									我要退租</view>
								<view class="btn-item" @click="handleRentingOutCancel(item)"
									v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus == 21">
									取消退租</view>

								<view class="btn-item" @click="handleHireEquipment(item.orderId)"
									v-if="item.equipmentGoods.equipmentCategory != '10' && item.receiptStatus != 30 && item.receiptStatus != 21 && item.orderId >= 28804 && item.deliveryStatus == 40">
									我要续费</view>

								<block
									v-if="item.orderStatus == OrderStatusEnum.COMPLETED.value && item.isComment == 0">
									<view class="btn-item"
										v-if="item.equipmentGoods.equipmentCategory == '40' && item.deliveryStatus == DeliveryStatusEnum.ACCEPT.value"
										@click="handleChangeEquipment(item.orderId,item.equipment.equipmentId)">换电
									</view>
									<!-- <view class="btn-item" v-if="item.equipmentGoods.equipmentCategory == '锂电池租赁' || item.equipmentGoods.equipmentCategory == '电动车租赁'" @click="handleTargetDetail(item.orderId)">续费</view> -->
								</block>
							</block>
							<!-- 订单评价 -->


							<view class="btn-item" @click="handleTargetDetail(item.orderId)">详情</view>

						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 核销二维码弹窗 -->
		<u-popup v-model="showQRCodePopup" mode="center" border-radius="26" :closeable="true">
			<view class="qrcode-popup">
				<view class="title">自提核销二维码</view>
				<view class="pop-content">
					<image v-if="qrcodeImage" class="image" :src="qrcodeImage"></image>
				</view>
			</view>
		</u-popup>
		<!-- 绑定设备码 -->
		<u-popup v-model="showQRCodeBind" mode="center" border-radius="26" :closeable="true">
			<view class="qrcode-bind">
				<view class="title">请核对要绑定的设备编号是否正确</view>
				<view class="bind-content">
					<input v-model="bindValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入设备编号"
						type="text"></input>
				</view>
				<view class="submit">
					<u-button type="error" @click="doBind">立即绑定</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 换电 -->
		<u-popup v-model="showQRCodeBindChange" mode="center" border-radius="26" :closeable="true">
			<view class="qrcode-bind">
				<view class="title">请输入更换的新电池编号</view>
				<view class="bind-content">
					<input v-model="bindValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入设备编号"
						type="text"></input>
				</view>
				<view class="submit">
					<u-button type="error" @click="doEquipment(true)">确定更换电池</u-button>
				</view>
				<view class="scan" @click="scan"><u-icon name="scan" color="#cecece" size="28"></u-icon>扫码</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		DeliveryStatusEnum,
		DeliveryTypeEnum,
		OrderStatusEnum,
		PayStatusEnum,
		ReceiptStatusEnum
	} from '@/common/enum/order'
	import store from '@/store/index.js'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
	import {
		getEmptyPaginateObj,
		getMoreListData
	} from '@/core/app'
	import * as OrderApi from '@/api/order'
	import {
		wxPayment
	} from '@/core/app'
	import * as EquipmentApi from '@/websoft/api/equipment.js'
	import {
		pageOrder,
		removeOrder,
		receiptOrder,
		addOrder,
		getOrderPayByOrderId,
		checkFreeze
	} from '@/websoft/api/order.js'
	/* import {
		bindEquipment
	} from '@/websoft/api/equipment.js' */
	import {
		uploadFile
	} from '@/websoft/api/upload.js'
	import {
		fileUrl
	} from '@/config.js';
	import {
		createOrderNo,
		dateFormat
	} from '@/utils/util.js'
	// 每页记录数量
	const pageSize = 15

	// tab栏数据
	const tabs = [{
			name: `全部`,
			value: 'all'
		}, {
			name: `待支付`,
			value: 'payment'
		},
		{
			name: `待绑定`,
			value: 'delivery'
		},
		{
			name: `进行中`,
			value: 'comment'
		},
		{
			name: `已完成`,
			value: 'refund'
		}
	]

	export default {
		components: {
			MescrollBody
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 枚举类
				DeliveryStatusEnum,
				DeliveryTypeEnum,
				OrderStatusEnum,
				PayStatusEnum,
				ReceiptStatusEnum,

				// 当前页面参数
				options: {
					dataType: 'all'
				},
				// tab栏数据
				tabs,
				// 当前标签索引
				curTab: 0,
				// 订单列表数据
				list: [],

				// 上拉加载配置
				upOption: {
					// 首次自动执行
					auto: true,
					// 每页数据的数量; 默认10
					page: {
						size: pageSize
					},
					// 数量要大于4条才显示无更多数据
					noMoreSize: 4,
					// 空布局
					empty: {
						tip: '亲，暂无订单记录'
					}
				},
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				// 核销二维码弹窗
				showQRCodePopup: false,
				// 核销二维码图片url (通过后端获取)
				qrcodeImage: '',
				where: {},
				showQRCodeBind: false,
				bindValue: '',
				// 选择的设备
				equipment: {},
				equipmentId: null,
				showQRCodeBindChange: false,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 初始化当前选中的标签
			this.initCurTab(options)
			// 注册全局事件订阅: 是否刷新订单列表
			uni.$on('syncRefreshOrder', canReset => {
				this.canReset = canReset
			})
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.canReset && this.onRefreshList()
			this.canReset = false
		},

		/**
		 * 生命周期函数--监听页面的卸载
		 */
		onUnload() {
			// 卸载全局事件订阅
			uni.$off('syncRefreshOrder')
		},

		methods: {
			scan() {
				const app = this

				my.ap.openAlipayApp({
					appCode: 'alipayScan',
					success: res => {
						console.log('openAlipayApp success', res);
					},
					fail: err => {
						console.log('openAlipayApp fail', err);
					}
				});


			},
			// 初始化当前选中的标签
			initCurTab(options) {
				const app = this
				if (options.dataType) {
					const index = app.tabs.findIndex(item => item.value == options.dataType)
					app.curTab = index > -1 ? index : 0
				}
			},

			/**
			 * 上拉加载的回调 (页面初始化时也会执行一次)
			 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
			 * @param {Object} page
			 */
			upCallback(page) {
				const app = this
				// 设置列表数据
				app.getOrderList(page.num)
				//      .then(list => {
				// console.log("list: ",list);
				//        const curPageLen = list.data.length
				//        const totalSize = list.data.total
				//        app.mescroll.endBySize(curPageLen, totalSize)
				//      })
				//      .catch(() => app.mescroll.endErr())
			},
			// 获取订单列表
			getOrderList(pageNo = 1) {
				const app = this
				const {
					curTab
				} = this
				// app.where.userId = uni.getStorageSync('userId')
				console.log("curTab: ", curTab);
				app.where = {}
				if (curTab == 0) {
					app.where = {}
				}
				if (curTab == 1) {
					app.where.payStatus = 10;
				}
				if (curTab == 2) {
					app.where.payStatus = 20;
					app.where.receiptStatus = 10;
				}
				if (curTab == 3) {
					app.where.payStatus = 20;
					app.where.orderStatus = 30;
				}
				if (curTab == 4) {
					app.where.payStatus = 20;
					app.where.orderStatus = 40;
				}
				app.where.userId = uni.getStorageSync('userId');
				app.where.isRenew = 0;
				app.where.isApp = true;
				app.where.isFreeze = 1;
				pageOrder(app.where).then(res => {
					app.list = res.data.list
					const curPageLen = res.data.list.length
					const totalSize = res.data.count
					console.log("totalSize: ", totalSize);
					app.mescroll.endBySize(curPageLen, totalSize)

					app.list.map((d, index) => {
						const setTime = new Date(d.expirationTime);
						const nowTime = new Date();
						const restSec = setTime.getTime() - nowTime.getTime();
						// 剩余天数
						const day = parseInt(restSec / (60 * 60 * 24 * 1000));
						console.log("逾期天数: ", Math.abs(day));
						app.list[index].expirationDay = day
					})
				})
				// return new Promise((resolve, reject) => {
				//   OrderApi.list({ dataType: app.getTabValue(), page: pageNo }, { load: false })
				//     .then(result => {
				//       // 合并新数据
				//       const newList = app.initList(result.data.list)
				//       app.list.data = getMoreListData(newList, app.list, pageNo)
				//       resolve(newList)
				//     })
				// })
			},

			// 初始化订单列表数据
			initList(newList) {
				newList.data.forEach(item => {
					item.totalNum = 0
					item.goods.forEach(goods => {
						item.totalNum += goods.totalNum
					})
				})
				return newList
			},

			// 获取当前标签项的值
			getTabValue() {
				return this.tabs[this.curTab].value
			},

			// 切换标签项
			onChangeTab(index) {
				const app = this
				// 设置当前选中的标签
				app.curTab = index
				// 刷新订单列表
				app.onRefreshList()
			},

			// 刷新订单列表
			onRefreshList() {
				this.list = getEmptyPaginateObj()
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 120)
			},

			// 取消订单
			onCancel(orderId) {
				const app = this
				uni.showModal({
					title: '友情提示',
					content: '确认要取消该订单吗？',
					success(o) {
						if (o.confirm) {
							removeOrder(orderId)
								.then(result => {
									// 显示成功信息
									app.$toast(result.message)
									// 刷新订单列表
									app.onRefreshList()
								})
						}
					}
				});
			},

			// 确认收货
			onReceipt(orderId) {
				const app = this
				
				app.$navTo('pages/order/delivery', {
					orderId
				})
				// uni.showModal({
				// 	title: '友情提示',
				// 	content: '确认收到商品了吗？',
				// 	success(o) {
				// 		if (o.confirm) {
				// 			// OrderApi.receipt(orderId)
				// 			// 	.then(result => {
				// 			// 		// 显示成功信息
				// 			// 		app.$success(result.message)
				// 			// 		// 刷新订单列表
				// 			// 		app.onRefreshList()
				// 			// 	})
				// 			app.$navTo('pages/order/delivery', {
				// 				orderId
				// 			})
				// 		}
				// 	}
				// });
			},
			// 上传图片
			chooseImage(orderId) {
				const app = this
				this.$navTo('pages/order/delivery', {
					orderId
				})
				return;
				// 选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(chooseImageRes) {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uploadFile({
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'file'
						}).then(res => {
							console.log("res: ", res);
							const orderSourceData = JSON.stringify({
								orderId,
								photo: fileUrl + res.data.path
							})
							receiptOrder({
								orderId,
								orderSourceData
							}).then(result => {
								app.$success(result.message)
								// 刷新订单列表
								app.onRefreshList()
							})
						})
						// uni.uploadFile({
						// 	url: 'http://127.0.0.1:9090/api/open/file/upload', //仅为示例，非真实的接口地址
						// 	filePath: tempFiles,
						// 	name: 'file',
						// 	formData: {
						// 		'authorization': 'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ7XCJ1c2VybmFtZVwiOlwiMjA4ODIwMjk1OTA0NDIwNVwiLFwidGVuYW50SWRcIjo2fSIsImV4cCI6MTY3ODUwNDc1NSwiaWF0IjoxNjc4NDE4MzU1fQ.M-8RB724jmHmhMKut-AFW9i79vJVNdBDqoq-EInDses'
						// 	},
						// 	success: (uploadFileRes) => {
						// 		console.log(uploadFileRes.data);
						// 	}
						// });
						// tempFiles = [{path:'xxx', size:100}]
						// app.imageList = oldImageList.concat(tempFiles)
					}
				});
			},
			// 绑定设备页面
			onBind(item) {
				const app = this
				const {
					equipment
				} = item
				app.showQRCodeBind = true
				app.equipment = item
				// app.bindValue = equipment.equipmentCode
			},
			// 执行绑定
			doBind() {
				const app = this
				const {
					equipment,
					bindValue
				} = this
				EquipmentApi.bindEquipment({
					equipmentCode: bindValue,
					orderId: equipment.orderId
				}).then(result => {
					app.$success(result.message)
					app.showQRCodeBind = false
					// 刷新订单列表
					app.onRefreshList()
				}).catch(err => {
					app.$error(err.message)
				})
			},

			// 获取核销二维码
			onExtractQRCode(orderId) {
				const app = this
				OrderApi.extractQrcode(orderId, {
						channel: app.platform
					})
					.then(result => {
						app.qrcodeImage = result.data.qrcode
						app.showQRCodePopup = true
					})
			},

			handleRentingOut(order) {
				const app = this
				uni.showModal({
					title: '提示',
					content: "是否确认退租（如有逾期退租，将收取10元/天逾期费用）",
					success: (result) => {
						if (result.confirm) {
							EquipmentApi.rentingOut({
								orderId: order.orderId,
								isRefund: 1
							}).then(res => {
								this.$success(res.message)
								setTimeout(() => {
									// 刷新当前订单数据
									app.onRefreshList()
								}, 1000)
							}).catch(err => {
								this.$success(err.message)
							})
						}
					}
				})
			},

			handleRentingOutCancel(order) {
				const app = this
				uni.showModal({
					title: '提示',
					content: "是否取消退租",
					success: (result) => {
						if (result.confirm) {
							EquipmentApi.rentingOut({
								orderId: order.orderId,
								isRefund: 2
							}).then(res => {
								this.$success(res.message)
								setTimeout(() => {
									// 刷新当前订单数据
									app.onRefreshList()
								}, 1000)
							}).catch(err => {
								this.$success(err.message)
							})
						}
					}
				})
			},

			// 点击去支付
			onPay(orderId) {
				const app = this
				getOrderPayByOrderId(orderId).then(res => {
					if (res.data.isRenew == 0 && res.data.hasFreeze == 0) {
						if (res.data.equipmentCategory != 10 && res.data.orderStr) {
							my.tradePay({
								orderStr: res.data.orderStr, // 完整的支付参数拼接成的字符串，从服务端获取
								success: (res) => {

								},
								fail: (res) => {},
								complete: () => {
									checkFreeze(orderId).then((r) => {
										if (r.code == 0) {
											// app.$success("押金校验成功！")
											setTimeout(() => {
												// uni.redirectTo({
												// 	url: '/pages/order/index'
												// })
												this.$navTo(
													'pages/checkout/cashier/index', {
														orderId: r.data.id
													})
											}, 500)
										} else {
											app.$error(r.message)
											app.onRefreshList()
										}
									})
								}
							});
						} else {
							checkFreeze(orderId).then((r) => {
								if (r.code == 0) {
									app.$success("押金校验成功")
									setTimeout(() => {
										// uni.redirectTo({
										// 	url: '/pages/order/index'
										// })
										// app.onRefreshList()
										this.$navTo('pages/checkout/cashier/index', {
											orderId: r.data.id
										})
									}, 500)
								} else {
									app.$error(r.message)
									app.onRefreshList()
								}
							})
						}
					} else {
						this.$navTo('pages/checkout/cashier/index', {
							orderId: res.data.id
						})
					}

				})

			},

			// 跳转到订单详情页
			handleTargetDetail(orderId) {
				this.$navTo('pages/order/detail', {
					orderId
				})
			},

			// 跳转到订单评价页
			handleTargetComment(orderId) {
				this.$navTo('pages/order/comment/index', {
					orderId
				})
			},
			handleChangeEquipment(orderId, equipmentId) {
				const app = this
				app.orderId = orderId
				app.equipmentId = equipmentId
				app.showQRCodeBindChange = true
			},

			// 续费
			handleHireEquipment(orderId) {
				getOrderPayByOrderId(orderId).then(res => {
					this.$navTo('pages/checkout/cashier/index', {
						orderId: res.data.id
					})
				})

			},
			// 换电
			doEquipment(canReset = false) {
				const app = this
				const {
					orderId,
					bindValue,
					equipmentId
				} = this
				EquipmentApi.changeEquipment({
					equipmentCode: bindValue,
					orderId,
					equipmentId
				}).then(result => {
					app.$success(result.message)
					app.showQRCodeBindChange = false
					app.bindValue = ''
					// 刷新订单列表
					app.onRefreshList()
				}).catch(err => {
					app.$error(err.message)
				})
				console.log("this.bindValue: ", this.bindValue);
			}

		},

	}
</script>

<style lang="scss" scoped>
	.scan {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #cecece;
	}

	// 项目内容
	.order-item {
		margin: 20rpx auto 20rpx auto;
		padding: 30rpx 30rpx;
		width: 94%;
		box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background: #fff;
	}

	// 项目顶部
	.item-top {
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		margin-bottom: 40rpx;

		.order-time {
			color: #333333;
			font-weight: bold;
		}

		.state-text {
			color: $main-bg;
		}
	}

	// 商品列表
	.goods-list {

		// 商品项
		.goods-item {
			display: flex;
			margin-bottom: 10rpx;

			// 商品图片
			.goods-image {
				width: 100rpx;
				// height: 200rpx;

				.image {
					display: block;
					width: 100rpx;
					height: 100rpx;
					border-radius: 8rpx;
				}
			}

			// 商品内容
			.goods-content {
				flex: 1;
				padding-left: 16rpx;
				padding-top: 16rpx;

				.goods-title {
					width: 420rpx;
					font-size: 26rpx;
					// max-height: 76rpx;
					line-height: 36rpx;
				}

				.goods-props {
					margin-top: 14rpx;
					height: 40rpx;
					color: #ababab;
					font-size: 24rpx;
					overflow: hidden;

					.goods-props-item {
						display: inline-block;
						margin-right: 14rpx;
						padding: 4rpx 16rpx;
						border-radius: 12rpx;
						background-color: #F5F5F5;
						width: auto;
					}
				}


			}

			// 交易信息
			.goods-trade {
				padding-top: 16rpx;
				width: 200rpx !important;
				text-align: right;
				color: $uni-text-color-grey;
				font-size: 26rpx;

				.goods-price {
					vertical-align: bottom;
					margin-bottom: 16rpx;

					.unit {
						margin-right: -2rpx;
						font-size: 24rpx;
					}
				}
			}

		}

	}

	// 订单合计
	.order-total {
		font-size: 26rpx;
		vertical-align: bottom;
		text-align: right;
		// height: 80rpx;
		// padding-top: 60rpx;
		// margin-bottom: 30rpx;

		.unit {
			margin-left: 8rpx;
			margin-right: -2rpx;
			font-size: 26rpx;
		}

		.money {
			font-size: 28rpx;
			color: #ff0000;
		}
	}

	// 订单操作
	.order-handle {
		.btn-group {
			.btn-item {
				border-radius: 10rpx;
				padding: 8rpx 10rpx;
				margin-left: 15rpx;
				font-size: 26rpx;
				float: right;
				color: #383838;
				border: 1rpx solid #a8a8a8;

				&:last-child {
					margin-left: 0;
				}

				&.active {
					color: $main-bg;
					border: 1rpx solid $main-bg;
				}
			}

		}

	}

	// 弹出层 - 核销二维码
	.qrcode-popup {
		padding: 36rpx 30rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 26rpx;
			font-weight: bold;
			text-align: center;
		}

		.pop-content {
			min-height: 260rpx;
			padding: 0 10rpx;

			.image {
				display: block;
				width: 510rpx;
				height: 510rpx;
			}

		}
	}

	// 弹出层 - 绑定设备码
	.qrcode-bind {
		width: 550rpx;

		padding: 36rpx 30rpx;

		.title {
			font-size: 30rpx;
			margin-bottom: 26rpx;
			font-weight: bold;
			text-align: center;
		}

		.bind-content {
			padding: 0 10rpx;
			border: 1rpx solid #eee;
			font-size: 24rpx;

			.image {
				display: block;
				width: 510rpx;
				height: 510rpx;
			}

		}

		.submit {
			margin-top: 30rpx;
		}
	}

	.yuqi-text {
		color: #ff0000;
	}
</style>