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