1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

fixed

feature/feature-compatible
wangkesi 7 years ago
parent
a5469a9469
commit
0d2eb4edfb
3 changed files with 826 additions and 778 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      src/router/index.js
  2. 707
      src/view/goods-classify.vue
  3. 809
      src/view/home.vue

88
src/router/index.js
View File

@ -1,75 +1,77 @@
import Vue from 'vue'
import Router from 'vue-router'
import Vue from "vue";
import Router from "vue-router";
// 懒加载方式，当路由被访问的时候才加载对应组件
const monthCard = resolve => require(['@/view/month-card'], resolve)
const putMoney = resolve => require(['@/view/put-money'], resolve)
const serviceEvaluation = resolve => require(['@/view/service-evaluation'], resolve)
const putMoneySuccess = resolve => require(['@/view/put-money-success'], resolve)
const serviceEvaluationStatus = resolve => require(['@/view/service-evaluation-status'], resolve)
const home = resolve => require(['@/view/home'], resolve)
const poster = resolve => require(['@/view/poster'], resolve)
const demo = resolve => require(['@/view/demo'], resolve)
const goodsClassify = resolve => require(['@/view/goods-classify'], resolve)
const monthCard = resolve => require(["@/view/month-card"], resolve);
const putMoney = resolve => require(["@/view/put-money"], resolve);
const serviceEvaluation = resolve =>
require(["@/view/service-evaluation"], resolve);
const putMoneySuccess = resolve =>
require(["@/view/put-money-success"], resolve);
const serviceEvaluationStatus = resolve =>
require(["@/view/service-evaluation-status"], resolve);
const home = resolve => require(["@/view/home"], resolve);
const poster = resolve => require(["@/view/poster"], resolve);
const demo = resolve => require(["@/view/demo"], resolve);
const goodsClassify = resolve => require(["@/view/goods-classify"], resolve);
Vue.use(Router)
Vue.use(Router);
let router = new Router({
mode: 'history',
base: '/v2',
mode: "history",
base: "/v2",
routes: [
{
path: '/month-card',
name: '领取优惠券',
component: monthCard
path: "/month-card",
name: "领取优惠券",
component: monthCard
},
{
path: '/put-money',
name: '提现申请',
path: "/put-money",
name: "提现申请",
component: putMoney
},
{
path: '/put-money-success/:num',
name: '提现成功',
component: putMoneySuccess,
path: "/put-money-success/:num",
name: "提现成功",
component: putMoneySuccess
},
{
path: '/service-evaluation',
name: '服务评价',
path: "/service-evaluation",
name: "服务评价",
component: serviceEvaluation
},
{
path: '/service-evaluation-status',
name: '服务评价状态',
path: "/service-evaluation-status",
name: "服务评价状态",
component: serviceEvaluationStatus
},
{
path: '/goods-classify/:no/:id/:c_no',
name: '商品分类',
path: "/goods-classify/:no/:id/:c_no",
name: "商品分类",
component: goodsClassify
},
{
path: '/home',
name: '首页',
component: home
path: "/home",
name: "首页",
component: home
},
{
path: '/poster',
name: '分销海报',
component: poster
path: "/poster",
name: "分销海报",
component: poster
},
{
path: '/demo',
name: 'demo',
path: "/demo",
name: "demo",
component: demo
},
{
path: "/",
redirect: "/home"
}
// {
// path:"/",
// redirect:"/home"
// }
]
})
});
// router.beforeEach((to, from, next) => {
// console.log('to:' + to.path)
@ -86,4 +88,4 @@ let router = new Router({
// }
// })
export default router
export default router;

707
src/view/goods-classify.vue
View File

@ -1,95 +1,104 @@
<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 :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"/>
<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 :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>
<p class="title f-ellipsis-1">{{goods.name}}</p>
<p class="rule f-ellipsis-1">{{goods.shortDesc}}</p>
<div class="full"><i v-if="toJSON(goods.smallLabel)">{{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>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Loading -->
<loading :show="showLoading" text="loading"></loading>
</div>
<div class="info f-flex">
<div>
<p class="title f-ellipsis-1">{{goods.name}}</p>
<p class="rule f-ellipsis-1">{{goods.shortDesc}}</p>
<div class="full f-ellipsis-1">
<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
}
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() {
/*currentIndex() {
for (let i = 0; i < this.listHeight.length; i++){
let height = this.listHeight[i]
let height2 = this.listHeight[i + 1]
@ -108,91 +117,102 @@
}
return 0
}*/
},
components: {
Toast,
Popup,
Loading
},
methods:{
//返回上一页
goBack() {
// history.go(-1)
this.$router.push({
name: "首页"
});
},
// 取到路由带过来的参数
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])
}
}
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) {
},
components: {
Toast,
Popup,
Loading
},
methods: {
//返回上一页
goBack() {
// history.go(-1)
this.$router.push({
name: "首页"
});
},
// 取到路由带过来的参数
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 ;
}
@ -200,174 +220,185 @@
let el = foodList[index];
this.foodsScroll.scrollToElement(el,300)
},*/
selectMenu(index, event){
this.clickTrue = true //触发过事件之后，clickTrue的值变为true
this.currentNum = index
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()
//在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>
.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 {
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;
// line-height: 1;
}
.full {
height: 0.3rem;
font-size:0.2rem;
color:rgba(244,163,83,1);
margin: 0.16rem 0 0.1rem;
i {
background:rgba(255,242,229,1);
padding: 1px 3px;
font-style: normal;
}
}
.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;
}
}
}
}
}
}
.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 {
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;
line-height: 1;
}
.rule {
font-size: 0.22rem;
color: #999;
padding: 0.1rem 0 0;
// line-height: 1;
}
.full {
height: 0.3rem;
font-size: 0.2rem;
color: rgba(244, 163, 83, 1);
margin: 0.16rem 0 0.1rem;
i {
background: rgba(255, 242, 229, 1);
padding: 1px 3px;
font-style: normal;
}
}
.price {
min-width: 1.1rem;
.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;
}
}
}
}
}
}
</style>

809
src/view/home.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="home" style="height: auto;">
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav" >
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png"/>{{defaultCity}}</i>
<div style="height: 0.9rem;"></div>
<div ref="header" class="page-top" id="top-nav">
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i>
<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
<i class="text"><a href="tel:400-6080100">联系客服</a></i>
</div>
@ -11,7 +11,7 @@
<!--banner图-->
<div class="banner" v-if="bannerImgList.length > 0">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
<a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a>
</swiper-slide>
</swiper>
@ -23,14 +23,14 @@
<a href="javascript:void(0)" class="f-relative f-inb">
<img :src="imghost + item.icon" class="icon" />
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" />
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'"/>
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" />
</a>
<p>{{item.combinationName}}</p>
</div>
</div>
<div class="coupon" v-if="promotionImgList.imgUrl">
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl"/></a>
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl"/></a>
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a>
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a>
</div>
<!-- TODO: 三种样式 -->
<!-- one -->
@ -56,11 +56,11 @@
<div class="recommend f-flex" v-if="activityImgList.length == 1">
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a>
</div>
<!--商品列表-->
<div class="new-card-box" style="padding-top: 0.3rem;">
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
<div class="new-card-top" >
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index">
<div class="new-card-top">
<img :src=" imghost + item.image">
</div>
<ul class="card-list">
@ -74,11 +74,13 @@
<div class="right">
<h3>{{item1.name}}</h3>
<div class="text">{{item1.shortDesc}}</div>
<div class="card-name" v-if="toJSON(item1.smallLabel)"><i>{{toJSON(item1.smallLabel)}}</i></div>
<div class="card-name">
<i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i>
</div>
<div class="btn-box">
<!--originalPrice原价price优惠价 -->
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
<span class="original-price" vi-if="item1.price" ><em>￥{{ item1.originalPrice/100}}</em></span>
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
</div>
</div>
@ -92,121 +94,132 @@
<div class="page-bottom">
<routerFooter></routerFooter>
</div>
<popup v-model="show">
<div class="picke-address">
<div class="status-btn">
<a class="cel-btn" @click="show = false">取消</a>
<a class="complete-btn" @click="getName()">完成</a>
</div>
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
</div>
</popup>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
<div class="picke-address">
<div class="status-btn">
<a class="cel-btn" @click="show = false">取消</a>
<a class="complete-btn" @click="getName()">完成</a>
</div>
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
</div>
</popup>
<div class="Loading-box">
<loading v-model="showLoading" text="loading"></loading>
</div>
</div>
</template>
<script>
import homeApi from "../models/home-model.js";
import configs from '../configs';
import { Alert, Toast,Popup,Picker,Loading } from "vux";
import routerFooter from "../components/nav-bottom";
import homeApi from "../models/home-model.js";
import configs from "../configs";
import { Alert, Toast, Popup, Picker, Loading } from "vux";
import routerFooter from "../components/nav-bottom";
var locationUrl = configs.locationUrl;
export default {
data() {
return {
show: false,
defaultCity: '天河区', //区名 默认值 不需要去掉
merchantNo: 2, //商户编号 默认值 不需要去掉
districtId: '440106000', //区id 默认值 不需要去掉
addressData: [],
addressValue: [],
bannerImgList:[], //轮播图
activityImgList: [], // 广告图
iconList: [], // 图标列表
promotionImgList: {}, //优惠券，
goodsList:[],
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
swiperOption: {
autoplay: {
disableOnInteraction: false,
},
speed: 1000,
pagination: {
el: '.swiper-pagination'
}
},
showLoading: true,
searchBarFixed: false,
};
},
components: {
Toast,
Popup,
Picker,
routerFooter,
Loading
},
watch: {
$route(to,from){
this.getCityName ()
},
},
methods: {
//监听地区选择的完成按钮
getName (){
let arr = this.addressValue[2].split('&') || ''
this.districtId = arr[0]
this.merchantNo = arr[2]
this.getGoodsList() //加载商品列表
this.defaultCity = arr[1]
this.show = false
localStorage.setItem('cityName',this.addressValue)
this.ShareWenXin()
},
//获取本地存储上的地区信息
getCityName (){
let name = localStorage.getItem("cityName")||''
//本地存储不在 则赋予默认值
if(!name){
this.defaultCity = '天河区'
this.merchantNo = 2 //商户编号
this.districtId = '440106000' //区id
return;
}
//440000000&广东省,440100000&广州市,440106000&天河区&2
let arr = name.split(',')
this.addressValue = arr
let cityNameArr = arr[2].split('&')
this.districtId = cityNameArr[0]
this.defaultCity = cityNameArr[1]
this.merchantNo = cityNameArr[2]
},
//获取城市名称
change (name) {
this.addressValue = name
},
//加载商品列表
getGoodsList (){
let that = this
that.showLoading = true
var params = {
"merchantNo": this.merchantNo,
"selectedDistrictId": this.districtId
}
homeApi.getGoods(params).then(res => {
that.showLoading = false
if ( res.code == 0 ){
this.bannerImgList = res.response.bannerImgList
this.activityImgList = res.response.activityImgList || []
this.iconList = res.response.iconList || []
this.promotionImgList = res.response.promotionImgList[0] || {};
this.goodsList = res.response.goodsList
/*let goodsList = res.response.goodsList
var locationUrl = configs.locationUrl;
export default {
data() {
return {
show: false,
defaultCity: "天河区", //区名 默认值 不需要去掉
merchantNo: 2, //商户编号 默认值 不需要去掉
districtId: "440106000", //区id 默认值 不需要去掉
addressData: [],
addressValue: [],
bannerImgList: [], //轮播图
activityImgList: [], // 广告图
iconList: [], // 图标列表
promotionImgList: {}, //优惠券，
goodsList: [],
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
swiperOption: {
autoplay: {
disableOnInteraction: false
},
speed: 1000,
pagination: {
el: ".swiper-pagination"
}
},
showLoading: true,
searchBarFixed: false
};
},
components: {
Toast,
Popup,
Picker,
routerFooter,
Loading
},
watch: {
$route(to, from) {
this.getCityName();
}
},
methods: {
//监听地区选择的完成按钮
getName() {
let arr = this.addressValue[2].split("&") || "";
this.districtId = arr[0];
this.merchantNo = arr[2];
this.getGoodsList(); //加载商品列表
this.defaultCity = arr[1];
this.show = false;
localStorage.setItem("cityName", this.addressValue);
this.ShareWenXin();
},
//获取本地存储上的地区信息
getCityName() {
let name = localStorage.getItem("cityName") || "";
//本地存储不在 则赋予默认值
if (!name) {
this.defaultCity = "天河区";
this.merchantNo = 2; //商户编号
this.districtId = "440106000"; //区id
return;
}
//440000000&广东省,440100000&广州市,440106000&天河区&2
let arr = name.split(",");
this.addressValue = arr;
let cityNameArr = arr[2].split("&");
this.districtId = cityNameArr[0];
this.defaultCity = cityNameArr[1];
this.merchantNo = cityNameArr[2];
},
//获取城市名称
change(name) {
this.addressValue = name;
},
//加载商品列表
getGoodsList() {
let that = this;
that.showLoading = true;
var params = {
merchantNo: this.merchantNo,
selectedDistrictId: this.districtId
};
homeApi.getGoods(params).then(res => {
that.showLoading = false;
if (res.code == 0) {
this.bannerImgList = res.response.bannerImgList;
this.activityImgList = res.response.activityImgList || [];
this.iconList = res.response.iconList || [];
this.promotionImgList =
res.response.promotionImgList[0] || {};
let list = res.response.goodsList;
for (let i = 0; i < list.length; i++) {
for (let y = 0; y < list[i].goodsList.length; y++) {
list[i].goodsList[y].labelList = list[i].goodsList[
y
].smallLabel
? JSON.parse(list[i].goodsList[y].smallLabel)
: "";
}
}
this.goodsList = list.slice();
/*let goodsList = res.response.goodsList
let arr = [];
for(let i=0;i<goodsList.length;i++){
goodsList[i].combinationNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].combinationNo):"";
@ -227,382 +240,384 @@
}
}
this.goodsList = lastList.slice();*/
} else {
this.$vux.toast.text(res.msg,"middle");
}
});
},
//加载地址数据
getAddress (){
homeApi.getAddress().then(res => {
if ( res.code == 0 ){
this.addressData = res.data
} else {
this.$vux.toast.text(res.msg,"middle");
}
});
},
toJSON (data){
if (data){
return JSON.parse(data)[0].labelText
}else {
return ;
}
},
//获取默认地址信息
getdefaultAddress (){
homeApi.getdefaultAddress().then(res => {
if ( res.code == 0 ){
//如果获取的信息不存在 将从本地存储上拿
if ( !res.data ){
this.show = true
this.getCityName ()
} else {
this.defaultCity = res.data.districtName
this.districtId = res.data.districtId
this.merchantNo = res.data.merchantNo
this.addressValue = []
this.addressValue.push(res.data.provinceId)
this.addressValue.push(res.data.cityId)
this.addressValue.push(res.data.districtId)
}
} else {
this.$vux.toast.text(res.msg,"middle");
}
this.getGoodsList()
});
},
ShareWenXin (){
var merchantNo = this.merchantNo
this.wxShare({"merchantNo":merchantNo,"source":0,"url":encodeURIComponent(location.href)})
},
// 商品分类
goods(c_no) {
this.$router.push({
name: "商品分类",
params: {
no: this.merchantNo,
id: this.districtId,
c_no: c_no
}
});
},
},
mounted() {
//异步加载
this.getdefaultAddress()
this.getAddress()
this.ShareWenXin()
}
};
} else {
this.$vux.toast.text(res.msg, "middle");
}
});
},
//加载地址数据
getAddress() {
homeApi.getAddress().then(res => {
if (res.code == 0) {
this.addressData = res.data;
} else {
this.$vux.toast.text(res.msg, "middle");
}
});
},
toJSON(data) {
if (data) {
return JSON.parse(data)[0].labelText;
} else {
return;
}
},
//获取默认地址信息
getdefaultAddress() {
homeApi.getdefaultAddress().then(res => {
if (res.code == 0) {
//如果获取的信息不存在 将从本地存储上拿
if (!res.data) {
this.show = true;
this.getCityName();
} else {
this.defaultCity = res.data.districtName;
this.districtId = res.data.districtId;
this.merchantNo = res.data.merchantNo;
this.addressValue = [];
this.addressValue.push(res.data.provinceId);
this.addressValue.push(res.data.cityId);
this.addressValue.push(res.data.districtId);
}
} else {
this.$vux.toast.text(res.msg, "middle");
}
this.getGoodsList();
});
},
ShareWenXin() {
var merchantNo = this.merchantNo;
this.wxShare({
merchantNo: merchantNo,
source: 0,
url: encodeURIComponent(location.href)
});
},
// 商品分类
goods(c_no) {
this.$router.push({
name: "商品分类",
params: {
no: this.merchantNo,
id: this.districtId,
c_no: c_no
}
});
}
},
mounted() {
//异步加载
this.getdefaultAddress();
this.getAddress();
this.ShareWenXin();
}
};
</script>
<style lang="scss">
.swiper-pagination {
width: 100%;
height: 0.3rem;
bottom: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 0.3rem;
bottom: 0.15rem;
display: flex;
align-items: center;
justify-content: center;
}
.swiper-pagination span {
width: 0.2rem;
height: 0.2rem;
margin: 0 0.1rem;
background-color: rgba(255,255,255,0.9);
width: 0.2rem;
height: 0.2rem;
margin: 0 0.1rem;
background-color: rgba(255, 255, 255, 0.9);
}
.swiper-pagination-bullet-active {
background-color: rgba(255,255,255,1);
background-color: rgba(255, 255, 255, 1);
}
</style>
<style lang="scss" scoped>
.home {
width: 100%;
height: 100%;
background:rgba(255,255,255,1);
position: relative;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
position: relative;
}
.home .page-top {
background:rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
background: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
justify-content: space-around;
z-index: 100;
position: fixed;
top: 0;
left: 0;
}
.home .page-top i {
font-style: normal;
display: flex;
align-items: center;
font-style: normal;
display: flex;
align-items: center;
}
.home .page-top .position {
font-size:0.26rem;
font-weight:500;
color:rgba(153,153,153,1);
font-size: 0.26rem;
font-weight: 500;
color: rgba(153, 153, 153, 1);
}
.home .page-top .position img {
width:0.2rem;
height:0.25rem;
margin-right: 0.07rem;
width: 0.2rem;
height: 0.25rem;
margin-right: 0.07rem;
}
.home .page-top .logo img {
width:1.77rem;
height:0.3rem;
width: 1.77rem;
height: 0.3rem;
}
.home .page-top .text {
height:0.28rem;
font-size:0.28rem;
font-weight:400;
color:rgba(36,158,108,1);
height: 0.28rem;
font-size: 0.28rem;
font-weight: 400;
color: rgba(36, 158, 108, 1);
}
.home .page-top .text a {
position: relative;
color:rgba(36,158,108,1);
position: relative;
color: rgba(36, 158, 108, 1);
}
.home .page-content {
background:rgba(255,255,255,1);
-webkit-overflow-scrolling : touch;
overflow-y: scroll;
position: relative;
top: 0;
z-index: 10;
background: rgba(255, 255, 255, 1);
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: relative;
top: 0;
z-index: 10;
}
.home .page-content .banner {
max-height: 3rem;
position: relative;
-webkit-overflow-scrolling: touch;
max-height: 3rem;
position: relative;
-webkit-overflow-scrolling: touch;
}
.home .page-content .banner > div {
max-height: 3rem;
-webkit-overflow-scrolling: touch;
max-height: 3rem;
-webkit-overflow-scrolling: touch;
}
.home .page-content .banner a {
display: block;
display: block;
}
.home .page-content .banner div img {
width: 100%;
height: 3rem;
display: block;
margin: auto;
width: 100%;
height: 3rem;
display: block;
margin: auto;
}
.swiper-img {
width: 100%;
height: 3rem;
background-size: 100% 100%;
width: 100%;
height: 3rem;
background-size: 100% 100%;
}
.home .page-content .coupon {
margin-top: 0.3rem;
margin-top: 0.3rem;
}
.home .page-content .coupon img {
width:6.8rem;
display: block;
margin: auto;
width: 6.8rem;
display: block;
margin: auto;
}
.home .page-content .new-card-first{
padding-top: 0.3rem;
.home .page-content .new-card-first {
padding-top: 0.3rem;
}
.home .page-content .new-card .new-card-top {
padding: 0rem 0 0.3rem;
padding: 0rem 0 0.3rem;
}
.home .page-content .new-card .new-card-top img {
width:7.1rem;
display: block;
margin: auto;
width: 7.1rem;
display: block;
margin: auto;
}
.home .page-content .new-card .card-list li {
width:7rem;
height:2.5rem;
border:1px solid rgba(238,238,238,1);
box-sizing: border-box;
padding: 0.2rem;
margin: auto;
margin-bottom: 0.3rem;
display: block;
width: 7rem;
height: 2.5rem;
border: 1px solid rgba(238, 238, 238, 1);
box-sizing: border-box;
padding: 0.2rem;
margin: auto;
margin-bottom: 0.3rem;
display: block;
}
.home .page-content .new-card .card-list li a {
display: flex;
align-items: center;
justify-content: space-between;
display: flex;
align-items: center;
justify-content: space-between;
}
.home .page-content .new-card .card-list li .left {
width: 2rem;
height: 2rem;
width: 2rem;
height: 2rem;
}
.home .page-content .new-card .card-list li .left img {
width: 2rem;
height: 2rem;
display: block;
width: 2rem;
height: 2rem;
display: block;
}
.home .page-content .new-card .card-list li .right {
width: 4.3rem;
height: 2rem;
position: relative;
width: 4.3rem;
height: 2rem;
position: relative;
}
.home .page-content .new-card .card-list li .right h3 {
font-size:0.32rem;
font-weight:400;
color:rgba(51,51,51,1);
margin-bottom: 0.1rem;
font-size: 0.32rem;
font-weight: 400;
color: rgba(51, 51, 51, 1);
margin-bottom: 0.1rem;
}
.home .page-content .new-card .card-list li .right .text {
font-size:0.24rem;
font-weight:400;
color:rgba(153,153,153,1);
margin-bottom: 0.1rem;
font-size: 0.24rem;
font-weight: 400;
color: rgba(153, 153, 153, 1);
margin-bottom: 0.1rem;
}
.home .page-content .new-card .card-list li .right .card-name {
height: 0.3rem;
font-size:0.2rem;
font-style: normal;
font-weight:400;
color:rgba(244,163,83,1);
height: 0.3rem;
font-size: 0.2rem;
font-style: normal;
font-weight: 400;
color: rgba(244, 163, 83, 1);
}
.home .page-content .new-card .card-list li .right .card-name i {
font-style: normal;
background:rgba(255,242,229,1);
padding: 1px 3px;
font-style: normal;
background: rgba(255, 242, 229, 1);
padding: 1px 3px;
}
.home .page-content .new-card .card-list li .right .btn {
display: flex;
align-items: center;
justify-content: space-around;
display: flex;
align-items: center;
justify-content: space-around;
}
.home .page-content .new-card .card-list li .right .btn-box {
width: 4.3rem;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
width: 4.3rem;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
}
.home .page-content .new-card .card-list li .right .btn-box .price {
color: #249E6C;
color: #249e6c;
min-width: 1.3rem;
}
.home .page-content .new-card .card-list li .right .btn-box span em {
font-size:0.38rem;
font-weight:600;
font-style: normal;
font-size: 0.38rem;
font-weight: 600;
font-style: normal;
}
.home .page-content .new-card .card-list li .right .btn-box .original-price em {
font-size: 0.24rem;
text-decoration:line-through ;
font-weight: normal;
font-size: 0.24rem;
text-decoration: line-through;
font-weight: normal;
}
.home .page-content .new-card .card-list li .right .btn-box span {
font-size: 0.22rem;
font-weight:400;
color:rgba(153,153,153,1);
margin-right: auto;
font-size: 0.22rem;
font-weight: 400;
color: rgba(153, 153, 153, 1);
margin-right: auto;
}
.home .page-content .new-card .card-list li .right .btn-box a {
width:1.7rem;
height:0.56rem;
border-radius:0rem;
background-color: #2BB079;
border: none;
color: #fff;
border-radius: 2px;
font-size: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
width: 1.7rem;
height: 0.56rem;
border-radius: 0rem;
background-color: #2bb079;
border: none;
color: #fff;
border-radius: 2px;
font-size: 0.3rem;
display: flex;
align-items: center;
justify-content: center;
}
.home .page-bottom {
width: 100%;
height: 1rem;
position: fixed;
bottom: 0;
background:rgba(255,255,255,1);
z-index: 130;
width: 100%;
height: 1rem;
position: fixed;
bottom: 0;
background: rgba(255, 255, 255, 1);
z-index: 130;
}
.picke-address .status-btn {
display: flex;
height: 0.8rem;
align-items: center;
justify-content: space-between;
font-size: 0.3rem;
display: flex;
height: 0.8rem;
align-items: center;
justify-content: space-between;
font-size: 0.3rem;
}
.picke-address .status-btn a {
padding: 0.3rem;
color: #888;
padding: 0.3rem;
color: #888;
}
.picke-address .status-btn a.complete-btn {
color: #1aad19;
color: #1aad19;
}
.Loading-box .weui-toast {
width: 100%;
min-height: 100% !important;
overflow: hidden;
top: 0;
width: 100%;
min-height: 100% !important;
overflow: hidden;
top: 0;
}
.Loading-box .weui-icon_toast.weui-loading {
margin-top: 75%;
margin-top: 75%;
}
.service {
padding: 0.11rem 0;
.item {
text-align: center;
font-size: 0;
flex: 1;
.icon {
width: 0.78rem;
height: 0.78rem;
}
.hot {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.1rem;
}
.new {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.08rem;
}
p {
color: #666;
font-size: 0.21rem;
}
}
padding: 0.11rem 0;
.item {
text-align: center;
font-size: 0;
flex: 1;
.icon {
width: 0.78rem;
height: 0.78rem;
}
.hot {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.1rem;
}
.new {
position: absolute;
top: 0.05rem;
right: 0;
width: 0.24rem;
height: 0.08rem;
}
p {
color: #666;
font-size: 0.21rem;
}
}
}
.recommend {
padding: 0 0.2rem;
margin-top: 0.3rem;
font-size: 0;
.left {
img {
width: 2.51rem;
height: 1.74rem;
margin-right: 0.05rem;
}
}
.right {
img {
width: 4.54rem;
height: 0.84rem;
}
.gap {
margin-bottom: 0.06rem;
}
.two {
width: 4.54rem;
height: 1.74rem;
}
}
.three {
width: 7.1rem;
height: 1.74rem;
}
padding: 0 0.2rem;
margin-top: 0.3rem;
font-size: 0;
.left {
img {
width: 2.51rem;
height: 1.74rem;
margin-right: 0.05rem;
}
}
.right {
img {
width: 4.54rem;
height: 0.84rem;
}
.gap {
margin-bottom: 0.06rem;
}
.two {
width: 4.54rem;
height: 1.74rem;
}
}
.three {
width: 7.1rem;
height: 1.74rem;
}
}
</style>
Write Preview
Loading…
Cancel
Save