wx-qhb/pageD/homepage/homepage.vue

<template>
  <view class="page">
    <!-- 页面渐变色背景 -->
    <view class="shadow"> </view>
    <!-- 页面渐变色背景 -->
    <view class="content">
      <view class="top-information">
        <image
          class="user-header"
          src="https://q3.itc.cn/q_70/images03/20240519/1b4e7565b46241b68288ae482412a866.jpeg"
          mode=""
        >
        </image>
        <view class="btn-list">
          <button class="btn-1">
            <u-icon color="#f83224" size="14" name="kefu-ermai"></u-icon>客服
          </button>
          <button v-if="isShow" class="btn-1">
            <u-icon color="#f83224" size="14" name="plus"></u-icon>关注
          </button>
        </view>
        <view class="name"> 小萌优选🔥（每天0元秒杀） </view>

        <view class="score">
          <u-rate
            count="5"
            disabled
            :allowHalf="true"
            :gutter="1"
            inactiveColor="#ffacab"
            activeColor="#FF1515"
            v-model="value"
            :size="12"
          ></u-rate>
          <text class="num">{{ value }}</text>
        </view>
        <view class="sale">
          <view class="">
            销售量 <text space="nbsp">{{ "&nbsp;" }} 2354w+</text>
          </view>
          <text space="nbsp" class="shu"
            >{{ "&nbsp;&nbsp;" }} | {{ "&nbsp;&nbsp;" }}</text
          >
          <view class="">
            评价总数 <text space="nbsp">{{ "&nbsp;" }} 4w+</text>
          </view>
        </view>
      </view>

      <view class="goods-list">
        <view class="tab-list">
          <view :class="{ tab: selectTab == 1 }" @click="switchTab(1)">
            默认
          </view>
          <view :class="{ tab: selectTab == 2 }" @click="switchTab(2)"
            >新品</view
          >
          <view :class="{ tab: selectTab == 3 }" @click="switchTab(3)"
            >销量</view
          >
          <view
            class="price"
            :class="{ tab: selectTab == 4 }"
            @click="switchTab(4)"
            >价格
            <view
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin-left: 6rpx;
                margin-top: 4rpx;
              "
            >
              <u-icon
                name="arrow-up-fill"
                size="6"
                :color="iconUp == 1 ? '#f83224' : '#303133'"
              ></u-icon
              ><u-icon
                :color="iconUp == 2 ? '#f83224' : '#303133'"
                size="6"
                name="arrow-down-fill"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="goods">
          <GoodsCard @toDetail="toDetail" />
          <GoodsCard @toDetail="toDetail" />
          <GoodsCard @toDetail="toDetail" />
          <GoodsCard @toDetail="toDetail" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import GoodsCard from "./component/goodsCard.vue";
export default {
  components: {
    GoodsCard,
  },
  data() {
    return {
      value: 4,
      selectTab: 0,
      iconUp: 0,
      isShow: true,
    };
  },
  onLoad(option) {
    this.isShow = JSON.parse(option.page);
  },
  methods: {
    switchTab(num) {
      this.selectTab = num;
      if (num == 4) {
        // this.iconUp = this.iconUp == 0 ? 1:2
        // if(this.iconUp == 2){
        // 	this.iconUp =1
        // }
        switch (this.iconUp) {
          case 1:
            this.iconUp = 2;
            break;
          case 0:
            this.iconUp = 1;
            break;
          case 2:
            this.iconUp = 1;
            break;
        }
      } else {
        this.iconUp = 0;
      }
    },
    toDetail(item) {
      uni.navigateTo({
        url: "/pageA/productdetails",
      });
    },
    getCommodityList(status = "") {
      let userId;
      uni.getStorage({
        key: "user_info",
        success: ({ data }) => {
          console.log(data);
          userId = data.merchant.id;
        },
      });
      uni.$u.http
        .post(`/api/goods/merchant_goods`, {
          page: 1,
          limit: 10,
          merchant_id: userId,
          status: status,
          keywords: this.keywords,
          source: this.source,
        })
        .then((res) => {
          this.goodsList = res.data;
        });
    },
  },
  mounted() {
    this.getCommodityList();
    //设置顶部导航栏颜色
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#f74639",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  .shadow {
    position: absolute;
    top: 0;
    height: 300px;
    width: 100%;
    background: linear-gradient(#f74639, #f4f4f4);
    z-index: -1;
  }

  .content {
    padding: 20rpx 24rpx;
    margin-top: 76rpx;

    .top-information {
      position: relative;
      border-radius: 20rpx;
      background-color: #fff;
      padding: 28rpx 24rpx;

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

      .user-header {
        width: 164rpx;
        height: 164rpx;
        border-radius: 50%;
        border: 2rpx solid #fff;
        position: absolute;
        top: -80rpx;
        left: 28rpx;
      }

      .btn-list {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .btn-1 {
          border: 2rpx solid #f83224;
          background-color: #fff;
          color: #f83224;
          padding: 0;
          margin: 0;
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 52rpx;
          border-radius: 24rpx;
          line-height: 52rpx;
          font-size: 26rpx;
          padding: 0 28rpx;
          margin-left: 20rpx;
        }
      }

      .name {
        margin-top: 28rpx;
        font-weight: 600;
        font-size: 32rpx;
        color: #333333;
      }

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

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

      .sale {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #777;
        margin-top: 20rpx;

        .shu {
          font-size: 16rpx;
          color: #979797;
          opacity: 0.2;
        }
      }
    }
  }

  .goods-list {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 0 20rpx;
    margin-top: 20rpx;

    .tab-list {
      height: 96rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 26rpx;
      color: #333333;
      border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
      margin-bottom: 20rpx;
      .tab {
        color: #000;
        font-weight: 600;
      }

      .price {
        display: flex;
        align-items: center;
      }
    }
    .goods {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>