hospital-accompaniment-wechat/pages/mine/helpCenter.vue

<template>
  <view class="container">
   <!-- <u-navbar title="帮助中心" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar> -->
    <view class="list">
      <view class="item" v-for="(v,i) in list" :key="i" @click="goPath('/pages/mine/agreement?helpId='+v.id)">
        <view class="item_l">{{v.problemTitle}}</view>
        <view class="item_r"><text class="iconfont icon-jiantou"></text></view>
      </view>
      <empty marginTop="50" v-if="(!list||list.length<=0)&&status!='loading'"></empty>
      <u-loadmore v-else :status="status" />
    </view>
  </view>
</template>

<script>
import { problemPage } from "@/api/user.js"
export default {
  data () {
    return {
      status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
      params: {
        pageSize: 20,
        pageNum: 1,
        status: 1
      },
      list: []
    }
  },
  onPullDownRefresh () {
    this.params.pageNum = 1;
    this.getList();
  },
  onReachBottom () {
    if (this.status == "loadmore") {
      this.params.pageNum++;
      this.getList()
    }
  },
  onLoad () {
    this.getList();
  },
  methods: {
    getList () {
      problemPage(this.params).then(res => {
        if (this.params.pageNum == 1) {
          this.list = res.rows
        } else {
          this.list.push(...res.rows);
        }
        if (this.list.length < res.total) {
          this.status = 'loadmore';
        } else {
          this.status = 'nomore';
        }
      }).finally(()=>{
		  uni.stopPullDownRefresh();
	  })
    },
    goPath (path) {
      uni.navigateTo({
        url: path
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}
.container {
  background: #ffffff;
  .list {
    padding: 15rpx 30rpx;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 35rpx 0 30rpx;
      border-bottom: 1rpx solid #e6e6e6;
      .item_l {
        font-size: 28rpx;
        color: #1a1a1a;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: calc(100% - 100rpx);
      }
      .item_r {
        color: #a3a3a3;
      }
    }
  }
}
</style>