xlcs/xlcs-user/pagesSeckill/seckill/seckill.vue

<template>
  <block v-if="empty">
    <u-navbar :background="{ background: 'rgb(255, 101, 0)' }" :border-bottom="false" :is-back="true"
              back-icon-color="#fff">
      <view class="u-font-xl u-flex u-row-center u-type-info-light u-flex-1">
        <view>限时秒杀</view>
      </view>
    </u-navbar>
    <u-empty mode="data"></u-empty>
  </block>

  <block v-else>
    <view class="gg">
      <!-- 利用background-image设置导航的线形渐变色彩 -->
      <u-navbar :background="{ background: 'rgb(255, 101, 0)' }" :border-bottom="false" :is-back="true"
                back-icon-color="#fff">
        <view class="u-font-xl u-flex u-row-center u-type-info-light u-flex-1">
          <view>限时秒杀</view>
        </view>
      </u-navbar>
      <view class="gg-content">
        <view class="gg-content-header">
          <scroll-view :scroll-into-view="`scroll-${navId}`" enable-flex scroll-x>
            <view class="u-flex u-flex-nowrap u-p-r-20 u-p-t-20">
              <!-- 循环滚动内容 -->
              <view
                  v-for="seckillTime in seckillTimeList"
                  :id="`scroll-${seckillTime.id}`"
                  :key="seckillTime.id"
                  class="u-p-l-20 u-p-r-20"
                  @click="changeNav(seckillTime.id, seckillTime.name)"
              >
                <view class="u-text-center" style="width: 140rpx;">
                  <view class="u-font-xl u-type-info-light">{{ seckillTime.name }}</view>
                  <!-- 1：已开抢 2：抢购中 3：即将开抢 -->
                  <block v-if="seckillTime.timeStaus === 1">
                    <u-tag
                        :bg-color="seckillTime.id === navId ? '#ff0000' : '#fff'"
                        :color="seckillTime.id === navId ? '#fff' : '#555'"
                        mode="dark"
                        shape="circle"
                        text="已开抢"
                    />
                  </block>
                  <block v-if="seckillTime.timeStaus === 2">
                    <u-tag
                        :bg-color="seckillTime.id === navId ? '#19be6b' : '#fff'"
                        :color="seckillTime.id === navId ? '#fff' : '#555'"
                        mode="dark"
                        shape="circle"
                        text="抢购中"
                    />
                  </block>
                  <block v-if="seckillTime.timeStaus === 3">
                    <u-tag
                        :bg-color="seckillTime.id === navId ? '#fc0' : '#fff'"
                        :color="seckillTime.id === navId ? '#fff' : '#555'"
                        mode="dark"
                        shape="circle"
                        text="即将开抢"
                    />
                  </block>
                </view>
              </view>
            </view>
          </scroll-view>

          <view class="gg-sv-seckill-container">
            <view class="u-m-20 u-flex u-flex-1 gg-sv-list-container">
              <scroll-view class="gg-sv-list" scroll-y="true">
                <view v-for="seckillSku in seckillSkuList" :key="seckillSku.id" class="gg-sv-item">
                  <u-image :src="seckillSku.imgUrl" border-radius="10rpx" height="400rpx" width="100%"/>
                  <view class="u-font-xl u-p-t-10 u-p-b-10">{{ seckillSku.skuName }}</view>
                  <view>限购数量：{{ seckillSku.seckillLimit }} 销售量：{{ seckillSku.seckillSale }}
                    库存：{{ seckillSku.seckillStock }}
                  </view>
                  <view class="u-flex u-flex-1 u-row-between u-p-t-10 ">
                    <view>
                      价格：
                      <text class="u-font-xl u-type-error">￥{{ seckillSku.seckillPrice }}</text>
                    </view>
                    <view>
                      <u-button shape="circle" size="medium" type="error" @click="gotoProductItem(seckillSku.skuId)">
                        立即抢购
                      </u-button>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </block>
</template>

<script>
export default {
  data() {
    return {
      seckillTimeList: [],
      timeName: '',
      navId: 0,
      seckillSkuList: [],
      empty: false
    };
  },
  methods: {
    // 秒杀时间段获取
    async getSeckillTimeList() {
      const result = await this.$u.api.getFindAllSeckillTimeList();
      this.seckillTimeList = result;
    },
    // 秒杀商品列表
    async geSeckillSkuList(timeName) {
      const result = await this.$u.api.getFindSeckillSkuList({timeName});
      this.seckillSkuList = result;
    },
    // 跳转至商品详情
    gotoProductItem(id) {
      this.$u.route('/pages/homeItem/homeItem?skuId=' + id);
    },
    // 秒杀时间段进行导航切换
    changeNav(navId, timeName) {
      this.navId = navId;
      this.geSeckillSkuList(timeName);
    },
  },
  async mounted() {
    // 获取秒杀时间段与第一个时间段的商品列表
    await this.getSeckillTimeList();
    if (this.seckillTimeList.length > 0) {
      this.navId = this.seckillTimeList[0].id;
      this.timeName = this.seckillTimeList[0].name;
      this.geSeckillSkuList(this.timeName);
    } else {
      this.empty = true;
    }
  }
};
</script>

<style lang="scss">
body {
  background-color: $u-bg-color;
}

.gg {
  &-content {
    &-header {
      background-color: rgb(255, 101, 0);
      height: 300rpx;
      border-bottom-left-radius: 80rpx;
      border-bottom-right-radius: 80rpx;
    }
  }

  &-sv-seckill-container {
    position: absolute;
    z-index: 1;
    top: 280rpx;
    width: 100%;
  }

  &-sv-list-container {
    background-color: $u-bg-color;
    border-radius: 20rpx;
  }

  &-sv-list {
    height: calc(100vh - 380rpx);
    padding: 20rpx;
  }

  &-sv-item {
    padding: 20rpx;
    border-bottom: 10rpx solid white;
    border-radius: 20rpx;
    background-color: white;
    margin-bottom: 20rpx;
  }

  .active {
    background-color: red !important;
  }
}
</style>