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="index">
          <view class="monthly-list-item-top">
            <view class="mlit-left">
              <view>{{ monthlyItem.vehicleNo }}</view>
              <view>{{ monthlyItem.roadName || monthlyItem.parkName }}</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 class="tool-btn pay-btn" v-if="monthlyItem.feeStatus == '0'" @click="goMonthPay(monthlyItem)">重新支付</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 ref="uModal" v-model="cancelShow" content="确认取消该订单？" :async-close="true" @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
    };
  },
  onLoad(page) {
    const obj = {
      road: 0,
      park: 1
    };
    if (page.type) {
      this.current = obj[page.type];
    }
  },
  onShow() {
    this.$nextTick(() => {
      this.$refs.paging.reload();
    });
  },
  onBackPress(options) {
    this.$u.route({
      type: 'switchTab',
      url: 'pages/center/index'
    });
    return true;
  },
  methods: {
    //tabs通知swiper切换
    tabChange(index) {
      this.current = index;
      this.currentValue = this.tabList[index].value;
      this.$refs.paging.reload();
    },
    // 下拉刷新操作
    queryList(pageNo, pageSize) {
      const tabObj = {
        road: 'getMonthList',
        park: 'getParkMonthList'
      };
      this.$u.api[tabObj[this.currentValue]]({
        pageSize: pageSize,
        pageNum: pageNo,
        ifPark: this.current
      }).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;
    },
    // 重新支付
    goMonthPay(item) {
      const params = {
        vehicleNo: item.vehicleNo,
        monthId: item.monthId
      };
      if (this.current === 0) {
        params.roadNo = item.roadNo;
      } else {
        params.parkNo = item.parkNo;
      }
      this.$u.route({
        url: 'pages/handleMonthly/handleMonthly',
        params
      });
    },
    // 确认取消订单
    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'
            });
          }
          this.$refs['uModal'].clearLoading();
          this.cancelShow = false
        })
        .catch((err) => {
          this.$refs['uModal'].clearLoading();
          this.$refs.uToast.show({
            title: '操作失败',
            type: 'error'
          });
        });
    },
    /**
     * 去续费
     * */
    goRenewal(item) {
      const params = {
        vehicleNo: item.vehicleNo
      };
      if (this.current === 0) {
        params.roadNo = item.roadNo;
      } else {
        params.parkNo = item.parkNo;
      }
      this.$u.route({
        url: 'pages/handleMonthly/handleMonthly',
        params
      });
    }
  }
};
</script>

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