book-hi/pages-car/pages/fill-logistics.vue

<template>
	<view class="fill-logistics-page">
		<!-- 表单区域 -->
		<view class="form-card">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="物流单号" prop="expressNumber">
					<u-input v-model="form.expressNumber" placeholder="请填写" />
					<u-icon slot="right" name="scan" size="40" color="#999" @click="scanCode"></u-icon>
				</u-form-item>

				<u-form-item label="物流公司" prop="expressName" right-icon="arrow-right">
					<u-input v-model="form.expressName" type="select" placeholder="请选择"
						@click="showExpressSelect = true" />
				</u-form-item>

				<u-form-item label="联系电话" prop="mobile" :border-bottom="false">
					<u-input v-model="form.mobile" type="number" placeholder="请填写" />
				</u-form-item>
			</u-form>
		</view>

		<!-- 补充描述和凭证 -->
		<view class="upload-card">
			<view class="card-title">补充描述和凭证</view>
			<view class="upload-box">
				<u-input v-model="desc" type="textarea" placeholder="有助于平台更好的处理售后问题" :maxlength="200" height="150"
					:clearable="false" class="textarea" />
				<view class="word-count">{{ desc.length }}/200</view>

				<view class="image-upload-wrapper">
					<CommonImageUpload v-model="form.urlList" :max-count="5" code="shopRefund" />
				</view>
			</view>
		</view>

		<!-- 底部提交按钮 -->
		<view class="bottom-bar">
			<u-button type="success" shape="circle" :custom-style="submitBtnStyle" @click="submit">提交</u-button>
		</view>

		<!-- 物流公司选择器 -->
		<u-select v-model="showExpressSelect" :list="expressList" value-name="dictValue" label-name="dictLabel"
			@confirm="onExpressConfirm"></u-select>
	</view>
</template>

<script>
	import CommonImageUpload from '@/components/image-upload.vue';

	export default {
		components: {
			CommonImageUpload
		},
		data() {
			return {
				refundOrderId: '',
				desc: '', // 备注描述暂时不传接口，UI里有
				form: {
					refundOrderId: '',
					expressType: 3, // 3-自行寄回
					expressNumber: '',
					expressName: '',
					mobile: '',
					urlList: []
				},
				showExpressSelect: false,
				expressList: [],
				submitBtnStyle: {
					backgroundColor: '#38C148',
					color: '#fff',
					height: '80rpx',
					fontSize: '32rpx',
					width: '100%'
				},
				rules: {
					expressNumber: [{
						required: true,
						message: '请输入物流单号',
						trigger: ['blur', 'change']
					}],
					expressName: [{
						required: true,
						message: '请选择物流公司',
						trigger: ['blur', 'change']
					}],
					mobile: [{
						required: true,
						message: '请输入联系电话',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur', 'change']
					}]
				}
			};
		},
		onLoad(options) {
			if (options.refundOrderId) {
				this.refundOrderId = options.refundOrderId;
				this.form.refundOrderId = options.refundOrderId;
			}
			this.getExpressOptions();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getExpressOptions() {
				uni.$u.http.get('/token/common/getDictOptions?type=shop_order_refund_express_name').then(res => {
					if (res.code === 200) {
						this.expressList = res.data || [];
					}
				});
			},
			onExpressConfirm(e) {
				this.form.expressName = e[0].label;
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {
						this.form.expressNumber = res.result;
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({ title: '提交中' });

						// 如果需要将 desc 拼接到某个字段，可以这里处理
						// 接口文档没写 desc 字段，暂时忽略或拼到别处。

						this.$u.api.refundFillExpressAjax(this.form).then(res => {
							uni.hideLoading();
							if (res.code == 200) {
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								});
								setTimeout(() => {
									uni.navigateBack({ delta: 1 });
								}, 1500);
							} else {
								uni.showToast({
									title: res.msg || '提交失败',
									icon: 'none'
								});
							}
						}).catch(() => {
							uni.hideLoading();
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fill-logistics-page {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding: 20rpx;
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));

		.form-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
		}

		.upload-card {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 30rpx;

			.card-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}

			.upload-box {
				background-color: #F8F8F8;
				border-radius: 12rpx;
				padding: 20rpx;
				position: relative;

				.textarea {
					font-size: 28rpx;
				}

				.word-count {
					text-align: right;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 20rpx;
				}

				.image-upload-wrapper {
					margin-top: 20rpx;
				}
			}
		}

		.bottom-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			padding: 20rpx 40rpx;
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			z-index: 100;
		}
	}
</style>