| <template> | |
| 	<view class="page"> | |
| 		 | |
| 		<image :src="titleBy.image" | |
| 		class="page-bg" | |
| 		mode="aspectFill"></image> | |
| 		 | |
| 		<!--  | |
| 		  | |
| 		 <image :src="configList.img_13" | |
| 		 class="page-bg" | |
| 		 mode="aspectFill"></image> | |
| 		 --> | |
| 		 | |
| 		<!-- <image :src="configList.img_7" | |
| 		class="logo" | |
| 		mode="widthFix"></image> --> | |
| 		 | |
| 		<!-- next1 --> | |
| 		<view class="content"> | |
| 			 | |
| 			<image src="titleBy.image" | |
| 			class="content-bg" | |
| 			mode="widthFix"></image> | |
| 			 | |
| 		</view> | |
| 		 | |
| 		<view class="btn-list"> | |
| 			<view class="next-btn-2" | |
| 			@click="save"> | |
| 				保存 | |
| 			</view> | |
| 			 | |
| 			<view class="next-btn" | |
| 			@click="next"> | |
| 				下一页 | |
| 			</view> | |
| 		</view> | |
| 		 | |
| 	</view> | |
| </template> | |
| 
 | |
| <script> | |
| 	import { mapState } from 'vuex' | |
| 	export default { | |
| 		data() { | |
| 			return { | |
| 				index : 0, | |
| 			} | |
| 		}, | |
| 		computed : { | |
| 			...mapState(['titleBy', 'configList']), | |
| 		}, | |
| 		onLoad() { | |
| 			console.log(this.$store.state.titleBy.image); | |
| 		}, | |
| 		onShow() { | |
| 		}, | |
| 		methods: { | |
| 			next(){ | |
| 				uni.navigateTo({ | |
| 					url: '/pages/index/article' | |
| 				}) | |
| 				 | |
| 				// uni.navigateTo({ | |
| 				// 	url: '/pages/index/preAppoint' | |
| 				// }) | |
| 			}, | |
| 			async save(){ | |
| 				await this.$authorize('scope.writePhotosAlbum') | |
| 				uni.getImageInfo({ | |
| 					src: this.titleBy.image, | |
| 					success: function(image) { | |
| 						/* 保存图片到手机相册 */ | |
| 						uni.saveImageToPhotosAlbum({ | |
| 							filePath: image.path, | |
| 							success: function() { | |
| 								uni.showModal({ | |
| 									title: '保存成功', | |
| 									content: '图片已成功保存到相册', | |
| 									showCancel: false | |
| 								}); | |
| 							}, | |
| 							complete(res) { | |
| 								console.log(res); | |
| 							} | |
| 						}); | |
| 					} | |
| 				}); | |
| 			}, | |
| 		} | |
| 	} | |
| </script> | |
| 
 | |
| <style lang="scss" scoped> | |
| 	.page{ | |
| 		.logo{ | |
| 			width: 600rpx; | |
| 			margin: 150rpx 75rpx; | |
| 			margin-bottom: 0; | |
| 		} | |
| 		.content{ | |
| 			position: relative; | |
| 			display: flex; | |
| 			flex-direction: column; | |
| 			align-items: center; | |
| 			justify-content: center; | |
| 			box-sizing: border-box; | |
| 			text-align: center; | |
| 			width: 750rpx; | |
| 			margin: 0 auto; | |
| 			margin-bottom: 50rpx; | |
| 			z-index: 999; | |
| 			.content-bg{ | |
| 				width: 100%; | |
| 				top: 0; | |
| 				left: 0; | |
| 			} | |
| 		} | |
| 	} | |
| 	 | |
| 	.btn-list{ | |
| 		position: fixed; | |
| 		bottom: 12%; | |
| 		display: flex; | |
| 		flex-direction: column; | |
| 		gap: 40rpx; | |
| 		width: 100%; | |
| 		justify-content: center; | |
| 		align-items: center; | |
| 	} | |
| 	 | |
| 	.next-btn{ | |
| 		width: 400rpx; | |
| 		display: flex; | |
| 		align-items: center; | |
| 		justify-content: center; | |
| 		color: white; | |
| 		padding: 16rpx 90rpx; | |
| 		background-color: $uni-color; | |
| 		border-radius: 30rpx; | |
| 	} | |
| 	.next-btn-2{ | |
| 		width: 400rpx; | |
| 		display: flex; | |
| 		align-items: center; | |
| 		justify-content: center; | |
| 		color: white; | |
| 		padding: 16rpx 90rpx; | |
| 		background-color: $uni-color-primary; | |
| 		border-radius: 30rpx; | |
| 	} | |
| 	 | |
| 	.second-color{ | |
| 		margin-top: 20rpx; | |
| 	} | |
| </style>
 |