前端 mobile ：商品列表
YunaiV
parent
40e4236af2
commit
2d978d5168
|
|
@ -9,3 +9,15 @@ export function getProductCategoryList(pid) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function getProductSpuPage(cid, pageNo, pageSize) {
|
||||
return request({
|
||||
url: 'product-api/users/spu/page',
|
||||
method: 'get',
|
||||
params: {
|
||||
cid,
|
||||
pageNo: pageNo || 1,
|
||||
pageSize: pageSize || 10,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,31 +1,36 @@
|
|||
<template>
|
||||
<router-link :to="'/product/' + product.id">
|
||||
<van-cell-group class="additional">
|
||||
<van-card
|
||||
:title="product.title"
|
||||
:desc="product.desc"
|
||||
:title="product.name"
|
||||
:desc="product.sellPoint"
|
||||
:num="(iscard?null:product.quantity)"
|
||||
style="background:#fff"
|
||||
>
|
||||
<template slot="thumb">
|
||||
<img :src="product.imageURL" />
|
||||
<img :src="product.picUrls[0]"/>
|
||||
<p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>
|
||||
</template>
|
||||
<template slot="tags">
|
||||
<p class="price" v-if="product.price!=null&&product.price!=''">
|
||||
￥<span>{{product.price}}</span>
|
||||
<van-tag v-if="product.tags!=null" v-for="tag in product.tags" :key="tag" plain type="danger">{{tag}}</van-tag>
|
||||
<van-tag v-if="product.tags!=null" v-for="tag in product.tags" :key="tag" plain type="danger">
|
||||
{{tag}}
|
||||
</van-tag>
|
||||
</p>
|
||||
<van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>
|
||||
</template>
|
||||
</van-card>
|
||||
<van-cell v-for="(gift,j) in product.gift" :key="j" :value="'x'+gift.quantity" >
|
||||
<template slot="title">
|
||||
<van-tag type="danger" v-if="j==0" >赠品</van-tag>
|
||||
<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>
|
||||
</template>
|
||||
</van-cell>
|
||||
<!-- TODO 芋艿，暂时去掉赠品 -->
|
||||
<!--<van-cell v-for="(gift,j) in product.gift" :key="j" :value="'x'+gift.quantity" >-->
|
||||
<!--<template slot="title">-->
|
||||
<!--<van-tag type="danger" v-if="j==0" >赠品</van-tag>-->
|
||||
<!--<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>-->
|
||||
<!--</template>-->
|
||||
<!--</van-cell>-->
|
||||
<slot/>
|
||||
</van-cell-group>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -47,46 +52,57 @@ export default {
|
|||
padding: 0 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.van-cell:not(:last-child)::after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.van-card__title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.van-cell__title {
|
||||
flex: 10;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
line-height: 12px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.price {
|
||||
color: #e93b3d;
|
||||
font-size: 10px;
|
||||
overflow: hidden;
|
||||
height: 18px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.van-tag {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.van-stepper {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
|
||||
&__plus {
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
&__minus {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.image_tag {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
|
@ -99,6 +115,7 @@ export default {
|
|||
background-color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
}
|
||||
|
||||
.additional::after {
|
||||
border-color: #f7f7f7;
|
||||
|
||||
|
|
|
|||
|
|
@ -151,7 +151,14 @@ const routes = [
|
|||
}
|
||||
},
|
||||
{
|
||||
path: '/search',
|
||||
path: '/product/search',
|
||||
component: () => import('../page/product/search'),
|
||||
meta: {
|
||||
title: '商品搜索'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/products/list',
|
||||
component: () => import('../page/product/list'),
|
||||
meta: {
|
||||
title: '商品列表'
|
||||
|
|
|
|||
|
|
@ -66,10 +66,10 @@
|
|||
<!--<li><a ><img src="//img12.360buyimg.com/focus/s140x140_jfs/t1/345/33/944/5582/5b9236d2E62d8da2e/99f72d51b8f195ed.jpg"><span>电话手表</span></a></li>-->
|
||||
<!--<li><a ><img src="//img30.360buyimg.com/focus/s140x140_jfs/t1/1446/14/631/8500/5b9237e5E0d1f9e16/b1a627b92323b5ed.png"><span>华为</span></a></li>-->
|
||||
<li v-for="category in childCategories">
|
||||
<a >
|
||||
<router-link :to="'/products/list?title=' + activeCategory.name + '&cidFirst=' + activeCategory.id + '&cidSecond=' + category.id">
|
||||
<img :src="category.picUrl" />
|
||||
<span>{{ category.name }}</span>
|
||||
</a>
|
||||
</router-link>
|
||||
</li>
|
||||
<div style="clear:both">
|
||||
</div>
|
||||
|
|
@ -96,6 +96,7 @@ export default {
|
|||
rootCategories: [],
|
||||
childCategories: [],
|
||||
activeKey: 0,
|
||||
activeCategory: {}, // 选中的分类
|
||||
fullHeight: document.documentElement.clientHeight - 93,
|
||||
fullWidth: document.documentElement.clientWidth - 99
|
||||
};
|
||||
|
|
@ -113,7 +114,8 @@ export default {
|
|||
this.activeKey = key;
|
||||
// 读取子节点的分类
|
||||
if (this.rootCategories.length > key) {
|
||||
let response = getProductCategoryList(this.rootCategories[key].id);
|
||||
this.activeCategory = this.rootCategories[key];
|
||||
let response = getProductCategoryList(this.activeCategory.id);
|
||||
response.then(data => {
|
||||
this.childCategories = data;
|
||||
});
|
||||
|
|
@ -129,6 +131,7 @@ export default {
|
|||
this.rootCategories = data;
|
||||
// 获得首个根节点的分类
|
||||
if (data && data.length > 0) {
|
||||
this.activeCategory = data[0];
|
||||
let response = getProductCategoryList(data[0].id);
|
||||
response.then(data => {
|
||||
this.childCategories = data;
|
||||
|
|
|
|||
|
|
@ -1,167 +1,12 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<searchtop/>
|
||||
<div class="filterbar">
|
||||
<ul :class="filtersort?'show':''">
|
||||
<li :class="filterindex==0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterindex==11?'价格最低':(filterindex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
|
||||
<li :class="filterindex==1?'selected':''" v-on:click="onFilterBar(1)"><span>销量</span></li>
|
||||
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
|
||||
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
|
||||
</ul>
|
||||
<div :class="'item_options '+(filtersort?'show':'')">
|
||||
<ul>
|
||||
<li :class="filterindex==10?'selected':''" v-on:click="onFilterBar(10)">综合</li>
|
||||
<li :class="filterindex==11?'selected':''" v-on:click="onFilterBar(11)">价格最低</li>
|
||||
<li :class="filterindex==12?'selected':''" v-on:click="onFilterBar(12)">价格最高</li>
|
||||
</ul>
|
||||
</div>
|
||||
<van-popup v-model="filtershow" position="right" class="filterlayer" >
|
||||
<div class="filterInner" style="overflow-y: scroll;max-height: 100%;">
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<div style="clear: both;"></div>
|
||||
<van-button size="large" style="height: 40px;margin-bottom: 15px;line-height: 40px;">清楚选项</van-button>
|
||||
<div style="height:50px;"></div>
|
||||
</div>
|
||||
<div class="filterlayer_bottom_buttons">
|
||||
<span class="filterlayer_bottom_button cancel">取消</span>
|
||||
<span class="filterlayer_bottom_button confirm">确认</span>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
<van-nav-bar :title="rootCategory.name" left-text="返回" left-arrow
|
||||
@click-left="onBack">
|
||||
</van-nav-bar>
|
||||
|
||||
<van-tabs v-model="active" @click="onCategoryClick">
|
||||
<van-tab v-for="category in childCategories" :title="category.name" />
|
||||
</van-tabs>
|
||||
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
|
|
@ -170,79 +15,64 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import searchtop from "../../components/search/searchtop";
|
||||
import { getProductCategoryList, getProductSpuPage } from '../../api/product';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
searchtop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
filterindex: 0,
|
||||
filtersort: false,
|
||||
filtershow: false,
|
||||
|
||||
products:[
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'13.00',
|
||||
rootCategory: {
|
||||
id: parseInt(this.$route.query.cidFirst),
|
||||
name: this.$route.query.title,
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['满199减100','2件起购'],
|
||||
childCategory: {
|
||||
id: parseInt(this.$route.query.cidSecond),
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['新品'],
|
||||
imageTag:'仅剩1件',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['赠'],
|
||||
imageTag:'预约',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'15.00',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'125.50',
|
||||
},
|
||||
]
|
||||
childCategories: [],
|
||||
active: 2,
|
||||
products: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFilterBar(value) {
|
||||
if (value == 0) {
|
||||
this.filtersort = !this.filtersort;
|
||||
} else if (value == 3) {
|
||||
this.filtershow = !this.filtershow;
|
||||
} else {
|
||||
this.filtersort = false;
|
||||
this.filterindex = value;
|
||||
onBack() {
|
||||
history.back();
|
||||
},
|
||||
onCategoryClick(key) {
|
||||
// 设置激活的 key
|
||||
this.active = key;
|
||||
// 加载商品
|
||||
this.products = [];
|
||||
this.loadProductList(this.childCategories[key].id);
|
||||
},
|
||||
loadProductList(categoryId) {
|
||||
// 设置当前选中的分类
|
||||
this.childCategory.id = categoryId;
|
||||
// 读取商品
|
||||
// alert('商品分类：' + categoryId);
|
||||
let response = getProductSpuPage(categoryId);
|
||||
response.then(data => {
|
||||
this.products.push(...data.spus);
|
||||
})
|
||||
}
|
||||
},
|
||||
showProduct(product){
|
||||
this.$router.push('/product/'+product.id);
|
||||
mounted() {
|
||||
let response = getProductCategoryList(this.rootCategory.id);
|
||||
response.then(data => {
|
||||
// console.log(data);
|
||||
// debugger;
|
||||
// 设置根节点的分类
|
||||
this.childCategories = data;
|
||||
// 设置激活的分类
|
||||
// debugger;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].id === this.childCategory.id) {
|
||||
this.active = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
// 加载商品列表
|
||||
this.loadProductList(this.childCategory.id);
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -254,151 +84,4 @@ export default {
|
|||
height: 34px;
|
||||
}
|
||||
}
|
||||
.filterbar {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
li {
|
||||
color: #999;
|
||||
width: 25%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.down {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: #e93b3d;
|
||||
}
|
||||
.show {
|
||||
.down {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.item_options {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
background: #fff;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item_options.show {
|
||||
display: block;
|
||||
}
|
||||
.filterlayer {
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
background-color: #f7f7f7;
|
||||
&_bottom {
|
||||
&_buttons {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.cancel {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.confirm {
|
||||
color: #fff;
|
||||
background-color: #e93b3d;
|
||||
}
|
||||
}
|
||||
&_button {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
height: auto;
|
||||
background: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
line-height: initial;
|
||||
.van-cell{
|
||||
font-size: 16px;
|
||||
}
|
||||
.big {
|
||||
height: 25px;
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.filterInner{
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
.van-button{
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.tags_selection {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 10px;
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
padding-right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
color: #666;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,404 @@
|
|||
<template>
|
||||
<div class="product-list">
|
||||
<searchtop/>
|
||||
<div class="filterbar">
|
||||
<ul :class="filtersort?'show':''">
|
||||
<li :class="filterindex==0?'selected':''" v-on:click="onFilterBar(0)"><span>{{filterindex==11?'价格最低':(filterindex==12?'价格最高':'综合')}}</span><van-icon name="arrow" class="down" /></li>
|
||||
<li :class="filterindex==1?'selected':''" v-on:click="onFilterBar(1)"><span>销量</span></li>
|
||||
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
|
||||
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
|
||||
</ul>
|
||||
<div :class="'item_options '+(filtersort?'show':'')">
|
||||
<ul>
|
||||
<li :class="filterindex==10?'selected':''" v-on:click="onFilterBar(10)">综合</li>
|
||||
<li :class="filterindex==11?'selected':''" v-on:click="onFilterBar(11)">价格最低</li>
|
||||
<li :class="filterindex==12?'selected':''" v-on:click="onFilterBar(12)">价格最高</li>
|
||||
</ul>
|
||||
</div>
|
||||
<van-popup v-model="filtershow" position="right" class="filterlayer" >
|
||||
<div class="filterInner" style="overflow-y: scroll;max-height: 100%;">
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<van-cell title="清洁类型" is-link arrow-direction="down" />
|
||||
</li>
|
||||
<div style="clear: both;"></div>
|
||||
<div class="tags_selection">
|
||||
<div class="option">
|
||||
<a href="javascript:void 0;">牙龈护理111</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">抛光</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">清洁</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">正畸专用</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">敏感</a>
|
||||
</div>
|
||||
<div class="option ">
|
||||
<a href="javascript:void 0;">亮白</a>
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
</div>
|
||||
</ul>
|
||||
<div style="clear: both;"></div>
|
||||
<van-button size="large" style="height: 40px;margin-bottom: 15px;line-height: 40px;">清楚选项</van-button>
|
||||
<div style="height:50px;"></div>
|
||||
</div>
|
||||
<div class="filterlayer_bottom_buttons">
|
||||
<span class="filterlayer_bottom_button cancel">取消</span>
|
||||
<span class="filterlayer_bottom_button confirm">确认</span>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
|
||||
<div v-for="(product,i) in products" :key="i">
|
||||
<product-card :product='product' @click="showProduct(product)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchtop from "../../components/search/searchtop";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
searchtop
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
filterindex: 0,
|
||||
filtersort: false,
|
||||
filtershow: false,
|
||||
|
||||
products:[
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'13.00',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['满199减100','2件起购'],
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['新品'],
|
||||
imageTag:'仅剩1件',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'499.00',
|
||||
tags:['赠'],
|
||||
imageTag:'预约',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'15.00',
|
||||
},
|
||||
{
|
||||
id:1,
|
||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
||||
price:'125.50',
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onFilterBar(value) {
|
||||
if (value == 0) {
|
||||
this.filtersort = !this.filtersort;
|
||||
} else if (value == 3) {
|
||||
this.filtershow = !this.filtershow;
|
||||
} else {
|
||||
this.filtersort = false;
|
||||
this.filterindex = value;
|
||||
}
|
||||
},
|
||||
showProduct(product){
|
||||
this.$router.push('/product/'+product.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.product-list{
|
||||
.additional .price{
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
.filterbar {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
ul {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
}
|
||||
li {
|
||||
color: #999;
|
||||
width: 25%;
|
||||
float: left;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
i {
|
||||
font-size: 12px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.down {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.selected {
|
||||
color: #e93b3d;
|
||||
}
|
||||
.show {
|
||||
.down {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.item_options {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
background: #fff;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.item_options.show {
|
||||
display: block;
|
||||
}
|
||||
.filterlayer {
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
background-color: #f7f7f7;
|
||||
&_bottom {
|
||||
&_buttons {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.cancel {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.confirm {
|
||||
color: #fff;
|
||||
background-color: #e93b3d;
|
||||
}
|
||||
}
|
||||
&_button {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
height: 49px;
|
||||
line-height: 49px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
height: auto;
|
||||
background: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
line-height: initial;
|
||||
.van-cell{
|
||||
font-size: 16px;
|
||||
}
|
||||
.big {
|
||||
height: 25px;
|
||||
max-width: 250px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.filterInner{
|
||||
overflow-y: scroll;
|
||||
max-height: 100%;
|
||||
.van-button{
|
||||
height: 40px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
.tags_selection {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 10px 0 0 10px;
|
||||
.option {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
padding-right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 5px;
|
||||
color: #666;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -28,6 +28,12 @@ public class UsersProductSpuVO {
|
|||
* 目前的计算方式是，以 Sku 最小价格为准
|
||||
*/
|
||||
private Integer price;
|
||||
/**
|
||||
* 库存数量
|
||||
*
|
||||
* 目前的计算方式是，以 Sku 库存累加为准
|
||||
*/
|
||||
private Integer quantity;
|
||||
|
||||
public Integer getId() {
|
||||
return id;
|
||||
|
|
@ -82,4 +88,13 @@ public class UsersProductSpuVO {
|
|||
this.price = price;
|
||||
return this;
|
||||
}
|
||||
|
||||
public Integer getQuantity() {
|
||||
return quantity;
|
||||
}
|
||||
|
||||
public UsersProductSpuVO setQuantity(Integer quantity) {
|
||||
this.quantity = quantity;
|
||||
return this;
|
||||
}
|
||||
}
|
||||
|
|
@ -202,7 +202,7 @@ public class ProductSpuServiceImpl implements ProductSpuService {
|
|||
public CommonResult<ProductSpuPageBO> getProductSpuPage(ProductSpuPageDTO productSpuPageDTO) {
|
||||
ProductSpuPageBO productSpuPage = new ProductSpuPageBO();
|
||||
// 查询分页数据
|
||||
int offset = productSpuPageDTO.getPageNo() * productSpuPageDTO.getPageSize();
|
||||
int offset = (productSpuPageDTO.getPageNo() - 1) * productSpuPageDTO.getPageSize();
|
||||
productSpuPage.setSpus(ProductSpuConvert.INSTANCE.convert(productSpuMapper.selectListByNameLikeOrderBySortAsc(
|
||||
productSpuPageDTO.getName(), productSpuPageDTO.getCid(), productSpuPageDTO.getVisible(),
|
||||
offset, productSpuPageDTO.getPageSize())));
|
||||
|
|
|
|||
Loading…
Reference in New Issue