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

<script setup>
import DraggableButton from "@/pages/components/goHome.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 router = useRouter();
	const $store = useStore()
	const order_list = ref([])
	const getOrderList = async () => {
		uni.showLoading()
		const response = await $api('OrderList')
		uni.hideLoading()
		$response(response, () => {
			order_list.value = response.data.list
			
		})
	}
	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 = [3, 5]
				break;
			case '4':
				status_allow = [4,6]
				break;
		}
		for (let i in order_list.value) {
			if (status_allow.includes(order_list.value[i].status)) {
				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: '0'
	}, {
		label: '待支付',
		value: '1'
	}, {
		label: '进行中',
		value: '2'
	}, {
		label: '已完成',
		value: '4'
	}, {
		label: '已关闭',
		value: '3'
	}])
	const statusClick = (status) => {
		status_active.value = '-1'
		nextTick(() => {
			status_active.value = status
		})
	}

	const ReLoadOrderList = (newValue) => {
		if (newValue == "orderUpdate") {
			setTimeout(() => { 
			    router.go(0);
			  }, 1000);
		  
		}
	};
	
	onShow(() => {
		if (!!config_ref.value) {
			getOrderList()
		}
	})
	onBackPress((options)=> {
		console.log(options)
			  uni.reLaunch({
			       url: '/pages/main/index/index'
			     });
				  return true;
		})
</script>
<template>
	<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)">
				{{ 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>
	.order_list_wrapper {
		height: calc(100vh - 100rpx - 30rpx);
		width: 750rpx;
		overflow-y: auto;
		padding-bottom: 30rpx;
		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>