vist_go_uniApp/pages/order/history-after.vue

<template>
	<view class="bg">
		<view v-if="orderList.length>0">
			<view v-for="(item,index) in orderList" :key="index">
				<view class="info-region">
					<view>
						<view class="flex-items flex-sp-between mar-b-20 mar-lr-12">
							<view>
								订单号:{{item.orderCode}}
							</view>

						</view>
						<view class="flex">
							<view>
								<image class=" mar-l-20 img" :src="item.productImg" mode="aspectFit"></image>
							</view>
							<view class="mar-l-20 mar-r-20">
								<view class="font32 pad-b-10 ">
									{{item.productName}}
								</view>
								<view class="pad-t-20 font-gray">
									规格: {{item.skuName}}
								</view>
								<view class="pad-t-10 font-gray">
									退货类型:
									{{item.type==1?'退货退款':'仅退款'}}
								</view>
								<view class="pad-t-10 font-gray">
									退货原因:{{reasonRange[item.reason].text}}
								</view>
							</view>
						</view>


						<text class="flex-end font-red font28 font-bold mar-r-10">
							退款金额 ￥{{item.afterPrice}}
						</text>
					</view>


					<!-- 售后中状态 -->
					<view class=" flex-items flex-end mar-t-20 mar-r-10">
						<view class="cancelBtn" @click="checkAfterSaleStatus(item)">
							查看详情
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="flex-items-plus">
				<image src="../../static/images/empty.png" class="empty "></image>
			</view>
			<view class="font28 font-gray flex-items-plus">
				数据为空
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAfterList
	} from '../../config/api.js';

	export default {
		components: {},
		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: "其他原因"
					},
				],
				current: 0,
				orderId: "",
				orderList: [],
				params: {
					current: 1,
					size: 10,
					status: "",
					isAfter: "",
					type: "",
					orderId: ""

				}
			};
		},
		onLoad(op) {
			this.params.orderId = op.orderId
			this.getList();

		},
		onPullDownRefresh() {
			this.orderList = [];
			this.params.current = 1;
			this.getList();
			uni.stopPullDownRefresh();
		},
		methods: {
			goDetail(item) {
				this.$route('/pages/order/detail?id=' + item.id);
			},
			checkAfterSaleStatus(item) {
				// 实现查看售后进度逻辑
				this.$route('/pages/order/after-progress?id=' + item.id + "&historyDetail=1");
			},
			// 订单列表
			getList() {
				getAfterList(this.params).then((res) => {
					this.orderList = res.data.records;
				});
			},
		}
	};
</script>

<style lang="scss">
	.bg {
		min-height: 100vh;
		padding-bottom: 20rpx;
		// background: linear-gradient(135deg, #f8ffee 0%, #fffff6 100%);
	}

	.info-region {
		/* 阴影效果 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;
		width: 720rpx;
		height: auto;
		padding: 15rpx;
		background-color: white;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		margin-left: 15rpx;
	}

	.img {
		border-radius: 20rpx;
		width: 200rpx;
		height: 200rpx;
	}

	.daifahuo {
		color: #ffffff;
		background-color: #e2c696;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.fukuan {
		color: #ffffff;
		background-color: #e29c6d;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.shouhuo {
		color: #ffffff;
		background-color: #e2d972;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.wancheng {
		color: #ffffff;
		background-color: #83e25a;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.pingjia {
		color: #ffffff;
		background-color: #e0e2d9;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.shouhou {
		color: #ffffff;
		background-color: #e23e3e;
		padding: 4rpx 10rpx 4rpx 10rpx;
		border-radius: 20rpx;
	}

	.buyBtn {
		font-size: 30rpx;
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 36rpx;
		color: #fff;
		background: #E2A28A;
	}

	.cancelBtn {
		font-size: 30rpx;
		width: 160rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		border-radius: 36rpx;
		color: #6a6a6a;
		background: #e2e2e2;
	}

	.custom-easyinput {
		border: none;
		/* 取消边框 */
		outline: none;
		/* 取消聚焦时的轮廓线 */
	}
</style>