ch-tgr/src/views/Tabbars/Mall.vue

<template>
  <div class="mall" :style="bgStyle" style="background-size: 100% 62.933vw;background-repeat: no-repeat;">
    <div class="top">
      <div class="search_box">
        <img src="/img/search.png" alt="">
        <input v-model="searchParams.Key" placeholder="请输入关键词搜索"
          @search="$navigate('Category?Key=' + searchParams.Key)">
        <button @click="$navigate('Category?Key=' + searchParams.Key)" :style="btnStyle">搜索</button>
      </div>
      <div class="banner">
        <van-swipe :autoplay="3000" indicator-color="white" @change="onSwipeChange">
          <van-swipe-item v-for="item in data.Carousel">
            <a @click="item.link ? $openUrl(item.link) : ''"><img :src="$file(item.img) || '/img/avatar.png'"
                width="100%"></a>
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- <div class="label_box">
        <div class="">
          <img src="/img/mall_i1.png" alt="">
          <span>
            官方商城
          </span>
        </div>
        <div class="">
          <img src="/img/mall_i2.png" alt="">
          <span>
            正品保障
          </span>
        </div>
        <div class="">
          <img src="/img/mall_i3.png" alt="">
          <span>
            售后无忧
          </span>
        </div>
      </div> -->
    </div>

    <div class="cg_bigbox">
      <div class="top">
        <div class="left_box">
          <img src="/img/safity.png" alt="">
          <span>安心购</span>
        </div>
        <div class="right_box">
          <span>官方商城</span> | <span>正品保障</span> | <span>售后无忧</span>
        </div>
      </div>

      <div class="Category_box">
        <div class="Category_item" v-for="item in data.SpuType?.slice(0, 9)"
          @click="$navigate(`Category?id=${item.id}`)">
          <img :src="$file(item.img)">
          <span>{{ item.name }}</span>
        </div>
        <div class="Category_item" @click="$navigate('Category')">
          <img src="/img/mall_i15.png">
          <span>全部分类</span>
        </div>
      </div>
    </div>

    <!-- Style1 -->
    <!-- <div class="banner_style1" v-if="hotData.length > 0">
       Style1
      <div class="top">
        <div class="left">
          <img src="/img/rexiao.png" alt="">
          <span>热门好物抢不停</span>
        </div>
        <span @click="$navigate('Category?SortType=2')">
          更多
          <van-icon name="arrow" />
        </span>
      </div>

      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" show-indicators indicator-color="#565656">
          <van-swipe-item v-for="item in hotData">
            <div class="item" v-for="list in item" @click="$navigate('GoodsDetail?id=' + list.id)">
              <div class="_img">
                <img :src="$file(list.img)" alt="">
                v-if="list.MemberPoint > 0"
                <div class="_point_">
                  <img src="/img/mall-hot-i.png">
                  <div>赠<b>{{ list.gongxianzhi }}</b>贡献值</div>
                </div>
              </div>
              <span class="title">
                {{ list.name }}
              </span>
              <span class="sales">
                已售 {{ list.salenums }}
              </span>
              <span class="oprice">
                ￥{{ list.originalprice.toFixed(2) }}
              </span>
              <div>
                <span class="price">
                  <span class="money">￥</span>
                  {{ list.saleprice?.toFixed(2) }}
                </span>

                <img class="r" src="/img/cart.png" alt="">
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>

    </div> -->

    <!-- Style2 -->
    <div class="banner_style2" v-if="hotData.length > 0">
      <div class="top">
        <img src="/img/hot.png" alt="">
        <b>爆款好物</b>
        <p>超多会员已购买</p>
        <span class="r" @click="$navigate('Category?SortType=2')">
          查看更多
          <van-icon name="arrow" />
        </span>
      </div>

      <div class="banner">
        <div class="item" v-for="list in hotData" @click="$navigate('GoodsDetail?id=' + list.id)">
          <img :src="$file(list.img)" alt="">
          <span class="title">
            {{ list.name }}
          </span>
          <span class="oprice">
            ￥{{ list.originalprice?.toFixed(2) }}
          </span>
          <span class="price">
            ￥{{ list.saleprice?.toFixed(2) }}
          </span>
        </div>
      </div>
    </div>

    <div class="goods">
      <van-tabs v-model:active="activeType" :ellipsis="false" @change="changeTab" line-height="2vw" line-width="10.67vw"
        color="#f48fa7" title-active-color="#000" title-inactive-color="#4e4e4e">
        <van-tab name="" title="新品">
        </van-tab>
        <van-tab v-for="item in typeData" :name="item.id" :title="item.name">
        </van-tab>
      </van-tabs>

      <BaseList ref="BaseList" url="/v1/client/EProsClient" :params="searchParams" :parseData="res => res.data.items"
        class="goods_box">
        <template #default="{ item }">
          <div class="good" :key="item.id" @click="$navigate('GoodsDetail?id=' + item.id)">
            <img :src="$file(item.img)" alt="">
            <div>
              <span class="title">
                {{ item.name }}
              </span>
              <!-- <div class="zeng_box">
                <span>赠</span>
                <div>
                  {{ item.gongxianzhi }}贡献值
                </div>
              </div> -->
              <span class="oldprice">
                ￥{{ item.originalprice.toFixed(2) }}
              </span>
              <div class="price">
                <div>
                  <span class="money">￥</span>
                  <span v-html="$toMoney(item.saleprice, 'b')"></span>
                </div>

                <!-- <img style="width:5.6vw;height: 5.07vw;margin-bottom: 0;" class="r" src="/img/cart.png" alt=""> -->
              </div>
            </div>
          </div>
        </template>
      </BaseList>
      <!-- <div class="goods_box">
        <div class="good" v-for="item in goodsList" @click="$navigate('GoodsDetail?id=' + item.id)">
          <img :src="$file(item.Icon)" alt="">
          <div>
            <span class="title">
              {{ item.SpuName }}
            </span>
             v-if="item.MemberPoint > 0"
            <div class="zeng_box">
              <span>赠</span>
              <div>
                {{ item.MemberPoint }}贡献值
              </div>
            </div>
            <span class="oldprice">
              ￥{{ item.OriginPrice.toFixed(2) }}
            </span>
            <div class="price">
              <div>
                <span class="money">￥</span>
                <span v-html="$toMoney(item.Price, 'b')"></span>
              </div>

              <img style="width:5.6vw;height: 5.07vw;margin-bottom: 0;" class="r" src="/img/cart.png" alt="">
            </div>
          </div>

          <div class="sell-out" v-if="item.StockQty <= 0">
            <div>已售罄</div>
          </div>
        </div>
      </div> -->
    </div>

  </div>
