commit message

buyer/src/components/goodsDetail/Promotion.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="wrapper" v-if="type === 'goodsDetail'">
+      <div class="wr-l"><Icon size="23" type="ios-alarm-outline" /> 秒杀活动</div>
+      <div class="count-down" v-if="end === ''">
+      <p>倒计时：</p><span>{{ hours }}</span><span>{{ minutes }}</span><span>{{ seconds }}</span>
+      </div>
+      <div v-else>{{end}}</div>
+    </div>
+    <span v-else class="cart-promotion">
+      <span v-if="end === ''">据活动结束：<span>{{ hours }}</span> : <span>{{ minutes }}</span> : <span>{{ seconds }}</span></span>
+      <span v-else>活动已结束</span>
+    </span>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    time: { // 传入的初始时间
+      default: 1718977559428
+    },
+    type: {
+      default: 'goodsDetail', // 设置两个值，goodsDetail和cart，样式不同
+      type: String
+    }
+  },
+  data () {
+    return {
+      end: '', // 结束状态
+      hours: '', // 小时
+      minutes: '', // 分钟
+      seconds: '', // 秒
+      interval: '' // 定时器
+    };
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    countDown (val) {
+      function addZero (i) {
+        return i < 10 ? '0' + i : i + '';
+      }
+      var nowtime = new Date();
+      var endtime = new Date(val);
+      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
+      var h = parseInt((lefttime / (60 * 60)) % 24);
+      var m = parseInt((lefttime / 60) % 60);
+      var s = parseInt(lefttime % 60);
+      h = addZero(h);
+      m = addZero(m);
+      s = addZero(s);
+      this.hours = h;
+      this.minutes = m
+      this.seconds = s;
+      if (lefttime <= 0) {
+        this.end = `活动已结束`;
+        clearInterval(this.interval)
+      }
+    },
+    init () {
+      this.interval = setInterval((item) => {
+        this.countDown(this.time);
+      }, 1000);
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.cart-promotion{
+  font-size: 13px;
+  color: #999;
+  margin-left: 10px;
+}
+.wrapper {
+  background-image: linear-gradient(266deg, #ff0b33, #ff4257, #ff5f7c, #fa78a2);
+  height: 32px;
+  color: #fff;
+  line-height: 32px;
+  font-size: 16px;
+  padding: 0 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.wr-r{
+  font-size: 13px;
+}
+.count-down {
+  margin-right: -20px;
+  p{
+    float: left;
+    line-height: 20px;
+  }
+  > span {
+    position: relative;
+    float: left;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    background-color: #2f3430;
+    margin-right: 20px;
+    color: white;
+    font-size: 14px;
+    line-height: 20px;
+    &::after {
+      content: ":";
+      display: block;
+      position: absolute;
+      right: -20px;
+      font-weight: bolder;
+      font-size: 14px;
+      width: 20px;
+      height: 100%;
+      top: 0;
+    }
+  }
+  > span:last-child::after {
+    content: "";
+  }
+}
+
+</style>