parking_h5/pages/center/monthly/monthly.vue

<template>
	<!-- 包月 -->
	<view class="monthly">
		<z-paging class="paging" ref="paging" v-model="dataList" @query="queryList">
			<!-- 选项卡 -->
			<view class="monthly-tab" slot="top">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabChange" bg-color="#fff"
					inactive-color="#000000" active-color="#008CFF" :bold="false"
					:active-item-style="{color: '#008CFF'}"></u-tabs>
			</view>
			<view class="monthly-list">
				<view class="monthly-list-item" v-for="(monthlyItem, index) in  dataList" :key="monthlyItem.id">
					<view class="monthly-list-item-top">
						<view class="mlit-left">
							<view>{{monthlyItem.vehicleNo}}</view>
							<view>{{monthlyItem.roadName}}</view>
						</view>
						<view class="mlit-right u-flex">
							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 0">未缴费</view>
							<view class="mlit-right-item fee-status" v-if="monthlyItem.feeStatus === 1">已缴费</view>
							<view class="mlit-right-item" v-if="monthlyItem.energyType === 1">汽油车</view>
							<view class="mlit-right-item" v-if="monthlyItem.energyType === 2">新能源</view>
						</view>
					</view>
					<view class="monthly-list-item-bottom">
						<view class="mlib-item">
							<view>有效期限</view>:
							<view>
								{{(monthlyItem.beginTime.split('-')).join('.')}}-{{(monthlyItem.endTime.split('-')).join('.')}}
							</view>
						</view>
						<view class="mlib-item">
							<view>剩余天数</view>:
							<view>{{monthlyItem.surplusDays}}天</view>
						</view>
					</view>
					<view v-if="monthlyItem.feeStatus=='0'" class="button-wrap u-flex u-row-right">
						<view class="tool-btn" :class="{'tool-btn-cancel': monthlyItem.feeStatus=='0'}"
							v-if="monthlyItem.feeStatus=='0'" @click="cancelMonth(monthlyItem.monthId)">取消订单</view>
					</view>
					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays > 2"
						class="button-wrap u-flex u-row-right">
						<view class="tool-btn">已缴费</view>
					</view>
					<view v-else-if="monthlyItem.feeStatus == 1 && monthlyItem.surplusDays < 3"
						class="button-wrap u-flex u-row-right">
						<view class="tool-btn" @click="goRenewal(monthlyItem)">去续费</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-modal v-model="cancelShow" content="确认取消该订单？" @confirm="confirm" :show-cancel-button="true"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
					name: '路段',
					value: 'road'
				}, {
					name: '停车场',
					value: 'park'
				}],
				current: 0,
				currentValue: 'road',
				id: '', // 当前选中的条目id
				cancelShow: false,
				dataList: [],
				pageSize: 10,
				pageNo: 1
			}
		},
		methods: {
			//tabs通知swiper切换
			tabChange(index) {
				this.current = index;
				this.currentValue = this.tabList[index].value
				this.$refs.paging.reload()
			},
			customBack() {
				this.$u.route({
					type: 'switchTab',
					url: 'pages/center/index'
				});
			},
			// 下拉刷新操作
			queryList(pageNo, pageSize) {
				const tabObj = {
					road: 'getMonthList',
					park: 'getParkMonthList'
				}
				this.$u.api[tabObj[this.currentValue]]({
						pageSize: pageSize,
						pageNum: pageNo,
					})
					.then(res => {
						if (res.code === 200) {
							this.pageNo = pageNo
							this.pageSize = pageSize
							this.$refs.paging.complete(res.data.rows);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					})

			},
			// 取消订单
			cancelMonth(monthId) {
				this.id = monthId;
				this.cancelShow = true;
			},
			// 确认取消订单
			confirm() {
				this.$u.api.cancelMonth({
						monthId: this.id,
					})
					.then(res => {
						if (res.code === 200) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
							});
							this.queryList(this.pageNo, this.pageSize)
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
							});
						}
					}).catch(err => {
						this.$refs.uToast.show({
							title: '操作失败',
							type: 'error',
						});
					})
			},
			/**
			 * 去续费
			 * */
			goRenewal(item) {
				this.$u.route({
					url: 'pages/handleMonthly/handleMonthly',
					params: {
						roadNo: item.roadNo,
						vehicleNo: item.vehicleNo
					}
				})
			}
		}
	}
</script>

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