diff --git a/pages/album/components/videoSlide.nvue b/pages/album/components/videoSlide.nvue
index 6e195c4..ea43006 100644
--- a/pages/album/components/videoSlide.nvue
+++ b/pages/album/components/videoSlide.nvue
@@ -1,822 +1,88 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ videoInfo_0.src }}
- 评分 4.8
-
-
- {{videoInfo_0.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 珍草品汇理疗馆珍馆服务流程11订单
- 评分 4.8
-
-
- {{videoInfo_1.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 珍草品汇理疗馆珍馆服务流程11订单
- 评分 4.8
-
-
- {{videoInfo_2.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 珍草品汇理疗馆珍馆服务流程11订单
- 评分 4.8
-
-
- {{videoInfo_3.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 珍草品汇理疗馆珍馆服务流程11订单
- 评分 4.8
-
-
- {{videoInfo_4.name}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ videoIndex+1 }}/{{ videoListLength }}
-
-
+
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/pages/album/components/videoplayer.vue b/pages/album/components/videoplayer.vue
new file mode 100644
index 0000000..9ae18ef
--- /dev/null
+++ b/pages/album/components/videoplayer.vue
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pages/album/index.nvue b/pages/album/index.nvue
index 0dda008..97b70ad 100644
--- a/pages/album/index.nvue
+++ b/pages/album/index.nvue
@@ -1,52 +1,59 @@
-
@@ -68,6 +75,23 @@
title: "主图",
id: 1
},
+ {
+ title: "作品",
+ id: 3
+ },
+ {
+ title: "其他",
+ id: 4
+ }
+ ],
+ 2: [{
+ title: "全部",
+ id: 0
+ },
+ {
+ title: "主图",
+ id: 1
+ },
{
title: "环境",
id: 2
@@ -94,7 +118,7 @@
inactiveStyle: {
fontWeight: 500,
fontSize: "32rpx",
- color: "#666666",
+ color: "#333333",
},
current: 1,
statusBarHeight: 0,
@@ -108,6 +132,7 @@
};
},
async onLoad(options) {
+
// 获取状态栏高度
const systemInfo = await uni.getSystemInfoSync()
this.systemInfo = systemInfo
@@ -120,6 +145,12 @@
this.getVideoList()
}
},
+ onShow() {
+ // // #ifdef APP-PLUS
+ // plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
+ // plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
+ // // #endif
+ },
computed: {
// 计算swiper的样式
swiperStyle() {
@@ -128,8 +159,8 @@
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
- ?.documentElement?.clientHeight|| 0, screenWidth ) ;
- let height = viewportHeight - 88 - this.statusBarHeight;
+ ?.documentElement?.clientHeight || 0, screenWidth);
+ let height = viewportHeight - 100 - this.statusBarHeight;
return {
height: `${height}rpx`
};
@@ -141,55 +172,69 @@
swiperStyle2() {
if (this.current == 1) {
return {
- marginTop: `${88 + this.statusBarHeight + 100}rpx`,
- height: `${this.viewportHeight-88-this.statusBarHeight-100}rpx`
+ height: `${this.viewportHeight-100-this.statusBarHeight-100}rpx`
};
}
return {
height: `${this.viewportHeight}rpx`
};
},
+ swiperStyle3() {
+ if (this.current == 1) {
+ return {
+ width: `750rpx`,
+ height: `${200 + this.statusBarHeight}rpx`,
+ };
+ }
+ return {
+ width: `750rpx`,
+ height: `${100 + this.statusBarHeight}rpx`,
+ };
+ },
viewportHeight() {
let screenWidth = this.systemInfo.screenWidth;
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
- ?.documentElement?.clientHeight|| 0, screenWidth) ;
+ ?.documentElement?.clientHeight || 0, screenWidth);
return viewportHeight
},
},
methods: {
+ goBack() {
+ uni.navigateBack(-1)
+ },
+ toimg(item) {
+ console.log(item, 'item');
+ uni.previewImage({
+ urls: [item.url], // 外面加 [] 变成数组
+ current: 0 // 可选，默认第一张
+ })
+ },
+ tovideo(item) {
+ uni.navigateTo({
+ url: '/pages/album/components/videoplayer?url=' + item.url
+ })
+ },
clickTab(item) {
this.cardListIndex = item.id
},
tabsClick(e) {
- this.$nextTick(() => {
-
- this.current = e.index
- if(this.current==1){
- this.activeStyle.color = "#333333"
- this.inactiveStyle.color = "#666666"
- this.$refs.ideoSlideRrf.nowStopVideo()
- }
- if(this.current==0){
- this.activeStyle.color = "#fff"
- this.inactiveStyle.color = "#ccc"
- this.$refs.ideoSlideRrf.nowPlayVideo()
- }
- })
+ console.log('12312312312');
+ this.current = e.index
+ this.activeStyle.color = "#333333"
+ this.inactiveStyle.color = "#666666"
},
swiperChange(e) {
this.$nextTick(() => {
this.current = e.detail.current
- if(this.current==1){
+ if (this.current == 1) {
this.activeStyle.color = "#333333"
this.inactiveStyle.color = "#666666"
- this.$refs.ideoSlideRrf.nowStopVideo()
}
- if(this.current==0){
- this.activeStyle.color = "#fff"
- this.inactiveStyle.color = "#ccc"
- this.$refs.ideoSlideRrf.nowPlayVideo()
+ if (this.current == 0) {
+ this.activeStyle.color = "#333333"
+ this.inactiveStyle.color = "#666666"
}
})
@@ -208,12 +253,17 @@
type: 1
}).then(res => {
if (res.code == 200) {
- this.imagObj = res.data.list[1]
- let all = []
- for (let key in res.data.list[1]) {
- all = [...all, ...res.data.list[1][key]]
+ if (res.data.list.length != 0) {
+ this.imagObj = res.data.list[1]
+ let all = []
+ for (let key in res.data.list[1]) {
+ all = [...all, ...res.data.list[1][key]]
+ }
+ this.imagObj[0] = all
+ } else {
+ this.imagObj[0] = []
}
- this.imagObj[0] = all
+
}
})
},
@@ -224,8 +274,17 @@
type: 2
}).then(res => {
if (res.code == 200) {
- for (let key in res.data.list[2]) {
- this.videoList = [...this.videoList, ...res.data.list[2][key]]
+ if (res.data.list.length != 0) {
+ console.log(res.data, 'res.data');
+ for (let key in res.data.list[2]) {
+ this.videoList = [...this.videoList, ...res.data.list[2][key]]
+ this.videoList.forEach((item) => {
+ item.img = item.url +
+ '?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto'
+ })
+ }
+ } else {
+ this.videoList = []
}
}
})
@@ -249,7 +308,7 @@
z-index: 9999;
background: #f5f5f5;
padding: 0 24rpx;
-
+
.left-area {
display: flex;
align-items: center;
@@ -266,10 +325,12 @@
}
}
}
- .videoTop{
+
+ .videoTop {
background: transparent;
- ::v-deep .uv-tabs__wrapper__nav__line{
- background: #fff!important;
+
+ ::v-deep .uv-tabs__wrapper__nav__line {
+ background: #fff !important;
}
}
@@ -306,6 +367,7 @@
.container-content {
z-index: 1000;
+
.swiper {
background: #fff;
@@ -349,6 +411,47 @@
}
}
+ .swiper-items3 {
+ flex-wrap: wrap;
+ flex-direction: row;
+ display: flex;
+ padding-bottom: 20rpx;
+
+ .swiper-item3 {
+ width: 370rpx;
+ height: 370rpx;
+ margin-top: 10rpx;
+ overflow: hidden;
+ position: relative;
+ box-sizing: border-box;
+ border-radius: 20rpx;
+
+ .swiper-item3-video {
+ width: 370rpx;
+ height: 370rpx;
+ }
+
+ .swiper-item3-title {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 33rpx;
+ padding: 0 8rpx;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 0rpx 0rpx 10rpx 0rpx;
+ width: fit-content;
+
+ .swiper-item3-title-text {
+ font-weight: 400;
+ font-size: 18rpx;
+ color: #FFFFFF;
+ line-height: 33rpx;
+
+ }
+ }
+ }
+ }
+
.item2Left {
margin-right: 9rpx;
}
@@ -398,6 +501,4 @@
align-items: flex-end;
justify-content: space-between;
}
-
-
\ No newline at end of file