book-hi/pages-mall/pages/after-sales/components/setExpress.vue

<template>
	<view class="express">
		<!-- <u-input v-model="expressCode" type="text" :border="true" placeholder="请填写退货快递单号" />
		<u-button type="primary" @click="expressCodeConfirm()">确认</u-button> -->
		<view class="address">
			<view class="title">
				退货地址：
			</view>
			<u-parse :html="expressInfo.company_address"></u-parse>
		</view>
		<view class="frombox">
			<u-alert-tips type="warning" :title="'请填写正确的退货包裹运单信息'" ></u-alert-tips>
			<u-form :model="model" ref="uForm" :rules="rules" label-width="160rpx"  :errorType="errorType">
				<u-form-item label="运单号" prop="express_no">
					<u-input v-model="model.express_no" />
				</u-form-item>
				<u-form-item label="物流公司" prop="express_name">
					<u-input v-model="model.express_name" type="select"  :select-open="expressShow"  @click="expressShow = true" />
				</u-form-item>
				
			</u-form>
			<view style="margin-top: 30rpx;">
				<u-button type="primary" @click="submit">确认</u-button>
			</view>
		</view>
		<u-select mode="single-column" :list="expressList" v-model="expressShow" value-name="code" label-name="name" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	export default {
		props:{
			refundId:{
				type:String||Number,
				default:null
			}
		},
		data() {
			return {
				address:'孙先生  18836586985 \r\n 和湖南那是大佛阿斯加德菲拉斯对接客服拉圣诞节快乐',
				expressShow:false,
				selExpress:{},
				expressList:[{
					code:'yunda',
					name:'韵达'
				}],
				model:{
					express_no:'',
					express_name:'',
				},
				rules: {
					express_no: [
						{
							required: true,
							message: '请输入运单号',
							trigger: ['blur', 'change']
						}
					],
					express_name: [
						{
							required: true,
							message: '请选择物流公司',
							trigger: ['blur', 'change']
						}
					]
				},
				errorType:['message']
			}
		},
		
		computed: {
			// 运费模板
			expressInfo() {
				return this.$store.state.pub.baseConfig;
			},
		},
		mounted() {
			this.getExpressList();
			if(!this.$store.state.pub.baseConfig.company_address){
				this.getExpressInfo();
			}
		},
		methods: {
			
			// 获取运费模板信息
			getExpressInfo(){
				this.$u.api.getBaseInfoAjax().then(({data})=>{
					this.$store.commit('pub/commitBaseConfig',data);
				}).catch(()=>{
					
				})
			},
			// 选择商品类型回调
			selectConfirm(e) {
				console.log(e);
				this.selExpress = e[0];
				console.log(this.selExpress);
				this.model.express_name = this.selExpress.label;
				// this.model.goodsType = '';
				// e.map((val, index) => {
				// 	this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
				// })
			},
			getExpressList(){
				this.$u.api.getExpressListAjax().then(({code,data})=>{
					// console.log(code,data);
					if(code==1){
						this.expressList = data;
					}
					
				})
			},
			expressCodeConfirm(){
				if(!this.model.express_no){
					this.$u.toast('请输入物流单号')
					return;
				}
				if(!this.selExpress.value){
					this.$u.toast('请选择物流公司')
					return;
				}
				/* console.log({
					express_code:this.selExpress.value,
					express_no:this.model.express_no,
					refund_id:this.refundId,
				})
				return; */
				this.$u.api.setExpressCodeAjax({
					express_code:this.selExpress.value,
					express_no:this.model.express_no,
					refund_id:this.refundId,
				}).then(({code,data})=>{
					if(code==1){
						this.$emit('done')
					}
					
				})
				
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.expressCodeConfirm();
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address{
		background-color: #fff;
		padding: 0 30rpx 30rpx;
		margin-bottom: 20rpx;
		.title{
			padding: 20rpx 0;
			margin-bottom: 30rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.frombox{
		background-color: #fff;
		padding: 30rpx;
	}
.express{
	
}
</style>