前端 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>
|
<template>
|
||||||
|
<router-link :to="'/product/' + product.id">
|
||||||
<van-cell-group class="additional">
|
<van-cell-group class="additional">
|
||||||
<van-card
|
<van-card
|
||||||
:title="product.title"
|
:title="product.name"
|
||||||
:desc="product.desc"
|
:desc="product.sellPoint"
|
||||||
:num="(iscard?null:product.quantity)"
|
:num="(iscard?null:product.quantity)"
|
||||||
style="background:#fff"
|
style="background:#fff"
|
||||||
>
|
>
|
||||||
<template slot="thumb">
|
<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>
|
<p v-if="product.imageTag!=null&&product.imageTag!=''" class="image_tag">{{product.imageTag}}</p>
|
||||||
</template>
|
</template>
|
||||||
<template slot="tags">
|
<template slot="tags">
|
||||||
<p class="price" v-if="product.price!=null&&product.price!=''">
|
<p class="price" v-if="product.price!=null&&product.price!=''">
|
||||||
￥<span>{{product.price}}</span>
|
￥<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>
|
</p>
|
||||||
<van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>
|
<van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>
|
||||||
</template>
|
</template>
|
||||||
</van-card>
|
</van-card>
|
||||||
<van-cell v-for="(gift,j) in product.gift" :key="j" :value="'x'+gift.quantity" >
|
<!-- TODO 芋艿，暂时去掉赠品 -->
|
||||||
<template slot="title">
|
<!--<van-cell v-for="(gift,j) in product.gift" :key="j" :value="'x'+gift.quantity" >-->
|
||||||
<van-tag type="danger" v-if="j==0" >赠品</van-tag>
|
<!--<template slot="title">-->
|
||||||
<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>
|
<!--<van-tag type="danger" v-if="j==0" >赠品</van-tag>-->
|
||||||
</template>
|
<!--<span class="van-cell-text" :style="(j>0?'margin-left: 35px;':'')" >{{gift.title}}</span>-->
|
||||||
</van-cell>
|
<!--</template>-->
|
||||||
|
<!--</van-cell>-->
|
||||||
<slot/>
|
<slot/>
|
||||||
</van-cell-group>
|
</van-cell-group>
|
||||||
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -47,46 +52,57 @@ export default {
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-cell:not(:last-child)::after {
|
.van-cell:not(:last-child)::after {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-card__title {
|
.van-card__title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-cell__title {
|
.van-cell__title {
|
||||||
flex: 10;
|
flex: 10;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-tag {
|
.van-tag {
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
color: #e93b3d;
|
color: #e93b3d;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-tag {
|
.van-tag {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.van-stepper {
|
.van-stepper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
right: 5px;
|
right: 5px;
|
||||||
|
|
||||||
&__plus {
|
&__plus {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__minus {
|
&__minus {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image_tag {
|
.image_tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -99,6 +115,7 @@ export default {
|
||||||
background-color: rgba(0, 0, 0, .7);
|
background-color: rgba(0, 0, 0, .7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.additional::after {
|
.additional::after {
|
||||||
border-color: #f7f7f7;
|
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'),
|
component: () => import('../page/product/list'),
|
||||||
meta: {
|
meta: {
|
||||||
title: '商品列表'
|
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="//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><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">
|
<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" />
|
<img :src="category.picUrl" />
|
||||||
<span>{{ category.name }}</span>
|
<span>{{ category.name }}</span>
|
||||||
</a>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<div style="clear:both">
|
<div style="clear:both">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -96,6 +96,7 @@ export default {
|
||||||
rootCategories: [],
|
rootCategories: [],
|
||||||
childCategories: [],
|
childCategories: [],
|
||||||
activeKey: 0,
|
activeKey: 0,
|
||||||
|
activeCategory: {}, // 选中的分类
|
||||||
fullHeight: document.documentElement.clientHeight - 93,
|
fullHeight: document.documentElement.clientHeight - 93,
|
||||||
fullWidth: document.documentElement.clientWidth - 99
|
fullWidth: document.documentElement.clientWidth - 99
|
||||||
};
|
};
|
||||||
|
|
@ -113,7 +114,8 @@ export default {
|
||||||
this.activeKey = key;
|
this.activeKey = key;
|
||||||
// 读取子节点的分类
|
// 读取子节点的分类
|
||||||
if (this.rootCategories.length > 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 => {
|
response.then(data => {
|
||||||
this.childCategories = data;
|
this.childCategories = data;
|
||||||
});
|
});
|
||||||
|
|
@ -129,6 +131,7 @@ export default {
|
||||||
this.rootCategories = data;
|
this.rootCategories = data;
|
||||||
// 获得首个根节点的分类
|
// 获得首个根节点的分类
|
||||||
if (data && data.length > 0) {
|
if (data && data.length > 0) {
|
||||||
|
this.activeCategory = data[0];
|
||||||
let response = getProductCategoryList(data[0].id);
|
let response = getProductCategoryList(data[0].id);
|
||||||
response.then(data => {
|
response.then(data => {
|
||||||
this.childCategories = data;
|
this.childCategories = data;
|
||||||
|
|
|
||||||
|
|
@ -1,167 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="product-list">
|
<div class="product-list">
|
||||||
<searchtop/>
|
<van-nav-bar :title="rootCategory.name" left-text="返回" left-arrow
|
||||||
<div class="filterbar">
|
@click-left="onBack">
|
||||||
<ul :class="filtersort?'show':''">
|
</van-nav-bar>
|
||||||
<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>
|
<van-tabs v-model="active" @click="onCategoryClick">
|
||||||
<li :class="filterindex==2?'selected':''" v-on:click="onFilterBar(2)"><span>上新</span></li>
|
<van-tab v-for="category in childCategories" :title="category.name" />
|
||||||
<li :class="filterindex==3?'selected':''" v-on:click="onFilterBar(3)"><span>筛选</span></li>
|
</van-tabs>
|
||||||
</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">
|
<div v-for="(product,i) in products" :key="i">
|
||||||
<product-card :product='product' @click="showProduct(product)" />
|
<product-card :product='product' @click="showProduct(product)" />
|
||||||
|
|
@ -170,79 +15,64 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import searchtop from "../../components/search/searchtop";
|
import { getProductCategoryList, getProductSpuPage } from '../../api/product';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
|
||||||
searchtop
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: "",
|
rootCategory: {
|
||||||
filterindex: 0,
|
id: parseInt(this.$route.query.cidFirst),
|
||||||
filtersort: false,
|
name: this.$route.query.title,
|
||||||
filtershow: false,
|
|
||||||
|
|
||||||
products:[
|
|
||||||
{
|
|
||||||
id:1,
|
|
||||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
|
||||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
|
||||||
price:'13.00',
|
|
||||||
},
|
},
|
||||||
{
|
childCategory: {
|
||||||
id:1,
|
id: parseInt(this.$route.query.cidSecond),
|
||||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
|
||||||
title:'BEYOND博洋家纺 床上套件 秋冬保暖纯棉床单被套 双人被罩 磨毛全棉印花床品四件套',
|
|
||||||
price:'499.00',
|
|
||||||
tags:['满199减100','2件起购'],
|
|
||||||
},
|
},
|
||||||
{
|
childCategories: [],
|
||||||
id:1,
|
active: 2,
|
||||||
imageURL:'https://pop.nosdn.127.net/19e33c9b-6c22-4a4b-96da-1cb7afb32712',
|
products: [],
|
||||||
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: {
|
methods: {
|
||||||
onFilterBar(value) {
|
onBack() {
|
||||||
if (value == 0) {
|
history.back();
|
||||||
this.filtersort = !this.filtersort;
|
},
|
||||||
} else if (value == 3) {
|
onCategoryClick(key) {
|
||||||
this.filtershow = !this.filtershow;
|
// 设置激活的 key
|
||||||
} else {
|
this.active = key;
|
||||||
this.filtersort = false;
|
// 加载商品
|
||||||
this.filterindex = value;
|
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){
|
mounted() {
|
||||||
this.$router.push('/product/'+product.id);
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -254,151 +84,4 @@ export default {
|
||||||
height: 34px;
|
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>
|
</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 最小价格为准
|
* 目前的计算方式是，以 Sku 最小价格为准
|
||||||
*/
|
*/
|
||||||
private Integer price;
|
private Integer price;
|
||||||
|
/**
|
||||||
|
* 库存数量
|
||||||
|
*
|
||||||
|
* 目前的计算方式是，以 Sku 库存累加为准
|
||||||
|
*/
|
||||||
|
private Integer quantity;
|
||||||
|
|
||||||
public Integer getId() {
|
public Integer getId() {
|
||||||
return id;
|
return id;
|
||||||
|
|
@ -82,4 +88,13 @@ public class UsersProductSpuVO {
|
||||||
this.price = price;
|
this.price = price;
|
||||||
return this;
|
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) {
|
public CommonResult<ProductSpuPageBO> getProductSpuPage(ProductSpuPageDTO productSpuPageDTO) {
|
||||||
ProductSpuPageBO productSpuPage = new ProductSpuPageBO();
|
ProductSpuPageBO productSpuPage = new ProductSpuPageBO();
|
||||||
// 查询分页数据
|
// 查询分页数据
|
||||||
int offset = productSpuPageDTO.getPageNo() * productSpuPageDTO.getPageSize();
|
int offset = (productSpuPageDTO.getPageNo() - 1) * productSpuPageDTO.getPageSize();
|
||||||
productSpuPage.setSpus(ProductSpuConvert.INSTANCE.convert(productSpuMapper.selectListByNameLikeOrderBySortAsc(
|
productSpuPage.setSpus(ProductSpuConvert.INSTANCE.convert(productSpuMapper.selectListByNameLikeOrderBySortAsc(
|
||||||
productSpuPageDTO.getName(), productSpuPageDTO.getCid(), productSpuPageDTO.getVisible(),
|
productSpuPageDTO.getName(), productSpuPageDTO.getCid(), productSpuPageDTO.getVisible(),
|
||||||
offset, productSpuPageDTO.getPageSize())));
|
offset, productSpuPageDTO.getPageSize())));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue