jiuyiUniapp/jiuyi/pages/shop/shop.vue

113 lines
2.4 KiB
Vue

<template>
<view class="jy-shop" v-if="1">
<view class="jy-shop-header">
<JyCommonHead background="jb">
<template #center>
<JySearch class="plr20"></JySearch>
</template>
<template #bottom>
<JyShopNavigation :list="tabs.list" @tabItemClick="itemClick" marright="25px" activeWeight='600' titalName="categoryName" activeColor="#FF9B27" activeBarColor="#FF9B27" />
</template>
</JyCommonHead>
</view>
<view @click="checkLink('pages/news/ce')">111</view>
<!-- 商品卡片组 加载更多 -->
<JyContent class="mt20" ref="jy_content"></JyContent>
</view>
<!-- -->
<view class="mt90 tac" v-else>
<text>暂未开放</text>
</view>
<!-- 底部导航 -->
<footerMenu ref="footerMneuRef" page="shop" />
</template>
<script setup>
/**
* 商城
*/
// 底部菜单
import {
ref,
reactive,
inject
} from 'vue'
// 顶部搜索
const {
checkLink
} = inject('util')
import JyCommonHead from '@/components/public/jy-common-head'
// 搜索
import JySearch from './components/jy-search'
//顶部条件栏
import JyShopNavigation from '@/components/public/jy-shop-navigation'
// 商品列表
import JyContent from '@/components/public/jy-shop-content'
import footerMneu from '@/components/footerMenu/footerMenu'
import {
onReachBottom,
onPullDownRefresh,
onShow,
onLoad,
} from '@dcloudio/uni-app';
import {
classification
} from '@/api/shop'
// 商品列表组件
const jy_content = ref(null)
// 滑动导航栏数据
const tabs = reactive({
list: [],
total: 0
})
const getNavigationList = async () => {
try {
const {
data,
total
} = await classification.list();
tabs.list = data;
tabs.total = total;
} catch (error) {
console.log(error);
}
};
const itemClick = (item, index) => {
// jy_content.value.listProperty.params.navigation = item.value
jy_content.value.getData(true)
}
// 初始化
const init = () => {
getNavigationList()
}
onLoad(() => {
init();
})
onReachBottom(() => {
jy_content.value.getData(false, 'onReachBottom')
})
onPullDownRefresh(() => {
jy_content.value.getData(true, 'onPullDownRefresh')
})
onShow(() => {
// 触发自定义tabbar函数
uni.$emit('changeMine', 'shop')
})
</script>
<style lang="scss" scoped>
.jy-shop {
padding-bottom: 100rpx;
}
.jy-shop-header {
opacity: 1;
background: linear-gradient(50deg, #DBFCE9 -7%, #FFFBF3 50%, #FEEEDB 82%, #FEE3CD 102%);
}
</style>