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"
                    @click="handleExpertsModalItemClick(expertsModalItem)"
                    :class="expertsModalItem.isCheckedItem?'listbody-checkeditem':''">
                    <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'
        });
      },
      handleExpertsModalItemClick(itemParam) {
        debugger
        for (let itemIndex = 0; itemIndex < (this.expertsMainObj.expertsModalList || []).length; itemIndex++) {
          if (itemParam.id == this.expertsMainObj.expertsModalList[itemIndex].id) {
            this.expertsMainObj.expertsModalList[itemIndex].isCheckedItem = true;
          } else {
            this.expertsMainObj.expertsModalList[itemIndex].isCheckedItem = false;
          }
        }
        this.expertsMainObj = {
          ...this.expertsMainObj,
          expertsModalList: this.expertsMainObj.expertsModalList
        };
      }
    }
  }
</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-checkeditem {
                border-top: 2rpx solid #bae5fa;
                border-bottom: 2rpx solid #bae5fa;
              }

              .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>