Skip to content

Y
yudao-cloud
提交 2d978d51 authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端 mobile ：商品列表

上级 40e4236a
隐藏空白字符变更
内嵌 并排
正在显示 包含 612 行增加 和 469 行删除
mobile-web/src/api/product.js
浏览文件 @ 2d978d51
......@@ -8,4 +8,16 @@ export function getProductCategoryList(pid) {
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,
}
});
}
\ No newline at end of file
mobile-web/src/components/common/productcard.vue
浏览文件 @ 2d978d51
<template>
<van-cell-group class="additional">
<van-card
:title="product.title"
:desc="product.desc"
:num="(iscard?null:product.quantity)"
style="background:#fff"
>
<template slot="thumb">
<img :src="product.imageURL" />
<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>
</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>
<slot />
</van-cell-group>
<router-link :to="'/product/' + product.id">
<van-cell-group class="additional">
<van-card
:title="product.name"
:desc="product.sellPoint"
:num="(iscard?null:product.quantity)"
style="background:#fff"
>
<template slot="thumb">
<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>
</p>
<van-stepper v-if="iscard" v-model="product.quantity" :max="product.max" :min="product.min"/>
</template>
</van-card>
<!-- 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>
export default {
name:'product-card',
props:{
product:Object,
iscard: {
type: Boolean,
default: false
},
export default {
name: 'product-card',
props: {
product: Object,
iscard: {
type: Boolean,
default: false
},
}
}
}
</script>
<style lang="less">
.additional {
.van-cell {
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;
.additional {
.van-cell {
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;
}
.van-tag{
font-size: 12px;
}
}
.van-stepper{
position: absolute;
bottom: 5px;
right: 5px;
&__plus{
width: 30px;
}
&__minus{
width: 30px;
.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;
width: 90px;
height: 20px;
line-height: 20px;
font-size: 10px;
color: #fff;
text-align: center;
background-color: rgba(0, 0, 0, .7);
}
}
.image_tag{
position: absolute;
bottom: 0;
width: 90px;
height: 20px;
line-height: 20px;
font-size: 10px;
color: #fff;
text-align: center;
background-color: rgba(0,0,0,.7);
}
}
.additional::after{
border-color: #f7f7f7;
}
.additional::after {
border-color: #f7f7f7;
}
</style>
mobile-web/src/config/router.js
浏览文件 @ 2d978d51
......@@ -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: '商品列表'
......
mobile-web/src/page/category/index.vue
浏览文件 @ 2d978d51
......@@ -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;
......
mobile-web/src/page/product/list.vue
浏览文件 @ 2d978d51
<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,78 +15,63 @@
</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',
},
{
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',
},
]
rootCategory: {
id: parseInt(this.$route.query.cidFirst),
name: this.$route.query.title,
},
childCategory: {
id: parseInt(this.$route.query.cidSecond),
},
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);
},
showProduct(product){
this.$router.push('/product/'+product.id);
loadProductList(categoryId) {
// 设置当前选中的分类
this.childCategory.id = categoryId;
// 读取商品
// alert('商品分类：' + categoryId);
let response = getProductSpuPage(categoryId);
response.then(data => {
this.products.push(...data.spus);
})
}
},
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>
mobile-web/src/page/product/search.vue 0 → 100644
浏览文件 @ 2d978d51
<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>
product/product-application/src/main/java/cn/iocoder/mall/product/application/vo/users/UsersProductSpuVO.java
浏览文件 @ 2d978d51
......@@ -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;
}
}
\ No newline at end of file
product/product-service-impl/src/main/java/cn/iocoder/mall/product/service/ProductSpuServiceImpl.java
浏览文件 @ 2d978d51
......@@ -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())));
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论