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 == 1 }"
          @click="tabSwitch(1)"
        >
          {{ i18n.mineCommodity }}
        </view>
        <view :class="{ commodity: follow == 2 }" @click="tabSwitch(2)">
          {{ i18n.team }}
        </view>
      </view>
    </u-navbar>
    <!-- 关注商品列表 -->
    <view class="content" v-if="follow == 1">
      <view
        class="commodity-detail"
        v-for="item in commodityList"
        @click="toDetail(item)"
      >
        <image :src="item.img" class="commodity-img" mode=""></image>
        <view class="commodity-right">
          <view class="commodity-title">
            {{ item.title }}
          </view>
          <view class="commodity-follow">
            <text v-show="item.followNum <= 1000">{{ item.followNum }} </text>
            <text v-show="item.followNum > 1000">1000+</text>{{ i18n.people }}
          </view>
          <view class="commodity-price">
            <text class="symbol">￥</text>
            <text class="integer">{{ item.price[0] }}</text
            >.
            <text class="decimal">{{ item.price[1] }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 关注商品列表 -->

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

<script>
export default {
  data() {
    return {
      follow: 1,
      commodityList: [
        {
          title:
            "OATLY 噢麦力 咖啡大师醇香燕麦奶早餐奶便携装植物蛋白饮料奶早餐奶便携装植物蛋奶早餐奶便携装植物蛋",
          followNum: 1001,
          price: ["100", "1"],
          img: "https://img.shetu66.com/2023/04/26/1682496554628042.png",
        },
      ],
      teamList: [
        {
          img: "http://pic.imeitou.com/uploads/allimg/240522/10-2405221F140.jpg",
          name: "张三",
          score: 4.5,
        },
        {
          img: "http://pic.imeitou.com/uploads/allimg/240522/10-2405221F140.jpg",
          name: "张三",
          score: 4.5,
        },
      ],
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    tabSwitch(num) {
      this.follow = num;
    },
    rightClick() {
      console.log(111);
    },
    toHomepage() {
      uni.navigateTo({
        url: "/pageD/homepage/homepage",
      });
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pageA/productdetails",
      });
    },
  },
  mounted() {},
};
</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;
          }
        }

        .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>