59 lines
1.9 KiB
Vue
59 lines
1.9 KiB
Vue
<template>
|
|
<view class="page" :style="themePageStyle">
|
|
<ThemeNavbar title="工厂详情" />
|
|
<image v-if="info.cover" :src="info.cover" class="hero" mode="aspectFill" />
|
|
<view class="card" :style="{ background: themeSurface }">
|
|
<text class="name" :style="{ color: themeText }">{{ info.name }}</text>
|
|
<text class="meta" :style="{ color: themeTextSoft }">{{ info.classification_name }}</text>
|
|
<text class="meta" :style="{ color: themeTextSoft }">{{ info.phone }}</text>
|
|
<text class="meta" :style="{ color: themeTextSoft }">{{ info.address }}</text>
|
|
</view>
|
|
<view class="grid">
|
|
<image
|
|
v-for="(img, i) in info.images || []"
|
|
:key="i"
|
|
:src="img.url || img.cover"
|
|
class="grid-img"
|
|
mode="aspectFill"
|
|
@tap="preview(img.url || img.cover)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getFactoryDetailApi } from '@/api/page/factory'
|
|
import ThemeNavbar from '@/components/theme/ThemeNavbar.vue'
|
|
import themeMixin from '@/mixins/theme'
|
|
|
|
export default {
|
|
components: { ThemeNavbar },
|
|
mixins: [themeMixin],
|
|
data() {
|
|
return { info: {} }
|
|
},
|
|
async onLoad(options) {
|
|
await this.applyThemeOnShow()
|
|
getFactoryDetailApi(Number(options.id || 0)).then((res) => {
|
|
this.info = res || {}
|
|
})
|
|
},
|
|
methods: {
|
|
preview(url) {
|
|
const urls = (this.info.images || []).map((item) => item.url || item.cover).filter(Boolean)
|
|
uni.previewImage({ current: url, urls })
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page { min-height: 100vh; }
|
|
.hero { width: 100%; height: 420rpx; }
|
|
.card { margin: 24rpx; padding: 24rpx; border-radius: 16rpx; }
|
|
.name { font-size: 34rpx; font-weight: 600; display: block; }
|
|
.meta { display: block; margin-top: 8rpx; font-size: 26rpx; }
|
|
.grid { display: flex; flex-wrap: wrap; padding: 0 24rpx 40rpx; gap: 12rpx; }
|
|
.grid-img { width: 226rpx; height: 226rpx; border-radius: 8rpx; }
|
|
</style>
|