75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<template>
|
|
<view class="page" :style="themePageStyle">
|
|
<ThemeNavbar title="工厂目录" />
|
|
<scroll-view scroll-x class="tabs">
|
|
<text
|
|
v-for="item in classes"
|
|
:key="item.id"
|
|
class="tab"
|
|
:style="{ color: classId === item.id ? themePrimary : themeTextSoft }"
|
|
@tap="switchClass(item.id)"
|
|
>{{ item.name }}</text>
|
|
</scroll-view>
|
|
<view v-if="!list.length" class="empty" :style="{ color: themeTextSoft }">暂无工厂</view>
|
|
<view
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
class="card"
|
|
:style="{ background: themeSurface }"
|
|
@tap="goDetail(item.id)"
|
|
>
|
|
<image :src="item.cover" class="cover" mode="aspectFill" />
|
|
<view class="info">
|
|
<text class="title" :style="{ color: themeText }">{{ item.name }}</text>
|
|
<text class="meta" :style="{ color: themeTextSoft }">{{ item.classification_name }} {{ item.phone }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFactoryClassListApi, getFactoryListApi } from '@/api/page/factory'
|
|
import ThemeNavbar from '@/components/theme/ThemeNavbar.vue'
|
|
import themeMixin from '@/mixins/theme'
|
|
|
|
export default {
|
|
components: { ThemeNavbar },
|
|
mixins: [themeMixin],
|
|
data() {
|
|
return { classes: [{ id: 0, name: '全部' }], classId: 0, list: [] }
|
|
},
|
|
async onShow() {
|
|
await this.applyThemeOnShow()
|
|
getFactoryClassListApi().then((res) => {
|
|
this.classes = [{ id: 0, name: '全部' }, ...(res || [])]
|
|
})
|
|
this.load()
|
|
},
|
|
methods: {
|
|
load() {
|
|
getFactoryListApi({ classification: this.classId || undefined }).then((res) => {
|
|
this.list = res || []
|
|
})
|
|
},
|
|
switchClass(id) {
|
|
this.classId = id
|
|
this.load()
|
|
},
|
|
goDetail(id) {
|
|
uni.navigateTo({ url: `/pkg-more/factory/detail?id=${id}` })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page { min-height: 100vh; }
|
|
.tabs { white-space: nowrap; padding: 16rpx 24rpx; }
|
|
.tab { display: inline-block; margin-right: 28rpx; font-size: 28rpx; }
|
|
.empty { text-align: center; padding: 120rpx 0; }
|
|
.card { display: flex; margin: 24rpx; padding: 20rpx; border-radius: 16rpx; }
|
|
.cover { width: 160rpx; height: 160rpx; border-radius: 12rpx; margin-right: 20rpx; }
|
|
.title { font-size: 30rpx; }
|
|
.meta { display: block; margin-top: 8rpx; font-size: 24rpx; }
|
|
</style>
|