yunshengtai-uniapp/pages/user/sendGoods/index.vue

<template>
	<view class="send-goods-box">
		<view class="code-box">
			<view class="title">扫码或输入运单号</view>
			<view class="inp-box">
				<view class="acea-row row-middle box">
					<image src="../../../static/images/sao.png" @click="scanCode"></image>
					<input type="text" placeholder="请输入运单号" v-model="deliveryId">
				</view>
			</view>
		</view>
		<view class="chose-express acea-row row-between-wrapper">
			<view>选择快递公司</view>
			<picker mode="selector" :range="expressList" range-key="name" :value="idx" @change="bindPickerChange">
				<view>{{expressList[idx].name}}</view>
			</picker>
		</view>
		<view class="add-btn" @click="delivery">提交</view>
	</view>
</template>

<script>
	import { delivery, getExpress } from '@/api/store'
	export default{
		data(){
			return {
				orderId: '',
				idx: 0,
				expressList: [{name: '请选择'}],
				deliveryId: '',
				deliveryName: '',
				deliveryType:'',
			}
		},
		onLoad() {
			this.orderId = this.$yroute.query.orderId || 0
			this.getExpress()
		},
		methods:{
			getExpress(){
				getExpress().then((res)=>{
					if(res.success){
						this.expressList = res.data
						this.deliveryName = res.data[0].code
					}
				})
			},
			bindPickerChange(e){
				let idx = Number(e.detail.value)
				this.idx = idx
				this.deliveryName = this.expressList[idx].name
				this.deliveryType = '快递'
			},
			scanCode(){
				let that = this;
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						that.deliveryId = res.result
						console.log('条码内容：' + res.result);
					}
				});
			},
			delivery(){
				if(this.deliveryId == ''){
					return this.alertMessage('请输入快递单号')
				} else if(this.deliveryName == ''){
					return this.alertMessage('请输入快递公司')
				}
				let data = {
					deliveryId: this.deliveryId,
					deliveryName: this.deliveryName,
					deliveryType: this.deliveryType,
					orderId: this.orderId
				}
				uni.showModal({
					title: '提示',
					content: '是否确认发货？',
					success: (result) => {
						if(result.confirm){
							delivery(data).then((res)=>{
								if(res.success){
									uni.showToast({
										title: '发货成功！'
									})
									setTimeout(()=>{
										uni.navigateBack({
											delta: 1
										})
									},1500)
									
								}
							})
						}
					}
				})
				
			},
			alertMessage(msg){
				uni.showToast({
					title: msg,
					icon: none
				})
			}
		}
	}
</script>

<style lang="less">
	.send-goods-box{
		width: 100%;
		height: 100vh;
		background: #eee;
		padding: 32rpx 40rpx;
		.code-box{
			width: 100%;
			background: #fff;
			font-size: 32rpx;
			color: #1D1D1D;
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			.title{
				width: 100%;
				padding: 24rpx 0 10rpx 40rpx;
				border-bottom: 2rpx solid #EFEFEF;
			}
			.inp-box{
				width: 100%;
				padding: 32rpx 40rpx;
				.box{
					width: 100%;
					border-radius: 8rpx;
					background: #f5f5f5;
					padding: 8rpx 20rpx;
					image{
						width: 35rpx;
						height: 35rpx;
						margin-right: 12rpx;
					}
					input{
						width: calc(100% - 55rpx);
						font-size: 28rpx;
					}
				}
			}
		}
		.chose-express{
			width: 100%;
			height: 92rpx;
			background: #fff;
			font-size: 32rpx;
			color: #1D1D1D;
			border-radius: 8rpx;
			padding: 0 24rpx;
		}
		.add-btn{
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
			border-radius: 40rpx;
			margin-top: 110rpx;
		}
	}
</style>