uni-zhks-app/pages/m-download/m-download.vue

<template>
	<view>
		<view class="card">
			<view class="card_title">
				App下载二维码
			</view>
			<view class="card_img">
				<image src="https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
				 mode="aspectFill"></image>
			</view>
			<view class="card_tips">
				扫一扫下载
			</view>
		</view>

		<view class="download_btn" @click="save('https://images.pexels.com/photos/934718/pexels-photo-934718.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500')">
			<view class="btn_icon"></view>
			<view class="btn_name">保存到手机</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			save(filePath) {
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: function() {
						console.log('save success');
					}
				});
				uni.showToast({
					icon:"none",
					title:"保存成功！"
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #009FE8;
		box-sizing: border-box;
		padding: 53rpx 28rpx 0;
	}

	.card {
		width: 696rpx;
		height: 894rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 5rpx 5rpx rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;

		.card_title {
			text-align: center;
			height: 120rpx;
			font-size: 38rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 120rpx;
			border-bottom: 2rpx solid #f0f0f0;
		}

		.card_img {
			padding: 31rpx 36rpx 32rpx;

			image {
				width: 625rpx;
				height: 625rpx;

			}
		}

		.card_tips {
			text-align: center;
			height: 78rpx;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #6C6F74;
			line-height: 78rpx;
			border-top: 2rpx solid #f0f0f0;
		}
	}

	.download_btn {
		margin-top: 180rpx;

		height: 74rpx;
		background: #FFFFFF;
		border-radius: 5rpx;

		display: flex;
		justify-content: center;

		.btn_icon {
			margin-top: 19rpx;

			width: 38rpx;
			height: 38rpx;
			background-image: url(icon/down.png);
			background-size: cover;
			background-repeat: no-repeat;
		}

		.btn_name {
			margin-left: 15rpx;
			font-size: 29rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #232627;
			line-height: 74rpx;

		}
	}
</style>