ryx/pages/travel/poster.vue

<template>
	<view class="">
		<!-- <view class="content">
			<view class="poster">
				<image src="https:\/\/t38.9026.com\/uploads\/golf\/images\/2022-05-31\/20220531739250.png"  mode="aspectFill"></image>
				<view class="code">
					<image src="../../static/travelD/code.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="title">
				<view class="kangyang">
					<text>
						{{goodsInfo.name}}
					</text>
					
				</view>
				<view class="">
					￥{{goodsInfo.min_price}}/人起
				</view>
			</view>
			<view class="" style="font-size: 22rpx;color: #666666;">
				{{created_at?created_at:''}}
			</view>
		</view> -->
		<!-- <view class="content">
			<image :src="" mode="aspectFill"></image>
		</view> -->
		<view class="imgbox">
			<!-- {{imgurl}} -->
			<image  :src="imgurl" mode="aspectFit"></image>
		</view>
		<view class="flex">
			<view class="weix">
				<button type="default" open-type="share" style="background-color: transparent;border-style:none;border:0;padding: 0;line-height: 30rpx;">
					<image src="../../static/travelD/wxin.png"  mode="widthFix"></image>
					<view class="text">
						分享
					</view>
				</button>
				
			</view>
			<view class="xiangc" @click="savePoster">
				<image src="../../static/travelD/album.png" mode="widthFix"></image>
				<view class="text">
					手机相册
				</view>
			</view>
		</view>
		<view class="paddingsafe"></view>
	</view>
</template>

<script>
	let that
	export default {
		data(){
			return{
			goodsInfo:null,
			good_id:'',
			imgurl:''
			}
		},
		// #ifdef MP
		onShareAppMessage(options){
			 var that = this;
			  var shareObj = {
			    title:  this.goodsInfo.name,  
			    path: "/pages/travel/travelDetails?id="+that.goodsInfo.id,  
			    imageUrl: '',   
			  };
			  if( options.from == 'button' ){
			    shareObj.path = "/pages/travel/travelDetails?id="+that.goodsInfo.id
			  }
			  return shareObj;
		},
		// #endif
		onLoad(o) {
			that=this
			if(o.goodsInfo){
				let goodsInfo = decodeURIComponent(o.goodsInfo)
				this.goodsInfo = JSON.parse(goodsInfo)
			}
			this.init()
		},
		computed:{
			// created_at(){
			// 	let created_at=''
			// 	if(this.goodsInfo.created_at){
			// 		created_at=this.goodsInfo.created_at.slice(0,10)
			// 	}
			// 	return created_at
			// }
		},
		methods:{
			init(){
				uni.showLoading()
				uni.$u.http.post('/api/share/good', {
					good_id: this.goodsInfo.id
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {
					console.log(res)
					that.imgurl=res.url
					uni.hideLoading()
				}).catch((err) => {
					uni.hideLoading()
					console.log(err)
				})
			},
			
			savePoster() {
				
			
					uni.showLoading({
						title: '正在保存图片...'
					});
					//获取用户的当前设置。获取相册权限
					uni.getSetting({
						success: (res) => {
							//如果没有相册权限
							if (!res.authSetting["scope.writePhotosAlbum"]) {
								//向用户发起授权请求
								uni.authorize({
									scope: "scope.writePhotosAlbum",
									success: () => {
										//授权成功保存图片到系统相册
										uni.downloadFile({
											url: this.imgurl,
											success: (res) => {
												console.log(res)
												if (res.statusCode === 200) {
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath,
														success: function() {
															uni.showToast({
																title: "保存成功",
																icon: "none"
															});
														},
														fail: function() {
															uni.showToast({
																title: "保存失败",
																icon: "none"
															});
														}
													});
												}
											}
										})
									},
									//授权失败
									fail: () => {
										uni.hideLoading();
										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.downloadFile({
									url:this.imgurl,
									success: (res) => {
										console.log(res)
										if (res.statusCode === 200) {
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										}
									}
								})
							}
						},
						fail: (res) => {},
					});
				
				
			},
			
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F4F4F4;
	}
	.imgbox{
		margin: 20rpx auto;
		width: 624rpx;
		height: 960rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.content{
		box-sizing: border-box;
		background: #ffffff;
		border-radius: 8rpx 32rpx 8rpx 32rpx;
		margin: 24rpx 58rpx 0;
		padding: 24rpx 24rpx 40rpx;
		image{
			width: 596rpx;
			height: 800rpx;
			width: 100%;
			border-radius: 8rpx 20rpx 8rpx 0;
		}
		.poster{
			position: relative;
		}
		.code{
			position: absolute;
			right: 33rpx;
			bottom: 41rpx;
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
		.title{
			display: flex;
			justify-content: space-between;
			// align-items: center;
			font-size: 30rpx;
			font-weight: 600;
			color: #333333;
			margin: 32rpx 0 16rpx;
			.kangyang{
				word-break:break-all;//英文
				// padding-right: 20rpx;
				width: 400rpx;
			}
		}
	}
	.flex{
		box-sizing: border-box;
		margin: 90rpx 144rpx 0;
		display: flex;
		align-content: center;
		justify-content: space-between;
		.text{
			font-size: 20rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #666666;
			text-align: center;
			margin: 30rpx 0;
		}
		.weix{
			button::after {
					border: none;
				}
			image{
				width: 74rpx;
				height: 74rpx;
			}
		}
		.xiangc{
			image{
				width: 74rpx;
				height: 74rpx;
			}
		}
	}
</style>