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.
437 lines
10 KiB
437 lines
10 KiB
|
|
<template>
|
|
<div class="home">
|
|
<div ref="test" class="page-top">
|
|
<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">
|
|
<div class="banner" v-if="bannerImgList.length > 0">
|
|
<swiper :options="swiperOption" ref="mySwiper">
|
|
<swiper-slide v-for="(item,index) in bannerImgList" :key="index">
|
|
<div class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></div>
|
|
</swiper-slide>
|
|
</swiper>
|
|
<div class="swiper-pagination"></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>
|
|
<div class="new-card" v-for="item in goodsList">
|
|
<div class="new-card-top">
|
|
<img :src=" imghost + item.list[0].categoryImage">
|
|
</div>
|
|
<ul class="card-list">
|
|
<li v-for="item1 in item.list">
|
|
<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>{{toJSON(item1.smallLabel)}}</i></div>
|
|
<div class="btn-box">
|
|
<span>￥ <em>{{item1.originalPrice > 0 ? item1.originalPrice/100 : item1.price/100}}</em></span>
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</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 Swiper from '@/common/swiper';
|
|
import { Alert, Toast,Popup,Picker,Loading } from "vux";
|
|
import routerFooter from "../components/nav-bottom";
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
defaultCity: '天河区',
|
|
merchantNo: '', //商户编号
|
|
districtId: '', //区id
|
|
addressData: [],
|
|
addressValue: [],
|
|
bannerImgList:[], //轮播图
|
|
promotionImgList: {}, //优惠券，
|
|
goodsList:[],
|
|
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
|
|
swiperOption: {//swiper3
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
},
|
|
speed: 1000,
|
|
pagination: {
|
|
el: '.swiper-pagination'
|
|
}
|
|
},
|
|
showLoading: true,
|
|
};
|
|
},
|
|
components: {
|
|
Toast,
|
|
Popup,
|
|
Picker,
|
|
routerFooter,
|
|
Loading
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
computed: {
|
|
// swiper() {
|
|
// return this.$refs.mySwiper.swiper
|
|
// }
|
|
},
|
|
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)
|
|
|
|
},
|
|
change (name) {
|
|
this.addressValue = name
|
|
},
|
|
getGoodsList (){
|
|
let that = this
|
|
that.showLoading = true
|
|
var params = {
|
|
"merchantNo": this.merchantNo,
|
|
"selectedDistrictId": this.districtId
|
|
}
|
|
// console.log(params)
|
|
homeApi.getGoods(params).then(res => {
|
|
that.showLoading = false
|
|
if ( res.code == 0 ){
|
|
this.bannerImgList = res.response.bannerImgList
|
|
this.promotionImgList = res.response.promotionImgList[0] || {};
|
|
let goodsList = res.response.goodsList
|
|
let arr = [];
|
|
for(let i=0;i<goodsList.length;i++){
|
|
goodsList[i].categoryNo&&goodsList[i].isRelease==1?arr.push(goodsList[i].categoryNo):"";
|
|
}
|
|
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].categoryNo&&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 => {
|
|
console.log('默认地址信息',res)
|
|
if ( res.code == 0 ){
|
|
if ( !res.data ){
|
|
this.show = true
|
|
this.merchantNo = 2
|
|
} else {
|
|
this.defaultCity = res.data.districtName || ''
|
|
this.districtId = res.data.districtId || ''
|
|
this.merchantNo = res.data.merchantNo || 2
|
|
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");
|
|
}
|
|
console.log(this.merchantNo)
|
|
this.getGoodsList()
|
|
});
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
//异步加载
|
|
this.getdefaultAddress()
|
|
this.getAddress()
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.home {
|
|
background:rgba(255,255,255,1);
|
|
}
|
|
.home .page-top {
|
|
background:rgba(255,255,255,1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
z-index: 1000;
|
|
}
|
|
.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);
|
|
padding-bottom: 1rem;
|
|
-webkit-overflow-scrolling : touch;
|
|
}
|
|
.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.05rem;
|
|
margin-bottom: 0.05rem;
|
|
}
|
|
.home .page-content .coupon img {
|
|
width:6.8rem;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
.home .page-content .new-card {
|
|
/*padding-bottom: 0.5rem;*/
|
|
}
|
|
.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: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.home .page-content .new-card .card-list li .left {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
.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;
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
.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);
|
|
}
|
|
.home .page-content .new-card .card-list li .right .card-name i {
|
|
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;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .btn-box {
|
|
width: 4.3rem;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.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 span em {
|
|
font-size:0.38rem;
|
|
font-weight:600;
|
|
font-style: normal;
|
|
color:rgba(51,51,51,1);
|
|
}
|
|
.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);
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background: #5a5a5a;
|
|
}
|
|
.Loading-box .weui-toast {
|
|
width: 100%;
|
|
min-height: 100% !important;
|
|
overflow: hidden;
|
|
top: 0;
|
|
}
|
|
.Loading-box .weui-icon_toast.weui-loading {
|
|
margin-top: 75%;
|
|
}
|
|
</style>
|