Skip to content

C
CFFP-HB
Commit 2018f670 by kyle
Options

订单确认

parent 331205cf
Showing with 183 additions and 15 deletions
App.vue
...@@ -44,4 +44,7 @@ ...@@ -44,4 +44,7 @@
.uni-popup .uni-popup__wrapper{ .uni-popup .uni-popup__wrapper{
margin: 30rpx!important; margin: 30rpx!important;
} }
.richTextContent img{
width: 100% !important;
}
</style> </style>
common/common.ts
...@@ -32,4 +32,5 @@ export default { ...@@ -32,4 +32,5 @@ export default {
} }
}); });
}, },
} }
\ No newline at end of file
pages/certifyDetail/certifyDetail.vue
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<!-- 报名按钮区域 --> <!-- 报名按钮区域 -->
<view class="signBtnContent"> <view class="signBtnContent">
<view class="consultBtn">咨询客服</view> <view class="consultBtn">咨询客服</view>
<view class="signBtn">立即报名</view> <view class="signBtn" @click="registerNow()">立即报名</view>
</view> </view>
</view> </view>
...@@ -106,6 +106,11 @@ ...@@ -106,6 +106,11 @@
this.certificateInfo = res['data']; this.certificateInfo = res['data'];
} }
}) })
},
registerNow(){
uni.navigateTo({
url: '/pages/orderConfirm/orderConfirm'
});
} }
} }
} }
......
pages/courseDetail/courseDetail.vue
...@@ -28,7 +28,22 @@ ...@@ -28,7 +28,22 @@
<view class="tabContent"> <view class="tabContent">
<!-- 课程介绍 --> <!-- 课程介绍 -->
<view class="courseIntroContent" v-if="tabType===1"> <view class="courseIntroContent" v-if="tabType===1">
<view v-html="courseInfo?.fileIntroduce"></view> <view v-html="courseInfo?.fileIntroduce" class="richTextContent"></view>
</view>
<!-- 相关课程列表 -->
<view class="relationCourseListsContent" v-if="tabType===2">
<view class="totalCourseCount">共{{relatedCoursesLists ? relatedCoursesLists.length : 0}}节</view>
<view class="courseItemContent" v-for="(item,index) in relatedCoursesLists" :key="item.fileId">
<view class="courseInfoContent">
<h4>{{index + 1}}.{{item.fileTitle}}</h4>
<view class="timeContent">
<view class="">00:00/{{secondsTransferPipe(Number(item.courseTotalTime))}}</view>
</view>
</view>
<view class="statusBtnContent">
试听
</view>
</view>
</view> </view>
<!-- 讲师介绍 --> <!-- 讲师介绍 -->
<view class="lecturerContent" v-if="tabType===3"> <view class="lecturerContent" v-if="tabType===3">
...@@ -46,10 +61,10 @@ ...@@ -46,10 +61,10 @@
<h4> <h4>
<text>讲师介绍</text> <text>讲师介绍</text>
</h4> </h4>
<view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText"></view> <view v-html="lecturerInfo?.lecturerIntroduce" class="lecturerText richTextContent"></view>
</view> </view>
<!-- 购买按钮 --> <!-- 购买按钮 -->
<view class="buyBox"> <view class="buyBox" @click="buy()">
<text>购买</text> <text>购买</text>
</view> </view>
</view> </view>
...@@ -59,6 +74,7 @@ ...@@ -59,6 +74,7 @@
<script> <script>
import api from "../../api/api"; import api from "../../api/api";
import dataHandling from "@/util/dataHandling";
export default { export default {
data() { data() {
return { return {
...@@ -78,7 +94,7 @@ ...@@ -78,7 +94,7 @@
} else if (type == 2) { } else if (type == 2) {
this.relatedCoursesList() this.relatedCoursesList()
} else { } else {
// this.filePathQuery(this.status, this.fileId) this.courseDetail()
} }
}, },
// 讲师信息查询 // 讲师信息查询
...@@ -109,16 +125,28 @@ ...@@ -109,16 +125,28 @@
}, },
// 相关课程查询 // 相关课程查询
relatedCoursesList(){ relatedCoursesList(){
api.relatedCoursesList({fileId:3937}).then(res=>{ api.relatedCoursesList({fileId:this.fileId}).then(res=>{
console.log('相关课程详情',res); console.log('相关课程详情',res);
if(res['success']){ if(res['success']){
this.relatedCoursesLists = res['data']['data']; this.relatedCoursesLists = res['data']['data'];
} }
}) })
},
// 秒转时分秒格式
secondsTransferPipe(value){
return dataHandling.secondsTransferPipe(value)
},
// 购买
buy(){
uni.navigateTo({
url:`/pages/orderConfirm/orderConfirm?fileId=${this.fileId}`
})
} }
}, },
mounted(){ mounted(){
this.switchTab(this.tabType) this.switchTab(1)
}, },
onLoad(option){ onLoad(option){
this.fileId = option.fileId; this.fileId = option.fileId;
...@@ -217,12 +245,44 @@ ...@@ -217,12 +245,44 @@
white-space: pre-wrap; white-space: pre-wrap;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
p{
width: auto !important;
}
} }
} }
.courseIntroContent,.relationCourseListsContent{
padding: 0 28rpx;
background-color: #fff;
white-space: pre-wrap;
width: 100%;
box-sizing: border-box;
}
.relationCourseListsContent{
.totalCourseCount{
color: #20269B;
font-size: 1rem;
padding: 0.1875rem 0;
border: 1px solid #fbfbfb;
border-left: none;
border-right: none;
}
.courseItemContent{
padding: 16rpx 0;
border-bottom: 1px solid #fbfbfb;
display: flex;
align-items: center;
justify-content: space-between;
.courseInfoContent{
h4{
color: #666;
}
.timeContent{
color: #999;
padding-left: 28rpx;
}
}
}
}
.buyBox{ .buyBox{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
......
pages/orderConfirm/orderConfirm.vue
<template> <template>
<view> <view class="container">
<view class="courseInfoContent">
<view class="thumbnailBox">
<img :src="courseInfoItem.displayImage" alt="">
</view>
<view class="courseDetailBox">
<h4>{{courseInfoItem.fileTitle}}</h4>
<view class="summaryBox">
<text>{{courseInfoItem.fileSynopsis}}</text>
</view>
<view class="dataBox">
<strong>￥{{courseInfoItem.coursePrice}}</strong>
<text>{{courseInfoItem.salesNumber}}人购买</text>
</view>
<view class="tagListBox">
<view class="tagItem">{{courseInfoItem.fileLecturerName}}</view>
<view class="tagItem">{{courseInfoItem.fileLecturerRanks}}</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import api from "@/api/api";
export default { export default {
data() { data() {
return { return {
courseInfoItem:{},
fileId:null
} }
}, },
methods: { methods: {
// 课程详情页面
courseDetail(){
api.courseDetail({fileId:this.fileId}).then(res=>{
console.log('课程详情',res);
if(res['success']){
this.courseInfoItem = res['data']['data'];
}
})
},
},
onLoad(option){
console.log(option)
this.fileId = option.fileId;
},
mounted() {
this.courseDetail();
} }
} }
</script> </script>
<style> <style lang="scss">
.courseInfoContent{
display: flex;
align-items: center;
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 10rpx;
padding: 10rpx;
.thumbnailBox{
width: 200rpx;
height: 200rpx;
background-color: #888;
margin-right: 26rpx;
img{
max-width: 100%;
height: auto;
}
}
.courseDetailBox{
width: 100%;
color: #333;
h4{
font-size: 32rpx;
}
.summaryBox{
font-size: 24rpx;
margin: 10rpx 0;
text{
margin-right: 20rpx;
}
}
.dataBox{
strong{
color: #F15A1F;
font-size: 30rpx;
margin-right: 20rpx;
}
text{
font-size: 28rpx;
}
}
.tagListBox{
display: flex;
.tagItem{
color: #20279B;
font-size: 28rpx;
border-radius: 20rpx;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
padding: 10rpx 18rpx;
border: 1px solid #20279B;
margin-right: 20rpx;
}
}
}
}
</style> </style>
util/dataHandling.ts
...@@ -24,5 +24,12 @@ export default{ ...@@ -24,5 +24,12 @@ export default{
return intPartFormat + '.' + floatPart return intPartFormat + '.' + floatPart
} }
return intPartFormat + floatPart return intPartFormat + floatPart
},
// 秒转换成时分秒
secondsTransferPipe(value:number){
const h = Math.floor(value / 3600) > 0 ? Math.floor(value / 3600) : '00';
const m = Math.floor(value % 3600 / 60) > 0 ? Math.floor(value % 3600 / 60) : '00';
const s = Math.floor(value % 60) > 0 ? Math.floor(value % 60) : '00';
return h + ':' + m + ':' + s;
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment