123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540 |
- <template>
- <view class="content">
- <view class="video-wrap">
- <video :src="could_play?chooseCourse.course_sp:''" id="videoId" class="top-video" :poster="topimg"
- v-if="chooseCourse.course_sp"></video>
- <image :src="topimg" mode="widthFix" v-else class="top-video"></image>
- <!-- 视频蒙版 -->
- <!-- <view class="mask" v-if="!could_play" @click.stop=""></view> -->
- </view>
- <view class="nav flex">
- <view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
- :class="{'action': index == currentIndex}">
- {{item.title}}
- </view>
- </view>
- <!-- 详情 -->
- <view class="" v-if="currentIndex == 0">
- <view class="base-info">
- <view class="info-tit">
- {{chooseCourse.course_topic}}
- </view>
- <view class="info-info flex">
- <view class="info-item">
- 课程:共{{courseList.length}}节
- </view>
- <view class="hx">
- </view>
- <view class="info-item">
- 人数:{{chooseCourse.course_play_count}}人学习
- </view>
- </view>
- </view>
- <view class="jianjie">
- <audio :src="bq(chooseCourse.course_audio)" controls v-if="chooseCourse.course_audio"
- :name="chooseCourse.course_topic" author="母婴严选"></audio>
- <view class="jianjie-top flex">
- <view class="hx">
- </view>
- <view class="">
- 课程简介
- </view>
- <view class="hx">
- </view>
- </view>
- <view class="" v-html="chooseCourse.course_intro">
- </view>
- </view>
- <view class="tjkc">
- <view class="jianjie-top flex" style="border-bottom: #c8c7cc solid 1px;">
- <view class="hx">
- </view>
- <view class="">
- 推荐课程
- </view>
- <view class="hx">
- </view>
- </view>
- <view class="kc-list">
- <view class="kc-item flex" v-for="item in recommendList" v-if="item.gr_id != id">
- <image
- :src="item.indeximg.indexOf('http') == -1 ? ('https://myj.liuniu946.com' +item.indeximg) : item.indeximg"
- mode="" class="kc-img"></image>
- <view class="kc-info">
- <view class="info-tit clamp">
- {{item.title}}
- </view>
- <view class="info-cate clamp">
- {{item.ins}}
- </view>
- <view class="info-info flex">
- <view class="rs">
- {{item.count}}
- </view>
- <view class="visit">
- {{item.alll}}
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 课程目录 -->
- <view class="" v-if="currentIndex == 1">
- <view class="kc-ml">
- <view class="ml-item flex" v-for="item in courseList" :key="item.course_id" @click="choose(item)">
- <view class="bs"></view>
- <view class="">
- {{item.course_topic}}
- </view>
- </view>
- </view>
- </view>
- <!-- 全部课程 -->
- <view class="" v-if="currentIndex == 2">
- <view class="tjkc">
- <view class="kc-list">
- <view class="kc-item flex" v-for="item in 10">
- <image src="" mode="" class="kc-img"></image>
- <view class="kc-info">
- <view class="info-tit clamp">
- 母婴行业必学舞蹈(邓晏老师视频)
- </view>
- <view class="info-cate clamp">
- 技术控必练习
- </view>
- <view class="info-info flex">
- <view class="rs">
- 100
- </view>
- <view class="visit">
- 555555
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState,
- mapMutations
- } from 'vuex';
- import {
- getUser
- } from '@/api/user.js';
- import {
- getCourseList,
- recommend
- } from "@/api/index.js"
- export default {
- data() {
- return {
- user: {},
- choosId: 0,
- recommendList: [],
- topimg: '',
- id: '',
- courseList: [],
- chooseCourse: {},
- content: '<p>ddddddd</p>',
- currentIndex: 0,
- could_play: false,
- navList: [{
- title: '详情'
- }, {
- title: '课程目录'
- },
- // {
- // title: '讲师全部课程'
- // }
- ]
- };
- },
- computed: {
- // #ifdef MP
- ...mapState(['systeam']),
- // #endif
- videoContext() {
- return uni.createVideoContext('videoId', this)
- }
- },
- onLoad(opt) {
- if (opt.id) {
- this.id = opt.id
- this.getCourseList()
- }
- if (opt.img) {
- let imgurl = decodeURI(opt.img)
- }
- this.getrecommendList()
- },
- onShow() {
- },
- onReachBottom() {
- },
- methods: {
- ...mapMutations('user', ['setUserInfo']),
- navTo(url) {
- uni.navigateTo({
- url,
- fail() {
- uni.switchTab({
- url
- })
- }
- });
- },
- getUser() {
- const that = this;
- getUser({}).then((e) => {
- this.user = e.data;
- this.setUserInfo(e.data)
- //
- if (that.user.info_audit_status == 1) {
- //双认证可播放
- if (that.user.type_audit_status == 1) {
- that.could_play = true
- } else {
- // 单次认证无平台认证
- if (that.chooseCourse.course_price_3 * 1 > 0) {
- //一次认证付费
- that.could_play = false
- let str = ''
- if (that.user.type_audit_status == -2) {
- str = '您未完成平台认证,是否立即认证?'
- }
- if (that.user.type_audit_status == -1) {
- str = '您平台认证失败,请重新认证'
- }
- if (that.user.type_audit_status == -3) {
- str = '您平台认证已失效,请重新认证'
- }
- if (that.user.type_audit_status == 0) {
- str = '您已提交认证信息请等待认证结束'
- }
- uni.showModal({
- title: '提示',
- content: str ? str : '您未完成平台认证,是否立即认证?',
- complete(e) {
- if (e.confirm) {
- if (that.user.work_type_id <= 0) {
- that.navTo('/pages/user/model/modelrz?modelid=' + that.user
- .show_template_id)
- } else {
- if (that.user.show_template_id) {
- that.navTo('/pages/user/model/model?mtype=' + that.user
- .show_template_id + '&type=3')
- } else {
- if (that.systeam == 'ios') {
- uni.showModal({
- title: '错误',
- content: 'IOS暂不支持',
- showCancel: false,
- });
- } else {
- uni.showModal({
- title: '错误',
- content: '您未购买模板请先购买',
- showCancel: false,
- });
- }
- }
- }
- }
- }
- })
- } else {
- //一次认证即免费
- that.could_play = true
- }
- }
- } else {
- //无认证 免费
- if (that.chooseCourse.course_price * 1 == 0) {
- that.could_play = true
- } else {
- //付费
- that.could_play = false
- uni.showModal({
- title: '提示',
- content: '您未完成信息认证,是否立即认证?',
- complete(e) {
- if (e.confirm) {
- if (that.user.work_type_id <= 0) {
- that.navTo('/pages/user/model/modelrz?modelid=' + that.user
- .show_template_id)
- } else {
- if (that.user.show_template_id) {
- that.navTo('/pages/user/model/model?mtype=' + that.user
- .show_template_id + '&type=3')
- } else {
- if (that.systeam == 'ios') {
- uni.showModal({
- title: '错误',
- content: 'IOS暂不支持',
- showCancel: false,
- });
- } else {
- uni.showModal({
- title: '错误',
- content: '您未购买模板请先购买',
- showCancel: false,
- });
- }
- }
- }
- }
- }
- })
- }
- }
- }).catch((e) => {
- console.log(e, 'sj');
- })
- },
- bq(url) {
- if (url.indexOf('http') == -1) {
- url = 'https://myj.liuniu946.com' + url
- }
- return url
- },
- choose(item) {
- this.choosId = item.course_id
- this.chooseCourse = item
- this.currentIndex = 0
- },
- getrecommendList() {
- recommend().then(res => {
- this.recommendList = res.data.recommendList.slice(0, 3)
- })
- },
- getCourseList() {
- let that = this
- getCourseList({
- gr_id: that.id
- }).then(res => {
- this.courseList = res.data.map(item => {
- // item.course_sp = (item.course_sp.indexOf('http') == -1 )? ('http://qiniuyun.deepbytop.com' + item.course_sp ): item.course_sp
- item.course_sp = item.course_sp.replace(/http:/g, 'https:')
- item.course_intro = item.course_intro.replace(/img src="/g,
- 'img class="rich-img" src="https://myj.liuniu946.com')
- return item
- })
- this.chooseCourse = this.courseList[0]
- this.topimg = (this.chooseCourse.course_cover.indexOf('http') == -1 ? (
- 'https://myj.liuniu946.com' + this.chooseCourse.course_cover) : this.chooseCourse
- .course_cover)
- this.getUser()
- })
- },
- navClick(index) {
- this.currentIndex = index
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .video-wrap {
- margin: 20rpx 0;
- position: relative;
- .top-video {
- width: 750rpx;
- }
- .mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- // background-color: red;
- }
- }
- .nav {
- width: 750rpx;
- height: 88rpx;
- .nav-item {
- line-height: 88rpx;
- width: 50%;
- text-align: center;
- font-size: 30rpx;
- font-weight: 500;
- color: #333333;
- height: 100%;
- }
- .action {
- font-weight: bold;
- position: relative;
- color: $base-color;
- }
- background-color: #fff;
- }
- .base-info {
- width: 710rpx;
- margin: 20rpx auto;
- background-color: #fff;
- font-size: 28rpx;
- .info-tit {
- color: #333;
- text-align: center;
- border-bottom: 1px solid #eee;
- padding: 20rpx;
- }
- .info-info {
- color: #666;
- .info-item {
- flex-grow: 1;
- text-align: center;
- padding: 20rpx 0;
- }
- .hx {
- width: 1rpx;
- height: 40rpx;
- background-color: #eee;
- }
- }
- }
- .jianjie {
- width: 710rpx;
- margin: 20rpx auto 0;
- background-color: #fff;
- padding: 20rpx;
- }
- .jianjie-top {
- font-size: 36rpx;
- color: $base-color;
- justify-content: center;
- padding: 40rpx 0 20rpx;
- .hx {
- width: 30rpx;
- height: 1px;
- background-color: $base-color;
- margin: 0 20rpx;
- }
- }
- .tjkc {
- width: 710rpx;
- background-color: #fff;
- margin: 20rpx auto;
- }
- .kc-list {
- padding: 0 30rpx;
- border-bottom: #c8c7cc solid 1px;
- .kc-item {
- border-bottom: #c8c7cc solid 1px;
- padding: 22rpx 0;
- justify-content: flex-start;
- .kc-img {
- flex-shrink: 0;
- width: 266rpx;
- height: 164rpx;
- margin-right: 20rpx;
- background-color: #eee;
- }
- .kc-info {
- height: 164rpx;
- width: 360rpx;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: flex-start;
- // background-color: red;
- .info-tit {
- width: 100%;
- font-size: 32rpx;
- color: #000;
- }
- .info-cate {
- width: 100%;
- color: #ff5a97;
- font-size: 28rpx;
- }
- .info-info {
- width: 360rpx;
- font-size: 24rpx;
- .rs {
- color: #8f8f94;
- }
- .visit {
- color: $base-color;
- }
- }
- }
- }
- }
- .kc-ml {
- padding: 30rpx;
- width: 710rpx;
- margin: 20rpx auto;
- background-color: #fff;
- .ml-item {
- align-items: flex-start;
- justify-content: flex-start;
- margin-bottom: 40rpx;
- .bs {
- flex-shrink: 0;
- width: 40rpx;
- height: 40rpx;
- border-radius: 50%;
- border: 1px solid #5FB878;
- margin-right: 20rpx;
- }
- }
- }
- /deep/ .rich-img {
- width: 100% !important;
- }
- </style>
|