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.
479 lines
16 KiB
479 lines
16 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">
|
|
<div class="left" ref="menuWrapper">
|
|
<ul>
|
|
<li v-if="goodsList.length != 0" :class="{'on': (currentIndex < 0 ? 0 : currentIndex) === index}" v-for="(item,index) in goodsList" :key="index" @click="selectMenu(index,$event)">
|
|
<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" ref="foodWrapper">
|
|
<div>
|
|
<div v-if="goodsList.length != 0" v-for="(item,index) in goodsList" :key="index" class="food-list-hook">
|
|
<p class="title">{{item.combinationName}}</p>
|
|
<div class="f-relative f-all-1px" v-for="(goods,k) in item.goodsList" :key="k">
|
|
<a style="display:block" :href="'/mall/web/vgoods/detail/' + goods.goodsNo">
|
|
<div class="item f-flex">
|
|
<a :href="'/mall/web/vgoods/detail/' + goods.goodsNo" class="list-img-box">
|
|
<img :src=" imghost + goods.bannerImgs" class="thumb" />
|
|
</a>
|
|
<div class="info f-flex">
|
|
<div class="info-box">
|
|
<p class="title f-ellipsis-1 ellipsis">{{goods.name}}</p>
|
|
<p class="rule f-ellipsis-1">{{goods.shortDesc}}</p>
|
|
<div class="card-name">
|
|
<i :style="{marginRight:(i+1)==goods.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in goods.labelList">{{label.labelText}}</i>
|
|
</div>
|
|
</div>
|
|
<div class="f-flex">
|
|
<p class="price">
|
|
<span><span class="money">￥</span>{{goods.price?goods.price/100:goods.originalPrice/100}}</span>
|
|
</p>
|
|
<p class="cost" v-if="goods.originalPrice&&goods.price&&goods.originalPrice!=goods.price">￥{{goods.originalPrice/100}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Loading -->
|
|
<loading :show="showLoading" text="loading"></loading>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import goodsApi from "../models/goods-model.js";
|
|
//import configs from '../configs';
|
|
import { Alert, Toast, Popup, Loading } from "vux";
|
|
import BScroll from "better-scroll";
|
|
export default {
|
|
data() {
|
|
return {
|
|
no: 0,
|
|
id: 0,
|
|
c_no: 0,
|
|
showLoading: false,
|
|
goodsList: [],
|
|
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
|
|
listHeight: [], //存储区块的高度
|
|
scrollY: {},
|
|
clickTrue: false,
|
|
currentNum: 0
|
|
};
|
|
},
|
|
computed: {
|
|
currentIndex() {
|
|
const { scrollY, listHeight, clickTrue, currentNum } = this;
|
|
let index = listHeight.findIndex((height, index) => {
|
|
return (
|
|
scrollY >= listHeight[index] &&
|
|
scrollY < listHeight[index + 1]
|
|
);
|
|
});
|
|
if (scrollY > listHeight[index] + 50) {
|
|
index++;
|
|
}
|
|
if (
|
|
listHeight[listHeight.length - 1] -
|
|
this.$refs.foodWrapper.clientHeight <=
|
|
scrollY
|
|
) {
|
|
if (clickTrue) {
|
|
return currentNum;
|
|
} else {
|
|
return listHeight.length - 1;
|
|
}
|
|
}
|
|
return index;
|
|
}
|
|
|
|
/*currentIndex() {
|
|
for (let i = 0; i < this.listHeight.length; i++){
|
|
let height = this.listHeight[i]
|
|
let height2 = this.listHeight[i + 1]
|
|
//当height2不存在的时候，或者落在height和height2之间的时候，直接返回当前索引
|
|
//>=height,是因为一开始this.scrollY=0,height=0
|
|
if( !height2 || (this.scrollY >= height && this.scrollY < height2)) {
|
|
return i
|
|
}
|
|
if(this.listHeight[this.listHeight.length-1] - this.$refs.foodWrapper.clientHeight <= this.scrollY ) {
|
|
if(this.clickTrue) {
|
|
return this.currentNum
|
|
} else {
|
|
return (this.listHeight.length-1)
|
|
}
|
|
}
|
|
}
|
|
return 0
|
|
}*/
|
|
},
|
|
components: {
|
|
Toast,
|
|
Popup,
|
|
Loading
|
|
},
|
|
methods: {
|
|
//返回上一页
|
|
goBack() {
|
|
// history.go(-1)
|
|
this.$router.push({
|
|
name: "首页"
|
|
});
|
|
},
|
|
goTo(no){
|
|
location.href=""
|
|
},
|
|
// 取到路由带过来的参数
|
|
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 || [];
|
|
let list = [];
|
|
for (var i = 0; i < this.goodsList.length; i++) {
|
|
if (this.goodsList[i].goodsList.length != 0) {
|
|
list.push(this.goodsList[i]);
|
|
}
|
|
}
|
|
for (let y = 0; y < list.length; y++) {
|
|
for (let z = 0; z < list[y].goodsList.length; z++) {
|
|
list[y].goodsList[z].labelList = list[y].goodsList[
|
|
z
|
|
].smallLabel
|
|
? JSON.parse(list[y].goodsList[z].smallLabel)
|
|
: "";
|
|
}
|
|
}
|
|
this.goodsList = list;
|
|
this.$nextTick(function() {
|
|
//调用scroll函数，实现滚动
|
|
this._initScroll();
|
|
//拿到数据以后计算高度
|
|
this._calculateHeight();
|
|
// 自动选中
|
|
this.autoSelect(list, this.c_no);
|
|
});
|
|
} else {
|
|
this.$vux.toast.text(res.msg, "middle");
|
|
}
|
|
});
|
|
},
|
|
toJSON(data) {
|
|
if (data) {
|
|
return JSON.parse(data)[0].labelText;
|
|
} else {
|
|
return;
|
|
}
|
|
},
|
|
_initScroll() {
|
|
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
|
|
click: true //允许better-scroll列表上的点击事件
|
|
});
|
|
this.foodsScroll = new BScroll(this.$refs.foodWrapper, {
|
|
click: true, //允许better-scroll列表上的点击事件
|
|
probeType: 3 //让better-scroll监听scroll事件
|
|
});
|
|
this.foodsScroll.on("scroll", pos => {
|
|
this.scrollY = Math.abs(Math.round(pos.y));
|
|
});
|
|
},
|
|
_calculateHeight() {
|
|
//food-list-hook类的添加知识为了能拿到food列表,例如，拿到的是多个类似整个粥品的区块
|
|
let foodList = this.$refs.foodWrapper.getElementsByClassName(
|
|
"food-list-hook"
|
|
);
|
|
let height = 0;
|
|
this.listHeight.push(height);
|
|
//listHeight是一个递增的区间数组，是每个专区高度的累加
|
|
for (let i = 0; i < foodList.length; i++) {
|
|
let item = foodList[i];
|
|
height += item.clientHeight;
|
|
this.listHeight.push(height);
|
|
}
|
|
},
|
|
/*selectMenu(index, event) {
|
|
if(event && !event._constructed) {
|
|
return ;
|
|
}
|
|
let foodList = this.$refs.foodWrapper.getElementsByClassName("food-list-hook");
|
|
let el = foodList[index];
|
|
this.foodsScroll.scrollToElement(el,300)
|
|
},*/
|
|
selectMenu(index, event) {
|
|
this.clickTrue = true; //触发过事件之后，clickTrue的值变为true
|
|
this.currentNum = index;
|
|
|
|
//在better-scroll的派发事件的event和普通浏览器的点击事件event有个属性区别_constructed
|
|
// 浏览器原生点击事件没有_constructed所以当时浏览器监听到该属性的时候return掉
|
|
if (event && !event._constructed) {
|
|
return;
|
|
} else {
|
|
let foodList = this.$refs.foodWrapper.getElementsByClassName(
|
|
"food-list-hook"
|
|
);
|
|
let el = foodList[index];
|
|
this.foodsScroll.scrollToElement(el, 300);
|
|
}
|
|
},
|
|
autoSelect(list, no) {
|
|
list.forEach((v, i, a) => {
|
|
if (v.combinationNo === no) {
|
|
this.selectMenu(i);
|
|
}
|
|
});
|
|
},
|
|
ShareWenXin() {
|
|
var merchantNo = this.no;
|
|
this.wxShare({
|
|
merchantNo: merchantNo,
|
|
source: 0,
|
|
url: encodeURIComponent(location.href),
|
|
shareUrl: encodeURIComponent(
|
|
"http://" + location.host + "/v2/home"
|
|
)
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getParams();
|
|
this.ShareWenXin();
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.card-name {
|
|
height: 0.3rem;
|
|
font-size: 0.18rem;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
color: #f4a353;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
margin-top:0.1rem;
|
|
i {
|
|
font-style: normal;
|
|
background: rgba(255, 242, 229, 1);
|
|
padding: 0.05rem 0.1rem;
|
|
line-height: 0.28rem;
|
|
}
|
|
}
|
|
.ellipsis {
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
line-height: 1 !important;
|
|
word-wrap: break-word;
|
|
height: 0.32rem;
|
|
}
|
|
.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);
|
|
-webkit-overflow-scrolling: touch;
|
|
.left {
|
|
width: 1.74rem;
|
|
background-color: #f3f3f3;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
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;
|
|
-webkit-overflow-scrolling: touch;
|
|
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;
|
|
}
|
|
.list-img-box {
|
|
display: flex;
|
|
// align-items: center;
|
|
}
|
|
.item {
|
|
align-items: flex-start;
|
|
height: 1.87rem;
|
|
// position: relative;
|
|
a{
|
|
display: block;
|
|
}
|
|
padding: 0.16rem;
|
|
width: 5.32rem;
|
|
z-index: 1;
|
|
// height: 1.87rem;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0.2rem;
|
|
.list-img-box{
|
|
margin-right: 0.15rem;
|
|
}
|
|
.thumb {
|
|
width: 1.54rem;
|
|
height: 1.54rem;
|
|
}
|
|
.info {
|
|
padding-top:0.05rem;
|
|
display: flex;
|
|
width: 3.33rem;
|
|
flex-grow:1;
|
|
height: 100%;
|
|
font-size: 0;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
.info-box{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.title {
|
|
font-size: 0.3rem;
|
|
color: #333;
|
|
width: 100%;
|
|
padding: 0;
|
|
line-height: 1;
|
|
}
|
|
.rule {
|
|
font-size: 0.22rem;
|
|
color: #999;
|
|
width: 100%;
|
|
padding: 0.1rem 0 0;
|
|
height: 0.22rem;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
margin-top: 0.16rem;
|
|
line-height: 1;
|
|
}
|
|
.full {
|
|
height: 0.2rem;
|
|
font-size: 0.2rem;
|
|
width: 100%;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
color: rgba(244, 163, 83, 1);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
margin-top: 0.16rem;
|
|
line-height: 1;
|
|
i {
|
|
font-weight: 400;
|
|
color: #f4a353;
|
|
overflow: hidden;
|
|
height: 0.22rem;
|
|
font-style: normal;
|
|
background: rgba(255, 242, 229, 1);
|
|
padding: 1px 3px;
|
|
}
|
|
}
|
|
.price {
|
|
font-size: 0;
|
|
min-width: 1.5rem;
|
|
span {
|
|
display: inline-block;
|
|
font-size: 0.34rem;
|
|
}
|
|
.money {
|
|
font-size: 0.22rem;
|
|
}
|
|
color: #249e6c;
|
|
}
|
|
.cost {
|
|
color: #bbbbbb;
|
|
font-size: 0.24rem;
|
|
margin-left: 0.1rem;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|