<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<u-navbar title="订单详情" leftIconSize="0" @leftClick="leftClick" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
		</u-navbar>
	<view class="Order-details">
		<view class="Order-status">
			<div class="df jcsb Order-head" @click="Status">
				<div>订单状态</div>
				<div class="df aic">
					<text class="lan">{{data.order_status_name}}</text>
				<img style="width: 28rpx;height: 28rpx;margin: 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></img>
				</div>
			</div>
			<div class="Order-thread"></div>
			<div class="Order-number">订单编号<span>{{data.order_no}}</span> </div>
			<div class="Order-time">下单时间<span>{{data.create_time | time}}</span></div>
		</view>
		<view class="connection">
			<div class="df jcsb">
				<div class="connection-head">{{data.nickname}}<span>{{data.store_type}}</span></div>
				<div class="df" @click="kehutiaozhuan(data.member_id)">
					<div class="connection-Rearf">{{data.pay_type_name}}</div>
					<image style="width: 28rpx;height: 28rpx;margin: 36rpx 4rpx 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></image>
				</div>
			</div>
			<div class="line"></div>
			<div class="df jcsb">
				<div class="connection-head">店铺名称：{{data.store_name}}</div>
				
			</div>
			<div class="line"></div>
			<div class="Good-doctor">{{data.site_name}}</div>
			<div class="connection-address">
				<span>{{data.full_address}}</span>
				<span>{{data.name}}&ensp;{{data.mobile}}</span>
			</div>
			<div class="line"></div>
			<div class="df Shipping-address">
				<div class="">收货地址：</div>
				<div>
					<view class="Shipping-telephone">{{data.name}}<span>{{data.mobile}}</span></view>
					<view class="Shipping-telephona">{{data.full_address}}</view>
				</div>
			</div>
		</view>
		<view class="Commodity-list">
			<div class="df jcsb Commodity-ten" @click="inventory">
				<div>商品清单</div>
				<div class="df aic">
					<text>{{data.goods_num}}件</text>
					<img style="width: 28rpx;height: 28rpx;margin: 0 4rpx;" :src="$util.img(`/upload/weapp/user/you.png`)"></img>
				</div>
			</div>
			<div class="dotted-line"></div>
			<div class="Commodity-money">
				<div class="df jcsb money">
					<div>订单金额</div>
					<div>￥{{data.order_money}}</div>
				</div>
				<div class="df jcsb money">
					<div>商品金额</div>
					<div>￥{{data.goods_money}}</div>
				</div>
				<div class="df jcsb money">
					<div>订单调整</div>
					<div class="money-koude">￥{{data.adjust_money}}</div>
				</div>
				<div class="df jcsb money">
					<div>特批优惠</div>
					<div class="money-koude">-￥{{data.sales_money}}</div>
				</div>
				<div class="df jcsb money">
					<div>运费</div>
					<div class="money-koude">￥{{data.delivery_money}}</div>
				</div>
				<div class="df jcsb money">
					<div>优惠卷</div>
					<div>￥{{data.coupon_money}}</div>
				</div>
			</div>
			<div class="df transportation-expenses">
				<!-- <div class="df aic jcsa" @click="show1=true">
					<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/revise.png`)"></image>
					修改运费</div>
				<div class="df aic jcsa" @click="show2=true">
					<image :src="$util.img(`/upload/weapp/pageSalesman/reportForm/form.png`)"></image>
					修改特批价</div> -->
			</div>
		</view>
		<view class="Collection-record">
			<!-- <div class="df jcsb " @click="Logistics">
				<div>发货/物流记录</div>
				<div class="df">
					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
			<div class="dotted-line" style="margin: 24rpx 0;"></div> -->
			<div class="df jcsb" @click="Collection">
				<div>收款记录</div>
				<div class="df">
<!--					<div v-if="data.wait_status==1 && data.sales_balance==1 &&data.wait_status==1">待确认</div>-->
<!--					<div v-else-if="data.wait_status==1 && data.sales_balance==1 &&data.wait_status==2">已确认</div>-->
<!--					<div v-else-if="data.sales_balance==0">已支付</div>-->

          <div v-if="data.pay.pay_status == 1 ">支付中</div>
          <div v-else-if="data.pay.pay_status == 0 && data.pay.received_money == 0">未支付</div>
          <div v-else-if="data.pay.pay_status == 0 && data.pay.pay_money > 0 && data.pay.received_money > 0">部分支付</div>
          <div v-else-if="data.pay.pay_status==2">已支付</div>
					<div v-else>暂无收款记录</div>
					<image style="width: 28rpx;height: 28rpx;margin: 10rpx 0rpx;"
						:src="$util.img(`/upload/weapp/user/you.png`)"></image>
				</div>
			</div>
			<div class="dotted-line" style="margin: 24rpx 0;"></div>
			<!-- <div class="copper-coin">待付￥{{data.order_money}}</div>
			<div class="dotted-line"></div> -->
			<div class="Order-message">订单留言</div>
			<div class="Order-departure" v-if="data.buyer_message">{{data.buyer_message}}</div>
			<div class="Order-departure" v-else>暂未留言</div>
			<div class="dotted-line"></div>
			<div class="Order-remarks df jcsb">订单备注
			<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
			</div>
			<div class="importance">{{data.remark}}</div>
			<div class="dotted-line"></div>
			<div class="df jcsb Delivery-method">
				<text>配送方式</text>
				<text>{{data.delivery_type_name}}</text>
			</div>
			<div class="dotted-line"></div>
			<div class="df jcsb Delivery-methoda">
				<div>发票信息</div>
				<div class="df">
					<text v-if="data.invoice_status==0">不开发票</text>
					<text v-if="data.invoice_status==1">已开发票</text>
					<!-- <text>{{Goodsreceived.invoice_type==1?'纸质发票':'电子发票'}}({{Goodsreceived.invoice_rate}}%税点)</text>
					<u-icon name="arrow-right" color="#fff" size="28"></u-icon>	 -->
				</div>
			</div>
		</view>
		
		<u-overlay :show="show" @click="show = true">
			<div class="notification">
				<div class="point-out">提示</div>
				<div class="Text-field">
					<u-textarea  maxlength=100  v-model="value2" placeholder="请输入内容" count ></u-textarea>
				</div>
				<div class="define df">
					<div class="f1 df aic jcsa">取消</div>
					<div class="f1 df aic jcsa">确定</div>
				</div>
			</div>
		</u-overlay>
		<u-overlay :show="show1" @click="show1 = false">
			<view class="transportation">
				<div>修改运费</div>
				<div class="df">
					<text>运费:</text>
					<text>￥50.00</text>
				</div>
				<div class="df aic">
					<div class="df aic">修改运费</div>
					<div><input type="text"><span>元</span></div>
				</div>
				<div class="fill-in">请填写修改后运费</div>
				<div class="df definea">
					<div class="df aic jcsa">取消</div>
					<div class="df aic jcsa">确定</div>
				</div>
			</view>
		</u-overlay>
		<u-overlay :show="show2" @click="show2 = false">
			<view class="Special-rating">
				<div>申请特批价</div>
				<div>订单价格：<span>￥50.00</span></div>
				<div class="df aic">
					<div class="df aic empty-fixed"><span>*</span>特批价</div>
					<div>
						<input type="text">
						<span>元</span>
					</div>
				</div>
				<div class="df">
					<div cladd="empty-fixed">申请原因</div>
					<div><u-textarea v-model="value1" height="124rpx"  ></u-textarea></div>
				</div>
				<div class="">特批价是指通过客户与业务员之间得沟通后，同意对本地订单总价进行优惠，在此修改优惠后得订单总价</div>
				<div class="df">
					<div class="df aic jcsa">取消</div>
					<div class="df aic jcsa">确认</div>
				</div>
			</view>
		</u-overlay>
		<view class="nav df jcsa aic">
			<div style="border: 0rpx;"></div>
			<div style="border: 0rpx;"></div>
			<!-- <div class="df aic jcsa" @click="zaici">再次订购</div>
			<div class="df aic jcsa" @click="quxiao">取消订单</div> -->
			<div class="df aic jcsa" @click="tongguo">再次订购</div>
		</view>
	</view>
	</z-paging>
</template>

<script>
	const timesfm = require('@/common/js/map/message.js')
	import eventBus  from '@/common/js/bus.js'
	import {
		computed
	} from "vue"
	export default {
		data() {
			return {
				show: false,
				show1: false,
				show2: false,
				value2: '请输入订单备注',
				value1: '',
				dataList:[1],
				Goodsreceived:[],
				member:'',
				order:'',
				data:[],
				lujin:''
			};
		},
		onLoad(e) {
			// uni.$on('Goodsreceived',(data)=>{
			// 	this.Goodsreceived=data
			// 	console.log(data,'已收款列表');
			// })
			eventBus.$on('urlone', (data) => {
			
				this.lujin = data
				uni.$off('urlone')
			})
			console.log(e,'id');
			this.order=e.or
			this.member=e.me
		},
		onShow() {
			this.$api.sendRequest({
				url:'/api/salasmanorder/detail',
				data:{
					order_id:this.order,
					member_id:this.member
				},
				success:res=>{
					this.data=res.data
					console.log(this.data,'已收货');
				}
			})
		},
		
		methods: {
			queryList(pageNo, pageSize) {
				this.$api.sendRequest({
					url:'/api/salasmanorder/detail',
					data:{
						order_id:this.order,
						member_id:this.member
					},
					success:res=>{
						this.data=res.data
						console.log(this.data,'已收货');
					}
				})
			this.$refs.paging.complete(this.dataList);
			
			},
			kehutiaozhuan(id){
				uni.navigateTo({
					// url:'/page_salesman_customer/Customer_details/detailedinformation',
					url: `/page_salesman_customer/detailed/detailed?id=${id}&di=1`
				})
			},
			leftClick() {
				// #ifdef H5
				event.stopPropagation();
				// #endif
				if (this.lujin == 0) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=0`
					})
				}
				if (this.lujin == 1) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=1`
					})
			
				}
				if (this.lujin == 2) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=2`
					})
				
				}
				if (this.lujin == 3) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=3`
					})
				
				}
				if (this.lujin == 4) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=4`
					})
				
				}
				if (this.lujin == 5) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=5`
					})
				
				}
				if (this.lujin == 6) {
					uni.redirectTo({
						// url:this.list[this.current.URL]
						url: `/page_salesman_order/index/index?index=6`
					})
				
				}
				
			},
			Status(){
				setTimeout(()=>{
					eventBus.$emit('record',{
						order_id:this.order,
						member_id:this.member,
						data:this.data.order_log,
						orderStatus:this.data.order_status_name
					})
				},500)
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url:`/page_salesman_order/Order_status/Order_status`
				})
			},
			Logistics(){
				console.log('物流');
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url:`/page_salesman_order/Delivery_logistics/Delivery_logistics?id=${this.data.member_id}&di=${this.data.order_id}`
				})
			},
			inventory(){
				setTimeout(()=>{
					uni.$emit('CommodityList',this.data)
				},500)
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url:'/page_salesman_index/Commodity_list/Commodity_list'
				})
			},
			btn(item) {
				// this.show=true
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url:'../Commodity_list/Commodity_list'
				})
			},
			Collection(){
				if(this.data.sales_balance==0){
					this.$util.showToast({
						title: '无收款记录'
					});
					return
				}
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url:`../Collection_record/Collection_record?id=${this.data.member_id}&di=${this.data.order_id}`
				})
			},
			zaici(){
				this.$util.showToast({
					title: '订购成功',
				});
			},
			quxiao(){
				this.$util.showToast({
					title: '取消成功',
				});
			},
			tongguo(){
				setTimeout(() => {
					uni.$emit('zaicidinggou', {
						one:this.data.order_goods,
						two:1
					})
				}, 500)
				uni.navigateTo({
					url: `/page_salesman_index/Select_item/Select_item?st=${this.data.member_id}&di=${this.data.store_id}`
				})
				// this.$util.showToast({
				// 	title: '订购成功',
				// });
			}
		},
		filters:{
			time(num){
				return timesfm(num*1000)
				
			}
		}
	}
</script>

<style lang="scss">
	.lan{
		color: #21BBF3;
	}
	.Special-rating{
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 24px;
		position: fixed;
		top: 240rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		padding-bottom: 32rpx;
		
	}
	.empty-fixed{
		margin-top: 0 !important;
	}
	.Special-rating div:nth-child(1){
		margin-top: 40rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
	}
	.Special-rating div:nth-child(2){
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 40rpx;
		margin-top: 30rpx;
		margin-left: 28rpx;
	}
	.Special-rating div:nth-child(3){
		margin-top: 24rpx;
		height: 70rpx;
		div:nth-child(1){
			
			height: 70rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgb(88, 88, 88);
			line-height: 40rpx;
			margin-left: 28rpx;
			
			span{
				color: #FF3030;
			}
		}
		div:nth-child(2){
			width: 438rpx;
			height: 70rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			position: relative;
			margin-left: 30rpx;
			margin-top: 0;
			input{
				width: 438rpx;
				height: 70rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
			}
			span{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
			}
		}
	}
	.Special-rating div:nth-child(4){
		height: 160rpx;
		margin-top: 24rpx;
		div:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 40rpx;
			margin-left: 28rpx;
			margin-right: -12rpx;
			margin-top: 0;
		}
		div:nth-child(2){
			width: 438rpx;
			height: 124rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			text-align: left;
			margin-top: 0;
		
		}
	}
	.Special-rating div:nth-child(5){
		width: 570rpx;
		height: 68rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 34rpx;
		margin: 0 auto;
		margin-top: 16rpx;
	}
	.Special-rating div:nth-child(6){
		margin-top: 44rpx;
		div:nth-child(1){
			margin: 0;
			width: 206rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #E8E8E8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin: 0 32rpx 0 94rpx;
		}
		div:nth-child(2){
			margin: 0;
			width: 206rpx;
			height: 72rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			
		}
	}
	
	.transportation{
		width: 540rpx;
		height: 448rpx;
		background: #FFFFFF;
		border-radius: 24px;
		position: fixed;
		top: 418rpx;
		left: 50%;
		transform: translateX(-50%);
		box-sizing: border-box;
		.definea{
			margin-top: 38rpx;
		}
		.definea div:nth-child(1){
			width: 206rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #E8E8E8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-top: 0;
			margin-left: 48rpx;
		}
		.definea div:nth-child(2){
			width: 206rpx;
			height: 72rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 0;
			margin-left: 32rpx;
			padding: 0;
		}
	}
	.transportation div:nth-child(1){
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
		text-align: center;
		margin-top: 40rpx;
	}
	.transportation div:nth-child(2){
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 40rpx;
		margin-top: 30rpx;
		padding-left: 38rpx;
		text:nth-child(2){
			margin-left: 16rpx;
		}
	}
	.transportation div:nth-child(3){
		div:nth-child(1){
			width: 112rpx;
			height: 40rpx;
			margin-left: 38rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 40rpx;
		}
		div:nth-child(2){
			width: 288rpx;
			height: 70rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			margin-left: 20rpx;
			position: relative;
			input{
				width: 288rpx;
				height: 70rpx;
				background: #F6F6F6;
				border-radius: 16rpx;
			}
			span{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 24rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}
		}
	}
	.fill-in{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #585858;
		line-height: 34rpx;
		margin: 20rpx 0 0 36rpx;
	}
	
	.nav{
		width: 750rpx;
		height: 100rpx;
		background: #F7F7F7;
		margin-top: 32rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		div{
			width: 192rpx;
			height: 72rpx;
			border-radius: 40rpx;
			border: 2rpx solid #E8E8E8;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}
	}
	.nav div:nth-child(3){
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		width: 192rpx;
		height: 72rpx;
		background: #21BBF3;
		border-radius: 40rpx;
	}
	.Order-details {
		padding: 24rpx;
		
		.Order-status {
			width: 702rpx;
			height: 270rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			.Order-head div:nth-child(1) {
				padding: 32rpx 0 28rpx 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 44rpx;
			}

			.Order-head div:nth-child(2) {
				padding: 32rpx 0;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF3B67;
				line-height: 40rpx;
			}

			.Order-thread {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 0 auto;
			}

			.Order-number {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				padding: 28rpx 0 0 32rpx;

				span {
					margin-left: 42rpx;

					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
			}

			.Order-time {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				padding: 24rpx 0 0 32rpx;
			}

			.Order-time span:nth-child(1) {
				margin-left: 42rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}


		}

		.connection {
			width: 702rpx;
			// height: 464rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 24rpx;
padding-bottom: 20rpx;
			box-sizing: border-box;
			.Shipping-telephona {
				margin-top: 16rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
			}

			.Shipping-telephone {
				padding: 28rpx 0 0 0;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;

				span {
					margin-left: 24rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}

			.Shipping-address div:nth-child(1) {
				width: 170rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
				padding: 28rpx 0 0 32rpx;

			}

			.connection-address {
				padding: 24rpx 0 0 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
				margin-bottom: 28rpx;
			}

			.connection-address span:nth-child(1) {
				margin-right: 40rpx;
			}

			.Good-doctor {
				padding: 32rpx 0 0 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}

			.line {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 0 auto;
			}

			.connection-Rearf {
				padding-top: 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
			}

			.connection-head {

				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 44rpx;
				padding: 32rpx;

				span {
					width: 92rpx;
					height: 36rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF7D02;
					line-height: 28rpx;
					background-color: rgb(255, 240, 226);
					margin-left: 16rpx;
				}
			}
		}

		.Commodity-list {
			width: 702rpx;
			height: 542rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;

			.transportation-expenses {
				margin-top: 32rpx;
				div {
					width: 174rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					border: 2rpx solid #E8E8E8;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 34rpx
					
				}
				image{
					width: 32rpx;
					height: 32rpx;
					
				}
			}

			.transportation-expenses div:nth-child(1) {
				margin-left: 274rpx;
				margin-right: 24rpx;
			}

			.Commodity-money {
				padding: 0 32rpx;

				.money {
					margin-top: 24rpx;

					.money-koude {
						color: red !important;
					}
				}

				.money div:nth-child(1) {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}

				.money div:nth-child(2) {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 40rpx;
				}
			}

			.dotted-line {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
				margin: 0 auto;
				margin-top: 28rpx;
				margin-bottom: 4rpx;
			}

			.Commodity-ten div:nth-child(1) {
				padding: 32rpx 0 0 32rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 44rpx;
			}

			.Commodity-ten div:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin-top: 32rpx;
			}
		}

		.Collection-record {
			width: 702rpx;
			// height: 700rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: 24rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.Delivery-method {
				padding: 28rpx 48rpx 28rpx 0;

			}
			.Delivery-methoda {
				padding: 28rpx 0rpx 28rpx 0;
			
			}
			

			.Delivery-method div:nth-child(1) {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 44rpx;
			}

			.Delivery-method div:nth-child(2) {

				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
			}
			.Delivery-methoda div:nth-child(1) {
				font-size: 30rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 44rpx;
			}
			
			.Delivery-methoda div:nth-child(2) {
			
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
			}

			.copper-coin {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				margin-top: 24rpx;
				margin-bottom: 28rpx;
			}

			.dotted-line {
				width: 638rpx;
				height: 2rpx;
				background: #F2F2F2;
				border-radius: 16rpx;
			}

			.Order-message {
				margin-top: 28rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}

			.Order-departure {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
				margin-bottom: 28rpx;
			}

			.Order-remarks {
				margin-top: 28rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;
			}

			.importance {
				margin-top: 24rpx;
				margin-bottom: 28rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 40rpx;
			}
		}
		.notification{
			width: 540rpx;
			height: 416rpx;
			background: #FFFFFF;
			position: fixed;
			top: 572rpx;
			left: 106rpx;
			right: 104rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			.define{
				border: 2rpx solid #E8E8E8;
				border-bottom: none;
				height: 96rpx;
				margin-top: 36rpx;
			}
			.define div:nth-child(1){
				border-left: none;
			}
			.define div:nth-child(2){
				color: #21BBF3;
				border-right: none;
			}
			.point-out{
				
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 44rpx;
				margin: 0 auto;
				text-align: center;
				margin: 40rpx 0 24rpx 0;
			}
			.Text-field{
				padding: 0;
				padding: 0 50rpx 0 46rpx;
			}
		}
	}
</style>
