fanfan
8 months ago
parent
88574de420
commit
f784522b15
@ -0,0 +1,16 @@ |
||||
import request from '@/utils/request' |
||||
|
||||
// api地址
|
||||
const api = { |
||||
courseType: 'course/getCourseType', |
||||
list: 'course/getCourseList' |
||||
} |
||||
|
||||
// 分类
|
||||
export const courseType = (param) => { |
||||
return request.get(api.courseType, param) |
||||
} |
||||
// 列表
|
||||
export const courseList = (param) => { |
||||
return request.get(api.list, param) |
||||
} |
||||
@ -0,0 +1,270 @@ |
||||
<template> |
||||
<view class="park"> |
||||
<view class="park-top"> |
||||
<view class="park-navbar"> |
||||
<u-navbar title="商家教程" :border-bottom="false" :background="background"></u-navbar> |
||||
</view> |
||||
<view class="top-title"> |
||||
软件使用教学 |
||||
</view> |
||||
<view class="top-marker"> |
||||
系统教学 · 通俗易懂 · 智能搜索 |
||||
</view> |
||||
</view> |
||||
<view class="park-center"> |
||||
<u-tabs name="name" count="cate_count" :list="courseTypeList" :is-scroll="false" height="90" |
||||
active-color="rgba(243, 74, 64, 1)" inactive-color="rgba(102, 102, 102, 1)" font-size="32" |
||||
bar-width="55" bar-height="6" :current="current" @change="change"> |
||||
</u-tabs> |
||||
<view class="center-box"> |
||||
<view class="list" v-for="(a,i) in courseList" :key="i" @click="onLookCord(a.video_url.external_url)"> |
||||
<image :src="a.image_url?a.image_url.external_url:''" mode="heightFix" class="img"></image> |
||||
<view class="infor"> |
||||
<view class="title"> |
||||
{{a.course_name}} |
||||
</view> |
||||
<view class="subtitle"> |
||||
{{a.course_detail}} |
||||
</view> |
||||
</view> |
||||
<view class="look"> |
||||
观看 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-mask :show="show" @click="pauseVideo"> |
||||
<view class="warp"> |
||||
<video @tap.stop style="width: 100%;" :loop='true' id="myVideo" :src="video_url"></video> |
||||
</view> |
||||
</u-mask> |
||||
</view> |
||||
</template> |
||||
<script> |
||||
import * as api from '@/api/tutorial' |
||||
export default { |
||||
data() { |
||||
return { |
||||
background: { |
||||
background: 'none' |
||||
}, |
||||
courseTypeList: [], |
||||
current: 0, |
||||
courseList: [], |
||||
show: false, |
||||
video_url: '' |
||||
} |
||||
}, |
||||
onLoad() { |
||||
this.getCourseType() |
||||
}, |
||||
onShow() { |
||||
|
||||
}, |
||||
methods: { |
||||
pauseVideo() { |
||||
uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) { |
||||
uni.createVideoContext('myVideo', this).pause(); |
||||
}).exec(); |
||||
this.show = false |
||||
}, |
||||
change(index) { |
||||
this.current = index; |
||||
this.getCourseList() |
||||
}, |
||||
onLookCord(url) { |
||||
if (url) { |
||||
this.show = true; |
||||
let videoContext = wx.createVideoContext('myVideo') |
||||
videoContext.seek(0); |
||||
this.video_url = url |
||||
} else { |
||||
this.$toast('暂无可观看的视频') |
||||
} |
||||
}, |
||||
// 分类 |
||||
async getCourseType() { |
||||
let { |
||||
status, |
||||
message, |
||||
data |
||||
} = await api.courseType(); |
||||
if (status == 200) { |
||||
this.courseTypeList = data.courseTypes |
||||
this.getCourseList() |
||||
} else { |
||||
this.courseTypeList = [] |
||||
this.$toast(message) |
||||
} |
||||
}, |
||||
// 列表 |
||||
async getCourseList() { |
||||
let that = this; |
||||
that.courseList = [] |
||||
let pames = { |
||||
courseCategoryId: that.courseTypeList[that.current].course_category_id |
||||
} |
||||
let { |
||||
status, |
||||
message, |
||||
data |
||||
} = await api.courseList(pames); |
||||
if (status == 200) { |
||||
that.courseList = data.list |
||||
} else { |
||||
that.list = [] |
||||
that.$toast(message) |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.warp { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 100%; |
||||
width: 100%; |
||||
position: relative; |
||||
background: black; |
||||
z-index: 999; |
||||
} |
||||
|
||||
.park { |
||||
width: 100%; |
||||
background: rgba(255, 255, 255, 1); |
||||
|
||||
.park-top { |
||||
width: 100%; |
||||
height: 380rpx; |
||||
background: url(https://www.royaum.com.cn/static/user/courseBg.png); |
||||
background-size: 100%; |
||||
|
||||
.top-title { |
||||
opacity: 1; |
||||
font-size: 64rpx; |
||||
font-weight: 500; |
||||
color: rgba(51, 51, 51, 1); |
||||
text-align: left; |
||||
vertical-align: top; |
||||
padding-top: 30rpx; |
||||
padding-left: 48rpx; |
||||
} |
||||
|
||||
.top-marker { |
||||
padding-top: 15rpx; |
||||
padding-left: 48rpx; |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
line-height: 44rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
text-align: left; |
||||
vertical-align: top; |
||||
|
||||
} |
||||
} |
||||
|
||||
.park-center { |
||||
background: #fff; |
||||
width: 100%; |
||||
overflow: hidden; |
||||
|
||||
.center-box { |
||||
overflow: hidden; |
||||
padding: 20rpx 30rpx; |
||||
|
||||
.list { |
||||
position: relative; |
||||
overflow: hidden; |
||||
height: 152rpx; |
||||
border-radius: 28rpx; |
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(250, 177, 173, 0.07) 59.66%, rgba(243, 74, 64, 0.06) 100%); |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 30rpx 20rpx; |
||||
margin-bottom: 55rpx; |
||||
|
||||
.look { |
||||
right: 0; |
||||
bottom: 0; |
||||
position: absolute; |
||||
width: 136rpx; |
||||
height: 50rpx; |
||||
border-radius: 17rpx 0rpx 28rpx 0rpx; |
||||
background: linear-gradient(125.45deg, rgba(255, 138, 102, 1) 0%, rgba(243, 74, 64, 1) 100%); |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
letter-spacing: 0rpx; |
||||
line-height: 50rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
text-align: center; |
||||
vertical-align: top; |
||||
|
||||
} |
||||
|
||||
.img { |
||||
width: 164rpx; |
||||
height: 124rpx; |
||||
border-radius: 20rpx; |
||||
margin-right: 40rpx; |
||||
} |
||||
|
||||
.infor { |
||||
overflow: hidden; |
||||
width: 478rpx; |
||||
|
||||
.title { |
||||
font-size: 32rpx; |
||||
font-weight: 500; |
||||
letter-spacing: 0rpx; |
||||
line-height: 44rpx; |
||||
color: rgba(51, 51, 51, 1); |
||||
text-align: left; |
||||
vertical-align: middle; |
||||
overflow: hidden; |
||||
/* 确保内容超出容器时会被隐藏 */ |
||||
display: -webkit-box; |
||||
/* 作为弹性伸缩盒子模型显示 */ |
||||
-webkit-line-clamp: 2; |
||||
/* 限制在两行 */ |
||||
-webkit-box-orient: vertical; |
||||
/* 垂直排列盒子 */ |
||||
text-overflow: ellipsis; |
||||
/* 超出部分显示省略号 */ |
||||
white-space: normal; |
||||
/* 使用正常的白空格处理方式，允许换行 */ |
||||
} |
||||
|
||||
.subtitle { |
||||
margin-top: 10rpx; |
||||
/** 文本1 */ |
||||
font-size: 26rpx; |
||||
font-weight: 400; |
||||
letter-spacing: 0rpx; |
||||
color: rgba(102, 102, 102, 1); |
||||
text-align: left; |
||||
vertical-align: middle; |
||||
overflow: hidden; |
||||
/* 确保内容超出容器时会被隐藏 */ |
||||
display: -webkit-box; |
||||
/* 作为弹性伸缩盒子模型显示 */ |
||||
-webkit-line-clamp: 1; |
||||
/* 限制在两行 */ |
||||
-webkit-box-orient: vertical; |
||||
/* 垂直排列盒子 */ |
||||
text-overflow: ellipsis; |
||||
/* 超出部分显示省略号 */ |
||||
white-space: normal; |
||||
/* 使用正常的白空格处理方式，允许换行 */ |
||||
max-width: 320rpx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue