kxmall-ui/kxmall-app-ui/pages/index/components/event.vue

<template>
  <view class="event-view">
    <view class="container">
      <view class="header">
        <view class="left">
          <view class="title">
            {{ title }}
          </view>
          <!-- <view class="time">{{hour<10?('0'+hour):hour}}</view>
          <view class="separator">:</view>
          <view class="time">{{minute<10?('0'+minute):minute}}</view>
          <view class="separator">:</view>
          <view class="time">{{second<10?('0'+second):second}}</view> -->
        </view>
        <view class="right" @click="naviageToPage('/modules/kxmall/pages/product/event')">
          <view>更多</view>
          <i class="el-icon-arrow-right" />
        </view>
      </view>
      <view class="content">
        <view v-if="showList.length>0" class="flex flex-wrap justify-between" style="width: 100%;height:100%">
          <view v-for="(item,index) in showList" :key="item.id"
            class="margin-bottom-sm bg-white flex align-center justify-center flex-direction"
            style="width: 45%;height: 520rpx;padding: 10rpx;margin-right: 18rpx;border-radius: 8rpx;"
            @click="navToDetailPage(item.productId)">
            <image style="width: 280rpx;height: 280rpx;margin: 10rpx;" :src="JSON.parse(item.image)[0].url"
              mode="aspectFit"></image>
            <view style="padding-top: 28rpx;">
              <view class="text-cut"
                style="width: 294rpx;height: 40rpx;font-size: 28rpx;font-weight: Medium; color: #2D4454;">{{item.title}}
              </view>
              <view class="text-cut margin-tb-xs" style="width: 294rpx;height: 40rpx;font-size: 28rpx;color: #999999;">
                {{item.info}}
              </view>
              <view style="padding-top: 6rpx;" class="flex align-center justify-between">
                <view style="width: 114rpx;height: 42rpx;line-height: 42rpx;font-size: 24rpx;color:#F62929;">
                  ￥{{item.price}}</view>
                <view style="color: #B0B0B0;font-size: 24rpx;">{{item.unitName}}/份</view>

<!--                <image @click.stop="addCart(item)" style="width: 48rpx;height: 48rpx;"-->
<!--                  src="@/static/kxmall/index/cart.png" mode="aspectFit" class="round"></image>-->
              </view>
            </view>
          </view>
        </view>
        <template v-else>
          <img src="@/static/kxmall/index/no_homebase.png">
          <view class="text">敬请期待，更多新人福利~</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  import dayjs from 'dayjs'
  import {
    getRestTime,
    getTime
  } from '../../../util'

  export default {
    name: 'event',
    props: ['options'],
    data() {
      return {
        list: [],
        showList: [],
        hour: 0,
        minute: 0,
        second: 0
      }
    },
    mounted() {
      this.listCurrent()
    },
    computed: {
      title() {
        return this.options.title
      },
      count() {
        return this.options.count
      }
    },
    methods: {
      listCurrent() {
        this.$kxmall_api.request('get', 'event/app/listCurrent', {
          storageId: this.$store.state.kxmall.storageId,
          sort: 1
        }).then(({
          data = []
        }) => {
          this.list = data
          this.getShowList()
        })
      },
      naviageToPage(url, title) {
        this.$emit('naviage-to-page', url, title)
      },
      navToDetailPage(id) {
        this.$emit('nav-to-detail-page', id)
      },
      addCart(item) {
        this.$emit('add-cart', item)
      },
      getShowList() {
        this.showList = this.list.filter(({
          eventStartTime,
          eventStopTime
        }) => {
          const startTime = getTime(eventStartTime),
            endTime = getTime(eventStopTime),
            now = dayjs()
          return startTime.isBefore(now) && endTime.isAfter(now)
        }).slice(0, this.count)
        this.getRestTime(this.showList[0]?.eventStopTime)
        if (this.$_timer) {
          clearTimeout(this.$_timer)
          this.$_timer = null
        }
        if (this.showList.length > 0) {
          this.$_timer = setTimeout(() => {
            this.getShowList()
          }, 1000)
        }
      },
      getRestTime(time) {
        const restTime = getRestTime(time)
        this.hour = restTime[0]
        this.minute = restTime[1]
        this.second = restTime[2]
      }
    }
  }
</script>


<style scoped lang="scss">
  .event-view {
    padding: 24rpx
  }

  .container {
    background-color: #fff;
    border-radius: 16rpx;
  }

  .header {
    padding: 32rpx 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-size: 36rpx;
    color: #333;
    font-weight: 700;
    margin-right: 20rpx;
    display: inline-block;
  }

  .time {
    width: 36rpx;
    height: 30rpx;
    line-height: 32rpx;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background-color: #000;
    border-radius: 4rpx;
    display: inline-block;
  }

  .separator {
    padding: 0 8rpx;
    display: inline-block;
  }

  .right {
    font-size: 26rpx;
    color: #999;
  }

  .content {
    // height: 400rpx;
    padding-bottom: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .text {
      margin-top: 32rpx;
      font-size: 28rpx;
      color: #999;
    }
  }

  img {
    width: 240rpx;
    height: 240rpx;
  }
</style>