chelvc-custom/src/PageMine/favourite/favourite - 副本.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/serviceItem.vue';
import goodsItem from './components/goodsItem';
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: #f9f9f9;

  &_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>