IHG/components/dialogPanel/dialogPanel.vue

<template>
	<uni-popup ref="main" type="center">
		<view class="pop">
			<view class="title"><text>识别下方二维码即可购买</text></view>
			<view style="margin-left:30rpx;width: 580rpx;height: 2rpx;background: #F0F0F0;"></view>
			<view class="img">
				<image :src="imgUrl" mode="aspectFit"/>
			</view>
			<view class="btn">
				<view class="cancel" @click="$refs.main.close()"><text>取消</text></view>
				<view style="width: 2rpx;height: 100%;background: rgba(0,0,0,0.1);"></view>
				<view class="download" @click="saveImg"><text>保存图片</text></view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default{
		name: "dialog-panel",
		data(){
			return {
				imgUrl:""
			}
		},
		methods:{
			show(arg){
				this.imgUrl = arg
				this.$refs.main.open()
			},
			saveImg(){
				uni.getImageInfo({
					src: this.imgUrl,
					success:(res)=>{
						uni.saveImageToPhotosAlbum({
							filePath: res.path,
							success(_) {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success',
									duration: 2000
								})
							},
							fail(err){
								console.log(err)
							}
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pop {
		width: 640rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 32rpx;
		box-sizing: border-box;
	
		.title {
			@include flexlayout();
			margin-bottom: 32rpx;
	
			text {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000;
			}
		}
	
		.img {
			margin-left: 48rpx;
			width: 544rpx;
			height: 484rpx;
			background: $bgColor;
			border-radius: 12rpx;
			@include flexlayout();
			margin-bottom: 32rpx;
	
			image {
				width: 420rpx;
				height: 440rpx;
				border-radius: 12rpx;
			}
		}
	
		.textfont {
			margin-left: 30rpx;
			margin-bottom: 40rpx;
			@include flexlayout();
			width: 572rpx;
			height: 106rpx;
	
			text {
				text-align: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #828282;
			}
		}
	
		.btn {
			width: 100%;
			height: 114rpx;
			display: flex;
			align-items: center;
	
			.cancel {
				@include flexlayout();
				width: 50%;
				height: 100%;
				border-top: #E5E5E5 solid 1rpx;
				// border-right: #E5E5E5 solid 1rpx;
	
				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
	
			.download {
				border-top: #E5E5E5 solid 1rpx;
				// border-left:#E5E5E5 solid 0.3rpx;
				@include flexlayout();
				height: 100%;
				width: 50%;
	
				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF7119;
				}
			}
		}
	}
	
</style>