QianNiaoShop/pages/order/orderInfo.vue

<template>
	<view class="detail-view">
		<view class="top-view clearfix">
			<view class="float_left">
				<view class="status-view">
					<text class="status-text">{{ order_detail.orderMsg }}</text>
					<u-icon name="arrow-right" size="40"></u-icon>
				</view>
				<view class="cancel-reson" v-if="[6, 7].includes(order_detail.orderStatus) && order_detail.extends.cancelReason">
					取消原因：{{ order_detail.extends.cancelReason || '无' }}
				</view>
			</view>
			<view class="float_right" v-if="order_detail.deliveryType === 2 && order_detail.verifyCode">
				<u-icon name="tags-fill" color="#ffffff"></u-icon>
				<text style="margin-left: 10rpx;">{{ order_detail.verifyCode }}</text>
			</view>
		</view>
		<view class="customer-view">
			<view class="title clearfix">
				<view class="float_left ellipsis" @click="copyOrderInfo">
					<text style="margin-right: 20rpx;">{{ order_detail.customerName }}</text>
					<u-icon color="#879BBA" margin-right="10" name="copy1" custom-prefix="custom-icon" size="28"></u-icon>
				</view>
				<view class="float_right">
					<!-- <u-tag :text="order_detail.orderType === 23 ? '自提' : order_detail.deliveryName || '其他'" size="mini"
						type="primary" mode="plain" /> -->
					<view class="tag">{{ order_detail.orderType === 23 ? '自提' : order_detail.deliveryName || '其他' }}</view>
				</view>
			</view>
			<!-- 收货地址 -->
			<view class="delivery-view" v-if="order_detail.receiveData && order_detail.deliveryType !== 2">
				<view class="name-top clearfix">
					<view class="float_left ellipsis">{{ order_detail.receiveData.realName || '--' }}</view>
					<view class="float_right mobile" @click="callPhone(order_detail.receiveData.mobile)">
						<text>{{ order_detail.receiveData.mobile || '--' }}</text>
						<!-- <u-icon name="arrow-right" size="22"></u-icon> -->
					</view>
				</view>
				<view v-if="order_detail.receiveData.area" class="address-view">
					{{ order_detail.receiveData.area.provinceName }} {{ order_detail.receiveData.area.cityName }} {{ order_detail.receiveData.area.districtName }}
					{{ order_detail.receiveData.address }}
				</view>
			</view>
			<!-- 自提点  -->
			<view class="delivery-view" v-if="order_detail.deliveryType === 2 && selfRuleData && selfRuleData.name">
				<view class="name-top clearfix">
					<view class="float_left ellipsis">{{ selfRuleData.name || '--' }}</view>
					<view class="float_right mobile" @click="callPhone(selfRuleData.mobile)">
						<text>{{ selfRuleData.mobile || '--' }}</text>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="address-view">{{ selfRuleData.provinceName }} {{ selfRuleData.cityName }} {{ selfRuleData.districtName }} {{ selfRuleData.address }}</view>
				<view class="address-view" style="padding-bottom: 10rpx;">
					营业时间：
					<text v-if="selfRuleData.startTime && selfRuleData.endTime">{{ selfRuleData.startTime }}-{{ selfRuleData.endTime }}</text>
					<text v-else>全天</text>
					<text style="padding-left: 5px">{{ selfRuleData.day.join(',') }}</text>
				</view>
			</view>
			<view class="remark clearfix">
				<view class="remark_text float_left">备注:</view>
				<view class="float_right">{{ order_detail.remark || '无' }}</view>
			</view>
		</view>
		<!-- <view v-if='order_detail.orderStatus === 6 && order_detail.extends.cancelReason' class="customer-view1"
			style="margin-top: 20rpx;">
			<view class="title clearfix">
				<view class="float_left ellipsis">取消原因</view>
			</view>
			<view class="remark">{{ order_detail.extends.cancelReason || '无' }}</view>
		</view> -->
		<view class="customer-view" style="margin-top: 20rpx;" v-if="order_detail.deliveryType === 3 && order_detail.logisticsData">
			<view class="title clearfix">
				<view class="float_left ellipsis">{{ order_detail.logisticsData.name || '匿名司机' }}</view>
				<view class="float_right"><u-tag text="车辆信息" size="mini" type="primary" mode="plain" /></view>
			</view>
			<!-- 收货地址 -->
			<view class="delivery-view">
				<view class="name-top clearfix">
					<view class="float_left ellipsis">车牌号：{{ order_detail.logisticsData.truckName }}</view>
					<view class="float_right mobile" @click="callPhone(order_detail.logisticsData.truckTel)">
						<text>{{ order_detail.logisticsData.truckTel || '--' }}</text>
						<u-icon name="arrow-right" size="22"></u-icon>
					</view>
				</view>
				<view class="address-view">{{ order_detail.logisticsData.remark }}</view>
			</view>
		</view>

		<view class="detail-cont">
			<view class="info-li clearfix">
				<view class="label">订单编号</view>
				<view class="value" @click="copy(order_detail.no)">
					<u-icon color="#879BBA" margin-right="10" label-pos="left" :label="order_detail.no || '--'" name="copy1" custom-prefix="custom-icon" size="28"></u-icon>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">下单时间</view>
				<view class="value">{{ $u.timeFormat(order_detail.createTime, 'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">出库状态</view>
				<view class="value">
					<text
						:class="[
							parseInt(order_detail.outStatus) === 4
								? 'danger-status'
								: parseInt(order_detail.outStatus) === 5
								? 'success-status'
								: parseInt(order_detail.outStatus) === 6
								? 'warning-status'
								: 'primary-status'
						]"
					>
						{{
							parseInt(order_detail.outStatus) === 4
								? '未出库'
								: parseInt(order_detail.outStatus) === 5
								? '已出库'
								: parseInt(order_detail.outStatus) === 6
								? '部分出库'
								: '其他'
						}}
					</text>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">收款状态</view>
				<view class="value">
					<text :class="[parseInt(order_detail.payStatus) === 5 ? 'success-status' : parseInt(order_detail.payStatus) === 3 ? 'warning-status' : 'danger-status']">
						{{ parseInt(order_detail.payStatus) === 4 ? '未收款' : parseInt(order_detail.payStatus) === 5 ? '已收款' : '部分收款' }}
					</text>
					<text style="font-size: 22rpx;" v-if="order_detail.payStatus === 3">（剩余未支付¥{{ order_detail.notPayMoney }}）</text>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">审核状态</view>
				<view class="value">
					<text
						:class="[
							parseInt(order_detail.auditStatus) === 1
								? 'warning-status'
								: parseInt(order_detail.auditStatus) === 2
								? 'success-status'
								: parseInt(order_detail.auditStatus) === 3
								? 'danger-status'
								: parseInt(order_detail.auditStatus) === 4
								? 'warning-status'
								: 'primary-status'
						]"
					>
						{{
							parseInt(order_detail.auditStatus) === 1
								? '待审核'
								: parseInt(order_detail.auditStatus) === 2
								? '已通过'
								: parseInt(order_detail.auditStatus) === 3
								? '已驳回'
								: parseInt(order_detail.auditStatus) === 4
								? '审核中'
								: '其他'
						}}
					</text>
				</view>
			</view>
			<!-- 	<view v-if='order_detail.orderStatus === 6' class="info-li clearfix">
				<view class="label" label-position="top">取消原因
					<view>
						{{order_detail.extends.cancelReason}}
					</view>
				</view>
			</view> -->
			<view class="info-li clearfix">
				<view class="label">下单店铺</view>
				<view class="value">{{ order_detail.shopName }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">业务员</view>
				<view class="value">{{ order_detail.salesManName || '无' }}</view>
			</view>
			<block v-if="order_detail.extends && order_detail.extends.bankData && order_detail.extends.bankData.image">
				<view class="info-li clearfix">
					<view class="label">账户名称</view>
					<view class="value">{{ order_detail.extends.bankData.name }}</view>
				</view>
				<view class="info-li clearfix">
					<view class="label">开户银行</view>
					<view class="value">{{ order_detail.extends.bankData.bankName }}</view>
				</view>
				<view class="info-li clearfix">
					<view class="label">银行账号</view>
					<view class="value">{{ order_detail.extends.bankData.accountNumber }}</view>
				</view>
				<view class="info-li clearfix">
					<view class="label">打款凭证</view>
					<view class="value" @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 class="goods-cont">
			<view class="goods-title">
				<view class="semicircle left-yuan"></view>
				<view class="semicircle right-yuan"></view>
				<text class="goods-title-text">{{ order_detail.shopName }}</text>
			</view>
			<view class="goods-ul">
				<view class="semicircle left-yuan"></view>
				<view class="semicircle right-yuan"></view>
				<view v-for="(item, index) in order_detail.goodsData" :key="index" class="goods-li clearfix">
					<view class="goods-img float_left"><image :src="item.images[0]" mode="aspectFill"></image></view>
					<view class="float_left info">
						<view class="goods-name ellipsis">{{ item.goodsName }}</view>
						<view class="goods-num clearfix">
							<view class="float_left">
								规格：{{ item.unitName }};
								<block v-for="(itemS, indexS) in item.specGroup" :key="indexS">{{ itemS.specValueName }};</block>
							</view>
							<view class="float_right">
								购买数量：{{ $utils.formatNub(item.buyNum) }}
								<text v-if="item.isEq === 5 && item.u_1_buy > 0">({{ $utils.formatNub(item.u_1_buy) }}{{ item.u_1 }})</text>
							</view>
						</view>
						<view class="goods-num clearfix">
							<view class="float_left price">{{ $utils.formattedNumber(item.price) }}</view>
							<view class="float_right">
								发货数量：
								<text style="color: #F67778;">{{ $utils.formatNub(item.outNum) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">商品总价</view>
				<view class="value">{{ $utils.formattedNumber(order_detail.totalMoney) }}</view>
			</view>
			<view class="info-li  clearfix">
				<view class="label">运费</view>
				<view class="value">{{ $utils.formattedNumber(order_detail.expressMoney) }}</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">订单优惠</view>
				<view class="value" style="color: #F67778">
					<text class="error-color">-</text>
					{{ $utils.formattedNumber(order_detail.orderPreferential) }}
				</view>
			</view>
			<view class="info-li clearfix">
				<view class="label">优惠券优惠</view>
				<view class="value" style="color: #F67778">
					<text class="error-color">-</text>
					{{ $utils.formattedNumber(order_detail.preferential) }}
				</view>
			</view>
			<view class="info-li b-b clearfix">
				<view class="label">会员卡优惠</view>
				<view class="value" style="color: #F67778">
					<text class="error-color">-</text>
					{{ $utils.formattedNumber(order_detail.vipDiscount) }}
				</view>
			</view>
			<view class="info-li b-b clearfix" v-if="Number(order_detail.retMoney) !== 0">
				<view class="label">退款金额</view>
				<view class="value">
					<text class="error-color">-</text>
					{{ $utils.formattedNumber(order_detail.retMoney) }}
				</view>
			</view>
			<block v-if="!order_detail.payTypeMsg && order_detail.extends && order_detail.extends.admixPayData && order_detail.extends.admixPayData.length">
				<view v-for="(item, index) in order_detail.extends.admixPayData" :key="index" class="info-li clearfix" :class="[index === 1 ? 'b-b' : '']">
					<view class="label">{{ item.title }}</view>
					<view class="value">{{ $utils.formattedNumber(item.payMoney) }}</view>
				</view>
			</block>
			<view class="info-li clearfix total-pay-money">
				<view class="semicircle left-yuan"></view>
				<view class="semicircle right-yuan"></view>
				<view class="label money-label">实付总金额</view>
				<view class="value money-value">{{ $utils.formattedNumber(order_detail.payAmount) }}</view>
			</view>
			<view class="info-li bottom-info clearfix">
				支付方式：
				<text v-if="order_detail.payTypeMsg">{{ order_detail.payTypeMsg }}</text>
				<text v-else>
					<block v-if="order_detail.extends && order_detail.extends.admixPayData">
						<text v-for="(item, index) in order_detail.extends.admixPayData" :key="index">{{ item.title }};</text>
					</block>
				</text>
			</view>
			<view class="info-li bottom-info clearfix">
				订单来源：
				<text>
					{{
						parseInt(order_detail.source) === 1
							? 'ios'
							: parseInt(order_detail.source) === 2
							? '安卓'
							: parseInt(order_detail.source) === 3
							? '小程序'
							: parseInt(order_detail.source) === 4
							? '后台创建'
							: parseInt(order_detail.source) === 5
							? 'H5页面'
							: parseInt(order_detail.source) === 6
							? 'pc页面'
							: parseInt(order_detail.source) === 8
							? '字节跳动小程序'
							: '其他'
					}}
				</text>
				<image class="bl-line" src="../../static/img/img-bl-line.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="btn-bottom-view clearfix">
			<block v-if="order_detail.orderMsg === '待审核'">
				<view v-if="$accessCheck($Access.orderQueryUpdateOrderStatus)" class="left-btn" @click="cancel">
					<u-icon
						label-pos="bottom"
						margin-top="10rpx"
						custom-prefix="custom-icon"
						name="quxiaodingdan"
						color="#B8C0C8"
						label="取消订单"
						label-color="#62738E"
						label-size="20"
						size="40"
					></u-icon>
				</view>
				<view v-if="$accessCheck($Access.orderQueryUpdateAuditStatus)" class="handel-btn" @click="openModel('确定要审核通过该订单吗？', '审核')">审核</view>
				<view
					v-if="$accessCheck($Access.newOrderListEdit)"
					class="handel-btn info-btn"
					@click="goPage(`/pages/order/OrderAdd?id=${order_id}&userCenterId=${userCenterId}`)"
				>
					编辑订单
				</view>
			</block>
			<view
				v-if="$accessCheck($Access.orderQueryUpdateAuditStatus) && order_detail.orderMsg === '待出库'"
				class="handel-btn info-btn"
				@click="openModel('确定要驳回审核该订单吗？', '驳回')"
			>
				驳回审核
			</view>
			<view class="handel-btn" v-if="order_detail.orderMsg === '部分出库'" @click="openModel('是否要再次出库？', '再次出库')">再次出库</view>
			<view class="handel-btn" v-if="order_detail.orderMsg === '待取消'" @click="openCancelAuditpop">取消审核</view>
			<view class="handel-btn info-btn" @click="toPrint">小票打印</view>
		</view>
		<u-modal v-model="model_show" :show-cancel-button="true" :content="model_content" @confirm="modelConfirm" @cancel="modelCancel"></u-modal>
		<u-popup v-model="show" mode="bottom">
			<view class="pop-ul">
				<view class="sku-name">请输入取消订单原因</view>
				<view class="pop-li"><textarea style="width: 100%;" placeholder-class="input-pl" placeholder="请输入" v-model="cancelReason" /></view>
				<view class="btn" @click="modelConfirm">确定</view>
			</view>
		</u-popup>
		<u-popup width="660" v-model="cancel_audit_show" mode="center" border-radius="10">
			<view class="pop-ul">
				<view class="title">取消订单审核</view>
				<view class="desc">客户发起取消订单：23131</view>
				<view class="desc-tip">是否同意客户取消订单，如果拒绝，请输入拒绝原因</view>
				<view class="pop-li" style="border: 0;">
					<u-input placeholder-style="color:#CAD0D7;" v-model="cancelRejectReason" type="textarea" :border="true" :height="100" :auto-height="true" />
				</view>
				<view class="btn-view">
					<u-button @click="cancelReject" :custom-style="{ marginRight: '20rpx' }" type="error" size="medium">拒绝</u-button>
					<u-button @click="cancelConfirm" type="primary" size="medium">同意</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cancelRejectReason: '',
			cancel_audit_show: false,
			model_tag: '',
			model_show: false,
			model_content: '',
			order_id: 0,
			order_detail: {},
			selfRuleData: {},
			updata_istrue: false,
			cancle_istrue: false,
			userCenterId: false,
			show: false,
			cancelReason: ''
		};
	},
	onPullDownRefresh() {
		this.getOrderInfoById();
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		}
	},
	onLoad(options) {
		this.order_id = options.id;
		this.userCenterId = options.userCenterId;
	},
	onShow() {
		this.getOrderInfoById();
	},
	methods: {
		// 复制相应信息
		copyOrderInfo() {
			const data = this.order_detail;
			let goods = '';
			data.goodsData.forEach((item, index) => {
				goods = goods + item.goodsName + '（' + (Number(item.outNum) || Number(item.buyNum)) + '件）';
			});
			const copyInfo = `客户：${data.customerName}\n商品：${goods} \n客户电话：${data.customerMobile}\n业务员：${data.salesManName || '无'}\n备注：${data.remark || '无'}`;
			uni.setClipboardData({
				data: copyInfo,
				success: () => {
					this.$u.toast('内容已复制');
				}
			});
		},
		openCancelAuditpop() {
			this.cancel_audit_show = true;
		},
		// 详情
		getOrderInfoById() {
			this.$u.api
				.getOrderInfoById(this.userCenterId, {
					orderId: this.order_id
				})
				.then(res => {
					uni.stopPullDownRefresh();
					this.order_detail = res.data;
					this.selfRuleData = JSON.parse(res.data.selfRuleData);
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		// 打开提示框
		openModel(content, tag) {
			this.model_content = content;
			this.model_show = true;
			this.model_tag = tag;
		},
		// 审核
		modelConfirm() {
			switch (this.model_tag) {
				case '取消订单':
					this.updateOrderStatus();
					break;
				case '审核':
					this.updateAuditStatus();
					break;
				case '驳回':
					this.revokeAudit();
					break;
				case '再次出库':
					this.reStockOut();
					break;
			}
		},
		modelCancel() {},
		// 取消订单
		updateOrderStatus() {
			this.$u.api
				.updateOrderStatus(this.order_detail.userCenterId, {
					orderId: this.order_detail.id,
					orderStatus: 6,
					cancelReason: this.cancelReason
				})
				.then(res => {
					this.$u.toast('取消成功');
					this.show = false;
					this.getOrderInfoById();
				});
		},
		// 审核订单
		updateAuditStatus() {
			this.$u.api
				.updateAuditStatus(this.order_detail.userCenterId, {
					orderId: this.order_detail.id,
					auditStatus: 2,
					audit: this.userInfo.name
				})
				.then(res => {
					this.$u.toast('审核成功');
					this.getOrderInfoById();
				});
		},
		// 驳回
		revokeAudit() {
			this.$u.api.revokeAudit(this.order_detail.id).then(res => {
				this.$u.toast('驳回成功');
				this.getOrderInfoById();
			});
		},
		// 再次出库
		reStockOut() {
			this.$u.api.reStockOut(this.order_detail.id).then(res => {
				this.$u.toast('出库成功');
				this.getOrderInfoById();
			});
		},
		previewImage(image) {
			// 预览图片
			uni.previewImage({
				urls: [image],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏']
				}
			});
		},
		// 单据小票打印
		toPrint() {
			this.$u.api
				.toPrint({
					objectId: this.order_detail.id,
					objectType: 1 // 销售单
				})
				.then(res => {
					this.$u.toast('操作成功');
				});
		},
		cancel() {
			this.show = true;
			this.model_tag = '取消订单';
		},
		async cancelReject() {
			if (!this.cancelRejectReason) {
				this.$u.toast('请输入拒绝原因');
				return;
			}
			this.$u.api
				.updateOrderStatus(this.order_detail.userCenterId, {
					orderId: this.order_detail.id,
					orderStatus: 7,
					cancelRejectReason: this.cancelRejectReason
				})
				.then(res => {
					this.$u.toast('您已拒绝客户的取消订单申请,原因是: ' + this.cancelRejectReason);
					this.cancel_audit_show = false;
					this.getOrderInfoById();
				});
		},
		async cancelConfirm() {
			this.$u.api
				.updateOrderStatus(this.order_detail.userCenterId, {
					orderId: this.order_detail.id,
					orderStatus: 6,
					cancelReason: '工作人员同意客户主动的发起取消订单'
				})
				.then(res => {
					this.cancel_audit_show = false;
					this.$u.toast('操作成功');
					this.getOrderInfoById();
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail-view {
	padding-bottom: 100rpx;
}

.top-view {
	background: linear-gradient($uni-color-primary, $uni-color-primary, $uni-color-primary, #f5f5f6 100%);
	padding: 50rpx 30rpx 200rpx;
	color: #ffffff;
	font-size: 40rpx;

	.status-text {
		margin-right: 10rpx;
	}

	.float_right {
		font-size: 28rpx;
	}
	.float_left {
		padding-bottom: 20rpx;
	}
	.cancel-reson {
		font-size: 22rpx;
		line-height: 32rpx;
		opacity: 0.7;
		padding-top: 20rpx;
	}
}

.customer-view {
	width: 710rpx;
	background-color: #ffffff;
	margin: 0 auto;
	border-radius: 8rpx;
	transform: translateY(-200rpx);
	.title {
		padding: 32rpx 32rpx 24rpx;
		.float_left {
			font-size: 32rpx;
			font-weight: 600;
			width: calc(100% - 120rpx);
			color: #2d405e;
		}
		.float_right {
			.tag {
				width: 104rpx;
				height: 32rpx;
				background-color: rgb(218, 248, 242);
				color: #00c395;
				font-size: 20rpx;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.delivery-view {
		font-size: 26rpx;
		color: #879bba;
		margin: 0 32rpx;
		line-height: 36rpx;
		padding-bottom: 24rpx;
		.name-top {
			margin-bottom: 12rpx;
			.float_left {
				width: calc(100% - 220rpx);
			}
			.mobile {
				font-size: 28rpx;
				color: $uni-color-primary;
			}
		}
	}

	.remark {
		border-top: 1px solid #ecf0f7;
		line-height: 48rpx;
		padding: 24rpx 32rpx;
		font-size: 28rpx;
		.remark_text {
			color: #879bba;
			margin-right: 16rpx;
		}
		.float_right {
			width: 562rpx;
			color: #2d405e;
		}
	}
}

.detail-cont {
	width: 710rpx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 10rpx 0;
	overflow: hidden;
	transform: translateY(-182rpx);
	font-size: 28rpx;
	color: #2d405e;
	font-family: DINPro-Regular;

	.info-li {
		padding: 0 32rpx;
		line-height: 80rpx;
		.label {
			float: left;
			color: #879bba;
		}
		.value {
			float: right;
		}
		.money-label {
			font-weight: bold;
		}
		.money-value {
			font-family: DIN-Medium;
			font-size: 30rpx;
		}
	}

	.b-b {
		border-bottom: 1px solid #ecf0f7;
	}
}
.semicircle {
	position: absolute;
	width: 16rpx;
	height: 16rpx;
	background-color: #f5f5f6;
	border-radius: 100%;
	bottom: -8rpx;
	&.left-yuan {
		left: -10rpx;
	}
	&.right-yuan {
		right: -10rpx;
	}
}
.goods-cont {
	width: 710rpx;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 6rpx 0;
	transform: translateY(-166rpx);
	font-size: 28rpx;
	color: #2d405e;
	font-family: DINPro-Regular;
	.goods-title {
		background-color: #fff;
		line-height: 96rpx;
		width: 710rpx;
		color: #2d405e;
		font-size: 32rpx;
		border-bottom: 1rpx dashed #ecf0f7;
		font-weight: 600;
		position: relative;
		.goods-title-text {
			margin-left: 24rpx;
		}
	}

	.goods-ul {
		padding: 0 24rpx 30rpx;
		border-bottom: 1px dashed #ecf0f7;
		position: relative;
		.goods-li {
			padding-top: 24rpx;
			.goods-img {
				margin-right: 20rpx;
				image {
					width: 126rpx;
					height: 126rpx;
					border-radius: 14rpx;
					display: block;
				}
			}

			.info {
				.goods-name {
					width: 470rpx;
					-webkit-line-clamp: 2;
					color: #2d405e;
					font-size: 28rpx;
					font-weight: 600;
				}

				.goods-num {
					color: #62738e;
					line-height: 50rpx;
					font-size: 22rpx;
					width: 510rpx;

					.float_left {
						&.price {
							font-size: 28rpx;
							font-weight: bold;
							font-family: DIN-Medium;
							color: #fa6400;
						}
					}
				}
			}
		}
	}

	.info-li {
		padding: 0 32rpx;
		line-height: 80rpx;
		color: #879bba;
		.label {
			float: left;
		}

		.value {
			float: right;
		}

		.money-label {
			font-weight: bold;
			color: #2d405e;
		}

		.money-value {
			font-size: 30rpx;
			color: #2d405e;
			font-family: DIN-Medium;
		}
	}
	.total-pay-money {
		border-top: 1rpx dashed #ecf0f7;
		position: relative;
		.semicircle {
			top: -8rpx;
		}
	}
	.bottom-info {
		line-height: 70rpx;
		color: #b8c0c8;
		position: relative;
		font-weight: 400;
		.bl-line {
			position: absolute;
			display: block;
			width: 710rpx;
			height: 16rpx;
			bottom: -16rpx;
			left: 0;
		}
	}
}

.pop-ul {
	line-height: 90rpx;
	.sku-name {
		font-weight: bold;
		padding: 0 24rpx;
	}

	.pop-li {
		padding: 24rpx;
		border-top: 1px solid #ecf0f7;
	}

	.btn {
		width: 100%;
		text-align: center;
		color: #ffffff;
		line-height: 90rpx;
		background-color: $uni-color-primary;
	}
	.title {
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #ecf0f7;
	}
	.desc {
		font-size: 28rpx;
		line-height: 36rpx;
		padding-bottom: 10rpx;
		padding: 10rpx 20rpx 0;
	}
	.desc-tip {
		font-size: 24rpx;
		line-height: 36rpx;
		padding-bottom: 10rpx;
		padding: 10rpx 20rpx 0;
		color: #879bba;
	}
	.btn-view {
		text-align: center;
		padding: 20rpx 0;
	}
}

.btn-bottom-view {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 98rpx;
	background-color: #ffffff;
	padding: 0 38rpx;
	width: 100%;
	overflow: hidden;
	box-shadow: 0px -4rpx 32rpx 0px rgba(156, 170, 175, 0.16);
	.left-btn {
		margin-top: 10rpx;
		float: left;
	}
	.handel-btn {
		margin-left: 30rpx;
		margin-top: 20rpx;
		float: right;
		width: 164rpx;
		font-size: 26rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 32rpx;
		background-color: $uni-color-primary;
		border: 1rpx solid $uni-color-primary;
		color: #ffffff;
		&.info-btn {
			border: 1rpx solid #979797;
			background-color: transparent;
			color: #2d405e;
		}
	}
}
</style>