qjd-shell-uniapp/pagesMain/orderDetail.vue

<template>
	<view class="container" :style="{paddingBottom: ((orderData.orderStatus >= 2 && orderData.orderStatus <= 4) || (orderData.orderStatus == 5 && orderData.evaluateReplyStatus == 1)) ? '' :'10px'}">
		<view class="order-type-info">
			<view class="order-type-title">{{orderType.title}}</view>
			<view class="order-type-text">{{orderType.text}}</view>
		</view>
		<view class="address-info-box">
			<view class="address-icon">
				<text class="iconfont icondizhi"></text>
			</view>
			<view class="address-content">
				<text class="address-info">
					<text class="address-name">{{orderData.recName}}</text>
					<text class="address-phone">{{orderData.recMobile}}</text>
				</text>
				<view class="address-detail">{{orderData.address}}</view>
			</view>
		</view>
		<view class="goods-info-box">
			<view class="shop-info">
				<text class="iconfont iconwode"></text>
				<text class="shop-name">{{orderData.nickname}}</text>
			</view>
			<view class="goods-list">
				<view class="goods-row" v-for="(item, index) in orderData.merchantInfoResVO.products" :key="index">
					<image class="goods-img" :src="item.imgUrl" mode="aspectFill"></image>
					<view class="goods-info">
						<view class="goods-name">{{item.productName}}</view>
						<view class="goods-type">
							类型：{{item.productType == 1 ? '普通商品' : (item.productType == 2 ? '拍卖商品' : (item.productType == 3 ? '自助采摘' : '共享种植'))}}
						</view>
						<view class="plant-area" v-if="item.productType == 4">面积：{{item.areaSize}}㎡</view>
						<view class="goods-price-number">
							<text class="goods-unit">￥</text>
							<text class="goods-price">{{item.bizPrice}}</text>
							<text class="goods-number">x{{item.buyNum}}</text>
							<text class="plant-text" v-if="item.productType == 4">有效期：{{item.term}}天</text>
						</view>
						<view class="goods-editnumber">
							<CnumberBox v-if="item.productType == 3 && isEdit" isDisabled @getNum="getStockNum($event,index)" minNum="1"></CnumberBox>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<u-cell-group :border="false">
					<u-cell-item title="商品金额" :value="'￥' + orderData.orderSum" :arrow="false" :border-bottom="false"></u-cell-item>
					<u-cell-item title="积分抵扣" :value="'-￥' + orderData.integralAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1 || goodType == 3"></u-cell-item>
					<u-cell-item title="优惠券" :value="'-￥' + orderData.couponDiscountAmount" :arrow="false" :border-bottom="false" v-if="goodType == 1 || goodType == 3"></u-cell-item>
					<u-cell-item title="备注" :value="orderData.notes" :arrow="false" :border-bottom="false"></u-cell-item>
				</u-cell-group>
			</view>
			<view class="pay-info">
				<text class="pay-text">实付款</text>
				<text class="pay-price">￥{{orderData.paySum}}</text>
			</view>
		</view>
		<view class="order-info-box" @click="goToMessage()">
			<view class="info-title-box">
				<view class="info-title">留言板</view>
				<text class="iconfont iconfangxiang"></text>
			</view>
			<view class="info-content-box">
				<view class="message-row" v-for="(item, index1) in orderData.leas" :key="index1">
					<image class="message-head" :src="item.headImg" mode="aspectFill"></image>
					<view class="message-info-box">
						<view class="message-name">{{item.name}}</view>
						<view class="message-date">{{item.leaMsgTime}}</view>
						<view class="message-text">{{item.leaMsgContent}}</view>
						<!-- <view class="message-img-box" v-for="(site, index2) in item.orderLeaImgResVOs" :key="index2">
							<image class="message-img" :src="site.imgUrl" mode="aspectFill"></image>
						</view -->
					</view>
				</view>
			</view>
		</view>
		<view class="order-info-box">
			<view class="info-title-box">
				<view class="info-title">订单信息</view>
			</view>
			<view class="info-content-box">
				<view class="order-info-row">订单编号：{{orderData.orderCode}}</view>
				<view class="order-info-row">创建时间：{{orderData.addOrderTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 1 && orderData.orderStatus != 6">支付时间：{{orderData.payTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 2 && orderData.orderStatus != 6">发货时间：{{orderData.sendTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus > 3 && orderData.orderStatus != 6">收货时间：{{orderData.confirmTime}}</view>
				<view class="order-info-row" v-if="orderData.orderStatus == 6">取消时间：{{orderData.cancelTime}}</view>
			</view>
		</view>
		<view class="order-info-box" v-if="orderData.evaluateResVO && orderData.evaluateResVO.evaluateContent">
			<view class="info-title-box">
				<view class="info-title">评价信息</view>
			</view>
			<view class="info-content-box">
				<view class="assess-row">
					<image class="assess-head" mode="aspectFill" :src="orderData.merchantInfoResVO.headImg"></image>
					<view class="assess-info">
						<view class="assess-name">{{orderData.nickname}}</view>
						<view class="assess-date">{{orderData.evaluateResVO.evaluateTime ? orderData.evaluateResVO.evaluateTime : ''}}</view>
						<view class="assess-sore-box">
							<u-rate v-model="orderData.evaluateResVO.score" active-color="#FFAE21" disabled></u-rate>
						</view>
						<view class="assess-text">{{orderData.evaluateResVO.evaluateContent ? orderData.evaluateResVO.evaluateContent : '暂无评价'}}</view>
						<view class="assess-img-box">
							<image class="img-col" mode="aspectFill" :src="item.imgUrl" v-for="(item,i) in orderData.evaluateResVO.evaluateImgs" :key="i" @tap="_previewImage(item.imgUrl,i)"></image>
						</view>
					</view>
					<view class="shop-reply-box" v-if="orderData.evaluateResVO.replyContent">
						<view class="shop-head">
							<view class="iconfont icondianpu"></view>
							<view class="shop-name">我的回复</view>
						</view>
						<view class="shop-reply">{{orderData.evaluateResVO.replyContent}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-goods-nav :fill="true" :options="[]" @click="" @buttonClick="orderHandle" class="order-handle" :buttonGroup="buttonGroup"
		 v-if="(orderData.orderStatus >= 1 && orderData.orderStatus <= 4) || (orderData.orderStatus == 5 && orderData.evaluateReplyStatus == 1)" />
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="uni-popup-dialog" :hidden="show_qx">
			<view class="uni-dialog-title">
				<text class="uni-dialog-title-text">提示</text>
			</view>
			<view class="uni-dialog-content">
				<text class="uni-dialog-content-text">请在设置中开启摄像头权限和麦克风权限</text>
			</view>
			<view class="uni-dialog-button-group">
				<button class="uni-dialog-button uni-border-left" open-type="openSetting" @click="closeSetting">
					设置权限
				</button>
			</view>
		
		</view>
		<view class="qx_bg" :hidden="show_qx">
		</view>
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	import CnumberBox from '@/components/CnumberBox.vue'
	export default {
		components: {
			CnumberBox
		},
		data() {
			return {
				show_qx:true,
				orderType: {
					title: '',
					text: '',
				},
				orderData: {
					orderId: '',
					orderStatus: 1,
					addOrderTime: '',
					recName: '',
					recMobile: '',
					address: '',
					merchantInfoResVO: {
						supplierName: '',
						products: [],
					},
					orderSum: 0,
					integralAmount: 0,
					couponDiscountAmount: 0,
					notes: 'xxxxx',
					paySum: 0,
					leas: [],
					orderCode: '',
					payTime: '',
					sendTime: '',
					confirmTime: '',
					cancelTime: '',
					tenantCode: '',
					evaluateReplyStatus: 1,
				},
				goodType: 1, // 1是普通商品类型；2是包含自助采摘+普通商品的类型；3是拍卖、共享种植
				buttonGroup: [
				    {
				    	text: '',
				    	backgroundColor: '#52A63A',
				    	color: '#fff'
				    }	
				],
				noPick: true, // 没有自助采摘的商品
				isEdit: false,
				orderId: '',
				orderStatus: 1,
				isClick: false
			}
		},
		onLoad(options) {
			this.userData = uni.getStorageSync("userData")
			this.orderId = options.orderId
			this.orderStatus = options.orderStatus
			this.getDetail()
		},
		onShow() {},
		methods: {
			closeSetting:function(){
				this.show_qx=true;
			},
			// 获取订单详情
			getDetail() {
				NET.request(API.getOrderDetail, {
					flag: 2,
					orderId: this.orderId,
					orderStatus: this.orderStatus,
				}, 'GET').then(res => {
					this.orderData = res.data
					console.log('订单数据',this.orderData)
					if (this.orderData.addOrderTime) {
						let tempTime = new Date(this.orderData.addOrderTime.replace(/\-/g, '/')).getTime()
						let addTempTime = new Date(tempTime + 1000 * 60 * 60 * 24)
						let addYear = addTempTime.getFullYear()
						let addMonth = addTempTime.getMonth() + 1
						let addDay = addTempTime.getDate()
						let addHours = addTempTime.getHours()
						let addMin = addTempTime.getMinutes()
						let addSeconds = addTempTime.getSeconds()
						this.orderData.overTime = addYear + '年' + addMonth + '月' + addDay + '日' + addHours + ':' + addMin + ':' +
							addSeconds
					}
					if (this.orderData.merchantInfoResVO.products.length && this.orderData.merchantInfoResVO.products[0].productType !=
						2 && this.orderData.merchantInfoResVO.products[0].productType != 4) {
						// this.goodType = 1
						if (this.orderData.merchantInfoResVO.products.some(v => {return v.productType == 3})) {
							this.goodType = 3
						} else {
							this.goodType = 1
						}
					} else {
						this.goodType = 2
					}
					if (this.orderData.orderStatus == 1 && this.goodType == 3) {
						this.buttonGroup = [{
							text: '修改订单',
							backgroundColor: '#75BD60',
							color: '#fff'
						}]
					} else if (this.orderData.orderStatus == 2) {
						if (this.orderData.merchantInfoResVO.products.length) {
							if (this.orderData.merchantInfoResVO.products.some(v => {return v.productType == 3})) {
							    this.noPick = false
								this.buttonGroup = [{
									text: '发货',
									backgroundColor: '#75BD60',
									color: '#fff'
								}, {
									text: '自助采摘',
									backgroundColor: '#52A63A',
									color: '#fff'
								}]
							} else {
								this.buttonGroup = [{
									text: '发货',
									backgroundColor: '#75BD60',
									color: '#fff'
								}]
							}
						}
						if (this.orderData.auctionStatus == 1) {
							this.buttonGroup = []
						}
					} else if (this.orderData.orderStatus == 3 || this.orderData.orderStatus == 4) {
						this.buttonGroup[0].text = '追踪物流'
					} else if (this.orderData.evaluateReplyStatus == 1) {
						this.buttonGroup[0].text = '回复'
					} else {
						this.buttonGroup = []
					}
					this.getOrderType()
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.data.msg,
						type: 'warning',
					})
				})
			},
			// 获取子组件的库存数量/
			getStockNum(num,index) {
				this.isClick = true
				debugger
				this.orderData.merchantInfoResVO.products[index].buyNum = num
				this.getEditSum()
			},
			// 计算实付额和订单总额
			getEditSum() {
				let price = this.orderData.merchantInfoResVO.products.reduce((total, site) => {
					return total + site.bizPrice * site.buyNum
				}, 0)
				this.orderData.orderSum = price.toFixed(2)
				this.orderData.paySum = (price - this.orderData.discountAmount).toFixed(2)
			},
			//  获取订单类型
			getOrderType() {
				switch (this.orderData.orderStatus) {
					case 1:
						this.orderType = {
							title: '等待买家付款',
							text: '订单将于' + this.orderData.overTime + '关闭',
						}
						break;
					case 2:
						this.orderType = {
							title: '待发货',
							text: '买家已付款，请尽快发货',
						}
						break;
					case 3:
						this.orderType = {
							title: '已发货',
							text: '商品正在运输中',
						}
						break;
					case 4:
						this.orderType = {
							title: '已送达',
							text: '商品已送达',
						}
						break;
					case 5:
						this.orderType = {
							title: '交易已完成',
							text: '',
						}
						break;
					default:
						this.orderType = {
							title: '交易已取消',
							text: '',
						}
				}
			},
			//  操作
			orderHandle(e) {
				if (this.orderData.orderStatus == 1) {
					this.buttonGroup = [{
						text: this.isEdit ? '修改订单' : '提交订单',
						backgroundColor: this.isEdit ? '#52A63A' : '#75BD60',
						color: '#fff'
					}]
					if (this.isEdit) {
						if (!this.isClick) {
							this.orderData.merchantInfoResVO.products.forEach(v => {
								if (v.productType == 3) {
									v.buyNum = 1
								}
							})
							this.getEditSum()
						}
						NET.request(API.editOrder, {
							orderId: this.orderData.orderId,
							orderSum: this.orderData.orderSum,
							paySum: this.orderData.paySum,
							products: this.orderData.merchantInfoResVO.products
						}, 'POST').then(res => {
							this.$refs.uTips.show({
								title: '修改成功',
								type: 'success',
							})
							this.getDetail()
						}).catch(error => {
							this.$refs.uTips.show({
								title: error.data.msg,
								type: 'warning',
							})
						})
					}
					this.isEdit = !this.isEdit
				} else if (this.orderData.orderStatus == 2) {
					if (e.index == 0) {
						//  发货
						uni.navigateTo({
							url: '/pagesMain/bindOrder?orderId=' + this.orderData.orderId
						});
					} else if (e.index == 1) {
						//  去自助采摘
						var that=this;
						if(uni.getStorageSync("firstTimeLive")==""){
							uni.setStorage({
								key: 'firstTimeLive',
								data: 1
							})
							uni.navigateTo({
								url: '/pagesMedia/pickVideo?tenantCode=' + that.orderData.tenantCode + '&orderId=' + that.orderData.orderId
							});
						}else{
							uni.navigateTo({
								url: '/pagesMedia/pickVideo?tenantCode=' + that.orderData.tenantCode + '&orderId=' + that.orderData.orderId
							});
						}
						
						
					}
				} else if (this.orderData.orderStatus == 3 || this.orderData.orderStatus == 4) {
					//  追踪物流
					uni.navigateTo({
						url: '/pagesMain/logisticsDeatil?logisticCode=' + this.orderData.logisticsNum
					});
				} else {
					//  回复
					uni.navigateTo({
						url: '/pagesMain/evaluateForm?orderId=' + this.orderData.orderId +'&mid='+this.orderData.mid
					});
				}
			},
			//  跳转留言列表
			goToMessage() {
				uni.navigateTo({
					url: '/pagesMain/messageList?orderId=' + this.orderData.orderId + '&tenantCode=' + this.orderData.tenantCode
				});
			},
			// 图片预览
			_previewImage(image,index) {
				var imgArr = [];
				imgArr.push(image);
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			} 
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		float: left;
		background-color: #f7f7f7;
		box-sizing: border-box;
		overflow-y: auto;
		position: absolute;

		.order-type-info {
			width: 100%;
			height: 115px;
			float: left;
			box-sizing: border-box;
			padding: 22px 100px 0 15px;
			background: #52A63A;
			border-radius: 0px 0px 20px 20px;
			background-size: 62px;
			background-position: calc(100% - 48px) 12px;
			background-repeat: no-repeat;
			background-image: url(@/static/images/orderDetail.png);

			.order-type-title {
				width: 100%;
				float: left;
				height: 20px;
				line-height: 20px;
				font-size: 15px;
				font-family: PingFang SC;
				color: #FFFFFF;
				margin-bottom: 4px;
			}

			.order-type-text {
				width: 100%;
				float: left;
				height: 20px;
				line-height: 20px;
				font-size: 12px;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}

		.address-info-box {
			width: calc(100% - 30px);
			float: left;
			box-sizing: border-box;
			padding: 16px 18px 16px 16px;
			margin: -34px 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 10px;

			.address-icon {
				width: 36px;
				height: 40px;
				float: left;
				align-items: center;
				display: flex;

				.iconfont {
					color: #52A63A;
					font-size: 36px;
				}
			}

			.address-content {
				width: calc(100% - 56px);
				height: 40px;
				float: left;
				margin: 0 8px 0 12px;

				.address-info {
					height: 20px;
					font-family: PingFang SC;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					.address-name {
						font-size: 16px;
						color: #333333;
						margin-right: 14px;
					}

					.address-phone {
						font-size: 12px;
						color: #666666;
					}
				}

				.address-detail {
					height: 20px;
					font-size: 16px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 20px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.goods-info-box {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 10px;

			.shop-info {
				width: 100%;
				height: 48px;
				float: left;
				box-sizing: border-box;
				padding: 13px 15px 12px 15px;
				border-bottom: 1px solid #EEEEEE;
				line-height: 22px;

				.iconwode {
					font-size: 22px;
					color: #333333;
				}

				.shop-name {
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					margin: 0 8px 0 10px;
				}

				.iconshangjia {
					font-size: 12px;
					color: #999999;
				}
			}

			.goods-list {
				width: 100%;
				float: left;
				box-sizing: border-box;
				padding: 10px 15px 0 15px;

				.goods-row {
					width: 100%;
					height: 110px;
					float: left;
					display: flex;
					margin-bottom: 10px;

					.goods-img {
						width: 90px;
						height: 90px;
						border-radius: 5px;
						object-fit: cover;
					}

					.goods-info {
						width: calc(100% - 106px);
						height: 90px;
						margin-left: 16px;

						.goods-name {
							width: 100%;
							height: 36px;
							float: left;
							font-size: 14px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 18px;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
						}

						.goods-type {
							height: 20px;
							float: left;
							background: #F0F0F0;
							border-radius: 4px;
							padding: 0 8px;
							margin: 6px 0;
							font-size: 10px;
							font-family: PingFang SC;
							color: #666666;
							line-height: 20px;
						}

						.plant-area {
							height: 20px;
							float: right;
							margin: 6px 0;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}

						.goods-price-number {
							width: 60%;
							height: 20px;
							float: left;
							line-height: 40px;
							font-family: PingFang SC;
							color: #333333;

							.goods-unit {
								font-size: 12px;
							}

							.goods-price {
								font-size: 15px;
								margin-right: 6px;
							}

							.goods-number {
								font-size: 12px;
							}
						}
                        
						.goods-editnumber {
							float: left;
							width: 35%
						}

						.plant-text {
							float: right;
							font-size: 12px;
							font-family: PingFang SC;
							color: #333333;
						}
					}
				}
			}

			.order-info {
				width: 100%;
				float: left;

				/deep/.u-cell {
					padding: 6px 16px;
				}
			}

			.pay-info {
				width: 100%;
				height: 46px;
				float: left;
				box-sizing: border-box;
				border-top: 1px solid #EEEEEE;
				padding-right: 15px;
				line-height: 44px;
				font-family: PingFang SC;
				font-size: 14px;
				text-align: right;
				white-space: nowrap;

				.pay-text {
					float: left;
					color: #333333;
					margin-left: 15px;
				}

				.pay-price {
					color: #52A63A;
				}
			}
		}

		.order-info-box {
			width: calc(100% - 30px);
			float: left;
			margin: 0 15px 10px 15px;
			background: #FFFFFF;
			border-radius: 10px;

			.info-title-box {
				width: 100%;
				height: 48px;
				float: left;
				box-sizing: border-box;
				padding: 15px 15px 14px 15px;
				border-bottom: 1px solid #EEEEEE;
				line-height: 18px;
				white-space: nowrap;

				.info-title {
					height: 18px;
					float: left;
					font-size: 15px;
					font-family: PingFang SC;
					color: #333333;
					margin-right: 8px;
					padding-left: 10px;
					border-left: 2px solid #74BD60;
				}

				.iconfangxiang {
					float: right;
					font-size: 12px;
					color: #999999;
				}
			}

			.info-content-box {
				width: 100%;
				float: left;
				padding: 15px 0;

				.message-row {
					width: 100%;
					float: left;
					box-sizing: border-box;
					padding: 0 15px;
					margin-bottom: 15px;

					.message-head {
						width: 50px;
						height: 50px;
						object-fit: cover;
						float: left;
						border-radius: 50%;
						overflow: hidden;
					}

					.message-info-box {
						width: calc(100% - 75px);
						float: right;

						.message-name {
							width: 50%;
							height: 30px;
							float: left;
							font-size: 15px;
							font-family: PingFang SC;
							color: #333333;
							line-height: 30px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-date {
							width: 50%;
							height: 30px;
							float: left;
							font-size: 12px;
							font-family: PingFang SC;
							color: #666666;
							text-align: right;
							line-height: 30px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-text {
							width: 100%;
							height: 20px;
							float: left;
							font-size: 12px;
							font-family: PingFang SC;
							color: #666666;
							line-height: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.message-img-box {
							width: 100%;
							float: left;

							.message-img {
								width: 76px;
								height: 76px;
								object-fit: cover;
								float: left;
								margin: 0 10px 10px 0;
							}
						}
					}
				}

				.message-row:last-child {
					margin-bottom: 0;
				}

				.order-info-row {
					width: 100%;
					float: left;
					box-sizing: border-box;
					padding: 0 15px;
					font-size: 12px;
					font-family: PingFang SC;
					color: #333333;
					line-height: 26px;
					word-break:break-all; 
				}
			}
			.assess-row {
				width: calc(100% - 30px);
				margin: 0 15px;
				float: left;
				// border-top: 1px solid #F6F6F6;
				padding: 12px 0;
			
				.assess-head {
					width: 50px;
					height: 50px;
					float: left;
					object-fit: cover;
					border-radius: 50%;
				}
			
				.assess-info {
					width: calc(100% - 62px);
					margin-left: 12px;
					float: left;
			
					.assess-name {
						height: 18px;
						float: left;
						line-height: 18px;
						font-size: 15px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #343434;
					}
			
					.assess-date {
						height: 18px;
						float: right;
						line-height: 18px;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
					}
			
					.assess-sore-box {
						width: 100%;
						height: 16px;
						float: left;
						margin: 6px 0;
					}
			
					.assess-text {
						width: 100%;
						float: left;
						font-size: 12px;
						font-family: PingFang SC;
						font-weight: bold;
						color: #666666;
						line-height: 16px;
						margin: 8px 0 10px 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
					}
			
					.assess-img-box {
						width: 100%;
						float: left;
						display: flex;
			
						.img-col {
							height: 60px;
							width: 60px;
							object-fit: cover;
							margin: 0 10px 10px 0;
						}
					}
				}
			
				.shop-reply-box {
					width: 100%;
					float: left;
					background: #F5F5F5;
					border-radius: 5px;
					margin-top: 10px;
			
					.shop-head {
						width: 100%;
						height: 36px;
						float: left;
						box-sizing: border-box;
						padding: 10px 12px;
			
						.icondianpu {
							width: 16px;
							height: 16px;
							float: left;
							color: #52A63A;
							font-size: 20px;
							margin-right: 8px;
						}
			
						.shop-name {
							height: 16px;
							float: left;
							font-size: 15px;
							font-family: PingFang SC;
							color: #52A63A;
							line-height: 16px;
						}
					}
			
					.shop-reply {
						width: 100%;
						float: left;
						box-sizing: border-box;
						padding: 0 12px 12px 12px;
						font-size: 12px;
						font-family: PingFang SC;
						color: #666666;
						line-height: 16px;
					}
				}
			}
		}

		.order-handle {
			width: 100%;
			height: 50px;
			float: left;
			border-top: 1px solid #cccccc;
		}
	}
	.uni-popup-dialog {
		width: 80vw;
		border-radius: 15px;
		background-color: #fff;
		position: fixed;
		margin-left: 10vw;
		top: 34vh;
		z-index: 11;
	}
	
	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 15px;
		padding-bottom: 5px;
	}
	
	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}
	
	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 5px 15px 15px 15px;
		text-align: center;
	}
	
	.uni-dialog-content-text {
		font-size: 14px;
		color: #6e6e6e;
	}
	
	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}
	
	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		    background: rgba(0, 0, 0, 0);
		    border: none;
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}
	
	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 0px;
	}
	
	.uni-dialog-button-text {
		font-size: 14px;
	}
	
	.uni-button-color {
		color: #007aff;
	}
	
	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
	}
	
	.uni-popup__success {
		color: #4cd964;
	}
	
	.uni-popup__warn {
		color: #f0ad4e;
	}
	
	.uni-popup__error {
		color: #dd524d;
	}
	
	.uni-popup__info {
		color: #909399;
	}
	.qx_bg{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.25);
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
	}
	/deep/.uni-tab__cart-button-right{
		border-right: 1px solid #ffffff;
	}
	/deep/.uni-tab__cart-button-right:last-child{
		border-right: none;
	}
</style>