purchase-let/pages/afterSales/afterSales.vue

<template>
	<view class="afterSales">
		<!-- 退款原因 -->
		<view class="afterSales-detail">
			<up-cell-group :border="false" class="cellGroup">
				<up-cell title="退款原因" :value="refundForm.refund_message?refundForm.refund_message:'请选择'"
					titleStyle="color:#444;font-size:30rpx;" isLink :required="true" @click="show = true"></up-cell>
				<!-- <up-cell title="退款件数" :border="false">
					<template #value>
						<up-number-box v-model="refundForm.refund_num"></up-number-box>
					</template>
				</up-cell> -->
			</up-cell-group>
		</view>

		<!-- 商品信息 -->
		<view class="afterSales-goods">
			<view class="afterSales-goods-wrap" v-for="(item,indx) in goodsList" :key="indx">
				<view class="afterSales-goods-left">
					<up-image width="140rpx" height="140rpx" radius="8rpx" :src="item.image" />
				</view>
				<view class="afterSales-goods-right">
					<view class="afterSales-goods-right-title">
						<text class="goods_name">{{item.store_name}}</text>
						<text class="goods_price">
							<text style='font-size: 24rpx;'>￥</text>
							<text style="font-size: 32rpx;">{{item.price}}</text>
						</text>
					</view>
					<view class="afterSales-goods-right-info">
						<text class="goods_desc">{{item.unit}}</text>
						<text class="goods_num">x5</text>
					</view>
				</view>
			</view>
			<!-- <view class="afterSales-return">
				<view class="afterSales-return-input">
					<text>申请退款金额</text>
					<up-input border="none" placeholder="最多可输入金额" fontSize="24rpx"
						:placeholderStyle="{color:'#ccc',fontSize:'24rpx'}"></up-input>
				</view>
				<view class="afterSales-return-edit">
					<view>
						<text style='font-size: 24rpx;'>￥</text>
						<text style="font-size: 32rpx;">0.00</text>
					</view>
					<up-icon name="edit-pen" size="26" color="#989898"></up-icon>
				</view>
			</view> -->
		</view>

		<!-- 备注 -->
		<view class="afterSales-remark">
			<view class="afterSales-remark-title">
				<view class="afterSales-remark-title-txt">备注说明</view>
				<view class="afterSales-remark-title-count"></view>
			</view>

			<view class="afterSales-remark-textarea">
				<up-textarea :count="true" v-model="refundForm.mark"></up-textarea>
			</view>

			<view class="afterSales-remark-title">
				<view class="afterSales-remark-title-txt">上传凭证</view>
			</view>

			<view class="afterSales-remark-img">
				<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></up-upload>
			</view>
		</view>

		<!-- btn -->
		<view class="afterSales-btn" @click="onSubmitApply">
			<view class="afterSales-btn-wrap">
				<text>提交申请</text>
			</view>
		</view>

		<!-- 退款原因 -->
		<up-popup :show="show" closeable round="10" @close="close">
			<view class="address-popup">
				<view class="head-title">退款原因</view>
				<scroll-view style="height: 600rpx;padding-bottom: 20rpx;" scroll-y>
					<block v-for="(item,index) in refundReasonList" :key="index">
						<view class="row" @click="refundType = item.value">
							<view class="content">
								<view class="top"></view>
								<view class="bottom u-line-2">{{item.value}}</view>
							</view>
							<image v-if="refundType==item.value" src="@/static/icon/check.png"></image>
							<image v-else src="@/static/icon/n-check.png"></image>
						</view>
					</block>
				</scroll-view>
				<up-button color="#20B128" shape="circle" @click="onSubmitReason">提交</up-button>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance
	} from "vue";
	import {
		orderListApi,
		refundReasonListApi,
		applyRefundApi
	} from "@/api/order.js";
	import {
		config
	} from "@/config/app.js"
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import useUserStore from '@/store/user';
	const userStore = useUserStore();
	const instance = getCurrentInstance().proxy;

	// 取消原因
	const show = ref(false);
	const refundType = ref('');
	const refundForm = reactive({
		refund_message: '', //退款原因
		refund_num: '', //退款数量
		id: '', //订单id
		old_cart_id: [], //购物车id
		refund_type: '', //0 仅退款 1 退款退货 2换货
		refund_reason_wap_img: '',
		mark: ''
	});
	const goodsList = ref([]);

	onLoad(() => {
		getRefundReasonData();

		// 上一个页面传递的售后参数
		const eventChannel = instance.getOpenerEventChannel();
		eventChannel.on('orderDetail', function(data) {
			console.log(data);
			refundForm.id = data.id;
			refundForm.old_cart_id = data.old_cart_id;
			refundForm.refund_type = data.refund_type;
			goodsList.value = data.goodsList;
		})
	});

	// 图片上传
	const fileList1 = ref([]);
	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

	// 新增图片
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: config.HTTP_REQUEST_URL + '/api/upload/image',
				filePath: url,
				name: 'file',
				header: {
					token: userStore.token
				},
				success: (res) => {
					setTimeout(() => {
						if (typeof res.data == 'string') {
							res.data = JSON.parse(res.data)
						}
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};

	// 退款原因
	const onSubmitReason = () => {
		show.value = false;
		refundForm.refund_message = refundType.value;
	}

	// 申请提交
	const onSubmitApply = () => {
		if (!refundForm.refund_message) return uni.$u.toast('请选择退款原因');
		let urls = [];
		//图片 refund_reason_wap_img
		if (fileList1.value.length > 0) {
			fileList1.value.map(i => {
				console.log(i.url.uri);
				urls.push(i.url.uri);
			});
			refundForm.refund_reason_wap_img = urls.join(',');
		}

		applyRefundApi(refundForm).then(res => {
			if (res.code == 1) {
				uni.$u.toast(res.msg);
				uni.$u.sleep(1500).then(res => {
					uni.navigateBack();
				})
			} else {
				uni.$u.toast(res.msg);
			}
		})
	}

	// 取消原因列表
	const refundReasonList = ref([]);
	const getRefundReasonData = () => {
		refundReasonListApi().then(res => {
			refundReasonList.value = res.data;
		})
	}
</script>

<style lang="scss" scoped>
	.afterSales {
		margin: 0 20rpx;
		padding: 20rpx 0 200rpx 0;

		.afterSales-detail {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 28rpx;

			::v-deep.u-cell__title-text {
				position: relative;

				&::after {
					content: "*";
					display: block;
					position: absolute;
					right: -14rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 28rpx;
					color: red;
				}
			}
		}

		.afterSales-goods {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 30rpx;

			.afterSales-goods-wrap {
				display: flex;
				margin-bottom: 30rpx;

				.afterSales-goods-left {
					margin-right: 20rpx;
				}

				.afterSales-goods-right {
					flex: 1;

					.afterSales-goods-right-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.goods_name {
							font-size: 28rpx;
							color: #333333;
						}

						.goods_price {
							font-weight: 600;
							font-size: 24rpx;
							color: #060606;
						}
					}

					.afterSales-goods-right-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						font-size: 24rpx;
						color: #777777;
					}
				}
			}

			.afterSales-return {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.afterSales-return-input {
					display: flex;
					align-items: center;
					line-height: 28rpx;

					text {
						font-size: 28rpx;
						color: #333333;
						margin-right: 8rpx;
					}
				}

				.afterSales-return-edit {
					display: flex;
					align-items: center;

					text {
						font-weight: 600;
						font-size: 24rpx;
						color: #060606;
					}

					.symbol {
						font-size: 24rpx;
					}

					.num {
						font-size: 32rpx;
					}
				}
			}
		}

		.afterSales-remark {
			padding: 30rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.afterSales-remark-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.afterSales-remark-title-txt {
					font-size: 28rpx;
					color: #444444;
				}

				.afterSales-remark-title-count {
					font-size: 28rpx;
					color: #989898;
				}
			}

			.afterSales-remark-textarea {
				margin-bottom: 30rpx;
			}

			.afterSales-remark-title {
				margin-bottom: 20rpx;
			}

			.afterSales-remark-img {
				display: flex;
				flex-wrap: wrap;

				.img-wrap {
					margin-bottom: 16rpx;

					&:not(:nth-child(4n)) {
						margin-right: 14rpx;
					}
				}

				.import {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 152rpx;
					height: 152rpx;
					background: #F9F9F9;
					border-radius: 16rpx;

					text {
						margin-top: 20rpx;
						font-size: 24rpx;
						color: #777777;
					}
				}
			}
		}

		.afterSales-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			background-color: #F6F6F6;
			height: 100rpx;
			line-height: 100rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			/* 兼容 iOS < 11.2 */
			padding-bottom: env(safe-area-inset-bottom);

			.afterSales-btn-wrap {
				width: 670rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient(132deg, #38BE41 0%, #20B128 100%);
				border-radius: 40rpx;
				margin: 0 auto;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.address-popup {
			padding: 30rpx;

			.head-title {
				font-weight: bold;
				text-align: center;
				margin-bottom: 20rpx;
			}

			.list-admin {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.admin-btn {
					display: flex;
					color: #20B128;

					.btn {
						margin-left: 20rpx;
						display: flex;
						align-items: center;

						&:active {
							color: rgba(#20B128, 0.8);
							transition: background-color 0.5s;
							animation: disappear 0.5s 0.5s forwards;
						}
					}
				}
			}

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f6f6f6;
				margin-bottom: 20rpx;

				&:last-child {
					border-bottom: none;
					margin-bottom: 0;
				}

				.content {
					.top {
						display: flex;

						view {
							margin-right: 20rpx;
						}
					}

					.bottom {}
				}

				image {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}

		@keyframes disappear {
			to {
				opacity: 0;
				/* 渐隐 */
				transform: scale(0);
				/* 缩小 */
			}
		}
	}
</style>