H5_QiCaiYao/pages_tool/invite/invite.vue

<template>
	<view class="view" :style="{background:`url(${$util.img('/upload/weapp/user/invite_bg.png')}) no-repeat`}">
		<div class="QRcode">
			<!-- #ifdef MP-WEIXIN  -->
			<image :src="$util.img(weappCode.img)" mode="" @longtap="savePosterPath($util.img(weappCode.img))"></image>
			<!-- #endif -->
			<!-- #ifdef H5 || APP-PLUS  -->
			<image :src="$util.img(h5Code.img)" mode="" @longtap="savePhoto($util.img(h5Code.img))"></image>
			<!-- #endif -->
		</div>

		<!-- <div class="rules">
			<div class="title">活动规则</div>
			<div class="desc">
				<div>1、活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动规则活动</div>
				<div>2、活动规则活动规则活动规则活动规则活动</div>
				<div>3、活动规则活动规则活动规则活动规则活动</div>
			</div>
		</div> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				weappCode: {},
				h5Code: {},

			}
		},
		onShow() {
			this.getQrcode()
		},
		methods: {
			getQrcode() {
				this.$api.sendRequest({
					url: '/api/member/qrcode',
					success: ({ data }) => {
						let { path } = { ...data }
						this.weappCode = path.weapp;
						this.h5Code = path.h5
					}
				})
			},
			// APP保存图片
			savePhoto(url) {
				// 先下载图片
				uni.downloadFile({
					url,
					success: (res) => {
						// 获取到图片本地地址后再保存图片到相册(因为此方法不支持远程地址)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功！",
								});
							},
							fail: () => {
								uni.showToast({
									title: "保存失败",
								});
							},
						});
					},
				});
			},
			// 小程序保存图片
			savePosterPath(url) {
				uni.downloadFile({
					url,
					success: (resFile) => {
						console.log(resFile, "resFile");
						if (resFile.statusCode === 200) {
							uni.getSetting({
								success: (res) => {
									if (!res.authSetting["scope.writePhotosAlbum"]) {
										uni.authorize({
											scope: "scope.writePhotosAlbum",
											success: () => {
												uni.saveImageToPhotosAlbum({
													filePath: resFile
														.tempFilePath,
													success: (res) => {
														return uni
															.showToast({
																title: "保存成功！",
															});
													},
													fail: (res) => {
														return uni
															.showToast({
																title: res
																	.errMsg,
															});
													},
													complete: (res) => {},
												});
											},
											fail: () => {
												uni.showModal({
													title: "您已拒绝获取相册权限",
													content: "是否进入权限管理，调整授权？",
													success: (res) => {
														if (res.confirm) {
															uni.openSetting({
																success: (
																	res
																) => {
																	console
																		.log(
																			res
																			.authSetting
																		);
																},
															});
														} else if (res
															.cancel) {
															return uni
																.showToast({
																	title: "已取消！",
																});
														}
													},
												});
											},
										});
									} else {
										uni.saveImageToPhotosAlbum({
											filePath: resFile.tempFilePath,
											success: (res) => {
												return uni.showToast({
													title: "保存成功！",
												});
											},
											fail: (res) => {
												return uni.showToast({
													title: res.errMsg,
												});
											},
											complete: (res) => {},
										});
									}
								},
								fail: (res) => {},
							});
						} else {
							return uni.showToast({
								title: resFile.errMsg,
							});
						}
					},
					fail: (res) => {
						return uni.showToast({
							title: res.errMsg,
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		height: 100vh;
		background-size: cover !important;

		.QRcode {
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 32rpx;
			background-color: #fff;
			background: #FFFFFF;
			border-radius: 16rpx;

			image {
				width: 430rpx;
				height: 430rpx;
			}
		}


		.rules {
			position: absolute;
			top: 1294rpx;
			width: 100%;

			.title {
				text-align: center;
				font-size: 40rpx;
				font-family: DingTalk-JinBuTi, DingTalk;
				font-weight: normal;
				color: #FFFFFF;
			}

			.desc {
				margin: 0 48rpx;

				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

	}
</style>