qzw_xcx/component/openpictrue.vue

<template>
	<view>
		<view class="example">
			<uniPopup :show="type" position="middle" mode="insert" @hidePopup="togglePopup('')">
				<view class="uni-center center-box">
					<image class="image" :src="images"  />
				</view>
			</uniPopup>
		</view>
	</view>
</template>

<script>
	import uniPopup from './uni-popup.vue'
	export default {
		props: {
			show: {
				default: false,
				type: Boolean
			},
			images: {
				default: '',
				type: String
			}
		},
		components: {
			uniPopup
		},
		watch: {
			'show':function(val) {
				console.log(val)
				if(val) {
					this.type = true;
				}else {
					this.type = false;
				}
			},
		},
		data() {
			return {
				type: false,
				pictureUrl: this.pictureUrl,
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
			};
		},
		// onBackPress() {
		// 	if (this.type !== '') {
		// 		this.type = '';
		// 		return true;
		// 	}
		// },
		methods: {
			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: 800upx;
		height: 800upx;
	}

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