Authored by hongyong.zhao

修改分享图

239 KB | W: | H:

239 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
... ... @@ -172,27 +172,28 @@ Page({
}
});
pCtx.drawImage('./images/qg@2x.png', 107 * scale, 286 * scale, 160 * scale, 77 * scale);
pCtx.drawImage('./images/Group@2x.png', 20 * scale, 286 * scale, 334 * scale, 136 * scale);
this.drawLongText(this.data.product_name, pCtx, 187.5 * scale, 412 * scale, '#444444', 20, 20);
pCtx.drawImage('./images/y@2x.png', 128.5 * scale, 465 * scale, 60 * scale, 25 * scale);
pCtx.setFillStyle('#b0b0b0');
pCtx.setTextAlign('center');
// pCtx.setTextAlign('center');
const fontSize = 18;
pCtx.setFontSize(fontSize);
let text = `${this.data.product_price}`;
pCtx.fillText(text, 137.5 * scale, 485 * scale);
pCtx.fillText(text, (137.5 + 120) * scale, 485 * scale);
let textRect = {width: 70};
if (pCtx.measureText) {
textRect = pCtx.measureText(text);
}
this.drawLine(pCtx, (137.5 * scale) - (30 * scale), (485 - 15/2) * scale, textRect.width);
pCtx.drawImage('./images/y@2x.png', 128.5 * scale + textRect.width, 465 * scale, 60 * scale, 25 * scale);
this.drawLine(pCtx, ((137.5 + 120) * scale) - (30 * scale), (485 - 15/2) * scale, textRect.width);
pCtx.setFillStyle('black')
pCtx.fillRect(47 * scale, 562 * scale, 280 * scale, 90 * scale)
// this.drawRoundedRect(this.Rect(25 * scale, 562* scale, 280 * scale, 90 * scale), 0, pCtx);
wx.getImageInfo({
src: this.data.product_qrCode,
success: function(res) {
... ... @@ -201,9 +202,9 @@ Page({
}
});
this.drawLongText(`${this.data.user_name}邀请你参与YO!LUCK`, pCtx, 137.5 * scale, 585.5 * scale, '#444444', 14, 20, 'left');
this.drawLongText(`${this.data.user_name}邀请你参与0元抽奖`, pCtx, 137.5 * scale, 585.5 * scale, '#ffffff', 14, 20, 'left');
pCtx.setFillStyle('#b0b0b0');
pCtx.setFillStyle('#ffffff');
pCtx.setFontSize(10);
pCtx.fillText('长按图片识别小程序码抢限定', 137.5 * scale, 612.5 * scale);
pCtx.draw();
... ...
... ... @@ -9,14 +9,14 @@
<image class="product-defaultImage" src="{{default_image}}"> </image>
<view class="center">
<image class="product-0price-logo" src="./images/qg@2x.png"></image>
<image class="product-0price-logo" src="./images/Group@2x.png"></image>
</view>
<view class="product-name">{{product_name}}</view>
<view class="product-price">
<view class="price">{{product_price}}</view>
<image class="price0" src="./images/y@2x.png"></image>
<view class="price">{{product_price}}</view>
</view>
</view>
... ... @@ -24,7 +24,7 @@
<view class="product-miniqr">
<image class="product-qrcode" src="{{product_qrCode}}"></image>
<view class="product-tips">
<view class="product-tips-user">{{user_name}}邀请你参与YO!LUCK</view>
<view class="product-tips-user">{{user_name}}邀请你参与0元抽奖</view>
<view class="product-tips-text">长按图片识别小程序码抢限定</view>
</view>
</view>
... ...
... ... @@ -49,9 +49,11 @@
}
.center {
width: 100%;
width: 530rpx;
text-align: center;
font-size: 0;
position: relative;
left: -15rpx;
}
.product-qrcode {
... ... @@ -66,8 +68,8 @@
}
.product-0price-logo {
width: 250rpx;
height: 122rpx;
width: 100%;
height: 136rpx;
}
.product-name {
... ... @@ -105,11 +107,12 @@
width: 100rpx;
height: 42rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}
.product-tips {
display: inline-block;
width: 300rpx;
width: 250rpx;
margin-left: 30rpx;
position: absolute;
top: 50%;
... ... @@ -117,22 +120,24 @@
}
.product-tips-user {
font-size: 25rpx;
margin-bottom: 20rpx
font-size: 23rpx;
margin-bottom: 20rpx;
color:white;
}
.product-tips-text {
font-size: 16rpx;
color: #b0b0b0;
font-size: 20rpx;
color: white;
}
.product-miniqr {
width: 500rpx;
width: 450rpx;
margin-left: 20rpx;
margin-right: 20rpx;
position: relative;
top: 50%;
transform: translateY(-50%)
transform: translateY(-50%);
background-color: black;
}
.snapshoot-bottom {
... ... @@ -196,4 +201,5 @@
.desc {
height: 260rpx;
position: relative;
}
\ No newline at end of file
... ...