612 lines
15 KiB
Vue
612 lines
15 KiB
Vue
<template>
|
|
<view class="tabbar-page">
|
|
<view class="slider-banner">
|
|
<swiper
|
|
v-if="banner.length > 0"
|
|
indicatorDots="true"
|
|
indicator-color="rgba(255, 255, 255, .3)"
|
|
indicator-active-color="#ffffff"
|
|
autoplay
|
|
circular
|
|
style="height: 510rpx;"
|
|
>
|
|
<block
|
|
v-for="(item, bannerIndex) in banner"
|
|
:key="bannerIndex"
|
|
>
|
|
<swiper-item>
|
|
<view @click="goRoll(item)" class="swiper-item">
|
|
<image :src="item.pic"/>
|
|
</view>
|
|
</swiper-item>
|
|
</block>
|
|
</swiper>
|
|
</view>
|
|
<view class="home-body">
|
|
<!-- 导航v9 -->
|
|
<view class="menus-wrap">
|
|
<view class="menus-bg" />
|
|
<view class="menus-list">
|
|
<view
|
|
v-for="(item, index) in menus"
|
|
:key="index"
|
|
class="item flex flex-col ai-center"
|
|
@click="$global.commonJump(item.uniapp_url)"
|
|
>
|
|
<image
|
|
:src="item.pic"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
<view class="one-t tc menu-name">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 千县名品和地标好物 -->
|
|
<view class="land-famous-wrap">
|
|
<view class="pic-wrap">
|
|
<image
|
|
:src="webUrl + '/home/land-pic.png'"
|
|
mode="heightFix"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="pic-wrap">
|
|
<image
|
|
:src="webUrl + '/home/famous-pic.png'"
|
|
mode="heightFix"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 导航v9end -->
|
|
<!-- v9 专题 -->
|
|
<view class="subject-box">
|
|
<view class="section-full flex jc-between">
|
|
<swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="3000"
|
|
>
|
|
<swiper-item
|
|
v-for="(stay, stayIndex) in contentHomestay"
|
|
:key="stayIndex"
|
|
>
|
|
<image
|
|
:src="stay.indexImage"
|
|
mode="scaleToFill"
|
|
@click="goHomeStay(stay)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
<image
|
|
v-if="contentFestival.indexImage"
|
|
:src="contentFestival.indexImage"
|
|
mode="scaleToFill"
|
|
@click="goFestival"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 2022/6/20 add 尖货推荐 -->
|
|
<view class="bast-box">
|
|
<view>
|
|
<image
|
|
:src="webUrl + '/20230407111908318221.png'"
|
|
class="bast-title"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
<view class="bast-list">
|
|
<view class="bast-list-left">
|
|
<view
|
|
v-for="(item,index) in bastLeftList"
|
|
:key="index"
|
|
class="item flex"
|
|
>
|
|
<template v-if="item.storeName === 'swiper'">
|
|
<swiper class="item bannar-swiper" autoplay circular>
|
|
<swiper-item v-for="swipe in bannerList" :key="swipe">
|
|
<image
|
|
:src="swipe.pic"
|
|
mode="aspectFit"
|
|
@click="goGoodsConByProductID(swipe)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<template v-else>
|
|
<image
|
|
:src="item.image"
|
|
class="top-img"
|
|
mode="scaleToFill"
|
|
@click="goGoodsCon(item)"
|
|
/>
|
|
<view class="content" @click="goGoodsCon(item)">
|
|
<view class="title more-t">{{ item.storeName }}</view>
|
|
<view class="price flex">
|
|
<text class="red">￥{{ item.price }}</text>
|
|
<text
|
|
v-if="item.productPrice"
|
|
class="gray"
|
|
>￥{{ item.productPrice }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
<view class="bast-list-right">
|
|
<view
|
|
v-for="(item,index) in bastRightList"
|
|
:key="index"
|
|
class="item flex"
|
|
>
|
|
<template v-if="item.storeName === 'swiper'">
|
|
<swiper class="item bannar-swiper" autoplay circular>
|
|
<swiper-item v-for="swipe in bannerList" :key="swipe">
|
|
<image
|
|
:src="swipe.pic"
|
|
mode="aspectFit"
|
|
@click="goGoodsConByProductID(swipe)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</template>
|
|
<template v-else>
|
|
<image
|
|
:src="item.image"
|
|
class="top-img"
|
|
mode="scaleToFill"
|
|
@click="goGoodsCon(item)"
|
|
/>
|
|
<view class="content" @click="goGoodsCon(item)">
|
|
<view class="title more-t">{{ item.storeName }}</view>
|
|
<view class="price flex">
|
|
<text class="red">￥{{ item.price }}</text>
|
|
<text
|
|
v-if="item.productPrice"
|
|
class="gray"
|
|
>￥{{ item.productPrice }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- v9 老用户弹窗 -->
|
|
<u-popup
|
|
:show="isOldUser"
|
|
mode="center"
|
|
bgColor="transparent"
|
|
>
|
|
<view class="popup-old-user flex flex-col ai-center">
|
|
<image
|
|
:src="oldUserPopup.image"
|
|
class="main"
|
|
mode="scaleToFill"
|
|
@click="tapOld()"
|
|
/>
|
|
<view
|
|
class="icon-box flex jc-center ai-center"
|
|
@click="changeOldPopup(false)"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20230608112219219303.png'"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 尖货推荐结束 -->
|
|
<u-back-top :scroll-top="scrollTop">
|
|
<image
|
|
:src="webUrl+'/icon/setTop.png'"
|
|
mode="scaleToFill"
|
|
style="width: 40px;height: 40px;"
|
|
@click="setTopHandle"
|
|
/>
|
|
</u-back-top>
|
|
<xdd-tabbar :curr-index="0" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import XddTabbar from '@/components/xdd-tabbar'
|
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
|
import { mapGetters } from 'vuex'
|
|
import { getCouponReceive } from '@/api/user'
|
|
import { getHomeData, getShareImage } from '@/api/public'
|
|
import { sharpBannar } from '@/api/goods'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
export default {
|
|
name: 'IndexPage',
|
|
components: {
|
|
imgBox,
|
|
XddTabbar
|
|
},
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
hotGoodsColumnWidth: '325rpx',
|
|
bgImgHeight: '20px',
|
|
banner: [],
|
|
menus: [],
|
|
cityName: '',
|
|
// 尖货
|
|
bastList: [],
|
|
// 尖货推荐左侧
|
|
bastLeftList: [],
|
|
// 尖货推荐右侧
|
|
bastRightList: [],
|
|
statusBarHeight: 64,
|
|
// 尖货推荐横幅
|
|
bannerList: [],
|
|
// 分享图片
|
|
shareAppImg: '',
|
|
// 老用户弹窗
|
|
isOldUser: true,
|
|
oldUserPopup: {},
|
|
contentHomestay: [],
|
|
contentFestival: {},
|
|
seasonalFood: {},
|
|
pageKeyId: Object.freeze('appIndex'),
|
|
scrollTop: 0
|
|
}
|
|
},
|
|
computed: mapGetters(['userInfo', 'isLogin']),
|
|
onLoad(options) {
|
|
uni.hideTabBar()
|
|
const _this = this
|
|
_this.init()
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
let statusBar = 0
|
|
let customBar = 0
|
|
// #ifdef MP-WEIXIN
|
|
statusBar = e.statusBarHeight
|
|
const custom = uni.getMenuButtonBoundingClientRect()
|
|
customBar = custom.bottom + custom.top - e.statusBarHeight
|
|
// #endif
|
|
_this.statusBarHeight = customBar
|
|
// 两列商品宽度
|
|
_this.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px'
|
|
// 状态栏图片高度
|
|
_this.bgImgHeight = statusBar + 'px'
|
|
}
|
|
})
|
|
},
|
|
onShow() {
|
|
const today = new Date()
|
|
this.month = today.getMonth() + 1
|
|
this.date = today.getDate()
|
|
},
|
|
onHide() {
|
|
this.pageToHideHandle()
|
|
},
|
|
onShareAppMessage() {
|
|
return {
|
|
title: '探寻有趣有味的生活方式',
|
|
path: '/pages/home/index',
|
|
imageUrl: this.shareAppImg
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
uni.navigateTo({
|
|
url: '/pkg-video/views/lottery'
|
|
})
|
|
},
|
|
onPageScroll(e) {
|
|
this.scrollTop = e.scrollTop
|
|
},
|
|
methods: {
|
|
init() {
|
|
const _this = this
|
|
getShareImage().then(({ data }) => _this.shareAppImg = data)
|
|
sharpBannar().then(response => {
|
|
_this.bannerList = response.data.banner
|
|
uni.showLoading({ title: '加载中' })
|
|
getHomeData().then(res => {
|
|
const { data } = res
|
|
_this.$set(_this, 'banner', data.banner)
|
|
_this.$set(_this, 'menus', data.menus)
|
|
_this.$set(_this, 'oldUserPopup', data.oldUserPopup)
|
|
_this.$set(_this, 'contentHomestay', data.contentHomestay)
|
|
_this.$set(_this, 'contentFestival', data.contentFestival)
|
|
_this.bastLeftList = []
|
|
_this.bastRightList = []
|
|
for (let i = 0; i < data.bastList.length; i++) {
|
|
if (i % 2 === 0) {
|
|
_this.bastLeftList.push(data.bastList[i])
|
|
}
|
|
if (i % 2 === 1) {
|
|
_this.bastRightList.push(data.bastList[i])
|
|
}
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
})
|
|
},
|
|
goRoll(item) {
|
|
if (item.uniapp_url) {
|
|
this.$yrouter.push(item.uniapp_url)
|
|
}
|
|
},
|
|
goGoodSearch() {
|
|
this.$yrouter.push('/pages/shop/GoodSearch/index')
|
|
},
|
|
goGoodsCon(item) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.id
|
|
}
|
|
})
|
|
},
|
|
goGoodsConByProductID(item, from) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.productId,
|
|
activityId: item.id,
|
|
from
|
|
}
|
|
})
|
|
},
|
|
changeOldPopup(state) {
|
|
this.isOldUser = state
|
|
},
|
|
goHomeStay(stay) {
|
|
if (stay.uniappUrl) {
|
|
this.$global.commonJump(stay.uniappUrl)
|
|
return
|
|
}
|
|
if (stay.type === 2 && stay.isLinkToProduct) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: stay.productId
|
|
}
|
|
})
|
|
return
|
|
}
|
|
if (stay.type === 1) {
|
|
uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
|
|
}
|
|
},
|
|
goFestival() {
|
|
uni.navigateTo({url: '/pkg_product/views/festival'})
|
|
},
|
|
tapOld() {
|
|
this.isOldUser = false
|
|
const {
|
|
type,
|
|
text,
|
|
jumpTime,
|
|
pageLevel,
|
|
url,
|
|
params,
|
|
couponId
|
|
} = this.oldUserPopup
|
|
if (couponId != null) {
|
|
getCouponReceive(couponId).then(res => {
|
|
if (res.status === 200) {
|
|
uni.showToast({
|
|
title: text,
|
|
icon: 'none',
|
|
success: () => {
|
|
}
|
|
})
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.data.msg + '',
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
})
|
|
}
|
|
// type 1-定时跳转，2-点击跳转，3-不跳转
|
|
if (type === 1) {
|
|
setTimeout(() => {
|
|
this.$global.levelJump(pageLevel, url, params)
|
|
}, jumpTime * 1000)
|
|
} else if (type === 2) {
|
|
this.$global.levelJump(pageLevel, url, params)
|
|
}
|
|
},
|
|
setTopHandle() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 200
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.swiper-item {
|
|
height: 100%;
|
|
}
|
|
.slider-banner {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: auto !important;
|
|
-webkit-transform: rotate(0);
|
|
}
|
|
.subject-box {
|
|
padding: 12rpx;
|
|
margin: 21rpx 0 0 0;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
.section-full {
|
|
image {
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
.swiper {
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.popup-old-user {
|
|
image {
|
|
vertical-align: middle;
|
|
}
|
|
.main {
|
|
width: 560rpx;
|
|
height: 840rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
.icon-box {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
margin-top: 40rpx;
|
|
background: rgba(51, 51, 51, .4);
|
|
border-radius: 50%;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.bast-box {
|
|
.bast-title {
|
|
width: 312rpx;
|
|
height: 40rpx;
|
|
margin: 21rpx 0 21rpx 0;
|
|
}
|
|
.bannar-swiper {
|
|
height: 534rpx;
|
|
image {
|
|
width: 332rpx;
|
|
height: 534rpx;
|
|
}
|
|
}
|
|
.bast-list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.bast-list-left,
|
|
.bast-list-right {
|
|
width: calc(50% - 11rpx);
|
|
}
|
|
.item {
|
|
position: relative;
|
|
flex-direction: column;
|
|
border-radius: 20rpx;
|
|
margin: 21rpx 0 0 0;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
.top-img {
|
|
width: 343rpx;
|
|
height: 343rpx;
|
|
}
|
|
.content {
|
|
box-sizing: border-box;
|
|
padding: 10rpx 10rpx 20rpx;
|
|
.title {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
.price {
|
|
font-size: 32rpx;
|
|
.red {
|
|
color: #DA0000;
|
|
}
|
|
.gray {
|
|
margin-left: 16rpx;
|
|
text-decoration: line-through;
|
|
font-size: 20rpx;
|
|
line-height: 30rpx;
|
|
color: #C2C5CC;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tabbar-page {
|
|
padding: 0 0 180rpx 0;
|
|
background-color: #F0F0F0;
|
|
}
|
|
.home-body {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding: 21rpx 21rpx 0 21rpx;
|
|
}
|
|
.menus-wrap {
|
|
position: relative;
|
|
.menus-list {
|
|
position: relative;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
padding: 12rpx 24rpx;
|
|
margin: -120rpx 0 0 0;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
overflow-x: auto;
|
|
.item + .item {
|
|
margin: 0 0 0 36rpx;
|
|
}
|
|
.item {
|
|
width: 150rpx;
|
|
.img {
|
|
width: 86rpx;
|
|
height: 86rpx;
|
|
}
|
|
.menu-name {
|
|
margin: 16rpx 0 0 0;
|
|
color: #666;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
.menus-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -21rpx;
|
|
z-index: 2;
|
|
width: calc(100% + 42rpx);
|
|
height: 180rpx;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F0F0 40%, #F0F0F0 100%);
|
|
content: " ";
|
|
}
|
|
}
|
|
.land-famous-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
margin: 21rpx 0 0 0;
|
|
border-radius: 16rpx;
|
|
background: linear-gradient(180deg, #F3E7D1 0%, #F3E8D6 100%);
|
|
.pic-wrap {
|
|
.img + .img {
|
|
margin: 0 0 0 20rpx;
|
|
}
|
|
.img {
|
|
display: block;
|
|
height: 188rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |