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

<template>
  <view>
    <custom-nav-bar :left-text="options.name" left-arrow />
    <image class="custom-swiper-img" mode="aspectFill"
      :src="InfoObj.image ? InfoObj.image : '/static/packages/people/images/icon10.png'"></image>

    <view class="area" v-if="options.type === '1' || options.type === '2'">
      <view class="tabs-list flex flex-center">
        <view :class="'tabs-item ' + (index === ruralActive ? 'tabs-active' : '')" :data-index="index" @tap="tabsSwitch"
          v-for="(item, index) in ruralTabs" :key="index">
          {{ item.name }}
        </view>
      </view>
      <view class="area-list flex" v-if="ruralActive">
        <view class="area-item" :data-item="item" @tap="toArea" v-for="(item, index) in deptList" :key="index">
          {{ item.name }}
        </view>
      </view>
      <view class="rich" v-else>
        <rich-text :nodes="InfoObj.content"></rich-text>
      </view>
    </view>

    <view class="page-content" v-if="options.type === '3'">
      <view class="title flex">
        <text class="title-name">村务公开详情</text>
      </view>
      <view class="cell-list" v-if="villageAffairsPageList.length">
        <view class="cell" :data-item="item" @tap="headleDetails" v-for="(item, index) in villageAffairsPageList"
          :key="index">
          <view class="cell-left flex flex-v-center flex1">{{ item.title }}</view>

          <view class="cell-right">
            <view class="cell-right-number"></view>
            <view class="arrow">
              <van-icon name="arrow" color="#e1e1e1" size="32rpx" />
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <van-empty description="暂无数据" />
      </view>
    </view>

    <view class="party" v-if="options.type === '12101'">
      <view class="rich">
        <rich-text :nodes="InfoObj.content"></rich-text>
      </view>

      <view class="tabs-list flex flex-center">
        <view :class="'tabs-item ' + (index === ruralActive ? 'tabs-active' : '')" :data-index="index" @tap="tabsSwitch"
          v-for="(item, index) in ruralTabs" :key="index">
          {{ item.name }}
        </view>
      </view>

      <view class="party-list flex flex-col" v-if="ruralActive">
        <view class="section-item flex flex-between" :data-item="item" @tap="headleDetails"
          v-for="(item, index) in partyEventPageList" :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.title }}</view>
            <view class="consult-content-block">{{ item.createTime }}</view>
          </view>
        </view>
      </view>
      <view class="rich2" v-else>
        <rich-text v-if="partyEventPageList.length !== 0" :nodes="partyEventPageList[0].content"></rich-text>
      </view>
    </view>
  </view>
</template>
<!-- <script module="util" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
// const app = getApp();
// const { peopleApi } = app.globalData.api;
import * as peopleApi from '@/api/peopleApi';
export default {
  components: {},
  data() {
    return {
      options: {
        name: '',
        type: ''
      },

      InfoObj: {
        image: false,
        content: ''
      },

      // 富文本渲染
      ruralActive: 0,

      // tabs下标
      ruralTabs: [],

      deptList: [],
      villageAffairsPageList: [],
      partyEventPageList: [],
      content: ''
    };
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('options', options);
    this.options = options
    if (options.type === '1' || options.type === '2') {
      const typeTbas = {
        1: [{
          name: '乡镇农业产业'
        },
        {
          name: '村列表'
        }
        ],
        2: [{
          name: '街道简介'
        },
        {
          name: '社区列表'
        }
        ]
      };
      this.ruralTabs = typeTbas[Number(options.type)] || []
      this.tabsSwitch();
    }
    if (options.type === '3') {
      this.villageAffairsPageApi();
      this.getVillageAffairsGetApi();
    }
    if (options.type === '12101') {
      this.ruralTabs = [{
        name: '优秀事迹'
      },
      {
        name: '党建活动'
      }
      ]
      this.partyBranchGetApi();
      this.tabsSwitch();
    }
  },
  methods: {
    // 切换tabs
    tabsSwitch(event) {
      if (event) {
        const {
          index
        } = event.currentTarget.dataset;
        this.ruralActive = index || 0
      }
      if (['1', '2'].includes(this.options.type)) {
        if (this.ruralActive) {
          this.deptListApi();
        } else {
          this.agencyContentGetApi();
        }
      }
      if (['12101'].includes(this.options.type)) {
        if (this.ruralActive) {
          this.partyEventPageApi(2);
        } else {
          this.partyEventPageApi(1);
        }
      }
    },

    // 获取简介
    // TODO:10月13日之前读的是 agencyContentGetOrgIdApi 这个接口
    async agencyContentGetApi() {
      const res = await peopleApi.agencyGetApi({
        id: this.options.id,
        orgId: this.options.orgId
      });
     this.InfoObj = this.generalFunction(res)
    },

    // 获取党支部详情
    async partyBranchGetApi() {
      const res = await peopleApi.partyBranchGetApi({
        id: this.options.id
      });
      res.data.title = res.data.name || '';
      res.data.content = res.data.descInfo || '';
      this.InfoObj = this.generalFunction(res)
    },

    // 获取村务公开详情
    async getVillageAffairsGetApi() {
      const res = await peopleApi.agencyGetApi({
        id: this.options.id
      });
      res.data.title = res.data.name || '';
      res.data.content = res.data.descInfo || '';
      this.InfoObj = this.generalFunction(res)
    },

    // 获取列表
    async deptListApi() {
      const res = await peopleApi.deptListApi({
        parentId: this.options.orgId
      });
     this.deptList = res.data
    },

    // 获取村务公开详情列表
    async villageAffairsPageApi() {
      const params = {
        pageNo: 1,
        pageSize: 99,
        agencyId: this.options.id
      };
      const res = await peopleApi.villageAffairsPageApi(params);
      if (res.data) {
        const {
          list = []
        } = res.data;
        this.villageAffairsPageList = list
      }
    },

    // 获得党活动事件分页
    async partyEventPageApi(eventType) {
      const params = {
        pageNo: 1,
        pageSize: 99,
        eventType,
        // 字典
        partyBranchId: this.options.id
      };
      const res = await peopleApi.partyEventPageApi(params);
      if (res.data) {
       let list = res.data.list
        if (eventType === 1) {
          let setList = list.map((item) => {
            const e = item;
            // e.createTime = app.globalData.util.timeFormat(e.createTime);
            e.content = e.content
              .replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
              .replace(/&lt;/g, '<')
              .replace(/&gt;/g, '>')
              .replace(/&amp;nbsp;/g, ' ')
              .replace(/&quot;/g, '"');
            return e;
          });
          console.log(setList)
          this.partyEventPageList = setList
          return;
        }

        this.partyEventPageList = list
      }
    },

    // 通用函数
    generalFunction(res) {
      if (res.data && res.data.createTime) {
        // res.data.createTime = app.globalData.util.timeFormat(res.data.createTime);
        if (res.data.introduce) {
          res.data.content = res.data.introduce;
        }
        if (res.data.content) {
          res.data.content = res.data.content
            .replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
            .replace(/&lt;/g, '<')
            .replace(/&gt;/g, '>')
            .replace(/&amp;nbsp;/g, ' ')
            .replace(/&quot;/g, '"');
        }
        return res.data;
      }
      return {};
    },

    toArea(event) {
      const {
        item
      } = event.currentTarget.dataset;
      uni.navigateTo({
        url: `/packages/people/pages/area-detail/area-detail?orgId=${item.id}&name=${item.name}`
      });
    },

    headleDetails(event) {
      const {
        item
      } = event.currentTarget.dataset;
      uni.navigateTo({
        url: `/packages/public/pages/details/details-no-ops?name=村务公开详情&referId=${item.id}`
      });
    }
  }
};
</script>
<style lang="less">
.custom-swiper-img {
  width: 100%;
  height: 400rpx;
  display: block;
}

