118 lines
3.2 KiB
Vue
118 lines
3.2 KiB
Vue
<template>
|
|
<view class="tabbar-page tabbar-page-padding">
|
|
<taoke-classify v-if="!promotionUnlocked"></taoke-classify>
|
|
<block v-else>
|
|
<view class="w100 h-186" style="background-image: linear-gradient(to bottom,#F2BCBF,#F7F6FA);">
|
|
<uni-nav-bar title="分类" :border="false" backgroundColor="transparent" class="fw-b"></uni-nav-bar>
|
|
</view>
|
|
<view class="w100 rows rowsm rowsb">
|
|
<scroll-view scroll-y="true" class="w-180 mr-20 bgff br-20 tabbar-scroll-area">
|
|
<view class="w100 h-90 rows rowsm rowsc" :class="ids==item.id?'col fw-b':'col333'" v-for="(item,index) in types" :key="index"
|
|
@click="onSel(index,item)">
|
|
<text class="fs-26 one_overflow">{{item.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="rows rowsl">
|
|
<scroll-view scroll-y="true" class="w-542 tabbar-scroll-area">
|
|
<view class="rows rowsl" v-if="list.length>0">
|
|
<view class="w-542 rows rowsm mb-30 mr-15" v-for="(item,index) in list" :key="index"
|
|
@click="$tools.goNext(`/pageOne/indexs/detail?id=${item.id}`)">
|
|
<image class="w-168 h-168 br-20 mr-20" :src="$tools.oss(item.image)" mode="aspectFill"></image>
|
|
<view class="h-168 rows rowsl rowsb">
|
|
<text class="fs-28 fw-b two_overflow">{{item.name}}</text>
|
|
<view class="w100 rows rowsm rowsb w-340">
|
|
<text class="fs-30 fw-b">￥{{item.price}}</text>
|
|
<text class="fs-24 col888">销量{{item.sales}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="w100 rows rowsc h-600 rowsm" v-else>
|
|
<image class="w-436 h-366" src="/static/other/5.png" mode=""></image>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TaokeClassify from '@/components/taoke/tab-classify.vue'
|
|
export default {
|
|
components: {
|
|
TaokeClassify
|
|
},
|
|
data() {
|
|
return {
|
|
select: 0,
|
|
types: [],
|
|
list: [],
|
|
ids: '',
|
|
promotionUnlocked: false
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.ids = e.id
|
|
this.syncPromotionStatus()
|
|
if (!this.promotionUnlocked) {
|
|
return
|
|
}
|
|
this.category()
|
|
},
|
|
onShow() {
|
|
this.syncPromotionStatus()
|
|
this.syncCustomTabBar()
|
|
if (!this.promotionUnlocked) {
|
|
return
|
|
}
|
|
if (this.types.length === 0) {
|
|
this.category()
|
|
}
|
|
},
|
|
methods: {
|
|
syncPromotionStatus() {
|
|
this.promotionUnlocked = this.$tools.getPromotionUnlocked()
|
|
},
|
|
syncCustomTabBar() {
|
|
this.$tools.setTabbarSelectedPath('/pages/tabbar/sort')
|
|
if (typeof this.getTabBar === 'function') {
|
|
const tabBar = this.getTabBar()
|
|
if (tabBar && typeof tabBar.syncPromotionStatus === 'function') {
|
|
setTimeout(() => {
|
|
tabBar.syncPromotionStatus('/pages/tabbar/sort')
|
|
}, 0)
|
|
}
|
|
}
|
|
},
|
|
onSel(index, item) {
|
|
this.ids = item.id
|
|
this.select = index
|
|
this.shop()
|
|
},
|
|
category() {
|
|
this.$tools.axios('POST', 'shop/category').then(res => {
|
|
this.types = res.data
|
|
if (!this.ids) {
|
|
this.ids = res.data[this.select].id
|
|
}
|
|
this.shop()
|
|
})
|
|
},
|
|
shop() {
|
|
this.$tools.axios('POST', 'shop/shop', {
|
|
category_id: this.ids,
|
|
}).then(res => {
|
|
this.list = res.data
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F7F6FA;
|
|
}
|
|
</style>
|