4.2 KiB
4.2 KiB
cc-beautyPoster
##uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板
###●组件模板规划： 由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。
合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；
###●组件模板效果图： 可下载项目后预览，效果图见右侧图片；
###●组件模板费用： 学习：免费下载，进行学习，无费用；
使用/商用：本页面地址赞赏10元后，可终身商用；
###●组件模板使用版权/商用： 本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元
（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）
赞赏10后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）
我的技术公众号(私信可加前端技术交流群)
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
使用方法
<!-- 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代码实现部分
<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>