|
|
|
@ -1,129 +1,199 @@ |
|
|
|
<template> |
|
|
|
<div class="container goods"> |
|
|
|
<div class="top f-bb-gray"> |
|
|
|
<img src="../assets/images/icon/arrow-left.png"/>商品分类 |
|
|
|
<img src="../assets/images/icon/arrow-left.png" v-on:click="goBack"/>商品分类 |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<div class="content cate-content"> |
|
|
|
<div class="left"> |
|
|
|
<ul> |
|
|
|
<li class="on"> |
|
|
|
<span> |
|
|
|
深度保洁 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
家电清洗 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
日常保洁 |
|
|
|
<img src="../assets/images/icon/new.png" class="i-new" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
新居开荒 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<span> |
|
|
|
精细擦窗 |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" /> |
|
|
|
</span> |
|
|
|
<li v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" :class="{ on : isActive === index}" @click="jump(index)"> |
|
|
|
<a href="javascript:void(0)"> |
|
|
|
{{item.combinationName}} |
|
|
|
<img src="../assets/images/icon/hot.png" class="i-hot" v-if="item.label == '2'" /> |
|
|
|
<img src="../assets/images/icon/new.png" class="i-new" v-if="item.label == '1'" /> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<p class="title">深度清洁</p> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="title">家电清洁</p> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="f-relative f-all-1px"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<img src="../assets/images/icon/wx-icon.png" class="thumb"/> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">高端保洁铂金月卡</p> |
|
|
|
<p class="rule">4次×4小时全屋高端保洁</p> |
|
|
|
<span class="full">新用户立减300元</span> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>799</span> |
|
|
|
</p> |
|
|
|
<p class="cost">￥999</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cate-list right" :scrollTop.prop="scrollTop"> |
|
|
|
<div v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" class="cate-item"> |
|
|
|
<p class="title" :id="'anchor-'+index">{{item.combinationName}}</p> |
|
|
|
<div class="f-relative f-all-1px" v-for="(goods,k) in item.goodsList" :key="k"> |
|
|
|
<div class="item f-flex"> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + goods.goodsNo"> |
|
|
|
<img :src=" imghost + goods.bannerImgs" class="thumb"/> |
|
|
|
</a> |
|
|
|
<div class="info f-flex"> |
|
|
|
<div> |
|
|
|
<p class="title f-ellipsis-1">{{goods.name}}</p> |
|
|
|
<p class="rule">{{goods.shortDesc}}</p> |
|
|
|
<div class="full" v-if="toJSON(goods.smallLabel)"><i>{{toJSON(goods.smallLabel)}}</i></div> |
|
|
|
</div> |
|
|
|
<div class="f-flex"> |
|
|
|
<p class="price"> |
|
|
|
<span><span class="money">￥</span>{{goods.price/100}}</span> |
|
|
|
</p> |
|
|
|
<p class="cost" v-if="goods.originalPrice">￥{{goods.originalPrice/100}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- Loading --> |
|
|
|
<div class="Loading-box"> |
|
|
|
<loading v-model="showLoading" text="loading"></loading> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'goodsClassify', |
|
|
|
data() { |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
import goodsApi from "../models/goods-model.js"; |
|
|
|
import { Alert,Toast,Popup,Loading } from "vux"; |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
no: 0, |
|
|
|
id: 0, |
|
|
|
c_no: 0, |
|
|
|
showLoading: true, |
|
|
|
goodsList: [], |
|
|
|
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/", |
|
|
|
isActive: '', |
|
|
|
container: document.querySelectorAll('.cate-list') |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
Toast, |
|
|
|
Popup, |
|
|
|
Loading |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
//返回上一页 |
|
|
|
goBack() { |
|
|
|
history.go(-1) |
|
|
|
}, |
|
|
|
// 取到路由带过来的参数 |
|
|
|
getParams () { |
|
|
|
this.no = this.$route.params.no |
|
|
|
this.id = this.$route.params.id |
|
|
|
this.c_no = this.$route.params.c_no |
|
|
|
this.getGoodsList() |
|
|
|
}, |
|
|
|
//加载商品列表 |
|
|
|
getGoodsList (){ |
|
|
|
let that = this |
|
|
|
that.showLoading = true |
|
|
|
var params = { |
|
|
|
"merchantNo": this.no, |
|
|
|
"districtId": this.id |
|
|
|
} |
|
|
|
goodsApi.getGoods(params).then(res => { |
|
|
|
that.showLoading = false |
|
|
|
if ( res.code == 0 ){ |
|
|
|
this.goodsList = res.data || [] |
|
|
|
} else { |
|
|
|
this.$vux.toast.text(res.msg,"middle"); |
|
|
|
} |
|
|
|
}); |
|
|
|
this.$nextTick(function(){ |
|
|
|
for (let i = 0; i < this.goodsList.length; i++) { |
|
|
|
if(this.goodsList[i].combinationNo == this.c_no) { |
|
|
|
this.jump(i) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
jump(index){ |
|
|
|
const cateItem = document.querySelectorAll('.cate-item'); |
|
|
|
let total = cateItem[index].offsetTop; |
|
|
|
let distance = this.container.scrollTop // 获取到顶部的距离(this.container便是.cate-list,为了方便存起来了) |
|
|
|
let step = total / 20; |
|
|
|
this.isActive = index; // 菜单列表显示当前样式 |
|
|
|
const _this = this; |
|
|
|
if (total > distance) { |
|
|
|
smoothDown() |
|
|
|
} else { |
|
|
|
let newTotal = distance - total |
|
|
|
step = newTotal / 50 |
|
|
|
smoothUp() |
|
|
|
} |
|
|
|
function smoothDown () { |
|
|
|
if (distance < total) { |
|
|
|
distance += step |
|
|
|
_this.scrollTop = distance - 60 |
|
|
|
setTimeout(smoothDown, 10); |
|
|
|
} else { |
|
|
|
_this.scrollTop = total - 60 |
|
|
|
} |
|
|
|
} |
|
|
|
function smoothUp () { |
|
|
|
if (distance > total) { |
|
|
|
distance -= step |
|
|
|
_this.scrollTop = distance - 60 |
|
|
|
setTimeout(smoothUp, 10) |
|
|
|
} else { |
|
|
|
_this.scrollTop = total - 60 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
toJSON (data){ |
|
|
|
if (data){ |
|
|
|
return JSON.parse(data)[0].labelText |
|
|
|
}else { |
|
|
|
return ; |
|
|
|
} |
|
|
|
}, |
|
|
|
onScroll () { |
|
|
|
var _this = this; |
|
|
|
_this.itemVal.forEach(function(obj, i){ |
|
|
|
_this.scrollTop = _this.container.scrollTop; |
|
|
|
if(_this.scrollTop >= obj.top && _this.scrollTop < (obj.top + obj.height-10)){ |
|
|
|
// scrollTop的移动位置要在类别的菜品列表中才显示对应锚点的当前状态 |
|
|
|
_this.isActive = obj.index; |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
currentStick () { |
|
|
|
const {dishId} = this.$route.query; |
|
|
|
const cateContent = document.querySelectorAll('.cate-content'); |
|
|
|
const _this = this; |
|
|
|
cateContent.forEach(function(v, i){ |
|
|
|
if(v.id == dishId){ |
|
|
|
_this.scrollTop = v.offsetTop; |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
scroll () { |
|
|
|
// 监听scroll事件 |
|
|
|
const _this = this; |
|
|
|
setTimeout(function(){ |
|
|
|
_this.currentStick(); |
|
|
|
const rightItem = document.querySelectorAll('.cate-item'); |
|
|
|
const catelist = document.querySelectorAll('.cate-list')[0]; |
|
|
|
var length = rightItem.length; |
|
|
|
var height = rightItem[length-1].offsetHeight; |
|
|
|
var scrollHeight = document.querySelectorAll('.cate-menu-wrapper')[0].offsetHeight; |
|
|
|
// 设置最后一个类别菜品列表的高度(小于适配器高度的话与适配器等高)，不然点击锚点不能够置顶 |
|
|
|
if (height < scrollHeight) { |
|
|
|
rightItem[length-1].style.height = scrollHeight+'px'; |
|
|
|
} |
|
|
|
var arr =[]; |
|
|
|
rightItem.forEach(function(v, i){ |
|
|
|
arr.push({top: v.offsetTop, height: v.offsetHeight, index: i}); |
|
|
|
}) |
|
|
|
_this.itemVal = arr; |
|
|
|
const cateList = document.querySelectorAll('.cate-list')[0]; |
|
|
|
cateList.addEventListener('scroll', _this.onScroll); |
|
|
|
_this.container = cateList; |
|
|
|
}, 500) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getParams() |
|
|
|
this.scroll() |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.goods { |
|
|
|
@ -161,30 +231,29 @@ export default { |
|
|
|
line-height: 1.1rem; |
|
|
|
text-align: center; |
|
|
|
font-size: 0.28rem; |
|
|
|
color: #888; |
|
|
|
a { |
|
|
|
color: #888; |
|
|
|
position: relative; |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
font-size: 10px; |
|
|
|
top: -0.1rem; |
|
|
|
right: -0.2rem; |
|
|
|
} |
|
|
|
.i-hot { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.1rem; |
|
|
|
} |
|
|
|
.i-new { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.08rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.on { |
|
|
|
background-color: #fff; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
span { |
|
|
|
position: relative; |
|
|
|
img { |
|
|
|
position: absolute; |
|
|
|
font-size: 10px; |
|
|
|
top: -0.1rem; |
|
|
|
right: -0.2rem; |
|
|
|
} |
|
|
|
.i-hot { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.1rem; |
|
|
|
} |
|
|
|
.i-new { |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.08rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
@ -229,11 +298,13 @@ export default { |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
.full { |
|
|
|
font-size: 0.18rem; |
|
|
|
background-color: #FFF2E5; |
|
|
|
color: #F4A353; |
|
|
|
padding: 0 0.1rem; |
|
|
|
line-height: 1; |
|
|
|
height: 0.3rem; |
|
|
|
font-size:0.2rem; |
|
|
|
color:rgba(244,163,83,1); |
|
|
|
i { |
|
|
|
background:rgba(255,242,229,1); |
|
|
|
padding: 1px 3px; |
|
|
|
} |
|
|
|
} |
|
|
|
.price { |
|
|
|
.money { |
|
|
|
@ -253,4 +324,16 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.Loading-box { |
|
|
|
.weui-toast { |
|
|
|
width: 100%; |
|
|
|
min-height: 100% !important; |
|
|
|
overflow: hidden; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
.weui-icon_toast.weui-loading { |
|
|
|
margin-top: 75%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
wenghaocan
7 years ago
