1054425342@qq.com
2 months ago
3 changed files with 367 additions and 321 deletions
@ -1,240 +1,269 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
<headerVue @change="changeAddress" :address="addressInfo" fixed isLocation></headerVue> |
|||
<view class="bg"> |
|||
<headerVue |
|||
@change="changeAddress" |
|||
:address="addressInfo" |
|||
fixed |
|||
isLocation |
|||
></headerVue> |
|||
|
|||
<!-- 灵动岛组件 --> |
|||
<!-- 灵动岛组件 - 自包含，无需传递参数 --> |
|||
<DynamicIsland ref="dynamicIsland" :page-id="'index_page'" @toggle="handleIslandToggle" |
|||
@action="handleIslandAction" /> |
|||
<!-- 灵动岛组件 --> |
|||
<!-- 灵动岛组件 - 自包含，无需传递参数 --> |
|||
<DynamicIsland |
|||
ref="dynamicIsland" |
|||
:page-id="'index_page'" |
|||
@toggle="handleIslandToggle" |
|||
@action="handleIslandAction" |
|||
/> |
|||
|
|||
<view class="content" @click="handleContentClick"> |
|||
<!-- 权益商品区域 --> |
|||
<ProductSection v-if="productList.length" title="权益商品" :productList="productList" |
|||
moreUrl="/subPackages/equityGoods/index" detailUrlPrefix="/subPackages/equityGoods/detail" |
|||
@like-toggle="handleLikeToggle" /> |
|||
<ProductSection titleBgColor="#92FF8F" aiTagTextColor="#08FB05" aiTagBorderColor="#6EAA3D" title="有感商品" |
|||
:productList="productListFeeling" moreUrl="/pages/index/sensoryStore" |
|||
detailUrlPrefix="/subPackages/techan/detail" @like-toggle="handleLikeToggle" isFeel /> |
|||
<view class="tab-bar-placeholder"></view> |
|||
</view> |
|||
<view class="content" @click="handleContentClick"> |
|||
<!-- 权益商品区域 --> |
|||
<ProductSection |
|||
v-show="productList.length" |
|||
title="权益商品" |
|||
:productList="productList" |
|||
moreUrl="/subPackages/equityGoods/index" |
|||
detailUrlPrefix="/subPackages/equityGoods/detail" |
|||
@like-toggle="handleLikeToggle" |
|||
/> |
|||
|
|||
<CustomTabBar :currentTab="0" /> |
|||
<MusicControl /> |
|||
</view> |
|||
<ProductSection |
|||
titleBgColor="#92FF8F" |
|||
aiTagTextColor="#08FB05" |
|||
aiTagBorderColor="#6EAA3D" |
|||
title="有感商品" |
|||
:productList="productListFeeling" |
|||
moreUrl="/pages/index/sensoryStore" |
|||
detailUrlPrefix="/subPackages/techan/detail" |
|||
@like-toggle="handleLikeToggle" |
|||
isFeel |
|||
/> |
|||
<view class="tab-bar-placeholder"></view> |
|||
</view> |
|||
|
|||
<CustomTabBar :currentTab="0" /> |
|||
<MusicControl /> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import MusicControl from "@/components/MusicControl.vue"; |
|||
import headerVue from "@/components/header.vue"; |
|||
import CustomTabBar from "@/components/CustomTabBar.vue"; |
|||
import DynamicIsland from "@/components/DynamicIsland.vue"; |
|||
import ProductSection from "@/components/ProductSection.vue"; |
|||
export default { |
|||
components: { |
|||
CustomTabBar, |
|||
headerVue, |
|||
MusicControl, |
|||
DynamicIsland, |
|||
ProductSection, |
|||
}, |
|||
computed: { |
|||
// 其他计算属性可以在这里添加 |
|||
}, |
|||
data() { |
|||
return { |
|||
topBanner: [], |
|||
productList: [ |
|||
// { |
|||
// id: 1, |
|||
// image: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/58aed304917c9d60761f833c4f8dceb8.png", |
|||
// avatar: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
|||
// aiName: "文徵明", |
|||
// title: "世界花园 | 研学之旅", |
|||
// price: "588.00", |
|||
// isLiked: true, |
|||
// }, |
|||
// { |
|||
// id: 2, |
|||
// image: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/00e8704b23a0c9fd57023527146211b9.png", |
|||
// avatar: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png", |
|||
// aiName: "苏青壳", |
|||
// title: "生命的扶持 | 风景之旅", |
|||
// price: "398.00", |
|||
// isLiked: false, |
|||
// }, |
|||
], |
|||
productListFeeling: [{ |
|||
id: 34, |
|||
image: "https://epic.js-dyyj.com/uploads/20250728/22e319f3feb1b63fbb539d425c51fe70.png", |
|||
title: "OUT OF SPACE 东方线香", |
|||
price: "138.00", |
|||
isLiked: true, |
|||
isShop: true |
|||
}, |
|||
{ |
|||
id: 32, |
|||
image: "https://epic.js-dyyj.com/uploads/20250728/cc9907153c887a6428283a407928db9a.png", |
|||
title: "AI-Agent智能玩具", |
|||
price: "398.00", |
|||
isLiked: false, |
|||
}, |
|||
], |
|||
selectedText: '', |
|||
addressInfo: null, |
|||
}; |
|||
}, |
|||
onLoad() {}, |
|||
async onReady() { |
|||
let res = await this.$main.getLocationInfo() |
|||
console.log(res) |
|||
this.addressInfo = res |
|||
this.selectedText = res && res.city |
|||
uni.setStorageSync('SYS_ADDRESS_INFO', JSON.stringify(res)) |
|||
this.getList(); |
|||
this.geBenefitPackaget() |
|||
|
|||
}, |
|||
onShow() { |
|||
this.browse_record({ |
|||
type: "page", |
|||
title: "首页" |
|||
}); |
|||
this.$nextTick(() => { |
|||
this.$refs.dynamicIsland.getUserInfo(); |
|||
}) |
|||
}, |
|||
onPageScroll(e) { |
|||
// 只触发带页面ID的事件，避免不同页面间的状态冲突 |
|||
uni.$emit("pageScroll_index_page", e.scrollTop); |
|||
}, |
|||
onReachBottom() {}, |
|||
methods: { |
|||
changeAddress(res){ |
|||
this.addressInfo = res |
|||
uni.setStorageSync('SYS_ADDRESS_INFO', JSON.stringify(res)) |
|||
this.geBenefitPackaget() |
|||
}, |
|||
gotoUrlNew(item, index) { |
|||
if (index == 0) { |
|||
uni.switchTab({ |
|||
url: "/pages/index/readingBody", |
|||
}); |
|||
} else if (index == 1) { |
|||
uni.switchTab({ |
|||
url: "/pages/index/intelligentAgent", |
|||
}); |
|||
} |
|||
}, |
|||
viewDetail(item) { |
|||
if (item.url) { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/webPage/webPage?url=" + encodeURIComponent(item.url), |
|||
}); |
|||
return; |
|||
} |
|||
uni.navigateTo({ |
|||
url: "/subPackages/letter/detail?id=" + item.id, |
|||
}); |
|||
}, |
|||
getList() { |
|||
// 大轮播 |
|||
this.Post({ |
|||
type_id: 3, |
|||
position: 17, |
|||
}, |
|||
"/api/adv/getAdv" |
|||
).then((res) => { |
|||
if (res.data) { |
|||
this.topBanner = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
geBenefitPackaget() { |
|||
this.Post({ |
|||
cityId: this.addressInfo.cityId |
|||
}, |
|||
"/framework/index/benefitPackage/list", |
|||
'DES' |
|||
).then((res) => { |
|||
if (res.data) { |
|||
this.productList = res.data.map(item => { |
|||
return { |
|||
...item, |
|||
image: item.mainUrl, |
|||
id: item.benefitPackageId, |
|||
avatar: "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
|||
aiName: "文徵明", |
|||
} |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
gotoVideo(item) { |
|||
uni.navigateTo({ |
|||
url: "/subPackages/video/video?item=" + |
|||
encodeURIComponent(JSON.stringify(item)), |
|||
}); |
|||
}, |
|||
import MusicControl from "@/components/MusicControl.vue"; |
|||
import headerVue from "@/components/header.vue"; |
|||
import CustomTabBar from "@/components/CustomTabBar.vue"; |
|||
import DynamicIsland from "@/components/DynamicIsland.vue"; |
|||
import ProductSection from "@/components/ProductSection.vue"; |
|||
export default { |
|||
components: { |
|||
CustomTabBar, |
|||
headerVue, |
|||
MusicControl, |
|||
DynamicIsland, |
|||
ProductSection, |
|||
}, |
|||
computed: { |
|||
// 其他计算属性可以在这里添加 |
|||
}, |
|||
data() { |
|||
return { |
|||
topBanner: [], |
|||
productList: [ |
|||
// { |
|||
// id: 1, |
|||
// image: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/58aed304917c9d60761f833c4f8dceb8.png", |
|||
// avatar: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
|||
// aiName: "文徵明", |
|||
// title: "世界花园 | 研学之旅", |
|||
// price: "588.00", |
|||
// isLiked: true, |
|||
// }, |
|||
// { |
|||
// id: 2, |
|||
// image: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/00e8704b23a0c9fd57023527146211b9.png", |
|||
// avatar: |
|||
// "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png", |
|||
// aiName: "苏青壳", |
|||
// title: "生命的扶持 | 风景之旅", |
|||
// price: "398.00", |
|||
// isLiked: false, |
|||
// }, |
|||
], |
|||
productListFeeling: [ |
|||
{ |
|||
id: 34, |
|||
image: |
|||
"https://epic.js-dyyj.com/uploads/20250728/22e319f3feb1b63fbb539d425c51fe70.png", |
|||
title: "OUT OF SPACE 东方线香", |
|||
price: "138.00", |
|||
isLiked: true, |
|||
isShop: true, |
|||
}, |
|||
{ |
|||
id: 32, |
|||
image: |
|||
"https://epic.js-dyyj.com/uploads/20250728/cc9907153c887a6428283a407928db9a.png", |
|||
title: "AI-Agent智能玩具", |
|||
price: "398.00", |
|||
isLiked: false, |
|||
}, |
|||
], |
|||
selectedText: "", |
|||
addressInfo: null, |
|||
isLoading: true, // 添加加载状态 |
|||
}; |
|||
}, |
|||
onLoad() {}, |
|||
async onReady() { |
|||
let res = await this.$main.getLocationInfo(); |
|||
console.log(res); |
|||
this.addressInfo = res; |
|||
this.selectedText = res && res.city; |
|||
uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res)); |
|||
this.getList(); |
|||
this.geBenefitPackaget(); |
|||
}, |
|||
onShow() { |
|||
this.browse_record({ |
|||
type: "page", |
|||
title: "首页", |
|||
}); |
|||
this.$nextTick(() => { |
|||
this.$refs.dynamicIsland.getUserInfo(); |
|||
}); |
|||
}, |
|||
onPageScroll(e) { |
|||
// 只触发带页面ID的事件，避免不同页面间的状态冲突 |
|||
uni.$emit("pageScroll_index_page", e.scrollTop); |
|||
}, |
|||
onReachBottom() {}, |
|||
methods: { |
|||
changeAddress(res) { |
|||
this.addressInfo = res; |
|||
uni.setStorageSync("SYS_ADDRESS_INFO", JSON.stringify(res)); |
|||
this.geBenefitPackaget(); |
|||
}, |
|||
gotoUrlNew(item, index) { |
|||
if (index == 0) { |
|||
uni.switchTab({ |
|||
url: "/pages/index/readingBody", |
|||
}); |
|||
} else if (index == 1) { |
|||
uni.switchTab({ |
|||
url: "/pages/index/intelligentAgent", |
|||
}); |
|||
} |
|||
}, |
|||
viewDetail(item) { |
|||
if (item.url) { |
|||
uni.navigateTo({ |
|||
url: |
|||
"/subPackages/webPage/webPage?url=" + encodeURIComponent(item.url), |
|||
}); |
|||
return; |
|||
} |
|||
uni.navigateTo({ |
|||
url: "/subPackages/letter/detail?id=" + item.id, |
|||
}); |
|||
}, |
|||
getList() { |
|||
// 大轮播 |
|||
this.Post( |
|||
{ |
|||
type_id: 3, |
|||
position: 17, |
|||
}, |
|||
"/api/adv/getAdv" |
|||
).then((res) => { |
|||
if (res.data) { |
|||
this.topBanner = res.data; |
|||
} |
|||
}); |
|||
}, |
|||
geBenefitPackaget() { |
|||
this.Post( |
|||
{ |
|||
cityId: this.addressInfo.cityId, |
|||
}, |
|||
"/framework/index/benefitPackage/list", |
|||
"DES" |
|||
).then((res) => { |
|||
if (res.data) { |
|||
this.productList = res.data.map((item) => { |
|||
return { |
|||
...item, |
|||
image: item.mainUrl, |
|||
id: item.benefitPackageId, |
|||
avatar: |
|||
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png", |
|||
aiName: "文徵明", |
|||
}; |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
gotoVideo(item) { |
|||
uni.navigateTo({ |
|||
url: |
|||
"/subPackages/video/video?item=" + |
|||
encodeURIComponent(JSON.stringify(item)), |
|||
}); |
|||
}, |
|||
|
|||
// 处理收藏状态切换 |
|||
handleLikeToggle({ |
|||
item, |
|||
index |
|||
}) { |
|||
this.productList[index] = item; |
|||
}, |
|||
// 处理收藏状态切换 |
|||
handleLikeToggle({ item, index }) { |
|||
this.productList[index] = item; |
|||
}, |
|||
|
|||
// 处理灵动岛点击切换 |
|||
handleIslandToggle(isExpanded) { |
|||
console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式"); |
|||
}, |
|||
// 处理灵动岛点击切换 |
|||
handleIslandToggle(isExpanded) { |
|||
console.log("灵动岛状态切换:", isExpanded ? "展开模式" : "紧凑模式"); |
|||
}, |
|||
|
|||
// 处理灵动岛操作按钮 |
|||
handleIslandAction() { |
|||
uni.showToast({ |
|||
title: "执行操作", |
|||
icon: "none", |
|||
}); |
|||
console.log("执行操作"); |
|||
}, |
|||
// 处理灵动岛操作按钮 |
|||
handleIslandAction() { |
|||
uni.showToast({ |
|||
title: "执行操作", |
|||
icon: "none", |
|||
}); |
|||
console.log("执行操作"); |
|||
}, |
|||
|
|||
// 处理内容区域点击 |
|||
handleContentClick() { |
|||
// 点击内容区域时收缩灵动岛 |
|||
if (this.$refs.dynamicIsland) { |
|||
this.$refs.dynamicIsland.collapseIsland(); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
// 处理内容区域点击 |
|||
handleContentClick() { |
|||
// 点击内容区域时收缩灵动岛 |
|||
if (this.$refs.dynamicIsland) { |
|||
this.$refs.dynamicIsland.collapseIsland(); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style> |
|||
page {} |
|||
page { |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.bg { |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
/* 页面样式 */ |
|||
/* 页面样式 */ |
|||
|
|||
.content { |
|||
height: calc(100vh - 123rpx); |
|||
width: 100%; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 20rpx; |
|||
} |
|||
.content { |
|||
height: 100%; |
|||
width: 100%; |
|||
padding: 0 20rpx; |
|||
box-sizing: border-box; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.tab-bar-placeholder { |
|||
height: 143rpx; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
.tab-bar-placeholder { |
|||
height: 143rpx; |
|||
width: 100%; |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue