xdd-uniapp-new/v4/views/offer/offer.vue

<template>
  <view>
    <view class="first-line flex jc-between ai-center">
      <view class="date-box flex">
        <image class="icon-date" :src="webUrl+'/20220214125601027724.png'" mode="scaleToFill"></image>
        <view class="day"><text>{{date}}</text>DAY</view>
        <view class="month">{{month}}月</view>
      </view>
      <view class="end-time flex">
        <text>倒计时</text>
        <count-down :isDay="false" isSecond :dayText="false" :hourText="':'" :minuteText="':'" :secondText="false"
          :datatime="datatime"></count-down>
      </view>
    </view>

    <view class="list flex flex-wrap" v-if="list.length">
      <view class="item" v-for="item in list" :key="item" @click="goGoodsConByProductID(item)">
        <view class="img-box">
          <image class="main" :src="item.image" mode="scaleToFill"></image>
          <image class="label" :src="webUrl+'/20220525103739004011.png'" mode="scaleToFill"></image>
        </view>
        <view class="content">
          <view class="title one-t">{{item.title}}</view>
          <view class="price flex ai-center">
            <!-- <image class="label-vip" :src="webUrl+'/20221118104357701129.png'" mode="scaleToFill"></image> -->
            <text>￥{{item.price}}</text>
            <text class="del" v-if="item.productPrice">￥{{item.productPrice}}</text>
          </view>
          <view class="over-line flex ai-center">
            <image class="icon-fire" :src="webUrl+'/20221118092713277343.png'" mode="scaleToFill"></image>
            <text>{{item.sales}}人已购买</text>
          </view>
          <!-- <view class="cart-box flex ai-center jc-between">{{item.merName}}</view> -->
        </view>
      </view>
    </view>
  
    <view class="v4-nodata" v-else>
      <image src="@/static/images/img_nodata.png" mode="scaleToFill" />
      <view class="text">暂无数据</view>
    </view>
  </view>
</template>

<script>
  import {
    getDailyGoodsList
  } from "@/api/goods";
  import CountDown from "@/components/CountDown";
  export default {
    components: {
      CountDown
    },
    data() {
      return {
        webUrl: this.$VUE_APP_RESOURCES_URL,
        page: 1,
        list: [],
        endReach: false,
        month: 0, // 每日特价:月
        date: 0, // 每日特价：日
        datatime: 0, // 倒计时
      }
    },
    onLoad() {
      let today = new Date();
      this.month = today.getMonth() + 1;
      this.date = today.getDate();

      today.setHours(23);
      today.setMinutes(59);
      today.setSeconds(59);

      this.datatime = today.getTime() / 1000;

      this.fetchList(this.page);
    },
    onReachBottom() {
      if (this.endReach) return;
      this.page++;
      this.fetchList(this.page);
    },
    methods: {
      goGoodsConByProductID(item) {
        this.$yrouter.push({
          path: '/pages/shop/GoodsCon/index',
          query: {
            id: item.productId,
            activityId:item.id,
            from:"day"
          }
        });
      },

      fetchList(page) {
        getDailyGoodsList(page, 10).then(({
          data
        }) => {
          if (data.records.length > 0) {
            data.records.map(item => this.list.push(item));
          } else {
            this.endReach = true;
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .first-line {
    margin: 16rpx 32rpx 0;
  }

  .end-time {
    font-size: 28rpx;
    font-weight: bold;
    line-height: 40rpx;
    color: #FD685D;
  }

  .date-box {
    align-items: center;
    padding: 8rpx;
    background: #fff;
    border-radius: 8px;

    .icon-date {
      width: 40rpx;
      height: 40rpx;
    }

    .day {
      color: #494949;
      font-size: 40rpx;
      font-weight: bold;

      text {
        color: #FF1200;
      }
    }

    .month {
      height: 32rpx;
      margin-left: 12rpx;
      padding-left: 6rpx;
      border-left: 2rpx solid #DDDDDD;
      color: #999999;
      font-size: 28rpx;
    }
  }

  .list {
    margin: 24rpx 32rpx 0;

    .item:nth-child(2n) {
      margin-left: 22rpx;
    }

    .item {
      width: 332rpx;
      margin-bottom: 24rpx;
      border-radius: 8rpx;
      background: #fff;

      .img-box {
        position: relative;

        .main {
          width: 332rpx;
          height: 332rpx;
          border-radius: 8rpx;
        }

        .label {
          position: absolute;
          top: 0;
          left: 0;
          width: 94rpx;
          height: 42rpx;
        }
      }

      .content {
        .label-vip {
          width: 40rpx;
          height: 24rpx;
          margin-right: 6rpx;
        }

        .icon-fire {
          width: 32rpx;
          height: 32rpx;
        }

        .icon-cart {
          width: 48rpx;
          height: 48rpx;
        }

        .title {
          margin: 8rpx 4rpx 0 10rpx;
          font-size: 26rpx;
          font-weight: bold;
          line-height: 36rpx;
          color: #333333;
        }

        .price {
          padding: 4rpx 10rpx 10rpx;
          font-size: 26rpx;
          font-weight: bold;
          line-height: 38rpx;
          color: #ED0F0F;

          .del {
            margin-left: 16rpx;
            text-decoration: line-through;
            font-size: 20rpx;
            line-height: 30rpx;
            font-weight: normal;
            color: #A5A5A5;
          }
        }

        .over-line {
          margin: 0 12rpx 20rpx;
          color: #333;
          font-size: 22rpx;
          line-height: 32rpx;

          .icon-fire {
            width: 24rpx;
            height: 24rpx;
            margin-right: 8rpx;
          }
        }

        .cart-box {
          padding: 6rpx 10rpx 12rpx;
          border-top: 1rpx solid #EFEFEF;
          font-size: 22rpx;
          line-height: 32rpx;
          color: #333333;
        }
      }
    }
  }
</style>