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

<template>
	<view class="page-wrap">
		<view class="tabs-panel">
			<view :class="{ item: true, active: tabActive === item }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item">
				{{ item }}
			</view>
		</view>
		<view class="order-panel">
			<view class="item" v-for="(item, index) in orderList" :key="index" @click="handleOpenOrderDetail(item.orderId)">
				<view class="head">
					<image class="icon" src="../../../static/svg/temp.svg" mode="aspectFill"></image>
					<view class="business">财税</view>
					<view class="state">{{ item.status || '--' }}</view>
				</view>
				<view class="content">
					<view class="name">{{ item.productName }}</view>
					<view class="text">订单号：{{ item.orderCode || '--' }}</view>
					<view class="text">{{ item.company.companyName || '--' }}</view>
					<view class="text">
						{{ item.contractServiceStart ? item.contractServiceStart.slice(0, 7) : '--' }} 至 {{ item.contractServiceEnd ? item.contractServiceEnd.slice(0, 7) : '--' }}
					</view>
					<view class="money">￥{{ numberfilter(item.amount) }}</view>
					<view class="sub">{{ item.signingTypeName || '' }}</view>
				</view>
			</view>
			<view class="c-abnor" v-if="!orderList.length">
				<image class="icon" src="@/static/svg/bags.svg"></image>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
import orderService from '@/api/order.js';
import { numberfilter } from '@/utils/filter';
export default {
	data() {
		return {
			tabActive: '全部订单',
			tabList: ['全部订单', '未生效', '生效中', '已完成'],
			orderList: []
		};
	},
	watch: {
		tabActive() {
			this.getOrderList();
		}
	},
	onLoad() {
		this.getOrderList();
	},
	onPullDownRefresh() {
		this.getOrderList();
	},
	methods: {
		// 获取订单列表
		async getOrderList() {
			const { tabActive } = this;
			const { rows } = await orderService.getOrderList(tabActive === '全部订单' ? '' : tabActive);
			this.orderList = rows;
			uni.pageScrollTo({ scrollTop: 0 });
			uni.stopPullDownRefresh();
		},
		handleOpenOrderDetail() {
			uni.navigateTo({
				url: 'detail'
			});
		},
		numberfilter
	}
};
</script>

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