jiuyiUniapp/jiuyi2/pages/shop/order/afterSales.vue

<script setup>
	// 售后详情
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onPageScroll,
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util';
	// 
	import api from '@/api/index.js'

	// 订单id
	const orderId = ref('')
	// 订单详情
	const detail = reactive({})

	// 流程
	const flow = computed(() => {
		let result = []
		if (detail.id) result.push({
			time: detail.dealTime,
			name: '同意退款',
		}, {
			time: detail.dealTime,
			name: '平台处理中',
		}, {
			time: detail.refundTime,
			name: '到账成功',
		})
		return result
	})

	onLoad((option) => {
		if (option.orderId) orderId.value = option.orderId
		// 获取详情
		getDetail()
	})

	// 获取详情
	function getDetail() {
		api.shop.getRefundOrder({
			query: {
				orderId: orderId.value,
			}
		}).then(rs => {
			if (rs.code == 200) {
				const result = rs.data
				result.payment = util.config.payType[result.refundType]
				Object.assign(detail, result)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false
			})
		})
	}

	// 复制文本
	function handleCopy() {
		util.copyText(detail.orderNo)
	}
</script>

<template>
	<view class="app">
		<view class="container">
			<!-- 退款状态 -->
			<view class="statusText mtb30 f48">退款成功</view>
			<!-- 退款金额 -->
			<view class="result mtb30">
				<view class="refundPrice ">
					<text class="f48">￥</text>
					<text class="value">{{detail.refundPrice}}</text>
				</view>
				<view class="c37B111">已退回至九亿钱包</view>
			</view>

			<!-- 退款流程 -->
			<view class="flow mtb30">
				<view class="item f1" v-for="(item,index) in flow" :key="index">
					<view class="side">
						<view class="line"></view>
						<view class="circle mlr10 cir">
							<view class="wh24 fmid" v-if="index == flow.length - 1">
								<uni-icons type="checkmarkempty" color="#fff" />
							</view>
						</view>
						<view class="line"></view>
					</view>
					<view class="main mt20 tac c999 f26">
						<view class="name">{{item.name}}</view>
						<view class="time mt10">{{item.time}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退款金额 -->
		<view class="container info c999 f28" v-if="detail.id">
			<view class="title mtb20 c333 f32">钱款去向</view>
			<view class="line rows mtb20">
				<view class="key">九亿账号</view>
				<view class="">{{detail.refundAccount}}</view>
			</view>
			<view class="line rows mtb20">
				<view class="key">支付方式</view>
				<view class="">{{detail.payment.name}}</view>
			</view>
			<view class="line rows mtb20">
				<view class="key">退款账户</view>
				<view class="">{{detail.refundAccount}}</view>
			</view>
		</view>

		<view class="product container">
			<view class="header line rows ptb20 f28">
				<!-- 店铺 -->
				<view class="store df aic thd f1">
					<image class="wh50 br10" :src="detail.merchantAvatar" mode="aspectFill" />
					<view class="name ml10 c333">{{detail.merchantName}}</view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="product line df ptb20" v-if="detail.productInf">
				<view class="poster wh160">
					<image class="wh160 br10" :src="detail.productInfo.sliderImage.split(',')[0]" mode="aspectFill" />
				</view>

				<!-- 产品名称 和 购买的规格 -->
				<view class="info mlr20 f1">
					<view class="name c333 f28">{{detail.productInfo.name}}</view>
					<view class="spec mt10 c999 f26">款式：{{detail.style}}</view>
				</view>

				<!-- 单价 数量 -->
				<view class="tar">
					<view class="price c666">
						<text class="f20">￥</text>
						<text class="f26">{{detail.productInfo.price}}</text>
					</view>
					<view class="number f24 c999">x {{detail.totalNum}}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="order mt30 f26 c999">
				<view class="line mtb20 rows">
					<text>订单编号：{{detail.orderNo}}</text>
					<view class="btn ti closeHollow plr20" @click="handleCopy">复制</view>
				</view>
				<view class="line mtb20">
					<text>申请金额：￥{{detail.refundPrice}}</text>
				</view>
				<view class="line mtb20">
					<text>退款原因：{{detail.refundReasonWap}}</text>
				</view>
				<!-- <view class="line mtb20">
					<text>收货状态：已收货</text>
				</view> -->
				<view class="line mtb20">
					<text>申请时间：{{detail.createTime}}</text>
				</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 150rpx;"></view>

		<!--  -->
		<view class="footer df jcr plr30 bfff shadow" v-if="0">
			<view class="btn sm bar closeHollow plr20">联系商家</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.container {
		overflow: hidden;
		margin: 20rpx 0;
		padding-left: 20rpx;
		padding-right: 20rpx;
		color: #333;
		background-color: #fff;
	}

	// 
	.refundPrice {
		.value {
			font-size: 72rpx;
		}
	}

	// 退款流程
	.flow {
		display: flex;
		justify-content: center;

		.item {
			.side {
				display: flex;
				align-items: center;
				height: 40rpx;

				.line {
					flex: 1;
					border-top: 4rpx solid #37B111;
				}

				.circle {
					padding: 10rpx;
					background-color: #37B111;
				}
			}

			// 
			&:nth-child(1) .line:nth-child(1) {
				opacity: 0;
			}

			// 
			&:nth-last-child(1) .line:nth-last-child(1) {
				opacity: 0;
			}
		}
	}
</style>