1520 lines
44 KiB
Vue
1520 lines
44 KiB
Vue
<template>
|
|
<view class="tabbar-page">
|
|
<view
|
|
:style="{
|
|
'padding-top': statusBarHeight + 'px',
|
|
'padding-right': rightDistance + 'px'
|
|
}"
|
|
:class="scrollTop > 40 ? 'blur' : ''"
|
|
class="fix-header"
|
|
>
|
|
<view class="location" @click="reLocateHandle()">
|
|
{{ isLocating ? '定位中' : (cityName || '定位失败') }}
|
|
<image
|
|
:src="webUrl + '/home/icon-location.png'"
|
|
class="icon"
|
|
/>
|
|
</view>
|
|
<view class="search-wrap" @click="goGoodSearch">
|
|
<view class="icon">
|
|
<image
|
|
:src="webUrl + '/home/icon-search2.png'"
|
|
class="icon"
|
|
/>
|
|
</view>
|
|
<view class="swpier-bar">
|
|
<u-notice-bar
|
|
duration="4000"
|
|
:text="recommendKeyword"
|
|
:icon="' '"
|
|
color="#333"
|
|
fontSize="14"
|
|
bgColor="transparent"
|
|
@change="changeRecommendKeyword"
|
|
direction="column">
|
|
</u-notice-bar>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="slider-banner" id="slider-banner-id">
|
|
<swiper
|
|
v-if="banner.length > 0"
|
|
indicatorDots="true"
|
|
indicator-color="rgba(255, 255, 255, .3)"
|
|
indicator-active-color="#ffffff"
|
|
autoplay
|
|
circular
|
|
style="height: 510rpx;"
|
|
:duration="500"
|
|
@animationfinish="bindSwiperInstance($event, 'banner')"
|
|
>
|
|
<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" id="step1">
|
|
<!-- 导航v9 -->
|
|
<view class="menus-wrap">
|
|
<view class="menus-bg" />
|
|
<scroll-view scroll-x :scroll-into-view="scrollView" class="scroll-view" scroll-with-animation>
|
|
<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)"
|
|
:id="'box-item' + (index)"
|
|
>
|
|
<image
|
|
:src="item.pic"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
<view class="one-t tc menu-name">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view
|
|
v-if="hasExperienceCoupon && experienceCouponImage"
|
|
class="experience-coupon-banner"
|
|
@click="goExperienceCoupon"
|
|
>
|
|
<image
|
|
:src="experienceCouponImage"
|
|
mode="widthFix"
|
|
class="experience-coupon-img"
|
|
/>
|
|
</view>
|
|
<!-- 千县名品和地标好物 -->
|
|
<view
|
|
v-if="landmarkGoodsImage.image || countyFamousImage.image"
|
|
class="land-famous-wrap"
|
|
>
|
|
<view v-if="countyFamousImage.image" id="qianxian" class="pic-wrap">
|
|
<image
|
|
:src="countyFamousImage.image"
|
|
mode="heightFix"
|
|
class="img"
|
|
@click="landAndFamousItemClickHandle(countyFamousImage)"
|
|
/>
|
|
</view>
|
|
<view v-if="landmarkGoodsImage.image" id="dibiao" class="pic-wrap">
|
|
<image
|
|
:src="landmarkGoodsImage.image"
|
|
mode="heightFix"
|
|
class="img"
|
|
@click="landAndFamousItemClickHandle(landmarkGoodsImage)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 导航v9end -->
|
|
<!-- v9 专题 -->
|
|
<view class="subject-box">
|
|
<view class="section-full flex jc-between">
|
|
<swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="3000"
|
|
:duration="500"
|
|
@animationfinish="bindSwiperInstance($event, 'homestay')"
|
|
>
|
|
<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"
|
|
/> -->
|
|
<!-- <swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="3000">
|
|
<swiper-item class="" item-id="" v-if="contentFestival.indexImage">
|
|
<image
|
|
:src="contentFestival.indexImage"
|
|
mode="scaleToFill"
|
|
@click="goFestival"
|
|
/>
|
|
</swiper-item>
|
|
<swiper-item class="" item-id="">
|
|
<view class="new-zone-wrap">
|
|
<view class="kd" @click="toKD">
|
|
<view class="img-wrap">
|
|
<image style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="tip-img">
|
|
<image style="width: 142rpx; height:66.11rpx;border-radius: 0" :src="webUrl + '/orderIcon/dot.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="kd-cover">
|
|
<video v-if="indexVideo" class="kd-cover v12-mt-0" :src="indexVideo" controls :poster="indexVideo + '?vframe/jpg/offset/1'"></video>
|
|
<view class="enter-btn">点击进入</view>
|
|
</view>
|
|
</view>
|
|
<view class="xpsx">
|
|
<view class="img-wrap">
|
|
<image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="new-zone v12-mt-2" @click="toNewZone">
|
|
<swiper autoplay circular style="width: 100%;" interval="3000" next-margin="40rpx">
|
|
<swiper-item v-for="(item, index) in newZone" :key="index">
|
|
<view class="new-item">
|
|
<image :src="item.productImage" style="width: 120rpx; height: 120rpx; border-radius:10rpx"></image>
|
|
<view class="goods-info">
|
|
<view class="v12-font-22 more-t">{{ item.productTitle }}</view>
|
|
<view class="v12-primary-text v12-font-bold price-wrap">
|
|
<text class="v12-font-16">￥</text>
|
|
<text class="v12-font-24">{{ item.productPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper> -->
|
|
<view class="new-zone-wrap">
|
|
<image @click="toNewZone" class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
|
|
<view class="swiper-wrap-zx v12-mt-2">
|
|
<swiper :key="newZoneSwiperKey" :autoplay="swiperInstances.newZone" @change="changeIndex" :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000" :duration="500" @animationfinish="bindSwiperInstance($event, 'newZone')">
|
|
<swiper-item v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
|
|
<view class="zx-item" @click="toNewZone">
|
|
<image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
|
|
<view class="v12-pa-2">
|
|
<view class="v12-font-28 more-t v12-font-bold" style="text-align: center;">{{ item.productName }}</view>
|
|
<view class="v12-primary-text v12-font-bold price-wrap" style="text-align: center;">
|
|
<text class="v12-font-16">￥</text>
|
|
<text class="v12-font-24">{{ item.productPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- <view v-if="indexVideo" class="kd" id="xkd">
|
|
<view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
|
|
<image style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="tip-img">
|
|
<image style="width: 142rpx; height:66.11rpx;border-radius: 0" :src="webUrl + '/orderIcon/dot.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="kd-cover" @click.stop="played">
|
|
<video play-btn-position="center" id="indexVideo" :show-fullscreen-btn="false" class="kd-cover v12-mt-0" :src="indexVideo" controls autoplay :poster="indexVideo + '?vframe/jpg/offset/1'"></video>
|
|
<view class="enter-btn" >点击进入</view>
|
|
</view>
|
|
</view>
|
|
<view class="xpsx" id="xpsx">
|
|
<view class="img-wrap">
|
|
<image style="width: 140rpx; height:26.44rpx" :src="webUrl + '/orderIcon/xp.png'" mode="heightFix|widthFix"></image>
|
|
</view>
|
|
<view class="new-zone v12-mt-2" @click="toNewZone">
|
|
<swiper autoplay circular style="width: 100%;" interval="3000" next-margin="40rpx">
|
|
<swiper-item v-for="(item, index) in newZone" :key="index">
|
|
<view class="new-item">
|
|
<image :src="item.productImage" style="width: 120rpx; height: 120rpx; border-radius:10rpx"></image>
|
|
<view class="goods-info">
|
|
<view class="v12-font-22 more-t">{{ item.productTitle }}</view>
|
|
<view class="v12-primary-text v12-font-bold price-wrap">
|
|
<text class="v12-font-16">￥</text>
|
|
<text class="v12-font-24">{{ item.productPrice }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 2022/6/20 add 尖货推荐 -->
|
|
<view class="bast-box">
|
|
<view>
|
|
<image
|
|
:src="webUrl + '/home/bast-list-title.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"
|
|
>
|
|
<view
|
|
v-if="item.type === 'hotel'"
|
|
class="hotel-list-wrap"
|
|
>
|
|
<image
|
|
:src="webUrl + '/home/hotel-list-bg.png'"
|
|
mode="widthFix"
|
|
class="bg"
|
|
/>
|
|
<view class="list">
|
|
<view
|
|
v-for="(hotelItem, hotelIndex) in item.list"
|
|
:key="hotelIndex"
|
|
class="hotel-item"
|
|
@click="hotelItemClickHandle(hotelItem)"
|
|
>
|
|
<image :src="webUrl + '/home/home-number' + (hotelIndex + 1) + '.png'" class="mark" />
|
|
<image :src="webUrl + '/home/icon-hotel-btn.png'" class="btn" />
|
|
<image :src="hotelItem.logo" class="logo" />
|
|
<view class="info">
|
|
<view class="name one-t">{{ hotelItem.name }}</view>
|
|
<view class="desc more-t">{{ hotelItem.content }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<xdd-product-item
|
|
v-else
|
|
:item="item"
|
|
@view="goGoodsCon(item)"
|
|
@add="addToCart(item)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="bast-list-right">
|
|
<view
|
|
v-for="(item, index) in bastRightList"
|
|
:key="index"
|
|
class="item flex"
|
|
>
|
|
<view
|
|
v-if="item.type === 'swiper'"
|
|
class="swiper-wrap"
|
|
>
|
|
<swiper
|
|
class="swiper"
|
|
circular
|
|
autoplay
|
|
:interval="3000"
|
|
:duration="500"
|
|
@animationfinish="bindSwiperInstance($event, 'productSwiper')"
|
|
>
|
|
<swiper-item
|
|
v-for="(swiperItem, swiperIndex) in item.list"
|
|
:key="swiperIndex"
|
|
>
|
|
<image
|
|
:src="swiperItem.indexImage"
|
|
mode="scaleToFill"
|
|
class="swiper-img"
|
|
@click="productSwiperItemClickHandle(swiperItem)"
|
|
/>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<xdd-product-item
|
|
v-else
|
|
:item="item"
|
|
@view="goGoodsCon(item)"
|
|
@add="addToCart(item)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- v9 老用户弹窗 -->
|
|
|
|
<u-popup
|
|
v-if="drawEntranceConfig.homePosterEnable"
|
|
mode="center"
|
|
bgColor="transparent"
|
|
:show="isDrawPosterVisible"
|
|
>
|
|
<view class="popup-old-user flex flex-col ai-center">
|
|
<image
|
|
:src="drawEntranceConfig.homePosterImage"
|
|
class="main"
|
|
mode="scaleToFill"
|
|
@click="tapDrawPoster()"
|
|
/>
|
|
<view
|
|
class="icon-box flex jc-center ai-center"
|
|
@click="closeDrawPoster()"
|
|
>
|
|
<image
|
|
:src="webUrl+'/20230608112219219303.png'"
|
|
mode="scaleToFill"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-popup
|
|
v-if="canShowOldPoster"
|
|
mode="center"
|
|
bgColor="transparent"
|
|
:show="isOldUser"
|
|
>
|
|
<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>
|
|
<ProductWindow
|
|
ref="attrWindow"
|
|
:attr="attr"
|
|
:cartNum="cart_num"
|
|
:showOk="true"
|
|
@changeFun="changeFun"
|
|
@ok="handleOk"
|
|
paddingBottom="200rpx"
|
|
/>
|
|
<FunctionGuide :maxStep="15" @hide="setGuide('index')" :guideData="functionGuideData" ref="FunctionGuide"></FunctionGuide>
|
|
<AiEntrance
|
|
:city-name="cityName"
|
|
/>
|
|
<xdd-tabbar :curr-index="0" @getElementData="elementData" @getIcon="getIcon"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import XddTabbar from '@/components/xdd-tabbar'
|
|
import XddProductItem from '@/components/xdd-product-item'
|
|
import { getCouponReceive } from '@/api/user'
|
|
import { getHomeData } from '@/api/public'
|
|
import { sharpBannar } from '@/api/goods'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
import ProductWindow from '@/components/ProductWindow'
|
|
import goCartMixin from '@/mixins/goCartMixins'
|
|
import FunctionGuide from '@/components/FunctionGuide'
|
|
import AiEntrance from '@/components/aiChat/entrance'
|
|
import {
|
|
getSearchPageConfig
|
|
} from '@/api/search'
|
|
import {
|
|
getCurAddress,
|
|
getLocationPromise,
|
|
getLocationSetting,
|
|
openLocationSettting
|
|
} from "@/utils/common"
|
|
import { getWeixinShareConfig } from '@/api/public'
|
|
import { checkDrawTime } from '@/api/lottery'
|
|
export default {
|
|
name: 'IndexPage',
|
|
components: {
|
|
XddTabbar,
|
|
XddProductItem,
|
|
ProductWindow,
|
|
FunctionGuide,
|
|
AiEntrance
|
|
},
|
|
mixins: [pageListenMixins, goCartMixin],
|
|
data() {
|
|
return {
|
|
isFirstLoad: true,
|
|
isOldUserPopupShow: 0,
|
|
isDrawPosterVisible: false,
|
|
canShowOldPoster: false,
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
// 状态栏高度
|
|
statusBarHeight: 20,
|
|
// 右侧距离
|
|
rightDistance: 10,
|
|
banner: [],
|
|
menus: [],
|
|
// 定位中
|
|
isLocating: true,
|
|
cityName: '',
|
|
// 地标好物
|
|
landmarkGoodsImage: {},
|
|
// 千县名品
|
|
countyFamousImage: {},
|
|
// 尖货推荐左侧
|
|
bastLeftList: [],
|
|
// 尖货推荐右侧
|
|
bastRightList: [],
|
|
// 尖货推荐横幅
|
|
bannerList: [],
|
|
// 体验券
|
|
hasExperienceCoupon: 0,
|
|
hasUnusedExperienceCoupon: 0,
|
|
experienceCouponImage: '',
|
|
// 老用户弹窗
|
|
isOldUser: true,
|
|
oldUserPopup: {},
|
|
// 首页抽奖弹窗入口
|
|
drawEntranceConfig: {},
|
|
// 民宿专题轮播
|
|
contentHomestay: [],
|
|
// 新品推荐
|
|
newZone: [],
|
|
indexVideo: '',
|
|
// 节日专题
|
|
contentFestival: {},
|
|
pageKeyId: Object.freeze('appIndex'),
|
|
scrollTop: 0,
|
|
lotteryCanDraw: false,
|
|
videoContext: null,
|
|
isPlay: true,
|
|
tabIconPostion: {},
|
|
messageIcon: {},
|
|
recommendKeyword: [],
|
|
keywordIndex: 0,
|
|
shareData: {},
|
|
currentIndex: 0,
|
|
newZoneSwiperKey: 0,
|
|
newZoneResumeTimer: null,
|
|
// 轮播组件实例
|
|
swiperInstances: {
|
|
productSwiper: true,
|
|
homestay: true,
|
|
banner: true,
|
|
festival: true,
|
|
newZone: true,
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
console.clear()
|
|
console.time()
|
|
// uni.hideTabBar()
|
|
const _this = this
|
|
_this.init()
|
|
_this.getSearch()
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
let statusBar = 0
|
|
// #ifdef MP-WEIXIN
|
|
statusBar = e.statusBarHeight
|
|
const custom = uni.getMenuButtonBoundingClientRect()
|
|
_this.rightDistance = e.windowWidth - custom.left + 10
|
|
// #endif
|
|
// 状态栏高度
|
|
_this.statusBarHeight = statusBar
|
|
}
|
|
})
|
|
getWeixinShareConfig().then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
_this.shareData = data
|
|
}
|
|
})
|
|
},
|
|
onShow() {
|
|
this.pageToShowHandle()
|
|
uni.$emit('updateUnreadMessageCount')
|
|
if (!this.isFirstLoad) {
|
|
this.refreshPageData()
|
|
}
|
|
this.isFirstLoad = false
|
|
},
|
|
onHide() {
|
|
this.pageToHideHandle()
|
|
},
|
|
onPageScroll(e) {
|
|
if (this.pageScrollTimer) return
|
|
this.pageScrollTimer = setTimeout(() => {
|
|
this.pageScrollTimer = null
|
|
this.scrollTop = e.scrollTop
|
|
}, 50)
|
|
},
|
|
onShareTimeline() {
|
|
uni.updateShareMenu({
|
|
isPrivateMessage: false,
|
|
withShareTicket: false
|
|
})
|
|
return {
|
|
title: this.shareData.title || this.share.title,
|
|
query: '',
|
|
imageUrl: this.shareData.image || this.share.imageUrl
|
|
}
|
|
},
|
|
methods: {
|
|
changeIndex(e) {
|
|
this.currentIndex = e.detail.current
|
|
},
|
|
// 页面显示时恢复轮播
|
|
pageToShowHandle() {
|
|
// 恢复所有轮播组件的自动播放，甄选好礼轮播先停后启，避免 iOS 熄屏恢复后卡顿
|
|
if (this.newZoneResumeTimer) {
|
|
clearTimeout(this.newZoneResumeTimer)
|
|
this.newZoneResumeTimer = null
|
|
}
|
|
this.swiperInstances = {
|
|
productSwiper: true,
|
|
homestay: true,
|
|
banner: true,
|
|
festival: true,
|
|
newZone: false,
|
|
}
|
|
this.currentIndex = 0
|
|
this.newZoneSwiperKey += 1
|
|
this.$nextTick(() => {
|
|
this.newZoneResumeTimer = setTimeout(() => {
|
|
this.swiperInstances.newZone = true
|
|
this.newZoneResumeTimer = null
|
|
}, 120)
|
|
})
|
|
},
|
|
// 页面隐藏时暂停轮播
|
|
pageToHideHandle() {
|
|
if (this.newZoneResumeTimer) {
|
|
clearTimeout(this.newZoneResumeTimer)
|
|
this.newZoneResumeTimer = null
|
|
}
|
|
this.swiperInstances = {
|
|
productSwiper: false,
|
|
homestay: false,
|
|
banner: false,
|
|
festival: false,
|
|
newZone: false,
|
|
}
|
|
},
|
|
// 绑定轮播组件实例
|
|
bindSwiperInstance(e, key) {
|
|
// this.swiperInstances[key] = e.detail
|
|
},
|
|
resetNewZoneCurrentIndex() {
|
|
const products = (this.newZone && this.newZone.indexProducts) || []
|
|
if (!products.length || this.currentIndex >= products.length) {
|
|
this.currentIndex = 0
|
|
}
|
|
},
|
|
changeRecommendKeyword(e) {
|
|
this.keywordIndex = e
|
|
},
|
|
getSearch() {
|
|
getSearchPageConfig().then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.recommendKeyword = data.recommendKeyword.split(',')
|
|
}
|
|
})
|
|
},
|
|
elementData(e) {
|
|
this.tabIconPostion = e
|
|
},
|
|
getIcon(e) {
|
|
this.messageIcon = e
|
|
},
|
|
onscroll(e) {
|
|
this.scrollViewWidth = e.detail.scrollWidth
|
|
if (this.scrollTimer) return
|
|
this.scrollTimer = setTimeout(() => {
|
|
this.scrollTimer = null
|
|
this.getElementData(`#${this.scrollView}`, res => {
|
|
if (!res) return
|
|
this.setFunctionGuideData({
|
|
imgs: this.imgs,
|
|
btnGroupPosition: '20rpx',
|
|
tipsPosition: '',
|
|
position: {
|
|
top: res.top + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.height}px`,
|
|
height: `${res.height}px`
|
|
}
|
|
})
|
|
})
|
|
}, 100)
|
|
},
|
|
toEle(id, imgs) {
|
|
this.getElementData(`#${id}`, res=>{
|
|
if(res.left + res.width / 2 > this.screenWidth) {
|
|
this.$nextTick(()=> {
|
|
this.scrollView = id
|
|
this.imgs = imgs
|
|
})
|
|
return
|
|
}
|
|
this.setFunctionGuideData({
|
|
imgs: imgs,
|
|
btnGroupPosition: '',
|
|
tipsPosition: '',
|
|
position: {
|
|
top: res.top + 'px',
|
|
left: res.left + 'px',
|
|
width: `${res.width}px`,
|
|
height: `${res.height}px`,
|
|
}
|
|
})
|
|
})
|
|
},
|
|
played() {
|
|
this.isPlay = !this.isPlay
|
|
if(this.isPlay) {
|
|
this.videoContext.play()
|
|
} else {
|
|
this.videoContext.pause()
|
|
}
|
|
this.toKD()
|
|
},
|
|
pause() {
|
|
},
|
|
toKD() {
|
|
this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList?click=1')
|
|
},
|
|
toNewZone() {
|
|
this.$yrouter.push('/pages/home/newZone')
|
|
},
|
|
goExperienceCoupon() {
|
|
if (this.hasUnusedExperienceCoupon === 0) {
|
|
uni.navigateTo({
|
|
url: '/pages/order/MyOrder/index?type=3&tabIndex=1'
|
|
})
|
|
return
|
|
}
|
|
this.$yrouter.push('/pkg_product/views/experienceCoupon')
|
|
},
|
|
init() {
|
|
sharpBannar().then(res => {
|
|
const { data } = res
|
|
this.bannerList = data.banner || []
|
|
})
|
|
console.timeEnd()
|
|
console.log('^^^^^^^^^^^^^^^^获取定位开始')
|
|
console.time()
|
|
this.getPageData()
|
|
this.getLocationData()
|
|
},
|
|
// 定位失败，重新唤起定位授权
|
|
reLocateHandle() {
|
|
if (this.cityName) return
|
|
getLocationSetting(() => openLocationSettting().then(() => {
|
|
this.getLocationData()
|
|
}))
|
|
},
|
|
getLocationData() {
|
|
const cityName = uni.getStorageSync('locationCityName')
|
|
if (cityName) {
|
|
this.cityName = cityName
|
|
// this.getPageData()
|
|
}
|
|
this.isLocating = true
|
|
getLocationPromise().then(mapData => {
|
|
if (mapData.errMsg) {
|
|
const { latitude, longitude } = mapData
|
|
getCurAddress(latitude, longitude, address => {
|
|
console.log(address)
|
|
const resCityName = address.city || ''
|
|
// 如果当前定位成功和上一次的定位城市不同，才更新城市名称
|
|
if (resCityName !== this.cityName) {
|
|
this.cityName = address.city
|
|
uni.setStorageSync('locationCityName', this.cityName)
|
|
// this.getPageData()
|
|
}
|
|
this.isLocating = false
|
|
})
|
|
} else {
|
|
this.isLocating = false
|
|
// this.getPageData()
|
|
}
|
|
}).catch(() => {
|
|
// this.getPageData()
|
|
})
|
|
},
|
|
getPageData() {
|
|
console.timeEnd()
|
|
console.log('^^^^^^^^^^^^^^^^获取定位成功/失败开始获取首页数据')
|
|
console.time()
|
|
const _this = this
|
|
uni.showLoading({ title: '加载中' })
|
|
getHomeData({ cityName: this.cityName }).then(res => {
|
|
const { success, data } = res
|
|
if (success && data) {
|
|
console.timeEnd()
|
|
console.log('^^^^^^^^^^^^^^^^接口响应之后开始')
|
|
console.time()
|
|
_this.$set(_this, 'banner', data.banner || [])
|
|
_this.$set(_this, 'menus', data.menus || [])
|
|
_this.$set(_this, 'landmarkGoodsImage', data.landmarkGoodsImage || {})
|
|
_this.$set(_this, 'countyFamousImage', data.countyFamousImage || {})
|
|
_this.$set(_this, 'oldUserPopup', data.oldUserPopup || {})
|
|
_this.$set(_this, 'contentHomestay', data.contentHomestayV2 || [])
|
|
_this.$set(_this, 'contentFestival', data.contentFestivalV2 || [])
|
|
_this.$set(_this, 'newZone', data.newGoods || [])
|
|
_this.resetNewZoneCurrentIndex()
|
|
_this.$set(_this, 'hasExperienceCoupon', data.hasExperienceCoupon || 0)
|
|
_this.$set(_this, 'hasUnusedExperienceCoupon', data.hasUnusedExperienceCoupon || 0)
|
|
_this.$set(_this, 'experienceCouponImage', data.experienceCouponImage || '')
|
|
_this.$set(_this, 'isOldUserPopupShow', data.isOldUserPopupShow || 0)
|
|
_this.indexVideo = data.indexVideo ? data.indexVideo.videoUrl : ''
|
|
_this.bastLeftList = []
|
|
_this.bastRightList = []
|
|
_this.lotteryCanDraw = data.lotteryCanDraw || false
|
|
_this.initPosterPopupState(data)
|
|
if (data.bastList) {
|
|
const newBastLeftList = []
|
|
const newBastRightList = []
|
|
for (let i = 0; i < data.bastList.length; i++) {
|
|
if (i % 2 === 0) {
|
|
// 店铺排名
|
|
if (i === 4 && data.hotelList.length > 0) {
|
|
newBastLeftList.push({
|
|
type: 'hotel',
|
|
list: data.hotelList
|
|
})
|
|
}
|
|
newBastLeftList.push(data.bastList[i])
|
|
}
|
|
if (i % 2 === 1) {
|
|
// 尖货专题
|
|
if (i === 3 && data.contentBest.length > 0) {
|
|
newBastRightList.push({
|
|
type: 'swiper',
|
|
list: data.contentBest
|
|
})
|
|
}
|
|
newBastRightList.push(data.bastList[i])
|
|
}
|
|
}
|
|
_this.$set(_this, 'bastLeftList', newBastLeftList)
|
|
_this.$set(_this, 'bastRightList', newBastRightList)
|
|
}
|
|
this.$nextTick(() => {
|
|
console.timeEnd()
|
|
})
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(() => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
refreshPageData() {
|
|
getHomeData({ cityName: this.cityName }).then(res => {
|
|
const { success, data } = res
|
|
if (success && data) {
|
|
this.$set(this, 'banner', data.banner || [])
|
|
this.$set(this, 'menus', data.menus || [])
|
|
this.$set(this, 'landmarkGoodsImage', data.landmarkGoodsImage || {})
|
|
this.$set(this, 'countyFamousImage', data.countyFamousImage || {})
|
|
this.$set(this, 'oldUserPopup', data.oldUserPopup || {})
|
|
this.$set(this, 'contentHomestay', data.contentHomestayV2 || [])
|
|
this.$set(this, 'contentFestival', data.contentFestivalV2 || [])
|
|
this.$set(this, 'newZone', data.newGoods || [])
|
|
this.resetNewZoneCurrentIndex()
|
|
this.$set(this, 'hasExperienceCoupon', data.hasExperienceCoupon || 0)
|
|
this.$set(this, 'hasUnusedExperienceCoupon', data.hasUnusedExperienceCoupon || 0)
|
|
this.$set(this, 'experienceCouponImage', data.experienceCouponImage || '')
|
|
this.$set(this, 'isOldUserPopupShow', data.isOldUserPopupShow || 0)
|
|
this.indexVideo = data.indexVideo ? data.indexVideo.videoUrl : ''
|
|
this.lotteryCanDraw = data.lotteryCanDraw || false
|
|
this.initPosterPopupState(data)
|
|
if (data.bastList) {
|
|
const newBastLeftList = []
|
|
const newBastRightList = []
|
|
for (let i = 0; i < data.bastList.length; i++) {
|
|
if (i % 2 === 0) {
|
|
if (i === 4 && data.hotelList.length > 0) {
|
|
newBastLeftList.push({
|
|
type: 'hotel',
|
|
list: data.hotelList
|
|
})
|
|
}
|
|
newBastLeftList.push(data.bastList[i])
|
|
}
|
|
if (i % 2 === 1) {
|
|
if (i === 3 && data.contentBest.length > 0) {
|
|
newBastRightList.push({
|
|
type: 'swiper',
|
|
list: data.contentBest
|
|
})
|
|
}
|
|
newBastRightList.push(data.bastList[i])
|
|
}
|
|
}
|
|
this.bastLeftList = newBastLeftList
|
|
this.bastRightList = newBastRightList
|
|
}
|
|
}
|
|
}).catch(() => {})
|
|
},
|
|
goRoll(item) {
|
|
if (item.uniapp_url) {
|
|
this.$yrouter.push(item.uniapp_url)
|
|
}
|
|
},
|
|
goGoodSearch() {
|
|
this.$yrouter.push('/pages/shop/GoodSearch/index?keywords=' + this.recommendKeyword[this.keywordIndex] )
|
|
},
|
|
goGoodsCon(item) {
|
|
if(item.isFarmerShop) {
|
|
if (item.farmerShopId === 0) {
|
|
uni.showToast({
|
|
title: '店铺装修中~',
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pagesInn/inn/farmerStore?id=' + item.farmerShopId + '&isQianxian=1&from=famous&isFarmer=1'
|
|
})
|
|
return
|
|
}
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.id
|
|
}
|
|
})
|
|
},
|
|
changeOldPopup(state) {
|
|
this.isOldUser = state
|
|
},
|
|
hasShownDrawPosterInSession() {
|
|
const app = getApp && getApp()
|
|
return Boolean(app && app.globalData && app.globalData.homeDrawPosterShownInSession)
|
|
},
|
|
markDrawPosterShownInSession() {
|
|
const app = getApp && getApp()
|
|
if (!app) return
|
|
if (!app.globalData) {
|
|
app.globalData = {}
|
|
}
|
|
app.globalData.homeDrawPosterShownInSession = true
|
|
},
|
|
hasShownOldUserPopupInSession() {
|
|
const app = getApp && getApp()
|
|
return Boolean(app && app.globalData && app.globalData.homeOldUserPopupShownInSession)
|
|
},
|
|
markOldUserPopupShownInSession() {
|
|
const app = getApp && getApp()
|
|
if (!app) return
|
|
if (!app.globalData) {
|
|
app.globalData = {}
|
|
}
|
|
app.globalData.homeOldUserPopupShownInSession = true
|
|
},
|
|
initPosterPopupState(data = {}) {
|
|
const drawEntranceConfig = data.drawEntranceConfig || {}
|
|
this.$set(this, 'drawEntranceConfig', drawEntranceConfig)
|
|
const hasDrawPoster = Number(drawEntranceConfig.homePosterEnable) === 1
|
|
const hasShownDrawPosterInSession = this.hasShownDrawPosterInSession()
|
|
const shouldShowDrawPoster = hasDrawPoster && !hasShownDrawPosterInSession
|
|
if (shouldShowDrawPoster) {
|
|
this.markDrawPosterShownInSession()
|
|
}
|
|
this.canShowOldPoster = Boolean(
|
|
(data.isOldUserPopupShow || 0) &&
|
|
data.oldUserPopup &&
|
|
data.oldUserPopup.image &&
|
|
(data.lotteryCanDraw || false)
|
|
)
|
|
this.isDrawPosterVisible = shouldShowDrawPoster
|
|
const shouldShowOldUserPopup =
|
|
!shouldShowDrawPoster &&
|
|
!hasShownDrawPosterInSession &&
|
|
this.canShowOldPoster &&
|
|
!this.hasShownOldUserPopupInSession()
|
|
if (shouldShowOldUserPopup) {
|
|
this.markOldUserPopupShownInSession()
|
|
}
|
|
this.isOldUser = shouldShowOldUserPopup
|
|
},
|
|
showNextPoster() {
|
|
if (!this.isDrawPosterVisible && this.canShowOldPoster && !this.hasShownOldUserPopupInSession()) {
|
|
this.markOldUserPopupShownInSession()
|
|
this.isOldUser = true
|
|
}
|
|
},
|
|
closeDrawPoster() {
|
|
this.isDrawPosterVisible = false
|
|
this.showNextPoster()
|
|
},
|
|
parseCheckTimeResult(res) {
|
|
if (typeof res === 'boolean') return res
|
|
if (typeof (res && res.data) === 'boolean') return res.data
|
|
if (res && typeof res.success !== 'undefined') return Boolean(res.data)
|
|
return false
|
|
},
|
|
async goDrawLotteryPage() {
|
|
const config = this.drawEntranceConfig || {}
|
|
const linkType = Number(config.homePosterLinkType) || 1
|
|
const activityId = Number(config.drawActivityId) || 0
|
|
if (!activityId) {
|
|
uni.showToast({
|
|
title: '活动配置异常',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
let opened = false
|
|
try {
|
|
const res = await checkDrawTime(activityId)
|
|
opened = this.parseCheckTimeResult(res)
|
|
} catch (e) {
|
|
opened = false
|
|
}
|
|
const url = opened
|
|
? `/pkg-video/views/county-winners?activityId=${activityId}`
|
|
: `/pkg-video/views/county-lottery?linkType=${linkType}&activityId=${activityId}`
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
},
|
|
tapDrawPoster() {
|
|
this.isDrawPosterVisible = false
|
|
this.goDrawLotteryPage()
|
|
this.showNextPoster()
|
|
},
|
|
// 民宿专题
|
|
goHomeStay(item) {
|
|
if (item.type === 1) {
|
|
uni.navigateTo({ url: '/pkg_product/views/homestay?id=' + item.id })
|
|
return
|
|
}
|
|
this.linkToThemePage(item)
|
|
},
|
|
// 节日专题
|
|
goFestival() {
|
|
if (this.contentFestival.type === 1) {
|
|
uni.navigateTo({ url: '/pkg_product/views/festival' })
|
|
return
|
|
}
|
|
this.linkToThemePage(this.contentFestival)
|
|
},
|
|
// 尖货专题
|
|
productSwiperItemClickHandle(item) {
|
|
if (item.type === 1) {
|
|
uni.navigateTo({ url: `/pkg_product/views/festival?id=${item.id}&from=index&theme=best` })
|
|
return
|
|
}
|
|
this.linkToThemePage(item)
|
|
},
|
|
linkToThemePage(item) {
|
|
/**
|
|
* type:1-专题页,2-商品,3-时令尝鲜
|
|
* 当type=2，且uniappUrl有值，以跳转界面地址为准
|
|
*/
|
|
const type = item.type
|
|
// 链接到特定页面
|
|
if (type === 2 && item.uniappUrl) {
|
|
this.$global.commonJump(item.uniappUrl)
|
|
return
|
|
}
|
|
// 商品详情
|
|
if (type === 2 && item.productId) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: {
|
|
id: item.productId
|
|
}
|
|
})
|
|
}
|
|
// 时令尝鲜
|
|
if (type === 3) {
|
|
uni.navigateTo({ url: '/pkg_product/views/seasonList' })
|
|
}
|
|
},
|
|
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: () => {
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: res.msg + '',
|
|
icon: 'none',
|
|
duration: 3000
|
|
})
|
|
}
|
|
}).catch((err) => {
|
|
uni.showToast({
|
|
title: err.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)
|
|
}
|
|
},
|
|
// 千县名品和地标好物
|
|
landAndFamousItemClickHandle(item) {
|
|
const url = item.url
|
|
if (!url) return
|
|
if (item.level === '1') {
|
|
uni.switchTab({ url })
|
|
}
|
|
if (item.level === '2') {
|
|
uni.navigateTo({ url })
|
|
}
|
|
},
|
|
// 店铺排名
|
|
hotelItemClickHandle(item) {
|
|
uni.navigateTo({ url: `/pagesInn/inn/innHome?id=${item.id}&from=index` })
|
|
},
|
|
setTopHandle() {
|
|
uni.pageScrollTo({
|
|
scrollTop: 0,
|
|
duration: 200
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.n-actived{
|
|
// bottom: 20rpx !important;
|
|
.zx-item {
|
|
transform: scale(0.8);
|
|
}
|
|
}
|
|
.s-item{
|
|
height: fit-content !important;
|
|
bottom: 10rpx;
|
|
}
|
|
.zx-item{
|
|
width: 192rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.swiper-wrap-zx{
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
z-index: 2;
|
|
/* height: 50%; */
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
.swiper-item {
|
|
height: 100%;
|
|
}
|
|
.slider-banner {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.subject-box {
|
|
padding: 12rpx;
|
|
margin: 16rpx 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: 350rpx;
|
|
height: 52rpx;
|
|
margin: 21rpx 0 0 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;
|
|
margin: 21rpx 0 0 0;
|
|
.swiper-wrap {
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
.swiper {
|
|
width: 100%;
|
|
height: 486rpx;
|
|
.swiper-img {
|
|
width: 100%;
|
|
height: 486rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tabbar-page {
|
|
padding: 0 0 180rpx 0;
|
|
background-color: #F0F0F0;
|
|
}
|
|
.home-body {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding: 21rpx 21rpx 0 21rpx;
|
|
}
|
|
.scroll-view{
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: -120rpx 0 0 0;
|
|
}
|
|
.menus-wrap {
|
|
position: relative;
|
|
.menus-list {
|
|
position: relative;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 16rpx;
|
|
// background-color: #fff;
|
|
.item + .item {
|
|
// margin: 0 0 0 36rpx;
|
|
}
|
|
.item {
|
|
width: 150rpx;
|
|
padding: 10rpx 20rpx;
|
|
background-color: #fff;
|
|
.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: 0;
|
|
width: calc(100% + 40rpx);
|
|
height: 180rpx;
|
|
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 6) 40%, rgba(255, 255, 255, 1) 100%);
|
|
content: " ";
|
|
}
|
|
}
|
|
.land-famous-wrap {
|
|
position: relative;
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: space-between;
|
|
padding: 20rpx;
|
|
margin: 16rpx 0 0 0;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
.pic-wrap {
|
|
.img + .img {
|
|
margin: 0 0 0 20rpx;
|
|
}
|
|
.img {
|
|
display: block;
|
|
height: 188rpx;
|
|
}
|
|
}
|
|
}
|
|
.experience-coupon-banner {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding-top: 16rpx;
|
|
.experience-coupon-img {
|
|
display: block;
|
|
width: 100%;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
.hotel-list-wrap {
|
|
position: relative;
|
|
width: 344rpx;
|
|
.bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
}
|
|
.list {
|
|
position: relative;
|
|
z-index: 5;
|
|
padding: 100rpx 21rpx 21rpx 21rpx;
|
|
.hotel-item + .hotel-item {
|
|
margin: 21rpx 0 0 0;
|
|
}
|
|
.hotel-item {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 8rpx 16rpx 8rpx 8rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
.mark {
|
|
position: absolute;
|
|
top: 8rpx;
|
|
left: 20rpx;
|
|
z-index: 5;
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
.btn {
|
|
position: absolute;
|
|
bottom: 8rpx;
|
|
right: 0;
|
|
z-index: 5;
|
|
width: 60rpx;
|
|
height: 22rpx;
|
|
}
|
|
.logo {
|
|
display: block;
|
|
width: 116rpx;
|
|
height: 116rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
.info {
|
|
width: calc(100% - 116rpx);
|
|
padding: 0 0 0 16rpx;
|
|
box-sizing: border-box;
|
|
.name {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
}
|
|
.desc {
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
line-height: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.swpier-bar{
|
|
width: 100%;
|
|
}
|
|
.fix-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 44px;
|
|
padding-left: 21rpx;
|
|
line-height: 32px;
|
|
&.blur {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.location {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: -4px 20rpx 0 0;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
.icon {
|
|
display: block;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin: 0 0 0 10rpx;
|
|
}
|
|
}
|
|
.search-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
height: 36px;
|
|
margin: -4px 0 0 0;
|
|
border-radius: 18px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
.icon {
|
|
display: block;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin: 0 0 0 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.new-zone-wrap{
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
background: rgba(240,240,240,0.8);
|
|
border-radius: 16rpx;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
.bg-img{
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.kd{
|
|
width: 100%;
|
|
height: 266rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
.xpsx{
|
|
width: 100%;
|
|
height: 180rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 10rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.img-wrap{
|
|
height: 27rpx;
|
|
width: 140rpx;
|
|
image{
|
|
border-radius: 0 !important;
|
|
vertical-align: text-top !important
|
|
}
|
|
}
|
|
.tip-img{
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.kd-cover{
|
|
width: 100%;
|
|
height: 180rpx;
|
|
border-radius: 20rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
.enter-btn{
|
|
color: #333;
|
|
background-color: rgba(255,255,255,0.6);
|
|
font-size: 28rpx;
|
|
width: fit-content;
|
|
padding: 6rpx 20rpx;
|
|
border-radius: 100rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 40rpx;
|
|
margin: auto;
|
|
}
|
|
.new-zone{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
overflow: scroll;
|
|
}
|
|
.new-item{
|
|
display: flex;
|
|
margin-right: 20rpx;
|
|
align-items: center;
|
|
}
|
|
.goods-info{
|
|
width: 122rpx;
|
|
height: 110rpx;
|
|
background: rgba(240,240,240,0.8);
|
|
border-radius: 0rpx 20rpx 20rpx 0rpx;
|
|
box-sizing: border-box;
|
|
padding: 10rpx;
|
|
}
|
|
.price-wrap{
|
|
|
|
}
|
|
</style>
|