131 lines
3.0 KiB
Vue
131 lines
3.0 KiB
Vue
<template>
|
|
<view class="index-page">
|
|
<!-- Hero 首屏 -->
|
|
<HeroBanner :stats="trustStats" />
|
|
|
|
<!-- 4步流程 -->
|
|
<StepsFlow :steps="stepList" />
|
|
|
|
<!-- 全球POD货盘 -->
|
|
<PodCatalog
|
|
:countries="podCountries"
|
|
:products="podProducts"
|
|
@countryChange="onPodCountryChange"
|
|
@moreTap="onGoProducts"
|
|
@productTap="onGoDetail"
|
|
/>
|
|
|
|
<!-- 平台功能 + 集成平台 -->
|
|
<PlatformFeatures :features="featureList" />
|
|
|
|
<!-- 为什么选择 -->
|
|
<WhyChoose :reasons="reasonList" />
|
|
|
|
<!-- 公司简介 + 底部CTA -->
|
|
<CompanyIntro :abilities="companyFeatures" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeroBanner from './components/HeroBanner.vue'
|
|
import StepsFlow from './components/StepsFlow.vue'
|
|
import PodCatalog from './components/PodCatalog.vue'
|
|
import PlatformFeatures from './components/PlatformFeatures.vue'
|
|
import WhyChoose from './components/WhyChoose.vue'
|
|
import CompanyIntro from './components/CompanyIntro.vue'
|
|
|
|
import { getCountries, getGoods } from '@/api/public.js'
|
|
|
|
import {
|
|
trustStats,
|
|
stepList,
|
|
featureList,
|
|
reasonList,
|
|
companyFeatures
|
|
} from './mock.js'
|
|
|
|
export default {
|
|
components: {
|
|
HeroBanner,
|
|
StepsFlow,
|
|
PodCatalog,
|
|
PlatformFeatures,
|
|
WhyChoose,
|
|
CompanyIntro
|
|
},
|
|
data() {
|
|
return {
|
|
trustStats,
|
|
stepList,
|
|
featureList,
|
|
reasonList,
|
|
companyFeatures,
|
|
podCountries: [],
|
|
podProducts: []
|
|
}
|
|
},
|
|
async onLoad() {
|
|
await this.loadPodCountries()
|
|
await this.loadPodProducts('')
|
|
},
|
|
methods: {
|
|
async loadPodCountries() {
|
|
try {
|
|
const res = await getCountries()
|
|
const data = (res.data && res.data.data) || []
|
|
const countries = [{ id: '', name: '全部' }]
|
|
data.forEach((c) => {
|
|
countries.push({ id: c.id, name: c.countryName })
|
|
})
|
|
this.podCountries = countries
|
|
} catch (err) {
|
|
console.error('[loadPodCountries Error]', err)
|
|
}
|
|
},
|
|
|
|
async loadPodProducts(countryId) {
|
|
try {
|
|
const params = { page: 1, pageSize: 4 }
|
|
if (countryId) {
|
|
params.countryId = countryId
|
|
}
|
|
const res = await getGoods(params)
|
|
const data = (res.data && res.data.data) || { items: [] }
|
|
const items = (data.items || []).slice(0, 4)
|
|
this.podProducts = items.map((item) => ({
|
|
id: item.goodId,
|
|
name: item.goodName,
|
|
image: item.image
|
|
}))
|
|
} catch (err) {
|
|
console.error('[loadPodProducts Error]', err)
|
|
this.podProducts = []
|
|
}
|
|
},
|
|
|
|
async onPodCountryChange(id) {
|
|
await this.loadPodProducts(id)
|
|
},
|
|
|
|
onGoProducts() {
|
|
uni.switchTab({
|
|
url: '/pages/products/products'
|
|
})
|
|
},
|
|
onGoDetail(item) {
|
|
uni.navigateTo({
|
|
url: '/pages/product-detail/product-detail?id=' + item.id
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.index-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|