|
|
|
@ -19,16 +19,17 @@ |
|
|
|
style="width: 400rpx;" |
|
|
|
:src="imagePath" mode="widthFix"></image> |
|
|
|
</view> --> |
|
|
|
|
|
|
|
<image :src="userInfo.headImage" mode="aspectFill" |
|
|
|
class="headImage"></image> |
|
|
|
|
|
|
|
<image style="width: 100%;" :src="imagePath" mode="widthFix"></image> |
|
|
|
|
|
|
|
<!-- <view class="invitation-code">加油站: {{ title }}</view> --> |
|
|
|
<canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> |
|
|
|
</view> |
|
|
|
<view class="btns"> |
|
|
|
<view class="btn" |
|
|
|
@click="preservationImg(imagePath)">保存</view> |
|
|
|
<!-- <view class="btn">立即邀请</view> --> |
|
|
|
|
|
|
|
<view class="uni-color-btn" |
|
|
|
@click="preservationImg(imagePath)">保存二维码</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
@ -110,8 +111,14 @@ |
|
|
|
ctx.fillStyle = 'black' |
|
|
|
ctx.font = '22px PingFangSC-regular'; |
|
|
|
|
|
|
|
let s = this.title || '加油站' |
|
|
|
// 绘制用户姓名 |
|
|
|
// let nickName = this.userInfo.nickName || '绘制用户姓名' |
|
|
|
// ctx.fillText(nickName, canvas.width / Ratio - nickName.length * 11, 40); |
|
|
|
|
|
|
|
// ctx.font = '18px PingFangSC-regular'; |
|
|
|
|
|
|
|
// 绘制欢迎语 |
|
|
|
let s = this.title || '' |
|
|
|
ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50); |
|
|
|
|
|
|
|
//二维码图片 |
|
|
|
@ -202,67 +209,24 @@ |
|
|
|
background-color: $uni-color; |
|
|
|
.promotion-card { |
|
|
|
width: 90%; |
|
|
|
margin: 100rpx auto 0rpx auto; |
|
|
|
margin: 140rpx auto 0rpx auto; |
|
|
|
box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2); |
|
|
|
border-radius: 15rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
padding: 40rpx 30rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
.user-info { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.image { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 50%; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.user-name { |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.invitation-code-img { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
margin: 100rpx 0rpx; |
|
|
|
|
|
|
|
.image { |
|
|
|
width: 30%; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.invitation-code { |
|
|
|
text-align: center; |
|
|
|
color: #818181; |
|
|
|
font-size: 28rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.btns { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 120rpx; |
|
|
|
display: flex; |
|
|
|
background: #fff; |
|
|
|
font-size: 28rpx; |
|
|
|
color: $uni-color; |
|
|
|
.btn { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
&:nth-child(2) { |
|
|
|
background: orange; |
|
|
|
} |
|
|
|
position: relative; |
|
|
|
padding-top: 100rpx; |
|
|
|
.headImage{ |
|
|
|
position: absolute; |
|
|
|
height: 180rpx; |
|
|
|
width: 180rpx; |
|
|
|
border-radius: 50%; |
|
|
|
top: -80rpx; |
|
|
|
left: 50%; |
|
|
|
transform: translate(-50%); |
|
|
|
border: 10rpx solid #fff; |
|
|
|
box-shadow: 0 0 10rpx 10rpx #00000013; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
