junzitang/pagesT/order/orderDetail.vue

<template>
	<view style="height: 100%;" :class="['qn-page-' + theme]">
		<u-navbar v-if="navFixed" title="订单详情" title-color="#ffffff" back-icon-color="#ffffff" :border-bottom="false" :background="{ backgroundImage: primaryJb }"></u-navbar>
		<view class="box">
			<view class="top-view primary-btn">
				<uniStatusBar></uniStatusBar>
				<view class="nav-bar">
					<text @click="backPage" class="nv-back ibonfont ibonfanhui"></text>
					<text class="title-text">订单详情</text>
				</view>
				<view class="order-status-view clearfix">
					<view class="float_left">
						<view class="order-status-text">
							<text v-if="order_detail.deliveryName === '上门自提' && order_detail.orderStatus >= 3">自提码：{{ order_detail.verifyCode }}</text>
							<text v-else>
								{{
									order_detail.orderStatus === 1
										? '待付款'
										: order_detail.orderStatus === 2
										? '待付款'
										: order_detail.orderStatus === 3
										? '待发货'
										: order_detail.orderStatus === 4
										? '待收货'
										: order_detail.orderStatus === 5
										? '已完成'
										: order_detail.orderStatus === 6
										? '已关闭'
										: order_detail.orderStatus === 7
										? '取消审核中'
										: ''
								}}
							</text>
							<view class="children-order-status">
								{{
									order_detail.orderStatus === 1
										? '请尽快付款，宝贝才能快些到您身边哦'
										: order_detail.orderStatus === 2
										? '请尽快付款，宝贝才能快些到您身边哦'
										: order_detail.orderStatus === 3
										? order_detail.deliveryType === 2
											? '请尽快前往自提点取货'
											: '正在为您紧急备货中……'
										: order_detail.orderStatus === 4
										? '确认宝贝无误后再签收哦！'
										: order_detail.orderStatus === 5
										? '本次交易已完成，祝您购物愉快'
										: order_detail.orderStatus === 6
										? '本次交易已关闭'
										: order_detail.orderStatus === 7
										? '您已发起取消订单，请等待审核'
										: ''
								}}
							</view>
						</view>
					</view>
					<view class="float_right">
						<text
							class="ibonfont order-icon"
							:class="[
								order_detail.orderStatus === 1
									? 'ibondaifukuan1'
									: order_detail.orderStatus === 2
									? 'ibondaifukuan1'
									: order_detail.orderStatus === 3
									? 'ibondaifahuo1'
									: order_detail.orderStatus === 4
									? 'ibondaishouhuo'
									: order_detail.orderStatus === 5
									? 'ibonyiwancheng'
									: order_detail.orderStatus === 6
									? 'ibonjiaoyiguanbix'
									: order_detail.orderStatus === 7
									? 'ibonjiaoyiguanbix'
									: ''
							]"
						></text>
					</view>
				</view>
			</view>
			<u-alert-tips
				v-if="order_detail.extends && order_detail.extends.cancelRejectReason"
				type="warning"
				:description="`取消订单发起被拒：${order_detail.extends.cancelRejectReason}`"
			></u-alert-tips>
			<!-- 快递信息 -->
			<view class="address-view" v-if="order_detail.orderStatus > 3 && order_detail.deliveryType === 1" @click="goPage('/pagesT/order/orderLogistics?id=' + order_id)">
				<text class="ibonfont ibonwuliu ad-icon"></text>
				<view v-if="express_list.length > 0">
					<text class="title" style="font-size: 28rpx;">{{ express_list[0].context }}</text>
					<br />
					<text class="subtitle">{{ express_list[0].time }}</text>
				</view>
				<view v-else>
					<text class="title" style="font-size: 28rpx;">商品已下单</text>
					<br />
					<text class="subtitle">{{ $_utils.formatDate(order_detail.createTime) }}</text>
				</view>
				<text class="ibonfont ibonjinru ibonjinru-icon"></text>
			</view>
			<!-- 收货地址 -->
			<view class="address-view clearfix" v-if="order_detail.receiveData && [1, 3].includes(order_detail.deliveryType)">
				<text class="ibonfont ibondizhi2 ad-icon"></text>
				<view>
					<text class="title">{{ order_detail.receiveData.realName || '--' }} {{ order_detail.receiveData.mobile || '' }}</text>
					<br />
					<text class="subtitle">
						地址：{{ order_detail.receiveData.area.provinceName || '' }}{{ order_detail.receiveData.area.cityName || ''
						}}{{ order_detail.receiveData.area.districtName || '' }}{{ order_detail.receiveData.address || '' }}
					</text>
				</view>
			</view>
			<!-- 自提点信息 -->
			<view class="address-view clearfix" v-if="order_detail.deliveryType === 2">
				<text class="ibonfont ibondizhi2 ad-icon"></text>
				<view>
					<text class="title">{{ selfRuleData.name }} {{ selfRuleData.mobile }}</text>
					<br />
					<text class="subtitle" v-if="selfRuleData.startTime && selfRuleData.endTime">营业时间：{{ selfRuleData.startTime }}-{{ selfRuleData.endTime }}</text>
					<text class="subtitle" v-else>营业时间：全天</text>
					<text class="subtitle" style="padding-left:10rpx ;">{{ selfRuleData.day.join(',') }}</text>
					<br />
					<text class="subtitle">地址：{{ selfRuleData.provinceName }}{{ selfRuleData.cityName }}{{ selfRuleData.districtName }}{{ selfRuleData.address }}</text>
				</view>
			</view>
			<!-- 物流信息 -->
			<view
				class="address-view clearfix"
				v-if="order_detail.deliveryType === 3 && order_detail.orderStatus > 3 && order_detail.orderStatus !== 6 && order_detail.logisticsData"
			>
				<text class="ibonfont ibonwuliu ad-icon"></text>
				<view>
					<text class="title">{{ order_detail.logisticsData.name || '匿名司机' }}</text>
					<text @click="callphone(order_detail.logisticsData.truckTel)" style="margin-left: 50rpx;" class="title">{{ order_detail.logisticsData.truckTel }}</text>
					<text @click="callphone(order_detail.logisticsData.truckTel)" class="ibonfont ibondianhua primary-color"></text>
					<br />
					<text class="subtitle">车牌号：{{ order_detail.logisticsData.truckName }}</text>
					<br />
					<text class="subtitle">备注：{{ order_detail.logisticsData.remark }}</text>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="goods-view view-main">
				<view class="shop-name clearfix">
					<view class="float_left">
						<image class="shop-logo" :src="order_detail.shopLogo" mode=""></image>
						<text>{{ order_detail.shopName }}</text>
					</view>
				</view>
				<block v-for="(it, gindex) in order_detail.goodsData" :key="gindex">
					<view class="goods-li clearfix" @click="goPage(`/pagesT/product/product?id=${it.goodsId}`)">
						<image class="goods-img float_left" :src="it.images[0]" mode="aspectFill"></image>
						<view class="float_right goods-right">
							<view class="goods-name">{{ it.goodsName }}</view>
							<view class="goods-descrip" v-if="it.isEq === 5">
								<view class="desc-li">
									<text style="padding-right: 6upx;">{{ it.u_1 }};</text>
								</view>
								<view class="desc-li">
									<text class="icon-jia">下单：</text>
									<text class="goods-num">{{ it.u_1_buy }}{{ it.u_1 }}</text>
								</view>
								<!-- <view class="desc-li" v-if="order_detail.orderStatus === 4 || order_detail.orderStatus === 5">
									<text class="icon-jia">发货：</text>
									<text class="goods-num">{{ Number(it.outNum) }}{{ it.u_1 }}</text>
								</view> -->
							</view>
							<view class="goods-descrip">
								<view class="desc-li">
									<text style="padding-right: 6upx;">{{ it.unitName }};</text>
									<block v-for="(ip, indexSP) in it.specGroup" :key="indexSP">
										<text>{{ ip.specValueName }};</text>
									</block>
								</view>
								<view class="desc-li">
									<text class="icon-jia">下单：</text>
									<text class="goods-num">{{ it.buyNum }}{{ it.unitName }}</text>
								</view>
								<view class="desc-li" v-if="order_detail.orderStatus === 4 || order_detail.orderStatus === 5">
									<text class="icon-jia">发货：</text>
									<text class="goods-num">{{ Number(it.outNum) }}{{ it.unitName }}</text>
								</view>
							</view>
							<view class="goods-price clearfix">
								<view class="float_left">
									<block v-if="it.isEq === 5">
										<text class="price primary-color">¥{{ it.originPrice }}</text>
										<text class="primary-color" style="font-size: 22rpx;">/{{ it.u_1 }}</text>
									</block>
									<text class="price primary-color" v-else>¥{{ it.price }}</text>
								</view>
								<!-- <view class="float_right" v-if="order_detail.orderStatus === 5">
									<u-button
										v-if="it.returnStatus === 0"
										@click="goPage(`/pagesT/order/ReturnSales?orderId=${order_id}&goodsId=${it.goodsId}&skuId=${it.skuId}`)"
										size="mini"
										plain
									>
										售后
									</u-button>
									<u-button v-else @click="goPage(`/pagesT/order/ReturnOrder`)" size="mini" plain>{{ it.returnStatus === 1 ? '售后中' : '已售后' }}</u-button>
								</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="view-main order-info-view">
				<view class="order-info-tit">费用明细</view>
				<view class="order-info-cont">
					<view class="clearfix info-item">
						<text class="subtitle float_left">商品总额</text>
						<text class="money-val float_right">￥{{ order_detail.totalMoney || 0 }}</text>
					</view>
					<view class="clearfix info-item">
						<text class="subtitle float_left">订单优惠</text>
						<text class="money-val float_right">￥{{ order_detail.orderPreferential || 0 }}</text>
					</view>
					<view class="clearfix info-item">
						<text class="subtitle float_left">优惠券优惠</text>
						<text class="money-val float_right">￥{{ order_detail.preferential || 0 }}</text>
					</view>
					<view class="clearfix info-item">
						<text class="subtitle float_left">会员卡优惠</text>
						<text class="money-val float_right">￥{{ order_detail.vipDiscount || 0 }}</text>
					</view>
					<view class="clearfix info-item">
						<text class="subtitle float_left">退款金额</text>
						<text class="money-val float_right">￥{{ order_detail.retMoney || 0 }}</text>
					</view>
					<view class="clearfix info-item">
						<text class="subtitle float_left">运费</text>
						<text class="money-val float_right">￥{{ order_detail.expressMoney || 0 }}</text>
					</view>
				</view>
				<view class="order-price-view">
					<text v-if="parseInt(order_detail.payStatus) !== 5">应付款：</text>
					<text v-else>实付款：</text>
					<text class="price primary-color">¥{{ order_detail.payAmount || 0 }}</text>
				</view>
			</view>
			<view class="view-main order-info-view" v-if="!order_detail.payTypeMsg">
				<view class="order-info-tit">支付明细</view>
				<view class="order-info-cont">
					<view v-for="(item, index) in order_detail.extends.admixPayData" :key="index" class="clearfix info-item">
						<text class="subtitle float_left">{{ item.title || '' }}</text>
						<text class="money-val float_right">￥{{ item.payMoney || 0 }}</text>
					</view>
				</view>
			</view>
			<view class="view-main order-info-view">
				<view class="order-info-tit">订单信息</view>
				<view class="order-info-cont">
					<view class="order-info-li">
						<view class="clearfix info-item">
							<text class="subtitle float_left">订单编号：</text>
							<text class="titledetail float_right">{{ order_detail.no }}</text>
						</view>
						<view class="clearfix info-item">
							<text class="subtitle float_left">下单时间：</text>
							<text class="titledetail float_right">{{ $_utils.formatDate(order_detail.createTime) }}</text>
						</view>
						<view class="clearfix info-item" v-if="order_detail.extends && order_detail.extends.cancelReason">
							<text class="subtitle float_left">订单取消：</text>
							<text class="titledetail float_right">{{ order_detail.extends.cancelReason }}</text>
						</view>
					</view>

					<view class="order-info-li order-money-view">
						<view class="clearfix info-item">
							<text class="subtitle float_left">配送方式</text>
							<text class="money-val float_right">{{ order_detail.deliveryName }}</text>
						</view>
						<view class="clearfix info-item">
							<text class="subtitle float_left">支付方式</text>
							<view class="money-val float_right" v-if="order_detail.payTypeMsg">{{ order_detail.payTypeMsg }}</view>
							<view class="money-val float_right" v-else>
								<text v-for="(item, index) in order_detail.extends.admixPayData" :key="index">{{ item.title }};</text>
							</view>
						</view>
						<block v-if="order_detail.extends.bankData && order_detail.extends.bankData.image">
							<view class="clearfix info-item">
								<text class="subtitle float_left">账户名称</text>
								<view class="money-val float_right">{{ order_detail.extends.bankData.name }}</view>
							</view>
							<view class="clearfix info-item">
								<text class="subtitle float_left">开户行</text>
								<view class="money-val float_right">{{ order_detail.extends.bankData.bankName }}</view>
							</view>
							<view class="clearfix info-item">
								<text class="subtitle float_left">银行账号</text>
								<view class="money-val float_right">{{ order_detail.extends.bankData.accountNumber }}</view>
							</view>
							<view class="clearfix info-item">
								<text class="subtitle float_left">打款凭证</text>
								<view class="money-val float_right" @click="previewImage(order_detail.extends.bankData.image)">
									<image style="width: 150rpx;height: 200rpx;" :src="order_detail.extends.bankData.image" mode="heightFix"></image>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="view-main order-info-view">
				<view class="order-info-tit">备注</view>
				<view style="font-size: 28upx;">{{ order_detail.remark || '--' }}</view>
			</view>
		</view>

		<view class="clearfix botton-btn-view" v-if="[1, 2, 3, 4, 5].includes(order_detail.orderStatus)">
			<block v-if="[1, 2, 4, 5].includes(order_detail.orderStatus) || (order_detail.orderStatus === 3 && order_detail.auditStatus === 1)">
				<view class="btnS float_right primary-btn" v-if="order_detail.payType.indexOf('4') > -1 && [1, 2].includes(order_detail.orderStatus)" @click="upBankPic">
					上传凭证
				</view>
				<!-- #ifdef APP-PLUS||MP-WEIXIN||H5 -->
				<view
					class="btnS float_right primary-btn"
					v-if="parseInt(order_detail.payStatus) !== 5 && order_detail.orderStatus !== 5 && order_detail.payType.indexOf('4') === -1"
					@click="gopay"
				>
					去付款
				</view>
				<!-- #endif -->
				<!-- 出库状态等于5 的时候可以确认收货 以及出库状态等于6加上退款状态等于5的状态可以确认收货 -->
				<!-- (order_detail.orderStatus === 4 && order_detail.outStatus === 6 && order_detail.isRet === 5) -->
				<view
					class="btnS float_right primary-btn"
					v-if="
						(order_detail.orderStatus === 4 && order_detail.outStatus === 5) ||
						(order_detail.orderStatus === 4 && order_detail.outStatus === 6 )
					"
					@click="confirmOrder"
				>
					确认收货
				</view>
				<view class="btnS float_right primary-btn" v-if="order_detail.orderStatus === 5" @click="againPay">再次购买</view>
			</block>
			<view @click="cancelOrder" class="clearBtnS float_right" v-if="[1, 2].includes(order_detail.orderStatus) || (order_detail.orderStatus === 3 && isCancelOrder === 5)">
				取消订单
			</view>
		</view>
		<CancelOrder @confirm="cancelOrderConfirm" :cancelbeforeOrderStatus="order_detail.orderStatus" :payStatus='order_detail.payStatus' :orderId="order_id" @close="closeCancel" :show="cancel_show"></CancelOrder>
	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
