Init project

2023-09-20 21:49:33 +08:00
parent 85a5989c96
commit c9ceac9f37
710 changed files with 125705 additions and 0 deletions
@@ -0,0 +1,160 @@
+<template>
+	<view class="myimgDV">
+		<view v-if="imgPicList.length>0" class='receiveimage flex'>
+			<block v-for="(item,ind) in imgPicList" :key="ind">
+				<image class="imgitem" :style="{width:imgwidth,height:imgheight,borderRadius:imgRadius+'rpx'}" :class="imgboxtype==0?'onepic':imgboxtype==1?'doublepic':imgboxtype==2?'triplepic':''"
+				 :src="item" :mode="imgboxtype==0?onepicMode:imgboxtype==1?'aspectFill':imgboxtype==2?'aspectFill':''" @click.stop="previewpic(item,imgPicList)"></image>
+				<!-- {width:(imgboxtype==0?'':imgwidth),height:(imgboxtype==0?'':imgwidth),padding:(imgboxtype==0?'':imgpad)} -->
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				imgPicList: [],
+				imgboxtype: 0,
+				imgwidth: 0,
+				imgpad: 0,
+				imgheight: ''
+			}
+		},
+		props: {
+			imgList: {
+				type: Array
+			},
+			num: {
+				type: Number,
+				default: 0
+			},
+			imgRadius:{
+				type: Number,
+				default: 0
+			},
+			pad: {
+				type: Number,
+				default: 0
+			},
+			imgH: {
+				type: Number,
+				default: 0
+			},
+			onepicMode:{
+				type:String,
+				default:'widthFix'
+			}
+		},
+		watch:{
+			imgList:{
+				handler(v){
+					this.imgPicList = v;
+					if (this.num == 1) {
+						this.imgboxtype = 0;
+						this.imgwidth = 100 + '%';
+					} else if (this.num == 2 || this.num == 4) {
+						this.imgboxtype = 1;
+						this.imgwidth = 49 + '%';
+					} else if (this.num == 3 || this.num > 4) {
+						this.imgboxtype = 2;
+						this.imgwidth = 32 + '%';
+					}
+					this.$nextTick(function() {
+						this.getheight();
+					})
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			// 图片预览
+			previewpic(cind, clist) {
+				uni.previewImage({
+					urls: clist,
+					current: cind,
+					indicator: 'default'
+				});
+			},
+			getheight() {
+				let that = this;
+				const query = uni.createSelectorQuery().in(that)
+				query.select('.imgitem').boundingClientRect()
+				query.exec(function(res) {
+					if (that.num == 1) {
+						if (that.imgH>0) {
+							that.imgheight = that.imgH+'rpx';
+						} else{
+							that.imgheight = '100%';
+						}
+						
+					} else if (that.num == 2 || that.num == 4) {
+						that.imgheight = (res[0].width).toFixed(2) + 'px';
+					} else {
+						that.imgheight = (res[0].width).toFixed(2) + 'px';
+					}
+				})
+
+				// const query = uni.createSelectorQuery().in(this).select('.imgitem');
+				// uni.createSelectorQuery().select('.imgitem').boundingClientRect(res => {
+				
+				// 	if (this.num == 1) {
+				// 		this.imgheight = '100%';
+				// 	} else if (this.num == 2 || this.num == 4) {
+				// 		this.imgheight = (res.width).toFixed(2) + 'px';
+				// 	} else {
+				// 		this.imgheight = (res.width).toFixed(2) + 'px';
+				// 	}
+				// }).exec()
+			}
+		},
+		mounted() {
+			// let this = this;
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.myimgDV {
+		.flex {
+			display: flex;
+		}
+		.justify {
+			justify-content: space-between;
+		}
+		.receiveimage {
+			margin-top: 28rpx;
+			display: flex;
+			flex-wrap: wrap;
+			width: 100%;
+			.onepic {
+				width: 100%;
+				// height: 188rpx;
+				// height: auto;
+				margin-bottom: 28rpx;
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+			}
+			.doublepic {
+				// width: 340rpx;
+				// height: 340rpx;
+				margin-right: 1%;
+				margin-bottom: 2%;
+				&:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
+			.triplepic {
+				// width: 222rpx;
+				// height: 222rpx;
+				margin-right: 2%;
+				margin-bottom: 2%;
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+			}
+		}
+	}
+</style>