测试版
This commit is contained in:
liuyuan
165
pages/curriculum/index/free.vue
Normal file
165
pages/curriculum/index/free.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<view class="commonPageBox commonDetailPage">
|
||||
<z-nav-bar title="免费课程"></z-nav-bar>
|
||||
<view class="list_block">
|
||||
<view class="list_item"
|
||||
v-for="(item, index) in dataList" :key="index"
|
||||
v-if="dataList&&dataList.length>0"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<view class="list_item_image">
|
||||
<image v-if="item.image" :src="item.image" mode="aspectFit"></image>
|
||||
<text class="image_null" v-else>暂无封面图</text>
|
||||
</view>
|
||||
<view class="list_item_right">
|
||||
<view class="list_item_title">{{item.title}}</view>
|
||||
<view class="list_item_content" v-html="item.content"></view>
|
||||
<view class="list_item_study">了解课程</view>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="statusNull" class="text_null">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
dataList: [], //列表数据
|
||||
statusNull: null, //暂无数据显示
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
//免费课程
|
||||
this.getDataList();
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//免费课程数据
|
||||
getDataList(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'psyche/course/getFreeCourse',
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
if(res.courseList&&res.courseList.length>0){
|
||||
this.dataList = res.courseList;
|
||||
}else{
|
||||
this.dataList = [];
|
||||
this.statusNull =true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//跳转课程详情
|
||||
goToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.commonPageBox{
|
||||
background: #eff5f8;
|
||||
height: 100vh;
|
||||
}
|
||||
.cateList {
|
||||
width: 100%;
|
||||
}
|
||||
.flexbox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
.list_block{
|
||||
padding: 20rpx 20rpx 0;
|
||||
}
|
||||
.list_item{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
padding: 30rpx 20rpx 70rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.list_item_image,.image_null{
|
||||
width: 250rpx;
|
||||
height: 220rpx;
|
||||
background-color: rgba(125, 193, 240, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list_item_image image{
|
||||
width: 100%;
|
||||
}
|
||||
.list_item_right{
|
||||
margin-left: 30rpx;
|
||||
width: calc(100% - 250rpx);
|
||||
}
|
||||
.list_item_title{
|
||||
font-size: 30rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.list_item_content{
|
||||
margin-top: 15rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
max-height: 108rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.list_item_study{
|
||||
line-height: 48rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 30rpx;
|
||||
background: #7dc1f0;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.list_item_study_out{
|
||||
line-height: 48rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 30rpx;
|
||||
background: #294a97;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.text_null{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 150rpx 0;
|
||||
}
|
||||
.image_null{
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
308
pages/curriculum/index/index.vue
Normal file
308
pages/curriculum/index/index.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view class="commonPageBox commonDetailPage">
|
||||
<z-nav-bar title="我的课程"></z-nav-bar>
|
||||
<view class="cateList flexbox" :style="`top: ${45 + statusBarHeight}px;`">
|
||||
<common-sticky itemStyle="width:33.3%; height: 68rpx;font-size:24rpx;" :list="ordersTabs" label="name"
|
||||
:currentCateIndex="currentCateIndex" @handleselectCate="ordersTabCLi"></common-sticky>
|
||||
</view>
|
||||
<view class="list_block">
|
||||
<view class="list_item"
|
||||
v-for="(item, index) in dataList" :key="index"
|
||||
v-if="dataList&&dataList.length>0"
|
||||
@click="goToDetail(item)"
|
||||
>
|
||||
<view class="list_item_image">
|
||||
<image v-if="item.image" :src="item.image" mode="aspectFit"></image>
|
||||
<text class="image_null" v-else>暂无封面图</text>
|
||||
</view>
|
||||
<view class="list_item_right">
|
||||
<view class="list_item_title">{{item.title}}</view>
|
||||
<view class="list_item_content" v-html="item.content"></view>
|
||||
<view class="list_item_study" v-if="item.isStudying==0" @click.stop="addStudying(item.id)">加入学习</view>
|
||||
<view class="list_item_study_out" v-else @click.stop="removeStudying(item.id)">移出学习</view>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="statusNull" class="text_null">暂无数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
ordersTabs: [{
|
||||
name: "我的课程",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: "正在学习",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
name: "过期课程",
|
||||
value: 2,
|
||||
}
|
||||
],
|
||||
currentCateIndex: 0,
|
||||
dataList: [], //列表数据
|
||||
timer: null,
|
||||
statusNull: null, //暂无数据显示
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
//我的课程
|
||||
this.getMyList();
|
||||
this.$nextTick(async () => {
|
||||
await this.ordersTabCLi(this.ordersTabs[0], 0);
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//我的课程数据
|
||||
getMyList(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'psyche/course/getUserCourseBuy',
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res=> {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
if(res.courseList&&res.courseList.length>0){
|
||||
this.dataList = res.courseList;
|
||||
}else{
|
||||
this.dataList = [];
|
||||
this.statusNull =true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//加入学习
|
||||
addStudying(id){
|
||||
let that = this;
|
||||
that.$http.request({
|
||||
url: 'psyche/course/addUserCourseStudying',
|
||||
method: "POST",
|
||||
data: {
|
||||
courseId: id
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '已经加入学习',
|
||||
icon: 'success'
|
||||
})
|
||||
that.timer = setTimeout(function(){
|
||||
that.dataList = [];
|
||||
that.getMyList();
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
},
|
||||
//移出学习
|
||||
removeStudying(id){
|
||||
let that = this;
|
||||
that.$http.request({
|
||||
url: 'psyche/course/removeUserCourseStudying',
|
||||
method: "POST",
|
||||
data: {
|
||||
courseId: id
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '已经移出学习',
|
||||
icon: 'success'
|
||||
})
|
||||
that.timer = setTimeout(function(){
|
||||
that.dataList = [];
|
||||
if(that.currentCateIndex==1){
|
||||
that.getStudyingList();
|
||||
}else{
|
||||
that.getMyList();
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
},
|
||||
//正在学习数据
|
||||
getStudyingList(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'psyche/course/getUserCourseStudying',
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
if(res.courseList&&res.courseList.length>0){
|
||||
this.dataList = res.courseList;
|
||||
}else{
|
||||
this.dataList = [];
|
||||
this.statusNull =true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//过期课程数据
|
||||
getExpireList(){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'psyche/course/getCourseExpire',
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
if(res.courseList&&res.courseList.length>0){
|
||||
this.dataList = res.courseList;
|
||||
}else{
|
||||
this.dataList = [];
|
||||
this.statusNull =true;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//切换tab状态
|
||||
ordersTabCLi(data, index) {
|
||||
this.dataList = [];
|
||||
this.statusNull = null;
|
||||
this.currentCateIndex = index;
|
||||
if(index==0){
|
||||
this.getMyList();
|
||||
}else if(index==1){
|
||||
this.getStudyingList();
|
||||
}else if(index==2){
|
||||
this.getExpireList();
|
||||
}
|
||||
},
|
||||
//跳转课程详情
|
||||
goToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.commonPageBox{
|
||||
background: #eff5f8;
|
||||
height: 100vh;
|
||||
}
|
||||
.cateList {
|
||||
width: 100%;
|
||||
}
|
||||
.flexbox {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
.list_block{
|
||||
padding: 20rpx 20rpx 0;
|
||||
margin-top: 70rpx;
|
||||
}
|
||||
.list_item{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
padding: 30rpx 20rpx 70rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.list_item_image,.image_null{
|
||||
width: 250rpx;
|
||||
height: 220rpx;
|
||||
background-color: rgba(125, 193, 240, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list_item_image image{
|
||||
width: 100%;
|
||||
}
|
||||
.list_item_right{
|
||||
margin-left: 30rpx;
|
||||
width: calc(100% - 250rpx);
|
||||
}
|
||||
.list_item_title{
|
||||
font-size: 30rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.list_item_content{
|
||||
margin-top: 15rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
max-height: 108rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.list_item_study{
|
||||
line-height: 48rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 30rpx;
|
||||
background: #7dc1f0;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.list_item_study_out{
|
||||
line-height: 48rpx;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 30rpx;
|
||||
background: #294a97;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.text_null{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 150rpx 0;
|
||||
}
|
||||
.image_null{
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
672
pages/curriculum/list/index.vue
Normal file
672
pages/curriculum/list/index.vue
Normal file
@@ -0,0 +1,672 @@
|
||||
<template>
|
||||
<view class="commonPageBox">
|
||||
<z-nav-bar :title="title">
|
||||
<view class="curseSet" slot="right" v-if="statusXLCP&&XL_id==77">
|
||||
<uni-icons type="location" size="18"></uni-icons>
|
||||
<picker class="picker" mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange">
|
||||
<text @click="changeCountry">{{countryText}}</text>
|
||||
</picker>
|
||||
</view>
|
||||
</z-nav-bar>
|
||||
<view class="cateList">
|
||||
<view class="labels_block" v-if="labelsList.length>0" :style="`top: ${45 + statusBarHeight}px;`">
|
||||
<view class="labels_item"
|
||||
:style="{ width: labelsList.length > 0 ? `${100 / labelsList.length}%` : '100%' }"
|
||||
v-for="(tabData,tabIndex) in labelsList" :key="tabIndex"
|
||||
:class="activeTab==tabIndex?'active_tab':''" @click.stop="clickTab(tabData,tabIndex)">
|
||||
{{tabData.title}} <text class="line-item"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="children_block" v-if="childrenList.length>0">
|
||||
<view class="children_item"
|
||||
:style="{ width: childrenList.length > 0 ? `${100 / childrenList.length}%` : '100%' }"
|
||||
v-for="(childrenData,childrenIndex) in childrenList" :key="childrenIndex"
|
||||
:class="childrenTab==childrenIndex?'active_children':''" @click.stop="clickChildren(childrenData,childrenIndex)">
|
||||
{{childrenData.title}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="list_block" v-if="!statusXLCP" :style="labelsList.length>0&&childrenList.length==0?`marginTop: ${45 + statusBarHeight}px;`:''">
|
||||
<view class="list_item" v-if="list.length>0" v-for="(item,index) in list" :key="index" @click.stop="goToDetail(item)">
|
||||
<view class="list_item_image">
|
||||
<image v-if="item.image" :src="item.image" mode="aspectFit"></image>
|
||||
<text class="image_null" v-else>暂无封面图</text>
|
||||
</view>
|
||||
<view class="list_item_right">
|
||||
<view class="list_item_title">{{item.title}}</view>
|
||||
<view class="list_item_content" v-html="item.content"></view>
|
||||
<view class="list_item_bt">
|
||||
<view class="list_item_price" v-if="item.courseCatalogueEntityList.length==1">
|
||||
<text v-if="item.courseCatalogueEntityList[0].halfFee==0">免费</text>
|
||||
<text v-else>¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
|
||||
</view>
|
||||
<view class="list_item_price" v-if="item.courseCatalogueEntityList.length>1">
|
||||
<text v-for="(v,i) in item.courseCatalogueEntityList" :key="i">
|
||||
{{(v.title).substring(0, 1)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
|
||||
</text>
|
||||
<text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text>
|
||||
<text v-else style="margin-left: 20rpx;">¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
|
||||
</view>
|
||||
<text class="list_item_study">了解课程</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<text v-if="statusNull" class="text_null">暂无数据</text>
|
||||
</view>
|
||||
|
||||
<view class="xlcp_block" :class="XL_id==78?'xlcp_block_2':''" v-if="statusXLCP">
|
||||
<view class="form_block" v-if="XL_id==77">
|
||||
<view class="form_item" v-for="(item,index) in formList" :key="index">
|
||||
<text class="form_title">{{item.title}}</text>
|
||||
<view class="form_solid">
|
||||
<view class="form_des">{{item.des}}</view>
|
||||
<picker mode="multiSelector" :range="multiArray" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" v-show="countryText=='城市'">
|
||||
<u-button class="form_btn">进入测试</u-button>
|
||||
</picker>
|
||||
<u-button v-show="countryText!='城市'" class="form_btn" @click="test(item)">进入测试</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="level_block" v-if="XL_id==78">
|
||||
<view class="level_item" @click="clickLevel">自恋型人格障碍诊断标准</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
id: null,
|
||||
ordersTabs: [],
|
||||
page: {
|
||||
current: 1,
|
||||
limit: 10
|
||||
},
|
||||
labelsList: [], //二级数据
|
||||
childrenList: [], //子级目录
|
||||
childrenId: null,
|
||||
list: [], //列表数据
|
||||
statusNull: null,
|
||||
statusXLCP: null,
|
||||
activeTab: 0, //默认选中tab
|
||||
childrenTab: 0,
|
||||
XL_id: null, //心理测评tab的id绑定
|
||||
|
||||
//心身量表
|
||||
formList: [],
|
||||
//选择城市弹窗
|
||||
cityList: [],
|
||||
isPicker: false,
|
||||
countries: [],
|
||||
multiArray: [[], []],
|
||||
value: [0, 0],
|
||||
selectedData: {}, //城市
|
||||
countryIndex: 0, //抑郁症文字区分国家展示
|
||||
countryText: '',
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
let fixed = uni.getStorageSync('fixed');
|
||||
//如果是诊断标准子页面返回的
|
||||
if(fixed){
|
||||
this.activeTab = 1;
|
||||
}else{
|
||||
this.activeTab = 0;
|
||||
this.getPsycheTree();
|
||||
}
|
||||
this.childrenTab = 0;
|
||||
},
|
||||
onLoad(options) {
|
||||
//清除缓存
|
||||
uni.removeStorageSync('fixed');
|
||||
|
||||
this.title = options.title;
|
||||
this.id = options.id;
|
||||
//如果是心理评测
|
||||
if(this.id==75){
|
||||
this.statusXLCP = true;
|
||||
this.getFormList();
|
||||
}
|
||||
|
||||
//显示城市数据
|
||||
this.getCityList();
|
||||
let countryData = uni.getStorageSync('countryData');
|
||||
let text= '';
|
||||
if(countryData&&countryData.country){
|
||||
text = countryData.country
|
||||
if(countryData.city){
|
||||
text = text + countryData.city
|
||||
}
|
||||
}else{
|
||||
text= '城市';
|
||||
}
|
||||
this.countryText = text;
|
||||
},
|
||||
methods: {
|
||||
//获取数据
|
||||
getData(id){
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
})
|
||||
this.$http.request({
|
||||
url: 'psyche/home/getPsycheCourseList',
|
||||
method: "POST",
|
||||
data: {
|
||||
id: id,
|
||||
limit: this.page.limit,
|
||||
page: this.page.current,
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
uni.hideLoading();
|
||||
if(res.courses.records&&res.courses.records.length>0){
|
||||
this.list = res.courses.records;
|
||||
}else{
|
||||
this.list = [];
|
||||
this.statusNull = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
//二级列表数据
|
||||
getPsycheTree() {
|
||||
this.$http.request({
|
||||
url: 'psyche/home/getChildCoursePsycheTree',
|
||||
method: "POST",
|
||||
data: {
|
||||
id: this.id
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if(res.labels&&res.labels.length>0){
|
||||
this.labelsList = res.labels;
|
||||
|
||||
//如果是心理测评
|
||||
if(this.id == 75){
|
||||
this.XL_id = this.labelsList[0].id;
|
||||
}
|
||||
//判断是否有子级
|
||||
if(this.labelsList[0].isLast == 1) {
|
||||
this.childrenList = [];
|
||||
this.childrenId = this.labelsList[0].id;
|
||||
}else{
|
||||
if(this.labelsList[0].children.length > 0){
|
||||
this.childrenList = this.labelsList[0].children;
|
||||
this.childrenId = this.childrenList[0].id;
|
||||
}else{
|
||||
this.childrenList = [];
|
||||
this.childrenId = null;
|
||||
}
|
||||
}
|
||||
//请求课程列表数据
|
||||
if(this.childrenId){
|
||||
this.getData(this.childrenId);
|
||||
}else{
|
||||
this.getData(this.id);
|
||||
}
|
||||
}else{
|
||||
this.labelsList = [];
|
||||
this.getData(this.id);
|
||||
}
|
||||
});
|
||||
},
|
||||
//切换tab
|
||||
clickTab(item, index){
|
||||
this.statusNull = null;
|
||||
this.activeTab = index;
|
||||
//如果是心理测评
|
||||
if(this.id == 75){
|
||||
this.XL_id = item.id;
|
||||
}
|
||||
if(item.isLast == 1) {
|
||||
this.childrenList = [];
|
||||
this.childrenId = item.id;
|
||||
}else{
|
||||
if(item.children.length > 0){
|
||||
this.childrenList = item.children;
|
||||
this.childrenId = item.children[0].id;
|
||||
//点击tab默认显示第一个children
|
||||
this.childrenTab = 0;
|
||||
}else{
|
||||
this.childrenList = [];
|
||||
this.childrenId = null;
|
||||
}
|
||||
}
|
||||
|
||||
//请求课程列表数据
|
||||
if(this.childrenId){
|
||||
this.getData(this.childrenId);
|
||||
}else{
|
||||
this.getData(this.id);
|
||||
}
|
||||
},
|
||||
//点击children
|
||||
clickChildren(item, index){
|
||||
this.statusNull = null;
|
||||
this.childrenTab = index;
|
||||
this.childrenId = item.id;
|
||||
|
||||
//请求课程列表数据
|
||||
if(this.childrenId){
|
||||
this.getData(this.childrenId);
|
||||
}else{
|
||||
this.getData(this.id);
|
||||
}
|
||||
},
|
||||
//心身量表
|
||||
getFormList() {
|
||||
$http.request({
|
||||
url: "common/selfEvaluationForm/formList",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.formList = res.formList;
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
//获取国家-一级
|
||||
getCountryList() {
|
||||
$http.request({
|
||||
url: "common/baseArea/getAllBaseArea",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.countries = res.baseAreas;
|
||||
this.countries.forEach((country, index)=>{
|
||||
if(country.code=='86'){
|
||||
this.countries[index].cities = this.cityList;
|
||||
}
|
||||
})
|
||||
|
||||
//初始化 picker 数据
|
||||
this.initPickerData();
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//获取城市-二级
|
||||
getCityList() {
|
||||
$http.request({
|
||||
url: "common/province/getProvinceList",
|
||||
method: "POST",
|
||||
data: {},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
const newCityList = res.provinceList.map( city => {
|
||||
return city.provName;
|
||||
});
|
||||
this.cityList = newCityList;
|
||||
this.getCountryList();
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//展示城市数据
|
||||
initPickerData() {
|
||||
//第一列是国家名
|
||||
const countryNames = this.countries.map(item => item.title);
|
||||
this.multiArray[0] = countryNames;
|
||||
//默认选择中国，并加载其省份
|
||||
if (this.countries[0].cities) { //如果默认显示的是第一个-中国，则显示城市列
|
||||
this.multiArray[1] = Object.keys(this.countries[0].cities).map(key => this.countries[0].cities[key]);
|
||||
} else {
|
||||
this.multiArray[1] = [];
|
||||
}
|
||||
//强制更新视图
|
||||
this.$set(this, 'multiArray', [...this.multiArray]);
|
||||
},
|
||||
//picker修改值
|
||||
bindMultiPickerChange(e) {
|
||||
this.value = e.detail.value;
|
||||
this.updateCurrentSelection();
|
||||
},
|
||||
//修改动作
|
||||
bindMultiPickerColumnChange(e) {
|
||||
let data = {
|
||||
multiArray: this.multiArray,
|
||||
value: this.value
|
||||
};
|
||||
if (e.detail.column === 0) {
|
||||
// 如果是第一列（国家）改变了，则需要更新第二列（城市）
|
||||
const selectedCountry = this.countries[e.detail.value];
|
||||
if (selectedCountry.cities) {
|
||||
// 如果选择了中国，加载省份
|
||||
data.multiArray[1] = Object.keys(selectedCountry.cities).map(key => selectedCountry.cities[key]);
|
||||
data.value = [e.detail.value, 0];
|
||||
} else {
|
||||
// 否则清空第二列
|
||||
data.multiArray[1] = [];
|
||||
data.value = [e.detail.value, 0];
|
||||
}
|
||||
}
|
||||
|
||||
this.$set(this, 'multiArray', [...data.multiArray]);
|
||||
this.value = data.value;
|
||||
},
|
||||
updateCurrentSelection() {
|
||||
const countryIndex = this.value[0];
|
||||
this.countryIndex = countryIndex; //判断抑郁结果 标准的定义文字显示
|
||||
const cityIndex = this.value[1];
|
||||
const selectedCountry = this.multiArray[0][countryIndex];
|
||||
const selectedCity = this.multiArray[1][cityIndex];
|
||||
|
||||
this.selectedData = {
|
||||
country: selectedCountry
|
||||
}
|
||||
this.countryText = selectedCountry;
|
||||
if(selectedCity){
|
||||
this.selectedData.city = selectedCity;
|
||||
this.countryText = selectedCountry + selectedCity;
|
||||
}else{
|
||||
this.selectedData.city = ''
|
||||
}
|
||||
uni.setStorageSync('countryData', this.selectedData)
|
||||
},
|
||||
//点击地理位置修改城市
|
||||
changeCountry(){
|
||||
this.initPickerData();
|
||||
},
|
||||
//进入测试
|
||||
test(item){
|
||||
uni.setStorageSync('data',JSON.stringify(item))
|
||||
uni.navigateTo({
|
||||
url: '/pages/curriculum/list/scale'
|
||||
})
|
||||
},
|
||||
//跳转课程详情
|
||||
goToDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
|
||||
});
|
||||
},
|
||||
//诊断标准
|
||||
clickLevel(){
|
||||
uni.navigateTo({
|
||||
url: '/pages/curriculum/list/level'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPageBox{
|
||||
background: #eff5f8;
|
||||
height: 100vh;
|
||||
}
|
||||
.list_block{
|
||||
padding: 20rpx 20rpx 0;
|
||||
}
|
||||
.list_item{
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
padding: 30rpx 20rpx 70rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.list_item_image,.image_null{
|
||||
width: 250rpx;
|
||||
height: 220rpx;
|
||||
background-color: rgba(125, 193, 240, 0.1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.list_item_image image{
|
||||
width: 100%;
|
||||
}
|
||||
.list_item_right{
|
||||
margin-left: 30rpx;
|
||||
width: calc(100% - 250rpx);
|
||||
}
|
||||
.list_item_title{
|
||||
font-size: 30rpx;
|
||||
line-height: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.list_item_content{
|
||||
margin-top: 15rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: #999;
|
||||
max-height: 108rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.list_item_study{
|
||||
line-height: 48rpx;
|
||||
background: #7dc1f0;
|
||||
color: #fff;
|
||||
border-radius: 40rpx;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.list_item_bt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
bottom: 30rpx;
|
||||
}
|
||||
.list_item_price{
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 30rpx;
|
||||
color: red;
|
||||
line-height: 54rpx;
|
||||
}
|
||||
.text_null{
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin: 150rpx 0;
|
||||
}
|
||||
.image_null{
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.labels_block{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
height: 40px;
|
||||
}
|
||||
.labels_item{
|
||||
line-height: 76rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
}
|
||||
.active_tab{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.line-item{
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
width: 55rpx;
|
||||
height: 6rpx;
|
||||
background: #7dc1f0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.active_tab .line-item{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.children_block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 50px 10rpx 0;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.children_item{
|
||||
margin: 0 10rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
border: 1rpx solid #999;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.active_children{
|
||||
color: #fff;
|
||||
background: #7dc1f0;
|
||||
border: 1rpx solid #7dc1f0;
|
||||
}
|
||||
|
||||
.xlcp_block{
|
||||
padding: 0 20rpx;
|
||||
margin-top: 90rpx;
|
||||
}
|
||||
.xlcp_block_2{
|
||||
margin-top: 110rpx;
|
||||
}
|
||||
.form_item{
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.form_solid{
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx 20rpx 50rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
}
|
||||
.form_title{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
.form_des{
|
||||
font-size: 30rpx;
|
||||
line-height: 48rpx;
|
||||
color: #666;
|
||||
}
|
||||
.form_btn{
|
||||
width: 300rpx;
|
||||
height: 70rpx;
|
||||
margin: 40rpx auto 0;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background: #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.popup_mark{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
.popup_block{
|
||||
width: 580rpx;
|
||||
height: 360rpx;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -180rpx;
|
||||
margin-left: -290rpx;
|
||||
background: #fff;
|
||||
z-index: 99;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.popup_title{
|
||||
display: block;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.popup_con{
|
||||
font-size: 28rpx;
|
||||
padding-top: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.popup_picker{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.scale_btn{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background: #294a97;
|
||||
border: none;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.curseSet{
|
||||
margin-right: 18rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.level_block{
|
||||
border-radius: 10rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
}
|
||||
.level_item{
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
font-size: 32rpx;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.level_item:last-child{
|
||||
border-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
93
pages/curriculum/list/level.vue
Normal file
93
pages/curriculum/list/level.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="commonPageBox">
|
||||
<z-nav-bar title="诊断标准" @back='handleBack'></z-nav-bar>
|
||||
<view class="xlcp_block">
|
||||
<view class="level_block">
|
||||
<view class="level_item">
|
||||
<text class="level_title">自恋型人格障碍诊断标准</text>
|
||||
<view class="level_con">
|
||||
1.自高自大，对自己的才能夸大其辞，希望受人特别关注。<br/>
|
||||
2.坚信他关注的问题是世上独有的，不能被某些特殊的人物了解。<br/>
|
||||
3.对权力、金钱、荣誉、美丽或理想爱情有过分幻想。<br/>
|
||||
4.缺乏同情心。<br/>
|
||||
5.有很强的嫉妒心。<br/>
|
||||
6.对批评的反应是愤怒、羞愧或感到耻辱（尽管不一定当即表露出来）。<br/>
|
||||
7.渴望持久的关注与赞美。<br/>
|
||||
8.喜欢指使他人，要他人为自己服务。<br/>
|
||||
9.认为自己应享有他人没有的特权。<br/>
|
||||
10.亲密关系困难。
|
||||
<view class="level_bold">
|
||||
<text>*</text>只要出现其中的五项，即可诊断为自恋型人格障碍。
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleBack(){
|
||||
uni.setStorageSync('fixed', true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPageBox{
|
||||
background: #eff5f8;
|
||||
height: 100vh;
|
||||
}
|
||||
.xlcp_block{
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.level_item{
|
||||
|
||||
}
|
||||
.level_title{
|
||||
display: inline-block;
|
||||
color: #333;
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
text-align: center;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
.level_con{
|
||||
padding-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
color: #333;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 30rpx 20rpx 30rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
}
|
||||
.level_bold{
|
||||
color: #333;
|
||||
display: block;
|
||||
padding-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.level_bold text{
|
||||
color: red;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
290
pages/curriculum/list/scale.vue
Normal file
290
pages/curriculum/list/scale.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="viewWrap">
|
||||
<z-nav-bar :title="title"></z-nav-bar>
|
||||
<view class="scale_block" v-show="status==0">
|
||||
<text class="scale_title">{{data.title}}</text>
|
||||
<view class="scale_solid">
|
||||
<view class="scale_des"><text style="font-weight: bold;">量表简介：</text>{{data.des}}</view>
|
||||
<view class="scale_des"><text style="font-weight: bold;">题目数量：</text>{{data.num}}</view>
|
||||
<view class="scale_des"><text style="font-weight: bold;">测试说明：</text>{{data.tip}}</view>
|
||||
</view>
|
||||
<u-button class="scale_btn" @click="startTest">开始测试</u-button>
|
||||
</view>
|
||||
<view class="scale_block" v-show="status==1">
|
||||
<view class="test_block">
|
||||
<text class="current_test">{{currentIndex+1}}、{{testList[currentIndex]}}</text>
|
||||
<radio-group @change="radioChange" class="test_group" :style="{ height: radioHeight + 'px' }">
|
||||
<label v-for="(item,index) in checkList" :key="index" class="test_label">
|
||||
<radio :value="String(item.value)" class="test_radio">{{item.name}}</radio>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scale_block" v-show="status==2">
|
||||
<view class="result_block">
|
||||
<text class="result_title">{{data.title}}-测试结果</text>
|
||||
<text class="result_total">{{resultTotal}}分</text>
|
||||
<text class="result_content">{{resultContent}}</text>
|
||||
<u-button class="result_btn" @click="back">回到测试页</u-button>
|
||||
|
||||
<view class="result_border">
|
||||
<text class="result_con">结果解释：</text>
|
||||
<text class="result_cnRes" v-if="data.type=='yiyu'&&countryIndex==0">{{data.cnRes}}</text>
|
||||
<text class="result_cnRes" v-else>{{data.worldRes}}</text>
|
||||
<text class="result_con" style="padding-top: 40rpx;">计分规则：</text>
|
||||
<text class="result_cnRes">{{data.role}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
countries: [],
|
||||
multiArray: [[], []],
|
||||
value: [0, 0],
|
||||
selectedData: {}, //城市
|
||||
status: 0, //是否进入测试
|
||||
title: '心理测评',
|
||||
countryIndex: 0,
|
||||
timer: null, // 用来绑定当前选择的值
|
||||
checkList: [], //默认选项列表
|
||||
testList: [], //测试题目数据
|
||||
currentIndex: 0, //默认第一题
|
||||
resList: [], //测试结果数据集合，用于传参！记录！
|
||||
radioHeight: '',
|
||||
resultContent: '',
|
||||
resultTotal: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.selectedData = uni.getStorageSync('countryData');
|
||||
this.data = JSON.parse(uni.getStorageSync('data'));
|
||||
this.resultList = this.data.result;
|
||||
//选项
|
||||
this.checkList = this.resultList.map((item, index) => ({
|
||||
name: item,
|
||||
value: index+1
|
||||
}));
|
||||
this.getTestData();
|
||||
//radioHeight
|
||||
this.radioHeight = this.checkList.length*42 +20;
|
||||
},
|
||||
methods: {
|
||||
//开始测试
|
||||
startTest(){
|
||||
//切换界面，进入测试
|
||||
this.status = 1;
|
||||
this.title = '开始测试题';
|
||||
},
|
||||
//测试题目
|
||||
getTestData(){
|
||||
$http.request({
|
||||
url: "common/selfEvaluationForm/formSubjectList",
|
||||
method: "POST",
|
||||
data: {
|
||||
type: this.data.type
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
if(res.list&&res.list.length>0){
|
||||
this.testList = res.list; //题目数据
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '暂无数据',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//选值
|
||||
radioChange(e){
|
||||
const value = e.detail.value;
|
||||
this.resList.push(Number(value)); //记录测试结果集合
|
||||
//延迟展示下一题
|
||||
if (this.currentIndex < this.testList.length - 1) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.currentIndex++;
|
||||
this.checkList = []
|
||||
//延迟更换选项，避免再显示被勾选
|
||||
this.timer = setTimeout(() => {
|
||||
this.checkList = this.resultList.map((item, index) => ({
|
||||
name: item,
|
||||
value: index+1
|
||||
}));
|
||||
}, 50)
|
||||
}, 500)
|
||||
}else{
|
||||
//如果做完最后一道题
|
||||
this.getCountForm();
|
||||
}
|
||||
},
|
||||
//测试结果
|
||||
getCountForm(){
|
||||
$http.request({
|
||||
url: "common/selfEvaluationForm/countForm",
|
||||
method: "POST",
|
||||
data: {
|
||||
country: this.selectedData.country,
|
||||
city: this.selectedData.city,
|
||||
type: this.data.type,
|
||||
resList: this.resList
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.status = 2;
|
||||
this.resultContent = res.status;
|
||||
this.resultTotal = res.total;
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//回到首页
|
||||
back(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.viewWrap{
|
||||
height: 100vh;
|
||||
background-color: #f4f7ff;
|
||||
}
|
||||
.scale_block{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.scale_item{
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.scale_solid{
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
}
|
||||
.scale_title{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
.scale_des{
|
||||
font-size: 30rpx;
|
||||
line-height: 48rpx;
|
||||
color: #666;
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
.scale_btn{
|
||||
width: 80%;
|
||||
height: 85rpx;
|
||||
margin: 60rpx auto 0;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
background: #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.test_group{
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.uni-radio-input{
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.test_label{
|
||||
display: block;
|
||||
padding: 20rpx 0;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.test_radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.current_test{
|
||||
font-size: 32rpx;
|
||||
padding-top: 30rpx;
|
||||
color: #000;
|
||||
display: block;
|
||||
}
|
||||
.result_block{
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 80rpx 30rpx 50rpx;
|
||||
color: #333;
|
||||
}
|
||||
.result_title{
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_total{
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
line-height: 50rpx;
|
||||
font-weight: 800;
|
||||
color: crimson;
|
||||
padding: 60rpx 0 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_content{
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_btn{
|
||||
width: 500rpx;
|
||||
height: 80rpx;
|
||||
margin: 60rpx auto 0;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background: #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.result_cnRes{
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.result_con{
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
color: crimson;
|
||||
}
|
||||
.result_border{
|
||||
border: 1rpx solid #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
</style>
|
||||
290
pages/curriculum/list/scale1.vue
Normal file
290
pages/curriculum/list/scale1.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<view class="viewWrap">
|
||||
<z-nav-bar :title="title"></z-nav-bar>
|
||||
<view class="scale_block" v-show="status==0">
|
||||
<text class="scale_title">{{data.title}}</text>
|
||||
<view class="scale_solid">
|
||||
<view class="scale_des"><text style="font-weight: bold;">量表简介：</text>{{data.des}}</view>
|
||||
<view class="scale_des"><text style="font-weight: bold;">题目数量：</text>{{data.num}}</view>
|
||||
<view class="scale_des"><text style="font-weight: bold;">测试说明：</text>{{data.tip}}</view>
|
||||
</view>
|
||||
<u-button class="scale_btn" @click="startTest">开始测试</u-button>
|
||||
</view>
|
||||
<view class="scale_block" v-show="status==1">
|
||||
<view class="test_block">
|
||||
<text class="current_test">{{currentIndex+1}}、{{testList[currentIndex]}}</text>
|
||||
<radio-group @change="radioChange" class="test_group" :style="{ height: radioHeight + 'px' }">
|
||||
<label v-for="(item,index) in checkList" :key="index" class="test_label">
|
||||
<radio :value="String(item.value)" class="test_radio">{{item.name}}</radio>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scale_block" v-show="status==2">
|
||||
<view class="result_block">
|
||||
<text class="result_title">{{data.title}}-测试结果</text>
|
||||
<text class="result_total">{{resultTotal}}分</text>
|
||||
<text class="result_content">{{resultContent}}</text>
|
||||
<u-button class="result_btn" @click="back">回到测试页</u-button>
|
||||
|
||||
<view class="result_border">
|
||||
<text class="result_con">结果解释：</text>
|
||||
<text class="result_cnRes" v-if="data.type=='yiyu'&&countryIndex==0">{{data.cnRes}}</text>
|
||||
<text class="result_cnRes" v-else>{{data.worldRes}}</text>
|
||||
<text class="result_con" style="padding-top: 40rpx;">计分规则：</text>
|
||||
<text class="result_cnRes">{{data.role}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
countries: [],
|
||||
multiArray: [[], []],
|
||||
value: [0, 0],
|
||||
selectedData: {}, //城市
|
||||
status: 0, //是否进入测试
|
||||
title: '心理测评',
|
||||
countryIndex: 0,
|
||||
timer: null, // 用来绑定当前选择的值
|
||||
checkList: [], //默认选项列表
|
||||
testList: [], //测试题目数据
|
||||
currentIndex: 0, //默认第一题
|
||||
resList: [], //测试结果数据集合，用于传参！记录！
|
||||
radioHeight: '',
|
||||
resultContent: '',
|
||||
resultTotal: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.selectedData = uni.getStorageSync('countryData');
|
||||
this.data = JSON.parse(uni.getStorageSync('data'));
|
||||
this.resultList = this.data.result;
|
||||
//选项
|
||||
this.checkList = this.resultList.map((item, index) => ({
|
||||
name: item,
|
||||
value: index+1
|
||||
}));
|
||||
this.getTestData();
|
||||
//radioHeight
|
||||
this.radioHeight = this.checkList.length*42 +20;
|
||||
},
|
||||
methods: {
|
||||
//开始测试
|
||||
startTest(){
|
||||
//切换界面，进入测试
|
||||
this.status = 1;
|
||||
this.title = '开始测试题';
|
||||
},
|
||||
//测试题目
|
||||
getTestData(){
|
||||
$http.request({
|
||||
url: "common/selfEvaluationForm/formSubjectList",
|
||||
method: "POST",
|
||||
data: {
|
||||
type: this.data.type
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
if(res.list&&res.list.length>0){
|
||||
this.testList = res.list; //题目数据
|
||||
}else{
|
||||
uni.showToast({
|
||||
title: '暂无数据',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//选值
|
||||
radioChange(e){
|
||||
const value = e.detail.value;
|
||||
this.resList.push(Number(value)); //记录测试结果集合
|
||||
//延迟展示下一题
|
||||
if (this.currentIndex < this.testList.length - 1) {
|
||||
this.timer = setTimeout(() => {
|
||||
this.currentIndex++;
|
||||
this.checkList = []
|
||||
//延迟更换选项，避免再显示被勾选
|
||||
this.timer = setTimeout(() => {
|
||||
this.checkList = this.resultList.map((item, index) => ({
|
||||
name: item,
|
||||
value: index+1
|
||||
}));
|
||||
}, 50)
|
||||
}, 500)
|
||||
}else{
|
||||
//如果做完最后一道题
|
||||
this.getCountForm();
|
||||
}
|
||||
},
|
||||
//测试结果
|
||||
getCountForm(){
|
||||
$http.request({
|
||||
url: "common/selfEvaluationForm/countForm",
|
||||
method: "POST",
|
||||
data: {
|
||||
country: this.selectedData.country,
|
||||
city: this.selectedData.city,
|
||||
type: this.data.type,
|
||||
resList: this.resList
|
||||
},
|
||||
header: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
})
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
this.status = 2;
|
||||
this.resultContent = res.status;
|
||||
this.resultTotal = res.total;
|
||||
}
|
||||
}).catch(e => {
|
||||
|
||||
});
|
||||
},
|
||||
//回到首页
|
||||
back(){
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.viewWrap{
|
||||
height: 100vh;
|
||||
background-color: #f4f7ff;
|
||||
}
|
||||
.scale_block{
|
||||
padding: 20rpx;
|
||||
}
|
||||
.scale_item{
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
.scale_solid{
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0px 0px 10px 0px #a7bbe4;
|
||||
}
|
||||
.scale_title{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
font-size: 42rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
padding: 30rpx 0 20rpx;
|
||||
}
|
||||
.scale_des{
|
||||
font-size: 30rpx;
|
||||
line-height: 48rpx;
|
||||
color: #666;
|
||||
padding: 5rpx 0;
|
||||
}
|
||||
.scale_btn{
|
||||
width: 80%;
|
||||
height: 85rpx;
|
||||
margin: 60rpx auto 0;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
background: #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.test_group{
|
||||
margin-top: 20rpx;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.uni-radio-input{
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
}
|
||||
.test_label{
|
||||
display: block;
|
||||
padding: 20rpx 0;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.test_radio{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.current_test{
|
||||
font-size: 32rpx;
|
||||
padding-top: 30rpx;
|
||||
color: #000;
|
||||
display: block;
|
||||
}
|
||||
.result_block{
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
padding: 80rpx 30rpx 50rpx;
|
||||
color: #333;
|
||||
}
|
||||
.result_title{
|
||||
display: block;
|
||||
font-size: 36rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_total{
|
||||
display: block;
|
||||
font-size: 52rpx;
|
||||
line-height: 50rpx;
|
||||
font-weight: 800;
|
||||
color: crimson;
|
||||
padding: 60rpx 0 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_content{
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.result_btn{
|
||||
width: 500rpx;
|
||||
height: 80rpx;
|
||||
margin: 60rpx auto 0;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
background: #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.result_cnRes{
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
line-height: 48rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.result_con{
|
||||
display: block;
|
||||
font-size: 32rpx;
|
||||
line-height: 48rpx;
|
||||
color: crimson;
|
||||
}
|
||||
.result_border{
|
||||
border: 1rpx solid #7dc1f0;
|
||||
border-radius: 10rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
</style>
|
||||
22
pages/curriculum/order/back.vue
Normal file
22
pages/curriculum/order/back.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<view style="background-color: #000;"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
plus.screen.lockOrientation("portrait-primary");
|
||||
uni.navigateBack({
|
||||
delta:1
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
799
pages/curriculum/order/detail.vue
Normal file
799
pages/curriculum/order/detail.vue
Normal file
@@ -0,0 +1,799 @@
|
||||
<template>
|
||||
<view class="commonPageBox commonDetailPage" style="background-color: #fff">
|
||||
<template v-show="!screenLoading">
|
||||
<z-nav-bar title="教学内容"></z-nav-bar>
|
||||
|
||||
<view
|
||||
class="contentBox curriculum_box"
|
||||
:style="`height:calc(100% - ${60 + statusBarHeight}px !important;${
|
||||
isFullScreen ? 'background:#000' : ''
|
||||
}`"
|
||||
>
|
||||
<view
|
||||
:style="`background:#000;height:200px;`"
|
||||
v-if="videoArray.length > 0"
|
||||
>
|
||||
<common-video
|
||||
:isfresh="isfresh"
|
||||
v-if="isfresh"
|
||||
:secondCountDown="secondCountDown"
|
||||
@handleFresh="handleFresh"
|
||||
@changeScreen="changeScreen"
|
||||
@changeScreenLoading="changeScreenLoading"
|
||||
ref="commonVideo"
|
||||
:currentVideoId="currentVideoId"
|
||||
:currentVideoIndex="currentVideoIndex"
|
||||
:curriculumData="{...curriculumData,curriculumImgUrl:options.curriculumImgUrl}"
|
||||
>
|
||||
</common-video>
|
||||
<view style="color: #fff"></view>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y="true"
|
||||
class="scroll-Y"
|
||||
>
|
||||
<view class="" style="padding: 20rpx; font-size: 34rpx; color: #333"
|
||||
>课程：{{ options.navTitle }}
|
||||
</view>
|
||||
<view style="padding: 20rpx; margin-bottom: 40rpx">
|
||||
章节： {{ curriculumData.title }}
|
||||
</view>
|
||||
<view
|
||||
v-if="videoArray.length > 0"
|
||||
class="PM_font"
|
||||
style="padding: 20rpx; font-size: 40rpx; color: #294a97"
|
||||
>视频教学</view
|
||||
>
|
||||
<view class="scroll-view-item">
|
||||
<common-curriculum-video
|
||||
v-if="videoArray.length > 0"
|
||||
:detailInfo="curriculumData"
|
||||
:currentVideo="currentVideo"
|
||||
:dataList="videoArray"
|
||||
@open="changeVideo"
|
||||
>
|
||||
</common-curriculum-video>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="PM_font"
|
||||
style="padding: 20rpx; font-size: 40rpx; color: #333"
|
||||
>文章简介</view
|
||||
>
|
||||
<view class="scroll-view-item" style="padding-bottom: 80rpx;">
|
||||
<common-rich-detail :detailInfo="{ ...curriculumData, title: '' }">
|
||||
<image
|
||||
v-if="curriculumData.imgUrl"
|
||||
@click="previewImage(curriculumData.imgUrl)"
|
||||
:src="curriculumData.imgUrl"
|
||||
mode="widthFix"
|
||||
class="headImage"
|
||||
></image>
|
||||
</common-rich-detail>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<p class="aui-text-danger">
|
||||
本课程版权归天津众妙之门科技有限公司所有，翻版必究!
|
||||
</p>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view
|
||||
style="
|
||||
background-color: red;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
"
|
||||
v-show="screenLoading"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import courseDescription from "@/pages/component/commonComponents/list";
|
||||
import curriculumMp3 from "./mp3Detail.vue";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
courseDescription, //课程说明
|
||||
curriculumMp3, //mp3
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
secondCountDown: 10,
|
||||
isFullScreen: false,
|
||||
screenLoading: false,
|
||||
isfresh: false,
|
||||
currentCateIndex: 0,
|
||||
currentVideo: {},
|
||||
videoList: {},
|
||||
isOpenMp3: false,
|
||||
praise: "",
|
||||
reward: "",
|
||||
commentLst: [],
|
||||
correlationiList: [
|
||||
|
||||
],
|
||||
options: {},
|
||||
videoArrayHW: [],
|
||||
videoArray: [],
|
||||
relatedCoursesList: [], //相关课程
|
||||
medicalCasesList: [], //相关医案
|
||||
curriculumData: {},
|
||||
curriculumInfo: {},
|
||||
fdButtonStyle: {
|
||||
width: "120rpx",
|
||||
"border-color": "#000",
|
||||
color: "#000",
|
||||
float: "right",
|
||||
"margin-right": "20rpx",
|
||||
"margin-left": "30rpx",
|
||||
},
|
||||
modalInfo: {},
|
||||
|
||||
show: false,
|
||||
playData: {},
|
||||
taiHuClassInfo: {},
|
||||
searchValue: "",
|
||||
ordersTabs: [
|
||||
{
|
||||
name: "视频教学",
|
||||
|
||||
type: "1",
|
||||
},
|
||||
{
|
||||
name: "文章简介",
|
||||
type: "2",
|
||||
},
|
||||
], // 一级分类标题1
|
||||
cateList: [], // 一级分类标题1
|
||||
twoCateList: [], // 二级分类标题
|
||||
dataList: [], // 方剂标题
|
||||
allDataList: [], // 方剂标题
|
||||
currentStatusIndex: 0, // 当前选中的一级分类
|
||||
|
||||
curTwoCateIndex: 0, // 当前选中的二级分类
|
||||
searchList: [], // 搜索结果数组
|
||||
showSearchList: false,
|
||||
userMes: {}, // 用户信息
|
||||
searchDisable: false, // 搜索不可用
|
||||
limitShow: false,
|
||||
|
||||
limitTitle: "提示",
|
||||
limitContent: "",
|
||||
scrollViewHeight: 0,
|
||||
urlList: {
|
||||
detail: "sociology/course/getCourseCatalogueChapterDetail",
|
||||
checkVideo: "sociology/course/checkVideo",
|
||||
curriculumInfo: "app/phone.do?getCourseInfo",
|
||||
},
|
||||
currentVideoId: null,
|
||||
currentVideoIndex: null,
|
||||
currentSelectVideoId: null,
|
||||
currentSelectVideo: {},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.options = options;
|
||||
this.getCourseDescriptionData();
|
||||
|
||||
this.screenLoading = false;
|
||||
this.currentCateIndex = 0;
|
||||
},
|
||||
onHide() {},
|
||||
onShow() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
watch: {
|
||||
currentVideoId() {
|
||||
this.currentVideoIndex = this.videoArray.findIndex(
|
||||
|
||||
(e) => e.id == this.currentVideoId
|
||||
)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
changeScreenLoading(status) {
|
||||
this.screenLoading = status;
|
||||
},
|
||||
changeScreen(status) {
|
||||
this.isFullScreen = status;
|
||||
},
|
||||
ordersTabCLi(data) {
|
||||
console.log("i at line 312:", data);
|
||||
this.currentCateIndex = data.index;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
handleFresh(status) {
|
||||
this.isfresh = status;
|
||||
this.$forceUpdate();
|
||||
},
|
||||
changeVideo(data) {
|
||||
if (data.id != this.currentVideo.id) {
|
||||
this.isfresh = false;
|
||||
this.$nextTick(() => {
|
||||
this.currentVideo = data;
|
||||
this.currentVideoId = data.id;
|
||||
|
||||
this.isfresh = true;
|
||||
});
|
||||
}
|
||||
},
|
||||
hancleModalCancel() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClickMore(v, i, status) {
|
||||
this.$set(this.correlationiList[i], "isOpen", status);
|
||||
},
|
||||
hancleModalConfirm() {
|
||||
var data = {
|
||||
values: {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
...this.taiHuClassInfo,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
//课程详情
|
||||
gotoDetail(v) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/detail?navTitle=${v.title}&title=${v.title}&oid=${v.oid}`,
|
||||
});
|
||||
},
|
||||
//相关课程
|
||||
goCourseDescription(v) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/index?navTitle=${v.title}&title=${v.title}&id=${v.id}`,
|
||||
});
|
||||
},
|
||||
async getCourseDescriptionData() {
|
||||
this.isfresh = false;
|
||||
var data = {
|
||||
id: this.options.id,
|
||||
load: false,
|
||||
};
|
||||
var that = this;
|
||||
$http.request({
|
||||
url: that.urlList.detail,
|
||||
method: "POST",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
that.curriculumData = res.data.detail;
|
||||
that.videoArray = res.data.videos;
|
||||
if (that.videoArray.length > 0) {
|
||||
that.currentVideo = that.videoArray[0];
|
||||
that.currentVideoId = that.videoArray[0].id;
|
||||
|
||||
that.isfresh = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
getPriceData() {
|
||||
var that = this;
|
||||
setTimeout(() => {
|
||||
that.$nextTick(() => {
|
||||
that.$refs.priceDetail.getData();
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
// 检查是有权限使用搜索功能
|
||||
checkDisable() {},
|
||||
|
||||
// 获取用户详情
|
||||
getUserInfo() {
|
||||
// 用户详情
|
||||
if (this.userInfo.id != undefined) {
|
||||
this.$http.post("book/user/info/" + this.userInfo.id).then((res) => {
|
||||
this.userMes = res.user;
|
||||
this.getCateList();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async handleselectCate(item, index) {
|
||||
this.dataList = [];
|
||||
var data = [];
|
||||
|
||||
var that = this;
|
||||
this.$http
|
||||
.post(this.urlList.curriculumInfo, {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
oid: item.coid,
|
||||
})
|
||||
.then(async (res) => {
|
||||
that.curriculumInfo = res.obj;
|
||||
that.dataList = res.obj.courseList;
|
||||
});
|
||||
|
||||
this.searchValue = "";
|
||||
this.searchList = [];
|
||||
this.showSearchList = false;
|
||||
|
||||
return data;
|
||||
},
|
||||
async setOneCateIndex(item, index) {
|
||||
this.allDataList = [];
|
||||
|
||||
var that = this;
|
||||
|
||||
this.currentStatusIndex = index;
|
||||
this.searchValue = "";
|
||||
this.searchList = [];
|
||||
this.showSearchList = false;
|
||||
this.$nextTick(async () => {
|
||||
await that.getCourseDescriptionData();
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
|
||||
transformData(inputData) {
|
||||
const result = {};
|
||||
inputData.forEach((item) => {
|
||||
const { letter } = item;
|
||||
if (!result[letter]) {
|
||||
result[letter] = [];
|
||||
}
|
||||
result[letter].push(item);
|
||||
});
|
||||
return result;
|
||||
},
|
||||
|
||||
getCateList(id) {
|
||||
id ? "" : (id = 0);
|
||||
this.twoCateList = [];
|
||||
this.curTwoCateIndex = 0;
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/static/mixin.scss";
|
||||
.searchList {
|
||||
.item {
|
||||
font-size: 28rpx;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1px solid #dadbde;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view_H {
|
||||
background-color: #fff;
|
||||
white-space: nowrap;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
height: 100vh;
|
||||
|
||||
.statusList {
|
||||
padding: 10rpx;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
|
||||
text {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 32%;
|
||||
padding: 20rpx 0;
|
||||
font-size: 34rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.cur {
|
||||
background-color: $themeColor;
|
||||
color: #fff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.twoCateList {
|
||||
font-size: 28rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.grid-text {
|
||||
padding: 10rpx 0rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cur {
|
||||
color: $themeColor;
|
||||
}
|
||||
|
||||
// .u-grid-list{border: 0.5px solid #dadbde;}
|
||||
}
|
||||
|
||||
.dataList {
|
||||
font-size: 26rpx;
|
||||
// margin-top: 20rpx;
|
||||
// padding: 32rpx 0rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f8f9fa;
|
||||
box-sizing: border-box;
|
||||
|
||||
.JFtitleItem {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx 10rpx;
|
||||
width: 100%;
|
||||
border-bottom: 0.5px solid #f8f9fa;
|
||||
}
|
||||
|
||||
.wmzhimg {
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search_box {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
width: calc(100% - 10px);
|
||||
margin-top: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.search {
|
||||
height: 56upx;
|
||||
display: flex;
|
||||
width: 86%;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
padding: 0upx 40upx;
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
box-shadow: 0 0px 10px 1px $themeColor;
|
||||
}
|
||||
|
||||
.prompt {
|
||||
color: #838383;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.icon_search {
|
||||
background-image: url("@/static/icon/map_ic_search.png");
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 36upx;
|
||||
height: 36upx;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.uni-modal .uni-modal__bd {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.limiTy {
|
||||
font-size: 28rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.chImage {
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.dataList {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titleList2 {
|
||||
height: calc(100% - 150rpx);
|
||||
}
|
||||
|
||||
.priceDetail {
|
||||
height: calc(100% - 180rpx) !important;
|
||||
padding: 0rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.componentPage {
|
||||
height: calc(100% - 90rpx) !important;
|
||||
}
|
||||
|
||||
.dateReminder {
|
||||
width: 100%;
|
||||
font-size: 24rpx;
|
||||
text-align: right;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.fdButtonBox {
|
||||
border: 1rpx solid $themeColor;
|
||||
background-color: $themeColor;
|
||||
color: #fff;
|
||||
// width: 100%;
|
||||
float: right;
|
||||
padding: 4rpx 14rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
line-height: 30rpx;
|
||||
border-radius: 10rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
// margin-top: 20rpx;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
.headImage {
|
||||
// height: 400rpx !important;
|
||||
}
|
||||
|
||||
.commonDetailPage {
|
||||
}
|
||||
|
||||
.curriulum_box {
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
|
||||
.curriulum_title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.curriulum_title {
|
||||
width: calc(100% - 80rpx);
|
||||
|
||||
font-size: 32rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.titleItem {
|
||||
// width: calc(100% - 120rpx) !important;
|
||||
}
|
||||
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.dataList {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.small_class_teaching_box {
|
||||
width: 100%;
|
||||
margin-top: 20rpx;
|
||||
background: #b7e0e2;
|
||||
|
||||
.small_class_teaching_top {
|
||||
padding: 20rpx 20rpx 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// background: #EDFCF7;
|
||||
color: #8f8e8e;
|
||||
|
||||
// box-shadow: 0px 0px 6rpx 0px #E9DCCC;
|
||||
.icon1 {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
|
||||
.small_class_teaching_top_left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #018f89;
|
||||
|
||||
font-family: MicrosoftYaHei;
|
||||
}
|
||||
}
|
||||
|
||||
.small_class_teaching_content {
|
||||
margin-top: 20rpx;
|
||||
// background: #EDFCF7;
|
||||
padding-bottom: 10rpx;
|
||||
|
||||
.top {
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 4rpx solid #fff;
|
||||
|
||||
.top_item {
|
||||
width: 23%;
|
||||
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||||
font-weight: normal;
|
||||
font-size: 34rpx;
|
||||
color: #018f89;
|
||||
line-height: 80rpx;
|
||||
background: #cef8ea;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0px 6rpx 0px #e9dccc;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: 20rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
color: #018f89;
|
||||
|
||||
font-family: MicrosoftYaHei;
|
||||
|
||||
.icon_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0rpx;
|
||||
|
||||
.icon1 {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.progress_box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.progress_icon {
|
||||
width: calc(100% - 240rpx);
|
||||
}
|
||||
|
||||
.icon1 {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
|
||||
.icon2 {
|
||||
width: 140rpx;
|
||||
height: 100rpx;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
// margin-top: -20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related_courses_box {
|
||||
background-color: #fff;
|
||||
|
||||
.small_class_teaching_content {
|
||||
padding: 10rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.related_courses_name {
|
||||
display: inline-block;
|
||||
width: calc(100% - 150rpx) !important;
|
||||
|
||||
.aui-text-danger {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.curriculum_box {
|
||||
.curriculum_title {
|
||||
padding: 20rpx 40rpx 0;
|
||||
font-size: 38rpx;
|
||||
line-height: 66rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.aui-text-danger{
|
||||
width:100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.curriculum_content {
|
||||
background-color: #fff;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.richDetail {
|
||||
height: auto !important;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.dianzan_box {
|
||||
width: calc(100% - 80rpx);
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 20rpx;
|
||||
color: #6e6e6e;
|
||||
font-weight: 600;
|
||||
text-align: justify;
|
||||
background: #f4fffb;
|
||||
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0px 6rpx 0px #e9dccc;
|
||||
}
|
||||
|
||||
.dashang_box {
|
||||
color: #ff5521;
|
||||
background: #fff7f4;
|
||||
box-shadow: 0px 0px 6rpx 0px rgba(255, 85, 33, 0.4);
|
||||
}
|
||||
|
||||
.correlation_box {
|
||||
background-color: #fff;
|
||||
padding-bottom: 40rpx;
|
||||
|
||||
.title {
|
||||
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
|
||||
font-weight: normal;
|
||||
font-size: 40rpx;
|
||||
color: #018f89;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.close {
|
||||
text-align: center;
|
||||
color: #b0b0b0;
|
||||
line-height: 40rpx;
|
||||
margin-top: 10rpx;
|
||||
// padding-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1325
pages/curriculum/order/index.vue
Normal file
1325
pages/curriculum/order/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
367
pages/curriculum/order/mp3Detail.vue
Normal file
367
pages/curriculum/order/mp3Detail.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<view
|
||||
class="container commonPageBox commonDetailPage"
|
||||
style="position: relative; height: auto"
|
||||
>
|
||||
|
||||
<video
|
||||
@timeupdate="videoTimeUpdateEvent($event)"
|
||||
ref="videos"
|
||||
style="width: 100%; height: 60rpx"
|
||||
autoplay
|
||||
id="videoId"
|
||||
controls
|
||||
:show-progress="true"
|
||||
:show-fullscreen-btn="false"
|
||||
object-fit="contain"
|
||||
class="video-box"
|
||||
:src="videoUrl"
|
||||
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
|
||||
@play="playVideo"
|
||||
></video>
|
||||
|
||||
<!-- 倍速 -->
|
||||
<view class="play-rate" @click="videoPlayRate" v-if="showRate">{{ playbackRate }}x</view>
|
||||
<!-- 倍速菜单 -->
|
||||
<ul class="play-rate-menu" :style="{ height: height }" v-if="showRateMenu">
|
||||
<li
|
||||
v-for="item in playbackRates"
|
||||
:key="item"
|
||||
:class="[{ activeRate: playbackRate === item }, 'play-rate-item']"
|
||||
@click="changePlayRate(item)"
|
||||
>
|
||||
{{ item }}x
|
||||
</li>
|
||||
</ul>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import courseDescription from "@/pages/component/commonComponents/list";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
courseDescription, //课程说明
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
playbackRate: 1, // 初始播放速率
|
||||
showRateMenu: false, //显示播放速率
|
||||
speedState: 1,
|
||||
timer: null,
|
||||
videoUrl: "",
|
||||
currentTime: 0,
|
||||
firstTime: 0,
|
||||
|
||||
options: {},
|
||||
videoData: {},
|
||||
isSetFirstTime: false,
|
||||
currentVideoTime: "", //初始播放时长（秒）
|
||||
urlList: {
|
||||
detail: "sociology/course/getCourseCatalogueChapterDetail",
|
||||
curriculumInfo: "app/phone.do?getCourseInfo",
|
||||
},
|
||||
};
|
||||
},
|
||||
async onUnload() {
|
||||
this.timer = null;
|
||||
// #ifdef APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/order/back",
|
||||
});
|
||||
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
|
||||
// #endif
|
||||
await this.setVideoTime();
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
// 显示倍速
|
||||
videoPlayRate() {
|
||||
this.showRateMenu = true
|
||||
},
|
||||
// 点击倍速
|
||||
changePlayRate(rate) {
|
||||
this.playbackRate = rate
|
||||
this.videoPlayer.playbackRate(rate)
|
||||
this.showRateMenu = false
|
||||
this.hideControls()
|
||||
},
|
||||
// 创建倍速按钮
|
||||
createPlayRateDOM() {
|
||||
const playRateDom = document.createElement('div')
|
||||
playRateDom.className = 'full-play-rate'
|
||||
playRateDom.innerText = `${this.playbackRate}x`
|
||||
playRateDom.onclick = () => {
|
||||
const playRateMenuDom = document.querySelector('.full-play-rate-menu')
|
||||
playRateMenuDom.style.display = 'block'
|
||||
}
|
||||
return playRateDom
|
||||
},
|
||||
// 创建倍速菜单
|
||||
createPlayRateMenuDom() {
|
||||
const playRateMenuDom = document.createElement('ul')
|
||||
playRateMenuDom.className = `play-rate-menu full-play-rate-menu`
|
||||
playRateMenuDom.style.height = this.windowWidth + 'px'
|
||||
playRateMenuDom.style.display = 'none'
|
||||
let liStr = ''
|
||||
this.playbackRates.forEach((item) => {
|
||||
liStr += `
|
||||
<li class="${this.playbackRate === item ? 'activeRate' : ''} play-rate-item full-play-rate-item">
|
||||
${item}x
|
||||
</li>
|
||||
`
|
||||
})
|
||||
playRateMenuDom.innerHTML = liStr
|
||||
return playRateMenuDom
|
||||
},
|
||||
handleSetSpeedRate(rate) {
|
||||
console.log("rate at line 125:", rate);
|
||||
let videoContext = uni.createVideoContext("videoId");
|
||||
videoContext.playbackRate(rate);
|
||||
speedRate.value = rate;
|
||||
},
|
||||
init(options) {
|
||||
this.options = JSON.parse(options.data);
|
||||
this.getLive();
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
var that = this;
|
||||
if (this.currentTime) {
|
||||
that.setVideoTime();
|
||||
}
|
||||
}, 60000 * 10);
|
||||
},
|
||||
// 播放进度改变
|
||||
videoTimeUpdateEvent(e) {
|
||||
console.log("e at line 78:", e);
|
||||
this.playTime = parseInt(e.detail.currentTime);
|
||||
this.allTime = parseInt(e.detail.duration);
|
||||
this.recordTime({
|
||||
time: this.playTime,
|
||||
});
|
||||
},
|
||||
|
||||
recordTime(data) {
|
||||
this.currentTime = data.time;
|
||||
console.log("data at line 54:", data);
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
|
||||
console.log("点击后设置播放时长的方法list at line 65:", list);
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
if (list.length > 0 && index >= 0) {
|
||||
list[index] = {
|
||||
...this.videoData,
|
||||
|
||||
time: data.time,
|
||||
};
|
||||
} else {
|
||||
list.push({
|
||||
...this.videoData,
|
||||
time: data.time,
|
||||
});
|
||||
}
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
},
|
||||
//是否全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.target.fullScreen) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getData(data) {
|
||||
if (!this.isSetFirstTime) {
|
||||
var netWork = this.videoData.userCourseVideoPositionEntity
|
||||
? this.videoData.userCourseVideoPositionEntity.position
|
||||
: 0;
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
|
||||
if (netWork) {
|
||||
if (index >= 0) {
|
||||
this.firstTime =
|
||||
list[index].time > netWork ? list[index].time : netWork;
|
||||
} else {
|
||||
this.firstTime = netWork ? netWork : 0;
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.firstTime = list[index].time ? list[index].time : 0;
|
||||
} else {
|
||||
this.firstTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
this.playVideo();
|
||||
this.isSetFirstTime = true;
|
||||
}
|
||||
},
|
||||
setVideoTime(time) {
|
||||
var data = {
|
||||
videoId: this.videoData.id,
|
||||
position: this.currentTime, //秒数
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/saveCoursePosition`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
playVideo(e) {
|
||||
this.videoContext = uni.createVideoContext("videoId", this);
|
||||
|
||||
this.videoContext.seek(this.firstTime);
|
||||
},
|
||||
async getLive() {
|
||||
var data = {
|
||||
...this.options,
|
||||
};
|
||||
console.log("data at line 57:", data);
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/checkVideo`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log("res at line 252:", res);
|
||||
this.videoData = res.video;
|
||||
this.videoUrl =
|
||||
res.video.videoUrl;
|
||||
|
||||
this.$nextTick(async () => {
|
||||
await this.getData();
|
||||
});
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
openVideo(data) {
|
||||
var mynavData = JSON.stringify(data); // 这里转换成 字符串
|
||||
if (data.type == 0) {
|
||||
//视频云点播
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetail?data=${mynavData}`,
|
||||
});
|
||||
} else if (data.type == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetailOss?data=${mynavData}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
hancleModalCancel() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClickMore(v, i, status) {
|
||||
this.$set(this.correlationiList[i], "isOpen", status);
|
||||
},
|
||||
hancleModalConfirm() {
|
||||
var data = {
|
||||
values: {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
...this.taiHuClassInfo,
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box {
|
||||
position: relative;
|
||||
}
|
||||
.image_box {
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.speed {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 16rpx;
|
||||
|
||||
.doubleSpeed {
|
||||
color: #fff;
|
||||
font-size: 14rpx;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 4rpx 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 倍速的蒙版
|
||||
.speedModal {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.speedNumBox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: #2c2c2c;
|
||||
width: 120rpx;
|
||||
position: absolute;
|
||||
right: 0rpx;
|
||||
top: 0;
|
||||
|
||||
.number {
|
||||
width: 120rpx;
|
||||
font-weight: 700;
|
||||
font-size: 14rpx;
|
||||
padding: 18rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.noActive {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
pages/curriculum/order/operationsList.vue
Normal file
94
pages/curriculum/order/operationsList.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="fb tc f20 linheight40">1111</div>
|
||||
|
||||
<!-- 视频形式的任务 -->
|
||||
<div class="taskinfo">
|
||||
<div id="player-con" style="height: 800px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
videoTitle: "",
|
||||
authId:
|
||||
"eyJTZWN1cml0eVRva2VuIjoiQ0FJUzFBTjFxNkZ0NUIyeWZTaklyNWVFRWNudzNPZEF3N0dUY1ZiVGluTWhiZGx1bzdicXB6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRmNjWkdoQ2NOSkF2dnNVT29GditKcExGc3QySjZyOEpqc1VDbytjdWswZXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6RVcrRmV2TC9wZ21RUGwvK0ZKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVUJMZ3pLNUl2NWJMVmNTS3dJK1YreVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHdKNFRXYnJna2VVdFB0a3BtbDlEUHd1MndOQ0o5K24zRzg5S0NnL1BlcnBGUVBjTkFVNXBYc1R6UDdrcHF2YUtLWHRjWXM4MFY0NVVndUtwQUgyS2poclprQ2ZxNk5sQnhQMmxNcTVQbzNPOGMwSWVHTWFnQUZZUjM0ZGY2aWdud3p2TTNaeUdxdWtxcmdmMXM4SHRiYnBvWldJSEhKd2t1OHJlMTg5dnlKMmdSQmRyWmJkd2NFVjhiUEZNYithWTVWTm5MOUZGSk85N0FrQitCZGk0ZktrN0VpNXdMVCs2Q29XUEZZOXZaajZJR3BIdERxY21scW1FS09FVHNlZkxnWXNzbDAzb0lzMFdvRlYzc2RPeDl3MDR2Q3Y3YlZQVFNBQSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIkpVb25xR25CR242cU5YRjgyMzE1b25YRlRyUExoL0l3THVrSERNbEhBVEk2a0EyYmgyell1VENRa0VUVWNWZjhcIixcIkNhbGxlclwiOlwiNkxxRjRSdUk3S0Z1aDhVN3lQajBUNWZQMSs5d2FUdWNCT3Urd0ZHUEc5TT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjQtMDQtMjNUMTA6NDU6NTJaXCIsXCJNZWRpYUlkXCI6XCI2ZjhlYzhkMDhjZDM3MWVkYmZlNDA3NjRhMGZkMDEwMlwiLFwiUGxheURvbWFpblwiOlwidmlkZW8udGFpaHVtZWQuY29tXCIsXCJTaWduYXR1cmVcIjpcIndnSExCMytZNzEvSXZJQ1lOQmdPUm8xbUhVRT1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6IjZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyIiwiVGl0bGUiOiLnrKzkuInorrLvvJrkuInmsJTkuYvnuqoiLCJDb3ZlclVSTCI6Imh0dHBzOi8vdmlkZW8udGFpaHVtZWQuY29tLzZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyL3NuYXBzaG90cy9lNTM5ZmJjNzFhNzk0ZGFkYmI3MzUyZjBhMjU5YjNmYy0wMDAwNS5qcGciLCJEdXJhdGlvbiI6Nzk4LjM3Mn0sIkFjY2Vzc0tleUlkIjoiU1RTLk5UMVpzRDE4YXRzeHNwYm5zdGFWQkxzQUUiLCJQbGF5RG9tYWluIjoidmlkZW8udGFpaHVtZWQuY29tIiwiQWNjZXNzS2V5U2VjcmV0IjoiR3NVMUhiaXZiNEpaY3ZLREppNkdQWlRjUlQyWmhqR21ONnBNUFdSQmVGOUciLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE2MDQ3NDAxMzc4OTE5MDd9",
|
||||
videoId: "6f8ec8d08cd371edbfe40764a0fd0102"
|
||||
};
|
||||
},
|
||||
|
||||
// //页面显示
|
||||
mounted() {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href =
|
||||
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css";
|
||||
document.head.appendChild(link);
|
||||
const script = document.createElement("script");
|
||||
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
|
||||
script.src =
|
||||
"https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js";
|
||||
|
||||
document.head.appendChild(script);
|
||||
this.getLive();
|
||||
},
|
||||
methods: {
|
||||
// 获取数据
|
||||
getLive() {
|
||||
let player = new Aliplayer(
|
||||
{
|
||||
id: "player-con",
|
||||
vid: this.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
|
||||
playauth: this.authId, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||||
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||||
playConfig: {
|
||||
EncryptType: "AliyunVoDEncryption"
|
||||
}, // 当您输出的M3U8流中，含有其他非私有加密流时，需要指定此参数。
|
||||
width: "100%"
|
||||
},
|
||||
function(player) {
|
||||
console.log("The player is created");
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
//页面显示
|
||||
mounted() {
|
||||
// 动态引入较大类库避免影响页面展示
|
||||
},
|
||||
methods: {
|
||||
receiveMsg(newValue, oldValue, ownerVm, vm) {
|
||||
|
||||
},
|
||||
checkValue() {
|
||||
console.log(this.authId, "1111");
|
||||
if (!this.authId) {
|
||||
setTimeout(() => {
|
||||
this.checkValue();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.getLive();
|
||||
}
|
||||
}
|
||||
// 阿里云播放
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#myVideo {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
250
pages/curriculum/order/videoDetail.vue
Normal file
250
pages/curriculum/order/videoDetail.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<view class="container commonPageBox commonDetailPage" style="position: relative;">
|
||||
<video
|
||||
@fullscreenchange="fullscreenchange"
|
||||
@timeupdate="videoTimeUpdateEvent($event)"
|
||||
ref="videos"
|
||||
style="width: 100%; height: 100%"
|
||||
autoplay
|
||||
id="videoId"
|
||||
|
||||
object-fit="contain"
|
||||
class="video-box"
|
||||
:src="videoUrl"
|
||||
:poster="`${videoUrl}?x-oss-process=video/snapshot,t_${1},f_jpg`"
|
||||
@play="playVideo"
|
||||
>
|
||||
</video>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import courseDescription from "@/pages/component/commonComponents/list";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
components: {
|
||||
courseDescription, //课程说明
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
videoUrl: "",
|
||||
currentTime: 0,
|
||||
firstTime: 0,
|
||||
|
||||
options: {},
|
||||
videoData: {},
|
||||
isSetFirstTime: false,
|
||||
currentVideoTime: "", //初始播放时长（秒）
|
||||
urlList: {
|
||||
detail: "sociology/course/getCourseCatalogueChapterDetail",
|
||||
curriculumInfo: "app/phone.do?getCourseInfo",
|
||||
},
|
||||
};
|
||||
},
|
||||
async onUnload() {
|
||||
this.timer = null;
|
||||
// #ifdef APP-PLUS
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/order/back",
|
||||
});
|
||||
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
// #endif
|
||||
await this.setVideoTime();
|
||||
},
|
||||
onLoad(options) {
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("landscape-primary");
|
||||
// #endif
|
||||
|
||||
this.options = JSON.parse(options.data);
|
||||
this.getLive();
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
var that = this;
|
||||
if (this.currentTime) {
|
||||
that.setVideoTime();
|
||||
}
|
||||
}, 60000 * 10);
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
// 播放进度改变
|
||||
videoTimeUpdateEvent(e) {
|
||||
console.log("e at line 78:", e);
|
||||
this.playTime = parseInt(e.detail.currentTime);
|
||||
this.allTime = parseInt(e.detail.duration);
|
||||
this.recordTime({
|
||||
time: this.playTime,
|
||||
});
|
||||
},
|
||||
|
||||
recordTime(data) {
|
||||
this.currentTime = data.time;
|
||||
console.log("data at line 54:", data);
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
if (list.length > 0 && index >= 0) {
|
||||
list[index] = {
|
||||
...this.videoData,
|
||||
|
||||
time: data.time,
|
||||
};
|
||||
} else {
|
||||
list.push({
|
||||
...this.videoData,
|
||||
time: data.time,
|
||||
});
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
},
|
||||
//是否全屏
|
||||
fullscreenchange(e) {
|
||||
if (!e.target.fullScreen) {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
getData(data) {
|
||||
if (!this.isSetFirstTime) {
|
||||
var netWork = this.videoData.userCourseVideoPositionEntity
|
||||
? this.videoData.userCourseVideoPositionEntity.position
|
||||
: 0;
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
|
||||
if (netWork) {
|
||||
if (index >= 0) {
|
||||
this.firstTime =
|
||||
list[index].time > netWork ? list[index].time : netWork;
|
||||
} else {
|
||||
this.firstTime = netWork ? netWork : 0;
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.firstTime = list[index].time ? list[index].time : 0;
|
||||
} else {
|
||||
this.firstTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoList", JSON.stringify(list));
|
||||
this.playVideo();
|
||||
this.isSetFirstTime = true;
|
||||
}
|
||||
},
|
||||
setVideoTime(time) {
|
||||
var data = {
|
||||
videoId: this.videoData.id,
|
||||
position: this.currentTime, //秒数
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/saveCoursePosition`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
playVideo(e) {
|
||||
this.videoContext = uni.createVideoContext("videoId", this);
|
||||
|
||||
this.videoContext.seek(this.firstTime);
|
||||
this.videoContext.requestFullScreen();
|
||||
},
|
||||
async getLive() {
|
||||
var data = {
|
||||
...this.options,
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/checkVideo`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
console.log("res at line 252:", res);
|
||||
this.videoData = res.video;
|
||||
this.videoUrl =
|
||||
res.video.videoUrl;
|
||||
|
||||
this.$nextTick(async () => {
|
||||
await this.getData();
|
||||
});
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
openVideo(data) {
|
||||
var mynavData = JSON.stringify(data); // 这里转换成 字符串
|
||||
if (data.type == 0) {
|
||||
//视频云点播
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetail?data=${mynavData}`,
|
||||
});
|
||||
} else if (data.type == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/curriculum/order/videoDetailOss?data=${mynavData}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
hancleModalCancel() {
|
||||
this.show = false;
|
||||
},
|
||||
handleClickMore(v, i, status) {
|
||||
console.log("i at line 357:", i);
|
||||
this.$set(this.correlationiList[i], "isOpen", status);
|
||||
},
|
||||
hancleModalConfirm() {
|
||||
var data = {
|
||||
values: {
|
||||
customerType: "D",
|
||||
token: uni.getStorageSync("token"),
|
||||
customerOid: uni.getStorageSync("customerOid"),
|
||||
...this.taiHuClassInfo,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-box{
|
||||
position: relative;
|
||||
}
|
||||
.image_box{
|
||||
background-color: red;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
339
pages/curriculum/order/videoDetailOss.vue
Normal file
339
pages/curriculum/order/videoDetailOss.vue
Normal file
@@ -0,0 +1,339 @@
|
||||
<template>
|
||||
<view class="container" style="background-color: #000; position: relative">
|
||||
<u-icon
|
||||
@click="goBack"
|
||||
name="arrow-left"
|
||||
color="#3ab3ae"
|
||||
size="40"
|
||||
:style="`display: inline-block; position: absolute; top: ${
|
||||
statusBarHeight + 6
|
||||
}px; left: ${10}px;z-index: 999;`"
|
||||
></u-icon>
|
||||
<div
|
||||
style="background-color: #000"
|
||||
ref="videoContent"
|
||||
@tap="renderScript.handleClick"
|
||||
id="url-player-test"
|
||||
:videoData="videoData"
|
||||
:firstTime="firstTime"
|
||||
:change:videoData="renderScript.receiveMsg"
|
||||
:change:firstTime="renderScript.receiveFirstTime"
|
||||
></div>
|
||||
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
|
||||
直接调用renderjs中的emitData的方法,传递当前播放时长
|
||||
</div>
|
||||
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
|
||||
监听结束方法，记录播放时长
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
videoTitle: "",
|
||||
videoList: [],
|
||||
firstTime: 0,
|
||||
options: {},
|
||||
playAuth: "",
|
||||
currentTime: "",
|
||||
videoId: "",
|
||||
videoData: {},
|
||||
isSetFirstTime: false,
|
||||
screenType: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["videoOssList"]),
|
||||
},
|
||||
// //页面显示
|
||||
mounted() {},
|
||||
async onUnload() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/curriculum/order/curriculum/back",
|
||||
});
|
||||
// #ifdef APP-PLUS
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
|
||||
// #endif
|
||||
this.timer = null;
|
||||
await this.setVideoTime();
|
||||
this.player.dispose();
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(options) {
|
||||
console.log(options, "这是传参");
|
||||
// #ifdef APP-PLUS
|
||||
|
||||
setTimeout(() => {
|
||||
plus.screen.unlockOrientation();
|
||||
plus.screen.lockOrientation("landscape-primary");
|
||||
}, 10);
|
||||
// #endif
|
||||
|
||||
if (uni.getStorageSync("videoOssList")) {
|
||||
this.videoList = JSON.parse(uni.getStorageSync("videoOssList"));
|
||||
}
|
||||
this.options = JSON.parse(options.data);
|
||||
|
||||
this.videoId = this.options.video;
|
||||
|
||||
this.timer = setInterval(() => {
|
||||
var that = this;
|
||||
if (this.currentTime) {
|
||||
that.setVideoTime();
|
||||
}
|
||||
}, 60000 * 10);
|
||||
},
|
||||
|
||||
methods: {
|
||||
getData(data) {
|
||||
if (!this.isSetFirstTime) {
|
||||
var netWork = this.videoData.userCourseVideoPositionEntity
|
||||
? this.videoData.userCourseVideoPositionEntity.position
|
||||
: 0;
|
||||
var list = JSON.parse(uni.getStorageSync("videoOssList"));
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
|
||||
if (netWork) {
|
||||
if (index >= 0) {
|
||||
this.firstTime =
|
||||
list[index].time > netWork ? list[index].time : netWork;
|
||||
} else {
|
||||
this.firstTime = netWork ? netWork : 0;
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
this.firstTime = list[index].time ? list[index].time : 0;
|
||||
} else {
|
||||
this.firstTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoOssList", JSON.stringify(list));
|
||||
this.isSetFirstTime = true;
|
||||
}
|
||||
},
|
||||
recordTime(data) {
|
||||
this.currentTime = data.time;
|
||||
var list = [];
|
||||
if (uni.getStorageSync("videoOssList")) {
|
||||
list = JSON.parse(uni.getStorageSync("videoOssList"));
|
||||
}
|
||||
var index = list.findIndex((e) => e.id == this.videoData.id);
|
||||
if (list.length > 0 && index >= 0) {
|
||||
list[index] = {
|
||||
...this.videoData,
|
||||
|
||||
time: data.time,
|
||||
};
|
||||
} else {
|
||||
list.push({
|
||||
...this.videoData,
|
||||
time: data.time,
|
||||
});
|
||||
}
|
||||
|
||||
uni.setStorageSync("videoOssList", JSON.stringify(list));
|
||||
},
|
||||
// 获取数据
|
||||
getLive() {
|
||||
var data = {
|
||||
...this.options,
|
||||
};
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/checkVideo`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
var playAuth = res.video.playAuth.replace(/=/g, "");
|
||||
this.videoData = {
|
||||
...res.video,
|
||||
videoId: res.video.video,
|
||||
playAuth: playAuth,
|
||||
};
|
||||
this.playAuth = playAuth;
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
async handleEnd() {
|
||||
var list = JSON.parse(JSON.stringify(uni.getStorageSync("videoOssList")));
|
||||
|
||||
var data = list.find((e) => e.id == this.videoData.id);
|
||||
|
||||
this.currentTime = data.time;
|
||||
|
||||
await this.setVideoTime();
|
||||
this.timer = null;
|
||||
},
|
||||
setVideoTime(time) {
|
||||
var data = {
|
||||
videoId: this.videoData.id,
|
||||
position: this.currentTime, //秒数
|
||||
}
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/saveCoursePosition`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
this.$forceUpdate();
|
||||
});
|
||||
},
|
||||
changePlayerTime(player) {
|
||||
player.seek(this.firstTime);
|
||||
},
|
||||
goBack() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getLive();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script module="renderScript" lang="renderjs">
|
||||
export default {
|
||||
mounted() {
|
||||
this.loadWebPlayerSDK()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
curTime: null,
|
||||
curStatus: null
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
curTime(val) {
|
||||
if (this.curTime !== null && this.curStatus !== null) {
|
||||
this.$refs.videoContent1.click()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleClick(event, ownerInstance) {
|
||||
ownerInstance.callMethod('getData')
|
||||
|
||||
},
|
||||
emitData(event, ownerInstance) {
|
||||
var that = this;
|
||||
ownerInstance.callMethod('recordTime', {
|
||||
time: that.curTime,
|
||||
status: that.curStatus
|
||||
})
|
||||
|
||||
},
|
||||
endEmitData(event, ownerInstance) {
|
||||
ownerInstance.callMethod('handleEnd', )
|
||||
},
|
||||
getLive() {
|
||||
var player = new Aliplayer({
|
||||
id: "url-player-test",
|
||||
"vid": this.videoData
|
||||
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
|
||||
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||||
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||||
"playConfig": {
|
||||
"EncryptType": 'AliyunVoDEncryption'
|
||||
},
|
||||
width: '100%', //容器的大小
|
||||
height: '100%', //容器的大小
|
||||
|
||||
}, function(player) {});
|
||||
this.player = player;
|
||||
//全屏播放
|
||||
|
||||
player.one('canplay', function() {
|
||||
player.tag.play();
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.$refs.videoContent.click()
|
||||
|
||||
var timer = setInterval(() => {
|
||||
var that = this;
|
||||
that.curTime = parseInt(this.player.getCurrentTime());
|
||||
that.curStatus = this.player.getStatus()
|
||||
|
||||
}, 1000);
|
||||
this.player.on('ended', function() {
|
||||
this.$refs.videoContent2.click()
|
||||
|
||||
})
|
||||
},
|
||||
receiveFirstTime(newValue, oldValue, ownerVm, vm) {
|
||||
if (this.player) {
|
||||
this.player.seek(newValue);
|
||||
}
|
||||
},
|
||||
checkValue() {
|
||||
if (!this.videoData.playAuth) {
|
||||
setTimeout(() => {
|
||||
this.checkValue();
|
||||
}, 1000);
|
||||
} else {
|
||||
|
||||
this.getLive();
|
||||
}
|
||||
},
|
||||
loadWebPlayerSDK() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const s_tag = document.createElement('script'); // 引入播放器js
|
||||
s_tag.type = 'text/javascript';
|
||||
s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
|
||||
s_tag.charset = 'utf-8';
|
||||
s_tag.onload = () => {
|
||||
this.checkValue();
|
||||
resolve();
|
||||
}
|
||||
document.body.appendChild(s_tag);
|
||||
const l_tag = document.createElement('link'); // 引入播放器css
|
||||
l_tag.rel = 'stylesheet';
|
||||
l_tag.href =
|
||||
'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
|
||||
document.body.appendChild(l_tag);
|
||||
});
|
||||
},
|
||||
loadComponent() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const s_tag = document.createElement('script');
|
||||
s_tag.type = 'text/javascript';
|
||||
// 需要先下载组件 js 文件，放到项目 /static/ 目录下
|
||||
// 下载地址：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
|
||||
s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
|
||||
s_tag.charset = 'utf-8';
|
||||
s_tag.onload = () => {
|
||||
resolve();
|
||||
}
|
||||
document.body.appendChild(s_tag);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user