import CancelOrder from './CancelOrder.vue';
export default {
	components: {
		uniStatusBar,
		CancelOrder
	},
	data() {
		return {
			navFixed: false,
			cancel_show: false,
			express_list: [],
			order_id: 0,
			price: '',
			selfRuleData: {},
			order_detail: {
				receiveData: {
					area: {}
				},
				deliveryName: ''
			},
			no: '',
			// 再次购买的goodsData
			goodsData: [],
			tmplIds: []
		};
	},
	computed: {
		// 是否在发货前可以取消订单
		isCancelOrder() {
			return this.$store.state.baseSet.cancelOrder || 5;
		}
	},
	async onLoad(options) {
		this.order_id = options.id;
		// #ifdef MP-WEIXIN
		this.getSettingDataByMessageId();
		// #endif
	},
	async onShow() {
		await this.getOrderInfoById();
		if (this.order_detail.deliveryNo) {
			await this.getExpressInfoByOrderId();
		}
	},
	onPageScroll(val) {
		this.navFixed = val.scrollTop > 5;
	},
	methods: {
		async getExpressInfoByOrderId() {
			await this.$u.api.getExpressInfoByOrderId(this.order_id).then(data => {
				this.express_list = data.data.list;
			});
		},
		// 再次购买
		againPay() {
			// if (this.$store.state.baseSet.personnelReview === 5) {
			// 验证账户状态
			this.userAudit();
			if (!this.isUserAudit) {
				return;
			}
			// }
			this.goodsData = this.order_detail.goodsData.map(item => {
				let obj = {};
				if (item.isEq === 5) {
					obj = {
						goodsId: item.goodsId,
						buyNum: item.u_1_buy,
						shopId: item.shopId,
						skuId: item.uId_1,
						source: this.$common.source(),
						goodsBasicId: item.goodsBasicId
					};
				} else {
					obj = {
						goodsId: item.goodsId,
						buyNum: item.buyNum,
						shopId: item.shopId,
						skuId: item.skuId,
						source: this.$common.source(),
						goodsBasicId: item.goodsBasicId
					};
				}

				return obj;
			});
			this.$u.api
				.addCart({
					goodsData: this.goodsData
				})
				.then(res => {
					this.goPage('/pages/cart/cart', 'switchTab');
				});
		},
		// 获取订单详情
		async getOrderInfoById() {
			await this.$u.api
				.getOrderInfoById(this.order_id)
				.then(data => {
					this.order_detail = data.data;
					this.selfRuleData = JSON.parse(data.data.selfRuleData);
					this.price = this.order_detail.totalMoney;
					this.no = this.order_detail.no;
				})
				.catch(err => {
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				});
		},
		// 去支付
		gopay() {
			const price = this.order_detail.payStatus === 3 ? this.order_detail.notPayMoney : this.order_detail.payAmount;
			uni.navigateTo({
				url: `/pagesT/money/pay?id=${this.order_id}&price=${price}&no=${this.no}&payType=${this.order_detail.payType}`
			});
		},
		// 上传打款凭证
		upBankPic() {
			const price = this.order_detail.payStatus === 3 ? this.order_detail.notPayMoney : this.order_detail.payAmount;
			this.goPage(`/pagesT/money/BankPay?orderId=${this.order_detail.id}&payAmount=${price}`, 'redirectTo');
		},
		closeCancel() {
			this.cancel_show = false;
		},
		//取消订单
		cancelOrder() {
			// #ifdef MP-WEIXIN
			if (this.tmplIds.length) {
				uni.requestSubscribeMessage({
					tmplIds: this.tmplIds,
					success: res => {
						this.cancelHandel();
					},
					fail: res => {
						this.cancelHandel();
					}
				});
			} else {
				this.cancelHandel();
			}
			// #endif
			// #ifdef APP-PLUS||H5
			this.cancelHandel();
			// #endif
		},
		cancelHandel() {
			this.cancel_show = true;
		},
		cancelOrderConfirm() {
			this.getOrderInfoById();
		},
		confirmOrder() {
			uni.showModal({
				title: '提示',
				content: '确定要确认收货吗？',
				success: res => {
					if (res.confirm) {
						this.$u.api
							.updateOrderStatus(this.order_id, {
								orderStatus: 5
							})
							.then(res => {
								this.$api.msg('操作成功');
								this.getOrderInfoById();
							});
					}
				}
			});
		},
		previewImage(image) {
			// 预览图片
			uni.previewImage({
				urls: [image],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏']
				}
			});
		},
		// 获取消息模版ID
		getSettingDataByMessageId() {
			this.$u.api
				.getSettingDataByMessageId({
					id: [5]
				})
				.then(res => {
					if (res.data.length > 0) {
						this.tmplIds = res.data.map(item => {
							return item.weixinTemplateId;
						});
					}
				});
		}
	}
};
</script>

