cxhxy/addons/foodhelp/uni_app/pages/order/delivery.vue

<template>
	<view>
		<view class="hm-p-20">
			<view class="hm-bg-f hm-p-lr-20 hm-br-10">
				<view class="hm-p-tb-20 hm-border-b">
					<u-radio-group v-model="data.company" placement="row" @change="radioChange()">
						<view class="hm-dis-block-inline">
							<u-radio activeColor="red" name="self" label="商家自配"></u-radio>
						</view>
						<view class="hm-dis-block-inline hm-m-l-20" v-for="(item, index) in company_list" :key="index">
							<u-radio activeColor="red" :name="item.name" :label="item.title"></u-radio>
						</view>
					</u-radio-group>
				</view>
				<view class="form-box" v-if="data.company=='self'">
					<view class="form-item" @click="clerkShow = true">
						<view class="title">配送员：<text class="hm-col-error">*</text></view>
						<view class="center">
							<u--input v-model="real_name" border="none" :disabled="true" disabledColor="#fff"
								:clearable="true" placeholder="请选择配送员"></u--input>
						</view>
						<view class="arrow-right">
							<u-icon name="arrow-right" color="#c0c4cc"></u-icon>
						</view>
					</view>
					<u-picker :show="clerkShow" :columns="clerk" keyName="real_name" title="选择配送员" @confirm="setClerk()"
						@cancel="clerkShow = false"></u-picker>
				</view>
				<view v-else>
					<view class="hm-p-20 hm-border-b">
						配送距离：<text class="hm-col-error">{{detail.delivery_distance?detail.delivery_distance:'--'}}</text>
					</view>
					<view class="hm-p-20 hm-border-b">
						预计时间：<text class="hm-col-error">{{detail.delivery_time?detail.delivery_time:'--'}}</text>
					</view>
					<view class="hm-p-20 hm-border-b">
						配送费用：<text class="hm-col-error">{{detail.delivery_price?detail.delivery_price:'--'}}</text>
					</view>
				</view>
				<view class="hm-m-t-50 hm-p-b-20 hm-p-lr-b25 hm-text-center">
					<u-button @click="delivery()" type="success" text="确认提交"></u-button>
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	let App = getApp();

	export default {
		data() {
			return {
				applet:{},
				order:{},
				clerk:[],
				company_list:{},//配送公司列表
				data:{
					order_id: '',
					company:'self',
					shop_clerk_id:'',
				},
				clerkShow: false,
				real_name:'',
				detail:{},//预发布订单详情
				
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(opt) {
			let _this = this;
			_this.data.order_id = opt.id;
			_this.applet = App.getApplet();
			_this.getOrder();
			_this.getClerk();
			_this.getCompany();
		},
		methods: {

			/**
			 * 确定配送
			 */
			delivery: function() {
				let _this = this,
				data = _this.data;
				if(data.company == 'self' && data.shop_clerk_id == ''){
					App.showError('请选择配送员');
					return false;
				}
				uni.showModal({
					title: "提示",
					content: "确定进行配送派单？",
					success: function(o) {
						if (o.confirm) {
							App._post_form('order/peisong', data, function(result) {
								App.showSuccess(result.msg, function() {
									uni.navigateBack();
								});
							});
						}
					}
				});
			},
			
			/**
			 * 配送方式
			 */
			radioChange: function(e) {
				let _this = this;
				if(e == 'self'){
					return true;
				}
				App._get('order/preOrder', {
					company: e,
					order_id: _this.data.order_id
				}, function(result) {
					_this.detail = result.data.detail;
				});
			},
			/**
			 * 设置配送员
			 */
			setClerk: function(e) {
				let _this = this;
				_this.clerkShow = false;
				_this.real_name = e.value[0].real_name;
				_this.data.shop_clerk_id = e.value[0].shop_clerk_id;
				return true;
			},
			/**
			 * 获取配送公司列表
			 */
			getCompany: function() {
				let _this = this;
				App._get('order/company', {}, function(result) {
					_this.company_list = result.data.company;
				});
			},
			
			/**
			 * 获取订单详情
			 */
			getOrder: function() {
				let _this = this;
				App._get('order/detail', {
					order_id: _this.data.order_id
				}, function(result) {
					_this.order = result.data.order;
				});
			},
			
			/**
			 * 获取店员列表
			 */
			getClerk: function() {
				let _this = this;
				App._get('user.clerk/lists', {}, function(result) {
					_this.clerk[0] = result.data.list.data;
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	
	.form-box {
		background-color: #FFF;
		padding: 0 0 20rpx 0;
		.form-item {
			border-bottom: 1rpx solid #f0f0f0;
			.input{
				padding: 15rpx;
				background-color: #ff0000;
			}
			.title {
				font-size: 30rpx;
				width: 23%;
				display: inline-block;
			}
			.right {
				width: 77%;
				display: inline-block;
				.radio{
					margin-left: 15rpx;
					padding: 20rpx 0rpx;
				}
			}
			.image {
				display: inline-block;
				padding: 20rpx 20rpx 10rpx 15rpx;
			}
			.upload {
				height: 105rpx;
				width: 105rpx;
				background-color: #F2F2F2;
				padding: 45rpx 0rpx 0rpx 45rpx;
				border-radius: 10rpx;
			}
			.logo{
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
			.start-time {
				display: inline-block;
				width: 33%;
			}
			.end-time {
				display: inline-block;
				width: 33%;
			}
			.time {
				display: inline-block;
				padding: 0rpx 20rpx;
			}
			.center {
				display: inline-block;
				width: 64%;
			}
			.arrow-right {
				display: inline-block;
				float: right;
				margin-top: 22rpx;
			}
		}
	}
</style>