H5_module/onlineregistration/appointmentlist/appointmentlist.vue

<template>
	<view class="box">
		<view class="tab bgfff dflex">
			<view :class="'li ' + (currentTab == 0 ? 'active' : '')" @tap="tab(0)">全部</view>
			<view :class="'li ' + (currentTab == 3 ? 'active' : '')" @tap="tab(3)">待使用</view>
			<view :class="'li ' + (currentTab == 7 ? 'active' : '')" @tap="tab(7)">已完成</view>
		</view>
		<view class="box-item" v-for="(item,index) in pageList" :key="index">
			<view class="box-item-title">
				<text>{{item.storeName}}</text>
				<text class="color-gray">序号 {{item.serialNumber}}</text>
			</view>
			<view class="box-item-content">
				<view class="box-item-content-item">
					<view class="item-name">预约服务</view>
					<view class="item-text">{{item.serviceTitle}}</view>
				</view>
			</view>
			<view class="box-item-content">
				<view class="box-item-content-item">
					<view class="item-name">预约时间</view>
					<view class="item-text color-orange">{{item.appointmentTime}}</view>
				</view>
			</view>
			<view class="box-item-content">
				<view class="box-item-content-item">
					<view class="item-name">症状描述</view>
					<view class="item-text color-gray2">{{item.brief}}</view>
				</view>
			</view>
			<view class="box-item-footer">
				<view class="footer-status">
					{{item.state==3?'待使用':item.state==7?'已完成':'已取消'}}
				</view>
				<view class="footer-btn">
					<view class="footer-btn-item" @tap="jumpUrl('/onlineregistration/cancelappointment/cancelappointment?id='+item.id)">查看详情</view>
					<view class="footer-btn-item" @tap="jumpUrl('/onlineregistration/cancelappointment/cancelappointment?id='+item.id+'&isCancel=true')" v-if="item.state == 3">取消预约</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_jl.png'"></image>
			<text>暂无预约记录</text>
		</view>
	</view>
</template>

<script> 
	// mine/coupons/coupons.js
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const app = getApp();

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				currentTab: 0,
				form: {
					page: 1,
					limit: 10
				},
				pageList: [],
				isLoad: true,
				ishow: false,
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			this.getPageList()
		},
		onReachBottom() {
			this.form.page++
			this.getPageList()
		},
		methods: {
			tab(state) {
				if (this.currentTab === state) return false;
				this.currentTab = state
				this.form.page = 1
				this.isLoad = true
				this.getPageList()
			},
			getPageList(){
				let that = this;
				if(!that.isLoad) return false;
				that.isLoad = false;
				that.ishow = false
				let form = that.form
				if(that.currentTab > 0) form.state = that.currentTab
				else delete form.state
				req.getRequest(api.reservation_service_record_list,form,data=>{
					if (data.list && data.list.length == 10) that.isLoad = true;
					if (that.form.page > 1) data.list = that.pageList.concat(data.list);
					if(that.form.page == 1 && data.list.length == 0) that.ishow = true
					that.pageList = data.list
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	};
</script>

<style>
	@import './appointmentlist.css';
</style>