|
|
@@ -12,7 +12,31 @@
|
|
|
</el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
- <div class="notice-board">
|
|
|
+ <div class="entry-list-container">
|
|
|
+ <div class="tab-header" style="border-bottom:none">
|
|
|
+ <span class="tab-title">秒杀活动</span>
|
|
|
+ </div>
|
|
|
+ <div class="special-goods-list">
|
|
|
+ <div class="special-goods-item" v-for="(item,index) in specialGoodsList" :key="index">
|
|
|
+ <!-- <img width="100%" :src="item.url" alt=""> -->
|
|
|
+ <div class="ctrl-box">
|
|
|
+ <div class="label">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="instantPrice">
|
|
|
+ <span>秒杀价：</span><span style="color: red;font-weight: bold;">{{ item.instantPrice }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="price line-through">
|
|
|
+ <span>原价：</span><span>{{ item.price }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="statusButton" :class="item.status == 0 ? '' : 'disabled'" @click="specialGoods(item)">
|
|
|
+ <span>{{ item.status == 0 ? '立即秒杀' : item.status == 1 ? '已无货' : '已结束' }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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"
|
|
|
class="icon-speaker">
|
|
|
@@ -34,13 +58,10 @@
|
|
|
<div class="notice-content" v-html="noticeContent">
|
|
|
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<div class="myTabs" style="background: #fff;">
|
|
|
<el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane label="积分兑换" name="goodsNotice">
|
|
|
- <el-input clearable style="width: 200px;" size="small" v-model="goodsName"
|
|
|
- placeholder="物品名称" @blur="goodsName=$event.target.value.trim()"></el-input>
|
|
|
- <el-button size="small" style="margin-left: 30px;" type="primary" @click="handleFilter">查询</el-button>
|
|
|
<div class="tab-list" style="margin-top: 10px;">
|
|
|
<div :class="{ 'tab': true, 'checked': item.checked }" v-for="(item) in options"
|
|
|
:key="item.dictValue" @click="choseProductAttributeType(item)">
|
|
|
@@ -53,12 +74,15 @@
|
|
|
{{ 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> -->
|
|
|
+ <el-input clearable style="width: 200px;" size="small" v-model="goodsName"
|
|
|
+ placeholder="物品名称" @blur="goodsName=$event.target.value.trim()"></el-input>
|
|
|
+ <el-button size="small" style="margin-left: 30px;" type="primary" @click="handleFilter">查询</el-button>
|
|
|
+ </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)">
|
|
|
@@ -183,6 +207,44 @@ import { debounce } from '@/utils/index'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ specialGoodsList:[
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ path:'/home/pointsMall/redeem?id=20&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'全球家居',
|
|
|
+ instantPrice:2999,
|
|
|
+ price:6000,
|
|
|
+ status:0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ path:'/home/pointsMall/redeem?id=19&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'全球母婴',
|
|
|
+ instantPrice:2999,
|
|
|
+ price:6000,
|
|
|
+ status:1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'全球保健品',
|
|
|
+ instantPrice:2999,
|
|
|
+ price:6000,
|
|
|
+ status:2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ path:'/home/pointsMall/redeem?id=18&name=goodsNotice&type=8',
|
|
|
+ url:'https://xiaoyou.dgtis.com/images/image/2023/07/05/pjwrhbotzayyny9vk1be.jpg',
|
|
|
+ name:'全球电器',
|
|
|
+ instantPrice:2999,
|
|
|
+ price:6000,
|
|
|
+ status:3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
dialogVisible: false,
|
|
|
skuDesc:'',
|
|
|
bannerList: [],
|
|
|
@@ -197,31 +259,46 @@ export default {
|
|
|
orderByClause: 'desc',//积分升降
|
|
|
deliveryType: '',
|
|
|
deliveryTypeList: [
|
|
|
- {
|
|
|
+ {
|
|
|
type: '',
|
|
|
checked: true,
|
|
|
- name: '全部'
|
|
|
+ name: '默认'
|
|
|
},
|
|
|
{
|
|
|
type: 0,
|
|
|
checked: false,
|
|
|
- name: '办公室领取'
|
|
|
+ name: '销量'
|
|
|
},
|
|
|
{
|
|
|
type: 1,
|
|
|
checked: false,
|
|
|
- name: '快递'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 2,
|
|
|
- checked: false,
|
|
|
- name: '卷码兑换'
|
|
|
- },
|
|
|
- {
|
|
|
- type: 3,
|
|
|
- checked: false,
|
|
|
- name: '线下组织'
|
|
|
+ name: '价格'
|
|
|
},
|
|
|
+ // {
|
|
|
+ // type: '',
|
|
|
+ // checked: true,
|
|
|
+ // name: '全部'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 0,
|
|
|
+ // checked: false,
|
|
|
+ // name: '办公室领取'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 1,
|
|
|
+ // checked: false,
|
|
|
+ // name: '快递'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 2,
|
|
|
+ // checked: false,
|
|
|
+ // name: '卷码兑换'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 3,
|
|
|
+ // checked: false,
|
|
|
+ // name: '线下组织'
|
|
|
+ // },
|
|
|
],
|
|
|
orderByClauseList: [
|
|
|
{
|
|
|
@@ -256,6 +333,13 @@ export default {
|
|
|
this.getNotice(this.activeName);
|
|
|
},
|
|
|
methods: {
|
|
|
+ specialGoods(val){
|
|
|
+ if(val.status == 0){
|
|
|
+ this.$router.push({
|
|
|
+ path: val.path,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
getDataInfo(id){
|
|
|
integralInfo({skuId:id}).then(response => {
|
|
|
this.data = response.data.data;
|
|
|
@@ -413,7 +497,7 @@ export default {
|
|
|
productAttribute: this.productAttribute,
|
|
|
pointsRange:this.pointsRange,
|
|
|
// orderByClause: this.orderByClause,
|
|
|
- // deliveryType: this.deliveryType
|
|
|
+ deliveryType: this.deliveryType
|
|
|
}
|
|
|
|
|
|
integralList(params).then(response => {
|
|
|
@@ -749,4 +833,107 @@ button {
|
|
|
color: #fff;
|
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05), 0 1px 2px 0 rgba(0, 0, 0, .05);
|
|
|
}
|
|
|
+.entry-list-container{
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.entry-list-container .tab-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 20px 16px;
|
|
|
+ border-bottom: 1px solid #e5e6eb;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-header .tab-title {
|
|
|
+ white-space: nowrap;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+.special-goods-list{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.special-goods-list .special-goods-item{
|
|
|
+ position: relative;
|
|
|
+ /* padding: 0 6px; */
|
|
|
+ width: 230px;
|
|
|
+ height: 169px;
|
|
|
+ min-width: 0;
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .label{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ width: 100px;
|
|
|
+ /* text-align: center; */
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: black;
|
|
|
+ /* background-color: #fff;
|
|
|
+ border: 1px solid #fff; */
|
|
|
+ /* border-radius: 6px; */
|
|
|
+ font-weight: 800;
|
|
|
+
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .instantPrice{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 60px;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ width: 50%;
|
|
|
+ /* text-align: center; */
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: black;
|
|
|
+ /* background-color: #fff;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 6px; */
|
|
|
+ font-weight: 300;
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .price{
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 90px;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ width: 100px;
|
|
|
+ /* text-align: center; */
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: black;
|
|
|
+ /* background-color: rgba(0, 0, 0, .2);
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 6px; */
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .statusButton{
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 120px;
|
|
|
+ line-height: 30px;
|
|
|
+ height: 30px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ z-index: 1;
|
|
|
+ color: #fff;
|
|
|
+ background-color: red;
|
|
|
+ border: 1px solid red;
|
|
|
+ border-radius: 6px;
|
|
|
+ font-weight: 300;
|
|
|
+}
|
|
|
+.special-goods-item .ctrl-box .disabled{
|
|
|
+ background-color: rgba(0, 0, 0, .2);
|
|
|
+ border: 1px solid #fff;
|
|
|
+}
|
|
|
+.line-through {
|
|
|
+ text-decoration: line-through
|
|
|
+}
|
|
|
</style>
|
