detail.vue 11 KB

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