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