461 lines
12 KiB
Vue
461 lines
12 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;">
|
||
开通VIP
|
||
</text>
|
||
<view> </view>
|
||
</template>
|
||
</u-alert>
|
||
</view>
|
||
<view class="container">
|
||
<view class="" v-if="courseList.length > 0">
|
||
<uni-collapse accordion>
|
||
<uni-collapse-item v-for="(item,index) in courseList" :key="index" :title="item.courseMedicine.title"
|
||
:thumb="item.courseMedicine.icon">
|
||
<view class="content" v-if="item.courseList.length > 1">
|
||
<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>{{item1.title}}</text>
|
||
|
||
</view>
|
||
<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>
|
||
<!-- <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>
|
||
</uni-collapse-item>
|
||
</uni-collapse>
|
||
</view>
|
||
<u-divider v-if="status == 1" text="暂无数据"></u-divider>
|
||
<u-divider v-if="status == 0" text="加载中..."></u-divider>
|
||
</view>
|
||
<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: [],
|
||
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, '------')
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
this.getUserInfo()
|
||
this.getCoursePriceList()
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
components: {
|
||
// musicPlay
|
||
buyPup
|
||
},
|
||
//方法
|
||
methods: {
|
||
// 获取购物车数据
|
||
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) {
|
||
// 统计商品信息
|
||
let data = {
|
||
"userId": this.userInfo.id,
|
||
"productId": item.productId,
|
||
"productAmount": this.productAmount,
|
||
"price": 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: 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() {
|
||
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.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 = res.res
|
||
this.status = 2
|
||
} else {
|
||
this.courseList = []
|
||
this.status = 1
|
||
}
|
||
}).catch(e => {
|
||
console.log(e, '报错')
|
||
this.courseList = []
|
||
this.status = 1
|
||
});
|
||
},
|
||
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> |