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.
682 lines
19 KiB
682 lines
19 KiB
|
|
<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>
|
|
<i class="logo"><img src="../assets/images/icon/logo.png" /></i>
|
|
<i class="text"><a href="tel:400-6080100">联系客服</a></i>
|
|
</div>
|
|
<div class="page-content">
|
|
<!--banner图-->
|
|
<div class="banner" v-if="bannerImgList.length > 0">
|
|
<swiper :options="swiperOption" ref="mySwiper">
|
|
<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>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<!-- TODO: 对应换hot 和 new 图标 -->
|
|
<div class="service f-flex" v-if="iconList.length != 0">
|
|
<div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)">
|
|
<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'" />
|
|
</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>
|
|
</div>
|
|
<!-- TODO: 三种样式 -->
|
|
<!-- one -->
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 3">
|
|
<div class="left">
|
|
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
|
|
</div>
|
|
<div class="right">
|
|
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a>
|
|
<a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a>
|
|
</div>
|
|
</div>
|
|
<!-- two -->
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 2">
|
|
<div class="left">
|
|
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a>
|
|
</div>
|
|
<div class="right">
|
|
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a>
|
|
</div>
|
|
</div>
|
|
<!-- three -->
|
|
<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">
|
|
<img :src=" imghost + item.image">
|
|
</div>
|
|
<ul class="card-list">
|
|
<li v-for="item1 in item.goodsList">
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
|
|
<div class="left">
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">
|
|
<img :src=" imghost + item1.bannerImgs" />
|
|
</a>
|
|
</div>
|
|
<div class="right">
|
|
<h3>{{item1.name}}</h3>
|
|
<div class="text">{{item1.shortDesc}}</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优惠价 -->
|
|
<div class="btn-box-left">
|
|
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span>
|
|
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span>
|
|
</div>
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="height:1rem"></div>
|
|
</div>
|
|
<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>
|
|
</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";
|
|
|
|
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):"";
|
|
}
|
|
let set =new Set(arr);
|
|
let list=Array.from(set);
|
|
let lastList=[];
|
|
for(let i=0;i<list.length;i++){
|
|
lastList.push({
|
|
type:list[i],
|
|
list:[],
|
|
|
|
})
|
|
for(let x=0;x<goodsList.length;x++){
|
|
if(lastList[i].type==goodsList[x].combinationNo&&goodsList[x].isRelease==1){
|
|
lastList[i].list.push(goodsList[x]);
|
|
}
|
|
}
|
|
}
|
|
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();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.swiper-pagination {
|
|
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);
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.btn-box {
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
.btn-box-left {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
// justify-content: space-around;
|
|
}
|
|
}
|
|
.home {
|
|
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;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.home .page-top i {
|
|
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);
|
|
}
|
|
.home .page-top .position img {
|
|
width: 0.2rem;
|
|
height: 0.25rem;
|
|
margin-right: 0.07rem;
|
|
}
|
|
.home .page-top .logo img {
|
|
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);
|
|
}
|
|
.home .page-top .text a {
|
|
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;
|
|
}
|
|
.home .page-content .banner {
|
|
max-height: 3rem;
|
|
position: relative;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.home .page-content .banner > div {
|
|
max-height: 3rem;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.home .page-content .banner a {
|
|
display: block;
|
|
}
|
|
.home .page-content .banner div img {
|
|
width: 100%;
|
|
height: 3rem;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background-size: 100% 100%;
|
|
}
|
|
.home .page-content .coupon {
|
|
margin-top: 0.3rem;
|
|
}
|
|
.home .page-content .coupon img {
|
|
width: 6.8rem;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
.home .page-content .new-card-first {
|
|
padding-top: 0.3rem;
|
|
}
|
|
.home .page-content .new-card .new-card-top {
|
|
padding: 0rem 0 0.3rem;
|
|
}
|
|
.home .page-content .new-card .new-card-top img {
|
|
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;
|
|
}
|
|
.home .page-content .new-card .card-list li a {
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
}
|
|
.home .page-content .new-card .card-list li .left {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
margin-right: 0.18rem;
|
|
}
|
|
.home .page-content .new-card .card-list li .left img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
display: block;
|
|
}
|
|
.home .page-content .new-card .card-list li .right {
|
|
// width: 4.3rem;
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 2rem;
|
|
position: relative;
|
|
padding-top: 0.15rem;
|
|
box-sizing: border-box;
|
|
}
|
|
.home .page-content .new-card .card-list li .right h3 {
|
|
font-size: 0.33rem;
|
|
font-weight: 400;
|
|
padding-top: 0.03rem;
|
|
line-height: 1.2;
|
|
color: rgba(51, 51, 51, 1);
|
|
margin-bottom: 0.13rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .text {
|
|
font-size: 0.24rem;
|
|
// height: 0.24rem;
|
|
font-weight: 400;
|
|
line-height: 1.2;
|
|
color: rgba(153, 153, 153, 1);
|
|
margin-bottom: 0.16rem;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
.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);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .card-name i {
|
|
font-style: normal;
|
|
line-height: 1.5;
|
|
background: rgba(255, 242, 229, 1);
|
|
padding: 0.05rem 0.1rem;
|
|
// line-height: 0.28rem;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .btn {
|
|
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;
|
|
// flex-grow: 0;
|
|
// align-items: center;
|
|
// position: absolute;
|
|
// width: 100%;
|
|
// bottom: 0;
|
|
// justify-content: space-around;
|
|
// align-items: flex-end;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .btn-box .price {
|
|
color: #249e6c;
|
|
min-width: 1.4rem;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .btn-box span em {
|
|
font-size: 0.38rem;
|
|
font-weight: 600;
|
|
line-height: 0.9;
|
|
display: inline-block;
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.home .page-bottom {
|
|
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;
|
|
}
|
|
.picke-address .status-btn a {
|
|
padding: 0.3rem;
|
|
color: #888;
|
|
}
|
|
.picke-address .status-btn a.complete-btn {
|
|
color: #1aad19;
|
|
}
|
|
|
|
.Loading-box .weui-toast {
|
|
width: 100%;
|
|
min-height: 100% !important;
|
|
overflow: hidden;
|
|
top: 0;
|
|
}
|
|
.Loading-box .weui-icon_toast.weui-loading {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|