jsm-mall-h5-front/src/packageHome/pages/maintenance/project.vue

<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="choose(item)">
        <view class="row">
          <view class="label">项目名称</view>
          <view class="value">{{item.projectName}}</view>
        </view>
        <view class="row">
          <view class="label">负责人员</view>
          <view class="value">{{item.manger}}</view>
        </view>
        <view class="row">
          <view class="label">联系电话</view>
          <view class="value">{{item.mobile}}</view>
        </view>
        <view class="row" v-if="item.startTime && item.endTime">
          <view class="label">维保时间</view>
          <view class="value">{{item.startTime.slice(0, 10)}}至{{item.endTime.slice(0, 10)}}</view>
        </view>
        <view class="row">
          <view class="label">服务内容</view>
          <view class="value">{{item.orderSmallTypeText}}</view>
        </view>
        <view class="row">
          <view class="label">项目地址</view>
          <view class="value">{{item.province}}{{item.city}}{{item.area}}{{item.street}}{{item.address}}</view>
        </view>
      </view>
    </view>
    <Loading :loadStatus="loadStatus" :dataList="dataList" />

  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageHome/pages/maintenance/project`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    data() {
      return {
        dataList: [],
        pageNum: 1,
        loadStatus: 0,
        refresherTriggered: false,
      }
    },

    onLoad() {
      this.getList();
    },

    methods: {
      getList() {
      	this.loadStatus = 1;
      	this.$api.post('/engin/project/repair/list', {
          pageNum: this.pageNum,
          pageSize: 10
      	}).then(res => {
      		this.loadStatus = 0;
      		let list = res.data.records;
      		if (list.length < 10) {
      		  this.loadStatus = 2;
      		}
      		this.dataList = this.dataList.concat(list);
      	}).catch(() => {
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },

      refreshList() {
      	this.dataList = [];
      	this.pageNum = 1;
      	this.getList();
      },

      // 滚动到底部
      scrolltolower(e) {
      	if (this.loadStatus === 0) {
      		this.pageNum++;
      		this.getList();
      	}
      },

      // 触发下拉刷新
      refresherrefresh(e) {
      	this.refresherTriggered = true;
      	this.refreshList();
      },
      
      choose(item) {
        this.crossPage.$emit('chooseProject', item);
        this.$navToPage({
        	delta: 1
        }, 'navigateBack')
      }
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.list-container {
  .item {
    background: #ffffff;
    margin-top: 30rpx;
    padding: 30rpx;
    .row {
      display: flex;
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
      .label {
        flex-shrink: 0;
        font-size: 28rpx;
        color: $sec-font;
        margin-right: 20rpx;
      }
      .value {
        font-size: 28rpx;
      }
    }
  }
}
</style>