225 lines
5.8 KiB
Vue
225 lines
5.8 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<z-nav-bar title="课程价格"></z-nav-bar>
|
||
<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">
|
||
<!-- <pre>{{item}}</pre> -->
|
||
<view class="courseItemleve1" v-for="(item1, index1) in item.courseList" :key="index1">
|
||
<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 ? '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>
|
||
</view>
|
||
<i class="haveBuy" v-if="item2.isBuy == 1">已购买</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>
|
||
<!-- <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: {},
|
||
courseList: [],
|
||
status:0,
|
||
scrollTop: 0,
|
||
bgiStyle: {
|
||
background: '#fff'
|
||
},
|
||
iconStyle: {
|
||
fontSize: '40rpx',
|
||
fontWeight: 'bold',
|
||
color: '#258feb',
|
||
},
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
// console.log(e, '------')
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
this.getCoursePriceList()
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop;
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
components: {
|
||
// musicPlay
|
||
},
|
||
//方法
|
||
methods: {
|
||
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';
|
||
|
||
.flexbox {
|
||
display: flex;
|
||
}
|
||
.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> |