You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
9.2 KiB
339 lines
9.2 KiB
<template>
|
|
<div class="container goods">
|
|
<div class="top f-bb-gray">
|
|
<img src="../assets/images/icon/arrow-left.png" v-on:click="goBack"/>商品分类
|
|
</div>
|
|
<div class="content cate-content">
|
|
<div class="left">
|
|
<ul>
|
|
<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="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>
|
|
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 {
|
|
background-color: #fff;
|
|
.top {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 0.9rem;
|
|
line-height: 0.9rem;
|
|
text-align: center;
|
|
font-size: 0.36rem;
|
|
color: #249e6c;
|
|
img {
|
|
position: absolute;
|
|
width: 0.2rem;
|
|
height: 0.35rem;
|
|
top: 50%;
|
|
left: 0.4rem;
|
|
margin-top: -0.17rem;
|
|
}
|
|
}
|
|
.content {
|
|
width: 100%;
|
|
display: flex;
|
|
height: calc(100vh - 0.9rem);
|
|
.left {
|
|
width: 1.74rem;
|
|
background-color: #F3F3F3;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
ul {
|
|
li {
|
|
width: 1.74rem;
|
|
height: 1.1rem;
|
|
line-height: 1.1rem;
|
|
text-align: center;
|
|
font-size: 0.28rem;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.right {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 0.2rem 0.22rem 0;
|
|
width: calc(100% - 1.74rem);
|
|
box-sizing: border-box;
|
|
.title {
|
|
padding: 0.12rem 0 0.12rem;
|
|
font-size: 0.24rem;
|
|
color: #999;
|
|
}
|
|
.item {
|
|
position: relative;
|
|
padding: 0.16rem;
|
|
z-index: 1;
|
|
height: 1.87rem;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0.2rem;
|
|
.thumb {
|
|
width: 1.54rem;
|
|
height: 1.54rem;
|
|
}
|
|
.info {
|
|
margin-left: 0.15rem;
|
|
flex: 1;
|
|
height: 100%;
|
|
font-size: 0;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 0.3rem;
|
|
color: #333;
|
|
padding: 0;
|
|
}
|
|
.rule {
|
|
font-size: 0.22rem;
|
|
color: #999;
|
|
padding: 0.1rem 0 0.16rem;
|
|
line-height: 1;
|
|
}
|
|
.full {
|
|
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 {
|
|
font-size: 0.22rem;
|
|
}
|
|
color: #249E6C;
|
|
font-size: 0.34rem;
|
|
}
|
|
.cost {
|
|
color: #BBBBBB;
|
|
font-size: 0.24rem;
|
|
margin-left: 0.18rem;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.Loading-box {
|
|
.weui-toast {
|
|
width: 100%;
|
|
min-height: 100% !important;
|
|
overflow: hidden;
|
|
top: 0;
|
|
}
|
|
.weui-icon_toast.weui-loading {
|
|
margin-top: 75%;
|
|
}
|
|
}
|
|
|
|
</style>
|