名医精彩
This commit is contained in:
liuyuan
842
pages/component/commonComponents/AliPlayer.vue
Normal file
842
pages/component/commonComponents/AliPlayer.vue
Normal file
@@ -0,0 +1,842 @@
|
||||
<template>
|
||||
|
||||
<view
|
||||
class="container playerBox"
|
||||
id="playerBox"
|
||||
style="
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
"
|
||||
>
|
||||
<!-- ios不能播放私有加密提示信息 start-->
|
||||
|
||||
<!-- ios不能播放私有加密提示信息 end-->
|
||||
<div ref="videoContent" id="url-player-test"></div>
|
||||
<div
|
||||
v-show="false"
|
||||
:videoData="videoData"
|
||||
:isDipose="isDipose"
|
||||
:winWidth="winWidth"
|
||||
:winHeight="winHeight"
|
||||
:firstTime="firstTime"
|
||||
:isOnLoad="isOnLoad"
|
||||
:platform="platform"
|
||||
:isSetFirstTime="isSetFirstTime"
|
||||
:isChange="isChange"
|
||||
:change:videoData="renderScript.receiveMsg"
|
||||
:change:isDipose="renderScript.receiveisDipose"
|
||||
:change:winWidth="renderScript.receiveWinWidth"
|
||||
:change:winHeight="renderScript.receiveWinHeight"
|
||||
:change:firstTime="renderScript.receiveFirstTime"
|
||||
:change:isSetFirstTime="renderScript.receiveisSetFirstTime"
|
||||
:change:isOnLoad="renderScript.receiveIsfresh"
|
||||
:change:platform="renderScript.receiveplatform"
|
||||
:change:isChange="renderScript.receiveIsChange"
|
||||
></div>
|
||||
<div @tap="renderScript.emitData" ref="videoContent1" v-show="false">
|
||||
直接调用renderjs中的emitData的方法,传递当前播放时长
|
||||
</div>
|
||||
<div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false">
|
||||
监听结束方法，记录播放时长
|
||||
</div>
|
||||
<div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false">
|
||||
监听切换视频方法
|
||||
</div>
|
||||
<div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false">
|
||||
监听第一次初始播放时长,开始进行接口存储时间
|
||||
</div>
|
||||
<div @tap="renderScript.emitDispose" ref="videoContent6" v-show="false">
|
||||
监听第一次初始播放时长,开始进行接口存储时间
|
||||
</div>
|
||||
<!-- v-if="platform != 'ios'" -->
|
||||
<!-- 全屏按钮 start -->
|
||||
<!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
|
||||
<div class="fullScreenButton-container">
|
||||
<div
|
||||
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
|
||||
@tap="renderScript.changeVideoScreen"
|
||||
></div>
|
||||
</div>
|
||||
<!-- 全屏按钮 end -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import store from "@/store/index.js";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
export default {
|
||||
props: {
|
||||
videoData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
firstTime: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false, //视频提示显示
|
||||
isDipose: false, //视频提示显示
|
||||
content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
|
||||
platform: null, //设备类型
|
||||
isFullScreen: false, //当前是否是全屏模式
|
||||
isOnLoad: false, //是否刷新
|
||||
isChange: false, //是否切换播放源
|
||||
videoList: [], //视频列表
|
||||
videoOssList: [], //本地视频列表
|
||||
options: {}, //父组件传参
|
||||
currentTime: "", //当前播放时间
|
||||
|
||||
isSetFirstTime: false, //是否获取到初始播放时间
|
||||
|
||||
urlList: {
|
||||
checkVideo: "sociology/course/checkVideo",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState(["videoOssList"]),
|
||||
},
|
||||
|
||||
watch: {
|
||||
timer(newValue) {
|
||||
this.$emit("child-event", newValue);
|
||||
},
|
||||
videoOssList: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (this.videoOssList.length > 0) {
|
||||
uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
//
|
||||
mounted() {
|
||||
this.platform = this.$platform;
|
||||
this.show = false;
|
||||
if (uni.getStorageSync("videoOssList")) {
|
||||
this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
|
||||
}
|
||||
},
|
||||
//子组件销毁前
|
||||
beforeDestroy() {
|
||||
this.handleEnd();
|
||||
|
||||
clearInterval(this.$store.state.videoTimer);
|
||||
plus.screen.lockOrientation("portrait-primary");
|
||||
},
|
||||
updated() {
|
||||
// console.log("触发了更新");
|
||||
},
|
||||
methods: {
|
||||
emitDispose1(status) {
|
||||
this.$emit("handleSuccessDispose", status);
|
||||
},
|
||||
destory() {
|
||||
// this.isDipose = true;
|
||||
},
|
||||
//ios不能播放私有加密提示信息
|
||||
openShow() {
|
||||
this.show = true;
|
||||
},
|
||||
|
||||
changeVideoData() {
|
||||
this.show = false;
|
||||
this.isChange = false;
|
||||
},
|
||||
screenChange(data) {
|
||||
this.isFullScreen = !data.status;
|
||||
this.$emit("changeScreen", this.isFullScreen);
|
||||
},
|
||||
|
||||
//当前播放时间 存本地
|
||||
recordTime(time) {
|
||||
this.currentTime = time;
|
||||
var list = [...this.videoOssList];
|
||||
var index = list.findIndex((e) => e.id == this.currentVideoId);
|
||||
var setData = {
|
||||
id: this.currentVideoId,
|
||||
vid: this.videoData.vid,
|
||||
time: time,
|
||||
};
|
||||
if (list.length > 0 && index >= 0) {
|
||||
list[index] = setData;
|
||||
} else {
|
||||
list.push(setData);
|
||||
}
|
||||
this.videoOssList = list;
|
||||
if (this.currentTime % 60 == 0) {
|
||||
this.setVideoTime();
|
||||
}
|
||||
},
|
||||
|
||||
//播放结束
|
||||
async handleEnd() {
|
||||
// uni.showModal({
|
||||
// title: "更新提示",
|
||||
// content: "新版本已经准备好，是否重启应用？",
|
||||
// success(res) {
|
||||
// if (res.confirm) {
|
||||
|
||||
// }
|
||||
// },
|
||||
// });
|
||||
this.setVideoTime();
|
||||
},
|
||||
//存播放进度
|
||||
setVideoTime() {
|
||||
if (!this.videoData.id) {
|
||||
return false;
|
||||
}
|
||||
var data = {
|
||||
videoId: this.videoData.id,
|
||||
position: this.currentTime ? this.currentTime : 0, //秒数
|
||||
loadAnimate: "none",
|
||||
};
|
||||
|
||||
$http
|
||||
.request({
|
||||
url: `sociology/course/saveCoursePosition`,
|
||||
method: "Post",
|
||||
data,
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => {});
|
||||
},
|
||||
//定时器 存播放进度
|
||||
async setVideoFirtsetTime() {
|
||||
this.setVideoTime();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script module="renderScript" lang="renderjs">
|
||||
var player;
|
||||
import $ from "jquery";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
player: null, //播放器
|
||||
videoTimer: null, //定时器
|
||||
curTime: null, //播放器当前播放进度
|
||||
curStatus: null, //播放器当前播放状态
|
||||
playerConfig: {
|
||||
id: "url-player-test",
|
||||
extraInfo: { poster: "noposter" }, // 播放器参数 extraInfo 的内容会透传到 <video> 标签上
|
||||
width: "100%", //容器的大小
|
||||
height: "100%", //容器的大小
|
||||
qualitySort: "asc",
|
||||
cover: "",
|
||||
autoplay: true,
|
||||
isLive: false,
|
||||
rePlay: false,
|
||||
playsinline: true,
|
||||
controlBarVisibility: "hover",
|
||||
useH5Prism: true,
|
||||
skinLayout: [],
|
||||
},
|
||||
|
||||
skinLayoutIos: [
|
||||
{
|
||||
name: "bigPlayButton",
|
||||
align: "blabs",
|
||||
x: 30,
|
||||
y: 80,
|
||||
},
|
||||
{
|
||||
name: "H5Loading",
|
||||
align: "cc",
|
||||
},
|
||||
{
|
||||
name: "errorDisplay",
|
||||
align: "tlabs",
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "infoDisplay",
|
||||
},
|
||||
{
|
||||
name: "tooltip",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 56,
|
||||
},
|
||||
{
|
||||
name: "thumbnail",
|
||||
},
|
||||
{
|
||||
name: "controlBar",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 0,
|
||||
children: [
|
||||
{
|
||||
name: "progress",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 44,
|
||||
},
|
||||
{
|
||||
name: "playButton",
|
||||
align: "tl",
|
||||
x: 15,
|
||||
y: 12,
|
||||
},
|
||||
{
|
||||
name: "timeDisplay",
|
||||
align: "tl",
|
||||
x: 10,
|
||||
y: 7,
|
||||
},
|
||||
// {
|
||||
// name: "fullScreenButton",
|
||||
// align: "tr",
|
||||
// x: 5,
|
||||
// y: 12,
|
||||
// },
|
||||
{
|
||||
name: "prism-speed-selector",
|
||||
align: "tr",
|
||||
x: 15,
|
||||
y: 12,
|
||||
},
|
||||
{
|
||||
name: "volume",
|
||||
align: "tr",
|
||||
x: 5,
|
||||
y: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
skinLayoutAndroid: [
|
||||
{
|
||||
name: "bigPlayButton",
|
||||
align: "blabs",
|
||||
x: 30,
|
||||
y: 80,
|
||||
},
|
||||
{
|
||||
name: "H5Loading",
|
||||
align: "cc",
|
||||
},
|
||||
{
|
||||
name: "errorDisplay",
|
||||
align: "tlabs",
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "infoDisplay",
|
||||
},
|
||||
{
|
||||
name: "tooltip",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 56,
|
||||
},
|
||||
{
|
||||
name: "thumbnail",
|
||||
},
|
||||
{
|
||||
name: "controlBar",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 0,
|
||||
children: [
|
||||
{
|
||||
name: "progress",
|
||||
align: "blabs",
|
||||
x: 0,
|
||||
y: 44,
|
||||
},
|
||||
{
|
||||
name: "playButton",
|
||||
align: "tl",
|
||||
x: 15,
|
||||
y: 12,
|
||||
},
|
||||
{
|
||||
name: "timeDisplay",
|
||||
align: "tl",
|
||||
x: 10,
|
||||
y: 7,
|
||||
},
|
||||
|
||||
{
|
||||
name: "prism-speed-selector",
|
||||
align: "tr",
|
||||
x: 15,
|
||||
y: 12,
|
||||
},
|
||||
{
|
||||
name: "volume",
|
||||
align: "tr",
|
||||
x: 5,
|
||||
y: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
//播放器当前播放进度
|
||||
curTime(val) {
|
||||
if (this.curTime !== null) {
|
||||
this.$refs.videoContent1.click();
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {},
|
||||
|
||||
mounted() {},
|
||||
async beforeDestroy() {
|
||||
if (player) {
|
||||
player.dispose();
|
||||
}
|
||||
$("#url-player-test").empty();
|
||||
console.log("阿里云子组件销毁赋空");
|
||||
},
|
||||
methods: {
|
||||
//检验视频 获取加密权限
|
||||
checkValue() {
|
||||
if (!this.videoData.vid) {
|
||||
setTimeout(() => {
|
||||
this.checkValue();
|
||||
}, 500);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
this.initAliyunPlayer();
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
|
||||
//初始化播放器
|
||||
initAliyunPlayer() {
|
||||
console.log("实例创建中 at line 436:", "实例创建中");
|
||||
$("#url-player-test").empty();
|
||||
// const saveTime = function (memoryVideo,currentTime) {
|
||||
// console.log(memoryVideo, currentTime)
|
||||
// }
|
||||
|
||||
// const getTime = function (memoryVideo) {
|
||||
// /* return返回的是自定义起播时间 */
|
||||
// return 20
|
||||
// }
|
||||
var components = [
|
||||
{
|
||||
name: "RateComponent", //倍速组件
|
||||
type: AliPlayerComponent.RateComponent,
|
||||
},
|
||||
|
||||
];
|
||||
// if (this.platform != "ios") {
|
||||
var fullScreenButtonComponent = Aliplayer.Component({
|
||||
init: function (status, toAddress) {
|
||||
this.fullScreenStatus = status;
|
||||
this.$html = $(".fullScreenButton-container");
|
||||
},
|
||||
createEl: function (el) {
|
||||
this.$html.find(".ad").attr("src", this.adAddress);
|
||||
var $adWrapper = this.$html.find(".ad-wrapper");
|
||||
$adWrapper.attr("href", this.toAddress);
|
||||
$adWrapper.click(function () {});
|
||||
$(el).find(".prism-time-display").after(this.$html);
|
||||
},
|
||||
});
|
||||
|
||||
components = [
|
||||
...components,
|
||||
{
|
||||
name: "adComponent", //自定义全屏组件
|
||||
type: fullScreenButtonComponent,
|
||||
},
|
||||
|
||||
|
||||
];
|
||||
// }
|
||||
|
||||
//设置播放基本配置
|
||||
var playerOptions = {
|
||||
...this.playerConfig,
|
||||
components: components,
|
||||
skinLayout:
|
||||
this.platform == "ios" ? this.skinLayoutIos : this.skinLayoutAndroid,
|
||||
};
|
||||
|
||||
if (this.videoData.encryptType == 1) {
|
||||
playerOptions = {
|
||||
...playerOptions,
|
||||
vid: this.videoData.vid,
|
||||
playauth: this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
|
||||
encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
|
||||
playConfig: {
|
||||
EncryptType: "AliyunVoDEncryption",
|
||||
},
|
||||
};
|
||||
} else {
|
||||
playerOptions = {
|
||||
...playerOptions,
|
||||
source: this.videoData.source,
|
||||
};
|
||||
}
|
||||
player = new Aliplayer(playerOptions, (player) => {
|
||||
player.on("ready", () => {
|
||||
this.player = player;
|
||||
var lastTime = this.firstTime;
|
||||
if (this.platform == "ios") {
|
||||
this.player.one("canplay", () => {
|
||||
this.player.seek(this.firstTime);
|
||||
// uni.showToast({
|
||||
// title: '已为您定位至上次观看位置'
|
||||
// })
|
||||
|
||||
});
|
||||
} else {
|
||||
this.player.seek(this.firstTime);
|
||||
// uni.showToast({
|
||||
// title: '已为您定位至上次观看位置'
|
||||
// })
|
||||
|
||||
}
|
||||
|
||||
this.player.one("timeupdate", () => {
|
||||
if (!this.player.tag.seeking) {
|
||||
// 更新最近一次的播放位置
|
||||
lastTime = parseInt(this.player.getCurrentTime());
|
||||
this.curTime = lastTime;
|
||||
}
|
||||
});
|
||||
this.player.on("timeupdate", () => {
|
||||
if (!this.player.tag.seeking) {
|
||||
// 更新最近一次的播放位置
|
||||
lastTime = parseInt(this.player.getCurrentTime());
|
||||
this.curTime = lastTime;
|
||||
}
|
||||
});
|
||||
this.player.on("ended", () => {
|
||||
lastTime = parseInt(this.player.getCurrentTime());
|
||||
this.curTime = lastTime;
|
||||
this.$refs.videoContent2.click();
|
||||
});
|
||||
player.on("dispose", (res) => {
|
||||
console.log("播放器销毁:", res);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//调用 recordTime 方法 存本地播放时长
|
||||
emitData(event, ownerInstance) {
|
||||
ownerInstance.callMethod("recordTime", this.curTime);
|
||||
},
|
||||
|
||||
//调用 setVideoFirtsetTime 设置初始播放
|
||||
emitSetData(event, ownerInstance) {
|
||||
ownerInstance.callMethod("setVideoFirtsetTime");
|
||||
},
|
||||
|
||||
//调用 openShow 设置ios 不能播放私用加密 提示信息
|
||||
emitopenShow(event, ownerInstance) {
|
||||
ownerInstance.callMethod("openShow");
|
||||
},
|
||||
emitDispose(event, ownerInstance) {
|
||||
ownerInstance.callMethod("emitDispose1", true);
|
||||
},
|
||||
//调用 handleEnd 存储视频播放信息
|
||||
endEmitData(event, ownerInstance) {
|
||||
|
||||
ownerInstance.callMethod("handleEnd");
|
||||
},
|
||||
|
||||
changeVideoScreen(event, ownerInstance) {
|
||||
var that = this;
|
||||
// this.$emit('changeScreenLoading',true)
|
||||
var status = this.player.fullscreenService.getIsFullScreen();
|
||||
console.log('this.$platform--------', this.platform);
|
||||
if (this.platform != 'ios') { // 改变按钮形态
|
||||
ownerInstance.callMethod('screenChange', {
|
||||
status: status,
|
||||
primary: status ? 'portrait' : 'landscape'
|
||||
})
|
||||
}
|
||||
if (status) {
|
||||
if (this.platform != 'ios') {
|
||||
console.log('恢复竖版');
|
||||
setTimeout(() => {
|
||||
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
|
||||
this.player.fullscreenService.cancelFullScreen();
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
this.player.fullscreenService.requestFullScreen();
|
||||
if (this.platform != 'ios') {
|
||||
setTimeout(() => {
|
||||
plus.screen.lockOrientation("landscape-primary");
|
||||
}, 100);
|
||||
} else {
|
||||
console.log('不要旋转, 使用原生全屏');
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
//调用 changeVideoData 切换播放源
|
||||
changeVideoData(event, ownerInstance) {
|
||||
ownerInstance.callMethod("changeVideoData");
|
||||
},
|
||||
|
||||
//切换播放源
|
||||
async receiveIsChange(newValue) {
|
||||
if (this.isChange) {
|
||||
this.checkValue();
|
||||
}
|
||||
},
|
||||
|
||||
handleClick(event, ownerInstance) {}, //点击播放器
|
||||
|
||||
receiveFirstTime(newValue, oldValue, ownerVm, vm) {}, //播放时间
|
||||
|
||||
async receiveisDipose(newValue, oldValue, ownerVm, vm) {
|
||||
if (newValue) {
|
||||
await player.dispose();
|
||||
await this.$refs.videoContent6.click();
|
||||
}
|
||||
}, //播放时间
|
||||
async receiveisPause(newValue, oldValue, ownerVm, vm) {}, //播放时间
|
||||
|
||||
receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间
|
||||
|
||||
receiveMsg(newValue, oldValue, ownerVm, vm) {
|
||||
if (typeof window.Aliplayer === "function") {
|
||||
this.$nextTick(() => {
|
||||
this.checkValue();
|
||||
});
|
||||
}
|
||||
}, //是否刚开始设置播放时间
|
||||
|
||||
receiveplatform(newValue) {}, //获取设备型号
|
||||
|
||||
receiveVideoList(newValue, oldValue, ownerVm, vm) {}, //获取视频列表
|
||||
|
||||
receiveVideoData(newValue, oldValue, ownerVm, vm) {}, //获取视频信息
|
||||
|
||||
receiveWinWidth(newValue, oldValue, ownerVm, vm) {}, //获取视频宽度
|
||||
|
||||
receiveWinHeight(newValue, oldValue, ownerVm, vm) {}, //获取视频高度
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
|
||||
/deep/.pause {
|
||||
width: 60rpx !important;
|
||||
height: 60rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.fds {
|
||||
background-color: blue;
|
||||
height: 600rpx;
|
||||
position: fixed;
|
||||
top: 60rpx;
|
||||
}
|
||||
|
||||
.returnBack {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.right_title {
|
||||
background: #000;
|
||||
height: 96rpx;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.return {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.right_handle {
|
||||
width: 200rpx;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
|
||||
cover-view {
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
cover-view {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
cover-image {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.fullScreenButton-container {
|
||||
color: #fff;
|
||||
float: right;
|
||||
height: 35px;
|
||||
margin-top: 6px;
|
||||
margin-right: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
margin-top: 7px;
|
||||
cursor: pointer;
|
||||
|
||||
& + i {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
&:hover + .player-tooltip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player-tooltip {
|
||||
&.prev {
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
&.list {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playlist-content {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0px;
|
||||
padding-bottom: 48px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
transition: all 0.38s ease-in-out;
|
||||
overflow: hidden;
|
||||
|
||||
.list {
|
||||
background-color: #000;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
|
||||
.video-item {
|
||||
color: #fff;
|
||||
padding: 0px 10px;
|
||||
line-height: 35px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: #000;
|
||||
color: #00ddff;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
color: #00ddff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player-tooltip {
|
||||
position: absolute;
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0;
|
||||
text-align: center;
|
||||
background: #3c3c3c;
|
||||
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
height: 28px;
|
||||
top: -48px;
|
||||
padding: 0 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.playlist-skip-tip {
|
||||
padding: 5px 15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 30;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
color: #000;
|
||||
text-align: center;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
#rotating-div {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #3498db;
|
||||
transform: rotate(90deg);
|
||||
/* 旋转90度 */
|
||||
transform-origin: center center;
|
||||
/* 设置旋转中心点在div中心 */
|
||||
position: fixed;
|
||||
/* 固定定位，全屏显示 */
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
575
pages/component/commonComponents/anchorLink.vue
Normal file
575
pages/component/commonComponents/anchorLink.vue
Normal file
@@ -0,0 +1,575 @@
|
||||
<template>
|
||||
<view class="wrapper" :style="`width:100%;`">
|
||||
<view class="tabs" id="tabs">
|
||||
<slot name="tabs" :showTabs="showTabs"></slot>
|
||||
<view :style="{ display: showTabs ? 'block' : 'none', ...tabStyle }" class="wrapper_tab">
|
||||
<view :class="`${
|
||||
currentTab == i ? 'hot wrapper_tab_item' : 'wrapper_tab_item'
|
||||
}`" v-for="(v, i) in tabList" @click="clickItem(v, i)">
|
||||
{{ v.title }}
|
||||
<slot name="labelSlot" :data="v"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="otherContent" :showTabs="showTabs"></slot>
|
||||
<view class="section_box" v-if="allDataList&&allDataList.length>0">
|
||||
<view class="section" v-for="(v, i) in allDataList"
|
||||
:style="`${i == 0 ? `padding-top:${Number(baseHeight)}px;` : ''}`">
|
||||
<view class="section">
|
||||
<view :id="v[titleKey]" style="padding: 20rpx"
|
||||
:class="`${currentTab == i ? 'hot section_top' : 'section_top'}`">
|
||||
<slot name="label" :title="v[titleKey]" :data="v" :dataIndex="i"></slot>
|
||||
</view>
|
||||
<view class="content section_content_progress">
|
||||
<view class="content_list">
|
||||
<slot :name="slotName ? slotName + '_' + v.slotName : 'contentList'" :showTabs="showTabs"
|
||||
:dataList="v[dataListKey]" :data="v" :index="i"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-divider v-else-if="defaultShowTabs" text="暂无数据"></u-divider>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: [
|
||||
"allDataList",
|
||||
"dataListKey",
|
||||
"tabStyle",
|
||||
"titleKey",
|
||||
"titleStyle",
|
||||
"baseHeight",
|
||||
"allTabList",
|
||||
"slotName",
|
||||
"defaultShowTabs",
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
indexList: [],
|
||||
itemArr: [],
|
||||
distanceList: [],
|
||||
tabList: [],
|
||||
timer: null,
|
||||
isLeftClick: false,
|
||||
isOpenRightButton: true,
|
||||
viewid: "cont0",
|
||||
viewidIndex: 0,
|
||||
|
||||
openCollapseList: [],
|
||||
cateIconList: [],
|
||||
fdButtonStyle: {
|
||||
width: "120rpx",
|
||||
"border-color": "$themeColor",
|
||||
color: "$themeColor",
|
||||
float: "right",
|
||||
"margin-right": "20rpx",
|
||||
"margin-left": "30rpx",
|
||||
},
|
||||
modalInfo: {},
|
||||
vip: {},
|
||||
show: false,
|
||||
|
||||
options: {},
|
||||
showTabs: this.defaultShowTabs ? this.defaultShowTabs : false, // 默认吸顶的tab不显示
|
||||
currentTab: 0, // 由于初始化的uview的代码有bug，所以默认是-1，在第一次显示的时候，设置0，自动复位，防止错误
|
||||
|
||||
distanceArr: [], // 每一个ID对应的scrollTop值
|
||||
|
||||
isTabChange: false, // 防止在点击tab的时候，页面的滚动导致重复计算、抖动问题
|
||||
};
|
||||
},
|
||||
// 监听页面滚动
|
||||
watch: {
|
||||
currentTab: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.options = options;
|
||||
await this.handleselectCate({
|
||||
...this.cateList[0],
|
||||
index: 0,
|
||||
},
|
||||
0
|
||||
);
|
||||
},
|
||||
async onShow() {},
|
||||
methods: {
|
||||
// pageScroll(event) {
|
||||
// // console.log("event at line 213:", event);
|
||||
// // const _this = this;
|
||||
// if (this.isTabChange) {
|
||||
// return false;
|
||||
// }
|
||||
// const scrollTop = event.scrollTop;
|
||||
// const skewY =
|
||||
// Number(this.baseHeight) + 45 + +Number(this.statusBarHeight); // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
|
||||
// if (scrollTop >= skewY) {
|
||||
// if (!this.showTabs && this.currentTab <= 0) {
|
||||
// // 在未显示tab并且 currentTab <= 0时，防止uview ui抖动bug，设置默认复位值
|
||||
// this.currentTab = 0;
|
||||
// }
|
||||
// this.showTabs = true;
|
||||
// this.$nextTick(() => {
|
||||
// // this.currentTab = null;
|
||||
// const length = this.distanceArr.length;
|
||||
// const index = this.distanceArr.findIndex(
|
||||
// (el) => el.top - skewY - scrollTop - 40 > 0
|
||||
// );
|
||||
// // 当index == -1 的时候，实际当前滚动的距离超出了最大值，也就是在最后一个tab显示的内容
|
||||
// // 当index > 0 的时候，说明能在当前的scrollTop值找到，即index的前一位
|
||||
// this.currentTab = index > 0 ? index - 1 : length - 1;
|
||||
// });
|
||||
// this.$forceUpdate();
|
||||
// } else {
|
||||
// this.showTabs = this.defaultShowTabs ? this.defaultShowTabs : false;
|
||||
// this.currentTab = 0;
|
||||
// }
|
||||
// },
|
||||
|
||||
backClick() {
|
||||
if (this.options.backType == "order") {
|
||||
uni.switchTab({
|
||||
url: "/pages/home/index",
|
||||
});
|
||||
} else {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 获取所有元素在当前页面所处的位置信息
|
||||
getDistanceArr() {
|
||||
this.distanceArr = [];
|
||||
if (this.allTabList && this.allTabList.length > 0) {
|
||||
this.tabList = [...this.allTabList];
|
||||
} else {
|
||||
this.tabList = [];
|
||||
this.allDataList.forEach((e) => {
|
||||
this.tabList.push({
|
||||
title: e.title,
|
||||
...e,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const _this = this;
|
||||
// this.$nextTick(() => {
|
||||
// _this.tabList.forEach((el) => {
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select(".wrapper")
|
||||
// .boundingClientRect((data) => {
|
||||
// //目标位置的节点：类class或者id
|
||||
// uni
|
||||
// .createSelectorQuery()
|
||||
// .select("#" + el.title)
|
||||
// .boundingClientRect((res) => {
|
||||
|
||||
// el.scrollTop =
|
||||
// //最外层盒子的节点：类class或者id
|
||||
// _this.distanceArr.push({
|
||||
// title: el.title,
|
||||
// //top: Number(res.top.toFixed(0)),
|
||||
// });
|
||||
// })
|
||||
// .exec();
|
||||
// })
|
||||
// .exec();
|
||||
|
||||
// this.currentTab = 0;
|
||||
// });
|
||||
// });
|
||||
},
|
||||
// clickItem(item, index) {
|
||||
// var that = this;
|
||||
// const skewY =
|
||||
// Number(this.baseHeight) + 45 + +Number(this.statusBarHeight);
|
||||
// this.isTabChange = true;
|
||||
|
||||
// this.$nextTick(() => {
|
||||
// this.currentTab = index;
|
||||
// var data = this.distanceArr.find((e) => e.title == item.title);
|
||||
// uni.pageScrollTo({
|
||||
// // duration: 100, //过渡时间
|
||||
// scrollTop: data.top - skewY, //到达距离顶部的top值
|
||||
// duration: 300,
|
||||
// complete: function() {
|
||||
// const timer = setTimeout(() => {
|
||||
// that.isTabChange = false; // 关闭
|
||||
// clearTimeout(timer);
|
||||
// }, 1000); // 解决ios和安卓、鸿蒙系统兼容性问题
|
||||
// },
|
||||
// //scrollTop:data.top - res.top,//如果置顶
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
|
||||
min-height: 60vh;
|
||||
|
||||
.header {
|
||||
height: 100rpx;
|
||||
background: orange;
|
||||
|
||||
.bg {
|
||||
width: 100vw;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
position: fixed !important;
|
||||
z-index: 970;
|
||||
background-color: #fff;
|
||||
width: 100vw;
|
||||
|
||||
.tabsStyle {
|
||||
box-shadow: 0 2rpx 6rpx 0 rgba(153, 153, 153, 0.2);
|
||||
|
||||
::v-deep {
|
||||
.u-tabs {
|
||||
box-shadow: 0px 4px 6px 0 rgba(153, 153, 153, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 0 0rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.section_top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-left: 30rpx;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
left: -30rpx;
|
||||
width: 14rpx;
|
||||
height: 77%;
|
||||
top: 10%;
|
||||
border-radius: 14rpx;
|
||||
background: #7dc1f0;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20rpx;
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 33rpx;
|
||||
width: 26rpx;
|
||||
align-items: center;
|
||||
padding: 10rpx 20rpx;
|
||||
margin-right: 4rpx;
|
||||
|
||||
.dot {
|
||||
width: 9rpx;
|
||||
height: 9rpx;
|
||||
background: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.more_menu {
|
||||
position: absolute;
|
||||
top: 70rpx;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: white;
|
||||
padding: 0 20rpx;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4rpx;
|
||||
|
||||
.more_menu_item {
|
||||
font-size: 30rpx;
|
||||
padding: 24rpx 180rpx 24rpx 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more_menu_item:not(:last-child) {
|
||||
border-bottom: 1rpx solid #dddddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background: #f8f8f9;
|
||||
border-radius: 30rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&_name {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
&_ismySelf {
|
||||
background: #eeeeee;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin-left: 12rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_Info {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
&_label {
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 300;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_item:not(:last-child) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1rpx;
|
||||
height: 70rpx;
|
||||
top: 20rpx;
|
||||
right: 0;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_Info:not(:last-child) {
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
}
|
||||
|
||||
&_remark {
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
padding-top: 20rpx;
|
||||
text-align: justify;
|
||||
min-height: 40rpx;
|
||||
}
|
||||
|
||||
&_list {
|
||||
&_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #d8d8d8;
|
||||
|
||||
&_label {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #7dc1f0;
|
||||
white-space: nowrap;
|
||||
width: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&_value {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
flex: 1;
|
||||
margin-left: 40rpx;
|
||||
align-self: center;
|
||||
word-break: break-all;
|
||||
text-align: justify;
|
||||
}
|
||||
}
|
||||
|
||||
&_empty {
|
||||
height: 180rpx;
|
||||
background: #f8f8f9;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 20rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 64rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&_emptyResult {
|
||||
height: 240rpx;
|
||||
|
||||
image {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reset {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&_reportList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
|
||||
&_pack {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
&_addImage {
|
||||
width: 100%;
|
||||
height: calc(25vw - 30rpx);
|
||||
background: #f8f8f9;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&_icon {
|
||||
width: 60rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
&_tip {
|
||||
font-size: 20rpx;
|
||||
font-weight: 400;
|
||||
line-height: 30rpx;
|
||||
color: #999999;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section_content_progress {
|
||||
background: initial;
|
||||
padding: 0 15rpx;
|
||||
}
|
||||
|
||||
.content_result {
|
||||
background: initial;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
line-height: 60rpx;
|
||||
letter-spacing: 2rpx;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.content_report {
|
||||
background: initial;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section:not(:first-child) {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.hot {
|
||||
color: #294a97 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wrapper_tab {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.wrapper_tab_item {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
line-height: 60rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
1380
pages/component/commonComponents/audio.vue
Normal file
1380
pages/component/commonComponents/audio.vue
Normal file
File diff suppressed because it is too large
Load Diff
114
pages/component/commonComponents/curriculumVideo.vue
Normal file
114
pages/component/commonComponents/curriculumVideo.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<view class="richDetail">
|
||||
<view scroll-x="true" class="detail_title video_box" style="background-color: #fff">
|
||||
|
||||
<view v-for="(v, i) in dataList" :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
|
||||
@click="handleClick(v,i)">
|
||||
|
||||
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<slot name="richHeadImg"></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import {
|
||||
mapState
|
||||
} from "vuex";
|
||||
export default {
|
||||
props: ["detailInfo", "dataList", "currentVideo"],
|
||||
components: {},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
onLoad(options) {},
|
||||
onHide() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
getNumber(num) {
|
||||
if (num >= 10) {
|
||||
return num;
|
||||
} else {
|
||||
return `0${num}`;
|
||||
}
|
||||
},
|
||||
handleClick(data) {
|
||||
this.$emit("open", data);
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPageBox {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
.headImage {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail_title {
|
||||
padding: 0 20rpx 0;
|
||||
font-size: 26rpx;
|
||||
line-height: 65rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rich_box {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
p {
|
||||
display: block;
|
||||
text-indent: 2em;
|
||||
letter-spacing: 2px !important;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.video_box {
|
||||
width: 100%;
|
||||
.video_item {
|
||||
width: 23%;
|
||||
margin-right: 10rpx;
|
||||
float: left;
|
||||
border: 2rpx solid #5188e5;
|
||||
background: #fff;
|
||||
color: #5188e5;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.video_item:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hot {
|
||||
background-color: #5188e5 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
BIN
pages/component/commonComponents/icon/bofang2.png
Normal file
BIN
pages/component/commonComponents/icon/bofang2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
pages/component/commonComponents/icon/kj.png
Normal file
BIN
pages/component/commonComponents/icon/kj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
pages/component/commonComponents/icon/kt.png
Normal file
BIN
pages/component/commonComponents/icon/kt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
pages/component/commonComponents/icon/zanting.jpg
Normal file
BIN
pages/component/commonComponents/icon/zanting.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 816 B |
BIN
pages/component/commonComponents/icon/zt.jpg
Normal file
BIN
pages/component/commonComponents/icon/zt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 809 B |
BIN
pages/component/commonComponents/icon/zt.png
Normal file
BIN
pages/component/commonComponents/icon/zt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
@@ -6,8 +6,8 @@
|
||||
<view @click="gotoDetail(item, index)" class="scroll-view-item list_item"
|
||||
v-for="(item, index) in dataList" :key="indexKey ? item[indexKey] : item.id"
|
||||
:index="indexKey ? item[indexKey] : index">
|
||||
<view :class="['titleItem', '']" :style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`">
|
||||
<slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>
|
||||
<view :class="['titleItem', '']" :style="`width:${isNoIcon ? '100%' : 'calc(100% - 50rpx)'}`">
|
||||
<slot name="leftSlot" :row="item" :item="item" :index="index"></slot>
|
||||
|
||||
<template v-if="isCondition">
|
||||
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
|
||||
@@ -99,6 +99,7 @@
|
||||
.rightArrow {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scroll-Y {
|
||||
@@ -117,6 +118,7 @@
|
||||
|
||||
.titleItem {
|
||||
width: calc(100% - 30rpx);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/deep/.scroll-view-item:nth-child(2n-1) {
|
||||
|
||||
376
pages/component/commonComponents/orderCoupon.vue
Normal file
376
pages/component/commonComponents/orderCoupon.vue
Normal file
@@ -0,0 +1,376 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 优惠券弹出 -->
|
||||
<u-popup :show="youhuiShow" :round="10" @close="closePup">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title">请选择优惠券</view>
|
||||
<template v-if="list.length > 0">
|
||||
<view style="max-height: 40vh; overflow-y: scroll">
|
||||
<view v-for="(item, index) in list" :key="index">
|
||||
<view
|
||||
:class="`youhuiItem ${
|
||||
youhuiIndex === index ? ' youItem_style' : ''
|
||||
} ${item.canUse === 0 ? 'disableSelect' : ''}`"
|
||||
@click="choseYouhui(index)"
|
||||
><text
|
||||
class="border_radius_10"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
right: 10rpx;
|
||||
font-size: 25rpx;
|
||||
background-color: #ffe3e9;
|
||||
color: #c81346;
|
||||
padding: 6rpx;
|
||||
"
|
||||
>{{ item.couponEntity.couponRange | couponType }}</text
|
||||
>
|
||||
<view
|
||||
style="width: 25%; color: #ff0043; text-align: center"
|
||||
class="couponPrice"
|
||||
>
|
||||
<text>￥</text>
|
||||
<b style="font-size: 45rpx">{{
|
||||
item.couponEntity.couponAmount
|
||||
}}</b>
|
||||
<text
|
||||
class="useLevel"
|
||||
style="
|
||||
display: block;
|
||||
color: #666;
|
||||
font-size: 25rpx;
|
||||
margin-top: 10rpx;
|
||||
"
|
||||
>满{{ item.couponEntity.useLevel }}元可用</text
|
||||
>
|
||||
</view>
|
||||
<view style="width: 68%; padding-left: 5%">
|
||||
<view>
|
||||
<text
|
||||
style="
|
||||
display: inline-block;
|
||||
margin-right: 6rpx;
|
||||
line-height: 36rpx;
|
||||
"
|
||||
>{{ item.couponEntity.couponName }}</text
|
||||
>
|
||||
</view>
|
||||
<text
|
||||
style="
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 10rpx;
|
||||
"
|
||||
>有效期至：{{
|
||||
item.effectType == 0 ? "永久有效" : item.endTime
|
||||
}}</text
|
||||
>
|
||||
<template v-if="item.canUse == 0">
|
||||
<view
|
||||
class=""
|
||||
style="font-size: 20rpx; display: inline-block"
|
||||
>
|
||||
<text style="color: #333">不可用原因：</text>
|
||||
<text style="color: #333">{{ item.canUseReason }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view style="width: 7%; position: absolute; right: 20rpx; top: 43%">
|
||||
<template v-if="item.canUse == 1">
|
||||
<text
|
||||
style="
|
||||
border: 1px solid #d9d9d9;
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
display: inline-block;
|
||||
border-radius: 30rpx;
|
||||
"
|
||||
v-if="youhuiIndex !== index"
|
||||
></text>
|
||||
|
||||
<u-icon
|
||||
name="checkmark-circle-fill"
|
||||
color="#fd6004"
|
||||
size="20"
|
||||
v-if="youhuiIndex === index"
|
||||
>
|
||||
</u-icon>
|
||||
</template>
|
||||
</view>
|
||||
<br clear="both" />
|
||||
</view>
|
||||
<u-collapse
|
||||
v-if="source != 'goodsDetail' && item.couponEntity.remark"
|
||||
style="
|
||||
margin-top: 0rpx;
|
||||
z-index: 10 !important;
|
||||
background-color: #fafafa;
|
||||
border-bottom-left-radius: 10rpx;
|
||||
border-bottom-right-radius: 10rpx;
|
||||
"
|
||||
:border="false"
|
||||
>
|
||||
<u-collapse-item title="详细信息" name="Docs guide">
|
||||
<view
|
||||
v-if="item.couponEntity.remark"
|
||||
style="
|
||||
font-size: 22rpx;
|
||||
width: 100%;
|
||||
margin-right: 20rpx !important;
|
||||
"
|
||||
>使用说明：{{ item.couponEntity.remark }}</view
|
||||
>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox flex_box flex_between" v-if="selectcouponList.length>0">
|
||||
<view class="" style="width: 48%">
|
||||
<button type="default" @click="confirmCoupon('none')">
|
||||
不使用优惠券
|
||||
</button>
|
||||
</view>
|
||||
<view class="" style="width: 48%">
|
||||
<button type="primary" @click="confirmCoupon()">选好了</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btnBox flex_box flex_between" v-else>
|
||||
<view class="" style="width: 100%">
|
||||
<button type="default" @click="confirmCoupon('none')">
|
||||
取消
|
||||
</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
<view class="" v-else>
|
||||
<u-divider text="暂无可用优惠券哦"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "orderCoupon",
|
||||
props: ["list", "curCouponId", "sumMeony",'selectcouponList'],
|
||||
data() {
|
||||
return {
|
||||
youhuiShow: true,
|
||||
youhuiIndex: undefined,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log("进入了", this.curCouponId, this.sumMeony);
|
||||
if (this.curCouponId) {
|
||||
this.youhuiIndex = this.list.findIndex(
|
||||
(item) => item.couponEntity.id === this.curCouponId
|
||||
);
|
||||
console.log("查找后的结果", this.youhuiIndex);
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
couponType(type) {
|
||||
// 0无限制 1课程卷 2课程品类卷
|
||||
var str = "";
|
||||
switch (type) {
|
||||
case 0:
|
||||
str = "全场通用";
|
||||
break;
|
||||
case 1:
|
||||
str = "指定课程可用";
|
||||
break;
|
||||
case 2:
|
||||
str = "指定课程品类可用";
|
||||
break;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
closePup() {
|
||||
this.youhuiIndex = undefined;
|
||||
this.$emit("close");
|
||||
},
|
||||
// 确定选中优惠券
|
||||
confirmCoupon(str) {
|
||||
console.log(str, "6666");
|
||||
if (str && str == "none") {
|
||||
// 清空优惠券操作
|
||||
this.$emit("confirmCoupon");
|
||||
setTimeout(() => {
|
||||
this.closePup();
|
||||
}, 300);
|
||||
return;
|
||||
}
|
||||
if (this.youhuiIndex == 0 || this.youhuiIndex) {
|
||||
this.$emit("confirmCoupon", this.list[this.youhuiIndex]);
|
||||
setTimeout(() => {
|
||||
this.closePup();
|
||||
}, 300);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "请选择您要使用的优惠券",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
},
|
||||
// 选择优惠券
|
||||
choseYouhui(e) {
|
||||
if (this.list[e].canUse == 0) {
|
||||
return;
|
||||
}
|
||||
console.log("选中优惠券e", e);
|
||||
this.youhuiIndex = e;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.btnBox {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.tanchu {
|
||||
padding: 40rpx 30rpx 40rpx 30rpx;
|
||||
position: relative;
|
||||
|
||||
.dp_title {
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 50rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dp_add {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
right: 30rpx;
|
||||
font-size: 22rpx;
|
||||
background-color: #fd6004;
|
||||
color: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
|
||||
.u-icon {
|
||||
display: inline-block;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.addressItem {
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 20rpx 10rpx;
|
||||
margin: 25rpx 0 0 0;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
.addrContent {
|
||||
margin-left: 40rpx;
|
||||
flex: 1;
|
||||
|
||||
.addrContentTop {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
margin: 0 0 15rpx 0;
|
||||
position: relative;
|
||||
|
||||
.userName {
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.userTel {
|
||||
font-size: 25rpx;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.userMoren {
|
||||
border: 1px solid #fd6004;
|
||||
color: #fd6004;
|
||||
padding: 3rpx 10rpx;
|
||||
font-size: 22rpx;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 0 0 20rpx;
|
||||
}
|
||||
|
||||
.chooseCheck {
|
||||
position: absolute;
|
||||
top: 3rpx;
|
||||
right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.addrContentBottom {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addressItem.addItem_style {
|
||||
border-color: #fd6004;
|
||||
}
|
||||
|
||||
.youhuiItem {
|
||||
position: relative;
|
||||
background: linear-gradient(to top right, #fff, #fef2f4);
|
||||
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
|
||||
padding: 50rpx 20rpx 20rpx;
|
||||
margin: 25rpx 0 0 0;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.disableSelect {
|
||||
background: linear-gradient(to top right, #fafafa, #fafafa) !important;
|
||||
|
||||
color: #979797 !important;
|
||||
.couponPrice {
|
||||
color: #979797 !important;
|
||||
}
|
||||
.useLevel {
|
||||
color: #979797 !important;
|
||||
}
|
||||
.border_radius_10 {
|
||||
color: #98989a !important;
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
}
|
||||
.youhuiItem > view {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.youhuiItem.youItem_style {
|
||||
border-color: #fd6004;
|
||||
}
|
||||
}
|
||||
::v-deep .u-cell__body {
|
||||
padding-top: 0 !important ;
|
||||
padding-bottom: 0 !important ;
|
||||
z-index: 10 !important ;
|
||||
.u-cell__title-text {
|
||||
color: #333 !important;
|
||||
font-size: 24rpx !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-collapse-item__content__text {
|
||||
padding: 10rpx 20rpx !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
2372
pages/component/commonComponents/orderSubmit.vue
Normal file
2372
pages/component/commonComponents/orderSubmit.vue
Normal file
File diff suppressed because it is too large
Load Diff
288
pages/component/commonComponents/richDetail.vue
Normal file
288
pages/component/commonComponents/richDetail.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<view class="richDetail">
|
||||
<view class="detail_title" v-if="detailInfo.title">{{ detailInfo.title }}</view>
|
||||
<slot name="richHeadImg"></slot>
|
||||
<view class="rich_box" v-if="detailInfo.content">
|
||||
<rich-text
|
||||
:nodes="detailInfo.content | formatRichText"
|
||||
@click.stop="showPreview"
|
||||
:data-nodes="detailInfo.content"
|
||||
></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
props: ['detailInfo',],
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo']),
|
||||
}, filters: {
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText(html) { //控制小程序中图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||
'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
// 时间格式化
|
||||
formatDate(date) {
|
||||
console.log(date)
|
||||
let newDate = new Date(date);
|
||||
let year = newDate.getFullYear();
|
||||
let month = newDate.getMonth().toString().padStart(2, 0);
|
||||
let day = newDate.getDay().toString().padStart(2, 0);
|
||||
return year + '-' + month + '-' + day;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatRichText(html) { //控制图片大小
|
||||
let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
|
||||
'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||
// match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
|
||||
// return match;
|
||||
// });
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi,
|
||||
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
|
||||
return newContent;
|
||||
},
|
||||
|
||||
showPreview(e) {
|
||||
console.log('e at line 56:', e)
|
||||
let conimg = e.target.dataset.nodes;
|
||||
let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
|
||||
console.log('imgs at line 59:', imgs)
|
||||
let imgList = [];
|
||||
//遍历img标签的src里面的内容放在定义的数组imgList中
|
||||
for (var j = 0; j < imgs.length; j++) {
|
||||
imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
|
||||
imgList.push(capture)
|
||||
|
||||
})
|
||||
}
|
||||
console.log('imgList.push at line 64:', imgList)
|
||||
|
||||
|
||||
//最后一步就是所有图片放在预览的方法previewImage中就可以了
|
||||
// uni.previewImage({
|
||||
// current: imgList,
|
||||
// urls: imgList,
|
||||
// })
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url)
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ['很抱歉，暂不支持保存图片到本地'],
|
||||
success: function (res) {
|
||||
// console.log(res,'+++++')
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// getSearch() {
|
||||
// $http.request({
|
||||
// url: "book/prescript/searchPrescript",
|
||||
// method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
// data: {
|
||||
// loadAnimate: 'none', // 请求加载动画
|
||||
// 'keywords': this.searchValue,
|
||||
// type: this.currentCateIndex + 1
|
||||
// },
|
||||
// header: { //默认 无 说明：请求头
|
||||
// 'Content-Type': 'application/json'
|
||||
// },
|
||||
// }).then(res => {
|
||||
// console.log(res, '搜索结果')
|
||||
// if (res.code == 0 && res.list.length >= 0) {
|
||||
// this.showSearchList = true
|
||||
// this.searchList = res.list
|
||||
// } else {
|
||||
// this.searchList = []
|
||||
// }
|
||||
// }).catch(e => {
|
||||
// // this.dataList = []
|
||||
// this.searchList = []
|
||||
// console.log(e)
|
||||
// })
|
||||
// },
|
||||
// search(res) {
|
||||
// console.log(res, 'res')
|
||||
// // uni.showToast({
|
||||
// // title: '搜索：' + res,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// if (res == '') {
|
||||
// this.showSearchList = false
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
|
||||
// },
|
||||
// input(res) {
|
||||
// console.log('----input:', res)
|
||||
// if (res == '') {
|
||||
// this.searchList = []
|
||||
// } else {
|
||||
// this.getSearch()
|
||||
// }
|
||||
// },
|
||||
// clear(res) {
|
||||
// console.log('----clear:', res)
|
||||
// // uni.showToast({
|
||||
// // title: 'clear事件，清除值为：',
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// this.searchValue = ''
|
||||
// this.showSearchList = false
|
||||
// },
|
||||
// blur(res) {
|
||||
// // console.log('----blur:', res)
|
||||
// // if (res == '') {
|
||||
// // this.showSearchList = false
|
||||
// // this.searchList = []
|
||||
// // } else {
|
||||
// // this.getSearch()
|
||||
// // }
|
||||
// },
|
||||
// focus(e) {
|
||||
// console.log('----focus:')
|
||||
// // uni.showToast({
|
||||
// // title: 'focus事件，输出值为：' + e.value,
|
||||
// // icon: 'none'
|
||||
// // })
|
||||
// // 等于1 就是有权限
|
||||
// // this.showSearchList = true
|
||||
|
||||
// },
|
||||
// cancel(res) {
|
||||
// uni.showToast({
|
||||
// title: '点击取消，输入值为：' + res.value,
|
||||
// icon: 'none'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.commonPageBox {
|
||||
padding: 40rpx 0;
|
||||
}
|
||||
|
||||
.contentBox {
|
||||
.headImage {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.detail_title {
|
||||
padding: 20rpx 40rpx 0;
|
||||
font-size: 38rpx;
|
||||
line-height: 64rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.rich_box {
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
::v-deep img {
|
||||
max-height: 300rpx;
|
||||
}
|
||||
|
||||
p {
|
||||
display: block;
|
||||
letter-spacing: 2px ;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.richDetail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ql-size-small{
|
||||
font-size:20rpx !important;
|
||||
}
|
||||
.ql-size-large{
|
||||
font-size:36rpx !important;
|
||||
}
|
||||
.ql-size-huge{
|
||||
font-size:64rpx !important;
|
||||
}
|
||||
</style>
|
||||
368
pages/component/commonComponents/selectGoods.vue
Normal file
368
pages/component/commonComponents/selectGoods.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<view class="commonPageBox commonDetailPage" style="height: auto !important;padding-bottom: 0 !important;">
|
||||
<u-popup :show="show" mode="bottom" @close="close" class="popup_box">
|
||||
<view class="popup_top">
|
||||
<view class="product_image">
|
||||
<image
|
||||
:src="selectGoodsData.productImages"
|
||||
mode="aspectFit"
|
||||
class="goods_image"
|
||||
></image>
|
||||
</view>
|
||||
<view class="title">已选：{{ selectGoodsData.productName }}</view>
|
||||
</view>
|
||||
|
||||
<view :class="`common_radius_box goods_box popup_content`">
|
||||
<view class="title title_box">
|
||||
<view class="title_price" v-if="selectGoodsData.isVipPrice==1&&selectGoodsData.vipPrice!=null&&selectGoodsData.vipPrice!=0">
|
||||
￥{{selectGoodsData.vipPrice}}
|
||||
<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx;">VIP到手价</text>
|
||||
</view>
|
||||
<view class="title_price" v-else-if="selectGoodsData.activityPrice&&selectGoodsData.activityPrice>0">
|
||||
￥{{selectGoodsData.activityPrice}}
|
||||
<text style=" font-weight: normal; padding-left: 15rpx; font-size: 26rpx; color: #999;">活动价</text>
|
||||
</view>
|
||||
<text class="title_price" v-else>
|
||||
￥{{selectGoodsData.price}}
|
||||
</text>
|
||||
<u-icon
|
||||
name="close"
|
||||
color="#333"
|
||||
size="18"
|
||||
@click="close"
|
||||
style="display: inline-block"
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="title title_list">
|
||||
<text>商品列表（{{ goodsList.length }}）</text>
|
||||
</view>
|
||||
|
||||
<common-list
|
||||
imgUrl="url"
|
||||
isNoIcon
|
||||
imgMode="aspectFit"
|
||||
defaultUrl=""
|
||||
:isCondition="true"
|
||||
:dataList="goodsList"
|
||||
@hancleClick="selectGoods"
|
||||
label="title"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<!-- isSelectGoods -->
|
||||
<view
|
||||
class="related_courses_name"
|
||||
:class="`goods_item ${
|
||||
(!isFudu &&
|
||||
selectGoodsData &&
|
||||
selectGoodsData.productId == slotProps.row.productId) ||
|
||||
(isFudu &&
|
||||
selectGoodsData.productName == slotProps.row.productName)
|
||||
? 'isSelectGoods color_shandow'
|
||||
: ''
|
||||
}`"
|
||||
>
|
||||
<view class="image_box" style="margin-right: 10rpx">
|
||||
<image
|
||||
:src="slotProps.row.productImages"
|
||||
mode="aspectFit"
|
||||
class="goods_image"></image>
|
||||
</view>
|
||||
|
||||
<view :class="`goods_info `">
|
||||
<view class="name">{{ slotProps.row.productName }}</view>
|
||||
<view class="price">
|
||||
<text v-html="getPrice(slotProps)"></text>
|
||||
|
||||
<text class="goods_text" v-if="slotProps.row.isVipPrice==1&&slotProps.row.vipPrice!=null&&slotProps.row.vipPrice!=0">
|
||||
VIP优惠
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</common-list>
|
||||
|
||||
<view class="goods_nav_box">
|
||||
<uni-goods-nav
|
||||
:fill="true"
|
||||
:options="buyOptions"
|
||||
:button-group="customButtonGroup1"
|
||||
@click="onHandleClickBuy"
|
||||
@buttonClick="onHandleClickBuy"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: [
|
||||
"goodsList",
|
||||
"label",
|
||||
"isCondition",
|
||||
"imgUrl",
|
||||
"imgMode",
|
||||
"className",
|
||||
"col",
|
||||
"defaultUrl",
|
||||
"isScroll",
|
||||
"selectGoodsData",
|
||||
"customButtonGroup1",
|
||||
"buyOptions", "isFudu", // 是否复读
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
methods: {
|
||||
getPrice(slotProps) {
|
||||
if (
|
||||
Number(slotProps.row.isVipPrice) === 1 &&
|
||||
Number(slotProps.row.vipPrice) > 0
|
||||
) {
|
||||
return `
|
||||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||||
￥${Number(slotProps.row.vipPrice).toFixed(2)}
|
||||
</text>
|
||||
<text
|
||||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
>
|
||||
￥${Number(slotProps.row.price).toFixed(2)}
|
||||
</text>
|
||||
`;
|
||||
} else if (Number(slotProps.row.activityPrice) > 0) {
|
||||
return `
|
||||
<text style="color: #e97512; font-size: 28rpx; font-weight: bold;">
|
||||
￥${Number(slotProps.row.activityPrice).toFixed(2)}
|
||||
</text>
|
||||
<text
|
||||
style="color: #8a8a8a; font-size: 22rpx; margin-left: 4px; font-weight: bold; text-decoration: line-through;"
|
||||
>
|
||||
￥${Number(slotProps.row.price).toFixed(2)}
|
||||
</text>
|
||||
`;
|
||||
} else {
|
||||
return `<span style="color: #e97512;font-size: 28rpx;font-weight: bold;">
|
||||
￥${Number(slotProps.row.price).toFixed(2)}</span>
|
||||
`;
|
||||
}
|
||||
},
|
||||
// 放大图片
|
||||
previewImage(url) {
|
||||
console.log(url);
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
longPressActions: {
|
||||
itemList: ["很抱歉，暂不支持保存图片到本地"],
|
||||
success: function (res) {
|
||||
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.show = false;
|
||||
},
|
||||
selectGoods(data) {
|
||||
this.$emit("selectGoods", data);
|
||||
},
|
||||
open() {
|
||||
this.show = true;
|
||||
},
|
||||
gotoDetail(v) {
|
||||
this.$emit("hancleClick", v);
|
||||
},
|
||||
onHandleClickBuy() {
|
||||
this.$emit("selectGoodsData", this.selectGoodsData);
|
||||
this.$emit("onHandleClickBuy");
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
|
||||
components: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/mixin.scss';
|
||||
.goods_item {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10rpx 20rpx;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.title {
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 40rpx;
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
.image_box {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
float: left;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.goods_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.goods_info {
|
||||
width: calc(100%);
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
.name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.price {
|
||||
font-size: 30rpx;
|
||||
color: #aaa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5rpx;
|
||||
}
|
||||
}
|
||||
.isSelectGoods {
|
||||
color: $themeColor !important;
|
||||
.name {
|
||||
color: $themeColor !important;
|
||||
}
|
||||
.price {
|
||||
color: $themeColor !important;
|
||||
}
|
||||
border: 2rpx solid $themeColor;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
/deep/.list_item {
|
||||
padding: 10rpx 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
.goods_image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods_box {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
|
||||
.curriulum_title_box {
|
||||
width: calc(100%) !important;
|
||||
padding-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.curriulum_title {
|
||||
width: calc(100%);
|
||||
font-weight: 600;
|
||||
font-size: 34rpx;
|
||||
margin-top: 80rpx;
|
||||
margin-bottom: 0rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup_box {
|
||||
padding-top: 30rpx;
|
||||
|
||||
background-color: transparent;
|
||||
.popup_top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.popup_content {
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
/deep/.list_item {
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.product_image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
/deep/.u-popup__content {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/.u-popup__content__close {
|
||||
color: #fff !important;
|
||||
}
|
||||
.title_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-left: 0;
|
||||
.title_price {
|
||||
color: #ef1224;
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.line_text{
|
||||
text-decoration: line-through;
|
||||
font-size: 24rpx;
|
||||
padding: 0 20rpx;
|
||||
color: #999;
|
||||
}
|
||||
.goods_price{
|
||||
color: #ff1f00;
|
||||
font-weight: bold;
|
||||
}
|
||||
.goods_text{
|
||||
font-size: 22rpx;
|
||||
color: #ff1f00;
|
||||
font-weight: bold;
|
||||
}
|
||||
/deep/.titleItem .related_courses_name{
|
||||
width: calc(100%) !important;
|
||||
}
|
||||
</style>
|
||||
91
pages/component/commonComponents/sticky.vue
Normal file
91
pages/component/commonComponents/sticky.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-tabs
|
||||
lineWidth="30"
|
||||
lineColor="#294a97"
|
||||
:activeStyle="{
|
||||
color: '#294a97',
|
||||
transform: 'scale(1.05)',
|
||||
}"
|
||||
:inactiveStyle="{
|
||||
color: '#606266',
|
||||
transform: 'scale(1)',
|
||||
}"
|
||||
:itemStyle="itemStyle"
|
||||
:keyName="label"
|
||||
:list="dataList"
|
||||
:is-scroll="false"
|
||||
:current="currentCateIndex"
|
||||
@change="handleselectCate"
|
||||
>
|
||||
<template slot="labelSlot" slot-scope="slotProps">
|
||||
<slot name="labelSlot" :data="slotProps.data"></slot>
|
||||
</template>
|
||||
</u-tabs>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
props: ["list", "currentCateIndex", "label", "itemStyle"],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
detailInfo: {},
|
||||
playData: {},
|
||||
searchValue: "",
|
||||
|
||||
twoCateList: [], // 二级分类标题
|
||||
dataList: [{}, {}], // 方剂标题
|
||||
curTwoCateIndex: 0, // 当前选中的二级分类
|
||||
searchList: [], // 搜索结果数组
|
||||
showSearchList: false,
|
||||
userMes: {}, // 用户信息
|
||||
searchDisable: false, // 搜索不可用
|
||||
limitShow: false,
|
||||
limitTitle: "提示",
|
||||
limitContent: "",
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userInfo"]),
|
||||
},
|
||||
watch: {
|
||||
list: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
this.dataList=[...this.list]
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
async handleselectCate(e) {
|
||||
this.$emit("handleselectCate", e, e.index);
|
||||
var that = this;
|
||||
},
|
||||
},
|
||||
onBackPress() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.hideSoftKeybord();
|
||||
// #endif
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/.u-tabs .u-tabs__wrapper__nav__item__text{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
</style>
|
||||
387
pages/component/commonComponents/video.vue
Normal file
387
pages/component/commonComponents/video.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
|
||||
<view
|
||||
class="container"
|
||||
id="Aliyun"
|
||||
:style="`background-color:# 000; position: relative; padding: 0`"
|
||||
>
|
||||
<div
|
||||
:videoData="videoData"
|
||||
style="color: #fff"
|
||||
ref="AliyunFresh"
|
||||
@tap="renderScript.handleClick"
|
||||
v-show="false"
|
||||
:change:videoData="renderScript.receiveMsg"
|
||||
></div>
|
||||
|
||||
<view
|
||||
v-if="show"
|
||||
style="
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
此设备暂不支持观看当前视频<br />请移步到安卓手机进行学习！
|
||||
</view>
|
||||
<view v-else>
|
||||
<template v-if="showAliYunPlayer">
|
||||
<common-list-audio
|
||||
id="commonAudio"
|
||||
:showAliYunPlayer="showAliYunPlayer"
|
||||
@handleSuccessDispose="handleSuccessDispose"
|
||||
ref="commonVideoAliyun1"
|
||||
v-if="videoInfo.type == 2"
|
||||
:videoData="videoData"
|
||||
:currentVideoIndex="currentVideoIndex"
|
||||
:videoInfo="videoInfo"
|
||||
:curriculumData="curriculumData"
|
||||
:firstTime="firstTime"
|
||||
>
|
||||
</common-list-audio>
|
||||
<common-list-aliyun
|
||||
id="AliPlayer"
|
||||
:showAliYunPlayer="showAliYunPlayer"
|
||||
@handleSuccessDispose="handleSuccessDispose"
|
||||
ref="commonVideoAliyun"
|
||||
v-if="videoInfo.type != 2"
|
||||
:videoData="videoData"
|
||||
:firstTime="firstTime"
|
||||
>
|
||||
</common-list-aliyun>
|
||||
</template>
|
||||
|
||||
<view v-else style="height: 200px"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import store from "@/store/index.js";
|
||||
import $http from "@/config/requestConfig.js";
|
||||
import { mapState, mapMutations } from "vuex";
|
||||
import $ from "jquery";
|
||||
export default {
|
||||
props: {
|
||||
currentVideoId: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
currentVideoIndex: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
curriculumData: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
secondCountDown: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
isfresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showCountDown: false,
|
||||
playEndBlank: false,
|
||||
flag: false, //视频提示显示
|
||||
show: false, //视频提示显示
|
||||
// isfresh: false, //视频提示显示
|
||||
showAliYunPlayer: false, //视频提示显示
|
||||
content: "此设备暂不支持观看当前视频，请移步到安卓手机进行学习！",
|
||||
platform: null, //设备类型
|
||||
isFullScreen: false, //当前是否是全屏模式
|
||||
isOnLoad: false, //是否刷新
|
||||
isChange: false, //是否切换播放源
|
||||
videoList: [], //视频列表
|
||||
videoOssList: [], //本地视频列表
|
||||
options: {}, //父组件传参
|
||||
currentTime: "", //当前播放时间
|
||||
videoData: {}, //获取当前的播放信息，playAuth，m3u8url
|
||||
videoInfo: {}, //获取当前的播放信息，playAuth，m3u8url
|
||||
isSetFirstTime: false, //是否获取到初始播放时间
|
||||
firstTime: 0, //初始播放时间
|
||||
|
||||
urlList: {
|
||||
checkVideo: "sociology/course/checkVideo",
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// ...mapState(["videoOssList"]),
|
||||
},
|
||||
|
||||
watch: {
|
||||
isOnLoad(newValue) {
|
||||
if (this.isOnLoad) {
|
||||
this.changeVideoData();
|
||||
}
|
||||
},
|
||||
timer(newValue) {
|
||||
this.$emit("child-event", newValue);
|
||||
},
|
||||
isfresh(newValue) {},
|
||||
|
||||
videoOssList: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (this.videoOssList.length > 0) {
|
||||
uni.setStorageSync("videoOssList", JSON.stringify(this.videoOssList));
|
||||
}
|
||||
},
|
||||
},
|
||||
currentVideoId: {
|
||||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (newValue) {
|
||||
// if (!this.isfresh) {
|
||||
this.videoData = {};
|
||||
this.showAliYunPlayer = false;
|
||||
this.platform = this.$platform;
|
||||
this.show = false;
|
||||
this.isOnLoad = false;
|
||||
this.videoData = {};
|
||||
this.firstTime = 0;
|
||||
if (uni.getStorageSync("videoOssList")) {
|
||||
this.videoOssList = JSON.parse(uni.getStorageSync("videoOssList"));
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.checkVideo();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
//
|
||||
mounted() {},
|
||||
//子组件销毁前
|
||||
beforeDestroy() {
|
||||
plus.screen.lockOrientation("portrait-primary");
|
||||
},
|
||||
beforeUpdate() {},
|
||||
methods: {
|
||||
hideNextVideo() {
|
||||
this.showCountDown = false;
|
||||
this.playEndBlank = false;
|
||||
this.$emit("hideNextVideo");
|
||||
},
|
||||
destory() {
|
||||
if (this.showAliYunPlayer) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.commonVideoAliyun.destory();
|
||||
this.videoData = {};
|
||||
});
|
||||
}
|
||||
},
|
||||
handleSuccessDispose() {
|
||||
this.showAliYunPlayer = false;
|
||||
this.$emit("handleFresh", true);
|
||||
},
|
||||
//ios不能播放私有加密提示信息
|
||||
openShow() {
|
||||
this.show = true;
|
||||
},
|
||||
changeflag() {
|
||||
this.flag = 1;
|
||||
},
|
||||
|
||||
changeVideoData() {
|
||||
if (this.videoData && this.videoData.id && this.flag == 1) {
|
||||
this.showAliYunPlayer = true;
|
||||
} else {
|
||||
this.showAliYunPlayer = false;
|
||||
setTimeout(() => {
|
||||
this.changeVideoData();
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
|
||||
//获取 video 初始化信息 (播放凭证 + m3u8)
|
||||
async checkVideo() {
|
||||
await $http
|
||||
.request({
|
||||
url: this.urlList.checkVideo,
|
||||
method: "Post", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: {
|
||||
id: this.currentVideoId,
|
||||
loadAnimate: "none",
|
||||
},
|
||||
header: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(async (res) => {
|
||||
console.log("res at line 204:", res.video);
|
||||
var that = this;
|
||||
this.videoInfo = res.video;
|
||||
that.videoData = {
|
||||
id: that.currentVideoId,
|
||||
vid: res.video.video,
|
||||
};
|
||||
|
||||
if (res.video.type == 1) {
|
||||
if (res.video.m3u8Url == null || res.video.m3u8Url == "") {
|
||||
//私有加密
|
||||
if (that.$platform == "ios") {
|
||||
that.show = true;
|
||||
return false;
|
||||
}
|
||||
that.videoData.playAuth = res.video.playAuth.replace(/=/g, "");
|
||||
that.videoData.encryptType = "1";
|
||||
} else {
|
||||
//标准加密
|
||||
that.videoData.source = res.video.m3u8Url;
|
||||
}
|
||||
} else {
|
||||
//mp4 mp3
|
||||
that.videoData.source = res.video.videoUrl;
|
||||
}
|
||||
|
||||
var netWork = res.video.userCourseVideoPositionEntity
|
||||
? res.video.userCourseVideoPositionEntity.position
|
||||
: 0;
|
||||
var list = [...that.videoOssList];
|
||||
if (list.length > 0) {
|
||||
list = [];
|
||||
var index = list.findIndex((e) => e.id == res.video.id);
|
||||
if (netWork) {
|
||||
if (index >= 0) {
|
||||
that.firstTime =
|
||||
list[index].time > netWork ? list[index].time : netWork;
|
||||
} else {
|
||||
that.firstTime = netWork ? netWork : 0;
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
that.firstTime = list[index].time ? list[index].time : 0;
|
||||
}
|
||||
}
|
||||
if (res.video.duration - that.firstTime <= 2) {
|
||||
that.firstTime = 0;
|
||||
}
|
||||
that.videoOssList = [...list];
|
||||
}
|
||||
|
||||
that.isOnLoad = true;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<script module="renderScript" lang="renderjs">
|
||||
import $ from "jquery";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
if (typeof window.Aliplayer === 'function') {
|
||||
} else {
|
||||
// 动态引入较大类库避免影响页面展示
|
||||
this.loadWebPlayerSDK(); //引入播放器sdk、css
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (typeof window.Aliplayer === 'function') {
|
||||
this.initAliPlayer();
|
||||
}
|
||||
},
|
||||
destroyed(){
|
||||
$("#Aliyun").empty();
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleClick(event, ownerInstance) {
|
||||
ownerInstance.callMethod("changeflag");
|
||||
},
|
||||
initAliPlayer() {
|
||||
this.$refs.AliyunFresh.click()
|
||||
},
|
||||
receiveMsg(newValue, oldValue, ownerVm, vm) {}, //是否刚开始设置播放时间
|
||||
//引入播放器sdk、css
|
||||
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 = () => {
|
||||
const s_tag1 = document.createElement("script"); // 引入播放器js
|
||||
s_tag1.type = "text/javascript";
|
||||
s_tag1.src =
|
||||
"https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js";
|
||||
s_tag1.charset = "utf-8";
|
||||
s_tag1.onload = () => {
|
||||
this.initAliPlayer();
|
||||
resolve();
|
||||
};
|
||||
document.body.appendChild(s_tag1);
|
||||
};
|
||||
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);
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
|
||||
/deep/.pause {
|
||||
width: 60rpx !important;
|
||||
height: 60rpx !important;
|
||||
}
|
||||
}
|
||||
.showCountDownd {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
color: #fff;
|
||||
font-size: 38rpx;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10rpx;
|
||||
z-index: 4;
|
||||
|
||||
text {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user