|
|
@@ -25,6 +25,11 @@
|
|
|
</swiper>
|
|
|
|
|
|
<div class="info">
|
|
|
+ <div class="name" v-if="info.salable">
|
|
|
+ <div class="name1">首发抢购倒计时</div>
|
|
|
+ <div class="name2">{{ startTime }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="price-line" v-if="info.salable">
|
|
|
<div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
|
|
|
<div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
|
|
|
@@ -107,6 +112,13 @@
|
|
|
<div class="page-text page-detail" v-html="info.detail"></div
|
|
|
></template>
|
|
|
</div>
|
|
|
+ <div class="btn van-safe-area-bottom" v-if="info.isAppointment">
|
|
|
+ <div class="btns">
|
|
|
+ <van-button @click="appointment" type="primary" block round>
|
|
|
+ {{ info.appointment ? '已预约' : '一键预约' }}
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
<div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
|
|
|
<div class="btns">
|
|
|
@@ -187,6 +199,19 @@ export default {
|
|
|
startPosition: index
|
|
|
});
|
|
|
},
|
|
|
+ appointment() {
|
|
|
+ this.$http
|
|
|
+ .post('/collection/appointment?id=' + this.info.id)
|
|
|
+ .then(res => {
|
|
|
+ this.getProduct();
|
|
|
+ this.$toast.success('预约成功');
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e.error) {
|
|
|
+ this.$toast.warning(e.error);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
getProduct() {
|
|
|
this.$toast.loading({
|
|
|
message: '加载中...',
|
|
|
@@ -196,6 +221,7 @@ export default {
|
|
|
.get('/collection/get/' + this.$route.query.id)
|
|
|
.then(res => {
|
|
|
this.info = res;
|
|
|
+ this.getTime(res.startTime);
|
|
|
this.$nextTick(() => {
|
|
|
if (this.isBuy) {
|
|
|
this.btn = this.$refs.btn;
|
|
|
@@ -263,7 +289,24 @@ export default {
|
|
|
z-index: 2;
|
|
|
padding: 16px 16px 0;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
+ .name {
|
|
|
+ text-align: center;
|
|
|
+ .name1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .name2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 24px;
|
|
|
+ background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
.price {
|
|
|
font-size: 36px;
|
|
|
font-family: OSP;
|
|
|
@@ -365,7 +408,23 @@ export default {
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
}
|
|
|
+.buy {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ height: 52px;
|
|
|
+ background: linear-gradient(135deg, @prim 0%, @warn 100%);
|
|
|
+ border-radius: 8px;
|
|
|
+ border-width: 0;
|
|
|
+ color: #000;
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(135deg, darken(@prim, 10%), darken(@warn, 10%));
|
|
|
+ }
|
|
|
|
|
|
+ &.used {
|
|
|
+ background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+}
|
|
|
/deep/ .mySwiper {
|
|
|
width: 100vw;
|
|
|
height: 100vw;
|