修改秒杀页面和领取优惠券样式

assets/css/style.less

@@ -301,7 +301,6 @@ page {
 
 .product-bg swiper {
   height: 7.5 * 100rpx;
-
 }
 
 .product-bg .slide-image {
@@ -397,7 +396,7 @@ page {
 }
 
 .evaluateWtapper .evaluateItem .reply::before {
-  content: "";
+  content: '';
   width: 0;
   height: 0;
   border-left: 0.1 * 100rpx solid transparent;
@@ -510,10 +509,10 @@ page {
   background-color: #f5f5f5;
   border-radius: 0.16 * 100rpx 0.16 * 100rpx 0 0;
   z-index: 111;
-  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  -webkit-transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  -moz-transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-  -o-transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
   transform: translate3d(0, 100%, 0);
   -webkit-transform: translate3d(0, 100%, 0);
   -ms-transform: translate3d(0, 100%, 0);
@@ -578,7 +577,7 @@ page {
   border-radius: 0.16 * 100rpx 0.16 * 100rpx 0 0;
   padding-bottom: 1.4 * 100rpx;
   transform: translate3d(0, 100%, 0);
-  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 }
 
 .product-window.on {
@@ -865,7 +864,7 @@ page {
   text-align: center;
   line-height: 0.46 * 100rpx;
   right: 0;
-  bottom: -.1*100rpx;
+  bottom: -0.1 * 100rpx;
 }
 
 .goodWrapper .item .text .evaluate.userEvaluated {
@@ -884,7 +883,7 @@ page {
   width: 100%;
   z-index: 99;
   transform: translate3d(0, 100%, 0);
-  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 }
 
 .address-window.on {
@@ -1084,7 +1083,7 @@ page {
   left: 50%;
   margin-left: -3.05 * 100rpx;
   transform: translate3d(0, -200%, 0);
-  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 }
 
 .coupon-window.on {
@@ -1195,7 +1194,6 @@ page {
   width: 100%;
   padding: 0 30rpx;
   box-sizing: border-box;
-
 }
 
 .index .header .logo {
@@ -1235,7 +1233,6 @@ page {
   height: 0.34 * 150rpx;
 }
 
-
 .index .header .search .iconfont {
   font-size: 0.34 * 100rpx;
   margin-right: 0.16 * 100rpx;
@@ -1243,18 +1240,15 @@ page {
 
 .index .banner {
   height: 3.75 * 100rpx;
-
 }
 
 .index .banner swiper {
   height: 3.75 * 100rpx;
-
 }
 
 .index .banner image {
   width: 100%;
   height: 3.75 * 100rpx;
-
 }
 
 .index .banner .swiper-pagination {
@@ -1577,7 +1571,7 @@ page {
   width: 0.2 * 100rpx;
   height: 0.07 * 100rpx;
   border-radius: 0.035 * 100rpx;
-  opacity: 1
+  opacity: 1;
 }
 
 .index .hotList .hot-bg {
@@ -1736,12 +1730,12 @@ page {
   margin: 0.35 * 100rpx;
   overflow: hidden;
   background-color: #fff;
-  padding: .3*100rpx;
+  padding: 0.3 * 100rpx;
   z-index: 99;
   position: relative;
   margin-bottom: 0;
-  border-radius: .2*100rpx;
+  border-radius: 0.2 * 100rpx;
-  box-shadow: 0 0 .2*100rpx -.1*100rpx #aaa;
+  box-shadow: 0 0 0.2 * 100rpx -0.1 * 100rpx #aaa;
 }
 
 .index .wrapper .newProducts {
@@ -1755,7 +1749,8 @@ page {
   height: 350rpx;
 }
 
-.index .wrapper .newProducts {}
+.index .wrapper .newProducts {
+}
 
 .index .wrapper.hot .newProducts .newProductsItem {
   width: 2.4 * 100rpx;
@@ -1780,11 +1775,12 @@ page {
   min-width: 2.4 * 100rpx;
   border-radius: 0.12 * 100rpx;
   overflow: hidden;
-  margin-right: .2*100rpx;
+  margin-right: 0.2 * 100rpx;
   flex: 0 2.4 * 100rpx;
 }
 
-.index .wrapper .newProducts:nth-last-child(1) {}
+.index .wrapper .newProducts:nth-last-child(1) {
+}
 
 .index .wrapper .newProducts .img-box {
   width: 100%;
@@ -2009,7 +2005,7 @@ page {
   z-index: 5;
   top: 0;
   /* #ifdef H5 */
-  top:calc(44px + env(safe-area-inset-top))
+  top: calc(44px + env(safe-area-inset-top));
   /* #endif */
 }
 
@@ -2032,7 +2028,7 @@ page {
   top: 0.76 * 100rpx;
   border-bottom: 1px solid #f5f5f5;
   /* #ifdef H5 */
-  top:calc(44px + env(safe-area-inset-top) + 76rpx)
+  top: calc(44px + env(safe-area-inset-top) + 76rpx);
   /* #endif  */
 }
 
@@ -2227,13 +2223,10 @@ page {
   bottom: 0;
   padding: 0 0.3 * 100rpx;
   border-top: 1px solid #eee;
-  
-  
 }
 
 .shoppingCart .iphonex-footer {
   bottom: 168rpx;
-
 }
 
 .shoppingCart .footer .checkAll {
@@ -2368,12 +2361,10 @@ page {
   font-size: 0.26 * 100rpx;
   color: #aaa;
   position: relative;
-
 }
 
 .user .wrapper .nav .item text {
   display: block;
-
 }
 
 .user .wrapper .nav .item ~ .item:after {
@@ -2463,12 +2454,12 @@ page {
   position: relative;
 
   .iconfont {
-    font-size: .26*100rpx;
+    font-size: 0.26 * 100rpx;
     color: #666;
   }
 
   &::after {
-    content: "";
+    content: '';
     display: block;
     position: absolute;
     left: 0.3 * 100rpx;
@@ -2477,7 +2468,6 @@ page {
     border-bottom: 1rpx solid #f5f5f5;
     z-index: 99;
     height: 1rpx;
-
   }
 }
 
@@ -2488,7 +2478,7 @@ page {
 }
 
 .user .wrapper .myService .serviceList .item .cell {
-  flex: 1
+  flex: 1;
 }
 
 .user .wrapper .myService .serviceList .item .pictrue image {
@@ -2746,7 +2736,6 @@ page {
   background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%);
 }
 
-
 .product-con .footer .bnt .buy {
   border-radius: 0 0.5 * 100rpx 0.5 * 100rpx 0;
   background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%);
@@ -2763,7 +2752,6 @@ page {
   }
 }
 
-
 /*订单提交*/
 .order-submission .line {
   width: 100%;
@@ -3853,7 +3841,7 @@ page {
   width: 100%;
   box-sizing: border-box;
   height: 100%;
-  padding: .4*100rpx;
+  padding: 0.4 * 100rpx;
   position: relative;
 }
 
@@ -3901,27 +3889,27 @@ page {
 }
 
 .member-center .header .slider-banner .swiper-slide.diamonds {
-  background-image: url("https://wx.yixiang.co/static/images/diamonds.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/diamonds.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide.gold {
-  background-image: url("https://wx.yixiang.co/static/images/gold.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/gold.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide.silver {
-  background-image: url("https://wx.yixiang.co/static/images/silver.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/silver.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide.brass {
-  background-image: url("https://wx.yixiang.co/static/images/brass.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/brass.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide.bronze {
-  background-image: url("https://wx.yixiang.co/static/images/bronze.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/bronze.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide.ordinary {
-  background-image: url("https://wx.yixiang.co/static/images/ordinary.jpg");
+  background-image: url('https://wx.yixiang.co/static/images/ordinary.jpg');
 }
 
 .member-center .header .slider-banner .swiper-slide image {
@@ -4090,7 +4078,7 @@ page {
   margin-left: -2.8 * 100rpx;
   z-index: 99;
   transform: translate3d(0, -200%, 0);
-  transition: all .3s cubic-bezier(.25, .5, .5, .9);
+  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
 }
 
 .member-center .growthValue.on {
@@ -4198,7 +4186,7 @@ page {
   background-color: #fff;
   color: #eb3729;
   font-weight: bold;
-  border-radius: 0.2*100rpx .2*100rpx 0 0;
+  border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
 }
 
 .integral-details .wrapper .nav .item .iconfont {
@@ -4337,7 +4325,7 @@ page {
 
 .bargain-list .list {
   border-radius: 0.3 * 100rpx;
-  margin: .3*100rpx 0.3*100rpx 0.66*100rpx 0.3*100rpx;
+  margin: 0.3 * 100rpx 0.3 * 100rpx 0.66 * 100rpx 0.3 * 100rpx;
 }
 
 .bargain-list .list .item {
@@ -4345,8 +4333,8 @@ page {
   position: relative;
   height: 2.23 * 100rpx;
   background-color: #fff;
-  padding: 0 .24*100rpx;
+  padding: 0 0.24 * 100rpx;
-  margin: 0 auto .2*100rpx auto;
+  margin: 0 auto 0.2 * 100rpx auto;
 }
 
 .bargain-list .list .item .pictrue {
@@ -4432,7 +4420,7 @@ page {
   height: 372rpx;
   margin: 0 auto;
   padding-top: 0.001 * 100rpx;
-  margin-top: 0.4*100rpx
+  margin-top: 0.4 * 100rpx;
 }
 
 .bargain .header.on {
@@ -4467,7 +4455,7 @@ page {
   background-size: 100% 100%;
   width: 4.4 * 100rpx;
   height: 1.66 * 100rpx;
-  margin: .8*100rpx auto 0 auto;
+  margin: 0.8 * 100rpx auto 0 auto;
   font-size: 0.22 * 100rpx;
   text-align: center;
   padding-top: 0.09 * 100rpx;
@@ -4541,7 +4529,6 @@ page {
 
 .bargain .user .pictxt .pictrue {
   margin-right: 20rpx;
-
 }
 
 .bargain .user .pictxt .pictrue image {
@@ -5092,7 +5079,7 @@ page {
 .product-con .assemble .item .pictxt .text {
   flex: 1;
   font-size: 0.24 * 100rpx;
-  padding-left:15rpx
+  padding-left: 15rpx;
 }
 
 .product-con .assemble .item .pictxt .pictrue {
@@ -5783,7 +5770,7 @@ page {
 }
 
 .sign .wrapper2 .list2 .data {
-  font-size: 0.30*100rpx;
+  font-size: 0.3 * 100rpx;
   color: #232323;
 }
 
@@ -6587,7 +6574,7 @@ page {
 
 /*我的推广*/
 .my-promotion .header {
-  background-image: url("https://wx.yixiang.co/static/images/promotionBg.png");
+  background-image: url('https://wx.yixiang.co/static/images/promotionBg.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 100%;
@@ -6669,7 +6656,7 @@ page {
   /* background-image: linear-gradient(to right, #eb3729 0%, #eb3729 100%); */
   /* background-image: -moz-linear-gradient(to right, #eb3729 0%, #eb3729 100%); */
   margin-bottom: 0.2 * 100rpx;
-  color: #eb3729
+  color: #eb3729;
 }
 
 /*我的账户*/
@@ -6957,7 +6944,7 @@ page {
 }
 
 .flash-sale .timeLsit .item.on::before {
-  content: "";
+  content: '';
   width: 0;
   height: 0;
   border-left: 0.08 * 100rpx solid transparent;
@@ -6983,7 +6970,7 @@ page {
 
 .flash-sale .countDown .time {
   font-size: 0.28 * 100rpx;
-  color: #282828
+  color: #282828;
 }
 
 .flash-sale .countDown .styleAll {
@@ -6995,7 +6982,8 @@ page {
   color: #fc4141;
 }
 
-.flash-sale .countDown .text {}
+.flash-sale .countDown .text {
+}
 
 .flash-sale .list.on {
   margin-top: 2.02 * 100rpx;
@@ -7037,23 +7025,23 @@ page {
   font-weight: bold;
 }
 
-.flash-sale .list .item .text .progress {
+.tui-goods__item .progress {
   overflow: hidden;
   background-color: #fff;
-  width: 2.6*100rpx;
+  width: 100%;
   border-radius: 0.2 * 100rpx;
   height: 0.34 * 100rpx;
   position: relative;
 }
 
-.flash-sale .list .item .text .progress .bg-red {
+.tui-goods__item .progress .bg-red {
   width: 0;
   height: 100%;
   transition: width 0.6s ease;
   background-color: #ffe3e1;
 }
 
-.flash-sale .list .item .text .progress .piece {
+.tui-goods__item .progress .piece {
   position: absolute;
   left: 0;
   right: 0;
@@ -7064,7 +7052,7 @@ page {
   text-align: center;
 }
 
-.flash-sale .list .item .grab {
+.tui-goods__item .grab {
   font-size: 0.28 * 100rpx;
   color: #fff;
   width: 1.4 * 100rpx;
@@ -7427,7 +7415,7 @@ page {
 // }
 
 .register .whiteBg {
-  padding: 0 60rpx
+  padding: 0 60rpx;
 }
 
 .register .whiteBg .title {
@@ -7831,7 +7819,7 @@ page {
 }
 
 .priceChange .priceTitle {
-  background: url("https://wx.yixiang.co/static/images/pricetitle.jpg") no-repeat;
+  background: url('https://wx.yixiang.co/static/images/pricetitle.jpg') no-repeat;
   background-size: 100% 100%;
   width: 100%;
   height: 1.6 * 100rpx;
@@ -8003,7 +7991,7 @@ page {
   font-size: 0.26 * 100rpx;
   font-weight: bold;
   color: #282828;
-  padding: .2*100rpx 0.3*100rpx;
+  padding: 0.2 * 100rpx 0.3 * 100rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8368,7 +8356,6 @@ page {
   padding: 0.45 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
   position: relative;
   // background-color: #eb3729;
-
 }
 
 .order-index .image {
@@ -8380,7 +8367,6 @@ page {
   z-index: 0;
 }
 
-
 .order-index .header:after {
   position: absolute;
   left: 0;
@@ -8546,17 +8532,14 @@ page {
   width: 100%;
 }
 
-
 .statistical-page .mc-head-box view {
   font-size: 14px;
 }
 
-
 .statistical-page .mc-range-mode .selected .mc-range-bg {
   background-color: #a0dcf9;
 }
 
-
 .yd-confirm {
   background-color: #fff;
   font-size: unset;
@@ -8648,7 +8631,8 @@ page {
   line-height: 0.9 * 100rpx;
 }
 
-.swiper-wrapper {}
+.swiper-wrapper {
+}
 
 .posterCanvasWarp {
   position: relative;
@@ -8683,11 +8667,8 @@ rich-text {
     display: block;
     width: 100%;
   }
-
-
 }
 
-
 /*单行文本溢出省略号*/
 .one-t {
   overflow: hidden;
@@ -8784,7 +8765,6 @@ rich-text {
   justify-content: space-between;
 }
 
-
 /* ==================
        自定义变量   
  ==================== */
@@ -9269,7 +9249,6 @@ rich-text {
   padding: 30rpx;
 }
 
-
 .min-goods {
   width: 152rpx;
   background: #fff;
@@ -9339,7 +9318,6 @@ rich-text {
   color: #eb3729;
 }
 
-
 .ytabs {
   .nav {
     margin: 0 auto;
@@ -9360,7 +9338,8 @@ rich-text {
   height: 100%;
 }
 
-.bargainGang.bargain-box,.goodsDetails.bargain-box{
+.bargainGang.bargain-box,
+.goodsDetails.bargain-box {
   padding-top: 0 !important;
   .content {
     margin-top: 0;

components/t-goods-item/t-goods-item.vue

@@ -0,0 +1,199 @@
+<template>
+  <view class="tui-goods__item" :class="{ 'tui-full__item': isList }" @tap="detail">
+    <view class="tui-image__box" :class="{ 'tui-full__imgbox': isList }">
+      <image class="tui-goods__img" :class="{ 'tui-full__img': isList }" :src="item.image" mode="widthFix"></image>
+    </view>
+    <view class="tui-goods__content" :class="{ 'tui-full__content': isList }">
+      <view class="tui-goods__title">{{ item.title || '' }}</view>
+      <view class="progress cart-color">
+        <view class="bg-red" :style="{ width: loading ? item.percent + '%' : '' }"></view>
+        <view class="piece font-color-red" v-text="'仅剩' + item.stock + '件'"></view>
+      </view>
+      <view class="tui-tag__box"><tui-tag plain size="24rpx" type="red" padding="8rpx 12rpx">限时价</tui-tag></view>
+      <view class="tui-box__bottom">
+        <view class="tui-price__box">
+          <view class="tui-price">
+            <view class="tui-price__small">￥</view>
+            <view class="tui-price__large">{{ item.price || '' }}</view>
+            <!-- <view class="tui-price__small">.{{ decimalPrice }}</view> -->
+          </view>
+          <!-- <view class="tui-price__original">￥{{ item.factory || '0.00' }}</view> -->
+        </view>
+        <view>
+          <!-- <tui-button :width="status == 3 ? '146rpx' : '144rpx'" :height="status == 3 ? '60rpx' : '50rpx'" :size="status == 3 ? 26 : 24" :type="status == 1 ? 'gray' : 'danger'" :disabled="status == 1" :plain="status == 3">
+            {{ status | getBtnText(item.subscribe) }}
+          </tui-button> -->
+          <view class="grab bg-color-red" v-if="item.status === 1 && item.stock > 0" @click="goDetail()">马上抢</view>
+          <view class="grab" v-if="item.status === 1 && item.stock <= 0">已售磬</view>
+          <view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
+          <view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'tGoodsItem',
+  props: {
+    item: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+    //是否为列表展示
+    isList: {
+      type: Boolean,
+      default: false,
+    },
+    //status：1-已结束，2-正在进行，3-即将开枪
+    status: {
+      type: Number,
+      default: 2,
+    },
+  },
+  filters: {
+    getBtnText(status, subscribe) {
+      status = status || 1
+      let text = ['活动已结束', '立即抢购', '立即预约'][status - 1]
+      if (status == 3 && subscribe) {
+        text = '取消预约'
+      }
+      return text
+    },
+  },
+  computed: {
+    integerPrice: function() {
+      let price = this.item.sale || '0.00'
+      if (~price.indexOf('.')) {
+        return price.split('.')[0]
+      }
+      return price
+    },
+    decimalPrice: function() {
+      let price = this.item.sale || '0.00'
+      if (~price.indexOf('.')) {
+        return price.split('.')[1]
+      }
+      return '00'
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // detail() {
+    //   //项目中应该传id
+    //   this.tui.href(`../seckillDetail/seckillDetail?status=${this.status}`)
+    // },
+    goDetail: function() {
+      this.$emit('goDetail', item)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.tui-goods__item {
+  width: 100%;
+  padding: 20rpx 20rpx 36rpx;
+  box-sizing: border-box;
+  border-radius: 12rpx;
+  background-color: #fff;
+  margin-bottom: 4%;
+  position: relative;
+}
+.tui-full__item {
+  display: flex;
+  margin-bottom: 20rpx !important;
+  padding: 20rpx !important;
+}
+.tui-img__newguest {
+  position: absolute;
+  width: 96rpx;
+  height: 32rpx;
+  left: 0;
+  top: 8rpx;
+}
+.tui-image__box {
+  width: 100%;
+  height: 300rpx;
+}
+.tui-full__imgbox {
+  width: 240rpx !important;
+  height: 240rpx !important;
+  margin-right: 20rpx;
+}
+.tui-goods__img {
+  max-width: 100%;
+  max-height: 300rpx;
+  display: block;
+  border-radius: 8rpx;
+}
+.tui-full__img {
+  max-height: 240rpx !important;
+}
+.tui-goods__content {
+  width: 100%;
+  padding-top: 16rpx;
+}
+.tui-full__content {
+  height: 240rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 0 !important;
+}
+.tui-goods__title {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  margin-bottom: 20rpx;
+}
+.tui-tag__box {
+  display: flex;
+  padding-top: 25rpx;
+  padding-bottom: 25rpx;
+}
+.tui-box__bottom {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tui-price__box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.tui-price {
+  display: flex;
+  align-items: flex-end;
+  color: #eb0909;
+}
+.tui-price__small {
+  font-size: 24rpx;
+  line-height: 24rpx;
+}
+.tui-price__large {
+  font-size: 34rpx;
+  line-height: 32rpx;
+  font-weight: 600;
+}
+.tui-price__original {
+  font-size: 24rpx;
+  line-height: 24rpx;
+  text-decoration: line-through;
+  color: #999;
+  padding-top: 10rpx;
+}
+</style>

pages/activity/GoodsSeckill/index.vue

@@ -1,85 +1,78 @@
 <template>
-  <view class="flash-sale" ref="container">
+  <view class="container">
-    <view class="header" v-if="headerImg">
+    <view class="tui-bg__box">
-      <image :src="headerImg" />
+      <image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix" :style="{ opacity: opacity }"></image>
-    </view>
-    <scroll-view scroll-y="false" scroll-x="true">
-      <view class="timeScroll">
-        <div class="logoPic">
-          <image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image>
-        </div>
-        <view v-for="(item, index) in timeList" :key="index">
-          <view v-if="active==index" class="timeItem active" @click="setTime(index)">
-            <view class="time">{{ item.time }}</view>
-            <view class="state">{{ item.state }}</view>
-          </view>
-          <view v-if="active!=index" class="timeItem" @click="setTime(index)">
-            <view class="time">{{ item.time }}</view>
-            <view class="state">{{ item.state }}</view>
     </view>
+    <view class="tui-header__bg">
+      <image src="@/static/images/bg_seckill.png" class="tui-bg__img" mode="widthFix"></image>
+      <scroll-view class="tui-time-slot" scroll-x>
+        <view class="tui-time__list" :class="{ 'tui-flex__between': timeList.length < 6 }">
+          <view class="tui-time__item" :class="[timeList.length < 6 ? 'tui-flex__1' : 'tui-width__min', index == active ? 'tui-time__active' : '']" v-for="(item, index) in timeList" :key="index" @tap="setTime(index)">
+            <view class="tui-time">{{ item.time }}</view>
+            <view class="tui-status">{{ item.state }}</view>
           </view>
         </view>
       </scroll-view>
-    <view v-for="(item, index) in timeList" :key="index">
-      <view v-if="active == index">
-        <!-- <view class="countDown font-color-red acea-row row-center-wrapper">
-          <view v-if="item.status === 0" class="activity">活动已结束</view>
-          <count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
-            :secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
-          <view v-if="item.status === 2" class="activity">活动即将开始</view>
-        </view> -->
-        <view class="list">
-          <view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList"
-            :key="indexSeckill">
-            <view class="pictrue">
-              <image :src="itemSeckill.image" />
     </view>
-            <view class="text acea-row row-column-around">
+    <view class="tui-body">
-              <view class="line1" v-text="itemSeckill.title"></view>
+      <block v-for="(item, index) in timeList" :key="index">
-              <view class="money">
+        <view class="tui-status__box" v-if="active == index">
-                限时价
+          <view class="tui-full__width" v-if="item.status == 0">
-                <text class="num font-color-red">￥{{itemSeckill.price||''}}</text>
+            <tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
+              <view class="tui-divider__status">
+                <image src="@/static/images/img_seckill.png" mode="widthFix"></image>
+                <text class="tui-color__red">{{ item.time }}</text>
+                <text>{{ item.state }}</text>
               </view>
-              <view class="progress cart-color">
+            </tui-divider>
-                <view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
+          </view>
-                <view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
+          <view class="tui-full__width" v-if="item.status == 2">
+            <tui-divider gradual width="80%" backgroundColor="#fff" :height="34">
+              <view class="tui-divider__status">
+                <image src="@/static/images/img_seckill.png" mode="widthFix"></image>
+                <text class="tui-color__red">{{ item.time }}</text>
+                <text>{{ item.state }}</text>
+              </view>
+            </tui-divider>
+          </view>
+          <view class="tui-countdown__box" v-if="item.status == 1">
+            <text>距离{{ item.status == 2 ? '结束还剩' : '开始还有' }}</text>
+            <count-down :isDay="true" :tipText="'倒计时 '" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="datatime / 1000"></count-down>
           </view>
         </view>
-            <view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id,item.status)">马上抢</view>
+      </block>
-            <view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
+
-            <view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
+      <view class="tui-list__goods">
-            <view class="grab bg-color-red" v-if="item.status === 0">已结束</view> 
+        <view class="tui-goods__left">
-			<!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 2">即将开始</view> -->
+          <block v-for="(item, index) in seckillList" :key="index">
-            <!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 0">已结束</view> -->
+            <t-goods-item v-if="index % 2 == 0" :item="item" :isList="false" @goDetail="goDetail"></t-goods-item>
-          </view>
+          </block>
-        </view>
-        <view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
-          <view class="noPictrue">
-            <image src="@/static/images/noGood.png" class="image" />
         </view>
+        <view class="tui-goods__right">
+          <block v-for="(item, index) in seckillList" :key="index">
+            <t-goods-item v-if="index % 2 !== 0" :item="item" :isList="false" @goDetail="goDetail"></t-goods-item>
+          </block>
         </view>
       </view>
     </view>
   </view>
 </template>
 <script>
-  import {
+import { getSeckillConfig, getSeckillList } from '@/api/activity'
-    getSeckillConfig,
+import CountDown from '@/components/CountDown'
-    getSeckillList
+
-  } from "@/api/activity";
-  import CountDown from "@/components/CountDown";
 // import { Tab, Tabs } from "vant-weapp";
-  import Loading from "@/components/Loading";
+import Loading from '@/components/Loading'
 
 export default {
-    name: "GoodsSeckill",
+  name: 'GoodsSeckill',
   components: {
-      CountDown
+    CountDown,
   },
   props: {},
   data: function() {
     return {
-        headerImg: "",
+      headerImg: '',
       timeList: [],
       sticky: false,
       loading: false,
@@ -90,188 +83,397 @@
       loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
       page: 1, //页码
       limit: 5, //数量
-        title: []
+      title: [],
-      };
+      opacity: 1,
+    }
   },
   mounted: function() {
-      this.mountedStart();
+    this.mountedStart()
   },
   onReachBottom() {
-      !this.loadingList && this.getSeckillList();
+    !this.loadingList && this.getSeckillList()
+  },
+  filters: {
+    getStatusText(status) {
+      let text = ['活动已结束', '正在疯抢', '即将开抢'][status - 1]
+      return text
+    },
   },
   methods: {
     changeTime: function(index) {
-        this.active = index;
+      this.active = index
-        this.getSeckillList();
+      this.getSeckillList()
     },
     mountedStart: function() {
-        var that = this;
+      var that = this
-        uni.showLoading();
+      uni.showLoading()
       getSeckillConfig().then(res => {
-          that.$set(that, "headerImg", res.data.lovely);
+        that.$set(that, 'headerImg', res.data.lovely)
-          that.$set(that, "timeList", res.data.seckillTime);
+        that.$set(that, 'timeList', res.data.seckillTime)
-          that.$set(that, "active", res.data.seckillTimeIndex);
+        that.$set(that, 'active', res.data.seckillTimeIndex)
 
-          let title = [];
+        let title = []
         title = res.data.seckillTime.map((item, index) => {
           return {
-              name: "div",
+            name: 'div',
             attrs: {
-                class: "timeItem"
+              class: 'timeItem',
             },
-              children: [{
+            children: [
-                  name: "div",
+              {
+                name: 'div',
                 attrs: {
-                    class: "time"
+                  class: 'time',
                 },
-                  children: [{
+                children: [
-                    type: "text",
+                  {
-                    text: item.time
+                    type: 'text',
-                  }]
+                    text: item.time,
+                  },
+                ],
               },
               {
-                  name: "div",
+                name: 'div',
                 attrs: {
-                    class: "state"
+                  class: 'state',
                 },
-                  children: [{
+                children: [
-                    type: "text",
+                  {
-                    text: item.state
+                    type: 'text',
-                  }]
+                    text: item.state,
+                  },
+                ],
+              },
+            ],
           }
-              ]
+        })
-            };
+        that.$set(that, 'title', title)
-          });
+        that.datatime = that.timeList[that.active].stop
-          that.$set(that, "title", title);
+        that.getSeckillList()
-          that.datatime = that.timeList[that.active].stop;
-          that.getSeckillList();
         that.$nextTick(function() {
-            that.sticky = true;
+          that.sticky = true
-            uni.hideLoading();
+          uni.hideLoading()
-          });
+        })
-        });
+      })
     },
     setTime: function(index) {
-        var that = this;
+      var that = this
-        that.page = 1;
+      that.page = 1
-        that.loadingList = false;
+      that.loadingList = false
-        that.status = false;
+      that.status = false
-        that.active = index;
+      that.active = index
-        that.datatime = that.timeList[that.active].stop;
+      that.datatime = that.timeList[that.active].stop
-        this.seckillList = [];
+      this.seckillList = []
-        that.getSeckillList();
+      that.getSeckillList()
     },
     getSeckillList: function() {
-        var that = this;
+      var that = this
-        if (that.loadingList) return;
+      if (that.loadingList) return
-        if (that.status) return;
+      if (that.status) return
-        var time = that.timeList[that.active].id;
+      var time = that.timeList[that.active].id
       getSeckillList(time, {
         page: that.page,
-          limit: that.limit
+        limit: that.limit,
       }).then(res => {
-          that.status = res.data.length < that.limit;
+        that.status = res.data.length < that.limit
-          that.seckillList.push.apply(that.seckillList, res.data);
+        that.seckillList.push.apply(that.seckillList, res.data)
-          that.page++;
+        that.page++
-          uni.hideLoading();
+        uni.hideLoading()
-        });
+      })
     },
-      goDetail: function (id, status) {
+    goDetail: function(item) {
-        var that = this;
+      var that = this
-        var time = that.timeList[that.active].stop;
+      var time = that.timeList[that.active].stop
       this.$yrouter.push({
-          path: "/pages/activity/SeckillDetails/index",
+        path: '/pages/activity/SeckillDetails/index',
         query: {
-            id,
+          id: item.id,
           time,
-            status
+          status: item.status,
+        },
+      })
+    },
+    onPageScroll(e) {
+      let scrollTop = e.scrollTop
+      if (scrollTop <= 2) {
+        this.opacity = 1
+      } else {
+        if (this.opacity <= 0) return
+        this.opacity = 1 - scrollTop / 40
       }
-        });
+    },
+  },
 }
-    }
-  };
 </script>
 <style scoped lang="less">
-  .flash-sale {
+.tui-bg__box {
-    background: #f5f5f5 !important;
+  width: 100%;
-    height: 100%;
+  height: 210rpx;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
 }
 
-  .timeScroll {
+.tui-header__bg {
+  width: 100%;
+  height: 120rpx;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  overflow: hidden;
+}
+
+.tui-bg__img {
+  width: 100%;
+  height: 210rpx;
+  display: block;
+  transition: opacity 0.1s linear;
+}
+
+.tui-body {
+  width: 100%;
+  position: relative;
+  margin-top: 120rpx;
+  z-index: 2;
+  padding: 0 25rpx;
+  box-sizing: border-box;
+}
+
+.tui-time-slot {
+  width: 100%;
+  height: 120rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.tui-time__list {
+  min-width: 100%;
+  height: 120rpx;
   display: flex;
   align-items: center;
-    flex-direction: row;
 }
 
-  .list {
+.tui-flex__between {
-    padding: 0 20rpx;
+  justify-content: space-between;
-
-    .item {
-      padding: .25*100rpx;
-      border-bottom: 1px solid #f0f0f0;
-      height: auto;
-      position: relative;
-      background: #fff;
-      margin-bottom: .2*100rpx;
-      border-radius: .2*100rpx;
-    }
 }
 
-  .logoPic {
+.tui-time__item {
-    width: 75rpx;
+  flex-shrink: 0;
-    height: 70rpx;
+  display: flex;
-    margin-left: 20rpx;
+  align-items: center;
-    margin-right: 20rpx;
+  flex-direction: column;
-
+  justify-content: center;
-    image {
+  color: #ffb2b2;
-      width: 75rpx;
-      height: 70rpx;
-    }
 }
 
-  .timeItem {
+.tui-flex__1 {
-    font-size: 0.22 * 100rpx;
+  flex: 1 !important;
-    color: #282828;
-    width: 150rpx;
-    text-align: center;
-    padding: 20rpx 0;
-    background-color: none;
-
-    &.active {
-      .time {
-        color: #eb3729;
 }
 
-      .state {
+.tui-width__min {
-        background: linear-gradient(90deg, #00c17b, #00c17b);
+  min-width: 150rpx;
-        color: #fff;
-        opacity: 1;
-        border-radius: 30rpx;
-        padding: 0 0.2 * 100rpx;
-        font-weight: 800;
-        height: 0.37 * 100rpx;
-        line-height: 0.37 * 100rpx;
-      }
-    }
 }
 
-  .timeItem .time {
+.tui-time {
-    font-size: 0.32 * 100rpx;
+  font-size: 32rpx;
+  line-height: 32rpx;
   font-weight: bold;
-    height: .5 * 100rpx;
-    line-height: .5 * 100rpx;
 }
 
-  .timeItem .state {
+.tui-status {
-    height: 0.37 * 100rpx;
+  font-size: 24rpx;
-    line-height: 0.37 * 100rpx;
+  line-height: 24rpx;
+  font-weight: 500;
+  padding-top: 16rpx;
 }
 
-  .activity {
+.tui-time__active .tui-time {
+  color: #fff;
+  font-size: 36rpx;
+  line-height: 36rpx;
+}
+
+.tui-time__active .tui-status {
+  color: #fff;
+  font-size: 28rpx;
+  line-height: 28rpx;
+  font-weight: bold;
+}
+
+.tui-status__box {
+  width: 100%;
+  height: 146rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.tui-full__width {
+  width: 100%;
+}
+
+.tui-divider__status {
+  display: flex;
+  align-items: center;
+  font-size: 28rpx;
   color: #333;
+  font-weight: bold;
 }
 
-  .flash-sale .list .item .grab {
+.tui-divider__status image {
-    background-color: #999;
+  width: 30rpx;
+  height: 30rpx;
+  margin-right: 10rpx;
+  flex-shrink: 0;
+}
+
+.tui-color__red {
+  color: #eb0909;
+  padding-right: 6rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.tui-countdown__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  font-size: 24rpx;
+  font-weight: 400;
+  margin-top: 16rpx;
+}
+
+.tui-countdown__box text {
+  padding-right: 12rpx;
+}
+
+/*======商品列表 start=======*/
+.tui-list__goods {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 20rpx;
+  padding-bottom: 30rpx;
+}
+
+.tui-goods__left,
+.tui-goods__right {
+  width: 49%;
+}
+
+.tui-full__width {
+  width: 100% !important;
+}
+
+/*======商品列表 end=======*/
+
+.tui-goods__item {
+  width: 100%;
+  padding: 20rpx 20rpx 36rpx;
+  box-sizing: border-box;
+  border-radius: 12rpx;
+  background-color: #fff;
+  margin-bottom: 4%;
+  position: relative;
+}
+.tui-full__item {
+  display: flex;
+  margin-bottom: 20rpx !important;
+  padding: 20rpx !important;
+}
+.tui-img__newguest {
+  position: absolute;
+  width: 96rpx;
+  height: 32rpx;
+  left: 0;
+  top: 8rpx;
+}
+.tui-image__box {
+  width: 100%;
+  height: 300rpx;
+}
+.tui-full__imgbox {
+  width: 240rpx !important;
+  height: 240rpx !important;
+  margin-right: 20rpx;
+}
+.tui-goods__img {
+  max-width: 100%;
+  max-height: 300rpx;
+  display: block;
+  border-radius: 8rpx;
+}
+.tui-full__img {
+  max-height: 240rpx !important;
+}
+.tui-goods__content {
+  width: 100%;
+  padding-top: 16rpx;
+}
+.tui-full__content {
+  height: 240rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-top: 0 !important;
+}
+.tui-goods__title {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #333;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  margin-bottom: 20rpx;
+}
+.tui-tag__box {
+  display: flex;
+  padding-top: 25rpx;
+  padding-bottom: 25rpx;
+}
+.tui-box__bottom {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tui-price__box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.tui-price {
+  display: flex;
+  align-items: flex-end;
+  color: #eb0909;
+}
+.tui-price__small {
+  font-size: 24rpx;
+  line-height: 24rpx;
+}
+.tui-price__large {
+  font-size: 34rpx;
+  line-height: 32rpx;
+  font-weight: 600;
+}
+.tui-price__original {
+  font-size: 24rpx;
+  line-height: 24rpx;
+  text-decoration: line-through;
+  color: #999;
+  padding-top: 10rpx;
 }
 </style>

pages/activity/GoodsSeckill/index2.vue

@@ -0,0 +1,278 @@
+<template>
+  <view class="flash-sale" ref="container">
+    <view class="header" v-if="headerImg">
+      <image :src="headerImg" />
+    </view>
+    <scroll-view scroll-y="false" scroll-x="true">
+      <view class="timeScroll">
+        <div class="logoPic">
+          <image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image>
+        </div>
+        <view v-for="(item, index) in timeList" :key="index">
+          <view v-if="active == index" class="timeItem active" @click="setTime(index)">
+            <view class="time">{{ item.time }}</view>
+            <view class="state">{{ item.state }}</view>
+          </view>
+          <view v-if="active != index" class="timeItem" @click="setTime(index)">
+            <view class="time">{{ item.time }}</view>
+            <view class="state">{{ item.state }}</view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+    <view v-for="(item, index) in timeList" :key="index">
+      <view v-if="active == index">
+        <!-- <view class="countDown font-color-red acea-row row-center-wrapper">
+          <view v-if="item.status === 0" class="activity">活动已结束</view>
+          <count-down :isDay="false" :tipText="'距结束仅剩 '" :dayText="false" :hourText="' : '" :minuteText="' : '"
+            :secondText="false" :datatime="datatime" v-if="item.status === 1"></count-down>
+          <view v-if="item.status === 2" class="activity">活动即将开始</view>
+        </view> -->
+        <view class="list">
+          <view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList" :key="indexSeckill">
+            <view class="pictrue">
+              <image :src="itemSeckill.image" />
+            </view>
+            <view class="text acea-row row-column-around">
+              <view class="line1" v-text="itemSeckill.title"></view>
+              <view class="money">
+                限时价
+                <text class="num font-color-red">￥{{ itemSeckill.price || '' }}</text>
+              </view>
+              <view class="progress cart-color">
+                <view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }"></view>
+                <view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
+              </view>
+            </view>
+            <view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0" @click="goDetail(itemSeckill.id, item.status)">马上抢</view>
+            <view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
+            <view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
+            <view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
+            <!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 2">即将开始</view> -->
+            <!-- <view class="grab bg-color-red" @click="goDetail(itemSeckill.id,item.status)" v-if="item.status === 0">已结束</view> -->
+          </view>
+        </view>
+        <view class="noCommodity" style="background-color: #f5f5f5;" v-if="seckillList.length === 0 && page > 1">
+          <view class="noPictrue">
+            <image src="@/static/images/noGood.png" class="image" />
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { getSeckillConfig, getSeckillList } from '@/api/activity'
+import CountDown from '@/components/CountDown'
+// import { Tab, Tabs } from "vant-weapp";
+import Loading from '@/components/Loading'
+
+export default {
+  name: 'GoodsSeckill',
+  components: {
+    CountDown,
+  },
+  props: {},
+  data: function() {
+    return {
+      headerImg: '',
+      timeList: [],
+      sticky: false,
+      loading: false,
+      datatime: 0,
+      active: 0,
+      seckillList: [],
+      status: false, //砍价列表是否获取完成 false 未完成 true 完成
+      loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
+      page: 1, //页码
+      limit: 5, //数量
+      title: [],
+    }
+  },
+  mounted: function() {
+    this.mountedStart()
+  },
+  onReachBottom() {
+    !this.loadingList && this.getSeckillList()
+  },
+  methods: {
+    changeTime: function(index) {
+      this.active = index
+      this.getSeckillList()
+    },
+    mountedStart: function() {
+      var that = this
+      uni.showLoading()
+      getSeckillConfig().then(res => {
+        that.$set(that, 'headerImg', res.data.lovely)
+        that.$set(that, 'timeList', res.data.seckillTime)
+        that.$set(that, 'active', res.data.seckillTimeIndex)
+
+        let title = []
+        title = res.data.seckillTime.map((item, index) => {
+          return {
+            name: 'div',
+            attrs: {
+              class: 'timeItem',
+            },
+            children: [
+              {
+                name: 'div',
+                attrs: {
+                  class: 'time',
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: item.time,
+                  },
+                ],
+              },
+              {
+                name: 'div',
+                attrs: {
+                  class: 'state',
+                },
+                children: [
+                  {
+                    type: 'text',
+                    text: item.state,
+                  },
+                ],
+              },
+            ],
+          }
+        })
+        that.$set(that, 'title', title)
+        that.datatime = that.timeList[that.active].stop
+        that.getSeckillList()
+        that.$nextTick(function() {
+          that.sticky = true
+          uni.hideLoading()
+        })
+      })
+    },
+    setTime: function(index) {
+      var that = this
+      that.page = 1
+      that.loadingList = false
+      that.status = false
+      that.active = index
+      that.datatime = that.timeList[that.active].stop
+      this.seckillList = []
+      that.getSeckillList()
+    },
+    getSeckillList: function() {
+      var that = this
+      if (that.loadingList) return
+      if (that.status) return
+      var time = that.timeList[that.active].id
+      getSeckillList(time, {
+        page: that.page,
+        limit: that.limit,
+      }).then(res => {
+        that.status = res.data.length < that.limit
+        that.seckillList.push.apply(that.seckillList, res.data)
+        that.page++
+        uni.hideLoading()
+      })
+    },
+    goDetail: function(id, status) {
+      var that = this
+      var time = that.timeList[that.active].stop
+      this.$yrouter.push({
+        path: '/pages/activity/SeckillDetails/index',
+        query: {
+          id,
+          time,
+          status,
+        },
+      })
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+.flash-sale {
+  background: #f5f5f5 !important;
+  height: 100%;
+}
+
+.timeScroll {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.list {
+  padding: 0 20rpx;
+
+  .item {
+    padding: 0.25 * 100rpx;
+    border-bottom: 1px solid #f0f0f0;
+    height: auto;
+    position: relative;
+    background: #fff;
+    margin-bottom: 0.2 * 100rpx;
+    border-radius: 0.2 * 100rpx;
+  }
+}
+
+.logoPic {
+  width: 75rpx;
+  height: 70rpx;
+  margin-left: 20rpx;
+  margin-right: 20rpx;
+
+  image {
+    width: 75rpx;
+    height: 70rpx;
+  }
+}
+
+.timeItem {
+  font-size: 0.22 * 100rpx;
+  color: #282828;
+  width: 150rpx;
+  text-align: center;
+  padding: 20rpx 0;
+  background-color: none;
+
+  &.active {
+    .time {
+      color: #eb3729;
+    }
+
+    .state {
+      background: linear-gradient(90deg, #00c17b, #00c17b);
+      color: #fff;
+      opacity: 1;
+      border-radius: 30rpx;
+      padding: 0 0.2 * 100rpx;
+      font-weight: 800;
+      height: 0.37 * 100rpx;
+      line-height: 0.37 * 100rpx;
+    }
+  }
+}
+
+.timeItem .time {
+  font-size: 0.32 * 100rpx;
+  font-weight: bold;
+  height: 0.5 * 100rpx;
+  line-height: 0.5 * 100rpx;
+}
+
+.timeItem .state {
+  height: 0.37 * 100rpx;
+  line-height: 0.37 * 100rpx;
+}
+
+.activity {
+  color: #333;
+}
+
+.flash-sale .list .item .grab {
+  background-color: #999;
+}
+</style>

pages/user/coupon/GetCoupon/index.vue

@@ -1,35 +1,45 @@
 <template>
   <view ref="container">
-    <div class="coupon-list" v-if="couponsList.length > 0">
+    <image src="@/static/images/banner_coupon.png" mode="widthFix" class="tui-coupon-banner"></image>
-      <div
+    <view class="tui-coupon-list">
-        class="item acea-row row-center-wrapper"
+      <view class="tui-coupon-item tui-top20" v-for="(item, index) in couponsList" :key="index">
-        v-for="(item, index) in couponsList"
+        <image src="@/static/images/bg_coupon_3x.png" class="tui-coupon-bg" mode="widthFix"></image>
-        :key="index"
+        <view class="tui-coupon-item-left">
-      >
+          <view class="tui-coupon-price-box" :class="{ 'tui-color-grey': item.isUse }">
-        <div class="money" :class="item.isUse ? 'moneyGray' : ''">
+            <view class="tui-coupon-price-sign">￥</view>
-          <div>
+            <view class="tui-coupon-price" :class="{ 'tui-price-small': false }">{{ item.couponPrice }}</view>
-            ￥
+          </view>
-            <span class="num">{{ item.couponPrice }}</span>
+          <view class="tui-coupon-intro">满{{ item.useMinPrice }}元可用</view>
-          </div>
+        </view>
-          <div class="pic-num">满{{ item.useMinPrice }}元可用</div>
+        <view class="tui-coupon-item-right">
-        </div>
+          <view class="tui-coupon-content">
-        <div class="text">
+            <view class="tui-coupon-title-box">
-          <div class="condition line1">
+              <view class="tui-coupon-btn" v-if="item.ctype === 0" :class="{ 'tui-bg-grey': item.isUse }">通用劵</view>
-            <span class="line-title bg-color-check" v-if="item.ctype === 0">通用劵</span>
+              <view class="tui-coupon-btn" v-else-if="item.ctype === 1" :class="{ 'tui-bg-grey': item.isUse }">商品券</view>
-            <span class="line-title bg-color-check" v-else-if="item.ctype === 1">商品券</span>
+              <view class="tui-coupon-btn" v-else :class="{ 'tui-bg-grey': item.isUse }">未知</view>
-            <span class="line-title bg-color-check" v-else>未知</span>
+              <view class="tui-coupon-title">{{ item.cname }}</view>
-            <span>{{ item.cname }}</span>
+            </view>
-          </div>
+            <view class="tui-coupon-rule">
-          <div class="data acea-row row-between-wrapper">
+              <view class="tui-rule-box tui-padding-btm">
-            <div v-if="item.endTime !== 0">{{ item.startTime }}-{{ item.endTime }}</div>
+                <view class="tui-coupon-circle"></view>
-            <div v-else>不限时</div>
+                <view class="tui-coupon-text">不可叠加使用</view>
-            <div class="bnt gray" v-if="item.isUse === true">已领取</div>
+              </view>
-            <div class="bnt gray" v-else-if="item.isUse === 2">已领完</div>
+              <view class="tui-rule-box">
-            <div class="bnt bg-color-red" v-else @click="getCoupon(item.id, index)">立即领取</div>
+                <view class="tui-coupon-circle"></view>
-          </div>
+                <view class="tui-coupon-text" v-if="item.endTime !== 0">{{ item.endTime }} 到期</view>
-        </div>
+                <!-- <view class="tui-coupon-text" v-if="item.endTime !== 0">{{ item.startTime }} - {{ item.endTime }}</view> -->
-      </div>
+                <view class="tui-coupon-text" v-else>不限时</view>
-    </div>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="tui-btn-box">
+          <tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" :plain="true" v-if="item.isUse === true">已领取</tui-button>
+          <tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" :plain="true" v-else-if="item.isUse === 2">已领完</tui-button>
+          <tui-button type="danger" width="152rpx" height="52rpx" :size="24" shape="circle" v-else @click="getCoupon(item.id, index)">立即领取</tui-button>
+        </view>
+      </view>
+    </view>
 
     <Loading :loaded="loadend" :loading="loading"></Loading>
     <!--暂无优惠券-->
@@ -41,14 +51,14 @@
   </view>
 </template>
 <script>
-import { getCoupon, getCouponReceive } from "@/api/user";
+import { getCoupon, getCouponReceive } from '@/api/user'
-import Loading from "@/components/Loading";
+import Loading from '@/components/Loading'
-import DataFormatT from "@/components/DataFormatT";
+import DataFormatT from '@/components/DataFormatT'
 export default {
-  name: "getCoupon",
+  name: 'getCoupon',
   components: {
     Loading,
-    DataFormatT
+    DataFormatT,
   },
   props: {},
   data: function() {
@@ -57,51 +67,254 @@ export default {
       limit: 10,
       couponsList: [],
       loading: false,
-      loadend: false
+      loadend: false,
-    };
+    }
   },
   mounted: function() {
-    this.getUseCoupons();
+    this.getUseCoupons()
   },
   onReachBottom() {
-    !this.loading && this.getUseCoupons();
+    !this.loading && this.getUseCoupons()
   },
   methods: {
     getCoupon: function(id, index) {
-      let that = this;
+      let that = this
-      let list = that.couponsList;
+      let list = that.couponsList
       getCouponReceive(id)
         .then(function(res) {
-          list[index].isUse = true;
+          list[index].isUse = true
           uni.showToast({
-            title: "领取成功",
+            title: '领取成功',
-            icon: "success",
+            icon: 'success',
-            duration: 2000
+            duration: 2000,
-          });
+          })
         })
         .catch(function(err) {
           uni.showToast({
-            title:
+            title: err.msg || err.response.data.msg || err.response.data.message,
-              err.msg || err.response.data.msg || err.response.data.message,
+            icon: 'none',
-            icon: "none",
+            duration: 2000,
-            duration: 2000
+          })
-          });
+        })
-        });
     },
     getUseCoupons: function() {
-      let that = this;
+      let that = this
-      if (that.loading) return; //阻止下次请求（false可以进行请求）；
+      if (that.loading) return //阻止下次请求（false可以进行请求）；
-      if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
+      if (that.loadend) return //阻止结束当前请求（false可以进行请求）；
-      that.loading = true;
+      that.loading = true
-      let q = { page: that.page, limit: that.limit };
+      let q = { page: that.page, limit: that.limit }
       getCoupon(q).then(res => {
-        that.loading = false;
+        that.loading = false
         //apply();js将一个数组插入另一个数组;
-        that.couponsList.push.apply(that.couponsList, res.data);
+        that.couponsList.push.apply(that.couponsList, res.data)
-        that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
+        that.loadend = res.data.length < that.limit //判断所有数据是否加载完成；
-        that.page = that.page + 1;
+        that.page = that.page + 1
-      });
+      })
+    },
+  },
 }
-  }
-};
 </script>
+
+<style lang="less" scoped>
+page {
+  background-color: #f5f5f5;
+}
+
+.container {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tui-coupon-list {
+  width: 100%;
+  padding: 0 25rpx;
+  box-sizing: border-box;
+}
+
+.tui-coupon-banner {
+  width: 100%;
+}
+
+.tui-coupon-item {
+  width: 100%;
+  height: 210rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-right: 30rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.tui-coupon-bg {
+  width: 100%;
+  height: 210rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.tui-coupon-sign {
+  height: 110rpx;
+  width: 110rpx;
+  position: absolute;
+  z-index: 9;
+  top: -30rpx;
+  right: 40rpx;
+}
+
+.tui-coupon-item-left {
+  width: 218rpx;
+  height: 210rpx;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.tui-coupon-price-box {
+  display: flex;
+  color: #e41f19;
+  align-items: flex-end;
+}
+
+.tui-coupon-price-sign {
+  font-size: 30rpx;
+}
+
+.tui-coupon-price {
+  font-size: 70rpx;
+  line-height: 68rpx;
+  font-weight: bold;
+}
+
+.tui-price-small {
+  font-size: 58rpx !important;
+  line-height: 56rpx !important;
+}
+
+.tui-coupon-intro {
+  background: #f7f7f7;
+  padding: 8rpx 10rpx;
+  font-size: 26rpx;
+  line-height: 26rpx;
+  font-weight: 400;
+  color: #666;
+  margin-top: 18rpx;
+}
+
+.tui-coupon-item-right {
+  flex: 1;
+  height: 210rpx;
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 24rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.tui-coupon-content {
+  width: 82%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tui-coupon-title-box {
+  display: flex;
+  align-items: center;
+}
+
+.tui-coupon-btn {
+  padding: 6rpx;
+  background: #ffebeb;
+  color: #e41f19;
+  font-size: 25rpx;
+  line-height: 25rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.9);
+  transform-origin: 0 center;
+  border-radius: 4rpx;
+  flex-shrink: 0;
+}
+
+.tui-color-grey {
+  color: #888 !important;
+}
+
+.tui-bg-grey {
+  background: #f0f0f0 !important;
+  color: #888 !important;
+}
+
+.tui-coupon-title {
+  width: 100%;
+  font-size: 26rpx;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tui-coupon-rule {
+  padding-top: 52rpx;
+}
+
+.tui-rule-box {
+  display: flex;
+  align-items: center;
+  transform: scale(0.8);
+  transform-origin: 0 100%;
+}
+
+.tui-padding-btm {
+  padding-bottom: 6rpx;
+}
+
+.tui-coupon-circle {
+  width: 8rpx;
+  height: 8rpx;
+  background: rgb(160, 160, 160);
+  border-radius: 50%;
+}
+
+.tui-coupon-text {
+  font-size: 28rpx;
+  line-height: 28rpx;
+  font-weight: 400;
+  color: #666;
+  padding-left: 8rpx;
+  white-space: nowrap;
+}
+
+.tui-top20 {
+  margin-top: 20rpx;
+}
+
+.tui-coupon-title {
+  font-size: 28rpx;
+  line-height: 28rpx;
+}
+
+.tui-coupon-radio {
+  transform: scale(0.7);
+  transform-origin: 100% center;
+}
+
+.tui-btn-box {
+  position: absolute;
+  width: 146rpx;
+  height: 52rpx;
+  right: 20rpx;
+  bottom: 40rpx;
+  z-index: 10;
+}
+</style>

pages/user/coupon/UserCoupon/index.vue

@@ -1,12 +1,7 @@
 <template>
   <view ref="container">
     <div class="coupon-list" v-if="couponsList.length > 0">
-      <div
+      <div class="item acea-row row-center-wrapper" v-cloak v-for="(item, index) in couponsList" :key="index">
-        class="item acea-row row-center-wrapper"
-        v-cloak
-        v-for="(item, index) in couponsList"
-        :key="index"
-      >
         <div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
           <div>
             ￥<span class="num">{{ item.couponPrice }}</span>
@@ -27,10 +22,7 @@
       </div>
     </div>
     <!--暂无优惠券-->
-    <view
+    <view class="noCommodity" v-if="couponsList.length === 0 && loading === true">
-      class="noCommodity"
-      v-if="couponsList.length === 0 && loading === true"
-    >
       <view class="noPictrue">
         <image src="@/static/images/noCoupon.png" class="image" />
       </view>
@@ -38,43 +30,43 @@
   </view>
 </template>
 <script>
-import { getCouponsUser } from "@/api/user";
+import { getCouponsUser } from '@/api/user'
-import DataFormatT from "@/components/DataFormatT";
+import DataFormatT from '@/components/DataFormatT'
 
-const NAME = "UserCoupon";
+const NAME = 'UserCoupon'
 
 export default {
-  name: "UserCoupon",
+  name: 'UserCoupon',
   components: {
-    DataFormatT
+    DataFormatT,
   },
   props: {},
   data: function() {
     return {
       couponsList: [],
-      loading: false
+      loading: false,
-    };
+    }
   },
   watch: {
     $yroute: function(n) {
-      var that = this;
+      var that = this
       if (n.name === NAME) {
-        that.getUseCoupons();
+        that.getUseCoupons()
-      }
       }
     },
+  },
   mounted: function() {
-    this.getUseCoupons();
+    this.getUseCoupons()
   },
   methods: {
     getUseCoupons: function() {
       let that = this,
-        type = 0;
+        type = 0
       getCouponsUser(type).then(res => {
-        that.couponsList = res.data;
+        that.couponsList = res.data
-        that.loading = true;
+        that.loading = true
-      });
+      })
+    },
+  },
 }
-  }
-};
 </script>