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.
286 lines
9.6 KiB
286 lines
9.6 KiB
<template>
|
|
<view class="content">
|
|
<view class="banner">
|
|
<view :style="{'height':StatusBarHeight}"></view>
|
|
<view class="logo">
|
|
<!-- <image src="../static/logo.png" mode="aspectFill"></image> -->
|
|
</view>
|
|
</view>
|
|
<view class="search-bar">
|
|
<view class="search">
|
|
<view class="iconfont icon-search"></view>
|
|
<input class="placeholder" v-model="keyword" confirm-type="search" @confirm="onSearch" placeholder="搜索餐饮/休闲娱乐" placeholder-style="font-size:30rpx;color:#BABABA" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="store-count">
|
|
<view class="tag" v-for="item in storeCate" :key="item.id" @click="toStore(item.id)">{{item.name}}{{item.num}}家</view>
|
|
</view>
|
|
|
|
<view class="menu">
|
|
<view class="item" @click="toCard">
|
|
<view class="icon"><image src="../static/1.svg"></image></view>
|
|
<view class="text">购买惠民卡</view>
|
|
</view>
|
|
<view class="item" @click="navTo('store/index')">
|
|
<view class="icon"><image src="../static/2.svg"></image></view>
|
|
<view class="text">优惠商户</view>
|
|
</view>
|
|
<view class="item" @click="navTo('./userguide')">
|
|
<view class="icon"><image src="../static/3.svg"></image></view>
|
|
<view class="text">使用指南</view>
|
|
</view>
|
|
<view class="item" @click="navTo('question/list')">
|
|
<view class="icon"><image src="../static/4.svg"></image></view>
|
|
<view class="text">常见问题</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="notice" @click="navTo('notice/list')">
|
|
<view class="iconfont icon-newspaper"></view>
|
|
<view class="scroll">
|
|
<swiper vertical="true" autoplay="true" circular="true" interval="3000">
|
|
<swiper-item v-for="item in notice" :key="item.id">{{item.title}}</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="iconfont icon-you"></view>
|
|
</view>
|
|
|
|
<view class="home-slider">
|
|
<swiper autoplay="true" circular="true" interval="3500">
|
|
<swiper-item>
|
|
<image src="https://www.xnhmk.com/assets/img/banner/slider01.jpg" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image src="https://www.xnhmk.com/assets/img/banner/slider02.jpg" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<image src="https://www.xnhmk.com/assets/img/banner/slider03.jpg" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
|
|
<view class="nav">
|
|
<view class="item" :class="[nav_id == item.id ? 'active' : '']" v-for="item in navs" :key="item.id" @click="changeNav(item.id)">
|
|
<view>{{item.tit}}</view>
|
|
<view v-if="nav_id == item.id" class="line"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="store-list">
|
|
<view class="store" v-for="item in store" :key="item.id" @click="navTo('store/detail?id='+item.id)">
|
|
<image class="thumb" :src="item.logo" mode="aspectFill"></image>
|
|
<view class="basic">
|
|
<view class="name">{{item.name}}</view>
|
|
<view class="tags">
|
|
<view class="tag">{{item.catename}}</view>
|
|
<view class="tag place">{{item.countytext}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="loadmore" hover-class="loadmore-hover" @click="navTo('store/index')">查看更多</view>
|
|
<view class="spacer"></view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { showWarning } from '../util/common.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
StatusBarHeight: 0,
|
|
userInfo: [],
|
|
notice:[],//通知公告
|
|
storeCate:[],//店铺分类统计
|
|
storeList:[],
|
|
store:[],//店铺推荐
|
|
keyword:'',//搜索关键词
|
|
nav_id: 0,
|
|
navs: [{"id": 0,"tit":"推荐"},{"id": 2,"tit":"餐饮"},{"id": 3,"tit":"休闲娱乐"}],
|
|
|
|
type:'',
|
|
content:''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getData();
|
|
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.StatusBarHeight=res.statusBarHeight+'px';
|
|
}
|
|
})
|
|
},
|
|
onShow() {
|
|
this.getContent();
|
|
this.userInfo = uni.getStorageSync('userInfo');
|
|
var notice = '';
|
|
},
|
|
methods: {
|
|
getContent(){
|
|
var that = this;
|
|
that.$u.post('wxapp/user/getContent').then(res => {
|
|
console.log(res)
|
|
that.content = res.content;
|
|
that.type = res.type;
|
|
uni.setStorageSync('servicePhone',res.servicePhone);
|
|
if(that.type == 1){
|
|
uni.showModal({
|
|
title:'公告',
|
|
content:that.content,
|
|
showCancel:false
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getData(){
|
|
var that = this;
|
|
var data = {
|
|
page: that.page,
|
|
type: 2
|
|
}
|
|
var nav_id = that.nav_id;
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
});
|
|
that.$u.post('wxapp/user/getIndex',data).then(res => {
|
|
console.log(res,'0000')
|
|
uni.hideLoading();
|
|
if(res.code == 1){
|
|
that.notice = res.notice;
|
|
that.storeCate = res.storeCate.splice(1,2);
|
|
that.storeList = res.store;
|
|
that.store = res.store[nav_id];
|
|
}else{
|
|
showWarning(res.msg);
|
|
}
|
|
|
|
})
|
|
},
|
|
navTo(url){
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
},
|
|
toCard(){
|
|
uni.switchTab({
|
|
url:'card/index'
|
|
})
|
|
},
|
|
// 搜索
|
|
onSearch(){
|
|
var keyword = this.keyword;
|
|
uni.navigateTo({
|
|
url:'store/index?keyword='+keyword
|
|
})
|
|
},
|
|
toStore(cateid){
|
|
uni.navigateTo({
|
|
url:'store/index?cateid='+cateid
|
|
})
|
|
},
|
|
changeNav(id){
|
|
var storeList = this.storeList;
|
|
this.nav_id = id;
|
|
this.store = storeList[id];
|
|
},
|
|
onPullDownRefresh() {
|
|
setTimeout(this.getData, 3000);
|
|
setTimeout(function () {
|
|
uni.stopPullDownRefresh();
|
|
}, 3000);
|
|
this.keyword = '';//搜索关键词
|
|
this.nav_id = 0;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{ background: #F5F7F9; }
|
|
.content {
|
|
|
|
}
|
|
.statusbar{ height: var(--status-bar-height); }
|
|
.banner{ position: relative; width: 100%; height: 370rpx; z-index: 2; overflow: hidden;
|
|
.logo{ width: 320rpx; height: 72rpx; margin:10rpx 0rpx 0rpx 30rpx;
|
|
image{ width: 320rpx;height: 72rpx; }
|
|
}
|
|
}
|
|
.banner::after{ content: ''; width: 180%; height: 370rpx; position: absolute; left: -40%; top: 0; z-index: -1; border-radius: 0 0 50% 50%;
|
|
background-image: url('https://www.xnhmk.com/assets/img/banner/banner.jpg'); background-size: 750rpx; background-position: top center;
|
|
}
|
|
.search-bar{ width: 100%; height: 50rpx; position: relative;
|
|
.search{ position: absolute; background: #FFFFFF; height: 76rpx; border-radius: 38upx; top: -50rpx; width: 700rpx; left: 25rpx; z-index: 999;
|
|
box-shadow: 0rpx 0rpx 3rpx 3rpx rgba(0,0,0,.1); display: flex; align-items: center;
|
|
.iconfont{ width: 40rpx; font-size: 38rpx; height: 38rpx; line-heght: 72rpx; text-align:center; color:#999999; margin: 0rpx 20rpx 0rpx 28rpx; }
|
|
.placeholder{ font-size: 28rpx; color: #999999;line-height: 74rpx; flex: 1; }
|
|
}
|
|
}
|
|
.store-count{ display: flex; justify-content: center; height: 50rpx;
|
|
.tag{ font-size: 24rpx;background: rgba(0,0,0,.05); height: 48rpx; line-height: 48rpx; padding: 0rpx 24rpx 0rpx; border-radius: 23rpx;color: #333333;
|
|
margin: 0rpx 12rpx 0rpx;
|
|
}
|
|
}
|
|
.menu{ padding: 40rpx 45rpx 30rpx; height: 150rpx; display: flex; justify-content: space-between;
|
|
.item{ display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
.icon{ width: 78rpx;height: 78rpx; margin-bottom: 8rpx;
|
|
image{ width: 78rpx;height: 78rpx; }
|
|
}
|
|
.text{ font-size: 24rpx;line-height: 46rpx;color: #333333; }
|
|
}
|
|
}
|
|
.notice{ height: 92rpx; margin: 0rpx 30rpx 20rpx;background: #FFFFFF;box-shadow: 0rpx 0rpx 6rpx rgba(0,0,0,.05); border-radius: 12rpx;
|
|
display: flex; align-items: center;
|
|
.icon-newspaper{ width: 52rpx;height: 78rpx; color: #34b16f; margin:0rpx 20rpx 0rpx 20rpx;line-height: 78rpx;font-size: 42rpx;text-align: center; }
|
|
.scroll{ flex:1;
|
|
swiper{ height: 78rpx; overflow: hidden;
|
|
swiper-item{ font-size: 26rpx;line-height: 78rpx;color: #333333; }
|
|
}
|
|
}
|
|
.icon-you{ width: 48rpx; height: 48rpx; line-height: 48rpx; color:#999; font-size: 28rpx; margin-right: 0rpx; font-weight: 300; }
|
|
}
|
|
.home-slider{ height: 200rpx; margin: 30rpx 30rpx 20rpx;
|
|
swiper{ height: 200rpx;
|
|
swiper-item{
|
|
image{ height: 200rpx; width: 100%; border-radius: 12rpx; box-shadow: 0rpx 0rpx 6rpx rgba(0,0,0,.05); }
|
|
}
|
|
}
|
|
}
|
|
.ads-area{ margin: 20rpx 30rpx 30rpx; display: flex; justify-content: space-between;flex-wrap: wrap;
|
|
.ad{ border-radius: 12rpx; width: 330rpx;margin-bottom: 20rpx;
|
|
image{height: 220rpx; width: 330rpx;background: #E5E5E5;}
|
|
.title{font-size: 28rpx; padding:6rpx 0 14rpx;color: #666666;}
|
|
}
|
|
}
|
|
.nav{ display: flex; justify-content: center; padding: 20rpx 0rpx 20rpx;
|
|
.item{ font-size: 32rpx; line-height: 64rpx; padding: 0rpx 20rpx 10rpx; position: relative;}
|
|
.active{ font-size: 34rpx;color: #34b16f; }
|
|
.line{ position:absolute; width:60rpx; height:8rpx; background:#34b16f; border-radius:4rpx; bottom:6rpx; left: 50%; margin-left: -30rpx; }
|
|
}
|
|
|
|
.store-list{ margin: 20rpx 30rpx 0rpx; display: flex; justify-content: space-between;flex-wrap: wrap;
|
|
.store{ margin-bottom: 30rpx; width: 330rpx;
|
|
.thumb{ height: 220rpx; width: 330rpx;border-radius: 12rpx; }
|
|
.basic{ padding: 4rpx 0rpx 24rpx;
|
|
.name{ font-size: 30rpx; line-height: 42rpx; color:#333333; margin-bottom: 12rpx;overflow: hidden;word-break: break-all;text-overflow: ellipsis;
|
|
-webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;
|
|
}
|
|
.tags{ display: flex;
|
|
.tag{ font-size: 22rpx;line-height: 36rpx;height: 36rpx; background-color: #cfe9ff; padding: 0rpx 20rpx 0rpx;border-radius: 18rpx;color: #0086f6;
|
|
margin-right: 20rpx; margin-left: -6rpx; font-weight: 500;
|
|
}
|
|
.place{ color: #219859; background: #c6ecd8; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.loadmore{ font-size: 28rpx;line-height: 86rpx; margin: 0rpx 30rpx 0rpx;background: #e8e8e8; text-align: center;border-radius: 12rpx; }
|
|
.loadmore-hover{ background: #e0e0e0; }
|
|
.spacer{ height: 80rpx; }
|
|
|
|
</style> |