chelvc-custom/src/pages/client/clientUser/collectList.vue

<template>
  <view class="collect">
    <view class="collect_list">
      <u-tabs :list="listCollect" @click="clickCollect" lineWidth="30" lineColor="#5992bb" :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }" :inactiveStyle="{
          color: '#606266',
          transform: 'scale(1)',
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" />
    </view>
    <view>
      <view v-if="init_list.length > 0">
        <view class="text">以下是您收藏的商品服务</view>
        <!-- 收藏的服务 -->
        <serviceItem v-if="indexs == 0" :item="init_list" @uploadIniList="uploadIniList"></serviceItem>
        <goodsItem v-else :item="init_list" @uploadIniList="uploadIniList" />
      </view>
      <u-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
    </view>
  </view>
</template>

<script>
  import serviceItem from '@/components/service/index.vue';
  import goodsItem from "@/components/service/goodsItem.vue"
  import { maintainFavoritePaging, getFavouriteGoods } from '@/api/client/mine.js';
  import { getCurrentLocation } from '@/api/client/home';
  import { mapGetters } from "vuex"
  export default {
    components: {
      serviceItem,
      goodsItem
    },
    data() {
      return {
        queryParams: {
          size: 10,
          type: 'MERCHANT',
          region: null, //地区编码
          longitude: null , //经度
          latitude: null, //纬度
        },
        init_list: [],
        listCollect: [{
            id: 1,
            name: '商家',
          },
          {
            id: 1,
            name: '服务',
          },
        ],
        indexs: 0,

      };
    },
	mounted() {
	  let { latitude , longitude , region } = this.location
	  this.queryParams.latitude = latitude
	  this.queryParams.longitude = longitude
	  this.queryParams.region = region
	  this.handlerInitList();
	},
	computed:{
		  ...mapGetters(['location'])
	},
    methods: {
      // 初始化商家列表信息
      handlerInitList() {
        maintainFavoritePaging(this.queryParams).then(res => {
          if (res.code === 'OK' && res.data) {
            res.data.map(rs => {
              this.init_list.push(rs.simpleMerchantVO);
            });
          } else {
            uni.showToast({
              title: '数据请求失败',
              icon: 'none',
            });
          }
        });
      },
      // 初始化服务列表
      handlerInitGoodsList() {
        getFavouriteGoods().then(res => {
          if (res.code === 'OK' && res.data) {
            res.data.map(rs => {
              this.init_list.push(rs.goods);
            });
          } else {
            uni.showToast({
              title: '数据请求失败',
              icon: 'none',
            });
          }
        });
      },
      clickCollect(e) {
        this.init_list = []
        this.indexs = e.index
        switch (e.index) {
          case 0:
            this.handlerInitList()
            break;
          case 1:
            this.handlerInitGoodsList()
            break;
        }
      },
      uploadIniList(e) {
        this.init_list = []
        if (e == 1) {
          this.handlerInitGoodsList()
          this.indexs = 1
        } else {
          this.handlerInitList()
          this.indexs = 0
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  .collect {
    min-height: 100vh;
    background-color: #efefef;

    &_list {
      display: flex;
      height: 70rpx;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      margin-bottom: 40rpx;
    }

    .text {
      text-align: center;
      padding: 40rpx;
      color: #999;
    }
  }
</style>