wx-qhb/pageC/mineFollow/mineFollow.vue

<template>
  <view class="page">
    <u-navbar @leftClick="rightClick" :autoBack="true">
      <view class="tab" slot="center">
        <view
          class=""
          :class="{ commodity: follow == 0 }"
          @click="tabSwitch(0)"
        >
          {{ i18n.mineCommodity }}
        </view>
        <view :class="{ commodity: follow == 1 }" @click="tabSwitch(1)">
          {{ i18n.team }}
        </view>
      </view>
    </u-navbar>
    <!-- 关注商品列表 -->
    <view class="content" v-if="follow == 0">
      <view
        class="commodity-detail"
        v-for="item in commodityList"
        @click="toDetail(item)"
      >
        <image
          :src="item.merchant_goods.goods.image"
          class="commodity-img"
          mode=""
        ></image>
        <view class="commodity-right">
          <view class="commodity-title">
            {{ item.merchant_goods.goods.name_cn }}
          </view>
          <view class="commodity-follow">
            <text v-show="item.interest_num <= 1000"
              >{{ item.interest_num }}
            </text>
            <text v-show="item.interest_num > 1000">1000+</text
            >{{ i18n.people }}
          </view>
          <view class="commodity-price">
            <text class="symbol">￥</text>
            <text class="integer">{{
              item.merchant_goods.goods.price.split(".")[0]
            }}</text
            >.
            <text class="decimal">{{
              item.merchant_goods.goods.price.split(".")[1]
            }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 关注商品列表 -->

    <!-- 关注团长列表 -->
    <view class="content" v-if="follow == 1">
      <view class="team-content" v-for="item in teamList">
        <image :src="item.merchant.image" class="header-img" mode=""></image>
        <view class="team-right">
          <view class="">
            <view class="name">
              {{ item.merchant.merchant_name }}
            </view>
            <view class="score">
              <u-rate
                count="5"
                disabled
                :allowHalf="true"
                :gutter="1"
                inactiveColor="#ffacab"
                activeColor="#FF1515"
                v-model="item.merchant.score"
                :size="14"
              ></u-rate>
              <text class="num">{{ item.merchant.score }}</text>
            </view>
          </view>
          <button class="check" @click="toHomepage">{{ i18n.see }}</button>
        </view>
      </view>
    </view>
    <!-- 关注团长列表 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      follow: 0,
      commodityList: [],
      teamList: [],
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
      this.getInfoList(num);
    },
    rightClick() {
      console.log(111);
    },
    toHomepage() {
      uni.navigateTo({
        url: "/pageD/homepage/homepage",
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pageA/productdetails?id=${item.merchant_goods.id}`,
      });
    },
    getInfoList(num) {
      uni.$u.http.get(`api/interest/list?interest_type=${num}`).then((res) => {
        if (num) {
          this.teamList = res.data;
        } else {
          this.commodityList = res.data;
        }
      });
    },
  },
  mounted() {
    this.getInfoList(0);
  },
};
</script>

<style scoped lang="scss">
.page {
  background-color: #fff;
  height: 100vh;
  position: relative;

  .tab {
    display: flex;
    justify-content: space-between;
    width: 240rpx;
    // margin: 0 auto;
    font-size: 36rpx;
    // margin-right: 60rpx;

    .commodity {
      position: relative;
      font-weight: 600;
    }

    .commodity::before {
      content: "";
      display: block;
      height: 8rpx;
      width: 100%;
      background: linear-gradient(to right, #f83224, #fff);
      position: absolute;
      bottom: 5rpx;
      opacity: 0.8;
    }
  }

  .content {
    position: absolute;
    top: 190rpx;

    .team-content {
      display: flex;
      height: 168rpx;
      align-items: center;
      width: 702rpx;
      border-top: 2rpx solid rgba(151, 151, 151, 0.2);
      margin-left: 24rpx;

      .team-right {
        display: flex;
        justify-content: space-between;
        width: 96%;
        align-items: center;

        .name {
          font-size: 30rpx;
          font-weight: 600;
          margin-bottom: 14rpx;
        }

        .score {
          width: 210rpx;
          height: 28rpx;
          background-color: rgba(255, 27, 0, 0.1);
          display: flex;
          border-radius: 12rpx;
          justify-content: space-around;

          .num {
            font-size: 22rpx;
            color: #ff1515;
            font-weight: 600;
          }

          ::v-deep .u-icon__icon {
            color: #f83224 !important;
          }
        }

        .check {
          width: 164rpx;
          height: 60rpx;
          border: 2rpx solid #f83224;
          color: #f83224;
          background-color: #fff;
          border-radius: 38rpx;
          font-size: 26rpx;
          margin: 0;
          padding: 0;
          text-align: center;
          line-height: 60rpx;
        }
      }
    }

    .header-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .commodity-detail {
      display: flex;
      padding: 0 24rpx;
      margin: 16rpx auto;

      .commodity-img {
        width: 204rpx;
        height: 204rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
      }

      .commodity-right {
        width: 466rpx;
      }

      .commodity-title {
        color: #222;
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 12rpx;
        // min-height: 78rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .commodity-follow {
        color: #777;
        font-size: 28rpx;
        margin-bottom: 14rpx;
      }

      .commodity-price {
        color: #f83224;
        font-weight: 600;
        margin-top: 20rpx;
      }

      .symbol,
      .decimal {
        font-size: 28rpx;
      }

      .integer {
        font-size: 36rpx;
      }
    }
  }
}
</style>