.rich {
  padding: 45rpx;
  font-size: 30rpx;
  font-weight: 400;
  color: #222222;
  line-height: 60rpx;
}

.tabs-list {
  .tabs-item {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    line-height: 32rpx;
    position: relative;

    &:not(:last-child) {
      margin-right: 55rpx;
    }
  }

  .tabs-active {
    color: #f5001c;

    &::after {
      content: '';
      position: absolute;
      left: 4rpx;
      bottom: 0;
      z-index: -1;
      // width: 175rpx;
      width: 95%;
      height: 10rpx;
      background: var(--title-guides-color);
      border-radius: 2rpx;
    }
  }
}

.area {
  margin-top: 60rpx;

  .area-list {
    padding: 46rpx 40rpx;
    flex-wrap: wrap;

    .area-item {
      // flex: 1 0 0;
      flex-shrink: 0;
      width: 326rpx;
      height: 80rpx;
      background: #fff6f7;
      border-radius: 8rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      line-height: 80rpx;
      text-align: center;

      &:nth-child(2n) {
        margin-left: 16rpx;
      }

      &:nth-child(n + 3) {
        margin-top: 16rpx;
      }
    }
  }
}

.page-content {
  margin-top: 70rpx;
  padding: 0 40rpx;

  .title {
    font-size: 36rpx;
    font-weight: 500;
    color: #000000;
    line-height: 36rpx;
    padding-left: 6rpx;

    .title-name {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: -6rpx;
        bottom: 0;
        z-index: -1;
        // width: 175rpx;
        width: 115%;
        height: 10rpx;
        background: var(--title-guides-color);
        border-radius: 2rpx;
      }
    }
  }

  .cell-list {
    margin-top: 20rpx;

    .cell {
      width: 100%;
      padding: 24rpx 0;
      background: #ffffff;
      border-bottom: 1px solid #efefef;
      display: flex;
      justify-content: space-between;

      .cell-left {
        height: 100%;
        font-size: 30rpx;
        font-weight: 400;
        color: #007bd7;
        line-height: 30rpx;
      }

      .cell-right {
        height: 100%;
        width: 40rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .cell-right-number {
          font-size: 32rpx;

          font-weight: 400;
          color: #666666;
          margin-right: 28rpx;
        }
      }
    }
  }
}

.party {
  .rich {
    padding: 60rpx 45rpx;
  }

  .party-list {
    margin-top: 55rpx;
    padding: 0 40rpx 0;

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

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

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

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

        .consult-content-block {
          font-size: 28rpx;
          font-weight: 400;
          color: #666666;
          line-height: 28rpx;
        }
      }

      .section-item-right {
        width: 214rpx;
        height: 140rpx;
        border-radius: 8rpx;
      }
    }
  }

  .rich2 {
    padding: 44rpx 45rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #222222;
    line-height: 60rpx;
  }
}
</style>