hainan_2024_zhenghe/h5/pages/main/order/order.vue

<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
import TabBar from "@/common/TabBar.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年8月7日 20:05:05
	 */
	import {
		ref,
		computed,
		nextTick,

	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow,onLoad,onBackPress
	} from '@dcloudio/uni-app'
	import OrderComponent from './src/order.vue'
	import {
		useStore
	} from '@/store'
	import { useRouter } from 'vue-router';
	
	const $props = defineProps({
		orderid:{
			type:String,
			default:''
		},
		status:{
			type:Number,
			default:null
		}
	});
	let searchInfo=ref({
		orderid:null
	})
	let DaiBanArr=ref([0,0,0,0]);
	const router = useRouter();
	const $store = useStore()
	const order_list = ref([])
	const getOrderList = async () => {
		uni.showLoading()
		const response = await $api('OrderList',{
		searchInfo:searchInfo.value
	})
		uni.hideLoading()
		$response(response, () => {
			order_list.value = response.data.list
			DaiBanArr.value=response.data.DaiBanCountArr
		 	 
			if(searchInfo.value.orderid && order_list.value.length>0){
				 
				nextTick(() => {
					statusClick(getTabByOrder(order_list.value[0]))
				})	 
				 
			}
			if($props.status){
				status_active.value = $props.status
			}
			
			
		})
	}
	const getStatusAllow = (statusActive) => {
	  switch (statusActive) {
	    case '0': return [1, 2, 3, 4, 5, 6]
	    case '1': return [1]
	    case '2': return [2]  // 未预约
	    case '3': return [2]  // 已预约

	    default: return []
	  }
	}
	const getTabByOrder = (order) => {
	  const { status, appointment_number } = order
	
	  if (status === 1) {
	    return '1'
	  } else if (status === 2) {
	    return (appointment_number == null || appointment_number === '') ? '2' : '3'
	  } else {
	    return '0' // 默认全部
	  }
	}
 
	const order_list_computed = computed(() => {
		let list = []
		// let status_allow = []
		// switch (status_active.value) {
		// 	case '0':
		// 		status_allow = [1, 2, 3, 4, 5,6]
		// 		break;
		// 	case '1':
		// 		status_allow = [1]
		// 		break;
		// 	case '2':
		// 		status_allow = [2]
		// 		break;
		// 	case '3':
		// 		status_allow = [2]
		// 		break;
		// 	case '4':
		// 		status_allow = [3,4,5,6]
		// 		break;
		// }
		 const status_allow = getStatusAllow(status_active.value)
		for (let i in order_list.value) {
			
			if (status_allow.includes(order_list.value[i].status)) {
				if(status_active.value=='2' ){ 
				 	if (order_list.value[i].appointment_number == null) {
				 	     list.push(order_list.value[i]);
				 	}
				}else if(status_active.value=='3' ){ 
				 	if (order_list.value[i].appointment_number != null && order_list.value[i].appointment_number != '') {
				 	     list.push(order_list.value[i]);
				 	}
				}
				else{
					list.push(order_list.value[i])
				}
				
			}
		}
		return list
	})

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			getOrderList()
		}
	}
	const status_active = ref('0')
	const status_arr = ref([{
		label: '待支付',
		value: '1'
	}, {
		label: '待预约',
		value: '2'
	}, {
		label: '已预约',
		value: '3'
	},{
		label: '全部',
		value: '0'
	}])
	const statusClick = (status,dotype=0) => { //dotype=1为手动点击，0为自动点击
		status_active.value = '-1'
		nextTick(() => {
			status_active.value = status
			if(status=='0' && searchInfo.value.orderid && dotype==1){
				uni.redirectTo({
					url: "/pages/main/order/order"
				});
			}
			if( searchInfo.value.orderid && dotype==1){
				 uni.redirectTo({
				 	url: "/pages/main/order/order?status="+status
				 });
			}
		})
	}

	const ReLoadOrderList = (newValue) => {
		if (newValue == "orderUpdate") {
			setTimeout(() => { 
			   uni.redirectTo({
			   	url: "/pages/main/order/order"
			   }); 
			  }, 1000);
		  
		}
	};
	
	onShow(() => {
		uni.showLoading()
		if (!!config_ref.value) {
			getOrderList()
		}
		searchInfo.value.orderid=$props.orderid
		if($props.orderid){
			status_active.value=null
		}
	})
	onBackPress((options)=> {
		console.log(options)
			  uni.reLaunch({
			       url: '/pages/main/index/index'
			     });
				  return true;
		})
</script>
<template>
	<TabBar></TabBar>
	<!-- <DraggableButton /> -->
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="order_select_wrapper">
			<view v-for="(i,k) in status_arr" :key="k" class="order_select_item_wrapper" :class="[
				i.value === status_active ? 'active' : ''
			]" @click="statusClick(i.value,1)">
			<view class="hongdian" v-if="DaiBanArr[k]>0" ></view>
				{{ i.label }}
				<view class="order_select_item_line_wrapper"></view>
			</view>
		</view>
		<view class="order_list_wrapper">
			<OrderComponent v-for="(i,k) in order_list_computed" :key="k" :info="i" @updateValue="ReLoadOrderList">
			</OrderComponent>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style scoped>
	.hongdian{
		line-height: 14rpx;
		height: 14rpx;
		width: 14rpx;
		background-color: #ff9170;
		border-radius: 50%;
		position: absolute;
		right: 10rpx;
		top: 30rpx;
		z-index: 100;
		font-size: 16rpx;
		color: #fff;
		text-align: center;
	}
	.order_list_wrapper {
		height: calc(100vh - 100rpx - 30rpx);
		width: 750rpx;
		overflow-y: auto;
		padding-bottom: 140rpx;
		margin: 0 auto;
		overflow-x: hidden;
		background: #F8F8F8;
		-ms-overflow-style: none;
		scrollbar-width: none;
		overflow: -moz-scrollbars-none;
		overflow-y: scroll;
	}

	.order_list_wrapper::-webkit-scrollbar {
		display: none;
	}

	.order_select_item_line_wrapper {
		position: absolute;
		width: 95rpx;
		height: 10rpx;
		background: linear-gradient(to bottom, #ffffff00, #1B9A9F);
		border-radius: 5rpx;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		opacity: 0;
	}

	.order_select_item_wrapper {
		width: calc(100% / 5);
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		position: relative;
		font-weight: 400;
		font-size: 30rpx;
		color: #2F2F2F;
	}

	.order_select_item_wrapper.active {
		color: #239EA3;
	}

	.order_select_item_wrapper.active .order_select_item_line_wrapper {
		opacity: 1;
	}

	.order_select_wrapper {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -1rpx 1rpx 0rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>