cuiyouliang/pay-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

无终街支付小程序,详情页增加点击交互

Browse Source
This commit is contained in:
Seven Tsui 2025-09-16 16:25:49 +08:00
parent 7c7b5e54ee
commit 2dbcba8144
2 changed files with 184 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
src/pages/courseDetail/index.jsx
View File

@ -1,130 +1,161 @@
import { useState, useEffect} from 'react' import { useState, useEffect} from 'react'
import { View } from '@tarojs/components' import { View, Text } from '@tarojs/components'
import Taro, { useRouter } from '@tarojs/taro'; import Taro, { useRouter } from '@tarojs/taro';
import './index.less' import './index.less'
export default function Index () { export default function Index () {
const pageRouter = useRouter() const pageRouter = useRouter()
const [currentDetail, setCurrentDetail] = useState(null); const [currentDetail, setCurrentDetail] = useState(null);
const DetailList = [ const [expandedSections, setExpandedSections] = useState({});
{
"id": "1", const DetailList = [
"content": "价值挖掘：精选楼市核心资讯，快速获取实用信息\n实战教学：学会优质房源筛选方法，构建个人“房产投资舰队”\n思维提升：持续指导，借助专家视角洞察房地产市场", {
"title": "购房必备技巧指南（上篇）", "id": "1",
"summary": "打好基础，解读房产背后的隐藏逻辑", "content": "价值挖掘：精选楼市核心资讯，快速获取实用信息\n实战教学：学会优质房源筛选方法，构建个人思维提升：持续指导，借助专家视角洞察房地产市场",
"chapterList": [ "title": "购房必备技巧指南（上篇）",
{ "summary": "打好基础，解读房产背后的隐藏逻辑",
"sectionId": "1", "chapterList": [
"sectionName": "第1章：市场分析,深度解读楼市趋势，把握最佳入市时机" {
}, "sectionId": "1",
{ "sectionName": "第1章：市场分析,深度解读楼市趋势，把握最佳入市时机",
"sectionId": "2", "description": "本章将深入分析房地产市场的基本规律和周期性特征，教会您如何识别市场信号和趋势变化。您将学习使用关键经济指标和数据工具，解读政策对楼市的影响，掌握判断市场底部和顶部的实用方法，为投资决策提供科学依据。"
"sectionName": "第2章：选房策略,掌握价值洼地识别技巧，打造高收益" },
}, {
{ "sectionId": "2",
"sectionId": "3", "sectionName": "第2章：选房策略,掌握价值洼地识别技巧，打造高收益",
"sectionName": "第3章：风险管控,学会规避购房陷阱，保障资产安全增值" "description": "本章专注于房产选择的实战技巧，从区位分析、配套设施、户型设计到开发商信誉等多个维度，系统讲解如何筛选优质房源。您将学会识别被低估的价值洼地，评估房产的增值潜力，并了解不同区域和类型房产的投资特点与风险。"
} },
] {
}, "sectionId": "3",
{ "sectionName": "第3章：风险管控,学会规避购房陷阱，保障资产安全增值",
"id": "2", "description": "本章重点讲解购房过程中的各种风险及防范措施，包括法律风险、财务风险和市场风险等。您将学习如何审查房产证件，规避合同陷阱，制定合理的资金计划，并建立风险预警机制，确保投资安全与稳健回报。"
"content": "市场分析：深度解读楼市趋势，把握最佳入市时机\n选房策略：掌握价值洼地识别技巧，打造高收益房产组合\n风险管控：学会规避购房陷阱，保障资产安全增值", }
"title": "购房必备技巧指南（下篇）", ]
"summary": "进阶技巧，实现房产投资效益最大化", },
"chapterList": [ {
{ "id": "2",
"sectionId": "1", "content": "市场分析：深度解读楼市趋势，把握最佳入市时机\n选房策略：掌握价值洼地识别技巧，打造高收益房产组合\n风险管控：学会规避购房陷阱，保障资产安全增值",
"sectionName": "第4章：融资与贷款,精通购房金融工具，优化资金使用效率" "title": "购房必备技巧指南（下篇）",
}, "summary": "进阶技巧，实现房产投资效益最大化",
{ "chapterList": [
"sectionId": "2", {
"sectionName": "第5章：谈判与交易,掌握高效谈判策略，完成最优价格签约" "sectionId": "1",
}, "sectionName": "第4章：融资与贷款,精通购房金融工具，优化资金使用效率",
{ "description": "本章深入讲解各类购房融资渠道和贷款产品的特点与适用场景，包括商业贷款、公积金贷款、组合贷款等。您将学习如何根据自身财务状况选择最优贷款方案，掌握利率谈判技巧，并了解提前还款、转按揭等资金优化策略。"
"sectionId": "3", },
"sectionName": "第6章：资产管理与优化,学习长期资产维护与增值策略，构建财富基石" {
} "sectionId": "2",
] "sectionName": "第5章：谈判与交易,掌握高效谈判策略，完成最优价格签约",
}, "description": "本章专注于房产交易中的谈判技巧与策略，从价格谈判、条款协商到交易流程把控。您将学习如何评估房产合理价值，制定谈判计划，运用有效的议价技巧，并了解交易过程中的关键环节和注意事项，确保达成最有利的交易条件。"
{ },
"id": "3", {
"content": "香港大学推荐50本必读书籍，学会用无伤害方式解决人际冲突", "sectionId": "3",
"title": "非暴力沟通｜化解矛盾与情绪管理的秘诀", "sectionName": "第6章：资产管理与优化,学习长期资产维护与增值策略，构建财富基石",
"summary": "非暴力沟通｜化解矛盾与情绪管理的秘诀", "description": "本章系统讲解房产购入后的资产管理方法，包括租赁管理、维护保养、价值提升和资产配置等。您将学习如何最大化租金收益，通过改造升级提升房产价值，并了解不同市场环境下的持有策略和退出机制，实现资产的长期稳健增值。"
"chapterList": [ }
{ ]
"sectionId": "1", },
"sectionName": "第1章：认识非暴力沟通,理解核心四要素，转变沟通思维方式" {
}, "id": "3",
{ "content": "香港大学推荐50本必读书籍，学会用无伤害方式解决人际冲突",
"sectionId": "2", "title": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
"sectionName": "第2章：倾听与表达,学会深度倾听与诚实表达，建立真诚连接" "summary": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
}, "chapterList": [
{ {
"sectionId": "3", "sectionId": "1",
"sectionName": "第3章：化解冲突与愤怒,运用NVC模型管理情绪，创造性解决矛盾" "sectionName": "第1章：认识非暴力沟通,理解核心四要素，转变沟通思维方式",
} "description": "本章将系统介绍非暴力沟通(NVC)的起源、哲学基础和核心四要素：观察、感受、需要和请求。您将学习如何区分观察与评价，识别和表达真实感受，连接深层需要，并提出明确请求，从而建立更加真诚有效的人际沟通模式。"
] },
}, {
{ "sectionId": "2",
"id": "4", "sectionName": "第2章：倾听与表达,学会深度倾听与诚实表达，建立真诚连接",
"content": "每日10分钟，快速学会沟通表达技巧，轻松扩大社交圈", "description": "本章专注于非暴力沟通中的两大核心技能：深度倾听和诚实表达。您将学习如何放下评判全心倾听他人，听懂话语背后的情感和需要，同时学会以不伤害关系的方式表达自己的真实想法和感受，从而建立更深层次的人际连接。"
"title": "心理学实践｜克服社交焦虑，培养自信社交能力", },
"summary": "心理学实践｜克服社交焦虑，培养自信社交能力", {
"chapterList": [ "sectionId": "3",
{ "sectionName": "第3章：化解冲突与愤怒,运用NVC模型管理情绪，创造性解决矛盾",
"sectionId": "1", "description": "本章重点讲解如何运用非暴力沟通处理冲突和管理强烈情绪。您将学习愤怒的转化四步骤，掌握在冲突中保持冷静和同理心的方法，并了解如何寻找满足各方需要的创造性解决方案，将对抗转化为合作，构建和谐的人际关系。"
"sectionName": "第1章：认识社交焦虑,剖析焦虑根源，建立积极自我认知" }
}, ]
{ },
"sectionId": "2", {
"sectionName": "第2章：核心社交技巧,学习破冰、提问与共情，有效开启深度交流" "id": "4",
}, "content": "每日10分钟，快速学会沟通表达技巧，轻松扩大社交圈",
{ "title": "心理学实践｜克服社交焦虑，培养自信社交能力",
"sectionId": "3", "summary": "心理学实践｜克服社交焦虑，培养自信社交能力",
"sectionName": "第3章：构建自信与圈子,实践场景模拟，逐步建立稳定社交网络" "chapterList": [
} {
] "sectionId": "1",
} "sectionName": "第1章：认识社交焦虑,剖析焦虑根源，建立积极自我认知",
] "description": "本章从心理学角度深入分析社交焦虑的成因和表现，帮助您理解焦虑背后的认知模式和情绪机制。您将学习识别自动负性思维，挑战不合理信念，并通过认知重构技术建立更加积极健康的自我认知，为克服社交焦虑奠定基础。"
useEffect(()=>{ },
getDetailClass() {
},[]) "sectionId": "2",
"sectionName": "第2章：核心社交技巧,学习破冰、提问与共情，有效开启深度交流",
"description": "本章系统讲解社交场景中的实用技巧，包括破冰开场、有效提问、积极倾听和共情回应等。您将学习如何自然开启对话，保持话题流畅，展现真诚兴趣，并运用身体语言和语音语调增强沟通效果，提升社交互动的质量和深度。"
},
{
"sectionId": "3",
"sectionName": "第3章：构建自信与圈子,实践场景模拟，逐步建立稳定社交网络",
"description": "本章专注于社交自信的培养和社交圈的拓展，通过渐进式暴露和行为实验帮助您逐步克服社交恐惧。您将学习设定合理的社交目标，进行场景模拟练习，并掌握维护和发展社交关系的策略，最终建立稳定而有意义的社交网络。"
}
]
}
]
useEffect(()=>{
getDetailClass()
},[])
const getDetailClass=()=>{ const getDetailClass=()=>{
const {params:{ id}} = pageRouter const {params:{ id}} = pageRouter
const current = DetailList.find(item=>{ const current = DetailList.find(item=>{
return item.id == id return item.id == id
}) })
setCurrentDetail(current) setCurrentDetail(current)
} }
return (
currentDetail?
<View className="learn-detail">
<View className="images">
<image className="img" src={require(`../../images/index${currentDetail.id}.png`)}/>
<View className="title">{currentDetail.title}</View>
<View className="context">{currentDetail.summary}</View>
<View className="big_mark"></View>
</View>
<view className="class_title">课程目录 <view className="class_left class_mu"></view>
<View className="class_right class_mu"></View>
</view>
{
currentDetail.chapterList.map(item=>{
return (
<View className="class_list">
<View className="zhang_title">
<View className="zhang">
<text>{item.sectionName}</text>
</View>
</View>
</View>
)
})
}
</View>:null const toggleSection = (sectionId) => {
setExpandedSections(prev => ({
...prev,
[sectionId]: !prev[sectionId]
}));
}
return (
currentDetail ?
<View className="learn-detail">
<View className="images">
<image className="img" src={require(`../../images/index${currentDetail.id}.png`)}/>
<View className="title">{currentDetail.title}</View>
<View className="context">{currentDetail.summary}</View>
<View className="big_mark"></View>
</View>
<view className="class_title">课程目录
<view className="class_left class_mu"></view>
<View className="class_right class_mu"></View>
</view>
{
currentDetail.chapterList.map(item=>{
return (
<View key={item.sectionId} className="class_list" onClick={() => toggleSection(item.sectionId)}>
<View className="zhang_title">
<View className="zhang">
<text>{item.sectionName}</text>
</View>
</View>
{expandedSections[item.sectionId] && (
<View className="description-content">
<Text className="description-text">{item.description}</Text>
</View>
)}
</View>
)
})
}
</View> : null
) )
} }

35
src/pages/courseDetail/index.less
View File

@ -122,3 +122,38 @@
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
/* display: flex; */ /* display: flex; */
} }
.learn-detail {
.class_list {
position: relative;
margin-bottom: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
.zhang_title {
.zhang {
font-size: 16px;
font-weight: bold;
color: #333;
}
}
.description-content {
margin-top: 15px;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #1890ff;
.description-text {
font-size: 14px;
line-height: 1.6;
color: #666;
}
}
}
.class_list:active {
background-color: #f5f5f5;
}
}