123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261 |
- <template>
- <view>
- <view class="poster-container" v-if="poster.show">
- <l-painter
- v-if="poster.show"
- isRenderImage
- width="600rpx" height="940rpx"
- custom-style="position: fixed;z-index:999; left: 0rpx;right:0rpx;margin:0rpx auto;bottom:440rpx;background:#fff;border-radius:20rpx"
- :board="poster.base"
- @success="poster.path = $event"
- />
- </view>
-
- <view :class="{'poster-share':true, on:poster.show}">
- <view>分享到</view>
- <view class="poster-share-panel">
- <view @click="share">
- <button class="shareButton" open-type="share"><image src="/static/icon/wechat.svg" mode="aspectFit"/>
- <text>微信分享</text></button>
- </view>
- <view @click="save">
- <image src="/static/icon/wechat_moments.svg" mode="aspectFit"/>
- <text>保存相册</text>
- </view>
- </view>
- <view @click="cancel">取消分享</view>
- </view>
- </view>
-
- </template>
- <script>
- import lPainter from '@/components/lime-painter/index.vue'
-
- export default {
- components: {lPainter},
- props: ["title", "name", "img", "qrcode"],
- data() {
- return {
- poster:{
- show:false,
- path: "",
- base: {
- width: '600rpx',
- height: '940rpx',
- background: "#fff",
- radius: "20rpx",
- views: [
- {
- type: 'text',
- text: '成都IHG大酒店',
- css: {
- width: "500rpx",
- height: "80rpx",
- left: "50rpx",
- top: '20rpx',
- fontSize: '32rpx',
- fontWeight: "bold",
- lineHeight: '80rpx',
- color:'#000',
- textAlign: 'center',
- }
- },
- {
- type: 'text',
- text: '正在参与',
- css: {
- width: "170rpx",
- height: "80rpx",
- left: "50rpx",
- top: '70rpx',
- fontSize: '26rpx',
- lineHeight: '80rpx',
- color:'grey',
- textAlign: 'right',
- }
- },
- {
- type: 'text',
- text: '“最受欢迎-IHG酒店”',
- css: {
- width: "330rpx",
- height: "80rpx",
- left: "220rpx",
- display: "flex",
- justifyContent: 'center',
- top: '70rpx',
- fontSize: '26rpx',
- lineHeight: '80rpx',
- color:'#EEA470',
- textAlign: 'left',
- }
- },
- {
- type: 'image',
- src: 'http://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif',
- css: {
- left: '240rpx',
- top: '720rpx',
- width: '120rpx',
- height: '120rpx',
- borderRadius: '30px'
- }
- },
- {
- type: 'text',
- text: '长按识别小程序码给他投票',
- css: {
- width: "500rpx",
- height: "80rpx",
- left: "50rpx",
- top: '830rpx',
- fontSize: '26rpx',
- lineHeight: '80rpx',
- color:'grey',
- textAlign: 'center',
- }
- },
- {
- type: 'image',
- src: 'https://img1.baidu.com/it/u=3841234653,2748754224&fm=253&fmt=auto&app=138&f=JPEG?w=900&h=500',
- css: {
- left: '30rpx',
- top: '150rpx',
- width: '540rpx',
- height: '540rpx',
- borderRadius: '20rpx'
- }
- }
- ]
- }
- },
- };
- },
- methods:{
- show({name, title, imgUrl, qrcodeUrl}){
- this.poster.base.views[0].text = name;
- this.poster.base.views[2].text = title;
- imgUrl && (this.poster.base.views[5].src = imgUrl);
- qrcodeUrl && (this.poster.base.views[3].src = qrcodeUrl);
-
-
- uni.pageScrollTo({
- scrollTop: 0,
- duration: 1
- });
- this.poster.show = true;
- },
- cancel(){
- this.poster.show = false;
- },
- save(){
- uni.saveImageToPhotosAlbum({
- filePath: this.poster.path,
- success(res) {
- uni.showToast({
- title: '已保存到相册',
- icon: 'success',
- duration: 2000
- })
- }
- })
- },
- share(){
- // wx.downloadFile({
- // url: this.poster.path, // 下载url
- // success (res) {
- // // 下载完成后转发
- // wx.shareFileMessage({
- // filePath: res.tempFilePath,
- // success() {
- // console.log('转发成功')
- // },
- // fail: console.error,
- // })
- // },
- // fail: console.error,
- // })
- }
- },
- }
- </script>
- <style lang="scss" scoped>
- .poster-container{
- width:100%;
- height:100%;
- position: fixed;
- top:0;
- left:0;
- z-index: 999;
- background-color: rgba(0, 0, 0, 0.4);
- }
- .poster-share{
- position: fixed;
- bottom:0;
- width: 100%;
- height: 380rpx;
- background-color: #fff;
- border-radius: 30rpx 30rpx 0px 0px;
- transform: translateY(500rpx);
- padding-top: 40rpx;
- transition: 0.3s all;
- z-index: 1000;
- color:rgba(0,0,0,0.5);
- display: flex;
- flex-direction: column;
- justify-content: space-between;
-
- &.on{
- transform: translateY(0rpx);
- }
-
- >view:first-child{
- text-align: center;
- color: #000;
- font-weight:bold;
- margin-bottom: 40rpx;
- }
-
- >view:nth-child(2){
- display: flex;
- justify-content: flex-start;
- align-items: center;
- margin-bottom: 40rpx;
-
- >view{
- text-align: center;
- margin-left: 40rpx;
- }
-
- image{
- width: 80rpx;
- height: 80rpx;
- }
-
- text{
- width: 100rpx;
- display: block;
- font-size: 24rpx;
- text-align: center;
- }
- }
- >view:last-child{
- height: 100rpx;
- line-height: 100rpx;
- text-align: center;
- border-top: 1px solid rgba(0,0,0,0.1);
- }
- .shareButton{
- background: transparent;
- border: 0px;
- line-height: inherit;
- color: inherit;
-
- &::after{
- border:0px;
- }
- }
- }
- </style>
|