ceres-uniapp-v2.0/pages_category_page1/discount/platformDiscount.vue

<template>
  <view class="spikeListBox">
    <global-loading />

    <view class="discountBg">
      <view class="discountInfoBox">
        <view class="discountInfo">全场{{discountInfo.discount}}折</view>
      </view>
    </view>
	  <view class="countdown" v-if="shopShowType == false">
      距活动结束剩余<view class="endDate"><span>{{hou}}</span><i>:</i><span>{{min}}</span><i>:</i><span>{{sec}}</span></view>
	  </view>
<!--	  <view class="filterBox" v-else>-->
<!--		<view class="item" :class="selectIndex == 0 ? 'selected' : ''" @click="synthesize"><span>{{$t('common.synthesis')}}</span></view>-->
<!--		<view class="item" :class="selectIndex == 1 ? 'selected' : ''" @click="sales"><span>{{$t('common.synthesis')}}</span></view>-->
<!--		<view class="item" :class="selectIndex == 2 ? 'selected' : ''" @click="priceClick"><span>{{$t('product.price')}}</span></view>-->
<!--	  </view>-->

    <view class="shop-list-nav">
      <view class="nav-item-sort" @click="sortTap(1)">
        <text class="nav-title" :class="{'active' : sortIndex == 1}">{{$t('common.synthesis')}}</text>
      </view>
      <view class="nav-item-sort" @click="sortTap(2)">
        <text class="nav-title" :class="{'active' : sortIndex == 2}">{{$t('product.price')}}</text>
        <view class="r">
          <view class="arrowUp" :class="{activeUp: type == 1}"></view>
          <view class="arrowDown" :class="{activeDown: type == 2}"></view>
          <!--          <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortUp.png" v-if="type == 1" class="arrow-img padd-t"></image>-->
          <!--          <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortDown.png" v-if="type == 2" class="arrow-img padd-b"></image>-->
        </view>
      </view>
      <view class="nav-item-sort" @click="sortTap(3)">
        <text class="nav-title" :class="{'active' : sortIndex == 3}">{{$t('common.synthesis')}}</text>
        <view class="r">
          <view class="arrowUp" :class="{activeUp: volume == 1}"></view>
          <view class="arrowDown" :class="{activeDown: volume == 2}"></view>
          <!--          <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortUp.png" v-if="volume == 1" class="arrow-img padd-t"></image>-->
          <!--          <image src="http://36.138.125.206:8081/ceres-local-file/static/images/arrowSortDown.png" v-if="volume == 2" class="arrow-img padd-b"></image>-->
        </view>
      </view>
    </view>

    <view class="spikeList mar-top-20">
      <view class="listItem" v-for="(item,index) in getDiscount" :key="index">
        <view class="itemBox">
          <img :src="item.productImage">
        </view>
        <view class="itemInfo">
          <p>{{item.productName}}</p>
          <view class="number" v-if="item.limitNumber">限量{{item.limitNumber}}件 / 剩余{{item.limitStockNumber}}件</view>
          <view class="originalPrice">原价: ¥{{item.originalPrice}}</view>
          <view class="price">
            <view class="currentPrice flex-row-plus flex-items-plus font-color-FF7800">
              <view class="iconBox">
                <image src="http://36.138.125.206:8081/ceres-local-file/static/images/discountListIcon.png"></image>
              </view>
              <view class="flex-row-plus flex-items priceInfo">
                <label class="fs24">￥</label>
                <label class="fs36">{{item.price}}</label>
              </view>
            </view>
            <view class="snapUpBtn" @click="gogoodsDetails(item.shopId,item.productId,item.skuId)">
              <view class="btnText">去抢购</view>
              <view style="width: 82%;margin: 0 auto">
                <progress activeColor="#FFFFFF" :percent="getPercent(20, 100)" active stroke-width="5" />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="ifEmpty" class="emptyOrder-box flex-items-plus flex-column">
        <image class="emptyOrder-img" src="http://36.138.125.206:8081/ceres-local-file/static/img/bgnull.png"></image>
        <label class="font-color-999 fs26 mar-top-30">暂无活动商品～</label>
      </view>
    </view>
  </view>
</template>

