402 lines
9.5 KiB
Vue
402 lines
9.5 KiB
Vue
<template>
|
||
<div class="home">
|
||
<!-- <div class="header" :class="[isFixed ? 'header-active' : '']">
|
||
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
||
<div class="nav-bar">
|
||
<h2>天府星小程序</h2>
|
||
</div>
|
||
</div>
|
||
<div></div>
|
||
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home-bg.png" /> -->
|
||
<div class="wrapper">
|
||
<div class="nav">
|
||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./ActivityList')">
|
||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home1.png" />
|
||
<span>活动签到</span>
|
||
</div>
|
||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./PhotoReport')">
|
||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home2.png" />
|
||
<span>文明拍</span>
|
||
</div>
|
||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Culture')">
|
||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home3.png" />
|
||
<span>海报接力</span>
|
||
</div>
|
||
<div class="nav-item" hover-class="text-hover" @click="$linkTo('./Ranking')">
|
||
<image mode="aspectFill" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/home4.png" />
|
||
<span>文明榜单</span>
|
||
</div>
|
||
</div>
|
||
<swiper class="banner" indicatorDots circular :autoplay="true" :interval="5000" v-if="bannerList.length">
|
||
<swiper-item v-for="(item, index) in bannerList" :key="index" @click="toDetail(item)">
|
||
<image :src="item.imgUrl" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
<div class="section yh">
|
||
<h2>商家优惠</h2>
|
||
<div class="yh-list">
|
||
<div class="yh-item" v-for="(item, index) in list" :key="index" hover-class="text-hover" @click="$linkTo('./StoreDetail?id=' + item.id)">
|
||
<image :src="item.logoFiles[0].url" mode="aspectFill" />
|
||
<div class="right">
|
||
<h2>{{ item.merchantName }}</h2>
|
||
<p>{{ item.title }}</p>
|
||
</div>
|
||
</div>
|
||
<AiEmpty v-if="!list.length"></AiEmpty>
|
||
</div>
|
||
<div class="more" v-if="list.length" @click="$linkTo('./Store')" hover-class="text-hover">查看更多优惠</div>
|
||
</div>
|
||
<div class="section rz" v-if="!user.merchantInfo || user.merchantInfo.status !== '1'" >
|
||
<h2>商家入驻</h2>
|
||
<div class="rz-info">
|
||
<div class="rz-item">
|
||
<h3>商家权益</h3>
|
||
<!-- <span>成都市金牛区xxxx大厦成都…</span> -->
|
||
</div>
|
||
<div class="rz-item">
|
||
<h3>免费入驻</h3>
|
||
<span>面对50万新区市民免费展示推荐</span>
|
||
</div>
|
||
<div class="rz-item">
|
||
<h3>宣传报道</h3>
|
||
<span>分批次获得媒体公开点名</span>
|
||
</div>
|
||
<div class="rz-item">
|
||
<h3>出席仪式</h3>
|
||
<span>邀请重点协会与商家代表参与启动仪式、颁奖仪式</span>
|
||
</div>
|
||
<div class="rz-item">
|
||
<h3>直通车</h3>
|
||
<span>商家诉求收集汇总反馈</span>
|
||
</div>
|
||
</div>
|
||
<div class="more" @click="$linkTo('./AddMerchants')" hover-class="text-hover">我是商家，我要入驻</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions, mapState } from 'vuex'
|
||
|
||
export default {
|
||
appName: '首页',
|
||
navigationBarTitleText: '天府星小程序',
|
||
name: 'AppHome',
|
||
enablePullDownRefresh: true,
|
||
|
||
data () {
|
||
return {
|
||
current: 1,
|
||
list: [],
|
||
isMore: false,
|
||
isFixed: false,
|
||
statusBarHeight: 20,
|
||
bannerList: []
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['user', 'token'])
|
||
},
|
||
|
||
onShow () {
|
||
this.isMore = false
|
||
this.getList()
|
||
},
|
||
|
||
onLoad () {
|
||
if (!this.token) {
|
||
this.autoLogin()
|
||
} else {
|
||
this.getUserInfo()
|
||
}
|
||
|
||
this.getBannerList()
|
||
},
|
||
|
||
methods: {
|
||
...mapActions(['autoLogin', 'getUserInfo']),
|
||
|
||
getBannerList () {
|
||
this.$instance.post(`/api/appbanner/getList`, null, {
|
||
withoutToken: true
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.bannerList = res.data
|
||
}
|
||
}).catch(() => {
|
||
})
|
||
},
|
||
|
||
toDetail (e) {
|
||
if (e.type == '0') { //0 h5链接； 1 小程序链接； 2外部小程序
|
||
this.$linkTo(`/subPages/h5/webview?link=${e.linkUrl}&title=${e.title}`)
|
||
} else if (e.type == '2') {
|
||
wx.navigateToMiniProgram({
|
||
appId: e.linkUrl
|
||
})
|
||
} else if (e.type == '3') {
|
||
this.$linkTo(`./News?id=${e.id}`)
|
||
}
|
||
},
|
||
|
||
getList () {
|
||
this.$instance.post(`/api/appmerchantinfo/discountList`, null, {
|
||
withoutToken: true,
|
||
params: {
|
||
current: 1,
|
||
size: 4,
|
||
status: 1
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.list = res.data.records
|
||
this.isMore = true
|
||
uni.stopPullDownRefresh()
|
||
} else {
|
||
this.isMore = true
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}).catch(() => {
|
||
uni.stopPullDownRefresh()
|
||
})
|
||
}
|
||
},
|
||
|
||
onPullDownRefresh() {
|
||
this.isMore = false
|
||
this.current = 1
|
||
this.getList()
|
||
this.getBannerList()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.home {
|
||
position: relative;
|
||
padding: 32px 0 60px;
|
||
|
||
.bg-img {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 512px;
|
||
}
|
||
|
||
.wrapper {
|
||
position: relative;
|
||
z-index: 11;
|
||
margin: 0 32px 32px;
|
||
}
|
||
|
||
.yh {
|
||
.more {
|
||
width: 100%;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
text-align: center;
|
||
color: #687DA6;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.yh-list {
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.yh-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24px 0;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
|
||
image {
|
||
width: 112px;
|
||
height: 112px;
|
||
margin-right: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.right {
|
||
flex: 1;
|
||
|
||
h2 {
|
||
line-height: 48px;
|
||
margin-bottom: 8px;
|
||
font-size: 34px;
|
||
color: #333333;
|
||
}
|
||
|
||
p {
|
||
color: #FFB94C;
|
||
font-size: 26px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rz {
|
||
padding-bottom: 48px;
|
||
|
||
.rz-info {
|
||
padding: 0 24px;
|
||
}
|
||
|
||
.rz-item {
|
||
display: flex;
|
||
margin-bottom: 24px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
h3 {
|
||
width: 120px;
|
||
line-height: 40px;
|
||
margin-right: 40px;
|
||
color: #999999;
|
||
font-size: 28px;
|
||
text-align: justify;
|
||
}
|
||
|
||
span {
|
||
flex: 1;
|
||
line-height: 40px;
|
||
color: #333333;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
width: 638px;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
margin: 36px auto 0;
|
||
font-size: 34px;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
background-image: linear-gradient(90deg, #75BDFF 0%, #4783FF 100%);
|
||
box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.section {
|
||
margin-bottom: 24px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 0 8px 0 rgba(0,0,0,0.02);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
|
||
& > h2 {
|
||
height: 96px;
|
||
line-height: 96px;
|
||
padding: 0 24px;
|
||
font-size: 34px;
|
||
color: #1D2229;
|
||
background-image: linear-gradient(180deg, #DCEFFF 0%, rgba(220,239,255,0.00) 100%);
|
||
}
|
||
}
|
||
|
||
.back-wrapper {
|
||
position: fixed;
|
||
z-index: 11;
|
||
left: 20px;
|
||
top: 24px;
|
||
width: 40px;
|
||
height: 40px;
|
||
|
||
image {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.header {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 111;
|
||
width: 100%;
|
||
opacity: 1;
|
||
transition: all 0.2s ease;
|
||
|
||
.nav-bar {
|
||
position: relative;
|
||
height: 88px;
|
||
line-height: 88px;
|
||
color: #000;
|
||
font-size: 34px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
|
||
image {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 40px;
|
||
height: 40px;
|
||
padding: 24px 20px 0 20px;
|
||
box-sizing: content-box;
|
||
}
|
||
}
|
||
|
||
&.header-active {
|
||
z-index: 1111;
|
||
opacity: 1;
|
||
color: #fff;
|
||
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
|
||
|
||
.nav-bar {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.banner {
|
||
display: block;
|
||
width: 686px;
|
||
height: 352px;
|
||
margin: 0 auto 32px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
image {
|
||
width: 686px;
|
||
height: 352px;
|
||
border-radius: 8px;
|
||
}
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0 0 32px;
|
||
padding: 0 36px;
|
||
|
||
.nav-item {
|
||
width: 112px;
|
||
line-height: 1;
|
||
text-align: center;
|
||
|
||
image {
|
||
width: 112px;
|
||
height: 116px;
|
||
}
|
||
|
||
span {
|
||
display: block;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|