qingyuan/pages/mainPages/poster/poster.vue

<template>
	<!-- 生成海报 -->
	<view>
		<far-bottom></far-bottom>
		<scroll-view class="poster" :style="{ height: phoneHight }" :scroll-y="true" :scroll-x="false">
			<view class="mainPackage">
				<view class="nHaveList textC">
					<view class="posterPackage">
						<image :src="posterList.url" :style="{ height: phoneHight1, width: phoneWidth1 }" @click="yl(posterList.url)" @load="load" />
					</view>
					<!--  #ifdef  H5 -->
					<view class="nShareTips ">
						<image :src="imgfixUrls + 'merchant/fx.png'" />
						<span>长按上图保存图片，或发送给朋友</span>
					</view>
					<!-- #endif -->
					<!-- #ifndef H5 -->
					<view class="nShareButton" @click="saveImg(posterList.url)"><text>保存图片</text></view>
					<!-- #endif -->
				</view>
			</view>
		</scroll-view>
		<view class="bglist-main b-f padding-box-all" v-if="!!posterList.bg_list&&posterList.bg_list.length>0">
			<scroll-view :scroll-x="true">
				<view class="poster-bg">
					<view v-for="(bgItem,index) in posterList.bg_list" class="poster-bg-item p-r" :style="{'background-image':'url('+bgItem+')'}"
					 @click="selectPost(bgItem)">
						<image v-if="curbgImage===bgItem" :src="imgfixUrls + 'posterSelect.png'" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif

	export default {
		data() {
			return {
				posterList: {},
				id: "",
				type: 0,
				phoneHight: null,
				phoneHight1: null,
				phoneWidth: null,
				phoneWidth1: null,
				windowHeight: null,
				curbgImage: "",
				tagrt:null,
				flag:true
			};
		},
		onLoad(e) {
			let _this = this;
			_this.tagrt = e;
			uni.showLoading({
				title:'海报加载中'
			})
			_this.getPoster(_this.tagrt.id, _this.tagrt.type);
			_this.setData(_this.tagrt);
		},
		onShow() {
			let _this = this;
			if(_this.flag){
				_this.flag = false;
				return
			}
			_this.getPoster(_this.tagrt.id, _this.tagrt.type);
			_this.setData(_this.tagrt);
		},
		methods: {
			load(){
				uni.hideLoading()
				console.log('加载完毕')
			},
			saveImg(images) {
				let _this = this;
				uni.getImageInfo({
					src: images,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								uni.showToast({
									icon: "none",
									title: '保存成功',
									duration: 2000
								});
							}
						});
					}
				});
			},
			yl(image) {
				let _this = this;
				let aa = [];
				aa.push(image);
				uni.previewImage({
					current: aa[0],
					urls: aa
				});
			},
			// 获取海报信息
			getPoster(id, type) {
				let _this = this;
				let data = {
					id,
					type,
					bg_img: ''
				};
				App._post_form('&do=Poster', data, res => {
					_this.posterList = res.data;
					uni.getImageInfo({
						src: res.data.url,
						success: function(res) {
							_this.phoneHight1 = uni.upx2px(res.height) + 'px';
							_this.phoneWidth1 = uni.upx2px(res.width) + 'px';
						}
					});
					uni.getSystemInfo({
						success(System_res) {
							_this.phoneHight = res.data.bg_list.length > 0 ? (System_res.windowHeight -
								110 + 'px') : System_res.windowHeight + 'px';
						}
					});
					if (res.data.bg_list.length == 0) {
						_this.type == 0;
					} else {
						_this.type == 1;
					}
				});
			},
			selectPost(bg_img) {
				this.postRequest(this.id, this.type, bg_img);
			},
			postRequest(id, type, bg_img) {
				let _this = this,
					requestData = {
						id,
						type,
						bg_img
					};
				App._post_form('&do=Poster', requestData, res => {
					_this.posterList = res.data;
					_this.curbgImage = bg_img;
					uni.getImageInfo({
						src: res.data.url,
						success: function(res) {
							_this.phoneHight1 = uni.upx2px(res.height) + 'px';
							_this.phoneWidth1 = uni.upx2px(res.width) + 'px';
						}
					});
					if (res.data.bg_list.length == 0) {
						_this.type == 0;
					} else {
						_this.type == 1;
					}
				});
			},
			// 切换图片
			changeImg(url) {
				let _this = this;
				_this.posterList.url = url;
			}
		}
	};
</script>

<style lang="less" scoped>
	.nShareButton {
		margin: 30upx auto 0 auto;
		width: 400upx;
		height: 80upx;
		// background: rgba(255, 68, 68, 1);
		background-color: #82d0f7;
		border-radius: 40upx;
		text-align: center;

		>text {
			line-height: 80upx;
			font-size: 28upx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.mainPackage {
		padding-bottom: 60upx;
	}

	.textC {
		text-align: center;
	}

	page {}

	.poster {
		background: #323332;
		font-size: 0;
	}

	.nShareTips {
		margin: 10upx 0 0 0upx;

		>image {
			vertical-align: bottom;
			width: 30upx;
			height: 70upx;
		}

		>span {
			vertical-align: bottom;
			font-size: 30upx;
			color: white;
		}
	}

	.posterPackage {
		margin: 30upx auto 0 auto;

		>image {
			width: 650upx;
		}
	}

	.yPosterPackage {
		margin: 30upx auto 0 auto;

		>image {
			width: 650upx;
		}
	}

	.yShareTips {
		margin: 10upx 0 0 0;

		>image {
			vertical-align: bottom;
			width: 30upx;
			height: 70upx;
		}

		>span {
			vertical-align: bottom;
			font-size: 30upx;
			color: white;
		}
	}

	.navBottom {
		position: absolute;
		bottom: 0;
		width: 750upx;
		background: white;
	}

	.posterListMb {
		display: inline-block;
		margin: 0 15upx;
		width: 100upx;
		height: 100upx;
		background: red;

		>image {
			width: 100upx;
			height: 100upx;
		}
	}

	.posterListMbPackage {
		padding: 30upx 15upx;
	}

	.bglist-main {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		white-space: nowrap
	}

	.poster-bg {
		.poster-bg-item {
			width: 150upx;
			height: 150upx;
			background-size: 150upx 150upx;
			background-repeat: no-repeat;
			background-position: center;
			margin-right: 30upx;
			display: inline-block;
			border-radius: 10upx;

			>image {
				display: block;
				width: 40upx;
				height: 40upx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
	}
</style>