universal-wechat-uniapp-241007/components/user/customerServicePopup.vue

<template>
	<!-- 实名认证 -->
	<uv-popup ref="popup" :round="30">
		<view class="page">
			<view class="info-tips">
				{{ title }}
			</view>

			<view class="image">
				<image :src="image" mode="widthFix"></image>
			</view>

			<view class="uni-color-btn" @click="save">
				保存客服微信
			</view>

		</view>
	</uv-popup>
</template>

<script>
	export default {
		props: ['title', 'image'],
		data() {
			return {}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			preservationImg(img) {
				let that = this
				uni.authorize({
					/* scope.writePhotosAlbum 类型是保存到相册 */
					scope: 'scope.writePhotosAlbum',
					success() {
						/* 已授权进入 */
						/* 保存图片到相册方法方法 */
						that.imgApi(img);
					},
					complete(res) {
						/* 判断如果没有授权就打开设置选项让用户重新授权 */
						uni.getSetting({
							success(res) {
								if (!res.authSetting['scope.writePhotosAlbum']) {
									/* 打开设置的方法 */
									that.openInstall();
								}
							}
						});
					}
				});
			},
			imgApi(image) {
				/* 获取图片的信息 */
				uni.getImageInfo({
					src: image,
					success: function(image) {
						/* 保存图片到手机相册 */
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showModal({
									title: '保存成功',
									content: '图片已成功保存到相册',
									showCancel: false
								});
							},
							complete(res) {
								console.log(res);
							}
						});
					}
				});
			},
			opensit() {
				uni.showModal({
					content: '没有授权保存图片到相册,点击确定去允许授权',
					success: function(res) {
						if (res.confirm) {
							/* 打开设置的API*/
							uni.openSetting({
								success(res) {
									console.log(res.authSetting);
								}
							});
						} else if (res.cancel) {
							uni.showModal({
								cancelText: '取消',
								confirmText: '重新授权',
								content: '你点击了取消，将无法进行保存操作',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												/* 授权成功 */
												console.log(res.authSetting);
											}
										});
									} else if (res.cancel) {
										console.log('用户不授权');
									}
								}
							});
						}
					}
				});
			},
			save() {
				this.preservationImg(this.image)
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 650rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.info-tips {
			width: 100%;
			padding: 30rpx 0;
			// background-color: #f3f3f3;
			text-align: center;

			text {
				color: $uni-color;
			}
		}

		.image {
			image {
				width: 300rpx;
				height: 300rpx;
			}
		}
	}
</style>