qzw_xcx/component/openpictrue.vue

<template>
	<view>
		<view class="example" @click="togglePopup('')">
			<uniPopup :show="types" position="middle" mode="insert" >
				<view class="uni-center center-box">
				<img mode="widthFix" :src="images" style="width: 100%;"/> 
					<!-- <img @bindload="imageLoad"  :src="images" style="width: images[index].widthrpx; height:images[index].heightrpx;"/> -->
				</view> 
			</uniPopup>
		</view>
	</view>
<!-- 	
	<view v-if="types" style="width: 100vw;
	height:100vh;
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: black;">
	    <view style="position: absolute;
		width: 0px;
		top: 50%;
		width: 100%;height: 100%;
		left: 50%;
		transform: translate(-50%, -50%);">
			<img mode='widthFix' :src="images" />
		</view> -->
		
	</view>
</template>

<script>
	import uniPopup from './uni-popup.vue'
	export default {
		props: {
			show: {
				default: false,
				type: Boolean
			},
			images: {
				default: [],
				type:Array
			}
		},
		components: {
			uniPopup
		},
		watch: {
			'show':function(val) {
				if(val) {
					this.types = true;
				}else {
					this.types = false;
				}
			},
		},
		data() {
			return {
				types: false,
				pictureUrl: this.pictureUrl,
				// images:[],
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
			};
		},
		// onBackPress() {
		// 	if (this.type !== '') {
		// 		this.type = '';
		// 		return true;
		// 	}
		// },
		mounted() {
		},
		methods: {
			// imageLoad() {
			// 	console.log("999");
			// 	let $width=e.detail.width;   //获取图片真实宽度
			// 	         let $height=e.detail.height;
			// 	         let ratio=$width/$height;    //图片的真实宽高比例
			// 	     let viewWidth=718;           //设置图片显示宽度，左右留有16rpx边距
			// 	       let  viewHeight=718/ratio;    //计算的高度值
			// 	      let image= this.data.images; 
			// 	      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
			// 	      image[e.target.dataset.index]={
			// 	         width:viewWidth,
			// 	         height:viewHeight
			// 	      }
			// 		  this.data.images = images;
			// },
			togglePopup() {
				this.type = false;
				uni.$emit('changshow')
			},
			gomoney() {
				// uni.navigateTo({
				// 	url:'/pages/myCenter/definite'
				// })
			}
		}
	};
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.uni-padding-wrap {
		padding: 0 30upx;
	}

	button {
		margin: 20upx 0;
	}

	.uni-helllo-text {
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.center-box {
		width: 100vw;
	}

	.uni-list-item {
		text-align: left;
		line-height: 80upx;
		border-bottom: 1px #f5f5f5 solid;
	}

	.uni-list-item:last-child {
		border: none;
	}

	.center-box .image {
		width: 100%;
		height: 100%;
		
	}

	.bottom-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
	}

	.bottom-content {
		display: flex;
		flex-wrap: wrap;
		padding: 0 35upx;
	}

	.bottom-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 15upx;
		width: 25%;
		box-sizing: border-box;
	}

	.bottom-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90upx;
		height: 90upx;
		overflow: hidden;
		background: #007aff;
		border-radius: 10upx;
	}

	.bottom-content-text {
		font-size: 26upx;
		color: #333;
		margin-top: 10upx;
	}

	.bottom-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
	}

	.bottom-content-image.wx {
		background: #00ce47;
	}

	.bottom-content-image.qq {
		background: #00b6f6;
	}

	.bottom-content-image.sina {
		background: #ff766a;
	}

	.bottom-content-image.copy {
		background: #07ccd0;
	}

	@font-face {
		font-family: 'iconfont';
		/* project id 1028200 */
		src: url('https://at.alicdn.com/t/font_1028200_47ewtwy4t04.ttf') format('truetype');
	}

	.icon {
		font-family: 'iconfont';
		font-size: 40upx;
		color: #fff;
	}
</style>