xq-csg-weapp_uni-ts/src/packages/people/pages/guide/guide.vue

<template>
  <view>
    <custom-nav-bar :left-text="option.name" left-arrow />
    <swiper class="people-custom-swiper" :indicator-dots="!imageList.length" :indicator-color="indicatorColor"
      :indicator-active-color="indicatorActiveColor">
      <block v-for="(item, index) in imageList" :key="index">
        <swiper-item>
          <navigator v-if="item.clickUrl" class="line-navigator" :url="util.updateQuery(item.clickUrl, item)"
            hover-class="none"></navigator>
          <image class="custom-swiper-img" :src="item.icon"></image>
        </swiper-item>
      </block>
    </swiper>
    <view class="guide-list flex" v-if="option.name === '五星党员'">
      <view class="guide-item flex flex-col flex-v-center" :data-id="item.id" @tap="jumpDetail"
        v-for="(item, index) in doctorPageList" :key="index">
        <image class="guide-img" :src="item.photo"></image>

        <text class="guide-name">{{ item.name }}</text>
        <van-rate readonly icon="/src/images/void-icon2.png" :size="14" void-icon="/src/images/rate-icon.png" v-model="item.star" />
      </view>
    </view>
    <view class="rural-list flex"
      v-if="option.path === 'sonGuide4' || option.path === 'sonGuide5' || option.path === 'sonGuide3'">
      <view class="guide-item flex flex-col flex-v-center" :data-item="item" @tap="toArea"
        v-for="(item, index) in agencyPageList" :key="index">
        <image class="guide-img" :src="item.image"></image>

        <text class="guide-name">{{ item.agencyName }}</text>
      </view>
    </view>
    <view class="second-section" v-if="option.path === 'sonGuide1'">
      <view class="section-item flex flex-between" :data-item="item" @tap="toArea"
        v-for="(item, index) in partyBranchList" :key="index">
        <image class="section-item-right" :src="item.image" mode="aspectFill"></image>

        <view class="section-item-left flex1 flex flex-col">
          <view class="consult-content-title text-line-2">{{ item.name }}</view>
        <van-rate readonly icon="/src/images/void-icon2.png" :size="14" void-icon="/src/images/rate-icon.png" v-model="item.star" />
        </view>
      </view>
    </view>

    <view class="rural-list flex" v-if="option.name === '家庭医生团队'">
      <view class="guide-item flex flex-col flex-v-center" :data-item="item" @tap="toArea"
        v-for="(item, index) in agencyPageList" :key="index">
        <image class="guide-img" :src="item.image"></image>

        <text class="guide-name">{{ item.agencyName }}</text>
      </view>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