<style lang="scss">
.top-view {
	background: $base-btn-bg;
	.nav-bar {
		padding: 24upx 0;
		position: relative;
		.nv-back {
			position: absolute;
			top: 24upx;
			color: #ffffff;
			left: 24upx;
			font-size: 40rpx;
		}
		.title-text {
			font-size: 32upx;
			color: #fff;
			display: inline-block;
			width: 100%;
			text-align: center;
			height: 40upx;
		}
	}

	.order-status-view {
		color: #fff;
		font-size: 36upx;
		padding: 40upx;
		.order-icon {
			margin-right: 10upx;
			font-size: 80upx;
			opacity: 0.9;
		}
		.children-order-status {
			font-size: 24upx;
			font-weight: 300;
			padding-top: 10upx;
		}
	}
}

.box {
	width: 100%;
	// overflow-y: scroll;
	padding-bottom: 140upx;
	// height: 100%;
	// margin-bottom: 130upx;
	background: $page-color-base;

	.view-main {
		margin-bottom: 24upx;
		background: #fff;
		// border-radius: 12upx;
		padding: 24upx;
	}

	.goods-view {
		padding: 24upx 0;
		.shop-name {
			color: #333;
			font-weight: bold;
			font-size: 24upx;
			padding: 0 24upx 24upx;
			line-height: 30upx;
			.shop-logo {
				width: 30upx;
				height: 30upx;
				vertical-align: middle;
				margin-right: 10upx;
			}
			.order-status {
				color: $uni-color-primary;
			}
		}

		.goods-li:last-child {
			margin-bottom: 0;
		}
		.goods-li {
			background: #fafafa;
			padding: 30upx 20upx;
			margin-bottom: 20upx;
			.goods-img {
				width: 180upx;
				height: 180upx;
				border-radius: 16rpx;
			}
			.goods-right {
				width: 500upx;
				margin-left: 20upx;
				.goods-name {
					color: #333;
					font-size: 32upx;
					margin-bottom: 19upx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				.goods-descrip {
					font-size: 24upx;
					color: #6c6c6c;
					margin-bottom: 10upx;
					display: flex;
					.desc-li {
						flex: 3;
						text-align: center;
						&:first-child {
							text-align: left;
						}
						&:last-child {
							text-align: right;
						}
					}
				}
				.goods-price {
					.price {
						color: $price-color;
						font-size: 40upx;
					}
					.sku {
						font-size: 22upx;
						font-weight: 300;
						color: #666;
					}
					.icon-jia {
						color: #666;
						font-size: 24upx;
					}
					.goods-num {
						font-size: 24upx;
					}
				}
			}
		}
	}
}

.address-view {
	font-size: 32upx;
	position: relative;
	padding: 24upx;
	padding-left: 80upx;
	margin-bottom: 24rpx;
	background: #fff;
	.subtitle {
		font-size: 28upx;
		color: #6c6c6c;
	}
	.ad-icon {
		position: absolute;
		top: 50%;
		left: 24upx;
		color: #666666;
		font-size: 36upx;
		transform: translateY(-50%);
	}
	.ibondianhua {
		font-size: 36rpx;
		margin-left: 20rpx;
	}
	.ibonjinru-icon {
		position: absolute;
		top: 50%;
		right: 14upx;
		color: #999999;
		font-size: 28upx;
		transform: translateY(-50%);
	}
}

.order-info-view {
	// font-size: 24upx;
	color: #3c3c3c;
	.order-info-tit {
		font-size: 28upx;
		padding-bottom: 20upx;
	}
	.order-info-cont {
		font-size: 24upx;

		.info-item {
			padding-bottom: 10upx;
			.subtitle {
				color: #666;
			}
		}
	}
	.order-info-li {
		border-bottom: 1upx solid #eee;
		padding-bottom: 24upx;
		margin-bottom: 24upx;
		.info-item {
			padding-bottom: 10upx;
			.subtitle {
				color: #666;
			}
		}
	}

	.order-price-view {
		text-align: right;
		padding: 20upx 24upx 0;
		margin-top: 20upx;
		border-top: 1upx solid #eee;
		font-size: 26upx;
		.price {
			color: $price-color;
			padding-left: 6upx;
			font-size: 32upx;
			font-weight: 600;
		}
	}
}

.botton-btn-view {
	background: #fff;
	position: fixed;
	box-shadow: 0upx -2upx 10upx 0upx rgba(136, 136, 136, 0.24);
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20upx;
	font-size: 28upx;

	.btnS {
		width: 200upx;
		line-height: 64upx;
		color: #ffffff;
		text-align: center;
		height: 64upx;
		border-radius: 10upx;
		margin-left: 10rpx;
	}

	.clearBtnS {
		width: 200upx;
		line-height: 64upx;
		color: #6e6e6e;
		text-align: center;
		margin-right: 10upx;
		height: 64upx;
		background: rgba(241, 241, 241, 1);
		border-radius: 10upx;
	}
}

.circleSty {
	display: inline-block;
	background-color: #9e9e9e;
	width: 20upx;
	height: 20upx;
	border-radius: 50%;
	margin-left: 20upx;
}

.subOrder {
	position: absolute;
	top: -10upx;
	left: 60upx;
}
</style>