zm/soulspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
liuyuan
2025-06-10 17:49:45 +08:00
parent d3ede507f3
commit b465c476b8
21 changed files with 569 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
pages/component/commonComponents/list.vue
View File

@@ -1,129 +1,159 @@
<template>
<view style="width: 100%; height: 100%;">
<view v-if="axiosStatus!=''">
<scroll-view @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList&&dataList.length > 0"
style="height: 100%">
<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 style="width: 100%; height: 100%">
<view v-if="axiosStatus != ''">
<scroll-view
@scrolltolower="lower"
scroll-y="true"
class="scroll-Y"
v-if="dataList && dataList.length > 0"
style="height: 100%"
>
<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', '']">
<slot name="leftSlot" :row="item" :item="item" :index="index">
</slot>
<template v-if="isCondition">
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<template v-if="isCondition">
<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
</template>
<template v-else>
{{ item[label] }}
</template>
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
</view>
<image v-if="!isNoIcon" src="@/static/icon/icon_right.png" class="rightArrow" style=""></image>
</view>
</scroll-view>
<u-empty v-else-if="noDataIcon && isLoadingHide" :mode="noDataIcon"
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`">
</u-empty>
<u-divider style="width: 100%;" v-else-if="!isOrderList" text="暂无数据"></u-divider>
</view>
</view>
<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
</view>
<image
v-if="!isNoIcon"
src="@/static/icon/icon_right.png"
class="rightArrow"
style=""
></image>
</view>
</scroll-view>
<u-empty
v-else-if="noDataIcon && isLoadingHide"
:mode="noDataIcon"
:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`"
>
</u-empty>
<u-divider style="width: 100%" v-else text="暂无数据哦~"></u-divider>
</view>
</view>
</template>
<script>
import {
mapState
} from "vuex";
export default {
props: [
"indexKey",
"dataList",
"label",
"isCondition",
"isNoIcon",
"pagination",
"noDataIcon",
"isLoadingHide",
"axiosStatus",
"isOrderList"
],
data() {
return {
status: '',
};
},
onLoad() {},
onShow() {
this.status = '';
},
computed: {
...mapState(["userInfo"]),
},
methods: {
lower() {
this.$emit("lower");
},
gotoDetail(data, index) {
this.$emit("hancleClick", data, index);
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
import { mapState } from "vuex";
export default {
props: [
"indexKey",
"dataList",
"label",
"isCondition",
"isNoIcon",
"pagination",
"noDataIcon",
"isLoadingHide",
"axiosStatus",
],
data() {
return {
status: "",
};
},
onLoad() {},
onShow() {
this.status = "";
},
onHide() {
// this.showSearchList = false
// this.searchList = []
},
computed: {
...mapState(["userInfo"]),
},
methods: {
lower() {
this.$emit("lower");
},
gotoDetail(data, index) {
this.$emit("hancleClick", data, index);
},
},
onBackPress() {
// #ifdef APP-PLUS
plus.key.hideSoftKeybord();
// #endif
},
components: {},
};
</script>
<style lang="scss" scoped>
.list_item {
width: 100%;
padding: 20rpx 20rpx;
font-size: 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
}
.list_item {
width: 100%;
padding: 20rpx;
font-size: 30rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #e0e0e0;
display: flex;
align-items: center;
justify-content: space-between;
}
.list_item :last-child(1) {
border-bottom: none;
}
.list_item :last-child(1) {
border-bottom: none;
}
.scroll-view-item:nth-child(2n-1) {
background-color: #f5f5f5 !important;
}
.scroll-view-item:nth-child(2n-1) {
background-color: #f5f5f5 !important;
}
.rightArrow {
width: 40rpx;
height: 40rpx;
}
.rightArrow {
width: 40rpx;
height: 40rpx;
}
.scroll-Y {
height: 100%;
}
.scroll-Y {
height: 100%;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
}
.scroll-view-item {
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
.titleItem {
width: calc(100% - 30rpx);
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
// height: 300rpx;
// line-height: 300rpx;
// text-align: center;
// font-size: 36rpx;
}
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
.titleItem {
width: calc(100%) !important;
}
.list_item:last-child {
border-bottom: none !important;
}
</style>
/deep/.scroll-view-item:nth-child(2n-1) {
background-color: transparent !important;
}
.list_item:last-child {
border-bottom: none !important;
}
</style>

70
pages/component/commonComponents/video/AliPlayer.vue
View File

@@ -1,4 +1,5 @@
<template>
<view
class="container playerBox"
id="playerBox"
@@ -50,10 +51,10 @@
<div @tap="renderScript.emitDispose" ref="videoContent6" v-show="false">
监听第一次初始播放时长,开始进行接口存储时间
</div>
<!-- v-if="platform != 'ios'" -->
<!-- 全屏按钮 start -->
<!-- 注意：主要用于安卓端，因为ios手机会被劫持 -->
<div class="fullScreenButton-container" v-if="platform != 'ios'">
<div class="fullScreenButton-container">
<div
:class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
@tap="renderScript.changeVideoScreen"
@@ -296,12 +297,12 @@ export default {
x: 10,
y: 7,
},
{
name: "fullScreenButton",
align: "tr",
x: 10,
y: 12,
},
// {
// name: "fullScreenButton",
// align: "tr",
// x: 5,
// y: 12,
// },
{
name: "prism-speed-selector",
align: "tr",
@@ -439,9 +440,9 @@ export default {
name: "RateComponent", //倍速组件
type: AliPlayerComponent.RateComponent,
},
];
if (this.platform != "ios") {
// if (this.platform != "ios") {
var fullScreenButtonComponent = Aliplayer.Component({
init: function (status, toAddress) {
this.fullScreenStatus = status;
@@ -465,7 +466,7 @@ export default {
];
}
// }
//设置播放基本配置
var playerOptions = {
@@ -560,26 +561,37 @@ export default {
ownerInstance.callMethod("handleEnd");
},
//调用 screenChange + 设置全屏
changeVideoScreen(event, ownerInstance) {
var status = this.player.fullscreenService.getIsFullScreen();
ownerInstance.callMethod("screenChange", {
status: status,
primary: status ? "portrait" : "landscape",
});
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('不要旋转, 使用原生全屏');
}
if (status) {
setTimeout(() => {
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
this.player.fullscreenService.cancelFullScreen();
}, 100);
} else {
this.player.fullscreenService.requestFullScreen();
setTimeout(() => {
plus.screen.lockOrientation("landscape-primary");
}, 100);
}
},
}
},
//调用 changeVideoData 切换播放源
changeVideoData(event, ownerInstance) {

19
pages/component/commonComponents/video/audio.vue
View File

@@ -1,4 +1,5 @@
<template>
<view
class="container playerBox"
id="playerBox"
@@ -47,7 +48,7 @@
right: 0;
bottom: 0;
border-radius: 40rpx;
border: 15rpx solid #000;
border: 15rpx solid #000;
padding: 40rpx 0 20rpx;
box-sizing: border-box;
background-size: cover;
@@ -1054,11 +1055,12 @@ export default {
console.log('vm at line 926:', newValue, oldValue, ownerVm, vm)
if (newValue != null) {
if (this.platform == "ios") {
this.player.one("canplay", () => {
this.player.seek(newValue);
});
player.seek(newValue);
} else {
this.player.seek(newValue);
player.seek(newValue);
}
this.curTime = newValue
}
@@ -1066,12 +1068,11 @@ export default {
receiveMsgjumpNumber(newValue, oldValue, ownerVm, vm) {
console.log('vm at line 926:', newValue, oldValue, ownerVm, vm)
if (newValue != 0) {
if (this.platform == "ios") {
this.player.one("canplay", () => {
this.player.seek(newValue);
});
player.seek(newValue);
} else {
this.player.seek(newValue);
player.seek(newValue);
}
this.curTime = newValue
}

5
pages/component/commonComponents/video/index.vue
View File

@@ -1,4 +1,5 @@
<template>
<view
class="container"
id="Aliyun"
@@ -218,12 +219,12 @@ export default {
},
})
.then(async (res) => {
console.log("res at line 204:", res.video);
var that = this;
this.videoInfo=res.video
this.videoInfo = res.video;
that.videoData = {
id: that.currentVideoId,
vid: res.video.video,
};
if (res.video.type == 1) {

267
pages/component/commonComponents/video/video.vue
View File

@@ -1,7 +1,19 @@
<template>
<view class="container" style="background-color: #000; position: relative">
<video src="https://video.taihumed.com/d0c8e6d23e5f71ef81714531858c0102/c27e8334925a485bb7d57b46463f24ab-75b0e05b7a76efaff190b6417b2168a7-sd-nbv1-encrypt-stream.m3u8"></video>
<view class="container" style="background-color: #000; position: relative">
<!-- <u-icon
@click="goBack"
name="arrow-left"
color="#3ab3ae"
size="20"
:style="`display: inline-block; position: absolute; top: ${
statusBarHeight + 2
}px; left: ${10}px;z-index: 999;`"
></u-icon>-->
<video
src="https://video.taihumed.com/d0c8e6d23e5f71ef81714531858c0102/c27e8334925a485bb7d57b46463f24ab-75b0e05b7a76efaff190b6417b2168a7-sd-nbv1-encrypt-stream.m3u8"
></video>
<view style="width: 100%; height: 200px">
<div
class=""
@@ -129,7 +141,7 @@ export default {
},
async onUnload() {
uni.navigateTo({
url: "/pages/curriculum/order/back",
url: "/pages/curriculum/order/curriculum/back",
});
// #ifdef APP-PLUS
plus.screen.lockOrientation("portrait-primary"); //锁死屏幕方向为竖屏
@@ -186,7 +198,7 @@ export default {
console.log(
"status at line 这是当前的状态158:",
data.status,
data.primary
data.primary,
);
this.isFullScreen = !data.status;
this.$emit("changeScreen", this.isFullScreen);
@@ -359,13 +371,12 @@ export default {
this.currentTime = data.time;
console.log(
"this.currentTime at line 这是结束的时候掉的存储视频:",
this.currentTime
this.currentTime,
);
clearInterval(this.$store.state.videoTimer);
this.timer = null;
await this.setVideoTime();
},
setVideoTime(time) {
var data = {};
@@ -417,7 +428,7 @@ export default {
// if (this.currentTime) {
await this.setVideoTime();
// }
}, 60000)
}, 60000),
);
// }, 5000);
},
@@ -674,20 +685,36 @@ export default {
* 显示广告
*/
ended: function(player, e) {
// this.$html.show();
}
});
console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
var playerOptions = {
id: "url-player-test",
"vid": this.videoData
.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
width: '100%', //容器的大小
// videoWidth: '100vw', //容器的大小
// videoHeight: '100vh', //容器的大小
height: '100%', //容器的大小
playsinline: true,
controlBarVisibility: "click",
cover: "",
components: [
// {
// name: 'BulletScreenComponent',
// type: AliPlayerComponent.BulletScreenComponent,
// /** Descriptions of the scrolling text component parameters: text, style, bulletPosition
// * text: The scrolling text
// * style: The style of the scrolling text
// * bulletPosition: The position of the scrolling text. Valid values: 'top', 'bottom', and 'random'. The default is 'random'.
// */
// args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
// },
{
name: 'adComponent',
type: fullScreenButtonComponent,
@@ -699,6 +726,14 @@ export default {
name: 'RateComponent',
type: AliPlayerComponent.RateComponent
},
// {
// name: 'RotateMirrorComponent',
// type: AliPlayerComponent.RotateMirrorComponent
// },
],
skinLayout: [{
@@ -752,6 +787,14 @@ export default {
x: 10,
y: 7
},
// {name: "fullScreenButton", align: "tr", x: 10, y: 12},
// {name:"subtitle", align:"tr",x:15, y:12},
// {
// name: "setting",
// align: "tr",
// x: 15,
// y: 12
// },
{
name: "prism-speed-selector",
align: "tr",
@@ -774,12 +817,12 @@ export default {
if (this.videoData.type == 1) {
playerOptions = {
...playerOptions,
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
"playauth": this.videoData.playAuth, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
"encryptType": 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
"playConfig": {
"EncryptType": 'AliyunVoDEncryption'
},
}
} else {
@@ -789,16 +832,48 @@ export default {
}
}
var player = new Aliplayer(playerOptions, function(player) { });
this.player = player;
this.player = player;
console.log('是否拿到第一次初始值呢',this.platform, typeof this.firstTime, this.firstTime)
if(this.platform == 'ios'){
player.on('canplay',function(){
console.log('这是ios数据缓冲初次设置播放位置判断！！！！')
this.player.seek(20);
})
}else{
this.player.seek(this.firstTime)
}
if(this.platform == 'ios'){
player.on('canplay',function(){
console.log('这是ios数据缓冲初次设置播放位置判断！！！！')
this.player.seek(20);
})
// var seeked = false;
// player.on('loadedmetadata',function (e) {
// if(!seeked)
// {
// seeked = true;
// this.player.seek(20);
// }
// });
// player.on('waiting',function(){
// console.log('这是ios数据缓冲初次设置播放位置判断！！！！')
// setTimeout(()=>{
// player.seek(this.firstTime)
// },500)
// })
}else{
this.player.seek(this.firstTime)
}
// var seeked = false;
// this.player.on('loadedmetadata',function (e) {
// if(!seeked)
// {
// seeked = true;
// player.seek(this.firstTime);
// }
// });
clearInterval(this.videoTimer);
this.videoTimer = null;
@@ -811,25 +886,160 @@ export default {
}, 1000);
this.$refs.videoContent4.click()
player.on('ready', function() {
// player.fullscreenService.requestFullScreen()
})
// this.
// this.$refs.videoContent.click()
this.player.on('ended', function() {
// console.log('that.curTime at line 242:', this.curTime)
// console.log('that.curStatus at line 210:', this.curStatus)
this.$refs.videoContent2.click()
})
// player.setRotate(90)
//全屏播放
// player.one('canplay', function() {
// // console.log('canplay', this.player.tag);
// player.tag.play();
// });
},
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,'+++++')
}
}
});
},
receiveScreenType(newValue) {
// console.log('newValue at line 427屏幕方向111111111111:', newValue)
},
async receiveIsfresh(newValue) {
console.log('是否走了刷新销毁方法:', this.player)
if (this.player) {
clearInterval(this.$store.state.videoTimer)
// await this.setVideoTime();
this.player.dispose();
// $('#url-player-test').empty()
// this.player.seek(newValue);
}
},
async receiveplatform(newValue) {
},
async receiveIsChange(newValue) {
// this.timer=null
if (this.isChange) {
this.checkValue()
// if (this.videoData.type == 1) {
// console.log('是否走了切换加密视频方法:', this.isChange, this.videoData)
// await this.player.replayByVidAndPlayAuth(this.videoData.video, this.videoData.playAuth)
// this.$refs.videoContent.click()
// } else {
// console.log('是否走了切换老视频/音频方法:', this.isChange, this.videoData)
// await this.player.loadByUrl(this.videoData.videoUrl)
// this.$refs.videoContent.click()
// }
}
// this.$refs.videoContent3.click()
},
receiveVideoList(newValue, oldValue, ownerVm, vm) {
// //数据变化
console.log('currentVideoListcurrentVideoListcurrentVideoList', newValue)
},
receiveMsg(newValue, oldValue, ownerVm, vm) {
//数据变化
// console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
receiveWinWidth(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
receiveWinHeight(newValue, oldValue, ownerVm, vm) {
//数据变化
console.log('newValue', newValue)
// console.log('oldValue', oldValue)
// console.log('ownerVm', ownerVm)
// console.log('vm', vm)
},
checkValue() {
console.log(this.videoId, this.authId, this.videoData, "1111888888")
if ((!this.videoData.playAuth || !this.currentVideoList)) {
setTimeout(() => {
this.checkValue();
@@ -842,6 +1052,9 @@ export default {
},
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';
@@ -875,6 +1088,20 @@ export default {
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.js';
// s_tag.charset = 'utf-8';
// s_tag.onload = () => {
// resolve();
// }
// document.body.appendChild(s_tag);
// });
}
}
}
</script>