项目初始化

pages/tabbar/components/home/friend/imgBox.vue

@@ -0,0 +1,86 @@
+<template>
+	<view>
+		<view class="img-box" v-if="imgList.length > 0">
+		    <block v-for="(img,index) in imgList">
+				<view @click="onPreviewTap(img)" class="img" v-if="index < 3">
+					<u-image border-radius="10" width="70rpx" height="70rpx" :src="img"></u-image>
+					<view class="more" v-if="imgList.length > 3">
+						<text>+{{imgList.length-3}}</text>
+					</view>
+				</view>
+			</block>
+		</view>
+		<view v-else>
+			<view>暂未上传相册</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		props: {
+			file: {
+			  type: String,
+			  default: ''
+			},
+		},
+		data() {
+			return {
+				
+			}
+		},
+		created() {
+			
+		},
+		computed: {
+			imgList() {
+				if(this.file){
+					return this.file.split(',');
+				}else{
+					return [];
+				}
+			},
+		},
+		methods: {
+			// 预览图片
+			onPreviewTap(url) {
+			    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: 10rpx;
+			bottom: 0;
+			background-color: #333333a6;
+			color: #fff;
+			font-size: 24rpx;
+			width: 70rpx;
+			height: 70rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 10rpx;
+		}
+	}
+	
+</style>