481 lines
16 KiB
Vue
481 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="main">
|
||
<z-paging
|
||
ref="paging"
|
||
v-model="indexDataArr"
|
||
@query="upCallback"
|
||
@scroll="pagingScroll"
|
||
@scrolltoupper="scrolltoupper"
|
||
:fixed="false"
|
||
height="100%"
|
||
auto-show-back-to-top
|
||
>
|
||
<view class="top_container">
|
||
<view
|
||
class="title text-[#1b4694] font-bold text-5xl"
|
||
:style="{
|
||
top: statusBarHeight + 'px',
|
||
height: navHeight + 'px',
|
||
lineHeight: navHeight + 'px'
|
||
}"
|
||
>
|
||
{{ titleImageObj[0]?.content?.title ?? '思缘生活' }}
|
||
</view>
|
||
<template v-if="searchList">
|
||
<w-search
|
||
:content="searchList?.content"
|
||
:styles="searchList?.styles"
|
||
:navbarStyle="{ top: titleHeight + 10 + 'px' }"
|
||
/>
|
||
</template>
|
||
<image
|
||
:style="{ height: 70 + titleHeight + 'px' }"
|
||
:src="getImageUrl(item.image)"
|
||
v-for="(item, ind) in titleImageObj[0]?.content?.data"
|
||
:key="ind"
|
||
/>
|
||
</view>
|
||
<!-- 固定顶部搜索栏 -->
|
||
<view
|
||
class="top_fixed fixed bg-white w-[100%] top-0 z-[99]"
|
||
:style="{ height: titleHeight + 8 + 'px' }"
|
||
v-if="searchFixed"
|
||
>
|
||
<template v-if="searchList">
|
||
<w-search
|
||
:content="searchList?.content"
|
||
:styles="searchList?.styles"
|
||
:navbarStyle="{ bottom: '13px', height: capsuleHeight + 'px' }"
|
||
:navbarItemStyle="{ background: '#F1F1F1' }"
|
||
:inputStyle="{ width: '250rpx' }"
|
||
/>
|
||
</template>
|
||
</view>
|
||
|
||
<view>
|
||
<view
|
||
v-for="(item, index) in indexData.pages"
|
||
:key="index"
|
||
class="bg-[#F5F5F7]"
|
||
>
|
||
<!-- <template v-if="item.name == 'search'">
|
||
<w-search :content="item.content" :styles="item.styles" />
|
||
</template> -->
|
||
<template v-if="item.name == 'banner'">
|
||
<w-banner :content="item.content" :styles="item.styles" />
|
||
</template>
|
||
<template v-if="item.name == 'nav'">
|
||
<w-nav :content="item.content" :styles="item.styles" />
|
||
</template>
|
||
<template v-if="item.name == 'category'">
|
||
<w-category :content="item.content" :styles="item.styles" />
|
||
</template>
|
||
</view>
|
||
<template v-if="activityList?.length">
|
||
<ActivateIndoor :lists="activityList"></ActivateIndoor>
|
||
</template>
|
||
<!-- 页面展示需要把活动专区放在推荐分类列表和分类服务中间，所以这里要抽离出来重新写 -->
|
||
<view
|
||
v-for="(item, index) in indexData.pages"
|
||
:key="index"
|
||
class="bg-[#F5F5F7]"
|
||
>
|
||
<template v-if="item.name == 'category'">
|
||
<CategoryDatalist :content="item.content" />
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<!-- 活动专区：假节日搞活动 -->
|
||
<!-- <template v-if="indexData?.promotion?.length">
|
||
<ActivateIndoor :lists="indexData.promotion"></ActivateIndoor>
|
||
</template> -->
|
||
|
||
<!-- 新品推荐 -->
|
||
<!-- <template v-if="indexData?.newRecommend?.length">
|
||
<NewGoods :lists="indexData.newRecommend"></NewGoods>
|
||
</template> -->
|
||
|
||
<!-- 热门服务 -->
|
||
<!-- <template v-if="indexData?.hotService?.length">
|
||
<hot :lists="indexData.hotService"></hot>
|
||
</template> -->
|
||
<!-- 吸顶分类 -->
|
||
<template v-if="categoryList?.length > 0">
|
||
<stickyCategory
|
||
ref="stickycategory"
|
||
:lists="categoryList"
|
||
:top="titleHeight"
|
||
@tabChange="tabChange"
|
||
:isFixed="isFixed"
|
||
></stickyCategory>
|
||
</template>
|
||
|
||
<!-- 师傅推荐 暂时屏掉，参考竞品，一般不显示 -->
|
||
<!-- <template v-if="indexData?.staff?.length">
|
||
<master :lists="indexData.staff"></master>
|
||
</template> -->
|
||
|
||
<!-- 推荐分类 -->
|
||
<!-- <template v-if="indexData?.category.length || []">
|
||
<category :lists="indexData?.category"></category>
|
||
</template> -->
|
||
|
||
<!-- 用于占位 -->
|
||
<div class="cat" v-if="indexData?.hotService.length"></div>
|
||
</z-paging>
|
||
</view>
|
||
<view class="right-btns">
|
||
<view class="rightcontrol" @click="rightControl">
|
||
<!-- <image
|
||
class="iamge-close"
|
||
src="@/static/images/icon_clear.png"
|
||
alt=""
|
||
v-if="isShowRightBtn"
|
||
/> -->
|
||
</view>
|
||
<!-- <view class="allBtn" v-if="isShowRightBtn">
|
||
<button class="button" type="default" open-type="share">
|
||
<image src="@/static/images/share.png" alt="" />
|
||
<view>分享</view>
|
||
</button>
|
||
<button class="button" type="default" @click="call">
|
||
<image src="@/static/images/phone.png" alt="" />
|
||
<view>电话</view>
|
||
</button>
|
||
<button class="button" type="default" open-type="contact">
|
||
<image src="@/static/images/kefu.png" alt="" />
|
||
<view>客服</view>
|
||
</button>
|
||
</view> -->
|
||
</view>
|
||
<view class="endrightcontrol" @click="rightControl">
|
||
<image src="@/static/images/icon_user_about.png" alt="" v-if="!isShowRightBtn" />
|
||
</view>
|
||
<!-- 底部导航栏 -->
|
||
<Tabbar />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { getIndex } from '@/api/shop'
|
||
import { reactive, shallowRef, ref, unref } from 'vue'
|
||
import { onLoad, onUnload, onShareAppMessage, onShow } from '@dcloudio/uni-app'
|
||
import Tabbar from '@/components/tabbar/tabbar.vue'
|
||
// import Category from './comp/category.vue'
|
||
import ActivateIndoor from './comp/activate-indoor.vue'
|
||
// import NewGoods from './comp/new-goods.vue'
|
||
// import Hot from './comp/hot-list.vue'
|
||
// import Master from './comp/master-list.vue'
|
||
import CategoryDatalist from './comp/category-datalist.vue'
|
||
import stickyCategory from './comp/sticky-category.vue'
|
||
import { useAppStore } from '@/stores/app'
|
||
import { getDecorate } from '@/api/shop'
|
||
import { useUserStore } from '@/stores/user'
|
||
import { apiActivityList } from '@/api/goods'
|
||
import { storeToRefs } from 'pinia'
|
||
|
||
const appStore = useAppStore()
|
||
const userStore = useUserStore()
|
||
const { userInfo } = storeToRefs(userStore)
|
||
const paging = shallowRef()
|
||
const { getImageUrl } = useAppStore()
|
||
const indexData = reactive<any>({
|
||
pages: [],
|
||
promotion: [],
|
||
newRecommend: [],
|
||
hotService: [],
|
||
staff: [],
|
||
category: []
|
||
})
|
||
interface ListContent {
|
||
content?: {
|
||
title: ''
|
||
data: [
|
||
{
|
||
image: ''
|
||
}
|
||
]
|
||
}
|
||
styles?: {}
|
||
title?: ''
|
||
}
|
||
interface ListContentList {
|
||
[index: number]: ListContent
|
||
}
|
||
interface ActivityList {
|
||
goodsIds: string | null
|
||
id: number
|
||
name: string
|
||
status: number
|
||
surfacePlot: string
|
||
}
|
||
let categoryList = reactive([]) //分类
|
||
let searchList = reactive<ListContent>({}) //搜索
|
||
const activityList = ref<ActivityList[]>([]) //活动专区
|
||
let titleImageObj = reactive<ListContentList>([]) //顶部图片标题
|
||
const titleHeight = ref(0) //标题栏总高度
|
||
const capsuleHeight = ref(0) //胶囊高度
|
||
const navHeight = ref(0) //导航栏高度
|
||
const statusBarHeight = ref(0) //状态栏高度
|
||
const getTitleHeight = () => {
|
||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||
uni.getSystemInfo({
|
||
success: res => {
|
||
statusBarHeight.value = res?.statusBarHeight as number
|
||
navHeight.value =
|
||
(menuButtonInfo.top - statusBarHeight.value) * 2 + menuButtonInfo.height //获取导航栏高度
|
||
titleHeight.value = statusBarHeight.value + navHeight.value
|
||
capsuleHeight.value = menuButtonInfo.height
|
||
}
|
||
})
|
||
}
|
||
|
||
//z-paging直接绑定indexData控制台会报警告[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Array, got Object
|
||
//故定义indexDataArr
|
||
interface IndexArray {
|
||
content: object
|
||
disabled: boolean
|
||
display: boolean
|
||
id: string
|
||
name: string
|
||
styles: object
|
||
title: string
|
||
}
|
||
let indexDataArr: IndexArray[] = []
|
||
const upCallback = async (): Promise<void> => {
|
||
try {
|
||
const data = await getIndex({
|
||
cityId: appStore.cityInfo.city_id
|
||
})
|
||
for (const key in indexData) {
|
||
if (data[key] != null && data[key] != undefined) {
|
||
indexData[key] = data[key]
|
||
}
|
||
}
|
||
indexData.pages = JSON.parse(data.pages)
|
||
indexDataArr = new Array(indexData.pages)
|
||
console.log('indexData.pages', indexData.pages)
|
||
|
||
// 吸顶分类列表
|
||
const cate_list = indexData.pages.filter((i: any) => i.name == 'sticky-category')
|
||
if (cate_list.length > 0) {
|
||
categoryList = cate_list[0].content.data
|
||
}
|
||
// 搜索栏
|
||
const search_list = indexData.pages.filter((i: any) => i.name == 'search')
|
||
if (search_list.length > 0) {
|
||
searchList = search_list[0]
|
||
}
|
||
// 顶部图片标题信息
|
||
titleImageObj = indexData.pages.filter((i: any) => i.name == 'home-title')
|
||
|
||
// 导航菜单（金刚区）
|
||
paging.value.complete([data])
|
||
} catch (err) {
|
||
console.log(err)
|
||
// refreshRef.value.endErr()
|
||
paging.value.complete(false)
|
||
}
|
||
}
|
||
|
||
onShow(async () => {
|
||
const res = await apiActivityList({ status: 1 })
|
||
activityList.value = res.lists
|
||
})
|
||
const stickycategory = ref()
|
||
const searchFixed = ref(false) //显示顶部搜索栏
|
||
const pagingScroll = async (e: any) => {
|
||
const banner_h = uni.upx2px(300) //300为顶部图片的高度
|
||
const sc_top = e.detail.scrollTop
|
||
stickycategory?.value?.handleActive(sc_top)
|
||
|
||
if (sc_top > banner_h) searchFixed.value = true
|
||
else searchFixed.value = false
|
||
}
|
||
|
||
const isFixed = ref(true)
|
||
const scrolltoupper = () => {
|
||
// 解决点击返回顶部按钮返回顶部后，还有吸顶的问题
|
||
isFixed.value = false
|
||
setTimeout(() => {
|
||
isFixed.value = true
|
||
})
|
||
}
|
||
// 吸顶分类改变
|
||
const tabChange = async (e: any) => {
|
||
paging.value.scrollToY(e)
|
||
}
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title: `粤好生活`,
|
||
imageUrl: '',
|
||
path: `/pages/index/index?scene=${unref(userInfo).distributorId}`
|
||
}
|
||
})
|
||
const call = async () => {
|
||
// 获取页面装修-客服设置中配置的客服联系电话
|
||
const data = await getDecorate({ id: 3 })
|
||
const datas = JSON.parse(data.pages)
|
||
const mobile = datas[0].content.mobile
|
||
uni.makePhoneCall({
|
||
phoneNumber: mobile,
|
||
success: function () {
|
||
console.log('拨打电话成功')
|
||
},
|
||
fail: function () {
|
||
console.log('拨打电话失败')
|
||
}
|
||
})
|
||
}
|
||
|
||
// const sharedState = inject('sharedState')
|
||
|
||
onLoad(options => {
|
||
// 扫描普通二维码
|
||
// 有distId，重新扫码进来
|
||
// 有distId,重新扫新码
|
||
// #ifdef MP-WEIXIN
|
||
// const q = decodeURIComponent(options.q)
|
||
// if (q.indexOf('distributorId=') != -1) {
|
||
// // 已绑定且已登录
|
||
// if (userStore.distId && userStore.token) return
|
||
// const distributorId = parseFloat(q.split('distributorId=')[1])
|
||
// userStore.setDistId(distributorId)
|
||
// if (userStore.token) {
|
||
// userStore.bindingDistId()
|
||
// }
|
||
// }
|
||
|
||
// 扫太阳码或分享
|
||
const { scene } = options
|
||
if (scene) {
|
||
const distributorId = parseFloat(scene)
|
||
userStore.setDistId(distributorId)
|
||
if (userStore.token) {
|
||
userStore.bindingDistId()
|
||
}
|
||
}
|
||
|
||
// #endif
|
||
getTitleHeight()
|
||
uni.$on('refreshhome', () => {
|
||
upCallback()
|
||
})
|
||
})
|
||
|
||
onUnload(() => {
|
||
uni.$off('refreshhome')
|
||
})
|
||
|
||
const isShowRightBtn = ref(true)
|
||
const rightControl = () => {
|
||
isShowRightBtn.value = !isShowRightBtn.value
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
display: flex;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
flex-direction: column;
|
||
font-family: 'Source Han Sans CN', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||
|
||
.main {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: scroll;
|
||
background: #f8f8f9;
|
||
position: relative;
|
||
// background-color: #fff;
|
||
}
|
||
|
||
.top_container {
|
||
// position: absolute;
|
||
image {
|
||
width: 100%;
|
||
// height: 300rpx;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
// top: 93rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
.right-btns {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 25%;
|
||
width: 100rpx;
|
||
min-height: 35px;
|
||
z-index: 1000;
|
||
|
||
.rightcontrol {
|
||
width: 100%;
|
||
height: 50rpx;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
object-fit: contain;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.iamge-close {
|
||
background: rgba(34, 39, 21, 0.75);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.button {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
background: rgba(34, 39, 21, 0.75);
|
||
border-radius: 50%;
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #ffffff;
|
||
padding: 0;
|
||
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
object-fit: contain;
|
||
}
|
||
|
||
view {
|
||
font-size: 24rpx;
|
||
height: 43rpx;
|
||
line-height: 43rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.endrightcontrol {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
bottom: 168rpx;
|
||
width: 60rpx;
|
||
min-height: 40rpx;
|
||
z-index: 1000;
|
||
display: flex;
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
}
|
||
</style>
|