12 changed files with 817 additions and 27 deletions
-
12pages.json
-
9pages/bill/bill.vue
-
62pages/center/fans.vue
-
12pages/center/index.vue
-
345pages/center/invite.vue
-
21pages/center/wallet.vue
-
49pages/center/widthdraw.vue
-
334pages/goodsDetail/index.vue
-
BINstatic/center/fans.png
-
BINstatic/center/invite.png
-
BINstatic/center/wallet.png
-
BINstatic/images/bill.png
@ -0,0 +1,62 @@ |
|||
<template> |
|||
<view> |
|||
<view class="bg-white lf-p-t-40 lf-p-b-40 flex justify-around align-center text-center solid-bottom"> |
|||
<view class="lf-font-32" style="width: 50%;border-right: 1px solid rgba(0, 0, 0, 0.1);box-sizing: border-box;" :class="tabIndex ==0?'text-orange':'text-black1'" @click="tabIndex = 0">内部粉丝</view> |
|||
<view class="lf-font-32" style="width: 50%;" :class="tabIndex ==1?'text-orange':'text-black1'" @click="tabIndex = 1">外部粉丝</view> |
|||
</view> |
|||
|
|||
<block v-if="tabIndex == 0"> |
|||
<view class="flex lf-p-30 solid-bottom"> |
|||
<view> |
|||
<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction justify-around lf-p-l-20"> |
|||
<view class="lf-font-32 text-black1">时空网的内部网友 <text class="bg-red lf-font-24 lf-m-l-10" style="border-radius: 30rpx;padding: 5rpx 16rpx;">达人</text></view> |
|||
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex lf-p-30 solid-bottom"> |
|||
<view> |
|||
<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction justify-around lf-p-l-20"> |
|||
<view class="lf-font-32 text-black1">时空网的内部网友</view> |
|||
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
<block v-else> |
|||
<view class="flex lf-p-30 solid-bottom"> |
|||
<view> |
|||
<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction justify-around lf-p-l-20"> |
|||
<view class="lf-font-32 text-black1">时空网的外部网友</view> |
|||
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view> |
|||
</view> |
|||
</view> |
|||
<view class="flex lf-p-30 solid-bottom"> |
|||
<view> |
|||
<image src="../../static/center/shop-logo.png" style="height: 120rpx;width: 120rpx;" mode="aspectFill"></image> |
|||
</view> |
|||
<view class="flex flex-direction justify-around lf-p-l-20"> |
|||
<view class="lf-font-32 text-black1">时空网的外部网友</view> |
|||
<view class="lf-font-24 lf-color-gray">2021-7-6 21:32:53</view> |
|||
</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
tabIndex: 0 |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,345 @@ |
|||
<template> |
|||
<view> |
|||
<view class="flex justify-center lf-m-t-20"> |
|||
<!-- <image src="../../static/images/bill.png" mode="widthFix" style="height: 1220rpx;width: 686rpx;"></image> --> |
|||
<image v-if="imagePath" :src="imagePath" mode="widthFix"></image> |
|||
</view> |
|||
|
|||
<tki-qrcode v-if="info.avatar" style="visibility: hidden;position: fixed;left: -500rpx;" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|||
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" /> |
|||
|
|||
<tki-qrcode v-else ref="qrcode" style="visibility: hidden;position: fixed;left: -500rpx;" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff" |
|||
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" /> |
|||
|
|||
<view class="canvas-box"> |
|||
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" /> |
|||
</view> |
|||
|
|||
<view class="btn-bottom" style="bottom: 40rpx;"> |
|||
<view class="padding-lr-lg"> |
|||
<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="subimitApply()"> |
|||
<text class="text-df text-white">保存</text> |
|||
</button> |
|||
</view> |
|||
|
|||
<view class="flex justify-center align-center lf-m-t-30"> |
|||
<view class="lf-color-gray lf-font-28">https：//hbdsufiewhuifusikj.com</view> |
|||
<view class="lf-font-24 text-orange lf-m-l-30" @click="copy('https：//hbdsufiewhuifusikj.com')">复制</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import tkiQrcode from "tki-qrcode"; // 二维码生成器 |
|||
export default { |
|||
data() { |
|||
return { |
|||
base64Img: '', |
|||
checkArea: 'Cannot find module', |
|||
maskHidden: false, |
|||
info: { |
|||
avatar: '', |
|||
nickname: '', |
|||
id: '', |
|||
tel: '', |
|||
tags: [] |
|||
}, |
|||
showLogin: true, |
|||
imagePath: '', |
|||
|
|||
userToken: '' |
|||
} |
|||
}, |
|||
components: { |
|||
tkiQrcode |
|||
}, |
|||
onLoad() { |
|||
wx.showToast({ |
|||
title: '生成海报中...', |
|||
icon: 'loading', |
|||
duration: 1000 |
|||
}); |
|||
this.getData(); |
|||
this.createNewImg(); |
|||
}, |
|||
methods:{ |
|||
//保存头像 |
|||
saveAvatar() { |
|||
var that = this |
|||
console.log(that.info.avatar) |
|||
wx.saveImageToPhotosAlbum({ |
|||
filePath: that.info.avatar, |
|||
success(res) { |
|||
wx.showModal({ |
|||
content: '图片已保存到相册，赶紧晒一下吧~', |
|||
showCancel: false, |
|||
confirmText: '好的', |
|||
confirmColor: '#333', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
that.maskHidden = false |
|||
} |
|||
}, |
|||
fail: function(res) { |
|||
that.maskHidden = false |
|||
console.log(res) |
|||
} |
|||
}) |
|||
}, |
|||
fail(err) { |
|||
console.log(err) |
|||
} |
|||
}) |
|||
}, |
|||
qrR(data) { |
|||
this.base64Img = data; |
|||
console.log('base64',this.base64Img) |
|||
}, |
|||
getData() { |
|||
let userinfo = uni.getStorageSync('userinfo') || {}; |
|||
if (userinfo) { |
|||
this.info = userinfo |
|||
console.log('用户数据缓存',this.info) |
|||
} else { |
|||
this.$http(this.API.API_USER_CENTER).then(res => { |
|||
this.info = res.data; |
|||
console.log('用户数据接口',this.info) |
|||
}) |
|||
} |
|||
}, |
|||
createNewImg() { |
|||
var that = this; |
|||
var context = wx.createCanvasContext('mycanvas'); |
|||
var path = "../../static/images/bill.png"; |
|||
context.drawImage(path, 0, 0, 375, 667); |
|||
//绘制二维码 |
|||
context.drawImage(that.base64Img, 24, 530,120, 120); |
|||
//绘制名字 |
|||
// context.setFontSize(24); |
|||
// context.setFillStyle('#fff'); |
|||
// context.setTextAlign('center'); |
|||
// context.fillText(name, 34, 620); |
|||
context.stroke(); |
|||
context.draw(); |
|||
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时 |
|||
setTimeout(function() { |
|||
wx.canvasToTempFilePath({ |
|||
canvasId: 'mycanvas', |
|||
success: function(res) { |
|||
that.imagePath = res.tempFilePath; |
|||
if(that.imagePath) { |
|||
that.canvasHidden = true |
|||
that.maskHidden = true |
|||
} |
|||
console.log('海报生成成功') |
|||
console.log(res) |
|||
console.log('图片链接', that.imagePath) |
|||
}, |
|||
fail: function(res) { |
|||
console.log(res); |
|||
} |
|||
}); |
|||
}, 900); |
|||
}, |
|||
saveBill() { |
|||
var that = this |
|||
wx.saveImageToPhotosAlbum({ |
|||
filePath: that.imagePath, |
|||
success(res) { |
|||
wx.showModal({ |
|||
content: '图片已保存到相册，赶紧晒一下吧~', |
|||
showCancel: false, |
|||
confirmText: '好的', |
|||
confirmColor: '#333', |
|||
success: function(res) { |
|||
if (res.confirm) { |
|||
console.log('用户点击确定'); |
|||
that.maskHidden = false |
|||
} |
|||
}, |
|||
fail: function(res) { |
|||
that.maskHidden = false |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
formSubmit() { |
|||
var that = this; |
|||
wx.showToast({ |
|||
title: '生成海报中...', |
|||
icon: 'loading', |
|||
duration: 1000 |
|||
}); |
|||
wx.hideToast() |
|||
that.createNewImg() |
|||
}, |
|||
// 点击复制 |
|||
copy(text) { |
|||
uni.setClipboardData({ |
|||
data: text |
|||
}); |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.bgImg { |
|||
display: block; |
|||
width: 100%; |
|||
height: 366rpx; |
|||
} |
|||
|
|||
.mine { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.code { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 76rpx; |
|||
font-weight: bold; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.who { |
|||
display: block; |
|||
margin-top: 80rpx; |
|||
font-size: 32rpx; |
|||
color: #333; |
|||
text-align: center; |
|||
} |
|||
|
|||
.inputBox { |
|||
text-align: center; |
|||
margin-top: 44rpx; |
|||
} |
|||
|
|||
.input { |
|||
text-align: center; |
|||
width: 440rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: #f5f5f5; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.btn { |
|||
width: 160rpx; |
|||
height: 88rpx; |
|||
border-radius: 44rpx; |
|||
background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1)); |
|||
box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5); |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
display: inline-block; |
|||
line-height: 88rpx; |
|||
margin-left: 40rpx; |
|||
} |
|||
|
|||
button[class="btn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.tishi { |
|||
display: block; |
|||
text-align: center; |
|||
color: #999; |
|||
margin-top: 30rpx; |
|||
} |
|||
|
|||
.shareText { |
|||
display: block; |
|||
text-align: center; |
|||
color: #333; |
|||
font-size: 28rpx; |
|||
margin-top: 100rpx; |
|||
} |
|||
|
|||
.imgBox { |
|||
text-align: center; |
|||
width: 100%; |
|||
margin-top: 60rpx; |
|||
padding-bottom: 120rpx; |
|||
} |
|||
|
|||
.img { |
|||
display: inline-block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.m_l { |
|||
margin-left: 180rpx; |
|||
} |
|||
|
|||
.zfbtn { |
|||
display: inline-block; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border-radius: 50%; |
|||
background: transparent; |
|||
outline: none; |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
button[class="zfbtn"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
button[class="zfbtn m_l"]::after { |
|||
border: 0; |
|||
} |
|||
|
|||
.imagePathBox { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.7); |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.shengcheng { |
|||
width: 80%; |
|||
height: 80%; |
|||
position: fixed; |
|||
top: 50rpx; |
|||
left: 50%; |
|||
margin-left: -40%; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.baocun { |
|||
display: block; |
|||
width: 80%; |
|||
height: 80rpx; |
|||
padding: 0; |
|||
line-height: 80rpx; |
|||
text-align: center; |
|||
position: fixed; |
|||
bottom: 50rpx; |
|||
left: 10%; |
|||
background: #ffe200; |
|||
color: #333; |
|||
font-size: 32rpx; |
|||
border-radius: 44rpx; |
|||
} |
|||
|
|||
button[class="baocun"]::after { |
|||
border: 0; |
|||
} |
|||
</style> |
|||
|
After Width: 50 | Height: 50 | Size: 1.9 KiB |
|
After Width: 50 | Height: 50 | Size: 1.9 KiB |
|
After Width: 50 | Height: 50 | Size: 1.2 KiB |
|
After Width: 686 | Height: 920 | Size: 343 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue