AgriculturalCloud-h5-UI/pages/experts/index.vue

<template>
  <view class="page-content experts">
    <view class="page-header experts-header">
      <view class="experts-header-field">
        <picker @change="bindPickerChange" :value="expertsFieldIndex" :range="expertsFieldList">
          <view class="field-content">
            <view class="field-img">
              <u-icon name="list" size="54" class="field-icon"></u-icon>
            </view>
            <view class="field-text">{{ expertsFieldList[expertsFieldIndex] }}</view>
          </view>
        </picker>
      </view>
    </view>
    <view class="page-main experts-content">
      <view class="experts-content-main">
        <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
          <view class="experts-content-main-listbody">
            <template v-if="expertsMainObj.list_empty">
              <view class="experts-content-main-nodata">
                <text class="expertsmain-nodata">暂无数据</text>
              </view>
            </template>
            <template>
              <u-row gutter="16" class="listbody-row">
                <u-col
                  span="12"
                  class="listbody-col"
                  v-for="expertsModalItem in expertsMainObj.expertsModalList"
                  :key="expertsModalItem.id"
                >
                  <view class="listbody-item">
                    <view class="item-content">
                      <view class="item-content-sub item-content-left">
                        <text class="item-content-text">姓名：{{ expertsModalItem.professorName }}</text>
                      </view>
                      <view class="item-content-sub item-content-right">
                        <text class="item-content-text">职称：{{ expertsModalItem.title }}</text>
                      </view>
                    </view>

                    <view class="item-content">
                      <view class="item-content-sub item-content-left">
                        <text class="item-content-text">年龄：{{ expertsModalItem.age }}</text>
                      </view>
                      <view class="item-content-sub item-content-right">
                        <text class="item-content-text">性别：{{ expertsModalItem.sex }}</text>
                      </view>
                    </view>

                    <view class="item-content">
                      <view class="item-content-sub item-content-field">
                        <text class="item-content-text">专业领域：{{ expertsModalItem.professorField }}</text>
                      </view>
                    </view>

                    <view class="item-content">
                      <view class="item-content-sub item-content-institution">
                        <text class="item-content-text">供职单位：{{ expertsModalItem.institution }}</text>
                      </view>
                    </view>
                  </view>
                </u-col>
              </u-row>
            </template>
            <uni-load-more :status="expertsMainObj.loadStatus" v-if="!expertsMainObj.list_empty"></uni-load-more>
          </view>
        </scroll-view>
      </view>
      <view class="experts-content-btn">
        <view class="experts-consultbtn">
          <view class="consultbtn-text" @click="handleConsultExpertsClick">咨询专家</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  expertsMainListData,
  expertsMainFieldListData
} from '@/agrcloud-api/expertsmodal';
import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more"

