XEH-miniProgram/pages/self/order/index.vue

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index"
				@click="tabActive = item.value">
				{{ item.label }}
			</view>
		</view>
		<view class="order-panel">
			<view class="item" @click="handleOpenOrderDetail">
				<view class="head">
					<image class="icon" src="../../../static/svg/temp.svg" mode="aspectFill"></image>
					<view class="business">财税</view>
					<view class="state">待审核</view>
				</view>
				<view class="content">
					<view class="name">记账报税套餐（年度）</view>
					<view class="text">订单号：10735</view>
					<view class="text">天津超易达胜科技发展有限公司</view>
					<view class="text">2023-10 至 2024-09</view>
					<view class="money">￥3600.00</view>
					<view class="sub">新签申请</view>
				</view>
			</view>
			<view class="item">
				<view class="head">
					<image class="icon" src="../../../static/svg/temp.svg" mode="aspectFill"></image>
					<view class="business">财税</view>
					<view class="state">生效中</view>
				</view>
				<view class="content">
					<view class="name">记账报税套餐（年度）</view>
					<view class="text">订单号：10735</view>
					<view class="text">天津超易达胜科技发展有限公司</view>
					<view class="text">2023-10 至 2024-09</view>
					<view class="money">￥3600.00</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabActive: 1,
				tabList: [{
						label: '全部订单',
						value: 1
					},
					{
						label: '未生效',
						value: 2
					},
					{
						label: '未生效',
						value: 3
					},
					{
						label: '已完成',
						value: 4
					}
				]
			};
		},
		methods: {
			handleOpenOrderDetail() {
				uni.navigateTo({
					url: 'detail'
				});
			}
		}
	};
</script>

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