项目初始化

2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
--- a/pages/tabbar/components/trend/imgBox.vue
+++ b/pages/tabbar/components/trend/imgBox.vue
@@ -0,0 +1,149 @@
+<template>
+	<view>
+		<view class="img-box" v-if="imgList.length == 1">
+			<u-image @click="onPreviewTap(file)" border-radius="10" width="460rpx" height="560rpx" :src="file"></u-image>
+			<!-- #ifdef MP -->
+			<view v-if="isAd" class="lock-box2" @click="onAdPreviewTap(file)">
+				<u-icon name="lock" size="36"></u-icon>
+				<text class="text">观看视频解锁</text>
+			</view>
+			<!-- #endif -->
+		</view>
+		<view class="img-box" v-if="imgList.length > 1">
+		    <block v-for="(img,index) in imgList">
+				<view @click="onPreviewTap(img)" class="img" v-if="index < 2">
+					<u-image border-radius="10" width="270rpx" height="270rpx" :src="img"></u-image>
+				</view>
+			</block>
+			
+			<view class="more" v-if="imgList.length > 2">
+				<u-icon name="photo"></u-icon>
+				<text>+{{imgList.length-2}}</text>
+			</view>
+			
+			<!-- #ifdef MP -->
+			<view v-if="isAd" class="lock-box" @click="onAdPreviewTap(file)">
+				<u-icon name="lock" size="36"></u-icon>
+				<text class="text">观看视频解锁</text>
+			</view>
+			<!-- #endif -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		props: {
+			file: {
+			  type: String,
+			  default: ''
+			},
+			ad: {
+			  type: Boolean,
+			  default: false
+			},
+		},
+		data() {
+			return {
+				isAd: this.ad 
+			}
+		},
+		created() {
+			
+		},
+		computed: {
+			imgList() {
+				return this.file.split(',');
+			},
+		},
+		methods: {
+			// 预览图片
+			onPreviewTap(url) {
+				uni.previewImage({
+				    current: url,
+				    urls: this.imgList,
+				})
+			},
+			// 预览图片
+			onAdPreviewTap(url) {
+				this.$emit('preAd', (res)=> {
+				   if(res){
+					   this.isAd = false;
+					   uni.previewImage({
+					       current: url,
+					       urls: this.imgList,
+					   })
+				   }
+				})
+			},
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.img-box {
+		display: flex;
+		position: relative;
+		width: fit-content;
+		
+		.img {
+			margin-right: 10rpx;
+		}
+		
+		.more {
+			position: absolute;
+			right: 20rpx;
+			bottom: 10rpx;
+			background-color: #333333a6;
+			color: #fff;
+			font-size: 20rpx;
+			padding: 4rpx 14rpx;
+			border-radius: 6rpx;
+		}
+		
+		.lock-box {
+			position: absolute;
+			background-color: #00000094;
+			left: 0;
+			right: 10rpx;
+			bottom: 0;
+			top: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			border-radius: 6rpx;
+			flex-direction: column;
+			
+			.text {
+				font-size: 28rpx;
+				margin-top: 20rpx;
+			}
+		}
+		
+		.lock-box2 {
+			position: absolute;
+			background-color: #00000094;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			top: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #fff;
+			border-radius: 6rpx;
+			flex-direction: column;
+			
+			.text {
+				font-size: 28rpx;
+				margin-top: 20rpx;
+			}
+		}
+	}
+	
+</style>