yanzong_qianduan/pages/sharp/index.vue

<template>
  <view class="container" :style="appThemeStyle">
    <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true, auto: false }" @down="downCallback"
      :up="upOption" @up="upCallback">
      <!-- 秒杀会场场次tab -->
      <view class="sharp-tabs">
        <scroll-view :scroll-x="true" :scroll-left="scrollLeft" @scroll="scroll">
          <view class="sharp-tabs--container dis-flex">
            <view v-for="(item, index) in tabbar" :key="index" class="tabs-item dis-flex flex-dir-column flex-x-center flex-y-center"
              :class="{ active: curTabIndex == index }" @click="handleTab(index)">
              <block v-if="item.status == ActiveStatusEnum.STATE_NOTICE.value">
                <view class="item-title">{{ item.status_text }}</view>
              </block>
              <block v-else>
                <view class="item-time">{{ item.active_time }}</view>
                <view class="item-status">{{ item.status_text }}</view>
              </block>
            </view>
          </view>
        </scroll-view>
      </view>
      <!-- 秒杀活动 -->
      <view v-if="tabbar.length" class="sharp-active dis-flex flex-dir-column flex-y-center">
        <!-- 活动状态 -->
        <view class="active-status">
          <text class="active-status--icon iconfont icon-artboard"></text>
          <text v-if="tabbar[curTabIndex].status != ActiveStatusEnum.STATE_NOTICE.value"
            class="active-status--time">{{ tabbar[curTabIndex].active_time }}</text>
          <text class="active-status--text">{{ tabbar[curTabIndex].status_text2 }}</text>
        </view>
        <!-- 倒计时 -->
        <view class="active--count-down dis-flex flex-y-center">
          <text class="m-r-10">{{ tabbar[curTabIndex].status == ActiveStatusEnum.STATE_BEGIN.value ? '距结束' : '距开始' }}</text>
          <count-down :date="tabbar[curTabIndex].count_down_time" separator="colon" theme="custom" />
        </view>
      </view>
      <!-- 秒杀商品列表 -->
      <view class="goods-hall">
        <view class="goods-item" v-for="(item, index) in goodsList.data" :key="index" @click="handleTargetGoods(item.sharp_goods_id)">
          <view class="goods-item--container dis-flex">
            <!-- 商品图片 -->
            <view class="goods-image">
              <image :src="item.goods_image"></image>
            </view>
            <view class="goods-info">
              <!-- 商品名称 -->
              <view class="goods-name">
                <text class="twoline-hide">{{ item.goods_name }}</text>
              </view>
              <!-- 秒杀进度条 -->
              <view class="sharp-progress dis-flex flex-y-center">
                <view class="yoo-progress" :style="{ backgroundColor: progressBackgroundColor }">
                  <view class="yoo-progress--portion" :style="{ width: `${item.progress}%` }">
                  </view>
                  <text class="yoo-progress--text">{{ item.progress }}%</text>
                </view>
                <view class="sharp-sales">已抢{{ item.sales_actual }}件</view>
              </view>
              <!-- 秒杀活动价格 -->
              <view class="sharp-price dis-flex flex-y-end">
                <view class="seckill-price">
                  <text class="f-24">￥</text>
                  <text class="money">{{ item.seckill_price_min }}</text>
                </view>
                <view class="original-price">
                  <text class="f-24">￥</text>
                  <text class="money">{{ item.original_price }}</text>
                </view>
              </view>
              <!-- 操作按钮 -->
              <view v-if="tabbar.length" class="opt-touch">
                <view class="touch-btn">
                  <text>{{ tabbar[curTabIndex].status == ActiveStatusEnum.STATE_BEGIN.value ? '马上抢' : '查看商品' }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
  import WxofficialMixin from '@/core/mixins/wxofficial'
  import CountDown from '@/components/countdown'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { hex2rgba } from '@/utils/color'
  import { getEmptyPaginateObj, getMoreListData } from '@/core/app'
  import { ActiveStatusEnum } from '@/common/enum/sharp'
  import * as HomeApi from '@/api/sharp/home'
  import * as GoodsApi from '@/api/sharp/goods'

  const pageSize = 15

  export default {
    components: {
      CountDown
    },
    mixins: [MescrollMixin, WxofficialMixin],
    data() {
      return {
        // 是否正在加载中
        isLoading: true,
        // 当前tab索引
        curTabIndex: 0,
        // tab组件的左侧距离
        scrollLeft: 0,
        // 上拉加载配置
        upOption: {
          // 首次自动执行
          auto: false,
          // 每页数据的数量; 默认10
          page: { size: pageSize },
          // 数量要大于3条才显示无更多数据
          noMoreSize: 3,
        },
        // 枚举类
        ActiveStatusEnum,
        // 秒杀活动场次
        tabbar: [],
        // 秒杀商品列表
        goodsList: [],
      }
    },
    computed: {
      // 进度条背景颜色
      progressBackgroundColor() {
        return hex2rgba(this.appTheme.mainBg, 0.2)
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 加载页面数据
      this.onRefreshPage()
      // 设置微信公众号链接分享卡片内容
      this.setWxofficialShareData()
    },

    methods: {

      // 加载页面数据
      onRefreshPage() {
        const app = this
        return new Promise((resolve, reject) => {
          HomeApi.data()
            .then(result => {
              app.tabbar = result.data.tabbar
              app.goodsList = result.data.goodsList
              app.curTabIndex = 0
              app.scrollLeft = 0
              if (!app.goodsList.data.length) {
                app.mescroll.showEmpty()
              }
              resolve()
            })
            .catch(reject)
        })
      },

      /**
       * 获取商品列表
       * @param {Number} pageNo 页码
       */
      getListData(pageNo = 1) {
        const app = this
        const activeTimeId = app.getCurTabbarId()
        return new Promise((resolve, reject) => {
          GoodsApi.list(activeTimeId, { page: pageNo }, { load: false })
            .then(result => {
              // 合并新数据
              const newList = result.data.list
              app.goodsList.data = getMoreListData(newList, app.goodsList, pageNo)
              resolve(newList)
            })
            .catch(reject)
        })
      },

      // 下拉刷新的回调
      downCallback() {
        this.onRefreshPage()
          .finally(() => this.mescroll.endSuccess())
      },

      /**
       * 上拉加载的回调
       * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
       * @param {Object} page
       */
      upCallback(page) {
        const app = this
        // 设置列表数据
        app.getListData(page.num)
          .then(list => {
            const curPageLen = list.data.length
            const totalSize = list.data.total
            app.mescroll.endBySize(curPageLen, totalSize)
          })
          .catch(() => app.mescroll.endErr())
      },

      // 监听tab组件滚动
      scroll({ detail }) {
        this.scrollLeft = detail.scrollLeft
      },

      // 点击切换标签(会场场次)
      handleTab(index) {
        const app = this
        app.curTabIndex = index
        // 刷新列表数据
        app.goodsList = getEmptyPaginateObj()
        app.mescroll.resetUpScroll()
      },

      // 获取当前选择的会场
      getCurTabbar() {
        return this.tabbar[this.curTabIndex]
      },

      // 获取当前会场场次ID
      getCurTabbarId() {
        const curTabbar = this.getCurTabbar()
        return curTabbar ? curTabbar.active_time_id : 0
      },

      // 跳转到秒杀商品详情
      handleTargetGoods(sharpGoodsId) {
        this.$navTo('pages/sharp/goods/index', {
          activeTimeId: this.getCurTabbarId(),
          sharpGoodsId
        })
      },

      // 设置微信公众号链接分享卡片内容
      setWxofficialShareData() {
        this.updateShareCardData({ title: '整点秒杀会场' })
      },

    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      // 构建页面参数
      const params = this.$getShareUrlParams()
      return {
        title: '整点秒杀会场',
        path: `/pages/sharp/index?${params}`
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      // 构建页面参数
      const params = this.$getShareUrlParams()
      return {
        title: '整点秒杀会场',
        path: `/pages/sharp/index?${params}`
      }
    },

  }
</script>

<style lang="scss">
  page {
    background: #efeff4;
  }
</style>
<style lang="scss" scoped>
  .container {
    background: #efeff4;
  }

  // 秒杀会场 (选项卡)
  .sharp-tabs {
    background: #fff;

    .sharp-tabs--container {
      background: #30353c;
    }

    // .sharp-tabs--empty {
    //   padding-bottom: 30rpx;
    // }

    .tabs-item {
      position: relative;
      min-width: 170rpx;
      height: 110rpx;
      background: #30353c;
      color: #fff;
      padding: 15rpx 45rpx;
      text-align: center;
      box-sizing: border-box;
      white-space: nowrap;

      .item-time {
        font-size: 32rpx;
      }

      .item-status {
        font-size: 24rpx;
      }

      .item-title {
        font-size: 30rpx;
      }

      &.active {
        background: $main-bg;

        &::after {
          content: "";
          display: block;
          position: absolute;
          z-index: 999;
          bottom: -15rpx;
          left: 50%;
          margin-left: -12rpx;
          width: 0;
          height: 0;
          border: 20rpx solid $main-bg;
          border-left-color: transparent;
          border-right-color: transparent;
          border-bottom-color: transparent;
          border-bottom-width: 0;
        }
      }
    }
  }

  // 活动状态
  .sharp-active {
    background: #fff;
    padding: 26rpx 0;

    .active-status {
      font-size: 32rpx;
      color: $main-bg;
      margin-bottom: 20rpx;

      .active-status--icon {
        margin-right: 10rpx;
      }

      .active-status--time {
        margin-right: 10rpx;
      }
    }
  }

  // 倒计时
  .active--count-down {
    font-size: 26rpx;
    height: 40rpx;
  }

  // 商品列表
  .goods-hall {
    padding-top: 20rpx;

    .goods-item {
      background: #fff;
      padding: 30rpx 16rpx;
      border-bottom: 1rpx solid #e7e7e7;

      .goods-image {
        image {
          display: block;
          width: 220rpx;
          height: 220rpx;
        }
      }

      .goods-info {
        width: 498rpx;
        padding-top: 8rpx;
        margin-left: 15rpx;
        position: relative;

        .goods-name {
          font-size: 28rpx;
          min-height: 72rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }

  // 秒杀进度条
  .yoo-progress {
    position: relative;
    width: 70%;
    height: 28rpx;
    border-radius: 12rpx;
    background: #f8b6b6;

    &--portion {
      width: 0%;
      height: 100%;
      border-radius: 12rpx;
      background: linear-gradient(to right, $main-bg2, $main-bg);
    }

    &--text {
      color: #fff;
      font-size: 24rpx;
      line-height: 1.6;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

  }

  // 秒杀商品销量
  .sharp-sales {
    margin-left: 30rpx;
    font-size: 24rpx;
    color: $main-bg;
    white-space: nowrap;
  }

  // 秒杀价格
  .sharp-price {
    margin-top: 40rpx;
    line-height: 1;

    .seckill-price {
      font-size: 32rpx;
      color: $main-bg;
      margin-bottom: -2rpx;
    }

    .original-price {
      margin-left: 5rpx;
      font-size: 24rpx;
      color: #818181;
      text-decoration: line-through;
    }
  }

  // 立即参加按钮
  .opt-touch {
    position: absolute;
    bottom: 0;
    right: 10rpx;

    .touch-btn {
      font-size: 26rpx;
      background: linear-gradient(to right, $main-bg, $main-bg2);
      color: $main-text;
      border-radius: 30rpx;
      padding: 10rpx 30rpx;
    }
  }
</style>