shunfengche-sfd/pages/order/order.vue

<template>
	<view>
		<view class="">
			<!-- #ifdef H5 -->
			<view style="position: fixed;top:0rpx;width: 100%;z-index: 999;">
			<!-- #endif -->
				<!-- #ifndef H5 -->
				<!-- v-if="shangxian=='否'" -->
				<view style="position: fixed;top: 0;width: 100%;z-index: 999;" >
				<!-- #endif -->
					<u-tabs :list="list" :is-scroll="false" active-color="#00c18a" inactive-color=" #666666"
						:bold="bold" :current="current" @change="change"></u-tabs>
				</view>
				<view class="ifbox">
					<view class="boxa" v-for="(item,index) in orderlist" :key="index" @click="goOrder(item)">

						<view class="order_box">
							<view class="order_success">
								<view class="text-bold text_bolds1" v-if="item.status==1">待支付</view>
								<view class="text-bold text_bolds2" v-if="item.status==2">待接单</view>
								<view class="text-bold text_bolds3" v-if="item.status==3">已接单</view>
								<view class="text-bold text_bolds4" v-if="item.status==4">进行中</view>
								<view class="text-bold text_bolds5" v-if="item.status==5">已抵达</view>
								<view class="text-bold text_bolds6" v-if="item.status==6">已取消</view>
								<view class="order_name"><!-- 待支付 --><view class="order_money">¥{{item.payMoney}}</view></view>
							</view>
							<!-- <view class="item_shunlu">{{item.similarity ? item.similarity : '0'}}% <text
									style="font-size: 24rpx;">顺路</text> </view> -->
						</view>
						<u-line color="#E6E6E6" />
						<view class="order_city">
							<view class="flex align-center">
								<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/times.png'" style="width: 28rpx;height: 28rpx;"></image>
								<view style="margin-left: 16rpx;" class="add_name">{{item.appointmentStartTime}}</view>
							</view>

							<view class="margin-tb flex align-center">
								<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/person.png'" style="width: 30rpx;height: 31rpx;"></image>
								<view style="margin-left: 16rpx;" class="add_name">
									{{item.appointmentNum}}人乘坐·{{item.appointmentType == 1 ? '独享' : '拼车'}}
								</view>
							</view>

							<view class="flex align-center add_name" style="margin: 30rpx 0rpx 4rpx;">
								<view class="green"></view>出发地点：{{item.shipAddress}}
							</view>
							<image v-if="globalImages" :src="globalImages + 'imgs/static/upload/up.png'" class="order_up"></image>
							<view class="flex align-center add_name">
								<view class="orgin"></view>到达地点：{{item.deliveryAddress}}
							</view>
						</view>

						<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
						<view class="flex align-center justify-between padding-lr ">
						<!-- 	<view>
								<view class="flex align-center" v-if="item.status != 5 && item.status != 6"
									@tap.stop="bindPhone(item.shipUserPhone)">
									<image src="/static/upload/phone.png" style="width: 32rpx;height: 40rpx;"></image>
									<view class="add_name margin-left-xs">联系TA</view>
								</view>
							</view> -->
							<!-- <view style="color: #FF2020;font-size: 32rpx;font-weight: bold;">
								<text>¥</text><text style="font-size: 42rpx;">{{item.driveMoney}}</text>
							</view> -->
						</view>
						<view class="padding" style="display: flex; align-items: center; justify-content: flex-end;">
							<view class="btn3" v-if="item.status == 3" @tap.stop="qxOrder(item.ordersId)">取消订单
							</view>
							<view class="btn3 margin-left" v-if="item.status == 5"
								@tap.stop="bindcomment(item)">
								去评价
							</view>
							<view class="btn4 margin-left" v-if="item.status==4" @click="goNav('/my/setting/jinji')">安全求助</view>
							<view class="btn2 margin-left" v-if="item.status == 3">开始服务</view>
							<view class="btn2 margin-left" v-if="item.status == 4">抵达终点</view>
						</view>
						<!-- 
						<view v-if="item.status==1">待支付</view>
						<view v-if="item.status==2">待接单</view>
						<view v-if="item.status==3">已接单</view>
						<view v-if="item.status==4">进行中</view>
						<view v-if="item.status==5">已抵达</view>
						<view v-if="item.status==6">已取消</view>
						
						<view class="flex align-center justify-between padding-lr">
							<view class="flex align-center">
								<image src="../../static/image/data.png" style="width: 34rpx;height: 38rpx;"></image>
								<view class="margin-left-sm" v-if="item.indentType==1"> 即时代驾</view>
								<view class="margin-left-sm" v-if="item.indentType==2">朋友代叫</view>
								<view class="margin-left-sm" v-if="item.indentType==3">预约代驾</view>
							</view>
							<view style="color: #5FADFF;">
								<view v-if="item.indentState==1">已接单</view>
								<view v-if="item.indentState==2">进行中</view>
								<view v-if="item.indentState==3">待支付</view>
								<view v-if="item.indentState==4">已完成</view>
								<view v-if="item.indentState==5">已取消</view>
							</view>

						</view>
						<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
						<view class="addbox bgs margin-lr margin-bottom">
							<view class="add_cont">
								<view class="green"></view>
								<view class="add_tit">
									<view>{{item.shipAddress}}</view>
								</view>
							</view>
							<view>
								<image src="../../static/image/ladd.png" style="width: 30rpx;height: 35rpx;"></image>
							</view>
						</view>
						<view class="addbox bg margin-lr">
							<view class="add_cont">
								<view class="orgin"></view>
								<view class="add_tit">{{item.deliveryAddress}}</view>
							</view>
							<view>
								<image src="../../static/image/hadd.png" style="width: 30rpx;height: 35rpx;"></image>
							</view>
						</view>
						<view class="margin-lr margin-top-sm" v-if="item.remarks">备注：{{item.remarks}}</view>
						<view class="margin-tb-sm" style="width: 100%;height:1rpx;background: #F2F2F2;"></view>
						<view class="flex align-center justify-between padding-lr ">
							<view class="flex align-center" v-if="item.indentState==1&&item.riderDistance">
								<image src="../../static/image/add.png" style="width: 30rpx;height: 35rpx;"></image>
								<view v-if="item.riderDistance>1000" class="margin-left-xs">距您<text
										style="color: #3699FF;">{{(Number(item.riderDistance) / 1000).toFixed(2)}}km</text>
								</view>
								<view v-else class="margin-left-xs">距您<text
										style="color: #3699FF;">{{item.riderDistance}}m</text>
								</view>
							</view>
							<view class="flex align-center" v-if="item.riderMoney">
								<text v-if="item.indentState!=4">预估</text>
								<text v-else>实收</text>
								<view style="color: #FF2020;font-size: 32rpx;">
									<text>¥</text><text class="text-bold"
										style="font-size: 38rpx;">{{item.riderMoney}}</text>
								</view>
							</view>
						</view> -->
						<!-- <view class="flex align-center justify-between margin-lr margin-top flex-wrap">

							<view class="btn" v-if="item.indentState==1 || item.indentState==2"
								@click.stop="qxOrder(item.indentId)">取消订单</view>
							<view class="btn" v-if="item.indentState==1 && item.userId"
								@click.stop="openZd(item.indentId)">转单</view>
							<view class="btn1" v-if="item.indentState==1 && !item.startWaitTime"
								@click.stop="startAddress(item.indentId)">开始等待
							</view>
							<view class="btn1" v-if="item.indentState==1" @click.stop="daodaOrder(item.indentId)">开始服务
							</view>
							<view class="btn1" v-if="item.indentState==2" @click.stop="wcOrder(item.indentId)">抵达终点
							</view>
							<view class="btn1" v-if="item.indentState==2 && item.moneyType == 1"
								@click.stop="goOrder(item)">
								加时
							</view>
							<view class="btn1" v-if="item.indentState==3" @click.stop="goOrder(item)">
								出示收款码
							</view>
						</view> -->
					</view>

				</view>
				<empty v-if="orderlist.length == 0"></empty>
				<!-- 收货码弹框 -->
				<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="shouhuoma" type="text" placeholder="请输入收货码" :border="true" />
						<view class="sure" @click="querenSh">确定</view>
					</view>
				</u-popup>
				<!-- 转单弹框 -->
				<u-popup v-model="show" mode="center" border-radius="18" width="580rpx" height="400rpx">
					<view class="receipt_code">
						<view class="code_title">转单</view>
						<u-input v-model="phone" type="number" maxlength="11" placeholder="请输入转单人手机号码" :border="true"
							:clearable="false" />
						<view class="sure" @click="zhundan()">确定</view>
					</view>
				</u-popup>
			</view>

		</view>
