【uniapp】微信小程序 , 海报轮播图弹窗,点击海报保存到本地,长按海报图片分享,收藏或保存


uivew 2.0
uniapp 海报画板 DCloud 插件市场

第一步,下载插件并导入HbuilderX

第二步,文件内 引入 海报组件

javascript 复制代码
<template>
	<painter ref="haibaorefs"></painter>
<template>
<script>
	import painter from '@/components/painter.vue'
	export default {
	components: {painter},
	methods: {
	// 点击打开海报弹窗
		clickFun(){
			this.$refs.haibaorefs.open();
		}
	}
}
<script>

第三步,子组件 海报 源码, components/painter.vue 文件内容

javascript 复制代码
<template>
	<!-- 弹窗 -->
	<u-popup :show="goodsshow" mode="center" round='26rpx' z-index='10076' bgColor='transparent' @close="goodsclose">
		<view class="popupbox">
			<view class="swiperbox">
				<swiper 
				class="swiper" 
				:indicator-dots="false" 
				:autoplay="false" 
				:circular="true" 
				skip-hidden-item-layout
				previous-margin='35rpx'
				next-margin='35rpx'
				@change="swiperChange">
					<swiper-item v-for="(item,i) in list" :key="i">
						<view class="" v-if="item.coverimg">
							<image :src="item.coverimg" mode="" class="swiperImg"  show-menu-by-longpress></image>
						</view>
						
						<l-painter
							v-else
							@success='successFun($event,i)'
							isCanvasToTempFilePath
							path-type="url"
							css="width: 600rpx;height:900rpx; box-sizing: border-box;  position: relative;">
							<l-painter-image :src="item.image"
							css="width: 600rpx;height:900rpx;border-radius: 20rpx;object-fit: cover;"/>
								<l-painter-view css="position: absolute; bottom: 40rpx; right: 40rpx; background: #fff;  padding:10rpx 8rpx;border-radius: 10rpx; ">
									<l-painter-image :src="erweima"
									css="width: 146rpx;height:143rpx;object-fit: cover;"/>
								</l-painter-view>
						</l-painter>
				
					</swiper-item>
				</swiper>
			</view>
			<view class="btnbox" @click="saveFun()">
				<!-- <view class="btn btn1" @click="goodsshow = false">长按识别分享海报</view> -->
				<view class="btn btn2">保存到本地</view>
			</view>

		</view>
	</u-popup>
</template>

<script>
	export default {
		components: {},
		props: {
			// list: {
			//   type: Array,
			//   default: null
			// }
		},
		data() {
			return {
				goodsshow: false,
				current: 0,
				list: [{
						image: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
						coverimg:'', // 海报生成图片的临时地址
						id: 11
					},
					{
						image: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
						coverimg:'',
						id: 11
					},
					{
						image: require('@/static/img/1.jpg'),
						coverimg:'',
						id: 11
					},
				],
				erweima: require('@/static/img/1.jpg')
			}
		},
		mounted() {
		
		},
		methods: {
			open(){
				this.goodsshow = true;
			},
			goodsclose() {
				this.goodsshow = false;
			},
			swiperChange(e) {
				this.current = e.detail.current;
			},
			// 接收海报临时路径
			successFun(e,i){
				console.log('接收海报临时路径',e,i)
				uni.getSavedFileList({
				  success: function (res) {
				    console.log(res.fileList);
				  }
				});
				
				this.list.forEach((item,index) => {
						if(index == i){
							item.coverimg = e;
						}
				});
			},
			
			// 保存到本地
			saveFun(){
				let that = this;
				console.log(that.list[that.current].coverimg,'保存图片的临时路径和下标',this.current)
					uni.saveImageToPhotosAlbum({
						filePath: that.list[that.current].coverimg,
						success: function () {
							console.log('save success');
							uni.$u.toast('海报已保存到相册')
						}
					});
			},
			// 跳转
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	swiper-item {
	/* 	display: flex;
		justify-content: center;
		align-items: center; */
	}

	.popupbox {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.swiperbox {
			background-color: transparent;
			width: 750rpx;
			height: 900rpx;
			box-sizing: border-box;

			.swiper {
				width: 750rpx;
				height: 900rpx;
				overflow: hidden;
				border-radius: 20rpx;
				box-sizing: border-box;
			
				.swiperImg {
					width: 600rpx;
					height: 900rpx;
					border-radius: 20rpx;
				}
				
			}
		}

		.btnbox {
			margin: 50rpx auto 0;
			.btn {
				width: 315px;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
			}
			.btn2 {
				background: linear-gradient(177deg, #F2582F, #E1200B);
				color: #ffffff;
			}
		}


	}
</style>
相关推荐
2501_915921433 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手3 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs3 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟3 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农3 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q19632884753 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js
不知名的前端专家5 小时前
UniApp USB存储设备U盘操作、读写原生插件
uni-app
coldriversnow5 小时前
uni-app从后端返回的富文本中的视频截取一帧为封面
uni-app
韩立学长6 小时前
基于微信小程序的公益捐赠安全平台9hp4t247 包含完整开发套件(程序、源码、数据库、调试部署方案及开发环境)系统界面展示及获取方式置于文档末尾,可供参考。
数据库·微信小程序·小程序
2501_915918417 小时前
iOS 混淆与 IPA 加固一页式行动手册(多工具组合实战 源码成品运维闭环)
android·运维·ios·小程序·uni-app·iphone·webview