guanmao-wxapp/pages/mine/order/detail.vue

<template>
	<view class="app-container">
		<no-data v-if="isLoading" :showText="'加载中'"></no-data>
		<no-data v-if="!isLoading && noData" :showText="'加载失败'"></no-data>
		<block v-if="!isLoading && !noData">
			<view class="status-container" v-if="detail.orderStatus == 'NOPAY'">待付款，30分钟内未付款将会关闭订单</view>
			<view class="status-container" v-if="detail.orderStatus == 'DFH'">买家已付款，待卖家发货</view>
			<view class="status-container" v-if="detail.orderStatus == 'YFH'">卖家已发货，已签收状态将在签收7日后自动确认</view>
			<view class="status-container" v-if="detail.orderStatus == 'OVER'">已确定收货，7日后将关闭退款通道</view>
			<view class="status-container" v-if="detail.orderStatus == 'CLOSE'">订单已关闭</view>
			<view class="status-container" v-if="detail.orderStatus == 'REFUND'">订单售后中</view>
			<view class="status-container" v-if="detail.orderStatus == 'TIMEOUT'">订单超时未支付</view>
			
			<view class="main-container">
				<view class="logistics-container card" v-if="detail.orderStatus == 'YFH' || detail.orderStatus == 'OVER'"  @tap="toLogistics">
					<view class="icon"><image src="@/static/icon/logistics.png"></image></view>
					<view class="main" v-if="hasLogistics">
						<view>{{logisticsData[0].context}}</view>
						<view>{{logisticsData[0].time}}</view>
					</view>
					<view class="main" v-else>
						<view class="noData">暂无物流信息</view>
					</view>
					<view class="right"><image src="@/static/icon/right.png"></image></view>
				</view>
				
				<view class="address-container card">
					<view class="icon"><image src="@/static/icon/address.png"></image></view>
					<view class="right">
						<view class="name">{{detail.receUserName}}<text>{{detail.recePhone}}</text></view>
						<view class="address ellipsis-2">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.street}}{{detail.receAddress}}{{detail.houseNo ? detail.houseNo : ''}}</view>
					</view>
				</view>
				
				<view class="goods-container card">
					<view class="title">商品信息</view>
					<block v-for="(item, index) in detail.orderDetails" :key='index'>
						<view class="item" @tap="toGoodsDetail(item.goodsId)">
							<image :src="item.imgUrl" mode="aspectFill"></image>
							<view class="right">
								<view class="top">
									<view class="name ellipsis-2">{{item.goodsName}}</view>
									<view class="des">{{item.goodsSpecValue}}</view>
								</view>
								<view class="bottom">
									<view class="price">￥{{item.price | numToFixed}}</view>
									<view class="num">x{{item.num}}</view>
								</view>
							</view>
						</view>
					</block>
					
				</view>
				
				<view class="peisong-container card">
					<view class="top">
						<view class="left">配送方式</view>
						<view class="right" v-if="detail.freight == 0">快递包邮</view>
						<view class="right" v-if="detail.freight != 0">快递自费</view>
					</view>
					<view class="bottom">
						<view class="left">买家留言</view>
						<view class="right">{{detail.buyerMsg}}</view>
					</view>
				</view>
				
				<view class="total-container card">
					<view class="top">
						<view class="item">
							<view>商品金额</view>
							<view>￥{{detail.totalProductAmount | numToFixed}}</view>
						</view>
						<view class="item">
							<view>运费</view>
							<view>￥{{detail.freight | numToFixed}}</view>
						</view>
						<view class="item">
							<view>优惠券</view>
							<view>-￥{{detail.couponValue | numToFixed}}</view>
						</view>
						<view class="item" v-if="detail.promotionDiscountRate">
							<view>折扣优惠</view>
							<view>-¥{{detail.promotionDiscountAmount | numToFixed}}({{detail.promotionDiscountRate*10}}折)</view>
						</view>
					</view>
					<view class="total">订单总额：<text>￥{{detail.payAmount | numToFixed}}</text></view>
				</view>
				
				<view class="order-container card">
					<view class="title">订单信息</view>
					<view class="item1">
						<view class="left">
							<view class="label">订单编号</view>
							<view class="value">{{detail.orderId}}</view>
						</view>
						<view class="copy" @tap="copy(detail.orderId)">复制</view>
					</view>
					<view class="item2">
						<view class="label">创建时间</view>
						<view class="value">{{detail.createTime}}</view>
					</view>
					<view class="item2" v-if="detail.payTime">
						<view class="label">支付时间</view>
						<view class="value">{{detail.payTime}}</view>
					</view>
					<view class="item2" v-if="detail.payTime">
						<view class="label">支付方式</view>
						<view class="value">{{detail.payType}}</view>
					</view>
					<view class="item2" v-if="detail.deliverTime">
						<view class="label">发货时间</view>
						<view class="value">{{detail.deliverTime}}</view>
					</view>
					<view class="item2" v-if="detail.overTime">
						<view class="label">完成时间</view>
						<view class="value">{{detail.overTime}}</view>
					</view>
					<view class="item2" v-if="detail.exchangeCode">
						<view class="label">优惠金额</view>
						<view class="value">{{detail.exchangeSubAmount | numToFixed}}</view>
					</view>
					<view class="item2" v-if="detail.exchangeCode">
						<view class="label">优惠码</view>
						<view class="value">{{detail.exchangeCode}}</view>
					</view>
				</view>
				
				<!-- 底部按钮：待付款 -->
				<view class="bottom-container" v-if="detail.orderStatus == 'NOPAY'">
					<view class="button gray" @tap="isCancelDialog = true">取消订单</view>
					<view class="button red" @tap="payOrder">立即付款</view>
				</view>
				<!-- 底部按钮：待发货 -->
				<view class="bottom-container" v-if="detail.orderStatus == 'DFH'">
					<view class="button white" @tap="remindShipment">提醒发货</view>
					<view class="button white" v-if="checkCanReturn(detail.orderShareStatus)" @tap="toApplyReturn">申请售后</view>
				</view>
				<!-- 底部按钮：待收货 -->
				<view class="bottom-container" v-if="detail.orderStatus == 'YFH'">
					<view class="button gray" @tap="toLogistics">查看物流</view>
					<view class="button red" @tap="isConfirmDialog = true">确认收货</view>
					<view class="button white" v-if="checkCanReturn(detail.orderShareStatus)" @tap="toApplyReturn">申请售后</view>
				</view>
				<!-- 底部按钮：已完成 -->
				<view class="bottom-container" v-if="detail.orderStatus == 'OVER'">
					<view class="button gray" @tap="toLogistics">查看物流</view>
					<view class="button gray" v-if="detail.tax && detail.orderTaxId" @tap="toInvoiceDetail">查看发票</view>
					<view class="button white" v-else @tap="isInvoiceDialog = true">申请发票</view>
					<view class="button white" v-if="checkCanReturn(detail.orderShareStatus)" @tap="toApplyReturn">申请售后</view>
					<view class="button red" v-if="!detail.commentService" @tap="toEvaluate">评价</view>
				</view>
				<!-- 底部按钮：售后中 -->
				<view class="bottom-container" v-if="isReturnOrder">
					<view class="button gray" @tap="toReturnDetail">售后详情</view>
				</view>
				
				<!-- 取消订单 -->
				<modal-dialog showText="确定要取消订单吗？" :isShowDialog="isCancelDialog" @cancel="isCancelDialog = false" @confirm="confirmCancelOrder"></modal-dialog>
				
				<!-- 确认收货 -->
				<modal-dialog showText="确定要确认收货吗？" :isShowDialog="isConfirmDialog" @cancel="isConfirmDialog = false" @confirm="confirmReceipt"></modal-dialog>
				
				<!-- 申请发票 -->
				<view class="global-mask" v-show="isInvoiceDialog"></view>
				<view class="invoice-dialog" v-show="isInvoiceDialog" @tap="isShowCompanyList = false">
					<view class="type-c">
						<view class="top">
							<view class="title">发票类型</view>
							<image src="@/static/icon/close.png" @tap="isInvoiceDialog = false"></image>
						</view>
						<view class="list">
							<view class="item" :class="taxType === false ? 'current' : ''" @tap="taxType = false">增值税普通发票</view>
							<view class="item" :class="taxType === true ? 'current' : ''" @tap="taxType = true; invoiceHeader = 2;">增值税专用发票</view>
						</view>
					</view>
					<view class="header-c">
						<view class="title">
							<view>发票抬头</view>
							<view class="button" @tap="getWxInvoice()">获取微信发票</view>
						</view>
						<view class="list">
							<view class="item" :class="invoiceHeader == 1 ? 'current' : ''" @tap="invoiceHeader = 1" v-if="taxType === false">个人</view>
							<view class="item" :class="invoiceHeader == 2 ? 'current' : ''" @tap="invoiceHeader = 2">公司</view>
						</view>
						<view class="form" v-show="invoiceHeader == 1">
							<view class="row">
								<view class="label">个人名称</view>
								<view class="input"><input type="text" placeholder="请填写“个人”或您的姓名" v-model="invoiceForm.personName"></view>
							</view>
						</view>
						<view class="form" v-show="invoiceHeader == 2">
							<view class="row">
								<view class="label">单位名称</view>
								<view class="input">
									<input type="text" placeholder="请填写单位名称" v-model="invoiceForm.companyName" @focus="companyFocus">
									<div class="companyList" v-show="isShowCompanyList">
										<block v-for="(item, index) in companyList" :key="index">
											<div class="item" @tap="chooseCompany(item)">{{item.name}}</div>
										</block>
									</div>
								</view>
							</view>
							<view class="row">
								<view class="label">纳税人识别号</view>
								<view class="input"><input type="text" placeholder="请填写纳税人识别号" v-model="invoiceForm.payerNum"></view>
							</view>
							<view class="more" v-if="taxType === false">
								<view>更多选填项</view>
								<view class="right" v-if="isOpen" @tap="isOpen = !isOpen">收起<image src="../../../static/icon/arrow_2.png"></image></view>
								<view class="right" v-else @tap="isOpen = !isOpen">展开<image src="../../../static/icon/arrow_1.png"></image></view>
							</view>
							<block v-if="isOpen">
								<view class="row">
									<view class="label">注册地址</view>
									<view class="input"><input type="text" placeholder="请填写注册地址" v-model="invoiceForm.regAddress"></view>
								</view>
								<view class="row">
									<view class="label">注册电话</view>
									<view class="input"><input type="text" placeholder="请填写注册电话" v-model="invoiceForm.regPhone"></view>
								</view>
								<view class="row">
									<view class="label">开户银行</view>
									<view class="input"><input type="text" placeholder="请填写开户银行" v-model="invoiceForm.bank"></view>
								</view>
								<view class="row">
									<view class="label">银行帐号</view>
									<view class="input"><input type="text" placeholder="请填写银行帐号" v-model="invoiceForm.account"></view>
								</view>
							</block>
						</view>
					</view>
					<view class="header-c">
						<view class="title">收票人信息</view>
						<view class="form">
							<view class="row" v-if="taxType === true">
								<view class="label">收票人姓名</view>
								<view class="input"><input type="text" placeholder="请填写联系姓名" v-model="invoiceForm.name"></view>
							</view>
							<view class="row" v-if="taxType === true">
								<view class="label">收票人手机</view>
								<view class="input"><input type="text" placeholder="请填写联系手机" v-model="invoiceForm.phone"></view>
							</view>
							<view class="row">
								<view class="label">收票人邮箱</view>
								<view class="input"><input type="text" placeholder="请填写收票邮箱" v-model="invoiceForm.email"></view>
							</view>
							<view class="row" v-if="taxType === true">
								<view class="label">收票人地址</view>
								<view class="input"><input type="text" placeholder="请填写收票地址" v-model="invoiceForm.address"></view>
							</view>
						</view>
					</view>
					<view class="content-c">
						<view class="title">发票内容<text>发票内容选项已根据税法调整，具体请以实际展示为准</text></view>
						<view class="list">
							<view class="item">商品内容</view>
						</view>
						<view class="tips">发票内容将显示详情商品名称与价格信息，发票金额为实际支付金额</view>
						<view class="button" @tap="submitInvoice">确定</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import modalDialog from '@/components/modalDialog.vue';
	
	export default {
		components:{
			modalDialog
		},
		data() {
			return {
				isLoading: true,
				noData: true,
				orderId: null, // 订单id
				orderRefundId: null, // 售后订单id
				isReturnOrder: false, // 是否售后订单
				detail: {}, // 订单详情
				isCancelDialog: false, // 是否显示取消订单弹窗
				isConfirmDialog: false, // 是否显示确认收货弹窗
				isInvoiceDialog: false, // 是否显示申请发票弹窗
				taxType: false,
				invoiceHeader: 1, // 发票类型：1个人，2公司
				isOpen: false, // 是否展开
				invoiceForm: { // 发票表单数据
					// 发票抬头
					personName: '', // 个人 - 名称
					companyName: '', // 公司 - 名称
					payerNum: '', // 公司 - 识别号
					regAddress: '', // 公司 - 注册地址
					regPhone: '', // 公司 - 注册电话
					bank: '', // 公司 - 开户银行
					account: '', // 公司 - 银行账号
					// 收票人信息
					name: '', // 姓名
					phone: '', // 手机
					email: '', // 邮箱
					address: '', // 地址
				},
				canClickSave: true, // 能否点击提交
				logisticsData: [], // 物流信息
				hasLogistics: true, // 是否有物流信息
				canRemindShipment: true, // 能否点击提醒发货
				companyList: [],
				isShowCompanyList: false,
				isChooseCompany: false,
			}
		},
		
		computed:{
			...mapState(['userInfo', 'isLogin', 'userId'])
		},
		
		watch: {
			'invoiceForm.companyName'() {
				if(this.isChooseCompany) {
					this.isChooseCompany = false;
					return false;
				}
				this.getCompanyList();
			},
			taxType() {
				if(this.taxType === true) {
					this.isOpen = true;
				}else {
					this.isOpen = false;
				}
			}
		},
		
		onLoad({orderId, orderRefundId}) {
			this.orderId = orderId;
			if(orderRefundId != 'undefined') {
				this.isReturnOrder = true;
				this.orderRefundId = orderRefundId;
			}
			this.getOrderDetail();
			
			uni.$on('refreshOrderDetail',(data) => {
				if(data) {
					this.isReturnOrder = true;
					this.orderRefundId = data;
				}else {
					this.isReturnOrder = false;
					this.orderRefundId = null;
				}
				this.getOrderDetail();
			})
		},
		
		methods: {
			getOrderDetail() {
				let url = '', params = {};
				if(this.isReturnOrder) {
					url = '/order/refund/detail';
					params = {
						orderRefundId: this.orderRefundId
					}
				}else {
					url = '/order/detail';
					params = {
						orderId: this.orderId
					}
				}
				this.$axios({
					url,
					method: 'get',
					params
				}).then(res => {
					this.noData = false;
					this.isLoading = false;
					this.detail = res.data;
					this.getLogisticsData();
				}).catch(res => {
					this.noData = true;
					this.isLoading = false;
				})
			},
			
			// 检查是否可以申请售后（根据orderShareStatus）
			checkCanReturn(status) {
				if(!status || status === 'OVER' || status === 'CANCEL') {
					return false;
				}else {
					return true;
				}
			},
			
			// 获取物流信息
			getLogisticsData() {
				this.$axios({
					url: '/common/express',
					method: 'get',
					params: {
						companyCode: this.detail.companyCode ? this.detail.companyCode : 'shunfeng',
						logisticsNo: this.detail.logisticsNo,
					}
				}).then(res => {
					if(res.code == 200 && res.data.length >= 1) {
						this.logisticsData = res.data;
					}else if(res.code == 1100 || res.data.length < 1) {
						this.hasLogistics = false;
					}
				})
			},
			
			// 去商品详情
			toGoodsDetail(id) {
				uni.navigateTo({
					url: '/packageGoods/pages/detail?id=' + id
				})
			},
			
			// 确认取消订单
			confirmCancelOrder() {
				this.$axios({
					url: '/order/cancel',
					method: 'get',
					params: {
						orderId: this.orderId
					}
				}).then(res => {
					this.getOrderDetail();
					this.isCancelDialog = false;
					this.$successToast('取消订单成功');
					uni.$emit('refreshOrderList');
				})
			},
			
			// 确认收货
			confirmReceipt() {
				this.$axios({
					url: '/order/ack',
					params: {
						orderId: this.orderId
					}
				}).then(res => {
					this.getOrderDetail();
					this.isConfirmDialog = false;
					this.$successToast('确认收货成功');
					uni.$emit('refreshOrderList');
				})
			},
			
			// 立即付款
			payOrder() {
				let that = this;
				this.$axios({
					url: '/order/wait/pay',
					params: {
						userId: this.userId,
						orderId: this.orderId,
					},
					isLoading: 1,
				}).then(res => {
					uni.getProvider({
						service: 'payment',
						success: (e) => {
							uni.requestPayment({
								provider: e.provider[0],
								orderInfo: res.data,
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.payPackage,
								signType: 'MD5',
								paySign: res.data.paySign,
								success: (res) => {
									that.getOrderDetail();
									that.$successToast('支付成功');
									uni.$emit('refreshOrderList');
								},
								fail: (err) => {
									that.$toast('支付失败');
								}
							})
						}
					})
				})
			},
			
			// 复制
			copy(val) {
				let that = this;
				uni.setClipboardData({
				    data: val,
				    success: function () {
				        that.$successToast('复制成功');
				    }
				});
			},
			
			// 验证数据
			vailateData() {
				// 全状态必填
				if(this.invoiceHeader == 1 && !this.invoiceForm.personName) {
					this.$toast('请填写您的姓名');
					return false;
				}
				if(this.invoiceHeader == 2 && !this.invoiceForm.companyName) {
					this.$toast('请填写单位名称');
					return false;
				}
				if(this.invoiceHeader == 2 && !this.invoiceForm.payerNum) {
					this.$toast('请填写纳税人识别号');
					return false;
				}
				// 普票
				if(this.taxType === false) {
					if(!this.invoiceForm.email) {
						this.$toast('请填写收票人邮箱');
						return false;
					}
				}
				// 专票
				else if(this.taxType === true) {
					if(!this.invoiceForm.regAddress) {
						this.$toast('请填写注册地址');
						return false;
					}
					if(!this.invoiceForm.regPhone) {
						this.$toast('请填写注册电话');
						return false;
					}
					if(!this.invoiceForm.bank) {
						this.$toast('请填写开户银行');
						return false;
					}
					if(!this.invoiceForm.account) {
						this.$toast('请填写银行账号');
						return false;
					}
					if(!this.invoiceForm.name) {
						this.$toast('请填写收票人姓名');
						return false;
					}
					if(!this.invoiceForm.phone) {
						this.$toast('请填写收票人手机');
						return false;
					}
					if(!this.invoiceForm.email) {
						this.$toast('请填写收票人邮箱');
						return false;
					}
					if(!this.invoiceForm.address) {
						this.$toast('请填写收票人地址');
						return false;
					}
				}
				return true;
			},
			
			// 提交发票
			submitInvoice() {
				if (!this.canClickSave) return false;
				this.canClickSave = false;
				setTimeout(() => { this.canClickSave = true }, 3000)
				if(!this.vailateData())return;
				
				let params = {};
				if(this.invoiceHeader == 1) {
					params = {
						type: false,
						name: this.invoiceForm.personName,
					}
				}else {
					params = {
						type: true,
						name: this.invoiceForm.companyName,
						taxNo: this.invoiceForm.payerNum,
						registerAddress: this.invoiceForm.regAddress,
						registerPhone: this.invoiceForm.regPhone,
						bank: this.invoiceForm.bank,
						account: this.invoiceForm.account,
					}
				}
				params.taxType = this.taxType;
				params.content = '商品明细';
				params.receiverName = this.invoiceForm.name;
				params.receiverPhone = this.invoiceForm.phone;
				params.receiverEmail = this.invoiceForm.email;
				params.receiverAddress = this.invoiceForm.address;
				params.userId = this.userId;
				params.orderId = this.orderId;
				this.$axios({
					url: '/user/order/tax/save',
					type: 'application/json',
					params,
					isLoading: 1,
				}).then(res => {
					this.getOrderDetail();
					this.$successToast('提交成功');
					this.isInvoiceDialog = false;
				})
			},
			
			// 发票详情
			toInvoiceDetail() {
				uni.navigateTo({
					url:'/pages/mine/order/invoice?id=' + this.detail.orderTaxId
				})
			},
			
			// 申请退款
			toApplyReturn() {
				uni.navigateTo({
					url:'/pages/mine/order/return/apply?orderId=' + this.orderId
				})
			},
			
			// 去售后详情
			toReturnDetail() {
				uni.navigateTo({
					url:'/pages/mine/order/return/detail?orderRefundId=' + this.orderRefundId
				})
			},
			
			// 去查看物流
			toLogistics() {
				uni.navigateTo({
					url:'/pages/mine/order/logistics?companyCode=' + this.detail.companyCode + '&logisticsNo=' + this.detail.logisticsNo
				})
			},
			
			// 提醒发货
			remindShipment() {
				if (!this.canRemindShipment) {
					return this.$toast('请勿频繁操作');
				};
				this.canRemindShipment = false;
				setTimeout(() => { this.canRemindShipment = true }, 3000)
				
				this.$axios({
					url: '/order/notice',
					params: {
						orderId: this.orderId,
						userId: this.userId
					}
				}).then(res => {
					this.$successToast('提醒发货成功');
				})
			},
			
			companyFocus() {
				this.getCompanyList();
			},
			
			getCompanyList() {
				this.$axios({
					url: '/user/order/tax/title/list',
					method: 'get',
					params: {
						companyName: this.invoiceForm.companyName,
					}
				}).then(res => {
					this.companyList = res.data || [];
					if(this.companyList.length > 0) {
						this.isShowCompanyList = true;
					}else {
						this.isShowCompanyList = false;
					}
				})
			},
			
			chooseCompany(item) {
				this.invoiceForm.companyName = item.name;
				this.invoiceForm.payerNum = item.taxId;
				this.isChooseCompany = true;
				this.isShowCompanyList = false;
			},
			
			// 去评价
			toEvaluate() {
				uni.navigateTo({
					url:'/pages/mine/order/evaluate?orderId=' + this.orderId
				})
			},
			
			// 获取微信发票
			getWxInvoice() {
				let that = this;
				uni.chooseInvoiceTitle({
				    success(res) {
				        if(that.taxType == true && res.type == 1) {
							return this.$toast('专票只能选择公司类型');
						}
						// 个人
						if(res.type == 1) {
							that.invoiceHeader = 1;
							that.invoiceForm.personName = res.title;
						}
						// 公司
						if(res.type == 0) {
							that.invoiceHeader = 2;
							that.invoiceForm.companyName = res.title;
							that.invoiceForm.payerNum = res.taxNumber;
							that.invoiceForm.regAddress = res.companyAddress;
							that.invoiceForm.regPhone = res.telephone;
							that.invoiceForm.bank = res.bankName;
							that.invoiceForm.account = res.bankAccount;
						}
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
	}
	.status-container {
		background: #FE781F;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.main-container {
		padding: 20rpx 20rpx 120rpx;
	}
	.logistics-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.icon {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
			background: linear-gradient(-90deg,#ff4042 0%, #fe781f 100%);
			display: flex;
			flex-shrink: 0;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
		.main {
			width: 560rpx;
			font-size: 24rpx;
			line-height: 32rpx;
		}
		.noData {
			font-size: 28rpx;
			color: #666666;
		}
		.right {
			margin-left: 20rpx;
			flex-shrink: 0;
			image {
				width: 16rpx;
				height: 28rpx;
			}
		}
	}
	.address-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 150rpx;
		padding: 0 20rpx;
		.icon {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
			background: linear-gradient(-90deg,#ff4042 0%, #fe781f 100%);
			display: flex;
			flex-shrink: 0;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			image {
				width: 28rpx;
				height: 36rpx;
			}
		}
		.right {
			width: 600rpx;
			.name {
				font-size: 32rpx;
				color: #333333;
				text {
					font-size: 28rpx;
					color: #999999;
					margin-left: 16rpx;
				}
			}
			.address {
				font-size: 28rpx;
				color: #666666;
				line-height: 34rpx;
				margin-top: 10rpx;
			}
		}
	}
	.goods-container {
		padding: 0 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
		.item {
			padding: 20rpx 0;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child {
				border: none;
			}
			image {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.right {
				width: 470rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top {
					.name {
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.des {
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						font-size: 28rpx;
						color: #FF3F42;
						line-height: 28rpx;
					}
					.num {
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.peisong-container {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			border-bottom: 1px solid #eaeaea;
		}
		.bottom {
			display: flex;
			align-items: center;
			min-height: 88rpx;
			.left {
				margin-right: 40rpx;
				flex-shrink: 0;
			}
			.right {
				padding: 10rpx 0;
				line-height: 32rpx;
			}
		}
	}
	.total-container {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		.top {
			padding: 10rpx 0;
		}
		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 64rpx;
		}
		.total {
			display: flex;
			justify-content: flex-end;
			height: 80rpx;
			align-items: center;
			border-top: 1px solid #eaeaea;
			text {
				color: #FF3F42;
			}
		}
	}
	.order-container {
		padding: 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-bottom: 20rpx;
		}
		.item1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60rpx;
			.left {
				display: flex;
				.label {
					margin-right: 40rpx;
					flex-shrink: 0;
				}
			}
			.copy {
				color: #FE781F;
			}
		}
		.item2 {
			display: flex;
			align-items: center;
			height: 60rpx;
			.label {
				margin-right: 40rpx;
				flex-shrink: 0;
			}
		}
	}
	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: #FFFFFF;
		border-top: 1px solid #F4F2F2;
		.button {
			width: 150rpx;
			height: 56rpx;
			border-radius: 56rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			margin-left: 15rpx;
			&:first-child {
				margin-left: 0;
			}
			&.gray {
				color: #999999;
				border: 1px solid #999999;
			}
			&.white {
				color: #FF3F42;
				border: 1px solid #FF3F42;
			}
			&.red {
				color: #FFFFFF;
				border: 1px solid #FF3F42;
				background: #FF3F42;
			}
		}
	}
	.invoice-dialog {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 999;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 20rpx;
		max-height: 100vh;
		overflow-y: scroll;
		.type-c {
			border-bottom: 1px solid #eaeaea;
			padding-bottom: 20rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 84rpx;
				.title {
					font-size: 32rpx;
					color: #333333;
					font-weight: 600;
				}
				image {
					width: 31rpx;
					height: 31rpx;
				}
			}
			.list {
				display: flex;
				.item {
					padding: 0 16rpx;
					border: 1px solid #C0C0C0;
					font-size: 24rpx;
					color: #666666;
					border-radius: 6rpx;
					line-height: 48rpx;
					margin-right: 20rpx;
					&.current {
						border: 1px solid #FE781F;
						background: rgba($color: #FE781F, $alpha: 0.3);
						color: #FE781F;
					}
				}
			}
		}
		.header-c {
			border-bottom: 1px solid #eaeaea;
			padding-bottom: 20rpx;
			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
				line-height: 84rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.button {
					font-size: 24rpx;
					color: #FE781F;
					border: 1px solid #FE781F;
					border-radius: 6rpx;
					line-height: 48rpx;
					height: 48rpx;
					padding: 0 16rpx;
					font-weight: normal;
				}
			}
			.list {
				display: flex;
				padding-bottom: 20rpx;
				.item {
					width: 120rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 6rpx;
					text-align: center;
					border: 1px solid #C0C0C0;
					font-size: 24rpx;
					color: #666666;
					margin-right: 20rpx;
					&.current {
						border: 1px solid #FF3F42;
						background: #FF3F42;
						color: #FFFFFF;
					}
				}
			}
			.form {
				.row {
					display: flex;
					height: 60rpx;
					align-items: center;
					.label {
						width: 200rpx;
					}
					.input {
						width: 510rpx;
						position: relative;
						input {
							width: 100%;
						}
						.companyList {
							position: absolute;
							top: 60rpx;
							left: -20rpx;
							background: #FFFFFF;
							width: 530rpx;
							z-index: 11;
							border: 1px solid #eaeaea;
							max-height: 400rpx;
							overflow-y: scroll;
							box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.2);;
							.item {
								color: #666666;
								padding: 16rpx 20rpx;
							}
						}
					}
				}
				.more {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 60rpx;
					.right {
						display: flex;
						align-items: center;
						image {
							width: 20rpx;
							height: 20rpx;
							display: block;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.content-c {
			padding-bottom: 40rpx;
			.title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 600;
				line-height: 84rpx;
				text {
					font-size: 22rpx;
					color: #999999;
					margin-left: 10rpx;
					font-weight: normal;
				}
			}
			.list {
				display: flex;
				.item {
					padding: 0 16rpx;
					background: rgba($color: #FE781F, $alpha: 0.3);
					font-size: 24rpx;
					color: #FE781F;
					border-radius: 6rpx;
					line-height: 48rpx;
				}
			}
			.tips {
				font-size: 22rpx;
				color: #999999;
				margin-top: 20rpx;
			}
			.button {
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 70rpx;
				background: linear-gradient(-90deg,#ff3f42 0%, #fe781f 100%);
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}
	}
</style>