<script>
const NET = require('../../utils/request')
const API = require('../../config/api')
export default {
	data(){
		return{
			pageType:true,
			getDiscount:[],
			getDiscountData:{},
			page:1,
			pageSize:5,
			loadingType:0,
			days:'00',
			hou: "00",
			min: "00",
			sec: "00",
			shopId:0,
			shopSeckillId:0,
			type:1,//价格
			volume:1,//销量
			shopShowType:false,
			selectIndex:0,
      sortIndex: 0,
      discountInfo: {},
      time: '',
      discountId: '',
      ifEmpty: false
		}
	},
	onLoad(options) {
		// if(options.shopId && options.shopDiscountId){
		// 	this.shopShowType = false
		// 	this.shopId = options.shopId
		// 	this.shopDiscountId = options.shopDiscountId
		// }else{
		// 	this.shopShowType = true
		// 	this.shopId = 0
		// 	this.shopDiscountId = 0
		// }
    this.discountId = options.discountId

	},
	onShow() {
		this.getDiscountInfo()
			this.getDiscountList()
	},
	onReachBottom(){
		if(this.loadingType == 1){
			uni.stopPullDownRefresh()
		}else{
			this.page = this.page+1
			this.getDiscountList()
		}
	},
	methods:{
    getDiscountInfo() {
      NET.request(API.queryPlatformDiscount,{
        discountId: this.discountId
      },'GET').then(res => {
        this.discountInfo = res.data
        this.time = new Date(this.discountInfo.endTime).getTime() - new Date().getTime()
        this.dateformat(this.time)
        this.countDown()
      }).catch(res => {
        uni.showToast({
          title:'失败',
          icon:"none"
        })
      })
    },
    getPercent(num, total){
      num = parseFloat(num);
      total = parseFloat(total);
      if (isNaN(num) || isNaN(total)) {
        return "-";
      }
      return total <= 0? "0%" : Math.round((num / total) * 10000) / 100.0;
    },
    sortTap(index){
      this.page = 1
      this.getDiscount = []
      if(index == 1){
        this.type = 1
        this.volume = 1
        this.sortIndex = index
      }else if(index == 2){
        this.type = this.type != 1 ? 1:2
        this.sortIndex = index
      }else if(index == 3){
        this.volume = this.volume != 1 ? 1:2
        this.sortIndex = index
      }
      this.getDiscountList()
    },
		synthesize(){
			this.volume =1//销量
			this.type = 1//价格
			this.page = 1
			this.selectIndex = 0
			this.getDiscount = []
			this.getDiscountList()
		},
		sales(){
			//销量
			if(this.volume == 1){
				this.volume = 2
			}else{
				this.volume = 1
			}
			this.type = 1//价格
			this.page = 1
			this.selectIndex = 1
			this.getDiscount = []
			this.getDiscountList()
		},
		priceClick(){
			this.volume =1//销量
			//价格
			if(this.type == 1){
				this.type = 2
			}else{
				this.type = 1
			}
			this.page = 1
			this.selectIndex = 2
			this.getDiscount = []
			this.getDiscountList()
		},
		gogoodsDetails(shopId,productId,skuId){
			uni.navigateTo({
				url:'../goodsModule/goodsDetails?shopId='+shopId + '&productId='+productId +'&skuId='+skuId
			})
		},
		getDiscountList(){
      // uni.showLoading({
      //   mask: true,
      //   title: 'Loading...',
      // })
      let param = {
        page:this.page,
        pageSize:this.pageSize,
        discountId: this.discountId,
        type: '',
        volume: ''
      }
			NET.request(API.queryPlatformDiscountProductList,param,'POST').then(res => {
        uni.hideLoading()
				if(res.data.list.length == 0){
					this.loadingType = 1
					this.page = this.page
				}else{
					this.getDiscount = this.getDiscount.concat(res.data.list)
          if (this.getDiscount.length === 0) {
            this.ifEmpty = true
          }
				}
			}).catch(res => {
				uni.showToast({
					title:'失败',
					icon:"none"
				})
			})
		},
		//时分秒换算
		dateformat(micro_second) {
			// 总秒数
			let second = Math.floor(micro_second / 1000);
			// 天数
			let day = Math.floor(second / 3600 / 24);
			// 小时
			let hr = Math.floor(second / 3600 % 24);
			// 分钟
			let min = Math.floor(second / 60 % 60);
			// 秒
			let sec = Math.floor(second % 60);
			this.hou = hr+day*24
			this.min = min
			this.sec = sec
		},
		countDown(){
		    let timeOut = setTimeout(() => {
		      let hou = parseInt(this.hou+this.days*24);
		      let min = parseInt(this.min);
		      let sec = parseInt(this.sec);

		      let netxSec = sec - 1;
		      let netxMin = min
		      let netxHou = hou;

		      if (netxHou == 0 && netxMin == 0 && netxSec == -1) {
		        clearTimeout(timeOut)
				uni.switchTab({
					url:'../../pages/tabbar/index/index'
				})
				uni.showToast({
					title:"活动结束",
					duration:2000,
					icon:'none'
				})
		      } else {
		        if (netxSec == -1) {
		          netxSec = 59
		          netxMin = netxMin - 1;
		        }
		        if (netxMin == -1) {
		          netxMin = 59
		          netxHou = netxHou - 1
		        }
		        // if (netxHou == -1) {
		        //   netxHou = 23
		        // }

		        this.hou = this.timeFormat(netxHou),
		        this.min = this.timeFormat(netxMin),
		        this.sec = this.timeFormat(netxSec),
		        this.timeOut = timeOut
		        this.countDown();
		      }
		    }, 1000)
		},
		timeFormat(param) { //小于10的格式化函数
		    return param < 10 ? '0' + param : param;
		},
	}
}
</script>
<style>
page {
  background: #333333;
}
</style>
<style lang="scss" scoped>
page {
  background: #333333;
}
  .spikeListBox {
    .discountBg {
      width: 100%;
      height: 480rpx;
      background: url("http://36.138.125.206:8081/ceres-local-file/static/images/discount.png") no-repeat left top;
      background-size: contain;
      position: relative;
      .discountInfoBox {
        position: absolute;
        width: 100%;
        bottom: 0;
        .discountInfo {
          width: 250rpx;
          height: 99rpx;
          line-height: 91rpx;
          text-align: center;
          background: url("http://36.138.125.206:8081/ceres-local-file/static/images/discountText.png") no-repeat center center;
          font-size: 28rpx;
          color: #FFFFFF;
          background-size: contain;
          margin: 0 auto;
        }
      }
    }
	  .selected{
		  color: #FE6F52;
	  }
	  .shopShowTypebox{
		  height: 80rpx;
		  background-color: #FFFFFF;
		  z-index: 9999;
	  }
    .countdown {
      display: flex;
      justify-content: center;
      height: 80upx;
      align-items: center;
      width: 100%;
      color: #CCCCCC;
      .endDate {
        display: flex;
        align-items: center;
        margin-left: 20upx;
        span {
          min-width: 44rpx;
          padding: 0 8rpx;
          height: 52upx;
          line-height: 52upx;
          background: #999999;
          display: block;
          font-size: 26upx;
          color: #FFEBC4;
          text-align: center;
        }
        i {
          font-size: 26upx;
          color: #999999;
          font-style: normal;
          margin: 0 8upx;
        }
      }
    }
    .spikeList {
      padding: 20upx 30upx 20upx 30upx;
      .listItem {
        display: flex;
        padding: 30rpx;
        margin-bottom: 30upx;
        background: #FFFFFF;
        &:last-child {
          border-bottom: none;
        }
        .itemBox {
          width: 260upx;
          height: 260upx;
          margin-right: 30upx;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .itemInfo {
          flex: 1;
          .iconBox {
            image {
              width: 58rpx;
              height: 36rpx;
            }
          }
          p {
            font-size: 26upx;
            color: #333333;
            line-height: 40upx;
            margin-bottom: 20upx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .number {
            color: #C5AA7B;
            font-size: 26rpx;
            height: 40rpx;
            background: #FFFFFF;
            border: 2rpx solid #E4E5E6;
            font-weight: 400;
            display: inline;
            padding: 0 5rpx;
          }
          .originalPrice {
            font-size: 24upx;
            margin-top: 20upx;
            text-decoration: line-through;
            color: #CCCCCC;
          }
          .price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .priceInfo {
              font-size: 40rpx;
              color: #C83732;
            }
            .snapUpBtn {
              width: 160upx;
              height: 84upx;
              text-align: center;
              background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
              box-shadow: 0rpx 6rpx 12rpx rgba(233, 0, 0, 0.3);
              opacity: 1;
              border-radius: 10rpx;
              .btnText {
                color: #FFFFFF;
                font-weight: 400;
                opacity: 0.5;
                margin: 10rpx 0;
              }
              .uni-progress {
                border-radius: 10rpx;
              }
            }
          }
        }
      }
    }
    .filterBox {
      display: flex;
      height: 80upx;
      align-items: center;
      width: 100%;
      background: #FFFFFF;
      left: 0;
      .item {
        flex: 0 0 33.33%;
        text-align: center;
      }
    }
  }

.shop-list-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  line-height: 76rpx;
}