</template>

<script>
	import empty from '@/components/empty'
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		components: {
			empty
		},
		data() {
			return {
				shows: false,
				closeable: true,
				shouhuoma: '',
				list: [{
						name: '全部',
						id: ''
					},
					// {
					// 	name: '待接单',
					// 	id: 2
					// },
					{
						name: '已接单',
						id: 3
					}, {
						name: '进行中',
						id: 4
					}, {
						name: '已抵达',
						id: 5
					}, {
						name: '已取消',
						id: 6
					}
				],
				current: 0,
				bold: false,
				page: 1,
				limit: 5,
				// order: [],
				orderlist: [],
				totalCount: 0,
				longitude: '', //经度
				latitude: '', //纬度
				indentState: '', //订单状态
				indentNumber: '', //订单号
				userId: '',
				arr: [],
				shangxian: '是',
				creditScore: 0,
				AllcreditScore: 0,
				show: false,
				phone: '',
				indentId: '',
				sfPhone: '',
				showModal1: true,
				globalImages: '',
			}
		},
		onLoad() {
			waitForGlobalImages().then((path) => {
				console.log('✅ 全局图片路径:', path)
				this.globalImages = path
			  })
			// uni.getLocation({
			// 	type: 'wgs84',
			// 	success: function(res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 		that.longitude = res.longitude
			// 		that.latitude = res.latitude

			// 	}
			// });
			var that = this
			that.$Request.getT('/app/common/type/428').then(res => { //师傅端小程序订单状态通知 428

				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/429').then(res => { //师傅端小程序新订单通知 429
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			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() {
			var that = this
			this.shangxian = uni.getStorageSync('shangxian')
			that.userId = uni.getStorageSync('userId')
			if (that.userId) {
				that.page = 1
				that.taskData()
				that.getMyDetail();
				if (that.showModal1) {
					// #ifdef MP-WEIXIN
					that.openMsg()
					// #endif
				}
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			// 紧急求助
			goNav(url) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				let token = this.$queue.getData("token");
				if (token) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.bindlogin();
				}
			},
			// 去评价
			bindcomment(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				// uni.navigateTo({
				// 	url: '/my/order/comments?indentNumber=' + e.indentNumber + '&riderUserId=' + e
				// 		.riderUserId + '&userId=' + e.userId + '&ordersNo=' + e.ordersNo + '&ordersId=' + e.ordersId
				// })
				
				uni.navigateTo({
				  url: '/my/order/comments?data=' + encodeURIComponent(JSON.stringify(e))
				})
			},
			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;
					}
				});
			},
			// 开启订阅消息
			openMsg() {
				console.log('订阅消息')
				var that = this
				uni.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						console.log(ret.subscriptionsSetting, '------------------')
						// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							console.log(99999)
							uni.setStorageSync('sendMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										console.log(that.arr)
										wx.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												console.log(JSON.stringify(re),
													'++++++++++++++')
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
													// uni.setStorageSync('sendMsg', true)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										// uni.setStorageSync('sendMsg', true)
										console.log('确认')
										that.showModal1 = false
									} else if (res.cancel) {
										console.log('取消')
										// uni.setStorageSync('sendMsg', false)
										that.showModal1 = true
									}
								}
							})
						}
					}
				})
			},
			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.show = false
					this.phone = ''
					if (res.code == 0) {
						uni.showToast({
							title: '转单成功',
							icon: 'none',
							duration: 3000
						})
						this.page = 1
						this.taskData()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			openZd(id) {
				this.phone = ''
				this.indentId = id
				this.show = true
			},
			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 //仅为示例
					});
				}
			},
			goOrder(item) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				if (this.userId) {
					uni.navigateTo({
						url: '/my/order/pay?indentNumber=' + item.ordersId
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}

			},
			change(index) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				this.current = index;
				this.orderlist = []
				this.page = 1
				this.taskData()
			},
			// 订单获取
			taskData() {
				let driverId = this.$queue.getData('driverId');
				if (!driverId) {
					return;
				}
				let indentState = this.list[this.current].id
				let userId = this.$queue.getData('userId');
				let data = {
					page: this.page,
					limit: 10,
					latitude: this.latitude,
					longitude: this.longitude,
					driverUserId: userId,
					appointmentType: '',
					status: indentState,
					driverId: driverId,
					sort: ''
				}
				this.$Request.getT('/app/orders/selectOrdersList', data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.totalCount = res.data.totalCount
						if (this.page == 1) {
							this.orderlist = res.data.list
						} else {
							this.orderlist = [...this.orderlist, ...res.data.list]
						}
					}
					uni.stopPullDownRefresh();
				});


				// this.$Request.getT('/app/indent/getRiderIndentList', {
				// 	page: this.page,
				// 	limit: 10,
				// 	indentState: indentState
				// }).then(res => {
				// 	if (this.page == 1) {
				// 		this.orderlist = res.data.records
				// 	} else {
				// 		this.orderlist = this.orderlist.concat(res.data.records)
				// 	}
				// 	this.totalCount = res.data.pages
				// 	uni.stopPullDownRefresh();
				// });
			},
			// 订单详情
			bindorderDetail(indentNumber) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				// #endif
				uni.navigateTo({
					url: '/pages/index/orderdetail/orderdetail?id=' + indentNumber
				})
			},
			// 取消订单
			qxOrder(indentId) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '取消订单将会被扣保证金以及信用分' + that.creditScore + '分,信用分低于' + that.AllcreditScore + '分无法接单',
					cancelText: '取消',
					confirmText: '确认',
					complete: function(ret) {
						if (ret.confirm) {
							that.$queue.showLoading('取消中...')
							that.$Request.postT('/app/orders/cancelOrders', {
								ordersId: indentId,
								isDriver: 1,
							}).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									that.page = 1
									that.taskData()
									uni.showToast({
										title: '订单已取消',
										icon: "none"
									});

								} 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=' + indentId).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: '已开始等待'
									})
									that.page = 1
									that.taskData()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			daodaOrder(indentId) { //  开始服务
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认开始服务吗？',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postT('/app/indent/riderStartDrive', {
								indentId: indentId
							}).then(res => {
								if (res.code == 0) {
									that.page = 1
									that.taskData()
									uni.showToast({
										title: '服务已开始',
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			wcOrder(indentId) { //抵达终点
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认已抵达终点，完成服务吗？',
					success: function(res) {
						if (res.confirm) {
							that.$Request.postT('/app/indent/riderDelivery', {
								indentId: indentId
							}).then(res => {
								if (res.code == 0) {
									that.page = 1
									that.taskData()
									uni.showToast({
										title: '已到达终点',
										icon: "none"
									});
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									});
								}
							});
						}
					}
				})
			},
			querenSh() {
				this.$Request.postT('/app/indent/riderDelivery', {
					indentNumber: this.indentNumber,
					itemCode: this.shouhuoma
				}).then(res => {
					console.log(res)
					if (res.code == 0) {
						this.page = 1
						this.taskData()
						uni.showToast({
							title: '订单完成',
							icon: "none"
						});
						this.shows = false

					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
			}
		},
		onReachBottom: function() {
			if (this.userId) {
				if (this.page < this.totalCount) {
					this.page += 1;
					this.taskData();
				}
			}

		},
		onPullDownRefresh: function() {
			if (this.userId) {
				this.page = 1;
				this.taskData()
			} else {
				uni.stopPullDownRefresh();
			}
		},

	}
</script>

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

	.boxa {
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx;
		padding-bottom: 30rpx;
		// padding: 30rpx 0;
	}
	
	.order_success {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
	
		.order_name {
			color: #346EF6;
			font-weight: bold;
		}
	}
	
	.btn3 {
		width: 150rpx;
		height: 60rpx;
		border: 1px solid #00c18a;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00c18a;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn2 {
		width: 150rpx;
		height: 60rpx;
		background: #00c18a;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn4 {
		width: 150rpx;
		height: 60rpx;
		background: #f56c6c;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.btn1 {
		width: 150rpx;
		height: 60rpx;
		border: 1px solid #999999;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
	
	}
	
	.order_box {
		background: #FFFFFF;
		border-radius: 24rpx;
		// margin: 30rpx;
	
		.order_success {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
	
			.order_name {
				color: #346EF6;
				font-weight: bold;
			}
		}
		
		.text_bolds1 {
			font-weight: 500;
			border: 1rpx #fe6b01 solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #fcf6ec;
			color: #fe6b01;
		}
		
		.text_bolds2 {
			font-weight: 500;
			border: 1rpx #fe6b01 solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #fcf6ec;
			color: #fe6b01;
		}
		
		.text_bolds3 {
			font-weight: 500;
			border: 1rpx #00c18a solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #e8fbf6;
			color: #00c18a;
		}
		
		.text_bolds4 {
			font-weight: 500;
			border: 1rpx #409eff solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #ecf5ff;
			color: #409eff;
		}
		
		.text_bolds5 {
			font-weight: 500;
			border: 1rpx #00c18a solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #e8fbf6;
			color: #00c18a;
		}
		
		.text_bolds6 {
			font-weight: 500;
			border: 1rpx #f56c6c solid;
			padding: 8rpx 20rpx;
			border-radius: 13rpx;
			background: #ffe9e9;
			color: #f56c6c;
		}
	
		.order_city {
			padding: 30rpx;
			color: #666666;
		}
	
		.order_up {
			width: 6rpx;
			height: 24rpx;
			margin-left: 6rpx;
		}
	
		.order_money {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 34rpx;
			color: #FF4B36;
		}
	
		.order_btn {
			display: flex;
			align-items: center;
			justify-content: flex-end;
	
			.btn3 {
				width: 150rpx;
				height: 60rpx;
				border: 1px solid #fe6b01;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fe6b01;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.btn2 {
				width: 150rpx;
				height: 60rpx;
				background: #fe6b01;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.btn1 {
				width: 150rpx;
				height: 60rpx;
				border: 1px solid #999999;
				border-radius: 16rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
	
			}
		}
	}

	.item_shunlu {
		width: 210rpx;
		height: 80rpx;
		background: #EFF4FF;
		border-radius: 0px 24rpx 0px 50rpx;
		text-align: center;
		line-height: 80rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		font-size: 32rpx;
		color: #346EF6;
	}

	.item_btn_qx {
		width: 303rpx;
		height: 78rpx;
		border-radius: 4rpx;
		border: 2rpx solid #999999;
		text-align: center;
		line-height: 78rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #999999;
	}

	.item_btn_ddm {
		width: 660rpx;
		height: 78rpx;
		border-radius: 4rpx;
		background: #3670F6;
		text-align: center;
		line-height: 78rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.item_btn_dd {
		width: 303rpx;
		height: 78rpx;
		border-radius: 4rpx;
		background: #3670F6;
		text-align: center;
		line-height: 78rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.order_city {
		padding: 30rpx;
		color: #666666;
	}

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

	.ifbox {
		/* #ifdef H5 */
		padding-top: 85rpx;
		/* #endif */
		/* #ifndef H5 */
		padding-top: 86rpx;
		/* #endif */
	}

	.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;
	}

	.btn {
		// width: 200rpx;
		margin: 0 10rpx;
		flex: 1;
		height: 60rpx;
		border: 1px solid #999999;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.btn1 {
		margin: 0 10rpx;
		// width: 200rpx;
		flex: 1;
		height: 60rpx;
		background: linear-gradient(87deg, #346EF6 0%, #7BA2FF 100%);
		border-radius: 4rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 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>