zm/medicine_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

超v课程 添加购买

Browse Source
This commit is contained in:
@fawn-nine
2024-06-25 11:34:27 +08:00
parent 6dd47a5638
commit 0e28140768
6 changed files with 432 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/buyPup.vue
View File

@@ -143,7 +143,9 @@
font-size: 26rpx; font-size: 26rpx;
color: #333; color: #333;
margin-bottom: 10rpx; margin-bottom: 10rpx;
line-height: 80rpx; padding-top:20rpx ;
padding-bottom:20rpx ;
line-height:40rpx;
border-radius: 50rpx; border-radius: 50rpx;
border: 1px solid #eee; border: 1px solid #eee;
} }

1
pages/course/chapterDetail.vue
View File

@@ -324,6 +324,7 @@ export default {
this.options = options; this.options = options;
this.getCourseDescriptionData(); this.getCourseDescriptionData();
console.log(this.options,'this.options-------------')
// this.getUserInfo() // this.getUserInfo()
// this.getCateList() // this.getCateList()
}, },

158
pages/course/coursePrice.vue
View File

@@ -3,33 +3,66 @@
<!-- 公共组件-每个页面必须引入 --> <!-- 公共组件-每个页面必须引入 -->
<public-module></public-module> <public-module></public-module>
<z-nav-bar title="课程价格"></z-nav-bar> <z-nav-bar title="课程价格"></z-nav-bar>
<view class="addVip">
<u-alert
v-if=""
style="
position: fixed;
left: 0;
width: 100%;
z-index: 10;
"
:title="goBuyTitle"
type="warning"
:show-icon="true"
>
<template slot="rightSlot" slot-scope="slotProps">
<text class="saveBtn vipBtn flexbox buyBtn" style="color: #fff;">
开通VIP
</text>
<view> </view>
</template>
</u-alert>
</view>
<view class="container"> <view class="container">
<view class="" v-if="courseList.length > 0"> <view class="" v-if="courseList.length > 0">
<uni-collapse accordion> <uni-collapse accordion>
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title" <uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
:thumb="item.courseMedicine.icon"> :thumb="item.courseMedicine.icon">
<view class="content" v-if="item.courseList.length > 1"> <view class="content" v-if="item.courseList.length > 1">
<!-- <pre>{{item}}</pre> --> <view :class="['courseItemleve1',userMsg.vip != 0 ? 'isVip' :'']" v-for="(item1, index1) in item.courseList" :key="index1"
<view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1"> @click="onPageJump('/pages/course/courseDetail',item1.id)"
<view class="text courseItem flexbox"><u-icon name="pushpin" color="#2979ff" >
size="24"></u-icon><text>{{item1.title}}</text></view> <view class="vipSee" v-if="userMsg.vip != 0">
<text>VIP畅学权益生效中</text>
</view>
<view :class="['text','courseItem','flexbox']"><u-icon name="pushpin" color="#2979ff"
size="24"></u-icon><text>{{item1.title}}</text>
</view>
<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2"> <view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
<view :class="['priceItem', item2.isBuy == 1 ? 'isBuy' : '']">
<view :class="['priceItem', item2.isBuy == 1 && userMsg.vip == 0 ? 'isBuy' : '']" >
<text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1" <text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
style="font-weight: bold; margin-right: 10rpx;">【{{item2.title}}】</text> style="font-weight: bold; margin-right: 10rpx;">【{{item2.title}}】</text>
<view class="pbox flexbox"> <view class="pbox flexbox">
<text class="text">半年：￥{{item2.halfFee}} 元</text><text class="text" <text class="text">半年：￥{{item2.halfFee}} 元</text><text class="text"
style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text> style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text>
<text class="buybtns" @click.stop="goBuy(item2)" v-if="item2.isBuy == 0 && userMsg.vip == 0">立即购买</text>
</view> </view>
<i class="haveBuy" v-if="item2.isBuy == 1">已购买</i> <i class="haveBuy" v-if="item2.isBuy == 1 && userMsg.vip == 0">已购买</i>
</view> </view>
</view> </view>
<view class="buyBox" v-if="!item1.allBuy"> <!-- <view class="buyBox" v-if="!item1.allBuy">
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')"> <view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
<u-icon name="bag" color="#fff" size="24"></u-icon> <u-icon name="bag" color="#fff" size="24"></u-icon>
<text>立即购买</text> <text>立即购买</text>
</view> </view>
</view> </view> -->
</view> </view>
</view> </view>
</uni-collapse-item> </uni-collapse-item>
@@ -41,12 +74,14 @@
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' <u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle'
:iconStyle="iconStyle"></u-back-top> :iconStyle="iconStyle"></u-back-top>
<z-navigation></z-navigation> <z-navigation></z-navigation>
<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
<!-- <music-play :playData="playData"></music-play> --> <!-- <music-play :playData="playData"></music-play> -->
</view> </view>
</template> </template>
<script> <script>
// import musicPlay from '@/components/music.vue' // import musicPlay from '@/components/music.vue'
import buyPup from '@/components/buyPup.vue'
import $http from '@/config/requestConfig.js'; import $http from '@/config/requestConfig.js';
var clear; var clear;
import { import {
@@ -56,6 +91,7 @@
data() { data() {
return { return {
playData: {}, playData: {},
goBuyTitle : "购买VIP,即可免费观看吴门医述所有课程",
courseList: [], courseList: [],
status:0, status:0,
scrollTop: 0, scrollTop: 0,
@@ -67,6 +103,9 @@
fontWeight: 'bold', fontWeight: 'bold',
color: '#258feb', color: '#258feb',
}, },
proPriceList:[],
pricespop:false,
userMsg:{},
}; };
}, },
//第一次加载 //第一次加载
@@ -82,6 +121,7 @@
onShow() { onShow() {
// 隐藏原生的tabbar // 隐藏原生的tabbar
uni.hideTabBar(); uni.hideTabBar();
this.getUserInfo()
this.getCoursePriceList() this.getCoursePriceList()
}, },
onPageScroll(e) { onPageScroll(e) {
@@ -93,9 +133,94 @@
}, },
components: { components: {
// musicPlay // musicPlay
buyPup
}, },
//方法 //方法
methods: { methods: {
oprate(data){
console.log(data,'得到的内容')
if(data.name == 'buy'){
this.buy(data.item)
}
// else if(data.name == 'gouwuche'){
// this.addCart(data.item)
// }
},
buy(val){
var mynavData = JSON.stringify({
        goods: [
          {
            productImages: val.productImages,
            productId: val.productId,
            productName: val.productName,
            price: val.activityPrice && val.activityPrice != 0 ? val.activityPrice:val.price,
            goodsType: val.goodsType,
          },
        ],
        navTitle: this.options.navTitle,
        title: this.options.title,
        typeId: 0,
      }); // 这里转换成 字符串
      uni.navigateTo({
        url: `/pages/goods/order/index?data=${mynavData}`,
      });
},
onPageJump(path, id){
uni.navigateTo({
url:`${path}?id=${id}`
})
},
getUserInfo() {
// 用户详情
// if (this.userInfo.id != undefined) {
this.$http
.post('book/user/info/' + this.userInfo.id)
.then(res => {
this.userMsg = res.user
});
// }
},
closePup(e){
this.pricespop = false
},
goBuy(val){
console.log(val,'val')
$http.request({
url: "sociology/product/getProductListForCourse",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": val.id
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.productList.length > 0) {
this.proPriceList = res.productList
this.pricespop = true
// this.curProId = this.proPriceList[0].productId
} else {
this.proPriceList = []
uni.showToast({
title:'课程未绑定商品',
icon:'none'
})
}
}
}).catch(e => {
console.log(e, '获取商品列表报错')
uni.showToast({
title:'获取商品失败',
icon:'none'
})
});
},
getCoursePriceList() { getCoursePriceList() {
this.$http this.$http
.post('medical/home/getMedicalCoursePrice') .post('medical/home/getMedicalCoursePrice')
@@ -142,10 +267,27 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/style/mixin.scss'; @import '@/style/mixin.scss';
.isVip{position: relative; padding-top: 50rpx !important; border: 1px solid #6429db; box-sizing: border-box;}
.vipSee{
position: absolute; right:0; top:0;
font-size: 24rpx;
background-image: linear-gradient(90deg, #6429db 0%, #0075ed 100%);
// @include theme("btn_bg");
color: #fff; padding: 10rpx; border-radius: 50rpx 0 0 50rpx;
}
.flexbox { .flexbox {
display: flex; display: flex;
} }
.buybtns{
@include theme("btn_bg"); border-radius: 30rpx; color: #fff; font-size: 28rpx; padding: 0 10rpx; margin-left: 10rpx;
}
.addVip{
.saveBtn{
width: 150rpx;
}
}
.buyBox{ .buyBox{
.saveBtn{ margin: 0 auto;} .saveBtn{ margin: 0 auto;}
} }

16
pages/course/myCourse.vue
View File

@@ -110,14 +110,13 @@
<view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)"> <view class="txt555" @click="onPageJump('/pages/course/courseDetail',item.id)">
{{item.title}}-{{item.catalogueTitle}} {{item.title}}-{{item.catalogueTitle}}
</view> </view>
<view class="jianjie" v-html="item.content"> <view class="jianjie" v-html="item.content" style="margin-bottom: 10rpx;">
</view> </view>
<view class="btn_box" @click="xufei(item)" > <view class="btn_box" @click="xufei(item)" >
<text>续费课程</text> <text>续费课程</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<u-divider v-show="ExpiredCourseList.status == 2" text="已加载全部"></u-divider> <u-divider v-show="ExpiredCourseList.status == 2" text="已加载全部"></u-divider>
@@ -662,7 +661,7 @@
}) })
}, },
xufei(val){ xufei(val){
console.log('去续费,获取商品列表') // console.log('去续费,获取商品列表')
$http.request({ $http.request({
url: "sociology/product/getProductListForCourse", url: "sociology/product/getProductListForCourse",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档 method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
@@ -678,16 +677,25 @@
if (res.productList.length > 0) { if (res.productList.length > 0) {
this.proPriceList = res.productList this.proPriceList = res.productList
// this.curProId = this.proPriceList[0].productId // this.curProId = this.proPriceList[0].productId
this.pricespop = true
} else { } else {
this.proPriceList = [] this.proPriceList = []
uni.showToast({
title:'课程未绑定商品',
icon:'none'
})
} }
} }
}).catch(e => { }).catch(e => {
console.log(e, '获取商品列表报错') console.log(e, '获取商品列表报错')
uni.showToast({
title:'获取商品失败',
icon:'none'
})
}); });
this.pricespop = true
}, },
// 跳转 // 跳转

