vist_go_uniApp/pages/order/after.vue

<template>
	<view>
		<CustomToast ref="customToast" />
		<!-- 页面标题 -->
		<view class="flex-items region mar-t-10">
			<view>
				<image class=" mar-l-20 productImg" :src="order.images" mode="cover"></image>
			</view>
			<view class="mar-l-20 mar-r-20">
				<view class="font28 pad-b-10 ">
					{{order.productName}}
				</view>
				<view class="pad-tb-16 font-gray">
					<text>
						规格: {{order.skuName}}
					</text>
					<text class="mar-l-20">
						x{{order.count}}
					</text>
				</view>

				<view class="mar-r-16">
				</view>
			</view>
		</view>
		<view class="region1">
			<uni-forms class="pad-16" ref="customForm" :rules="customRules" labelWidth="80px" :modelValue="after">
				<uni-forms-item label="申请类型" required name="type">
					<uni-data-select v-model="after.type" placeholder="请选择申请类型" :localdata="typeRange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="申请原因" required name="reason">
					<uni-data-select v-model="after.reason" placeholder="请选择申请原因" :localdata="reasonRange">
					</uni-data-select>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="region pad-16">
			<view class="flex-items-between">
				<view>
					退货数量(本次可申请{{order.count}}件)
				</view>
				<view>
					<uni-number-box v-model="after.count" :min="1" :max="order.count" />
				</view>
			</view>
			<view class="flex-items-between mar-t-20">
				<view>
					退款金额
				</view>
				<view>
					<text class=" font-red font32 font-bold">
						￥{{order.unitPrice*after.count}}
					</text>
				</view>
			</view>
		</view>
		<!-- 表单区域 -->
		<view class="form-container region">
			<!-- 申请说明 -->
			<view class="form-item">
				<view class="form-label">申请说明</view>
				<view class="textarea-container">
					<textarea style="width: 100%;" v-model="after.remark" placeholder="请详细描述申请说明(选填)"
						class="form-textarea" :maxlength="maxLength"></textarea>
					<view class="char-count">
						您还可以输入{{ remainingChars }} 字
					</view>
				</view>
			</view>

			<!-- 上传凭证 -->
			<view class="form-item">
				<view class="form-label">上传凭证（可选）</view>
				<view class="upload-container">
					<uni-file-picker @delete="delFile" v-model="imageValue" fileMediatype="image" mode="grid"
						@select="select" />
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<button class="submit-button" @click="submitForm('customForm')">提交申请</button>
	</view>
</template>

<script>
	import CustomToast from '../../components/CustomToast.vue';

	import {
		UPLOAD_URL
	} from '../../common/config.js';
	import {
		orderDetail,
		submitOrderAfter
	} from '../../config/api.js';

	export default {
		components: {
			CustomToast,
		},
		data() {
			return {
				typeRange: [{
						value: 1,
						text: "退货退款"
					},
					{
						value: 2,
						text: "仅退款"
					},
				],
				reasonRange: [{
						value: 1,
						text: "不喜欢,效果不好"
					},
					{
						value: 2,
						text: "不想要了"
					},
					{
						value: 3,
						text: "材质与商品描述不符"
					},
					{
						value: 4,
						text: "大小尺寸与商品描述不符"
					},
					{
						value: 5,
						text: "安装质量问题"
					},
					{
						value: 6,
						text: "做工瑕疵"
					},
					{
						value: 7,
						text: "颜色、款式、图案与描述不符"
					},
					{
						value: 8,
						text: "商品破损或污渍"
					},
					{
						value: 9,
						text: "其他原因"
					},
				],
				after: {
					imgList: [],
					reason: '',
					remark: "",
					count: 1
				},
				customRules: {
					type: {
						rules: [{
							required: true,
							errorMessage: '请选择申请类型'
						}]
					},
					reason: {
						rules: [{
							required: true,
							errorMessage: '请选择申请原因'
						}]
					},
				},
				token: '',
				imageValue: [],
				fileList: [],
				orderNumber: '',
				reason: '',
				images: [],
				contactName: '',
				contactPhone: '',
				orderId: "",
				order: {},
				maxLength: 200, // 最大字数
			};
		},
		computed: {
			// 计算剩余字数
			remainingChars() {
				return this.maxLength - this.after.remark.length;
			}
		},
		onLoad(op) {
			this.orderId = op.id;
			this.getOrderDetail();
			this.token = uni.getStorageSync('access_token');
		},
		methods: {
			delFile(e) {
				this.after.imgList.splice(e.index, 1); // 删除对应 index 的附件
			},
			getOrderDetail() {
				orderDetail({
					id: this.orderId
				}).then((res) => {
					this.order = res.data;
				});
			},
			// 获取选择的文件
			async select(e) {
				let list = [].concat(e.tempFiles);
				for (let i = 0; i < list.length; i++) {
					const result = await this.uploadFilePromise(list[i].url);
					this.after.imgList.push(result.data.link);
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: UPLOAD_URL,
						filePath: url,
						header: {
							"Blade-Auth": this.token
						},
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data));
						}
					});
				});
			},
			// 提交表单
			submitForm(ref) {
				this.$refs[ref].validate().then(res => {
					this.after.images = this.after.imgList.join(',');
					this.after.orderId = this.orderId
					submitOrderAfter(this.after).then((res) => {
						if (res.code == 200) {
							this.$refs.customToast.showToast('申请提交成功');
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}


					})
				})

			}
		}
	}
</script>

<style scoped>
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		padding: 20rpx 0;
		color: #333;
	}

	.form-container {
		padding: 20rpx;
	}

	.form-item {

		margin-bottom: 20rpx;
	}

	.form-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.textarea-container {
		position: relative;
	}

	.form-textarea {
		border: 1px solid #ccc;
		border-radius: 5rpx;
		padding: 10rpx;
		font-size: 28rpx;
		height: 150rpx;
		resize: none;
	}

	.char-count {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.upload-container {
		margin-top: 10rpx;
	}

	.submit-button {
		background-color: #F95B5B;
		color: #fff;
		font-size: 32rpx;
		padding: 5rpx;
		border-radius: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		text-align: center;
		margin-top: 30rpx;
	}
</style>