Compare commits
No commits in common. "ab29e2a09fd56ec360b0c1e5c60fb58592617f12" and "733aa3d0ae1aaf816e270c6262e49174ea887907" have entirely different histories.
ab29e2a09f
...
733aa3d0ae
|
|
@ -1,47 +1,34 @@
|
|||
<template>
|
||||
<view class="main-page">
|
||||
<img :src="posterUrl" style="width:100%;height:100%;" v-show="posterUrl"/>
|
||||
<image :src="posterUrl" style="width:100%;height:100%;" mode="scaleToFill" v-show="posterUrl"></image>
|
||||
<view class="spread-wrap" id="poster-wrap" v-show="!posterUrl">
|
||||
<view class="logo-wrap">
|
||||
<img :src="`${tenantInfo.logo}?timeStamp=${timeStamp}`" crossorigin="anonymous" class="logo-image" />
|
||||
<image :src="tenantInfo.logo" class="logo-image"></image>
|
||||
</view>
|
||||
<view class="activity-wrap">
|
||||
<view class="item-wrap" v-for="(item, index) in activityList">
|
||||
<view class="title">{{setTitle(index)}}</view>
|
||||
<view class="line"></view>
|
||||
<view class="text-wrap">
|
||||
<view class="text">办理会员{{item.gearAmount}}元</view>
|
||||
<view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</view>
|
||||
</view>
|
||||
<view class="activity-wrap" v-show="activityList.length > 0">
|
||||
<view class="item-wrap" :key="index" v-for="(item, index) in activityList">
|
||||
<view class="text">办理会员{{item.gearAmount}}元</view>
|
||||
<view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</view>
|
||||
</view>
|
||||
<view class="tips">
|
||||
三个活动可同时参与，每个手机号仅限一次，最高可返<span>{{total}}元</span>话费！！！
|
||||
</view>
|
||||
<view class="extra-info">
|
||||
<view class="extra-item">
|
||||
<view class="text"><span>①</span>扫码主图二维码</view>
|
||||
<view class="text">即可直接参与活动</view>
|
||||
</view>
|
||||
<view class="extra-item">
|
||||
<view class="text"><span>②</span>客服联系电话</view>
|
||||
<view class="text service-phone">{{tenantInfo.serviceMobile}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tenant-info-wrap">
|
||||
<view class="info-wrap">
|
||||
<view class="info">
|
||||
<view class="name">{{userInfo.nickname}}</view>
|
||||
<view class="phone">{{userInfo.mobile}}</view>
|
||||
<view class="address">
|
||||
{{userInfo.parentDeptName}}
|
||||
<view class="service-phone">{{tenantInfo.serviceMobile}}</view>
|
||||
<view class="tenant-info-wrap">
|
||||
<view class="info-wrap">
|
||||
<view class="info">
|
||||
<view class="name">{{userInfo.nickname}}</view>
|
||||
<view class="phone">{{userInfo.mobile}}</view>
|
||||
<view class="address">
|
||||
{{userInfo.parentDeptName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode-wrap">
|
||||
<canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qrcode-wrap">
|
||||
<canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
|
||||
</view>
|
||||
<u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
|
||||
</view>
|
||||
<u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -65,16 +52,15 @@
|
|||
return {
|
||||
activityList: [],
|
||||
posterUrl: '',
|
||||
isHideBtn: false,
|
||||
timeStamp: ''
|
||||
isHideBtn: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
computed:{
|
||||
...mapGetters(['isLogin', 'uid', 'userInfo', 'tenantId', 'tenantInfo']),
|
||||
total: function() {
|
||||
total: function(){
|
||||
let _total = 0
|
||||
for (let active of this.activityList) {
|
||||
_total += parseInt(active.refundAmount)
|
||||
_total+= parseInt(active.refundAmount)
|
||||
}
|
||||
return _total
|
||||
},
|
||||
|
|
@ -85,22 +71,9 @@
|
|||
} else {
|
||||
this.getActivityInfo()
|
||||
}
|
||||
this.timeStamp = new Date().getTime()
|
||||
},
|
||||
onReady() {},
|
||||
methods: {
|
||||
setTitle(index) {
|
||||
switch (index) {
|
||||
case 0:
|
||||
return '活动一'
|
||||
break
|
||||
case 1:
|
||||
return '活动二'
|
||||
break
|
||||
case 2:
|
||||
return '活动三'
|
||||
}
|
||||
},
|
||||
async downImage() {
|
||||
const that = this
|
||||
uni.showLoading({
|
||||
|
|
@ -108,23 +81,19 @@
|
|||
mask: true
|
||||
});
|
||||
that.isHideBtn = true
|
||||
setTimeout(() => {
|
||||
html2canvas(document.getElementById('poster-wrap'), {
|
||||
useCORS: true,
|
||||
x: 0,
|
||||
y: window.pageYOffset
|
||||
}).then(function(canvas) {
|
||||
that.$util.Tips({
|
||||
title: '生成成功，长按保存图片'
|
||||
})
|
||||
that.posterUrl = canvas.toDataURL('image/png')
|
||||
}).catch(() => {
|
||||
setTimeout(()=>{
|
||||
html2canvas(document.getElementById('poster-wrap')).then(function(canvas) {
|
||||
that.$util.Tips({
|
||||
title: '生成成功，长按保存图片'
|
||||
})
|
||||
that.posterUrl = canvas.toDataURL('image/png')
|
||||
}).catch(()=>{
|
||||
that.$util.Tips({
|
||||
title: '生成失败'
|
||||
})
|
||||
that.isHideBtn = false
|
||||
})
|
||||
}, 500)
|
||||
}, 200)
|
||||
},
|
||||
// 生成二维码；
|
||||
make() {
|
||||
|
|
@ -169,13 +138,13 @@
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-page {
|
||||
.main-page{
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.spread-wrap {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
background: url('@/static/images/spread_bg.png') center 0 no-repeat;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
|
|
@ -192,110 +161,76 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tenant-info-wrap {
|
||||
margin: 30rpx 40rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #fff;
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.qrcode-wrap {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.logon {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
margin-top: 40rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activity-wrap {
|
||||
margin: 212rpx 40rpx 0;
|
||||
border: 3px solid #FF77AA;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx;
|
||||
position: absolute;
|
||||
top: 460rpx;
|
||||
left: 104rpx;
|
||||
right: 110rpx;
|
||||
|
||||
.tenant-info-wrap {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 656rpx;
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.qrcode-wrap {
|
||||
margin-left: 40rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.logon {
|
||||
width: 100%;
|
||||
height: 70rpx;
|
||||
margin: 30rpx 0;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
|
||||
border-radius: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.service-phone {
|
||||
position: absolute;
|
||||
bottom: -114rpx;
|
||||
right: 48rpx;
|
||||
font-size: 30rpx;
|
||||
color: #ED387C;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
|
||||
span {
|
||||
span{
|
||||
color: #C80D00;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.extra-info{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
font-size: 28rpx;
|
||||
.extra-item{
|
||||
flex: 1;
|
||||
.service-phone {
|
||||
font-size: 30rpx;
|
||||
color: #ED387C;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
span{
|
||||
color: #ED387C;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
// background: linear-gradient(90deg, rgba(200, 16, 86, 1), RGBA(252, 183, 209, 1), RGBA(255, 245, 248, 1), rgba(200, 16, 86, 0));
|
||||
background: #fff;
|
||||
margin-bottom: 38rpx;
|
||||
font-size: 26rpx;
|
||||
font-style: italic;
|
||||
color: #010101;
|
||||
font-weight: bold;
|
||||
margin-bottom: 54rpx;
|
||||
padding-left: 227rpx;
|
||||
|
||||
.title {
|
||||
font-size: 42rpx;
|
||||
letter-spacing: 10rpx;
|
||||
color: #ED387C;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
text-shadow: 0rpx 6rpx 4rpx #EEA5C0;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 3rpx;
|
||||
height: 40rpx;
|
||||
margin: 0 30rpx;
|
||||
background-color: RGBA(238, 87, 143, 1);
|
||||
}
|
||||
|
||||
.text-wrap {
|
||||
.text {
|
||||
font-size: 26rpx;
|
||||
font-style: italic;
|
||||
color: #010101;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
color: #C80D00;
|
||||
}
|
||||
|
||||
}
|
||||
.text span {
|
||||
color: #C80D00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 426 KiB After Width: | Height: | Size: 1.1 MiB |
Loading…
Reference in New Issue