H5_QiCaiYao/page_salesman_order/Delivery_logistics/Delivery_logistics.vue

<template>
	<view class="">
		<!-- 出库/发货/物流记录 -->
		<div class="df aic jcsb head">
			<div>待出库商品</div>
			<div class=" head-time df aic" @click="btn">
				<div>100种</div>
				<div>
					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
		</div>
		<div class="Shipment-No" v-for="(item,index) in 2" :key="index">
			<div class="df jcsb">
				<div>发货编号<span>20220901-0001</span></div>
				<div class="df"><span>待发货</span>
					<u-icon name="arrow-right" color="rgb(199, 199, 199)"></u-icon>
				</div>
				
			</div>
			<div>
				商品数量<span>2种</span>
			</div>
			<div>出库时间<span>2021-09-12 18:20:21</span></div>
			<div class="df">
				<div class="df aic jcsa" @click="show=true">取消出库</div>
				<div class="df aic jcsa" @click="Shipping">填写发货信息</div>
			</div>
		</div>
		<u-overlay :show="show" @click="show = false">
			<div class="Cancel-issue">
				
					
						<div>取消出库</div>
						<div>
							<u-textarea :placeholderStyle="{
							width: '444px',
							height: '172px',
							background: '#F6F6F6',
							borderRadius: '8px',
							
						}" v-model="value2" maxlength=100 placeholder="请输入内容" count></u-textarea>
						</div>
						<div class="df">
							<div class="f1 df aic jcsa">取消</div>
							<div class="f1 df aic jcsa">确认</div>
						</div>
					
				
			</div>
			
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				value2:'',
				member_id:'',
				order_id:''
			};
		}, //Delivery_record
		onLoad(e) {
			console.log(e,'eee');
			this.member_id=e.id
			this.order_id=e.di
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/salasmanorder/getOrderGoodsOutlogList',
				data:{
					order_id:this.order_id,
					member_id:this.member_id
				},
				success:res=>{
					console.log(res.data.list,'出库记录');
				}
			})
		},
		
		methods: {
			btn() {
				uni.navigateTo({
					// url:this.list[this.current.URL]
					url: '../Delivery_record/Delivery_record'
				})
			},
			Shipping(){
					
					uni.navigateTo({
						// url:this.list[this.current.URL]
						url: '../Shipping-Information/Shipping-Information'
					})
			}
		}
	}
</script>

<style lang="scss">
	.head {
		width: 702rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx;
		padding: 0 8rpx 0 20rpx;
		box-sizing: border-box;

		.head-time div:nth-child(1) {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 44rpx;
		}

		.head-time div:nth-child(2) {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #585858;
			line-height: 44rpx;
		}
	}

	.Shipment-No {
		margin: 24rpx;
		width: 702rpx;
		height: 324rpx;
		background: #FFFFFF;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.Shipment-No div:nth-child(1) {
		
		border-radius: 24rpx;
		div:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 40rpx;
			margin-top: 24rpx;
			span{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-left: 42rpx;
			}
		}
		div:nth-child(2){
			margin-top: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
			line-height: 40rpx;
			span{
				margin-right: 4rpx;
			}
		}
	}
	.Shipment-No div:nth-child(2){
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-top: 32rpx;
		span{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-left: 42rpx;
		}
	}
	.Shipment-No div:nth-child(3){
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
		margin-top: 24rpx;
		span{
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-left: 42rpx;
		}
	}
	.Shipment-No div:nth-child(4){
		margin-top: 32rpx;
		
		div:nth-child(1){
			width: 176rpx;
			height: 60rpx;
			border-radius: 30rpx;
			border: 2rpx solid #E8E8E8;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 34rpx;
			margin-left: 262rpx;
			margin-right: 40rpx;
		}
		div:nth-child(2){
			width: 176rpx;
			height: 60rpx;
			background: #21BBF3;
			border-radius: 30rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 34rpx;
			margin-top: 0;
		}
	}
	.Cancel-issue{
		width: 540rpx;
		height: 416rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: fixed;
		top: 572rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.Cancel-issue div:nth-child(1) {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #222222;
		line-height: 44rpx;
		margin-top: 40rpx;
		text-align: center;
	}
	.Cancel-issue div:nth-child(2) {
		width: 444rpx;
		height: 172rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-top: 32rpx;
	}
	.Cancel-issue div:nth-child(3) {
		width: 540rpx;
		height: 96rpx;
		background: #FFFFFF;
		margin-top: 36rpx;
		div:nth-child(1){
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 44rpx;
			margin: 0;
		}
		div:nth-child(2){
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #21BBF3;
		line-height: 44rpx;
		height: 96rpx;
		margin: 0;
		}
	}
	
	
	
</style>