export default {
  name: 'experts',
  components: {
    uniLoadMore
  },
  data() {
    return {
      expertsFieldIndex: 0,
      expertsFieldList: ["全部"],
      currExpertsFieldValue: '',
      expertsMainObj: {
        loadStatus: 'more',
        list_empty: false,
        pageTotal: 0,
        pageCount: 0,
        pagination: {
          pageNum: 1,
          pageSize: 10
        },
        listData: []
      }
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    initData() {
      this.getExpertsMainFieldListData();
    },
    getExpertsMainFieldListData() {
      expertsMainFieldListData().then((res) => {
        this.expertsFieldList = [...this.expertsFieldList, ...res.data || []];
        this.getExpertsMainListData();
      });
    },
    bindPickerChange: function (e) {
      this.expertsFieldIndex = e.target.value;
      const currPickerChangeField = this.expertsFieldList[e.target.value];
      this.currExpertsFieldValue = (currPickerChangeField != '全部') ? currPickerChangeField : '';
      this.expertsMainObj.pagination.pageNum = 1;
      this.getExpertsMainListData();
    },
    getExpertsMainListData() {
      this.expertsMainObj = {
        ...this.expertsMainObj,
        list_empty: false,
        loadStatus: 'loading',
        pageTotal: 0
      };

      // 请求获取列表数据
      expertsMainListData({
        ...this.expertsMainObj.pagination,
        professorField: this.currExpertsFieldValue
      }).then(res => {
        // 数据总条数
        this.expertsMainObj.pageTotal = res.total || 0;

        // 如果列表为第一页，返回列表数据清空
        if (this.expertsMainObj.pagination.pageNum == 1) {
          this.expertsMainObj.expertsModalList = [];
        };

        // 处理返回结果
        if ((res.rows || []).length <= 0) { // 返回结果没有数据
          if ((this.expertsMainObj.expertsModalList || []).length <= 0) {
            this.expertsMainObj.loadStatus = 'noMores';
            this.expertsMainObj.list_empty = true;
          } else {
            this.expertsMainObj.loadStatus = 'noMores';
          }
        } else { //返回结果有数据
          //返回历史咨询列表存在
          this.expertsMainObj.list_empty = false;

          // 获取列表数据分页数量
          this.expertsMainObj.pageCount = Math.ceil((res.total || 0) / this.expertsMainObj.pagination.pageSize);
          if ((res.total || 0) % this.expertsMainObj.pagination.pageSize == 0) {
            this.expertsMainObj.pageCount = Math.ceil((res.total || 0) / this.expertsMainObj.pagination.pageSize);
            if (this.expertsMainObj.pageCount == 1) {
              this.expertsMainObj.pageCount--;
            }
          } else {
            this.expertsMainObj.pageCount--;
          };

          // 处理页面状态
          if (this.expertsMainObj.pageCount === 0) {
            this.expertsMainObj.loadStatus = 'noMores'
          } else {
            this.expertsMainObj.loadStatus = 'more'
          }

          // 组装返回数据
          this.expertsMainObj.expertsModalList.push.apply(this.expertsMainObj.expertsModalList, res.rows || []);

          uni.stopPullDownRefresh();
        }

      }).catch(err => {
        this.expertsMainObj.loadStatus = 'noMores';
      });
    },
    handleScrolltolower() {
      this.expertsMainObj.loadStatus = 'loading'
      if (this.expertsMainObj.pagination.pageNum - 1 >= this.expertsMainObj.pageCount) {
        this.expertsMainObj.loadStatus = 'noMores';
        return
      } else {
        this.expertsMainObj.pagination.pageNum++;
        this.getExpertsMainListData();
      }
    },
    handleConsultExpertsClick() {
      uni.navigateTo({
        url: '/pages/experts/modal/index'
      });
    }
  }
}
</script>

<style lang="scss"
  scoped>
.experts {
  padding: 0;

  &-header {
    width: 100%;
    background: #ffffff;

    &-field {
      margin: 24rpx;
      width: 100%;
      height: 56rpx;
      line-height: 56rpx;

      .field-content {
        display: flex;

        .field-img {
          flex: 1;
          margin-top: 4rpx;
        }

        .field-text {
          flex: 10;
          height: 56rpx;
          font-size: 34rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 56rpx;
        }
      }
    }
  }

  &-content {
    width: 100%;

    .experts-content-main {
      .scroll-Y {
        height: calc(
          100vh - 88rpx - 236rpx - env(safe-area-inset-bottom) -
            var(--status-bar-height)
        );
      }

      .experts-content-main-listbody {
        .experts-content-main-nodata {
          text-align: center;
          margin-top: 20rpx;

          .expertsmain-nodata {
            font-size: 30rpx;
            color: #777777;
          }
        }

        .listbody-row {
          .listbody-col {
            padding: 24rpx 0 0 0 !important;

            .listbody-item {
              background: #ffffff;
              min-height: 288rpx;
              width: 100%;
              padding-bottom: 24rpx;

              .item-content {
                display: flex;
                padding-top: 24rpx;

                &-sub {
                  flex: 1;
                }

                &-left {
                  padding-left: 24rpx;
                }

                &-right {
                  padding-right: 24rpx;
                }

                &-field {
                  padding: 0rpx 24rpx 0rpx 24rpx;
                }

                &-institution {
                  padding: 0rpx 24rpx 0rpx 24rpx;
                }

                &-text {
                  height: 42rpx;
                  font-size: 30rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
                  line-height: 42rpx;
                }
              }
            }
          }
        }
      }
    }

    &-btn {
      width: 100%;
      position: fixed;
      bottom: 40rpx;
      padding: 16rpx 32rpx;

      .experts-consultbtn {
        width: 686rpx;
        height: 88rpx;
        background: #53a0fd;
        border-radius: 4rpx;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .consultbtn-text {
          height: 50rpx;
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 50rpx;
        }
      }
    }
  }
}
</style>