wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

细节

Browse Source
pifa
fanfan 6 months ago
parent 325b212183
commit a71dcd33d8
1 changed files with 154 additions and 35 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 189
      pages/invite/index.vue

189
pages/invite/index.vue
Unescape View File

@ -27,7 +27,10 @@
</view> </view>
</view> </view>
<view class="a"> <view class="a">
<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view> <view class="title">
<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>怎么邀请好友<image
src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
</view>
<view class="content" style="margin-top: 30rpx;"> <view class="content" style="margin-top: 30rpx;">
<view class="item"> <view class="item">
<image src="https://www.amiami.com.cn/static/news1/4@2x.png"></image> <image src="https://www.amiami.com.cn/static/news1/4@2x.png"></image>
@ -44,7 +47,10 @@
</view> </view>
</view> </view>
<view class="a"> <view class="a">
<view class="title"><image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image src="https://www.amiami.com.cn/static/news1/you@2x.png"></image></view> <view class="title">
<image src="https://www.amiami.com.cn/static/news1/zuo@2x.png"></image>邀请小技巧<image
src="https://www.amiami.com.cn/static/news1/you@2x.png"></image>
</view>
<view class="desc1">邀请成功率提高200%</view> <view class="desc1">邀请成功率提高200%</view>
<view class="content"> <view class="content">
<view class="li">邀请您的同行，跨行商家，成功率高</view> <view class="li">邀请您的同行，跨行商家，成功率高</view>
@ -55,20 +61,24 @@
</view> </view>
<view class="invite-popup" v-if="isPopup"> <view class="invite-popup" v-if="isPopup">
<view class="popup"> <view class="popup">
<image class="bg" mode="widthFix" show-menu-by-longpress :src="qrcode"></image> <image class="bg" mode="heightFix" show-menu-by-longpress :src="qrcode1"></image>
<view class="tips"> <view class="tips">
<view class="cancle" @click="download(1)">取消</view> <view class="cancle" @click="download(1)">取消</view>
<view class="sure" @click="download(2)">保存到相册</view> <view class="sure" @click="download(2)">保存到相册</view>
</view> </view>
</view> </view>
</view> </view>
<canvas id="myCanvas" class="myCanvas" canvas-id="myCanvas"
:style="{'width': 702/devicePixelRatio+'px',' height': 1248/devicePixelRatio+'px',position: 'absolute',left:'-100000px',top:'-100000px'}"></canvas>
<view class="invite-fd"> <view class="invite-fd">
<view class="btn" @click="openPage(3)">立即邀请</view></view> <view class="btn" @click="openPage(3)">立即邀请</view>
</view>
<addShuiyin /> <addShuiyin />
</view> </view>
</template> </template>
<script> <script>
const ctx = uni.createCanvasContext('myCanvas')
import { import {
createQrCodeImg createQrCodeImg
} from '@/utils/qrcode' } from '@/utils/qrcode'
@ -77,6 +87,7 @@
export default { export default {
data() { data() {
return { return {
qrcode1: "",
qrcode: "", qrcode: "",
userInfo: {}, userInfo: {},
backgroundBg: { backgroundBg: {
@ -88,7 +99,8 @@
isPopup: false, isPopup: false,
info: {}, info: {},
info1: {}, info1: {},
list: [] list: [],
devicePixelRatio: 750 / uni.getSystemInfoSync().windowHeight
} }
}, },
onReady() { onReady() {
@ -138,25 +150,98 @@
return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { return val.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
return arrEntities[t]; return arrEntities[t];
}); });
},
createImge() {
const that = this;
ctx.fillRect(0, 0, 702 / that.devicePixelRatio, 1248 / that.devicePixelRatio);
uni.downloadFile({
url: 'https://www.amiami.com.cn/static/news1/business.png',
success(res) {
ctx.drawImage(res.tempFilePath, 0, 0, 702 / that.devicePixelRatio, 1248 / that
.devicePixelRatio);
uni.downloadFile({
url: that.qrcode,
success: (res2) => {
ctx.save(); // 保存
ctx.beginPath(); // 开始绘制
ctx.arc(162 / that.devicePixelRatio / 2 + 285 / that.devicePixelRatio,
162 / that.devicePixelRatio / 2 + 870 / that.devicePixelRatio,
162 / that.devicePixelRatio / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(res2.tempFilePath, 285 / that.devicePixelRatio, 870 /
that.devicePixelRatio, 162 / that.devicePixelRatio, 162 / that
.devicePixelRatio);
// 恢复之前保存的绘图上下文
ctx.restore();
// 邀请码
ctx.setFontSize(45 / that.devicePixelRatio);
ctx.setFillStyle('#cf100d');
ctx.fillText(that.userInfo.user_id, 200 / that.devicePixelRatio, 1213 /
that.devicePixelRatio);
ctx.draw()
uni.canvasToTempFilePath({
width: 702 / that.devicePixelRatio,
height: 1248 / that.devicePixelRatio,
destWidth: 702 / that.devicePixelRatio,
destHeight: 1248 / that.devicePixelRatio,
canvasId: 'myCanvas',
success: function(res) {
// 在H5平台下，tempFilePath 为 base64
console.log(res.tempFilePath)
that.qrcode1 = res.tempFilePath;
that.isPopup = true;
ctx.clearRect(0, 0, 702, 1248);
// uni.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// success(data) {
// that.$success('保存成功')
// },
// fail(err) {
// if (err.errMsg ===
// 'saveImageToPhotosAlbum:fail auth deny'
// ) {
// that.$toast(
// '请允许访问相册后重试 (右上角菜单 - 设置 - 相册)',
// 3000)
// }
// }
// })
}
})
},
})
}
})
}, },
//生成海报 //生成海报
async InviteUserPoster() { async InviteUserPoster() {
const { const {
status, status,
data data
} = await newFunApi.InviteUserPoster({type:2}); } = await newFunApi.InviteUserPoster({});
if (status == 200) { if (status == 200) {
console.log(data) console.log(data)
this.isPopup = true; this.qrcode = data.imageUrl;
this.qrcode = data.imageUrl this.createImge();
} }
}, },
download(type) { download(type) {
const app = this const app = this
app.isPopup = false; app.isPopup = false;
if(type == 1){ if (type == 1) {
return ; return;
} else {
uni.showLoading({
title: '加载中'
})
app.onSaveImage(app.qrcode1)
// this.createImge();
} }
return;
uni.showLoading({ uni.showLoading({
title: '加载中' title: '加载中'
}) })
@ -214,7 +299,7 @@
linkElement.click() linkElement.click()
}, },
// #endif // #endif
async getList1() { async getList1() {
const { const {
status, status,
@ -254,7 +339,11 @@
url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money url: "/pages/news/user/withdrawal?balance=" + this.userInfo.withdrawal_money
}) })
} else if (index == 3) { } else if (index == 3) {
this.InviteUserPoster(); if (!this.qrcode1) {
this.InviteUserPoster();
} else {
this.isPopup = true;
}
} else if (index == 4) { } else if (index == 4) {
uni.navigateTo({ uni.navigateTo({
url: "/pages/invite/rule" url: "/pages/invite/rule"
@ -272,8 +361,14 @@
background-size: 100% auto; background-size: 100% auto;
min-height: 100vh; min-height: 100vh;
padding-bottom: 150rpx; padding-bottom: 150rpx;
&-fd{
width: 100%; .myCanvas {
position: absolute;
z-index: -1;
}
&-fd {
width: 100%;
position: fixed; position: fixed;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -283,7 +378,8 @@
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
.btn{
.btn {
width: 642rpx; width: 642rpx;
line-height: 90rpx; line-height: 90rpx;
background: #F34A40; background: #F34A40;
@ -294,6 +390,7 @@
color: #FFFFFF; color: #FFFFFF;
} }
} }
&-popup { &-popup {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -304,6 +401,9 @@
z-index: 55; z-index: 55;
.popup { .popup {
display: flex;
justify-content: center;
/* 水平居中 */
width: 672rpx; width: 672rpx;
height: 912rpx; height: 912rpx;
position: absolute; position: absolute;
@ -345,13 +445,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.cancle{
.cancle {
flex: 1; flex: 1;
background-color: #FFFFFF; background-color: #FFFFFF;
margin-right: 30rpx; margin-right: 30rpx;
border-radius: 10rpx; border-radius: 10rpx;
} }
.sure{
.sure {
border-radius: 10rpx; border-radius: 10rpx;
flex: 1; flex: 1;
color: #FFFFFF; color: #FFFFFF;
@ -371,11 +473,13 @@
} }
} }
&-hd { &-hd {
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 435rpx; height: 435rpx;
position: relative; position: relative;
.rule { .rule {
width: 50rpx; width: 50rpx;
height: 170rpx; height: 170rpx;
@ -414,6 +518,7 @@
&-bd { &-bd {
padding: 0 24rpx 24rpx; padding: 0 24rpx 24rpx;
overflow: hidden; overflow: hidden;
.a { .a {
width: 100%; width: 100%;
min-height: 290rpx; min-height: 290rpx;
@ -422,7 +527,8 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
padding-bottom: 50rpx; padding-bottom: 50rpx;
overflow: hidden; overflow: hidden;
.title{
.title {
line-height: 100rpx; line-height: 100rpx;
font-weight: 400; font-weight: 400;
font-size: 36rpx; font-size: 36rpx;
@ -430,69 +536,79 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
image{
image {
width: 52rpx; width: 52rpx;
height: 24rpx; height: 24rpx;
margin: 0 20rpx; margin: 0 20rpx;
} }
} }
.desc1{
.desc1 {
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
color: #9A372D; color: #9A372D;
position: relative; position: relative;
} }
.desc{
.desc {
text-align: center; text-align: center;
font-size: 28rpx; font-size: 28rpx;
color: #9A372D; color: #9A372D;
position: relative; position: relative;
&::after{
&::after {
content: ""; content: "";
width: 100rpx; width: 100rpx;
height: 1px; height: 1px;
background-color: #9A372D; background-color: #9A372D;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 150rpx; left: 150rpx;
z-index: 2; z-index: 2;
} }
&::before{
&::before {
content: ""; content: "";
width: 100rpx; width: 100rpx;
height: 1px; height: 1px;
background-color: #9A372D; background-color: #9A372D;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 150rpx; right: 150rpx;
z-index: 2; z-index: 2;
} }
} }
.content{
.content {
width: 100%; width: 100%;
margin-top: 45rpx; margin-top: 45rpx;
overflow: hidden; overflow: hidden;
.item{
.item {
width: 33.3%; width: 33.3%;
text-align: center; text-align: center;
font-size: 26rpx; font-size: 26rpx;
color: #9A372D; color: #9A372D;
float: left; float: left;
image{
image {
width: 122rpx; width: 122rpx;
height: 122rpx; height: 122rpx;
display: block; display: block;
margin: 0 auto 20rpx; margin: 0 auto 20rpx;
} }
} }
.li{
.li {
padding: 0 50rpx 0 80rpx; padding: 0 50rpx 0 80rpx;
position: relative; position: relative;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #9A372D; color: #9A372D;
line-height: 45rpx; line-height: 45rpx;
&::after{
&::after {
content: ""; content: "";
width: 10rpx; width: 10rpx;
height: 10rpx; height: 10rpx;
@ -506,20 +622,23 @@
} }
} }
} }
} }
.tixian{
.tixian {
width: 110rpx; width: 110rpx;
height: 110rpx; height: 110rpx;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4rpx 12rpx 0px rgba(77,13,17,0.16); box-shadow: 0px 4rpx 12rpx 0px rgba(77, 13, 17, 0.16);
border-radius: 50%; border-radius: 50%;
image{
image {
width: 30rpx; width: 30rpx;
height: 30rpx; height: 30rpx;
display: block; display: block;
margin: 15rpx auto; margin: 15rpx auto;
} }
font-weight: 400; font-weight: 400;
font-size: 20rpx; font-size: 20rpx;
text-align: center; text-align: center;

Write Preview
Loading…
Cancel
Save