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.
353 lines
8.7 KiB
353 lines
8.7 KiB
|
|
<template>
|
|
<div class="home">
|
|
<input type="hidden" id="openedDistrict" th:value="${openedDistrict}"/>
|
|
<input type="hidden" id="merchantNo" th:value="${merchantNo}" value="2" /> <!--商户标号-->
|
|
<input type="hidden" id="districtId" th:value="${districtId}" value="" /> <!--选定区县id-->
|
|
<div 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">
|
|
<div class="swiper-container focus-box-swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="item in bannerImgList">
|
|
<img :src="item.imgUrl"/>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div class="coupon">
|
|
<a :href="promotionImgList.linkUrl"><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="'http://test.1hjz.cn/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">{{toJSON(item1.smallLabel)}}</div>
|
|
<div class="btn-box">
|
|
<span>￥ <em>{{item1.originalPrice > 0 ? item1.originalPrice/100 : item1.price/100}}</em></span>
|
|
<a :href="'http://test.1hjz.cn/mall/web/vgoods/detail/' + item1.goodsNo">立即购买</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</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="getNameValues">完成</a>
|
|
</div>
|
|
<picker :data='addressData' :columns=3 v-model='addressValue' @on-change='change' ref="picker1"></picker>
|
|
</div>
|
|
</popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import homeApi from "../models/home-model.js";
|
|
import Swiper from 'swiper';
|
|
import { Alert, Toast,Popup,Picker } from "vux";
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
defaultCity: '天河区',
|
|
addressData: [],
|
|
addressValue: [],
|
|
bannerImgList:[], //轮播图
|
|
promotionImgList: {}, //优惠券，
|
|
goodsList:[],
|
|
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/",
|
|
|
|
};
|
|
},
|
|
components: {
|
|
Toast,
|
|
Popup,
|
|
Picker
|
|
},
|
|
watch: {
|
|
|
|
},
|
|
methods: {
|
|
getNameValues (){
|
|
console.log(this.addressValue)
|
|
return
|
|
var that = this;
|
|
console.log(this.addressValue[2])
|
|
$("#merchantNo").val(this.addressValue[2])
|
|
this.getGoodsList()
|
|
},
|
|
change (name) {
|
|
this.addressValue = name
|
|
},
|
|
getGoodsList (){
|
|
var params = {
|
|
"merchantNo": $("#merchantNo").val(),
|
|
"selectedDistrictId": $("#districtId").val()
|
|
}
|
|
homeApi.getGoods(params).then(res => {
|
|
console.log(res)
|
|
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){
|
|
return JSON.parse(data)[0].labelText
|
|
},
|
|
//获取默认地址信息
|
|
getdefaultAddress (){
|
|
console.log(123)
|
|
homeApi.getdefaultAddress().then(res => {
|
|
console.log('默认地址信息',res)
|
|
if ( res.code == 0 ){
|
|
if ( !res.data ){
|
|
this.show = true
|
|
} else {
|
|
this.defaultCity = res.data.districtName
|
|
}
|
|
} else {
|
|
this.$vux.toast.text(res.msg,"middle");
|
|
}
|
|
});
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
//异步加载
|
|
setTimeout(() => {
|
|
var mySwiper = new Swiper('.swiper-container', {
|
|
autoplay:true, //自动播放 5s
|
|
loop : true, //无缝循环
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: true,
|
|
autoplayDisableOnInteraction: false,
|
|
})
|
|
}, 300);
|
|
this.getdefaultAddress()
|
|
this.getGoodsList()
|
|
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;
|
|
}
|
|
.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);
|
|
}
|
|
.home .page-content .banner a {
|
|
display: block;
|
|
}
|
|
.home .page-content .banner img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.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 {
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.home .page-content .new-card .new-card-top {
|
|
padding: 0.4rem 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 .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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
</style>
|