116 lines
2.4 KiB
Vue
116 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<view :data-theme="theme">
|
||
|
|
<view class="seckill_activity pad-30 acea-row row-between acea-no-warp" :style="{backgroundImage: bgImage}">
|
||
|
|
<view class="acea-row items-baseline">
|
||
|
|
<text class="title">秒杀价</text>
|
||
|
|
<text class="biao">￥</text>
|
||
|
|
<text class="price semiBold">{{productInfo.price}}</text>
|
||
|
|
<text class="ot-price text-dec">{{productInfo.otPrice}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="acea-row row-column seckillTime">
|
||
|
|
<text class="f-s-24 text-right mb12"
|
||
|
|
:class="seckillStatus == 2 ? 'end_title' : 'text-white'">{{seckillStatus === 0? '活动已结束' : seckillStatus === 2 || seckillStatus === 3? '距活动开始' : '距活动结束'}}</text>
|
||
|
|
<countDown v-if="seckillStatus > 0" :is-day="true" :tip-text="' '" :day-text="' '" :hour-text="' : '"
|
||
|
|
:minute-text="' : '" :second-text="' '" :datatime="seckillTime" :isCol="false" :bgColor="bgColor">
|
||
|
|
</countDown>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import svipPrice from '@/components/svipPrice.vue';
|
||
|
|
import countDown from "@/components/countDown";
|
||
|
|
import {
|
||
|
|
setThemeColor
|
||
|
|
} from '@/utils/setTheme.js'
|
||
|
|
const app = getApp();
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
countDown,
|
||
|
|
svipPrice
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
// 0=已结束 1=抢购中 2=即将开始 3=明日预告
|
||
|
|
seckillStatus: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
productInfo: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
},
|
||
|
|
seckillTime: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
theme: app.globalData.theme,
|
||
|
|
//bgImage: '',
|
||
|
|
bgColor: {
|
||
|
|
'bgColor': '#fff',
|
||
|
|
'Color': '',
|
||
|
|
'width': '36rpx',
|
||
|
|
'timeTxtwidth': '16rpx',
|
||
|
|
'isDay': true
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
bgImage() {
|
||
|
|
return 'url(' + require('@/pages/goods/static/images/' + this.theme + '.png') + ')'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.bgColor.Color = setThemeColor();
|
||
|
|
//this.bgImage = `../static/images/${this.theme}.png`;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.pad-30 {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mb12 {
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seckill_activity {
|
||
|
|
width: 750rpx;
|
||
|
|
height: 303rpx;
|
||
|
|
color: #fff;
|
||
|
|
background-size: cover;
|
||
|
|
padding: 0 30rpx;
|
||
|
|
|
||
|
|
.title,
|
||
|
|
.ot-price {
|
||
|
|
|
||
|
|
font-size: 22rpx;
|
||
|
|
margin-top: 96rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.biao {
|
||
|
|
font-size: 22rpx;
|
||
|
|
font-weight: 800;
|
||
|
|
margin-top: 96rpx;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price {
|
||
|
|
|
||
|
|
font-size: 50rpx;
|
||
|
|
margin-top: 72rpx;
|
||
|
|
|
||
|
|
margin-right: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seckillTime {
|
||
|
|
margin-top: 35rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|