141 lines
2.6 KiB
Vue
141 lines
2.6 KiB
Vue
<script setup>
|
|
/**
|
|
* 商城
|
|
*/
|
|
import {
|
|
ref,
|
|
reactive,
|
|
getCurrentInstance,
|
|
computed,
|
|
nextTick
|
|
} from 'vue'
|
|
import {
|
|
onReachBottom,
|
|
onPullDownRefresh,
|
|
onShow,
|
|
onLoad,
|
|
onReady,
|
|
} from '@dcloudio/uni-app';
|
|
// 状态栏
|
|
import statusBar from '@/components/header/statusBar.vue'
|
|
// 工具库
|
|
import util from '@/common/js/util.js'
|
|
//
|
|
import api from '@/api/index.js'
|
|
// 商城首页
|
|
import shopIndex from '@/pages/shop/components/shopIndex.vue'
|
|
// 线下店铺
|
|
import offlineIndex from './components/offlineIndex.vue';
|
|
//
|
|
import footerMneu from '@/components/footerMenu/footerMenu'
|
|
|
|
const {
|
|
proxy
|
|
} = getCurrentInstance()
|
|
// 分类
|
|
const navList = reactive([{
|
|
key: 'shop',
|
|
name: '商城',
|
|
load: false,
|
|
domRef: 'shopIndexRef',
|
|
},
|
|
{
|
|
key: 'offline',
|
|
name: '线下店铺',
|
|
load: false,
|
|
domRef: 'offlineIndexRef',
|
|
}
|
|
])
|
|
// 分类下标
|
|
const navIndex = ref('')
|
|
// 当前导航项
|
|
const navCurrent = computed(() => navList[navIndex.value] || {})
|
|
|
|
onLoad(() => {
|
|
handleNavIndex(1)
|
|
})
|
|
|
|
onReady(() => {
|
|
// proxy.$refs.product.getList()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
// 重载列表
|
|
// proxy.$refs.product.getMoreList()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
// 重载列表
|
|
// proxy.$refs.product.refreshList()
|
|
})
|
|
|
|
onShow(() => {
|
|
// 触发自定义tabbar函数
|
|
uni.$emit('changeMine', 'shop')
|
|
})
|
|
|
|
// 切换导航
|
|
function handleNavIndex(index) {
|
|
if (navIndex.value === index) return
|
|
navIndex.value = index
|
|
navCurrent.value.load = true
|
|
|
|
nextTick(() => {
|
|
if (navCurrent.value.domRef) proxy.$refs[navCurrent.value.domRef].init()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="app">
|
|
<!-- 菜单首页 -->
|
|
<view class="navBox bfff">
|
|
<statusBar />
|
|
|
|
<view class="nav">
|
|
<view class="item fmid f1" :class="{'active': index === navIndex}" v-for="(item,index) in navList"
|
|
:key="index" @click="handleNavIndex(index)">
|
|
<view class="">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<template v-if="navList[0].load">
|
|
<view v-show="navCurrent.key == 'shop'">
|
|
<!-- 商城首页 -->
|
|
<shopIndex ref="shopIndexRef" />
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="navList[1].load">
|
|
<view v-show="navCurrent.key == 'offline'">
|
|
<!-- 商城首页 -->
|
|
<offlineIndex ref="offlineIndexRef" />
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 底部导航 -->
|
|
<footerMenu ref="footerMneuRef" page="shop" />
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
// 顶部导航
|
|
.nav {
|
|
display: flex;
|
|
|
|
//
|
|
.item {
|
|
color: #3d3d3d;
|
|
font-size: 36rpx;
|
|
height: 100rpx;
|
|
transition: .3s;
|
|
|
|
//
|
|
&.active {
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
</style> |