uni-zhihuikuangshan/pages/my/download/download.vue

<template>
	<view>
		<view class="card">
			<view class="card_title">
				App下载二维码
			</view>
			<view class="card_img">
				<image v-if="mine_code == 'zaoquan'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/zaoquan/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'ningdongyunying'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/ningdongyunying/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'qingshuiying'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/qingshuiying/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'wuyegongsi'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/wuyegongsi/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'jinjiaqu'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/jinjiaqu/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'jinjiaqu_neiwang'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/jinjiaqu/download/download_neiwang.png"
					mode=""></image>
				<image v-if="mine_code == 'yangchangwan'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/yangchangwan/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'shicaocun'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/shicaocun/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'jinfeng'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/jinfeng/download/download.png"
					mode=""></image>
				<image v-if="mine_code == 'jinfeng_neiwang'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/jinfeng/download/download_neiwang.png"
					mode=""></image>
				<image v-if="mine_code == 'ningmeijituan'"
					src="http://webdevelop.nxjiewei.com/assets/html/zhks-quankuang/ningmeijituan/download/download.png"
					mode=""></image>
			</view>
			<view class="card_tips">
				扫一扫下载
			</view>
		</view>

		<view class="download_btn" @click="save()">
			<view class="btn_icon">
				<uni-icons type="download"></uni-icons>
			</view>
			<view class="btn_name">保存到手机</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前煤矿编码
				mine_code: "",
			};
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
		},
		methods: {
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: "./img/download.png",
					success: function() {
						console.log('save success');
					}
				});
				uni.showToast({
					icon: "none",
					title: "保存成功！"
				})
			}
		}
	}
</script>

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

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

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

		.card_img {
			box-sizing: border-box;
			padding: 25px 20rpx;



			image {
				width: 660rpx;
				height: 300px;

			}
		}

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

	.download_btn {
		margin-top: 40px;
		width: 700rpx;

		height: 40px;
		background: #FFFFFF;
		border-radius: 5px;

		display: flex;
		align-items: center;
		justify-content: center;

		.btn_icon {}

		.btn_name {
			margin-left: 8px;
			font-size: 14px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #232627;
		}
	}
</style>