whgphone/pages/users/kefu/kefu.vue

<template>
	<view class="kefu">
		<view class="kf">
			<!-- #ifdef H5 -->
			<image :src="kefu_img" class="kfimg"></image>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<image :src="kefu_img" @longpress="savePosterPath(kefu_img)" class="kfimg"></image>
			<!-- #endif -->
			<view class="kftext">
				{{kefu_text}}
			</view>
		</view>	
	</view>
</template>

<script>
	import {
		getArticleDetails
	} from '@/api/api.js'

	export default {
		data() {
			return {
				kefu_img: '',
				kefu_text: '',
			}
		},
		onLoad() {
			this.getKefuInfo()
		},
		methods: {
			getKefuInfo() {
				getArticleDetails(151, {}).then(({
					data
				}) => {
					this.kefu_img = data.image_input
					this.kefu_text = data.synopsis
					uni.setNavigationBarTitle({
						title: data.title
					})
				})
			},
			// #ifdef MP
			// 小程序保存图片
			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,
						});
					},
				});
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.kefu {
		position: fixed;
		background-color: #f5f5f5;
		height: 100%;
		width: 100%;
		.kf {
			height: 500rpx;
			width: 500rpx;
			position: absolute;
			// background-color: #bfa;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			.kfimg {
				display: block;
				margin: 0 auto;
				width: 400rpx;
				height: 400rpx;
			}
			.kftext {
				padding-top: 20rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}
		// .kftext {
		// 	font-size: 32rpx;
		// 	height: 50rpx;
		// 	width: 750rpx;
		// 	position: absolute;
		// 	top: 0;
		// 	right: 0;
		// 	left: 0;
		// 	bottom: 0;
		// 	margin:50rpx auto 0;
		// }
	}
	
</style>