shunfengche-sfd/my/order/pay.vue

<template>
	<view style="padding-bottom: 120rpx;">

	<!-- 	<view class="top_view">
			<view class="top_title" v-if="order.status==3">待抵达乘客上车点...</view>
			<view class="top_title" v-if="order.status==1">等待用户支付...</view>
			<view class="top_title" v-if="order.status==2">等待附近司机接单...</view>
			<view class="top_title" v-if="order.status==6">订单已取消</view>
			<view class="top_title" v-if="order.status==4">订单进行中</view>
			<view class="top_title" v-if="order.status==5">已到达终点</view>
		</view> -->
		
		<view class="padding">
			<map class="orderMap" id="orderMap" scale="12" :latitude="latitude" :longitude="longitude"
				:markers="covers" :polyline="polyline">
			</map>
		</view>
		

		<view class="top_box">
			<view>
				<view>
					<view class="top_title" v-if="order.status==3">待抵达乘客上车点...</view>
					<view class="top_title" v-if="order.status==1">等待用户支付...</view>
					<view class="top_title" v-if="order.status==2">等待附近司机接单...</view>
					<view class="top_title" v-if="order.status==6">订单已取消</view>
					<view class="top_title" v-if="order.status==4">订单进行中</view>
					<view class="top_title" v-if="order.status==5">已到达终点</view>
				</view>
				<view class="topbox_addview justify-between" style="margin-top: 20rpx;">
					<view class="flex align-center" style="margin-bottom: 20rpx;">
						<image v-if="globalImages" :src="globalImages + 'imgs/mididi.png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
						<view style="margin-left: 20rpx;">
							<view style="color: #999;">
								出发地
							</view>
							<view>
								{{order.shipAddress}}
							</view>
						</view>
					</view>
					<!-- <image src="/static/upload/up.png"></image> -->
					<view class="flex align-center">
						<image v-if="globalImages" :src="globalImages + 'imgs/mididi (2).png'" style="width: 56rpx;height: 56rpx;" mode=""></image>
						<view style="margin-left: 20rpx;">
							<view style="color: #999;">
								出发地
							</view>
							<view>
								{{order.deliveryAddress}}
							</view>
						</view>
					</view>
				</view>
				<!-- <map class="orderMap" id="orderMap" scale="12" :latitude="latitude" :longitude="longitude"
					:markers="covers" :polyline="polyline">

				</map> -->
				<!-- <view class="flex justify-between margin-tb-sm">
					<view class="topbox_title">{{order.appointmentNum}}人乘车
					</view>
					<view class="topbox_title">{{order.appointmentStartTime}}-{{order.appointmentEndTime}}</view>
				</view> -->
			</view>
		<!-- 	<u-line color="#E6E6E6" />
			<view class="flex align-center" :class="order.kmDistance?'justify-between':'justify-end'"
				style="padding-top: 16rpx;padding-bottom: 30rpx;">
				<view v-if="order.kmDistance">共{{order.kmDistance}}公里</view>
				<view style="color: #FF2020;font-size: 42rpx;font-weight: bold;"><text
						style="font-size: 32rpx;">￥</text> {{order.driveMoney}}</view>
			</view> -->
		</view>



		<view class="boxa box">
			<view class="titls">乘客信息</view>
			<view class="flex align-center justify-between" style="margin-top: 20rpx;">
				<view class="flex align-center">
					<image v-if="globalImages" :src="globalImages + 'imgs/static/image/shifuAvatar.png'" style="width: 90rpx;height: 90rpx;border-radius: 50rpx;">
					</image>
					<view class="margin-left-sm">
						<view class="flex align-center">
							<view>{{order.shipUserName}}</view>
							<image :src="globalImages + 'imgs/static/upload/msg.png'" v-if="zxMsg === '是' && globalImages" @click="goMsg()"
								style="width: 32rpx;height: 40rpx;margin-left: 20rpx;"></image>
						</view>
						<view class="margin-top-xs">{{order.shipUserPhones}}</view>
					</view>
				</view>
				<view class="flex" v-if="order.status != 5 && order.status != 6">
					<image v-if="globalImages" :src="globalImages + 'imgs/static/image/ladd.png'"
						@click="openMap(order.shipAddressLatitude,order.shipAddressLongitude,order.shipAddress)"
						style="width: 36rpx;height: 41rpx;"></image>
					<image src="../static/phone.png" @click="bindPhone(order.shipUserPhone)"
						style="width: 32rpx;height: 40rpx;margin-left: 50rpx;"></image>
				</view>
			</view>
		</view>

		<view class="box " style="color: #999999;">
			<view class="titls">订单信息</view>
			<view>
				<view class="flex align-center justify-between margin-tb">
					<view>订单号码</view>
					<view @click.stop="copyClick(order.ordersNo)">{{order.ordersNo}}
						<image src="../static/copy.png" style="width:28rpx;height: 28rpx;"></image>
					</view>
				</view>
				<view class="flex align-center justify-between margin-tb">
					<view>预约时间</view>
					<view>暂无</view>
				</view>
				<view class="flex align-center justify-between margin-tb">
					<view>乘车人数</view>
					<view>{{order.appointmentNum}}</view>
				</view>
				<view class="flex align-center justify-between margin-tb">
					<view>订单金额</view>
					<view>{{order.driveMoney}}</view>
				</view>
				<view class="flex align-center justify-between margin-tb">
					<view>接单时间</view>
					<view>{{order.takingTime}}</view>
				</view>
				<view class="flex align-center justify-between margin-tb">
					<view>支付方式</view>
					<view v-if="order.payWay == 1">微信小程序支付</view>
					<view v-if="order.payWay == 2">微信公众号支付</view>
					<view v-if="order.payWay == 3">微信APP支付</view>
					<view v-if="order.payWay == 4">支付宝支付</view>
					<view v-if="order.payWay == 5">零钱支付</view>
					<view v-if="order.payWay == 6">线下支付</view>
				</view>
				<view class="margin-tb" v-if="order.remark">
					<view>备注</view>
					<view class="margin-top-xs">{{order.remark}}</view>
				</view>
			</view>
		</view>

		<view class="tabber">
			<view class="btn" v-if="order.status == 3" @click.stop="qxOrder()">取消订单</view>
			<view class="btn2" v-if="order.status == 3" @click.stop="shows = true">开始服务</view>
			<view class="btn1" v-if="order.status==4" @click.stop="wcOrder()">抵达终点</view>
		</view>

		<!-- 验证码 -->
		<u-popup v-model="shows" mode="center" border-radius="18" width="580rpx" height="400rpx">
			<view class="receipt_code">
				<view class="code_title">验证码</view>
				<u-input v-model="codeMsg" type="number" maxlength="4" placeholder="请输入乘客手机号码后四位" :border="true"
					:clearable="false" />
				<view class="sure" @click="daodaOrder()">确定</view>
			</view>
		</u-popup>
		<view class="sos" @click="goJinji()">
			<image v-if="globalImages" :src="globalImages + 'imgs/static/my/jjqz.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '@/components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				showTime: false,
				indentNumber: '',
				order: [],
				indentId: '',
				show: false,
				qrcode: '',
				time: '',
				creditScore: 0,
				AllcreditScore: 0,
				shows: false,
				phone: '',
				codeMsg: '',
				timeList: [],
				timeId: '',
				timeIdName: '',
				zxMsg: '是',
				qqmapsdk: {}, // 腾讯地图小程序的SDK
				latitude: '',
				longitude: '',
				covers: [], // 地图上面的标记点
				to: { // 目的地坐标
					latitude: '',
					longitude: '',
				},
				polyline: [], //路线
				polylines: '',
				sfPhone: '',
				globalImages: ''
			}
		},
		onLoad(option) {
			waitForGlobalImages().then((path) => {
			    console.log('✅ 全局图片路径:', path)
			    this.globalImages = path
			  })
			this.getInitMap()
			this.getMyDetail()
			this.indentId = option.indentId
			if (option.indentNumber) {
				this.indentNumber = option.indentNumber
				this.getorderDet()
			}
			this.zxMsg = this.$queue.getData('zxMsg');
			var that = this
			that.$Request.getT('/app/common/type/364').then(res => { // 每次取消扣除的信用分数量 364
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.creditScore = res.data.value
					}
				}
			})
			that.$Request.getT('/app/common/type/365').then(res => { // 低于多少不能接单和下单 365
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.AllcreditScore = res.data.value
					}
				}
			})
		},
		onShow() {

		},
		methods: {
			goMsg(){
				let userId = this.$queue.getData('userId');
				let data = {
					userId: userId,
					focusedUserId: this.order.userId,
					ordersId: this.indentNumber,
					userType: 1
				}
				this.$Request.postJson('/app/chat/insertChatConversation', data).then(res => {
					if (res.code == 0) {
						let id = userId == res.data.userId ? res.data.focusedUserId : res.data.userId
						uni.navigateTo({
							url: '/my/kefu/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id + '&ordersId=' + res.data.ordersId
						})
					}
				})
			},
			getMyDetail() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/user/selectUserDetails?userId=' + userId).then(res => {
					if (res.code == 0 && res.data) {
						this.sfPhone = res.data.phone;
					}
				});
			},
			//初始化地图
			getInitMap() {
				this.$Request.getT('/app/common/type/282').then(res => { //师傅端腾讯地图key
					if (res.code === 0) {
						this.qqmapsdk = new QQMapWX({
							key: res.data.value // 自己申请的key值
						})
					}
				});
			},
			goJinji() {
				uni.navigateTo({
					url: '/my/setting/jinji'
				})
			},
			cancelTime() {
				this.timeId = ''
				this.timeIdName = ''
				this.showTime = false
			},
			confirmTime(e) {
				this.timeId = e[0].value
				this.timeIdName = e[0].label
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认加时' + this.timeIdName + '吗？',
					complete(ret) {
						if (ret.confirm) {
							let data = {
								indentId: that.order.indentId,
								timeId: that.timeId
							}
							that.$Request.postT('/app/indentTimeRecord/indentAddTime', data).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '加时成功'
									})
									that.getorderDet()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
							console.log(data, '222222222222')
						}
					}
				})
				console.log(e[0], '444444444444')
			},
			//加时
			addTime() {
				this.$Request.get('/app/packageTime/getPackageTimeList').then(res => {
					if (res.code == 0) {
						res.data.records.map(item => {
							item.timeNum = item.timeNum + '小时'
						})
						this.timeList = res.data.records
						if (this.timeList.length > 0) {
							this.showTime = true
						} else {
							uni.showToast({
								title: '暂无可加时长'
							})
						}
					}
				})
			},
			zhundan() {
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				this.$Request.postT('/app/indent/transferOfOrder', {
					indentId: this.indentId,
					phone: this.phone
				}).then(res => {
					this.shows = false
					this.phone = ''
					if (res.code == 0) {
						uni.showToast({
							title: '转单成功',
							icon: 'none',
							duration: 3000
						})
						this.getorderDet()
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			openZd() {
				this.phone = ''
				this.shows = true
			},
			orderpay() {
				let data = {
					indentId: this.indentId
				}
				this.$Request.postT('/app/wxPay/generateNative', data).then(res => {
					if (res.code === 0 && res.data) {
						this.qrcode = res.data
						this.show = true
						let that = this
						that.time = setInterval(function() {
							that.getorderDet()
						}, 3000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			copyClick(copy) {
				uni.setClipboardData({
					data: copy,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
									icon: 'none',
								});
							},
						});
					},
				});
			},
			// 一键导航
			openMap(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			bindPhone(phone) {
				let ysPhone = this.$queue.getData('ysPhone');
				if (ysPhone === '是') {
					this.$Request.getT('/app/user/insertVirtualPhone?phoneA=' + this.sfPhone + '&phoneB=' + phone).then(
						res => {
							if (res.code == 0) {
								if (res.data) {
									uni.makePhoneCall({
										phoneNumber: res.data //仅为示例
									});
								} else {
									this.$queue.showToast('手机号获取失败！');
								}
							} else {
								this.$queue.showToast(res.msg);
							}
						});
				} else {
					uni.makePhoneCall({
						phoneNumber: phone //仅为示例
					});
				}
			},
			getorderDet() {
				let userId = this.$queue.getData('userId');
				let data = {
					ordersId: this.indentNumber,
					driverUserId: userId
				}
				this.$Request.getT('/app/orders/selectOrdersDetails', data).then(res => {
					if (res.code === 0) {
						this.order = res.data
						this.latitude = this.order.shipAddressLatitude
						this.longitude = this.order.shipAddressLongitude
						this.to.latitude = this.order.deliveryAddressLatitude
						this.to.longitude = this.order.deliveryAddressLongitude
						this.covers = [{
							id: 1,
							latitude: this.order.shipAddressLatitude,
							longitude: this.order.shipAddressLongitude,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/qi.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.shipAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}, {
							id: 2,
							latitude: this.order.deliveryAddressLatitude,
							longitude: this.order.deliveryAddressLongitude,
							iconPath: this.globalImages ? this.globalImages + 'imgs/static/image/zd.png' : '',
							width: 32,
							height: 44,
							callout: { //自定义标记点上方的气泡窗口 点击有效
								content: this.order.deliveryAddress, //文本
								color: '#333333', //文字颜色
								fontSize: 10, //文本大小
								padding: 10, //附近留白
								borderRadius: 6, //边框圆角
								bgColor: '#FFFFFF', //背景颜色
								display: 'ALWAYS', //常显
							},
						}]
						this.polylines = this.order.polyline
						this.routePlanning()
						if (this.order.shipUserPhone) {
							let mobile = this.order.shipUserPhone
							this.order.shipUserPhones = mobile.substring(0, 3) + "********"
						}

					}
				});
			},
			//规划路线
			routePlanning() {
				let that = this
				that.qqmapsdk.direction({
					mode: 'driving', // 驾车
					from: { // 起始位置(当前位置)坐标
						latitude: that.latitude,
						longitude: that.longitude
					},
					to: that.to, // 目的地位置坐标
					success(res) {
						console.log(res, '=======')
						// var coors = JSON.parse(that.polylines)
						// console.log(coors,'11111111111111')
						var coors = res.result.routes[0].polyline
						// console.log(coors2,'11111111111111')
						var pl = [] // 点串数组
						// 坐标解压(返回的点串坐标，通过前向差分进行压缩)
						var kr = 1000000
						for (var i = 2; i < coors.length; i++) {
							coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr
						}
						// 将解压后的坐标放入点串数组pl中
						for (var i = 0; i < coors.length; i += 2) {
							pl.push({
								latitude: coors[i],
								longitude: coors[i + 1]
							})
						}
						// 设置polyline属性，将路线显示出来，将解压坐标第一个数据作为起点
						that.polyline = [{
							points: pl,
							color: '#346EF6',
							width: 4
						}]
					}
				})
			},
			// 取消订单
			qxOrder() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '取消订单将会被扣保证金以及信用分' + that.creditScore + '分,信用分低于' + that.AllcreditScore + '分无法接单',
					cancelText: '取消',
					confirmText: '确认',
					complete: function(ret) {
						if (ret.confirm) {
							that.$Request.postT('/app/orders/cancelOrders', {
								ordersId: that.order.ordersId,
								isDriver: 1,
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '订单已取消',
										icon: "none"
									});
									that.getorderDet()
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			startAddress(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已抵达起点，开始等待吗？',
					complete(ret) {
						if (ret.confirm) {
							that.$Request.getT('/app/indent/riderWaitDrive?indentId=' + that.order.indentId).then(
								res => {
									if (res.code == 0) {
										uni.showToast({
											title: '已开始等待'
										})
										that.getorderDet()
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none'
										})
									}
								})
						}
					}
				})
			},
			daodaOrder() { //抵达起点  开始服务
				let that = this
				that.shows = false
				if (that.codeMsg === '') {
					this.$queue.showToast('请输入乘客尾号后四位！');
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确认开始服务吗？',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postT('/app/orders/proceedOrders', {
								ordersId: that.order.ordersId,
								code: that.codeMsg
							}).then(res => {
								if (res.code == 0) {
									that.getorderDet()
									uni.showToast({
										title: '服务已开始',
										icon: "none"
									});
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									that.codeMsg = ''
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			wcOrder() { //抵达终点
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已抵达终点，完成服务吗？',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postT('/app/orders/completeOrders', {
								ordersId: that.order.ordersId
							}).then(res => {
								if (res.code == 0) {
									that.getorderDet()
									uni.showToast({
										title: '已到达终点',
										icon: "none"
									});
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.orderMap {
		width: 100%;
		height: 400rpx;
		border-radius: 14rpx;
		margin-top: 20rpx;
	}

	.sos {
		width: 70rpx;
		height: 70rpx;
		position: fixed;
		bottom: 290rpx;
		left: 32rpx;
		z-index: 99999;
		
		image {
			width: 70rpx;
			height: 70rpx;
		}
	}

	.top_box {
		width: 686rpx;
		// height: 390rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx;
		// position: absolute;
		// top: 80rpx;
		position: relative;
		// margin-top: -200rpx;
		z-index: 99;

		.cph_item {
			width: 624rpx;
			height: 220rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			// align-items: center;

			image {
				width: 250rpx;
				height: 110rpx;
				margin-top: 30rpx;
			}

			.cphitem_name {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 38rpx;
				color: #1A1A1A;
			}

			.blackdian {
				width: 6rpx;
				height: 6rpx;
				background: #333333;
				border-radius: 50%;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.sj_sg {
				width: 1rpx;
				height: 20rpx;
				border: 1rpx solid #A0A0A0;
				margin: 0rpx 20rpx;
			}
		}


		.topbox_addview {
			width: 624rpx;
			min-height: 100rpx;
			// background: #EFF4FF;
			// border-radius: 16rpx;
			border-top: 1px solid #ccc;
			margin: 0 auto;
			// display: flex;
			align-items: center;
			padding: 30rpx 0;

			image {
				width: 6rpx;
				height: 24rpx;
				margin-left: 6rpx;
			}


			.topbox_title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #151515;
			}
		}
	}

	.topbox_addName {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #1A1A1A;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.top_view {
		width: 750rpx;
		height: 325rpx;
		background: linear-gradient(to bottom, #346EF6 0%, #8EB0FF 70%, #F5F5F5 90%);
		padding: 40rpx;
		position: relative;

		.top_title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 38rpx;
			color: #FFFFFF;
		}
	}

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding: 30rpx 0;
	}

	.box {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin: 30rpx;

	}

	.titls {
		font-size: 32rpx;
		font-family: PingFang SC;
		// font-weight: bold;
		color: #333333;
	}

	.bb {
		width: 110rpx;
		height: 38rpx;
		// background: #49A5FF;
		// opacity: 0.32;
		background-color: rgba(73, 165, 255, 0.3);
		border-radius: 4rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #359CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
	}

	.addbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 110rpx;
		border-radius: 16rpx;

	}

	.add_cont {
		display: flex;
		align-items: center;
	}

	.add_tit {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.bg {
		background: #F5F5F5;
	}

	.bgs {
		background: #F5F8FF;

	}

	.green {
		width: 16rpx;
		height: 16rpx;
		background: #1FC657;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.orgin {
		width: 16rpx;
		height: 16rpx;
		background: #FBAC04;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.tabber {
		width: 686rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0rpx;
		margin: 50rpx 0rpx;
		margin: 0 auto;

		.btn {
			width: 330rpx;
			height: 100rpx;
			line-height: 100rpx;
			border: 1px solid #A0A0A0;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9C9C9C;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn1 {
			width: 660rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #00c18a;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
		}

		.btn2 {
			width: 330rpx;
			height: 100rpx;
			line-height: 100rpx;
			background: #00c18a;
			border-radius: 16rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
		}
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 10rpx;
	}

	::v-deep .u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	::v-deep .u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(87deg, #346EF6 0%, #7BA2FF 100%);
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 40rpx;
		letter-spacing: 2rpx;
	}
</style>