detail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. <template>
  2. <!-- TODO 列表应该覆盖视频一部分,是撇左上角可以显示标签,借助plus加载页面实现 -->
  3. <view class="main">
  4. <!-- <navbar :config="config" backColor="#999999"></navbar> -->
  5. <view style="position: relative;">
  6. <cover-view class="video-tag" v-if="detail.has_vip">会员专享</cover-view>
  7. <image v-if="!sectionDetail.studying_detail_content_url" class="class-video" :src="detail.study_url" mode="">
  8. </image>
  9. <video v-else id="myVideo" class="class-video" object-fit="cover" controls :src="sectionDetail.studying_detail_content_url"
  10. play-btn-position="center">
  11. <cover-view class="video-tag" v-if="detail.has_vip">会员专享</cover-view>
  12. </video>
  13. </view>
  14. <!-- <cover-image class="video-bar" :style="`top: calc(430rpx + 44px + ${statusBarHeight}px)`"></cover-image> -->
  15. <view class="content-box">
  16. <view class="detail">
  17. <view class="page-title">{{detail.study_name}}</view>
  18. <view class="explain">
  19. <text class="block">
  20. <text class="iconfont2">&#xe61a;</text>
  21. <text class="">{{detail.study_teacher}}</text>
  22. </text>
  23. <text class="block">
  24. <text class="iconfont2">&#xe709;</text>
  25. <text class="">{{detail.studying_click}}人次</text>
  26. </text>
  27. <text class="block">
  28. <text class="iconfont2">&#xe651;</text>
  29. <text class="">{{detail.studying_length}}分钟</text>
  30. </text>
  31. </view>
  32. </view>
  33. <view class="split"></view>
  34. <!-- <view class="tab-box" :style="`top: calc(${statusBarHeight}px + 44px)`"> -->
  35. <view class="tab-box" >
  36. <view class="tab" :class="tabActiveIndex == 0 ? 'active' : ''" @click="tabClick(0)">
  37. 课程列表({{detail.studying_detail_count}})</view>
  38. <view class="tab" :class="tabActiveIndex == 1 ? 'active' : ''" @click="tabClick(1)">课程介绍</view>
  39. </view>
  40. <view v-show="tabActiveIndex==0" class="video-list">
  41. <view class="item" v-for="(item,index) in detail.studying_details" :key="index">
  42. <text class="iconfont2">&#xe60b;</text>
  43. <view class="right">
  44. <view class="title">
  45. {{item.studying_detail_name}}
  46. </view>
  47. <view class="desc">
  48. <view class="attr-box">
  49. <text class="attr">
  50. <text class="num">{{item.video_length}}</text>
  51. <text>分钟</text>
  52. </text>
  53. <text class="attr">
  54. <text>播放</text>
  55. <text class="num">{{item.video_click}}</text>
  56. <text>次</text>
  57. </text>
  58. </view>
  59. <button @click="getSectionDetail(item)">播放</button>
  60. </view>
  61. </view>
  62. </view>
  63. <view>
  64. <noData v-if="detail.studying_details&&detail.studying_details.length<=0"></noData>
  65. <u-loadmore v-else :status="status" />
  66. </view>
  67. </view>
  68. <view v-show="tabActiveIndex==1">
  69. <view class="htmlCls ql-editor-box" v-html="detail.study_content">
  70. <!-- <u-parse :html="detail.study_content"></u-parse> -->
  71. </view>
  72. </view>
  73. </view>
  74. <share v-if="showShare" ref="shares" :contentHeight="580"></share>
  75. <view class="seat"></view>
  76. <view class="bottom-box">
  77. <view @click="share()" class="share-text">
  78. <text class="iconfont2">&#xe684;</text>
  79. <text class="tip">分享</text>
  80. </view>
  81. <button class="btn" @click="goSystem">加入服务体系</button>
  82. </view>
  83. <u-modal v-model="show" content="你还不是服务体系成员,不能学习此视频" confirm-color="#0b844a" show-cancel-button confirm-text="加入服务体系" cancel-text="返回" @confirm="goSystem"></u-modal>
  84. </view>
  85. </template>
  86. <script>
  87. import noData from "@/components/noData/nodata.vue"
  88. import share from "@/pages/public/share";
  89. export default {
  90. components: {
  91. noData,
  92. share
  93. },
  94. data() {
  95. return {
  96. //手机状态栏高度
  97. statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
  98. config: {
  99. back: true,
  100. title: '课程详情',
  101. color: 'black',
  102. backgroundColor: [1, "#fff"],
  103. statusBarFontColor: 'black'
  104. },
  105. tabActiveIndex: 0,
  106. tabList: [{
  107. text: '课程列表(7)'
  108. },
  109. {
  110. text: '课程介绍'
  111. }
  112. ],
  113. videoTag: null,
  114. detail: {},
  115. sectionDetail: {},
  116. param: {
  117. page: 1,
  118. limit: 10
  119. },
  120. // list: [],
  121. totalCount: 0,
  122. status: "nomore", //加载前值为loadmore,加载中为loading,没有数据为nomore
  123. showShare: false,
  124. show:false
  125. }
  126. },
  127. onLoad(options) {
  128. if (options.id) {
  129. this.param.studying = options.id;
  130. this.getDetails()
  131. // this.getSectionList()
  132. }
  133. },
  134. onReachBottom() {
  135. // if (this.status == 'loadmore') {
  136. // this.getSectionList()
  137. // }
  138. },
  139. methods: {
  140. tabClick(index) {
  141. let that = this;
  142. this.tabActiveIndex = index;
  143. this.$nextTick(function() {
  144. const query = uni.createSelectorQuery().in(that);
  145. query.select('.detail').boundingClientRect(data => {
  146. uni.pageScrollTo({
  147. scrollTop: data.height + uni.upx2px(425),
  148. duration: 300
  149. })
  150. }).exec();
  151. });
  152. },
  153. // 服务体系礼包
  154. goSystem(){
  155. uni.navigateTo({
  156. url:"/pages/entrepreneurshipZone/index"
  157. })
  158. },
  159. share() {
  160. let token = uni.getStorageSync("apiToken");
  161. if (!token) {
  162. uni.navigateTo({
  163. url: "/pages/login/index",
  164. });
  165. } else {
  166. let user = uni.getStorageSync("personal");
  167. this.showShare = true;
  168. this.$nextTick(() => {
  169. this.$refs.shares.shareInfo(
  170. "",
  171. this.detail.study_name,
  172. "",
  173. this.detail.study_url,
  174. true
  175. );
  176. this.showShare = false;
  177. });
  178. }
  179. },
  180. // 课程章节详情
  181. getSectionDetail(item) {
  182. this.$http.get(`/studyingDetail/${item.id}`).then(res => {
  183. if (res && res.code == 200) {
  184. this.sectionDetail = res.data;
  185. uni.pageScrollTo({
  186. scrollTop: 0
  187. })
  188. this.$nextTick(function(){
  189. let videoContext = uni.createVideoContext('myVideo');
  190. videoContext.play();
  191. })
  192. } else if (res.code == 403) {
  193. // uni.showToast({
  194. // icon: 'none',
  195. // title: "你还不是服务体系成员,不能学习此视频",
  196. // duration: 1500
  197. // })
  198. this.show=true
  199. }
  200. })
  201. },
  202. //获取章节列表
  203. // getSectionList(reset) {
  204. // if (reset) this.param.page = 1;
  205. // this.status = 'loading';
  206. // this.$http.get('/studyingDetail/list', this.param).then(res => {
  207. // if (res && res.code == 200) {
  208. // this.list.push(...res.page.list);
  209. // this.totalCount = res.page.totalCount;
  210. // if (this.list.length < this.totalCount) this.status = 'loadmore';
  211. // else this.status = 'nomore';
  212. // }
  213. // })
  214. // },
  215. // 获取详情
  216. getDetails() {
  217. this.$http.get(`/studying/info/${this.param.studying}`).then(res => {
  218. if (res && res.code == 200) {
  219. this.detail = res.data
  220. }
  221. })
  222. }
  223. }
  224. }
  225. </script>
  226. <style lang="scss" scoped>
  227. .main {
  228. position: relative;
  229. .video-tag {
  230. position: absolute;
  231. top: 0;
  232. left: 0;
  233. z-index: 10;
  234. background-color: #138E46;
  235. width: 114rpx;
  236. height: 40rpx;
  237. line-height: 30rpx;
  238. padding: 0 10rpx;
  239. font-size: 24rpx;
  240. color: white;
  241. }
  242. .class-video {
  243. width: 100%;
  244. height: 450rpx;
  245. background-color: black;
  246. }
  247. .video-bar {
  248. position: absolute;
  249. left: 0;
  250. top: 0;
  251. z-index: 20;
  252. width: 100%;
  253. height: 25rpx;
  254. border-radius: 20rpx 20rpx 0 0;
  255. background-color: white;
  256. }
  257. .content-box {
  258. // position: absolute;
  259. // top: 425rpx;
  260. width: 100%;
  261. background-color: white;
  262. border-radius: 20rpx 20rpx 0px 0px;
  263. padding: 0 0 30rpx 0;
  264. .detail {
  265. box-sizing: border-box;
  266. padding: 0 30rpx;
  267. .page-title {
  268. font-size: 35rpx;
  269. font-family: PingFang SC, PingFang SC-Bold;
  270. font-weight: 700;
  271. text-align: left;
  272. color: #1a1a1a;
  273. line-height: 50rpx;
  274. margin-bottom: 10rpx;
  275. }
  276. .explain {
  277. margin-bottom: 40rpx;
  278. .block {
  279. margin-right: 54rpx;
  280. font-size: 24rpx;
  281. font-family: PingFang SC, PingFang SC-Regular;
  282. font-weight: 400;
  283. text-align: left;
  284. color: #999999;
  285. text {
  286. vertical-align: middle;
  287. }
  288. .iconfont2 {
  289. color: #25AB34;
  290. margin-right: 10rpx;
  291. font-size: 35rpx;
  292. }
  293. &:nth-child(2) {
  294. .iconfont2 {
  295. font-size: 40rpx;
  296. }
  297. }
  298. &:nth-child(3) {
  299. .iconfont2 {
  300. font-size: 30rpx;
  301. }
  302. }
  303. }
  304. }
  305. }
  306. .split {
  307. width: 100%;
  308. height: 8rpx;
  309. background: #f5f5f5;
  310. }
  311. .video-list {
  312. padding: 12rpx 30rpx;
  313. .item {
  314. padding: 40rpx 0;
  315. border-top: 1px solid #e6e6e6;
  316. &:nth-child(1) {
  317. border-top: none;
  318. }
  319. .iconfont2 {
  320. margin-right: 21rpx;
  321. vertical-align: top;
  322. font-size: 40rpx;
  323. color: #22A834;
  324. }
  325. .right {
  326. width: 620rpx;
  327. display: inline-block;
  328. .title {
  329. font-size: 28rpx;
  330. font-family: PingFang SC, PingFang SC-Regular;
  331. font-weight: 400;
  332. text-align: left;
  333. color: #1a1a1a;
  334. line-height: 38rpx;
  335. margin-bottom: 10rpx;
  336. }
  337. .desc {
  338. width: 100%;
  339. .attr-box {
  340. display: inline-block;
  341. width: calc(100% - 130rpx);
  342. .attr {
  343. font-size: 24rpx;
  344. font-family: PingFang SC, PingFang SC-Regular;
  345. font-weight: 400;
  346. line-height: 38rpx;
  347. color: #999999;
  348. margin-right: 43rpx;
  349. .num {
  350. color: #2db62b;
  351. }
  352. }
  353. }
  354. }
  355. button {
  356. display: inline-block;
  357. vertical-align: top;
  358. margin-top: -18rpx;
  359. padding: 0 40rpx;
  360. height: 56rpx;
  361. line-height: 56rpx;
  362. background: #0b844a;
  363. border-radius: 28rpx;
  364. font-size: 24rpx;
  365. font-family: PingFang SC, PingFang SC-Regular;
  366. font-weight: 400;
  367. color: #ffffff;
  368. }
  369. }
  370. }
  371. }
  372. }
  373. .seat {
  374. height: 148rpx;
  375. width: 100%;
  376. padding-bottom: constant(safe-area-inset-bottom);
  377. padding-bottom: env(safe-area-inset-bottom);
  378. }
  379. .bottom-box {
  380. position: fixed;
  381. bottom: 0;
  382. width: 100%;
  383. height: 148rpx;
  384. padding: 0 30rpx;
  385. display: flex;
  386. align-items: center;
  387. justify-content: space-between;
  388. padding-bottom: constant(safe-area-inset-bottom);
  389. padding-bottom: env(safe-area-inset-bottom);
  390. background: white;
  391. z-index: 100;
  392. border-top: 1px solid #f5f5f5;
  393. .share-text {
  394. text-align: center;
  395. width: 100rpx;
  396. .iconfont2 {
  397. font-size: 40rpx;
  398. display: block;
  399. }
  400. .tip {
  401. font-size: 28rpx;
  402. font-family: PingFang SC, PingFang SC-Regular;
  403. font-weight: 400;
  404. text-align: left;
  405. color: #1a1a1a;
  406. }
  407. }
  408. .btn {
  409. // width: 100%;
  410. height: 80rpx;
  411. line-height: 80rpx;
  412. padding: 0 170rpx;
  413. font-size: 32rpx;
  414. font-family: PingFang SC, PingFang SC-Regular;
  415. font-weight: 400;
  416. text-align: center;
  417. color: #ffffff;
  418. background: #0b844a;
  419. border-radius: 40rpx;
  420. }
  421. }
  422. }
  423. .no-data-view {
  424. margin-top: 20rpx !important;
  425. }
  426. .tab-box{
  427. top: 88rpx;
  428. /* #ifdef APP-PLUS */
  429. top: 0;
  430. /* #endif */
  431. }
  432. .htmlCls{
  433. padding:30rpx;
  434. }
  435. </style>