barter-app/pages/property/collection/collection.vue

<template>
  <view class="Collect-list">
    <!--有收藏的店铺 -->
    <view class="list-item" v-if="lists.length>0" v-for="(item,index) in lists" :key="index">
      <view class="list-top">
        <view class="list-top-left">
          <image :src="item.cover" mode="aspectFill" class="list-banner"></image>
          <view class="shop-info">
            <view class="title ellipsis">{{item.name}}</view>
            <view class="urate">
              <u-rate :current="item.star" size="28rpx" :disabled="true"></u-rate>
            </view>
            <view class="des">销量:<span>100</span>件 <span> </span> 库存:<span>2524</span>件</view>
          </view>
        </view>
        <view class="list-top-right" @click="onOpenWechat(item)">进店逛逛</view>
      </view>
      <view class="list-bottom">
        <view class="list-bottom-item" v-for="(it,idx) in item.goods" :key='idx'>
          <image class="goods-img" :src="it.cover" mode="aspectFill" @click="goGoods(it.goods_id)"></image>
          <view class="money">￥ {{it.price.price_min}}</view>
        </view>
      </view>
    </view>

    <!-- 没有收藏的店铺 -->
    <no-list name='no-shop' v-if="lists.length === 0" txt="您还没有收藏任何企业哦~" />

    <!-- <u-toast ref="uToast" /> -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    shopSubscribeList
  } from '@/apis/interfaces/mine'
  export default {
    data() {
      return {
        lists: [],
        page: 1,
        has_more: true,
      };
    },

    onLoad(e) {
      this.getList()
    },
    onReachBottom() {
      if (this.has_more) {
        this.page = this.page + 1
        this.getGoodsByCompanyidCaregoryid()
      } else {
        this.$refs.uToast.show({
          title: '吼吼吼~我是有底的~',
          type: 'primary',
          duration: 3000
        })
      }
    },
    methods: {
      // 获取列表
      getList() {
        shopSubscribeList(this.page).then(res => {
          console.log(res)
          this.lists = this.lists.concat(res.data)
          if (res.page.has_more) {
            this.has_more = true
          } else {
            this.has_more = false
          }
        }).catch(err => {
          this.$refs.uToast.show({
            title: err.message,
            type: 'primary',
            duration: 3000
          })
        })
      },
	  // 打开微信小程序
	  onOpenWechat(e){
	  	plus.share.getServices(res => {
	  		let sweixin = null;
	  		for(let val of res){
	  			if(val.id === 'weixin'){
	  				sweixin = val
	  			}
	  		}
	  		/**  以此为例子 显示跳转引导页     
	  		*    'index_4'
	  		*     index   跳小程序企业首页
	  		*     4       企业id
	  		**/
	  		if(sweixin != null){
	  			sweixin.launchMiniProgram({
	  				id	: e.original_id,
	  				path: 'pages/login/guide?scene=index_' + e.company_id,
	  			})
	  		}else{
	  			uni.showToast({
	  				title: '当前环境不支持打开微信小程序',
	  				icon : 'none'
	  			})
	  		}
	  	})
	  },
      // 跳转商城
      goShop(company_id) {
        uni.setStorageSync('company_id', company_id)
        uni.setStorageSync('refresh',true)
        this.$Router.pushTab({
          name: 'Goods'
        })
      },
      goGoods(id) {
		this.$Router.push({name: 'goodsDetails', query: {id: id}})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Collect-list {
    .list-item {
      border-top: solid 20rpx #F7F7F7;
      padding: 0 30rpx 30rpx 30rpx;

      .list-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 30rpx 0;
        font-size: $title-size*0.94;
        border-bottom: solid 1rpx #f7f7f7;

        .list-top-left {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          box-sizing: border-box;

          .title {
            width: 380rpx;
            font-size: $title-size*1;
            font-weight: 400;
          }

          .urate {
            padding: 10rpx 0;
          }

          .des {
            // padding-top: $padding*0.8;
            font-size: $title-size * 0.8;
            color: #999;

            span {
              color: #666;
              padding: 0 10rpx;
            }
          }

          .list-banner {
            width: 120rpx;
            margin-right: $margin*1.5;
            height: 120rpx;
            border-radius: 4rpx;
          }
        }

        .list-top-right {
          border: solid 1rpx $main-color;
          color: $main-color;
          display: inline-block;
          padding: 8rpx 16rpx;
          font-size: $title-size *0.8;
          border-radius: 4rpx;
        }
      }

      .list-bottom {
        margin-top: 20rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        // padding: 0 30rpx;

        .list-bottom-item {
          width: 160rpx;
          height: 160rpx;
          position: relative;

          .goods-img {
            width: 100%;
            height: 100%;
          }

          .money {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: rgba($color: #000000, $alpha: 0.5);
            color: #fff;
            padding: 2rpx 8rpx;
            font-size: $title-size *0.9;
          }
        }
      }
    }
  }
</style>