leromro-mini/pages/common/classify/orderlist.vue

<template>
	<!-- 用户 -->
	<view>
		<view class="classify-main" v-if="userType == '1'">
			<up-tabs v-if="column2 && column2.length > 0" :list="column2" :scrollable="false" @change="onChange"
				:activeStyle="{
					color: 'rgba(255, 87, 4, 1)',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" lineColor="rgba(255, 87, 4, 1)" :current="tabKey">
			</up-tabs>
			<view class="list">
				<OrderItem v-if="dataList && dataList.length > 0" :dataList="dataList" />
				<view v-else class="empty-null">
					<img src="/static/empty/订单为空.png" alt="">
				</view>
			</view>
		</view>
		<view>
			<up-list @scrolltolower="scrolltolower">
				<up-list-item v-for="(item, index) in dataList" :key="index">
					<view class="list-item">
						<!-- 左侧图片 -->
						<image :src="item.volunteerPicture" mode="aspectFill" class="item-image"></image>

						<!-- 中间信息 -->
						<view class="item-info">
							<view class="info-line">姓名：{{item.name}}</view>
							<view class="info-line">类别：{{item.businessTierName}}</view>
							<view class="info-line skill-description">技能介绍：{{ item.skillDescribe }}</view>
						</view>

						<!-- 右侧信息 -->
						<view class="item-right">
							<!-- <view class="rating">评分：9.5</view> -->
							<view class="status-tags">
								{{dictSortMap[item.orderStatus]}}
							</view>
							<view class="Wrap-Btn">
								<!-- 沟通按钮 -->
								<up-button type="primary" text="沟通" shape="circle" :customStyle="wrapqx">
								</up-button>

								<!-- 当 orderStatus 为 3 显示退款按钮 -->
								<up-button v-if="item.orderStatus === '3'" type="error" text="退款" 
									shape="circle" :customStyle="wrapqx" @click="handleRefund(item)">
								</up-button>

								<!-- 当 orderStatus 为 1 显示取消订单按钮 -->
								<up-button v-if="item.orderStatus === '1'" type="warning" text="取消" 
									shape="circle" :customStyle="wrapqx" @click="handleCancel(item)">
								</up-button>

								<!-- 其他状态显示查看按钮 -->
								<up-button v-if="item.orderStatus !== '1' && item.orderStatus !== '3'" 
									type="info" text="查看" shape="circle" :customStyle="wrapqx"
									@click="handlClick(item)">
								</up-button>
							</view>
						</view>
					</view>
				</up-list-item>
			</up-list>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from "vue"


	const userType = uni.getStorageSync('userType') //读取本地存储

	// 用户/志愿者 识别标识
	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
	const orderStatus = ref(0)
	const column2 = [{
			name: "全部",
			value: "",
		},
		{
			name: "待支付",
			value: "0",
		},
		{
			name: "待服务",
			value: "1",
		},
		{
			name: "进行中",
			value: "3",
		},
		{
			name: "已完成",
			value: "4",
		},
		{
			name: "售后",
			value: "2",
		}
	]

	const props = defineProps({
		dataList: {
			typeof: Array,
			default: () => [],
		},
		dictSort: {
			type: Array,
			default: () => [], // 默认值
		},
		fetchData: Function, // 刷新数据的方法
	})


	const emits = defineEmits([
		'fetchData'
	])

	const dictSortMap = computed(() => {
		let mapObj = {}
		props.dictSort.forEach((item => {
			mapObj[item.dictValue] = item.dictLabel
		}))
		return mapObj
	})

	const handlClick = (item) => {
		const mainOrderId = item.mainOrderId; // 获取详情id
		uni.navigateTo({
			url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
		});
	}

	function onChange(tabItem) {
		emits('fetchData', tabItem.value)
	}
	
	//申请退款 
	const handleRefund = (item) => {
		const mainOrderId = item.mainOrderId; // 获取详情id
		uni.navigateTo({
			url: `/pages_classify/pages/requestaRefund/requestaRefund?mainOrderId=${mainOrderId}`
		});
	};
	
	const wrapqx = {
		height: '50rpx',
		width: '100rpx',
		marginLeft: '8rpx'
	}

	// 取消订单
	const handleCancel = (item) => {
		const mainOrderId = item.mainOrderId;
		uni.showModal({
			title: '提示',
			content: '确定要取消该订单吗？',
			success: function(res) {
				if (res.confirm) {
					// TODO: 调用取消订单接口
					uni.showToast({
						title: '订单已取消',
						icon: 'success'
					});
				}
			}
		});
	};
</script>

<style scoped>
	.list-item {
		display: flex;
		padding: 12px;
		border-bottom: 1px solid #f5f5f5;
	}

	.item-image {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 12px;
	}

	.item-info {
		flex: 1;
		margin-right: 12px;
		overflow: hidden;
	}

	.info-line {
		margin-bottom: 6px;
		font-size: 12px;
		color: #333;
	}

	.skill-description {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制两行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		min-height: 2.8em;
		/* 两行高度 */
	}

	.item-right {
		width: 120px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.rating {
		font-size: 13px;
		color: #f39c12;
		margin-bottom: 6px;
	}

	.status-tags {
		margin-bottom: 6px;
	}

	.Wrap-Btn {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

</style>