无终街支付小程序,内容建设
This commit is contained in:
Seven Tsui
parent
e5ef46734b
commit
7c7b5e54ee
@ -24,11 +24,18 @@
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "pages/index/index",
|
||||
"pathName": "pages/index/index",
|
||||
"name": "pages/courseIndex/index",
|
||||
"pathName": "pages/courseIndex/index",
|
||||
"query": "",
|
||||
"scene": null,
|
||||
"launchMode": "default"
|
||||
},
|
||||
{
|
||||
"name": "pages/index/index",
|
||||
"pathName": "pages/index/index",
|
||||
"query": "",
|
||||
"launchMode": "default",
|
||||
"scene": null
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
// eslint-disable-next-line
|
||||
export default defineAppConfig({
|
||||
pages: [
|
||||
'pages/index/index'
|
||||
'pages/courseIndex/index',
|
||||
'pages/courseDetail/index',
|
||||
'pages/index/index',
|
||||
],
|
||||
window: {
|
||||
backgroundTextStyle: 'light',
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { useLaunch } from '@tarojs/taro';
|
||||
import { View } from '@tarojs/components';
|
||||
|
||||
import './app.less'
|
||||
function App({ children }) {
|
||||
useLaunch(async () => {
|
||||
});
|
||||
// children 是将要会渲染的页面
|
||||
return <View>{children}
|
||||
</View>
|
||||
return children
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
src/images/common/index1.png
Normal file
BIN
src/images/common/index1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
src/images/index2.png
Normal file
BIN
src/images/index2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/images/index3.png
Normal file
BIN
src/images/index3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
4
src/pages/courseDetail/index.config.js
Normal file
4
src/pages/courseDetail/index.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '无终街'
|
||||
})
|
||||
130
src/pages/courseDetail/index.jsx
Normal file
130
src/pages/courseDetail/index.jsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { useState, useEffect} from 'react'
|
||||
import { View } 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 getDetailClass=()=>{
|
||||
const {params:{ id}} = pageRouter
|
||||
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
|
||||
)
|
||||
}
|
||||
124
src/pages/courseDetail/index.less
Normal file
124
src/pages/courseDetail/index.less
Normal file
@ -0,0 +1,124 @@
|
||||
.learn-detail{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.images{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.big_mark{
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
background-color:rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
top:0;left: 0;
|
||||
}
|
||||
.img{
|
||||
width: 100%;
|
||||
}
|
||||
.context{
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 30rpx;
|
||||
color:#fff;
|
||||
font-size: 26.5rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
.img_right{
|
||||
width: 50rpx;
|
||||
margin-right: 40rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.img_top{
|
||||
width: 65rpx;
|
||||
margin-right: 30rpx;
|
||||
height: 15rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 40rpx;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
bottom: 85rpx;
|
||||
color:#fff;
|
||||
z-index: 10;
|
||||
}
|
||||
.class_title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
font-size: 35rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
}
|
||||
.class_mu{
|
||||
position: absolute;
|
||||
width: 34rpx;
|
||||
border-radius: 6rpx;
|
||||
height: 6rpx;
|
||||
background:linear-gradient(270deg, #FD5B2A 0%, #FF1504 100%);
|
||||
top:48rpx;
|
||||
}
|
||||
.class_left{
|
||||
left: 32.5%;
|
||||
}
|
||||
.class_right{
|
||||
right: 32.5%;
|
||||
}
|
||||
.class_list{
|
||||
width: 100%;
|
||||
}
|
||||
.zhang_title{
|
||||
width: 100%;
|
||||
}
|
||||
.zhang{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
line-height: 105rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 26rpx;
|
||||
height: 105rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.zhang :first-child{
|
||||
padding-left: 30rpx;
|
||||
color:#303030;
|
||||
flex: 1;
|
||||
margin-right:20rpx ;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.zhang_detail{
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
height: auto;
|
||||
border-bottom: 0.5rpx solid #E8E8E8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.zhang_main{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #F7F7F7;
|
||||
}
|
||||
.text{
|
||||
width: 600rpx;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 28rpx;
|
||||
padding-left: 33rpx;
|
||||
color: #303030;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
/* display: flex; */
|
||||
}
|
||||
4
src/pages/courseIndex/index.config.js
Normal file
4
src/pages/courseIndex/index.config.js
Normal file
@ -0,0 +1,4 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '无终街'
|
||||
})
|
||||
126
src/pages/courseIndex/index.jsx
Normal file
126
src/pages/courseIndex/index.jsx
Normal file
@ -0,0 +1,126 @@
|
||||
import { useState, useEffect} from 'react'
|
||||
import { View, Button,Text } from '@tarojs/components'
|
||||
import Taro, { useRouter } from '@tarojs/taro';
|
||||
import {requestWeixinPay} from '../../utils/util'
|
||||
import {getPrepayParams} from "../../api/home";
|
||||
import './index.less'
|
||||
|
||||
export default function Index () {
|
||||
const pageRouter = useRouter() // { path: '', params: { ... } }
|
||||
const [paySuccess, setPaySuccess] = useState(false);
|
||||
const courseList = [
|
||||
{
|
||||
"id": "1",
|
||||
"content": "价值挖掘：精选楼市核心资讯，快速获取实用信息\n实战教学：学会优质房源筛选方法，构建个人“房产投资舰队”\n思维提升：持续指导，借助专家视角洞察房地产市场",
|
||||
"title": "购房必备技巧指南（上篇）",
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"content": "市场分析：深度解读楼市趋势，把握最佳入市时机\n选房策略：掌握价值洼地识别技巧，打造高收益房产组合\n风险管控：学会规避购房陷阱，保障资产安全增值",
|
||||
"title": "购房必备技巧指南（下篇）",
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"content": "香港大学推荐50本必读书籍，学会用无伤害方式解决人际冲突",
|
||||
"title": "非暴力沟通｜化解矛盾与情绪管理的秘诀",
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"content": "每日10分钟，快速学会沟通表达技巧，轻松扩大社交圈",
|
||||
"title": "心理学实践｜克服社交焦虑，培养自信社交能力",
|
||||
}
|
||||
]
|
||||
useEffect(()=>{
|
||||
setPaySuccess(false)
|
||||
const {params:{ id}} = pageRouter
|
||||
if(id){ // url有订单ID才去拉起支付
|
||||
initLogin()
|
||||
}
|
||||
},[])
|
||||
|
||||
// 开始获取code去拉起支付
|
||||
const initLogin = () => {
|
||||
Taro.login({
|
||||
force: true,
|
||||
success: async (res) => {
|
||||
if(res.errMsg == 'login:ok'){
|
||||
getPayParams(res.code)
|
||||
} else {
|
||||
Taro.showToast({
|
||||
icon: 'error',
|
||||
title: '获取code登录失败',
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err)=>{
|
||||
Taro.showToast({
|
||||
icon: 'error',
|
||||
title: '获取code登录失败',
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const getPayParams =(code)=>{
|
||||
const {params:{ id}} = pageRouter
|
||||
const params = {
|
||||
orderId: id,
|
||||
payType: "WE_CHAT_MINI_APP",
|
||||
wxLoginCode: code,
|
||||
}
|
||||
getPrepayParams(params).then(res => {
|
||||
const {wxPrePayParamInfo} = res.data || {}
|
||||
if(wxPrePayParamInfo){
|
||||
requestWeixinPay(wxPrePayParamInfo).then(()=>{
|
||||
setPaySuccess(true)
|
||||
}).catch((err)=>{
|
||||
Taro.showToast({
|
||||
icon: 'error',
|
||||
title: `${err}` || '支付失败',
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const navToDetailPage =(id)=>{ // 跳转到详情页
|
||||
Taro.navigateTo({
|
||||
url: `/pages/courseDetail/index?id=${id}`
|
||||
})
|
||||
}
|
||||
const renderIndexCourseList = ()=>{
|
||||
return courseList.map((item,index)=>{
|
||||
return(
|
||||
<View className="product-card" onClick={()=>{
|
||||
navToDetailPage(item.id)
|
||||
}} key={item.id}>
|
||||
<View className="images">
|
||||
<image mode="aspectFit" src={require(`../../images/index${item.id}.png`)}/>
|
||||
</View>
|
||||
<View className="context">
|
||||
<View className="title_top">{item.title}</View>
|
||||
<View className="con_center">{item.content}</View>
|
||||
<Text className="price">免费</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}
|
||||
return (
|
||||
<View class="main">
|
||||
{
|
||||
renderIndexCourseList()
|
||||
}
|
||||
<view className="coming">更多课程敬请期待~</view>
|
||||
{paySuccess ?
|
||||
<View class="success-container">
|
||||
<View class="success-info">恭喜您支付成功!</View>
|
||||
<Button class="btn" type="primary" openType='launchApp' appParameter="paysuccess">返回APP</Button>
|
||||
</View>
|
||||
:null
|
||||
}
|
||||
</View>
|
||||
|
||||
)
|
||||
}
|
||||
76
src/pages/courseIndex/index.less
Normal file
76
src/pages/courseIndex/index.less
Normal file
@ -0,0 +1,76 @@
|
||||
.main {
|
||||
width: 94%;
|
||||
margin-left: 3%;
|
||||
margin-top: 30rpx;
|
||||
height: auto;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.09);
|
||||
border-radius: 15rpx;
|
||||
|
||||
.product-card {
|
||||
width: 100%;
|
||||
height: 220rpx;
|
||||
display: flex;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom: 35rpx;
|
||||
|
||||
.images {
|
||||
width: 225rpx;
|
||||
height: 100%;
|
||||
margin-left: 25rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.context {
|
||||
margin-left: 45rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.title_top {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 34rpx;
|
||||
color: #303030;
|
||||
font-weight: bold;
|
||||
line-height: 66rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 360rpx;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.con_center {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 27.5rpx;
|
||||
color: #606060;
|
||||
line-height: 45rpx;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
width: 360;
|
||||
margin-right: 50rpx;
|
||||
margin-bottom: 11.5rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 36rpx;
|
||||
color: rgb(240, 30, 30);
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.coming{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user