573 lines
14 KiB
Vue
573 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="课程价格"></z-nav-bar>
|
||
<view class="addVip">
|
||
<u-alert v-if="" style="
|
||
width: 100%;
|
||
" :title="goBuyTitle" type="warning" :show-icon="true">
|
||
<template slot="rightSlot" slot-scope="slotProps">
|
||
<text class="saveBtn vipBtn flexbox buyBtn" style="color: #fff;"
|
||
@click="onPageJump('/pages/mine/vip/index')">
|
||
开通VIP
|
||
</text>
|
||
<view> </view>
|
||
</template>
|
||
</u-alert>
|
||
</view>
|
||
<!-- 新的 -->
|
||
<uni-collapse accordion @change="collapseChange">
|
||
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
|
||
:thumb="item.courseMedicine.icon">
|
||
<view class="content" v-show="item.courseList.length > 1" style="padding:20rpx;">
|
||
<view :class="['courseItemleve1',userMsg.vip != 0 ? 'isVip' :'']"
|
||
v-for="(item1, index1) in item.courseList" :key="index1"
|
||
@click="onPageJump('/pages/course/courseDetail',item1.id)">
|
||
<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 style="font-size: 32rpx;">{{item1.title}}</text>
|
||
|
||
</view>
|
||
<template v-if="item1.courseCatalogueEntityList && item1.courseCatalogueEntityList.length > 0">
|
||
|
||
|
||
<view class="" v-for="(item2, index2) in item1.courseCatalogueEntityList" :key="index2">
|
||
|
||
<view :class="['priceItem', item2.isBuy == 1 && userMsg.vip == 0 ? 'isBuy' : '']">
|
||
|
||
<text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
|
||
style="font-weight: bold; margin-right: 10rpx;">【{{item2.title}}】</text>
|
||
<view class="pbox flexbox">
|
||
|
||
<text class="text">半年：￥{{item2.halfFee}} 元</text><text class="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>
|
||
<i class="haveBuy" v-if="item2.isBuy == 1 && userMsg.vip == 0">已购买</i>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- <view class="buyBox" v-if="!item1.allBuy">
|
||
<view class="saveBtn buybtn flexbox" @click="goBuy('halfFee')">
|
||
<u-icon name="bag" color="#fff" size="24"></u-icon>
|
||
<text>立即购买</text>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<view class="" style="text-align: center; margin-bottom: 20rpx;">
|
||
<text class="" v-if="item.subpage < item.pages" style="color: #55aaff; display: inline-block; font-size: 28rpx;"
|
||
@click="loadMoreCourse(item, index)">加载更多</text>
|
||
<text class="" v-else style="color: #55aaff; display: inline-block; font-size: 28rpx;"
|
||
>已全部加载完毕</text>
|
||
</view>
|
||
|
||
</view>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
<!-- -->
|
||
<u-back-top :scroll-top="scrollTop" bottom="150" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||
<z-navigation></z-navigation>
|
||
<buy-pup v-if="pricespop" :proPriceList="proPriceList" @closePup="closePup" @oprate="oprate"></buy-pup>
|
||
<!-- <music-play :playData="playData"></music-play> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// import musicPlay from '@/components/music.vue'
|
||
import buyPup from '@/components/buyPup.vue'
|
||
import $http from '@/config/requestConfig.js';
|
||
var clear;
|
||
import {
|
||
mapState
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData: {},
|
||
goBuyTitle: "购买VIP,即可免费观看吴门医述所有课程",
|
||
courseList: [],
|
||
courseList1: [], // 新的
|
||
status: 0,
|
||
scrollTop: 0,
|
||
bgiStyle: {
|
||
background: '#fff'
|
||
},
|
||
iconStyle: {
|
||
fontSize: '40rpx',
|
||
fontWeight: 'bold',
|
||
color: '#258feb',
|
||
},
|
||
proPriceList: [],
|
||
pricespop: false,
|
||
userMsg: {},
|
||
cartList: []
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
// console.log(e, '------')
|
||
this.getUserInfo()
|
||
this.getCoursePriceList1()
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
// this.getCoursePriceList()
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
components: {
|
||
// musicPlay
|
||
buyPup
|
||
},
|
||
//方法
|
||
methods: {
|
||
loadMoreCourse(val, i) {
|
||
console.log(val, 'val',i,'++++++++++++++++')
|
||
let _page = val.subpage
|
||
_page += 1
|
||
this.getSubCourse(this.courseList[i].medicineList, i, _page)
|
||
},
|
||
collapseChange(e) {
|
||
console.log('e', e)
|
||
if (e && this.courseList[e].medicineList.length > 0) {
|
||
if (this.courseList[e].courseList.length <= 0)
|
||
this.getSubCourse(this.courseList[e].medicineList, e,1)
|
||
}
|
||
},
|
||
// 获取子课程
|
||
getSubCourse(ids, index, page) {
|
||
console.log('ids------------------', index)
|
||
$http.request({
|
||
url: "medical/home/getMedicalCoursePriceIsBuy",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: {
|
||
page: page,
|
||
limit: 10,
|
||
"ids": ids
|
||
},
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
})
|
||
.then(res => {
|
||
if (res.code == 0) {
|
||
|
||
if (res.res.records.length > 0) {
|
||
let _list = res.res.records
|
||
// console.log(_list,'_list')
|
||
// this.courseList[index].courseList = _list
|
||
this.courseList[index].courseList = this.courseList[index].courseList.concat(_list)
|
||
this.courseList[index].subpage = res.res.current
|
||
this.courseList[index].pages = res.res.pages
|
||
// console.log(this.courseList[index].courseList, 'this.courseList[index]')
|
||
}
|
||
}
|
||
|
||
}).catch(e => {
|
||
|
||
console.log(e.errMsg, '报错')
|
||
})
|
||
},
|
||
// 获取购物车数据
|
||
addCart(val) {
|
||
console.log(val)
|
||
if (val.productStock == 0) {
|
||
uni.showToast({
|
||
title: '商品库存不足',
|
||
icon: "none"
|
||
});
|
||
} else {
|
||
console.log(this.userInfo, '222')
|
||
this.$http
|
||
.post(`book/ordercart/getCartList?userId=${this.userInfo.id}`)
|
||
.then(res => {
|
||
// console.log(
|
||
this.cartList = res.cartList
|
||
this.isAddLink(val)
|
||
})
|
||
}
|
||
},
|
||
// 加入到购物车
|
||
isAddLink(item) {
|
||
console.log('传入购物车',item);
|
||
// 统计商品信息
|
||
let data = {
|
||
"userId": this.userInfo.id,
|
||
"productId": item.productId,
|
||
"productAmount": 1,
|
||
"price": item.activityPrice && item.activityPrice != 0 ? item.activityPrice : item.price
|
||
}
|
||
// 判断列表是否为空
|
||
if (this.cartList.length > 0) {
|
||
let flag = ''
|
||
let shagnpin = {}
|
||
// 循环购物车列表
|
||
flag = this.cartList.some((item, index) => {
|
||
if (item.productId == data.productId) {
|
||
shagnpin = item
|
||
shagnpin.productAmount += 1
|
||
return true
|
||
}
|
||
})
|
||
if (flag) {
|
||
// 已在购物车中添加
|
||
$http.request({
|
||
url: "book/ordercart/update",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data: shagnpin,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.upoShow = false
|
||
uni.showToast({
|
||
title: '加入购物车成功',
|
||
duration: 1000,
|
||
});
|
||
}
|
||
})
|
||
} else {
|
||
// 加入购物车
|
||
$http.request({
|
||
url: "book/ordercart/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
this.upoShow = false
|
||
uni.showToast({
|
||
title: '加入购物车成功',
|
||
duration: 1000,
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
} else {
|
||
// 购物车列表为空时直接加入购物车
|
||
$http.request({
|
||
url: "book/ordercart/save",
|
||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||
data,
|
||
header: { //默认 无 说明：请求头
|
||
'Content-Type': 'application/json'
|
||
},
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: '加入购物车成功',
|
||
duration: 1000,
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
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: val.productName,
|
||
title: val.productName,
|
||
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'
|
||
})
|
||
});
|
||
|
||
|
||
},
|
||
getCoursePriceList1() {
|
||
this.$http
|
||
.post('medical/home/getMedicalCoursePrice')
|
||
.then(res => {
|
||
if (res.code == 0 && res.res.length > 0) {
|
||
let _list = res.res
|
||
let _allBuy = false
|
||
|
||
_list.map(item => {
|
||
item.courseList = []
|
||
// item.courseList.forEach(item2 => {
|
||
// let _number = 0
|
||
// item2.courseCatalogueEntityList.forEach(item3 => {
|
||
// if(item3.isBuy == 1){
|
||
// _number++
|
||
// }
|
||
// })
|
||
// if(_number == item2.courseCatalogueEntityList.length){
|
||
// _allBuy = true
|
||
// }else{
|
||
// _allBuy = false
|
||
// }
|
||
// item2.allBuy = _allBuy
|
||
// })
|
||
})
|
||
this.courseList = _list
|
||
this.status = 2
|
||
} else {
|
||
this.courseList = []
|
||
this.status = 1
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, '报错')
|
||
this.courseList = []
|
||
this.status = 1
|
||
uni.showToast({
|
||
title:`${e.errMsg}`,
|
||
icon:'none'
|
||
})
|
||
});
|
||
},
|
||
itemClick(op) {
|
||
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@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 {
|
||
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 {
|
||
.saveBtn {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.saveBtn {
|
||
width: 260rpx;
|
||
align-items: center;
|
||
justify-content: center;
|
||
@include theme("btn_bg");
|
||
height: 60rpx;
|
||
|
||
// width: 46%;
|
||
overflow: hidden;
|
||
border-radius: 30rpx;
|
||
|
||
text {
|
||
padding-left: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.courseItemleve1 {
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
// border: 1px solid #eee;
|
||
overflow: hidden;
|
||
margin-bottom: 30rpx;
|
||
@include mshadow(10px, 8);
|
||
background: $containerColor;
|
||
}
|
||
|
||
.priceItem {
|
||
// justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
// background-color: #82aee2;
|
||
border-radius: 20rpx;
|
||
padding: 10rpx;
|
||
border: 2px solid #82aee2;
|
||
|
||
.pbox {
|
||
justify-content: center;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
text {
|
||
// color: #fff;
|
||
}
|
||
|
||
.mname {
|
||
display: block;
|
||
text-align: center;
|
||
margin-bottom: 10rpx;
|
||
// color: #694bc6;
|
||
}
|
||
}
|
||
|
||
.priceItem.isBuy {
|
||
position: relative;
|
||
border-color: #b3b3b3;
|
||
overflow: hidden;
|
||
background-color: #f3f3f3;
|
||
}
|
||
|
||
.isBuy {
|
||
.haveBuy {
|
||
position: absolute;
|
||
padding: 2rpx 6rpx;
|
||
border-radius: 0 0 0 20rpx;
|
||
right: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
background-color: #e1e1e1;
|
||
font-style: normal;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.mname {
|
||
color: inherit;
|
||
}
|
||
}
|
||
|
||
.courseItem {
|
||
// background: #b9d4f2;
|
||
font-weight: bold;
|
||
border-bottom: 1px solid #e1e1e1;
|
||
// border-radius: 20rpx;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
padding: 10rpx 10rpx;
|
||
width: 100%;
|
||
color: $themeColor;
|
||
|
||
.u-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
background-color: $containerColor;
|
||
|
||
.content {
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
</style> |