import * as peopleApi from '@/api/peopleApi';
import * as publicApi from '@/api/publicApi';
export default {
  components: {},
  data() {
    return {
      indicatorColor: 'rgba(255,255,255,0.4)',
      indicatorActiveColor: '#FFFFFF',
      option: {
        name: '',
        path: ''
      },
      imageList: [],
      doctorPageList: [],
      agencyPageList: [],
      partyBranchList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(option) {
    this.option = option
    console.log(option)
    this.recursionApi();
    this.callFcuntion();
  },
  onReachBottom() {
    const data = {
      sonGuide2: () => {
        if (this.doctorPageList.length === this.total) {
          return;
        }
        this.excellentPartMemberPageApi(false);
      },
      sonGuide4: () => {
        console.log(2);
        if (this.agencyPageList.length === this.total) {
          return;
        }
        this.agencyPageApi(false);
      },
      sonGuide3: () => {
        console.log(1);
        if (this.agencyPageList.length === this.total) {
          return;
        }
        this.agencyPageApi(false);
      },
      sonGuide1: () => {
        if (this.partyBranchList.length === this.total) {
          return;
        }
        this.partyBranchApi(false);
      }
    };
    if (data[this.option.path]) {
      data[this.option.path]();
    }
  },
  methods: {
    // 获取轮播图
    async recursionApi() {
      const res = await publicApi.recursionApi({
        bannerType: 1,
        parentId: this.option.parentId
      });
      if (res.data) {
        this.imageList = res.data[0].children
      }
    },

    async excellentPartMemberPageApi(reset = true) {
      const params = this.generalQueryData(reset);
      const res = await peopleApi.excellentPartMemberPageApi(params);
      let _goodsList = []
      if (res.data) {
        const {
          list = [], total = 0
        } = res.data;
        if (reset) {
          _goodsList = list;
        } else {
          _goodsList = this.doctorPageList.concat(list);
        }
        this.pageNo = params.pageNo || 1;
        this.total = total;
        this.doctorPageList = _goodsList
      }
    },

    async agencyPageApi(reset = true) {
      const params = this.generalQueryData(reset);
      const res = await peopleApi.agencyPageApi(params);
      let _goodsList = []
      if (res.data) {
        const {
          list = [], total = 0
        } = res.data;
        if (reset) {
          _goodsList = list;
        } else {
          _goodsList = this.agencyPageList.concat(list);
        }
        this.pageNo = params.pageNo || 1;
        this.total = total;
        this.agencyPageList = _goodsList
      }
    },

    async partyBranchApi(reset = true) {
      const params = this.generalQueryData(reset);
      const res = await peopleApi.partyBranchApi(params);
      if (res.data) {
        const {
          list = [], total = 0
        } = res.data;
        const _goodsList = reset ? list : this.partyBranchList.concat(list);
        this.pageNo = params.pageNo || 1;
        this.total = total;
        this.partyBranchList = _goodsList
      }
    },

    // 调用函数
    callFcuntion() {
      const ApiConfig = {
        sonGuide1: {
          api: this.partyBranchApi
        },
        '五星党员': {
          api: this.excellentPartMemberPageApi
        },
        sonGuide3: {
          api: this.agencyPageApi
        },
        sonGuide4: {
          api: this.agencyPageApi
        },
        sonGuide5: {
          api: this.agencyPageApi
        }
      };
      const obj = ApiConfig[this.option.path || this.option.name];
      if (obj.api) {
        obj.api();
      }
    },

    // 分页参数处理事件
    generalQueryData(reset = false) {
      const {
        pageNo,
        pageSize
      } = this;
      const params = {
        pageNo: 1,
        pageSize: 10
      };
      if (this.option.path === 'sonGuide4') {
        params.agencyType = 1;
      }
      if (this.option.path === 'sonGuide5') {
        params.agencyType = 2;
      }
      if (this.option.path === 'sonGuide3') {
        params.agencyType = 3;
      }
      if (reset) {
        return params;
      }
      return {
        ...params,
        pageNo: pageNo + 1,
        pageSize
      };
    },

    jumpDetail(event) {
      const {
        id
      } = event.currentTarget.dataset;
      uni.navigateTo({
        url: `/packages/people/pages/guide-detail/guide-detail?id=${id}`
      });
    },

    toArea(event) {
      const {
        item
      } = event.currentTarget.dataset;
      if (this.option.path === 'sonGuide1') {
        item.agencyName = '支部详情';
        item.agencyType = '12101';
      }
      uni.navigateTo({
        url: `/packages/people/pages/area/area?orgId=${item.orgId}&name=${item.agencyName}&type=${item.agencyType}&id=${item.id}`
      });
    }
  }
};
</script>
<style lang="less">
page {
  --rate-icon-size: 26rpx; // 评分大小
  --rate-icon-full-color: var(--item-dominant-color); // 评分选中颜色
  --rate-icon-gutter: 3rpx; // 评分图标之前的距离
}

.people-custom-swiper {
  width: 100%;
  height: 330rpx;
  position: relative;

  .custom-swiper-img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.guide-list {
  margin-top: 28rpx;
  padding: 0 32rpx;
  flex-wrap: wrap;

  .guide-item {
    flex-shrink: 0;
    width: 218rpx;
    height: 100%;
    margin-right: 16rpx;
    margin-top: 27rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .guide-img {
      width: 218rpx;
      height: 218rpx;
      margin-bottom: 16rpx;
    }

    .guide-name {
      margin-bottom: 17rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      line-height: 32rpx;
    }
  }
}

.rural-list {
  margin-top: 45rpx;
  padding: 0 40rpx;
  flex-wrap: wrap;

  .guide-item {
    flex-shrink: 0;
    width: 326rpx;
    height: 100%;
    margin-right: 16rpx;
    margin-bottom: 40rpx;

    &:nth-child(2n) {
      margin-right: 0;
    }

    .guide-img {
      width: 326rpx;
      height: 168rpx;
      margin-bottom: 24rpx;
    }

    .guide-name {
      font-size: 32rpx;
      font-weight: 400;
      color: #333333;
      line-height: 32rpx;
    }
  }
}

.second-section {
  margin-top: 55rpx;
  padding: 0 40rpx 0;

  .section-item {
    padding: 14rpx 0;
    border-bottom: 1px solid #e1e1e1;

    &:first-child {
      padding-top: 0;
    }

    .section-item-left {
      margin-left: 32rpx;

      .consult-content-title {
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
        margin-bottom: 24rpx;
      }

      // .consult-content-block {
      //   font-size: 24rpx;
      //   font-weight: 400;
      //   color: #999999;
      // }
    }

    .section-item-right {
      width: 300rpx;
      height: 140rpx;
      border-radius: 8rpx;
    }
  }
}
</style>