detail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <view class="content">
  3. <view class="video-wrap">
  4. <video :src="could_play?chooseCourse.course_sp:''" id="videoId" class="top-video" :poster="topimg" v-if="chooseCourse.course_sp"></video>
  5. <image :src="topimg" mode="widthFix" v-else class="top-video"></image>
  6. <!-- 视频蒙版 -->
  7. <!-- <view class="mask" v-if="!could_play" @click.stop=""></view> -->
  8. </view>
  9. <view class="nav flex">
  10. <view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
  11. :class="{'action': index == currentIndex}">
  12. {{item.title}}
  13. </view>
  14. </view>
  15. <!-- 详情 -->
  16. <view class="" v-if="currentIndex == 0">
  17. <view class="base-info">
  18. <view class="info-tit">
  19. {{chooseCourse.course_topic}}
  20. </view>
  21. <view class="info-info flex">
  22. <view class="info-item">
  23. 课程:共{{courseList.length}}节
  24. </view>
  25. <view class="hx">
  26. </view>
  27. <view class="info-item">
  28. 人数:{{chooseCourse.course_play_count}}人学习
  29. </view>
  30. </view>
  31. </view>
  32. <view class="jianjie">
  33. <audio :src="bq(chooseCourse.course_audio)" controls v-if="chooseCourse.course_audio" :name="chooseCourse.course_topic" author="母婴严选"></audio>
  34. <view class="jianjie-top flex">
  35. <view class="hx">
  36. </view>
  37. <view class="">
  38. 课程简介
  39. </view>
  40. <view class="hx">
  41. </view>
  42. </view>
  43. <view class="" v-html="chooseCourse.course_intro">
  44. </view>
  45. </view>
  46. <view class="tjkc">
  47. <view class="jianjie-top flex" style="border-bottom: #c8c7cc solid 1px;">
  48. <view class="hx">
  49. </view>
  50. <view class="">
  51. 推荐课程
  52. </view>
  53. <view class="hx">
  54. </view>
  55. </view>
  56. <view class="kc-list">
  57. <view class="kc-item flex" v-for="item in recommendList" v-if="item.gr_id != id">
  58. <image :src="item.indeximg.indexOf('http') == -1 ? ('https://myj.liuniu946.com' +item.indeximg) : item.indeximg" mode="" class="kc-img"></image>
  59. <view class="kc-info">
  60. <view class="info-tit clamp">
  61. {{item.title}}
  62. </view>
  63. <view class="info-cate clamp">
  64. {{item.ins}}
  65. </view>
  66. <view class="info-info flex">
  67. <view class="rs">
  68. {{item.count}}
  69. </view>
  70. <view class="visit">
  71. {{item.alll}}
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 课程目录 -->
  80. <view class="" v-if="currentIndex == 1">
  81. <view class="kc-ml">
  82. <view class="ml-item flex" v-for="item in courseList" :key="item.course_id" @click="choose(item)">
  83. <view class="bs"></view>
  84. <view class="">
  85. {{item.course_topic}}
  86. </view>
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 全部课程 -->
  91. <view class="" v-if="currentIndex == 2">
  92. <view class="tjkc">
  93. <view class="kc-list">
  94. <view class="kc-item flex" v-for="item in 10">
  95. <image src="" mode="" class="kc-img"></image>
  96. <view class="kc-info">
  97. <view class="info-tit clamp">
  98. 母婴行业必学舞蹈(邓晏老师视频)
  99. </view>
  100. <view class="info-cate clamp">
  101. 技术控必练习
  102. </view>
  103. <view class="info-info flex">
  104. <view class="rs">
  105. 100
  106. </view>
  107. <view class="visit">
  108. 555555
  109. </view>
  110. </view>
  111. </view>
  112. </view>
  113. </view>
  114. </view>
  115. </view>
  116. </view>
  117. </template>
  118. <script>
  119. import {
  120. mapState,
  121. mapMutations
  122. } from 'vuex';
  123. import {
  124. getUser
  125. } from '@/api/user.js';
  126. import { getCourseList,recommend } from "@/api/index.js"
  127. export default {
  128. data() {
  129. return {
  130. user: {},
  131. choosId: 0,
  132. recommendList: [],
  133. topimg: '',
  134. id: '',
  135. courseList: [],
  136. chooseCourse: {},
  137. content: '<p>ddddddd</p>',
  138. currentIndex: 0,
  139. could_play: false,
  140. navList: [{
  141. title: '详情'
  142. }, {
  143. title: '课程目录'
  144. },
  145. // {
  146. // title: '讲师全部课程'
  147. // }
  148. ]
  149. };
  150. },
  151. computed: {
  152. videoContext() {
  153. return uni.createVideoContext('videoId', this)
  154. }
  155. },
  156. onLoad(opt) {
  157. if(opt.id) {
  158. this.id = opt.id
  159. this.getCourseList()
  160. }
  161. if(opt.img ) {
  162. let imgurl = decodeURI(opt.img)
  163. console.log(this.topimg);
  164. }
  165. this.getrecommendList()
  166. },
  167. onShow() {
  168. },
  169. onReachBottom() {
  170. },
  171. methods: {
  172. ...mapMutations('user', ['setUserInfo']),
  173. navTo(url) {
  174. uni.navigateTo({
  175. url,
  176. fail() {
  177. uni.switchTab({
  178. url
  179. })
  180. }
  181. });
  182. },
  183. getUser() {
  184. console.log('data')
  185. const that = this;
  186. getUser({}).then((e) => {
  187. this.user = e.data;
  188. this.setUserInfo(e.data)
  189. //
  190. if(that.user.info_audit_status == 1 ) {
  191. //双认证可播放
  192. if(that.user.type_audit_status == 1) {
  193. that.could_play = true
  194. }else {
  195. // 单次认证无平台认证
  196. if(that.chooseCourse.course_price_3*1 > 0) {
  197. //一次认证付费
  198. that.could_play = false
  199. let str = ''
  200. if(that.user.type_audit_status == -2) {
  201. str = '您未完成平台认证,是否立即认证?'
  202. }
  203. if(that.user.type_audit_status == -1) {
  204. str = '您平台认证失败,请重新认证'
  205. }
  206. if(that.user.type_audit_status == -3) {
  207. str = '您平台认证已失效,请重新认证'
  208. }
  209. if(that.user.type_audit_status == 0) {
  210. str = '您已提交认证信息请等待认证结束'
  211. }
  212. uni.showModal({
  213. title:'提示',
  214. content:str?str:'您未完成平台认证,是否立即认证?',
  215. complete(e) {
  216. if(e.confirm) {
  217. if (that.user.work_type_id <=0) {
  218. that.navTo('/pages/user/model/modelrz?modelid='+that.user.show_template_id)
  219. } else {
  220. if (that.user.show_template_id) {
  221. that.navTo('/pages/user/model/model?mtype=' + that.user.show_template_id+'&type=3')
  222. }else{
  223. uni.showModal({
  224. title: '错误',
  225. content: '您未购买模板请先购买',
  226. showCancel: false,
  227. });
  228. }
  229. }
  230. }
  231. }
  232. })
  233. }else {
  234. //一次认证即免费
  235. that.could_play = true
  236. }
  237. }
  238. }else {
  239. //无认证 免费
  240. if(that.chooseCourse.course_price*1 == 0) {
  241. that.could_play = true
  242. }else {
  243. //付费
  244. that.could_play = false
  245. uni.showModal({
  246. title:'提示',
  247. content:'您未完成信息认证,是否立即认证?',
  248. complete(e) {
  249. if(e.confirm) {
  250. if (that.user.work_type_id <=0) {
  251. that.navTo('/pages/user/model/modelrz?modelid='+that.user.show_template_id)
  252. } else {
  253. if (that.user.show_template_id) {
  254. that.navTo('/pages/user/model/model?mtype=' + that.user.show_template_id+'&type=3')
  255. }else{
  256. uni.showModal({
  257. title: '错误',
  258. content: '您未购买模板请先购买',
  259. showCancel: false,
  260. });
  261. }
  262. }
  263. }
  264. }
  265. })
  266. }
  267. }
  268. }).catch((e) => {
  269. console.log(e, 'sj');
  270. })
  271. },
  272. bq(url) {
  273. if(url.indexOf('http') == -1) {
  274. url = 'https://myj.liuniu946.com' + url
  275. }
  276. return url
  277. },
  278. choose(item) {
  279. console.log(item,'item');
  280. this.choosId = item.course_id
  281. this.chooseCourse = item
  282. this.currentIndex = 0
  283. },
  284. getrecommendList() {
  285. recommend().then(res => {
  286. console.log(res);
  287. this.recommendList = res.data.recommendList.slice(0,3)
  288. })
  289. },
  290. getCourseList() {
  291. let that = this
  292. getCourseList({
  293. gr_id: that.id
  294. }).then(res => {
  295. console.log(res);
  296. this.courseList = res.data.map(item => {
  297. // item.course_sp = (item.course_sp.indexOf('http') == -1 )? ('http://qiniuyun.deepbytop.com' + item.course_sp ): item.course_sp
  298. item.course_sp = item.course_sp.replace(/http:/g,'https:')
  299. item.course_intro = item.course_intro.replace(/img src="/g,'img class="rich-img" src="https://myj.liuniu946.com')
  300. return item
  301. })
  302. this.chooseCourse = this.courseList[0]
  303. this.topimg = (this.chooseCourse.course_cover.indexOf('http') == -1 ? ('https://myj.liuniu946.com' + this.chooseCourse.course_cover): this.chooseCourse.course_cover)
  304. console.log(this.chooseCourse.course_sp);
  305. this.getUser()
  306. })
  307. },
  308. navClick(index) {
  309. this.currentIndex = index
  310. }
  311. }
  312. };
  313. </script>
  314. <style lang="scss" scoped>
  315. .video-wrap {
  316. margin: 20rpx 0;
  317. position: relative;
  318. .top-video {
  319. width: 750rpx;
  320. }
  321. .mask {
  322. position: absolute;
  323. top: 0;
  324. left: 0;
  325. width: 100%;
  326. height: 100%;
  327. z-index: 999;
  328. // background-color: red;
  329. }
  330. }
  331. .nav {
  332. width: 750rpx;
  333. height: 88rpx;
  334. .nav-item {
  335. line-height: 88rpx;
  336. width: 50%;
  337. text-align: center;
  338. font-size: 30rpx;
  339. font-weight: 500;
  340. color: #333333;
  341. height: 100%;
  342. }
  343. .action {
  344. font-weight: bold;
  345. position: relative;
  346. color: $base-color;
  347. }
  348. background-color: #fff;
  349. }
  350. .base-info {
  351. width: 710rpx;
  352. margin: 20rpx auto;
  353. background-color: #fff;
  354. font-size: 28rpx;
  355. .info-tit {
  356. color: #333;
  357. text-align: center;
  358. border-bottom: 1px solid #eee;
  359. padding: 20rpx;
  360. }
  361. .info-info {
  362. color: #666;
  363. .info-item {
  364. flex-grow: 1;
  365. text-align: center;
  366. padding: 20rpx 0;
  367. }
  368. .hx {
  369. width: 1rpx;
  370. height: 40rpx;
  371. background-color: #eee;
  372. }
  373. }
  374. }
  375. .jianjie {
  376. width: 710rpx;
  377. margin: 20rpx auto 0;
  378. background-color: #fff;
  379. padding: 20rpx;
  380. }
  381. .jianjie-top {
  382. font-size: 36rpx;
  383. color: $base-color;
  384. justify-content: center;
  385. padding: 40rpx 0 20rpx;
  386. .hx {
  387. width: 30rpx;
  388. height: 1px;
  389. background-color: $base-color;
  390. margin: 0 20rpx;
  391. }
  392. }
  393. .tjkc {
  394. width: 710rpx;
  395. background-color: #fff;
  396. margin: 20rpx auto;
  397. }
  398. .kc-list {
  399. padding: 0 30rpx;
  400. border-bottom: #c8c7cc solid 1px;
  401. .kc-item {
  402. border-bottom: #c8c7cc solid 1px;
  403. padding: 22rpx 0;
  404. justify-content: flex-start;
  405. .kc-img {
  406. flex-shrink: 0;
  407. width: 266rpx;
  408. height: 164rpx;
  409. margin-right: 20rpx;
  410. background-color: #eee;
  411. }
  412. .kc-info {
  413. height: 164rpx;
  414. width: 360rpx;
  415. display: flex;
  416. flex-direction: column;
  417. justify-content: space-between;
  418. align-items: flex-start;
  419. // background-color: red;
  420. .info-tit {
  421. width: 100%;
  422. font-size: 32rpx;
  423. color: #000;
  424. }
  425. .info-cate {
  426. width: 100%;
  427. color: #ff5a97;
  428. font-size: 28rpx;
  429. }
  430. .info-info {
  431. width: 360rpx;
  432. font-size: 24rpx;
  433. .rs {
  434. color: #8f8f94;
  435. }
  436. .visit {
  437. color: $base-color;
  438. }
  439. }
  440. }
  441. }
  442. }
  443. .kc-ml {
  444. padding: 30rpx;
  445. width: 710rpx;
  446. margin: 20rpx auto;
  447. background-color: #fff;
  448. .ml-item {
  449. align-items: flex-start;
  450. justify-content: flex-start;
  451. margin-bottom: 40rpx;
  452. .bs {
  453. flex-shrink: 0;
  454. width: 40rpx;
  455. height: 40rpx;
  456. border-radius: 50%;
  457. border: 1px solid #5FB878;
  458. margin-right: 20rpx;
  459. }
  460. }
  461. }
  462. /deep/ .rich-img {
  463. width: 100% !important;
  464. }
  465. </style>