TakeOutShop/order/assList/assList.vue

<template>
  <view class="main">
	<view class="order_nav">
		<view class="order_nav_item" v-for="(item,index) in tab" :key="index" :class="active == index?'order_nav_active':''" @click="clickOrder(index)">
			<view class="order_nav_name">{{item}}</view>
			<view class="order_nav_m"></view>
		</view>
	</view>
	
	<view class="cont">
		<view v-for="(item,index) in list" :key="index" class="order_list" @click="assDetail(item)">
			<view class="order_type" v-if="active == 1">{{item.returntext}}</view>
			<view class="order_time">下单时间:{{item.createTime}}</view>
			<view class="order_scroll">
				<scroll-view class="order_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					<block v-if="active == 0">
						<view class="order_scroll_li" v-for="(i,idx) in item.orderInfoList" :key="index">
							<view class="order_scroll_img">
								<image class="order_scroll_img_url" :src="i.image" mode="widthFix"></image>
							</view>
						</view>
					</block>
					<block v-if="active == 1">
						<view class="order_scroll_li" v-for="(i,idx) in item.returnInfoList" :key="index">
							<view class="order_scroll_img">
								<image class="order_scroll_img_url" :src="i.image" mode="widthFix"></image>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="order_x">
				<block v-if="active == 1">共售后{{item.returnNum}}件、</block>
				<block v-if="active == 0">共{{item.totalNum}}件、</block>
				{{active == 1 ?'退款金额':'实付'}}:
				<text class="order_price">{{active == 1?item.returnAmount:item.payPrice}}</text>
			</view>
			<view class="order_bottom" v-if="active == 0">
				<view class="order_l"></view>
				<view class="order_r">
					<view class="order_btn" @click.stop="assDetail(item)">申请售后</view>
				</view>
			</view>
		</view>
		<view class="empty" v-if="img_err && decs">
			<view class="empty_cont">
				<image class="empty_cont_img" :src="img_err" mode="widthFix"></image>
				<view class="empty_cont_title">{{decs}}</view>
			</view>
		</view>
		<view v-else class="load_desc">{{decs}}</view>
	</view>
	<view class="service">
		<view class="service_cont">
			<image class="service_img" src="../../static/serv.png" mode="widthFix"></image>
			<view class="service_name">客服</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import NP from 'number-precision';
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 { returncanApplyOrderList,returnapplyRecordsList } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const tab = ref(['售后申请','售后记录']);
const active = ref(0);
const list =ref([]);
const decs = ref('');
const pages = ref(0);
const type = ref("");
const img_err = ref("");
const clickOrder=(index)=>{
	if(index == active.value) return false;
	active.value = index;
	list.value = [];
	decs.value = '';
	pages.value = 0;
	api_orderlist();
};
const api_orderlist=()=>{
	pages.value = pages.value + 1;
	img_err.value = "";
	decs.value = "—— 加载中... ——";
	const params = {
		page:pages.value,
		limit:'10'
	}
	let url = "";
	if(active.value == 1){
		url = returnapplyRecordsList
	}else{
		url = returncanApplyOrderList
	}
	return url(params).then(({data}) => {
		decs.value = '—— 上拉加载更多 ——';
		
			data.list.forEach(item => {
				if(active.value == 1){
					if(item.returnState == 1){
						item.returntext = "退款审核中"
					}else if(item.returnState == 2){
						item.returntext = "审核通过"
					}else if(item.returnState == 3){
						item.returntext = "审核拒绝"
					}else{
						item.returntext = "退款失败"
					}
				}
				if(active.value == 0){
					item.totalNum =	item.orderInfoList.reduce((sum, i) => sum + i.cartNum, 0);
				}
			})
		list.value = list.value.concat(data.list);
		if(!list.value.length){
			if(active.value == 0){
				img_err.value = "../../static/Empty/cart.png"
				decs.value =`仅48小时内签收的订单支持退款哦～` 
			}else{
				img_err.value = "../../static/Empty/order_lisr_img.png"
				decs.value ="—— 暂无售后记录 ——"
			}
		}else if(data.list.length < 10){
			decs.value = '—— 嗷呜，已经到底啦 ——';
		}
	}).catch(({message}) => {
		img_err.value = "../../static/Empty/err.png"
		decs.value = `—— ${message||'网络异常'} ——`;
	})
}

const assDetail=(item)=>{
	if(active.value == 0){
		uni.navigateTo({
			url:`/order/assedit/assedit?orderId=${item.orderId}`
		})
	}else{
		uni.navigateTo({
			url:`/order/assDetail/assDetail?id=${item.id}`
		})
	}
	
};
onLoad((options) => {
	if(options.type == 0 || options.type == 1){
		active.value = options.type;
	}
	api_orderlist();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{
	list.value = [];
	decs.value = '';
	pages.value = 0;
	api_orderlist();
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	api_orderlist();
})
</script>

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