26
pages/course/myCourseLearn.vue
View File

@@ -39,14 +39,15 @@
<view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'"> <view class="endBox" v-if="librayList[curIndex].isBuy == 1 && userMsg.vip == '0'">
<view class="" > <view class="" >
<view class="flexbox" v-if="librayList[curIndex].startTime == null"> <view class="flexbox" v-if="librayList[curIndex].startTime == null">
<text >当前目录还未开始学习</text><uni-tag type="warning" text="去学习"></uni-tag> <text >当前目录还未开始学习</text>
<!-- <uni-tag type="warning" text="去学习"></uni-tag> -->
</view> </view>
<view class="flexbox" v-else> <view class="flexbox" v-else>
<text >课程观看有效期截止到：2025-06-14 00:00 </text><uni-tag type="primary" text="继续学习"></uni-tag> <text >课程观看有效期截止到：{{librayList[curIndex].endTime}} </text><uni-tag type="primary" text="继续学习"></uni-tag>
</view> </view>
</view> </view>
</view> </view>
<view class="item" v-for="(item, index) in courseList" :key="index" @click="chooseChapter(item, index)"> <view class="item" v-for="(item, index) in courseList" :key="index" @click="gotoDetail(item, index)">
<text>{{item.title}}</text> <text>{{item.title}}</text>
<uni-tag v-if="librayList[curIndex].isBuy == 1 && item.isLearned == 0" style="" :inverted="true" text="未学" <uni-tag v-if="librayList[curIndex].isBuy == 1 && item.isLearned == 0" style="" :inverted="true" text="未学"
size="mini" type="primary" /> size="mini" type="primary" />
@@ -193,6 +194,9 @@
this.getData(e.id) this.getData(e.id)
// this.getSayList() // this.getSayList()
}, },
onPullDownRefresh() {
uni.stopPullDownRefresh()
},
onPageScroll(e) { onPageScroll(e) {
this.scrollTop = e.scrollTop; this.scrollTop = e.scrollTop;
if (this.scrollTop > 100) { if (this.scrollTop > 100) {
@@ -235,7 +239,21 @@
}); });
// } // }
}, },
// 评论 gotoDetail(v, video, index) {
console.log("v at line 668:", v);
// if (
// this.cateList[this.currentCateIndex].isBuy == 1 ||
// v.isAudition == 1 ||
// this.vip.type != "0"
// ) {
uni.navigateTo({
// url: '../bookShop/commodityDetail?id=' + item.id
url: `/pages/course/chapterDetail?navTitle=${this.pageTitle}&title=${v.title}&id=${v.id}&conditions=${v.conditions}&videoId=${video.id}`,
});
// } else {
// this.$commonJS.showToast("请先购买课程");
// }
},
// 加载更多子评论 // 加载更多子评论
showMoreChildren(i,val){ showMoreChildren(i,val){
console.log('更多评论'); console.log('更多评论');

237
pages/course/vipCourse.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<view>
<!-- 公共组件-每个页面必须引入 -->
<public-module></public-module>
<z-nav-bar :title="pageTitle"></z-nav-bar>
<view class="learnBox box" >
<view class="newBox">
<view class="item flexbox" v-for="(item, index) in courseList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id, item.title)">
<!-- <view class="imgcontainer" :style="{backgroundImage:surl(item.image)}"> -->
<view class="imgcontainer">
<image :src="item.image" mode="aspectFit"></image>
</view>
<view class="buyItems">
<view class="txt555">
{{item.title}}
</view>
<view class="jianjie" v-html="item.content">
</view>
<!-- <view class="tag-view">
<uni-tag style="margin-right: 10rpx;" text="高级" type="primary" size="small" />
<uni-tag style="margin-right: 10rpx;" text="选修" size="small" type="success" />
</view> -->
<view class="btn_box">
<text>课程详情</text>
</view>
</view>
</view>
</view>
<u-divider v-show="status == 2" text="已加载全部"></u-divider>
<u-divider v-show="status == 3" text="暂无数据"></u-divider>
<u-divider v-show="status == 1" text="加载中..."></u-divider>
</view>
<public-module></public-module>
<z-navigation></z-navigation>
<music-play :playData="playData"></music-play>
</view>
</template>
<script>
import musicPlay from '@/components/music.vue'
import $http from '@/config/requestConfig.js';
var clear;
import {
mapState
} from 'vuex';
export default {
data() {
return {
playData: {},
tagId: null,
pageTitle: '',
courseList: [],
status:0, // 0 不显示, 1 加载中，2 加载全部完成，3 暂无数据
page:1,
flag:true, // 函数是否执行完
};
},
//第一次加载
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
this.tagId = e.id
this.pageTitle = e.title
console.log(e, '传入分类id')
this.getData();
},
onReachBottom() {
if(this.status != 2){
this.page ++
this.getData() }
console.log('触底加载',this.page)
},
computed: {
...mapState(['userInfo'])
},
//页面显示
onShow() {
// 隐藏原生的tabbar
uni.hideTabBar();
},
components: {
musicPlay
},
//方法
methods: {
// 跳转
onPageJump(url,thatId,title) {
uni.navigateTo({
url: `${url}?id=${thatId}&title=${title}`
});
},
getData() {
if(!this.flag){
console.log('正在执行，未完成')
return
}
this.status = 1
this.flag = false
$http.request({
url: "medical/home/getMarketCourseList",
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
data: {
"id": this.tagId,
"limit": 12,
"page": this.page
},
header: { //默认 无 说明：请求头
'Content-Type': 'application/json'
},
})
.then(res => {
if (res.code == 0) {
if (res.courseList.records.length > 0) {
var list = res.courseList.records
this.courseList = this.courseList.concat(list)
if(res.courseList.pages > this.page){
this.status = 0
}else{
this.status = 2
}
} else if(this.page > 1){
this.status = 2 // 加载完成
}else{
this.status = 3 // 暂无数据
}
console.log('status',this.status)
}
this.flag = true
}).catch(e => {
console.log(e,'数据报错')
});
}
},
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.flexbox{display: flex; }
.imgcontainer {
background-color: $imgBg;
}
.box {
background-color: #fff;
@include pleft_right(10px);
min-height: calc(100vh - 270rpx);
}
.newBox {
.item {
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 20rpx;
@include ptop_bottm(10px);
@include pleft_right(10px);
@include mshadow(10px, 1) .imgcontainer {
display: block;
width: 110rpx;
margin-right: 20rpx;
// background-size: cover;
// background-position: center;
height: 200rpx;
flex-grow: 1;
// @include ptop_bottm(10px);
overflow: hidden;
// @include pleft_right(10px);
image {
width: 100%;
height: 200rpx;
}
}
.btn_box{ text-align: right;
text{
border-radius: 20rpx;
padding: 3px 5px; @include theme("btn_bg");
font-size: 28rpx; color: #fff;
}
}
.buyItems {
width: 60%;
}
.jianjie {
margin-top: 10rpx;
font-size: 24rpx;
@include bov();
color: #9c9c9c;
}
.txt555 {
font-size: 30rpx;
color: #000;
@include bov()
}
}
}
.learnBox {
background-color: #fff;
margin-top: 10px;
@include ptop_bottm(10px);
@include pleft_right(10px);
.learn { flex-wrap: wrap;
justify-content: space-between;
margin-top: 20rpx;
.item {
width: 48%;margin-bottom: 16px;
overflow: hidden;
image {
width: 100%;
height: 200rpx;
}
.txt555 { display: block; text-align: center;
height: 40rpx; width: 100%;
line-height: 40rpx;
@include bov(1);
margin-top: 10rpx;
font-size: 24rpx;
}
}
}
}
</style>