增加海报生成组件

2025-01-07 17:32:58 +08:00
parent 66d0881429
commit b6eb3b0d35
5 changed files with 2103 additions and 0 deletions
--- a/uni_modules/cc-beautyPoster/readme.md
+++ b/uni_modules/cc-beautyPoster/readme.md
@@ -0,0 +1,170 @@
+# cc-beautyPoster
+
+
+
+##uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板
+
+###●组件模板规划：
+由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。
+
+合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；
+
+###●组件模板效果图：
+可下载项目后预览，效果图见右侧图片；
+
+###●组件模板费用：
+学习：免费下载，进行学习，无费用；
+
+使用/商用：本页面地址赞赏10元后，可终身商用；
+
+###●组件模板使用版权/商用：
+本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元
+
+（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）
+
+赞赏10后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）
+
+
+### 我的技术公众号(私信可加前端技术交流群)
+
+群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
+
+![图片](https://i.postimg.cc/RZ0sjnYP/front-End-Component.jpg)
+
+
+
+#### 使用方法 
+```使用方法
+
+<!-- posterData： 海报数据 -->
+<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
+
+<!-- 海报数据字段 注意小程序下网络图片地址需要是服务器设置的白名单地址 本地图片无限制！ -->
+posterData: {
+			// 用户姓名
+			name: '小明',
+			// 用户头像
+			logo: '/static/images/headIcon.jpg',
+			// 商品名称
+			title: '精美时尚苹果手机一部',
+			// 商品价格
+			money: '5200.90',
+			// 商品图片(小程序需要换成自己服务器白名单设置的地址)
+			img: '/static/images/goods.jpg',
+			// 商品链接
+			url: 'https://www.apple.com.cn/iphone/'
+			
+
+	},			
+				
+```
+
+#### HTML代码实现部分
+```html
+<template>
+	<view class="content">
+
+		<button style="margin-top: 38px;" @click="openPoster">生成商品海报</button>
+
+		<!-- 海报弹框 -->
+		<uni-popup ref="popup" type="center">
+			<view class="center_poter" style="margin: 0 auto;" v-if="shows">
+				<!-- #ifndef MP -->
+				<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
+				</image>
+				<!-- #endif -->
+				<!-- #ifdef MP -->
+				<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
+				</cover-image>
+				<!-- #endif -->
+
+				<!-- posterData： 海报数据 -->
+				<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
+			</view>
+		</uni-popup>
+
+	</view>
+
+</template>
+
+<script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
+
+	export default {
+		components: {
+			uniPopup
+		},
+		data() {
+			return {
+				shows: false,
+				posterData: {
+					// 用户姓名
+					name: '小明',
+					// 用户头像
+					logo: '/static/images/headIcon.jpg',
+					// 商品名称
+					title: '精美时尚苹果手机一部',
+					// 商品价格
+					money: '5200.90',
+					// 商品图片(小程序需要换成自己服务器白名单设置的地址)
+					img: '/static/images/goods.jpg',
+					// 商品链接
+					url: 'https://www.apple.com.cn/iphone/'
+					
+				},
+
+
+			}
+		},
+
+
+		methods: {
+			//生成海报
+			openPoster() {
+				this.shows = false
+				uni.showLoading({
+					title: '海报绘制中..'
+				})
+				this.$refs.popup.open()
+				setTimeout(() => {
+					uni.hideLoading()
+					this.shows = true
+				}, 400)
+			},
+
+			//关闭海报
+			hidePoster() {
+				this.$refs.popup.close()
+			},
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		display: flex;
+		flex-direction: column;
+
+	}
+
+	.center_poter {
+		position: relative;
+		z-index: 999;
+
+		.close_btn {
+			width: 40upx;
+			height: 40upx;
+			background-color: rgba($color: #000000, $alpha: .3);
+			position: absolute;
+			top: 5upx;
+			right: 5upx;
+			z-index: 500;
+			padding: 5upx;
+			border-radius: 6upx;
+			z-index: 999;
+			text-align: center;
+		}
+	}
+</style>
+```