mrr.sj.front/pages/album/index.nvue

<template>
	<view class="container">
		<view class="positonFixed">
			<view class="header-top flex-row-center" :style="{ height: `${100}rpx`,paddingTop:`${statusBarHeight}rpx`}">
				<view class="left-area" @click="goBack">
					<image src="/static/images/back.png" mode="aspectFit" class="back-icon"></image>
				</view>
				<view class="flex-row-center-center" style="flex: 1;margin-right: 18rpx;height:66rpx;">
					<uv-tabs :list="list" @click="tabsClick" itemStyle="height:66rpx;" :activeStyle="activeStyle"
						:inactiveStyle="inactiveStyle" :current="current" :lineColor="`rgba(232, 16, 30, 1)`"></uv-tabs>
				</view>
			</view>
			<scroll-view scroll-x style="height: 100rpx;background-color: #fff;" v-if="current==1">
				<view class="container-tabs flex-row-center">
					<view class="container-tab flex-row-center-center" @click="clickTab(item)"
						:class="{active:cardListIndex==item.id}" v-for="(item,index) in cardList[user_type]"
						:key="index">
						<text class="container-tab-text">{{ item.title }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view :style="swiperStyle3"></view>
		<view class="container-content" :style="swiperStyle2">
			<swiper class="swiper" circular :style="swiperStyle" :current="current" @change="swiperChange"
				:disable-touch="current==0">
				<swiper-item>
					<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight}rpx`}">
						<view class="swiper-items3">
							<view class="swiper-item3" :class="{item2Left:index%2 == 0}"
								v-for="(item,index) in videoList" :key="index" @click="tovideo(item)">
								<image class="swiper-item3-video" mode="aspectFill" :src="item.img"></image>
								<image
									src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c6c039fc-99fd-492e-ae9a-ed43260c94ef.png"
									mode="widthFix"
									style="width: 80rpx;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
								</image>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight-100}rpx`}">
						<view class="swiper-items2">
							<view class="swiper-item2" :class="{item2Left:index%2 == 0}"
								v-for="(item,index) in imagObj[cardListIndex]" :key="index" @click="toimg(item)">
								<image class="swiper-item2-img" mode="aspectFill" :src="item.url"></image>
								<view class="swiper-item2-title">
									<text class="swiper-item2-title-text">{{ item.name }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoSlide from "./components/videoSlide"
	import request from "../../utils/request";
	export default {
		components: {
			videoSlide
		},
		data() {
			return {
				cardList: {
					1: [{
							title: "全部",
							id: 0
						},
						{
							title: "主图",
							id: 1
						},
						{
							title: "作品",
							id: 3
						},
						{
							title: "其他",
							id: 4
						}
					],
					2: [{
							title: "全部",
							id: 0
						},
						{
							title: "主图",
							id: 1
						},
						{
							title: "环境",
							id: 2
						},
						{
							title: "作品",
							id: 3
						},
						{
							title: "其他",
							id: 4
						}
					]
				},
				cardListIndex: 0,
				systemInfo: {},
				id: null, //商家或者手艺人id
				user_type: null,
				activeStyle: {
					fontWeight: 500,
					fontSize: "32rpx",
					color: "#333333",
				},
				inactiveStyle: {
					fontWeight: 500,
					fontSize: "32rpx",
					color: "#333333",
				},
				current: 1,
				statusBarHeight: 0,
				list: [{
					name: '视频',
				}, {
					name: '相册',
				}],
				imagObj: {},
				videoList: []
			};
		},
		async onLoad(options) {

			// 获取状态栏高度
			const systemInfo = await uni.getSystemInfoSync()
			this.systemInfo = systemInfo
			let screenWidth = systemInfo.screenWidth;
			this.statusBarHeight = this.pxToRpx(systemInfo.statusBarHeight, screenWidth);
			if (options.id && options.user_type) {
				this.id = options.id
				this.user_type = options.user_type
				this.getImgList()
				this.getVideoList()
			}
		},
		onShow() {
			// // #ifdef APP-PLUS
			// plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
			// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
			// // #endif
		},
		computed: {
			// 计算swiper的样式
			swiperStyle() {
				if (this.current == 1) {
					let screenWidth = this.systemInfo.screenWidth;
					// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位

					let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
						?.documentElement?.clientHeight || 0, screenWidth);
					let height = viewportHeight - 100 - this.statusBarHeight;
					return {
						height: `${height}rpx`
					};
				}
				return {
					height: `${this.viewportHeight}rpx`
				};
			},
			swiperStyle2() {
				if (this.current == 1) {
					return {
						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);
				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) {
				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) {
						this.activeStyle.color = "#333333"
						this.inactiveStyle.color = "#666666"
					}
					if (this.current == 0) {
						this.activeStyle.color = "#333333"
						this.inactiveStyle.color = "#666666"
					}
				})

			},
			pxToRpx(px, screenWidth) {

				if (typeof px !== 'number') {
					throw new Error('请传入数字类型的px值');
				}
				return px * (750 / screenWidth);
			},
			getImgList() {
				request.post("/user/imgVideo/list", {
					user_id: this.id,
					user_type: this.user_type,
					type: 1
				}).then(res => {
					if (res.code == 200) {
						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] = []
						}

					}
				})
			},
			getVideoList() {
				request.post("/user/imgVideo/list", {
					user_id: this.id,
					user_type: this.user_type,
					type: 2
				}).then(res => {
					if (res.code == 200) {
						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 = []
						}
					}
				})
			}

		}
	}
</script>

<style lang="less">
	.container {
		.positonFixed {
			z-index: 9999;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		.header-top {
			z-index: 9999;
			background: #f5f5f5;
			padding: 0 24rpx;

			.left-area {
				display: flex;
				align-items: center;

				.back-icon {
					width: 36rpx;
					height: 36rpx;
				}

				.left-area-img {
					width: 144rpx;
					height: 52rpx;
					margin-left: 20rpx;
				}
			}
		}

		.videoTop {
			background: transparent;

			::v-deep .uv-tabs__wrapper__nav__line {
				background: #fff !important;
			}
		}

		.container-tabs {
			.container-tab {
				width: 96rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				margin: 20rpx;

				.container-tab-text {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					text-align: left;
					font-style: normal;
				}
			}

			.active {
				background: #FEE5E7;

				.container-tab-text {
					font-weight: 400;
					font-size: 28rpx;
					color: #FF4767;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}

		.container-content {
			z-index: 1000;

			.swiper {
				background: #fff;

				.swiper-items2 {
					flex-wrap: wrap;
					flex-direction: row;
					display: flex;
					padding-bottom: 20rpx;

					.swiper-item2 {
						width: 370rpx;
						height: 370rpx;
						margin-top: 10rpx;
						border-radius: 20rpx;
						overflow: hidden;
						position: relative;

						.swiper-item2-img {
							width: 370rpx;
							height: 370rpx;
						}

						.swiper-item2-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-item2-title-text {
								font-weight: 400;
								font-size: 18rpx;
								color: #FFFFFF;
								line-height: 33rpx;

							}
						}
					}
				}

				.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;
				}
			}

		}


	}

	.flex-row-center-between {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.flex-row-start-between {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.flex-row-center-center {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.flex-row-end-between {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
</style>