177 lines
4.2 KiB
Vue
177 lines
4.2 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.medical.title"
|
||
:thumb="item.medical.icon">
|
||
<view class="content">
|
||
<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 flexbox">
|
||
<text class="text mname" v-if="item1.courseCatalogueEntityList.length > 1"
|
||
style="font-weight: bold; margin-right: 20rpx;">{{item2.title}}</text>
|
||
<!-- <view class="pbox flexbox"> -->
|
||
<text class="text">半年：￥{{item2.halfFee}} 元</text><text class="text"
|
||
style="margin-left: 20rpx;">整年：￥{{item2.fee}} 元</text>
|
||
<!-- </view> -->
|
||
</view>
|
||
</view>
|
||
<view class="buyBox">
|
||
<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>
|
||
<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,
|
||
};
|
||
},
|
||
//第一次加载
|
||
onLoad(e) {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
// console.log(e, '------')
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo'])
|
||
},
|
||
//页面显示
|
||
onShow() {
|
||
// 隐藏原生的tabbar
|
||
uni.hideTabBar();
|
||
this.getCoursePriceList()
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
components: {
|
||
// musicPlay
|
||
},
|
||
//方法
|
||
methods: {
|
||
getCoursePriceList() {
|
||
this.$http
|
||
.post('medical/home/getMedicalCoursePrice')
|
||
.then(res => {
|
||
if (res.code == 0 && res.list.length > 0) {
|
||
this.courseList = res.list
|
||
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: 20rpx;
|
||
background: $containerColor;
|
||
}
|
||
|
||
.priceItem {justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
font-size: 28rpx;
|
||
background-color: #82aee2;
|
||
border-radius: 20rpx; padding:10rpx;
|
||
// border: 1px solid #ff5500;
|
||
.pbox{ justify-content: center; width: 100%; text-align: center;}
|
||
text{
|
||
color: #fff;
|
||
}
|
||
.mname{padding: 2rpx 10rpx; background: #00e1ec ; border-radius: 20rpx;}
|
||
}
|
||
|
||
.courseItem {
|
||
background: $containerColor; font-weight: bold; border-bottom: 1px dotted #e1e1e1;
|
||
border-radius: 20rpx;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
display: block;
|
||
padding: 10rpx 0;
|
||
width: 100%;
|
||
|
||
.u-icon {
|
||
display: inline-block;
|
||
}
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
|
||
.container {
|
||
.content {
|
||
padding: 0 20rpx;
|
||
}
|
||
}
|
||
</style> |