|
@@ -1,6 +1,17 @@
|
|
|
<template>
|
|
|
<div class="right-wrap">
|
|
|
- <img src="@/assets/image/banner4.png" alt="banner" class="banner">
|
|
|
+ <!-- <img src="@/assets/image/banner4.png" alt="banner" class="banner"> -->
|
|
|
+ <div class="hot-list-wrap">
|
|
|
+ <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
|
|
|
+ <!-- arrow="never" indicator-position="none" -->
|
|
|
+ <el-carousel indicator-position="none" height="250px" :interval="5000" v-if="bannerList.length > 0">
|
|
|
+ <el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
|
+ <!-- <router-link to="/productTrials"> -->
|
|
|
+ <img style="width: 100%; height: 100%" :src="item.url" class="banner" />
|
|
|
+ <!-- </router-link> -->
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
<div class="notice-board">
|
|
|
<div class="notice-header">
|
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
|
|
@@ -36,12 +47,12 @@
|
|
|
{{ item.dictLabel }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tab-list" style="margin-top: 10px;">
|
|
|
+ <!-- <div class="tab-list" style="margin-top: 10px;">
|
|
|
<div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in deliveryTypeList"
|
|
|
:key="item.type" @click="choseDeliveryType(item)">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="tab-list" style="margin-top: 10px;">
|
|
|
<div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in orderByClauseList"
|
|
|
:key="item.orderByClause" @click="changeOrderByClause(item)">
|
|
@@ -53,7 +64,7 @@
|
|
|
<div v-else class="prize-list">
|
|
|
<div v-for="(item, index) in goodsList" :key="index" class="prize-card prize-item">
|
|
|
<div class="img-container">
|
|
|
- <el-image :src="item.imgUrl" :preview-src-list="[item.imgUrl]"
|
|
|
+ <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="[item.imgUrl]"
|
|
|
class="prize-img"></el-image>
|
|
|
</div>
|
|
|
<div class="content">
|
|
@@ -81,9 +92,13 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="btn-container">
|
|
|
- <button @click="handleClickExchange(item.skuId)"
|
|
|
- class="ui-btn primary medium default btn">
|
|
|
- {{item.stock == 0 ? '敬请期待' : '立即兑换'}}
|
|
|
+ <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
|
|
|
+ class="ui-btn gray medium btn">
|
|
|
+ 敬请期待
|
|
|
+ </button>
|
|
|
+ <button v-else @click="handleClickExchange(item.skuId)"
|
|
|
+ class="ui-btn primary medium btn">
|
|
|
+ 立即兑换
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -102,7 +117,7 @@
|
|
|
<div class="prize-list">
|
|
|
<div v-for="(item, index) in giftList" :key="index" class="prize-card prize-item">
|
|
|
<div class="img-container">
|
|
|
- <el-image :src="item.imgUrl" :preview-src-list="[item.imgUrl]"
|
|
|
+ <el-image :src="item.imgUrl" v-if="item.imgUrl" :preview-src-list="[item.imgUrl]"
|
|
|
class="prize-img"></el-image>
|
|
|
</div>
|
|
|
<div class="content">
|
|
@@ -130,9 +145,13 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="btn-container">
|
|
|
- <button @click="handleClickExchange(item.skuId)"
|
|
|
+ <button v-if="item.stock == 0" @click="handleClickExchange(item.skuId)"
|
|
|
+ class="ui-btn medium default btn">
|
|
|
+ 敬请期待
|
|
|
+ </button>
|
|
|
+ <button v-else @click="handleClickExchange(item.skuId)"
|
|
|
class="ui-btn primary medium default btn">
|
|
|
- {{item.stock == 0 ? '敬请期待' : '立即兑换'}}
|
|
|
+ 立即兑换
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -153,6 +172,17 @@ import { debounce } from '@/utils/index'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ bannerList: [
|
|
|
+ {
|
|
|
+ url: require('@/assets/image/banner5.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/image/banner6.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: require('@/assets/image/banner7.png')
|
|
|
+ },
|
|
|
+ ],
|
|
|
page: 1,
|
|
|
pages: 1,
|
|
|
// tab 列表
|
|
@@ -315,7 +345,7 @@ export default {
|
|
|
name: this.goodsName,
|
|
|
productAttribute: this.productAttribute,
|
|
|
orderByClause: this.orderByClause,
|
|
|
- deliveryType: this.deliveryType
|
|
|
+ // deliveryType: this.deliveryType
|
|
|
}
|
|
|
|
|
|
integralList(params).then(response => {
|
|
@@ -387,11 +417,14 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
+.hot-list-wrap{
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
button {
|
|
|
-webkit-appearance: none;
|
|
|
-moz-appearance: none;
|
|
|
appearance: none;
|
|
|
- background-color: #007fff;
|
|
|
+ /* background-color: #007fff; */
|
|
|
color: #fff;
|
|
|
border-radius: 2px;
|
|
|
border: none;
|
|
@@ -442,6 +475,8 @@ button {
|
|
|
}
|
|
|
|
|
|
.prize-card .img-container .prize-img {
|
|
|
+ /* width: 100%;
|
|
|
+ height: 100%; */
|
|
|
max-height: 120px;
|
|
|
max-width: 120px;
|
|
|
}
|
|
@@ -494,7 +529,7 @@ button {
|
|
|
font-weight: 500;
|
|
|
font-size: 14px;
|
|
|
line-height: 24px;
|
|
|
- color: #1e80ff;
|
|
|
+ color: #ff8462;
|
|
|
flex: auto;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
@@ -520,12 +555,16 @@ button {
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
|
|
|
-.ui-btn.medium {
|
|
|
+.medium {
|
|
|
padding: 5px 16px;
|
|
|
}
|
|
|
|
|
|
-.ui-btn.primary {
|
|
|
- background-color: #1d7dfa;
|
|
|
+.primary {
|
|
|
+ background-image: linear-gradient(to right, #f5b543,#faa029);
|
|
|
+}
|
|
|
+.gray{
|
|
|
+ background-color: gray;
|
|
|
+ opacity: 0.5;
|
|
|
}
|
|
|
|
|
|
.ui-btn {
|
|
@@ -604,7 +643,7 @@ button {
|
|
|
height: 1.8rem;
|
|
|
background-color: #fff;
|
|
|
border-radius: 1rem;
|
|
|
- font-size: 0.5rem;
|
|
|
+ font-size: 12px;
|
|
|
line-height: 1.8rem;
|
|
|
color: #8a9aa9;
|
|
|
padding: 0 0.83rem;
|