</template>

<script>
export default {
  name: 'Mall',
  // emits: ['changeTabbar'],
  activated() {
    if (this._skipActivatedRefresh) {
      this._skipActivatedRefresh = false
      return
    }
    this.$refs.BaseList?.refresh()
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      activeType: '',
      _skipActivatedRefresh: true,
      searchParams: {
        mallstate: 3,
        pid: '',
      },
      show: true,
      data: {
        Carousel: [],
        SpuType: [],
      },
      hotData: [],
      typeData: [],
      bgcolor: '',
    }
  },
  methods: {
    init() {
      Promise.all([
        this.$get(`/v1/client/EProcatesClient`).then(res => {
          this.data.SpuType = res.data
        }),
        this.$get(`/v1/client/CSlidesClient?pid=2`).then(res => {
          this.data.Carousel = res.data
          if (res.data?.[0]?.bgcolor) {
            this.bgcolor = res.data[0].bgcolor
          }
        }),
        this.$get('/v1/client/EProsClient?recommend=true').then(res => {
          this.hotData = res.data.items;
        }),
        this.$get('/v1/client/EProcatesClient/1').then(res => {
          this.typeData = res.data
          this.searchParams.pid = res.data?.[0]?.id || ''
        }),
      ]).then(() => {
        // 初始化完成后，允许 activated 触发 refresh
        this._skipActivatedRefresh = false
      }).catch(err => {
        this.$showFailToast(err.message || '加载失败')
      });
    },
    groupItems(items, num) {
      const grouped = [];
      for (let i = 0; i < items.length; i += num) {
        grouped.push(items.slice(i, i + num));
      }
      return grouped;
    },
    changeTab(type) {
      this.searchParams.pid = type;
      this.$refs.BaseList.refresh()
    },
    onSwipeChange(index) {
      const item = this.data.Carousel[index]
      this.bgcolor = item?.bgcolor || ''
    }
  },
  computed: {
    bgStyle() {
      if (this.bgcolor) {
        return {
          background: `linear-gradient(${this.bgcolor}, #f5f5f5)`
        }
      }
      return {}
    },
    btnStyle() {
      if (this.bgcolor) {
        return {
          background: this.bgcolor
        }
      }
      return {}
    }
  },
}
</script>


<style>
.index-bg {
  z-index: -1;
  background-color: #f5f5f5;
  background-size: 100% 53.333vw;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  position: absolute;
}

.finished-text {
  text-align: center;
  padding: 20px 0;
  color: #999;
  width: 100%;
}
</style>