.nav-item {
  flex: 1;
  font-size: 30rpx;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 80rpx;
  line-height: 76rpx;
}

.nav-title {
}
.emptyOrder-box {
  margin-top: 70upx;

  .emptyOrder-img {
    margin-top: 30%;
    width: 216upx;
    height: 152upx;
  }
}
.nav-item.active {
  color: #C5AA7B;
}

.nav-item .line {
  display: inline-block;
  width: 80rpx;
  height: 4rpx;
  background: #fff;
  border-radius: 2rpx;
}

.nav-item.active .line {
  background: #C5AA7B;
}

.nav-item.padd-l {
  padding-left: 20%;
  box-sizing: border-box;
}
.active{
  color: #C5AA7B;
}
.nav-item.padd-r {
  padding-right: 20%;
  box-sizing: border-box;
}

.nav-item-sort {
  flex: 1;
  font-size: 24rpx;
  color: #999999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  line-height: 80rpx;
}

.nav-item-sort .r {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 5rpx;
  .arrowDown {
    width: 0;
    height: 0;
    border-width: 10rpx;
    border-style: solid;
    border-color: #CCCCCC transparent transparent transparent;
    margin-top: 2rpx;
  }
  .arrowUp {
    margin-bottom: 2rpx;
    width: 0;
    height: 0;
    border-width: 10rpx;
    border-style: solid;
    border-color: transparent transparent #CCCCCC transparent;
  }
  .activeDown {
    border-color: #C5AA7B transparent transparent transparent;
  }
  .activeUp {
    border-color: transparent transparent #C5AA7B transparent;
  }
}
</style>
<style scoped>
.snapUpBtn /deep/ .uni-progress-bar {
  border-radius: 10rpx;
  height: 8rpx;
  background-color: #deabab !important;
}
.snapUpBtn /deep/ .uni-progress-inner-bar {
  border-radius: 10rpx;
}
.spikeNav /deep/ .tabs-nav {
}
</style>