TakeOutShop/order/assDetail/assDetail.vue

<template>
  <view class="main">
	<view class="cont flex">
		<view class="cont_order_type">
			<view class="cont_order_type_name">{{assDetail.statustext}}</view>
			<view class="cont_order_type_desc">{{assDetail.refundVerifyFailReason}}</view>
		</view>
		<view class="cont_service">
			<image class="cont_service_img" src="../../static/service.png" mode="widthFix"></image>
			<view class="cont_service_name">联系客服</view>
		</view>
	</view>
	<!-- <view class="cont">
		<view class="cont_title">售后进度</view>
		<view class="cont_step">
			<uni-steps :options="step" active-color="#FF0000" direction="column" :active="active"></uni-steps>
		</view>
	</view> -->
	<view class="cont paddom">
		<view class="cont_title cont_border">售后明细</view>
		<view class="cont_shop" v-for="(item,index) in returnInfoList" :key="index">
			<view class="cont_shop_img">
				<image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
			</view>
			<view class="cont_shop_text">
				<view class="cont_shop_title">{{item.storeName}}</view>
				<!-- <view class="cont_shop_price">实付:<text class="cont_shop_price_f">5.98</text></view> -->
				<view class="cont_shop_desc">
					<!-- 实付单价:<text class="cont_shop_desc_price">5.98</text> -->
					<text class="cont_shop_desc_num">退款数量:{{item.returnNum}}</text>
				</view>
			</view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">售后总数量</view>
			<view class="cont_shop_item_value">{{assDetail.returnNum}}</view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">退款金额</view>
			<view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{assDetail.returnAmount}}</text></view>
		</view>
	</view>
	<view class="cont paddom">
		<view class="cont_title cont_border">售后订单信息</view>
		<view class="cont_shop_item" @click="copyText()">
			<view class="cont_shop_item_name">售后单号</view>
			<view class="cont_shop_item_value"><text class="cont_shop_item_copy">复制</text>{{assDetail.code}}</view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">申请时间</view>
			<view class="cont_shop_item_value">{{assDetail.createTime}}</view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">退款原因</view>
			<view class="cont_shop_item_value">{{assDetail.returnReason}}</view>
		</view>
		<view class="cont_shop_item" v-if="returnImageList.length">
			<view class="cont_shop_item_name">退款凭证</view>
			<view class="cont_shop_item_value"></view>
		</view>
		<view class="cont_shop_img" v-if="returnImageList.length">
			<image v-for="(item,index) in returnImageList" :key="index" class="cont_shop_img_url" :src="item" mode="aspectFill" @click="previewImage(i)"></image>
		</view>
	</view>
	<view style="height: 200rpx;"></view>
  </view>
</template>

<script setup>
import { loads } from '@/utils/index.js'
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { returngetApplyRecord } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const active = ref(0);
const id = ref("");
const assDetail = ref({});
const returnInfoList = ref([]);
const returnImageList = ref([])
const step = ref([
	{title:'售后申请已提交成功，客服将全力为您解决问题，请您耐心等待',desc:'2025/06/29 20:15'},
	{title:'售后申请已被受理，客服正在加速为您解决问题',desc:'2025/06/29 20:15'},
	{title:'您的退款申请已审核通过，商品无需退回',desc:'2025/06/29 20:15'},
	{title:'已将退款资金提交给原支付平台处理，预计将在3个工作日内到账。具体以原支付平台处理结果为准',desc:'2025/06/29 20:15'},
	{title:'退款已到账，请您注意查收，如有问题请联系客服',desc:'2025/06/29 20:15'},
])
//查看上传图片
const previewImage = (item,i)=>{
	let picture = returnImageList.value;
	uni.previewImage({
	    current: i,
	    urls:picture
	});
}
const copyText = () =>{
	uni.setClipboardData({
		data:'售后编号:'+assDetail.value.code,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success',
			});
		},
		fail: () => {
			uni.showToast({
			    title: '复制失败',
				icon: 'none',
			});
		}
	})
}
const api_returngetApplyRecord=()=>{
	loads('', true)
	return returngetApplyRecord(id.value).then(({data}) => {
		uni.hideLoading();
		
		let statustext = "";
		if(data.returnState == 1){
			statustext = "退款审核中"
		}else if(data.returnState == 2){
			statustext = "审核通过"
		}else if(data.returnState == 3){
			statustext = "审核拒绝"
		}else if(data.returnState == 4){
			statustext = "退款失败"
		}
		data.statustext = statustext;
		if(data.returnImage !== null){
			data.returnImageList = data.returnImage.split(",")
		}else{
			data.returnImageList = [];
		}
		assDetail.value = data;
		returnInfoList.value = data.returnInfoList;
		returnImageList.value = data.returnImageList;
	}).catch(({message}) => {
		uni.hideLoading();
		uni.showModal({
			content:message,
			showCancel: false,
			success: () => {
				uni.navigateBack({
					delta:1
				})
			}
		})
	})
}
onLoad((options) => {
	if(options.id){
		id.value = options.id;
	}
	api_returngetApplyRecord();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

<style lang="scss">
	@import './style.scss';
</style>