TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Merge branch 'main' of https://git.yuzhankeji.cn/TmOct5/BlockChainH5

Browse Source
This commit is contained in:
张冬雪
2021-09-29 17:27:04 +08:00
parent 9bcd7a8fae e41dbb699c
commit e44c09d7f2
219 changed files with 1167 additions and 853 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
pages/found/index.vue
View File

@@ -321,6 +321,8 @@
width: 100%;
text-align: center;
margin-top: -50rpx;
position: relative;
z-index: 2;
.signBtn-go {
width: 100%;
line-height: 100rpx;

3
pages/login/login.vue
View File

@@ -57,9 +57,6 @@
}
},
onShow(){
console.log(this.$Route)
this.parentId = this.$Route.query.invite || ''
},
methods: {

412
pages/user/code.vue
View File

@@ -1,50 +1,33 @@
<template>
<!-- v-if="loaded" -->
<view class="content">
<view class="content" v-if="loaded">
<view class="code">
<swiper class="code-swiper" previous-margin="70rpx" next-margin="70rpx">
<swiper-item>
<swiper class="code-swiper" previous-margin="70rpx" next-margin="70rpx" @change="swiperChange">
<swiper-item v-for="(item, index) in inviteData" :key="index">
<view class="code-item">
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
<image class="code-back-image" :src="item.cover" mode="aspectFill"></image>
<view class="codDate">
<view class="codDate-year">
2020.09
{{item.date.solar.month}}
</view>
<view class="codDate-day">
02
{{item.date.solar.day}}
</view>
<view class="codDate-lunar">
农历八月二十
{{item.date.lunar}}
</view>
</view>
<view class="codeCont">
<image class="codeCont-avatar" src="@/static/user/user-portrait.png" mode="aspectFill"></image>
<image class="codeCont-avatar" :src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="codeCont-text">
<view class="codeCont-name">
唐明明
{{item.user_info.nickname}}
</view>
<view class="codeCont-number">
邀请码：
<view class="codeBack-number" @click="copyCenter(inviteData.invite)">
21321321
</view>
邀请码：{{item.invite}}
</view>
</view>
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
</view>
<view class="codeImg">
<image class="codeImg-code" mode="widthFix"></image>
<view class="codeImg-name">长按识别</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="code-item">
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="code-item">
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
@@ -52,37 +35,56 @@
<view class="footer">
<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得能量碎片奖励。</view>
<view class="number">
<view class="title">邀请码</view>
<view class="value">2173978217389729</view>
</view>
<view class="button">
<view class="title" @click="coverCode">生成分享海报</view>
<view class="title">邀请码 : {{inviteData[0].invite}}</view>
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
</view>
<view class="button" @click="coverCode">生成分享海报</view>
</view>
<canvas canvas-id="myCanvas"></canvas>
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"/>
<view v-if="posterShow">
<view class="posterBack"></view>
<view class="poster">
<view class="poster-img">
<image class="img" :src="posterImg" mode="widthFix" />
</view>
<view class="poster-btn">
<view class="operate">长按图片保存</view>
<view class="operate operate-cancel" @tap="posterShow = false">确定</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { userInvite } from '@/apis/interfaces/user'
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
import { saveImageToPhotosAlbum, showToast, downloadFile } from '@/uni_modules/sakura-canvas/js_sdk/util'
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy'
let draw = null
export default {
data() {
return {
inviteData: {} ,//二维码信息
loaded : false
Popinvite : {}, //下载海报数据
inviteData: [] ,//二维码信息
codeIndex : 0,
posterImg : '',
defaultImg: '/static/dev/WechatIMG9663.png',
loaded : false,
posterShow: false
};
},
onLoad() {
// 获取二维码
// this.inviteInfo()
this.inviteInfo()
},
async created() {},
methods:{
// 二维码
inviteInfo(){
userInvite().then(res => {
this.inviteData = res
this.loaded = true
this.inviteData = res
}).catch(err => {
uni.showToast({
icon: 'none',
@@ -90,44 +92,201 @@
})
})
},
// 生成海报
coverCode(){
let canvas = new Draw({
width: '375',
height: '745',
canvasId: 'myCanvas',
_this: this,
background: {
type: 'color',
color: '#fffff'
},
quality: 1, // 导出图片的质量, 默认1 值范围0~1, 大于一都为1处理
drawTipsText: '绘制中...'
})
// await draw.createdSharePoster(() => {
// return textArray
// })
async coverCode(){
// let { img, title, price, head, tips } = this
let img = this.inviteData[this.codeIndex].code
let back = this.inviteData[this.codeIndex].cover
let name = this.inviteData[this.codeIndex].user_info.nickname
let invite = this.inviteData[this.codeIndex].invite
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
let date = this.inviteData[this.codeIndex].date
draw = new Draw({
width: 375,
height: 745,
canvasId:'myCanvas',
_this: this,
background: {
type: 'color',
color: 'white',
w: 375,
h: 745,
},
})
let res = await draw.createdSharePoster(({ bgObj }) => {
let { width, height } = bgObj
this.Popinvite = bgObj
// 绘制内容
return [
// 背景
{
type: 'image',
x: 0,
y: 0,
src: back,
w: 375,
h: 745,
zIndex: 0,
},
// 日历-边框
{
type: 'rect',
x: 280,
y: 20,
w: 60, // 宽度 必填
h: 80, // 高度 必填
zIndex: 99,
isFill: false, // 是否是填充矩形, false: 线性矩形
lineWidth: 1 ,// 当矩形为线性时，矩形的边框宽度
color: '#ffffff',
},
// 日历-线条
{
type: 'line',
zIndex: 99,
x: 280,
y: 74,
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
alpha: 1, // 透明度 默认1 取值范围 0~1
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
lineWidth: 1, // 线条高度
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
},
// 日历-年月
{
type: 'text',
x: 284,
y: 28,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.month,
color: '#ffffff',
font: {
size: 14
}
},
// 日历-日
{
type: 'text',
x: 296,
y: 50,
zIndex: 99,
w: width - (20 * 2),
text: date.solar.day,
color: '#ffffff',
font: {
size: 20,
weight: 'bold'
}
},
// 日历-农历日期
{
type: 'text',
x: 282,
y: 80,
zIndex: 99,
w: width - (20 * 2),
text: date.lunar,
color: '#ffffff',
font: {
size: 14
}
},
// 用户昵称
{
type: 'text',
x: 90,
y: 650,
zIndex: 99,
w: width - (20 * 2),
text: name,
color: '#ffffff',
font: {
size: 18
}
},
// 邀请码
{
type: 'text',
x: 90,
y: 685,
zIndex: 99,
w: width - (20 * 2),
text: '邀请码：' + invite,
color: '#c4a1cb',
font: {
size: 16
}
},
// 用户头像
{
type: 'image',
x: 20,
y: 650,
src: avatar,
w: 54,
h: 54,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
},
// 二维码
{
type: 'image',
x: 270,
y: 630,
w: 90,
h: 90,
zIndex: 99,
src: img
}
]
})
if (!res.success) return
this.posterImg = res.data
this.posterShow = true
},
// 保存图片
async saveImage() {
let { posterImg } = this
let res = await saveImageToPhotosAlbum(posterImg)
if (!res.success) return
showToast('保存成功')
this.posterShow = false
},
// 复制邀请码
copyCenter(e) {
let copyNo = e
uni.vibrateShort({
success: () => {
uni.setClipboardData({
data : copyNo,
success : res=> {
uni.showToast({
title : '复制成功',
icon :'none',
duration: 3000
});
}
})
}
})
const result = h5Copy(copyNo)
if (result === false) {
uni.showToast({
title:'不支持',
})
} else {
uni.showToast({
title:'复制成功',
icon:'none'
})
}
},
// 切换海报背景index
swiperChange(e) {
this.codeIndex = e.detail.current
}
}
}
@@ -137,6 +296,7 @@
.content{
background: white;
padding: $padding 0;
box-sizing: border-box;
min-height: 100vh;
@extend .vertical;
}
@@ -165,12 +325,37 @@
// 提示信息
.footer{
padding: $padding ($padding*2);
text-align: center;
padding: 0 $padding + 10;
.hith{
color: $text-gray;
font-size: $title-size-sm;
padding-top: $padding + 10;
}
.number {
background-color: $border-color-lg;
padding: $padding - 5;
margin: $margin + 20 0;
font-size: $title-size-lg;
border-radius: 8rpx;
display: flex;
.title {
flex: 1;
}
.value {
font-size: $title-size-m;
color: $text-price;
}
}
.button {
background: $mian-color-deep;
border-radius: 0;
height: 90rpx;
line-height: 90rpx;
font-size: $title-size;
color: white;
text-align: center;
border-radius: 8rpx;
}
// number
// title
// value
@@ -182,37 +367,43 @@
.codeCont {
position: absolute;
left: 0;
bottom: 140rpx;
bottom: 0;
width: 100%;
bottom: 100rpx;
left: 0;
padding: 40rpx;
padding: 10rpx 30rpx 50rpx;
box-sizing: border-box;
z-index: 9;
.codeCont-avatar {
width: 100rpx;
height: 100rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
border: 6rpx solid #FFFFFF;
border: 4rpx solid #FFFFFF;
}
.codeCont-text {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 50rpx 40rpx 0 180rpx;
padding: 10rpx 40rpx 0 150rpx;
box-sizing: border-box;
.codeCont-name {
color: #FFFFFF;
font-size: 34rpx;
font-size: $title-size;
margin-bottom: 10rpx;
}
.codeCont-number {
font-size: 28rpx;
font-size: $title-size-sm;
display: flex;
color: #c4a1cb;
}
}
.codeCont-img {
width: 140rpx;
height: 140rpx;
position: absolute;
right: 30rpx;
bottom: 30rpx;
}
}
// 日历
.codDate {
@@ -235,8 +426,63 @@
}
.codDate-lunar {
font-size: 24rpx;
transform: scale(.8);
transform: scale(.9);
padding: 4rpx 0;
}
}
// canvas
.my-canvas{
width: 375px;
height: 745px;
position: fixed;
top: -99999999999rpx;
left: -99999999999rpx;
z-index: -99999999999;
opacity: 0;
}
.posterBack {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,.7);
left: 0;
top: 0;
}
.poster{
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 9;
&-img{
width: 580rpx;
position: relative;
margin: 70rpx auto 20rpx;
.img{
width: 100%;
}
}
&-btn{
padding: 0 $padding * 2;
.operate {
width: 100%;
margin-bottom: 20rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
display: inline-block;
text-align: center;
color: #fff;
&-cancel{
background-color: $text-price;
}
}
}
}
</style>

30
pages/user/index.vue
View File

@@ -28,7 +28,7 @@
<!-- 消息列表弹出 end -->
<!-- 用户信息 start -->
<view class="fileTool" :class="{ bigTool: scroll > 200 }">
<!-- <view class="fileTool" :class="{ bigTool: scroll > 200 }">
<view class="user-portrait">
<image class="user-portrait-head" :src="userData.avatar ? userData.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
</view>
@@ -39,7 +39,7 @@
<image class="user-tool-icon" src="/static/user/user-top-00.png" mode="aspectFill" @click="$Router.push({name: 'setting'})"></image>
<image class="user-tool-icon" src="/static/user/user-top-01.png" mode="aspectFill" @click="$Router.push({name: 'news'})"></image>
</view>
</view>
</view> -->
<view class="user-top" :class="[scroll > 0 ? 'bigTop' : 'refurnTop']">
<!-- <image class="user-back" :class="[scroll > 0 ? 'bigSize' : 'refurnSize']" src="../../static/img/user-back.png" mode="aspectFill"></image> -->
<view class="user-tool">
@@ -252,6 +252,7 @@
<script>
import { userIndex, userNotice, userCustomer } from '@/apis/interfaces/user'
import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy'
export default {
data() {
return {
@@ -355,20 +356,17 @@
// 复制邀请码
copyCenter(e) {
let copyNo = e
uni.vibrateShort({
success: () => {
uni.setClipboardData({
data : copyNo,
success : res=> {
uni.showToast({
title : '复制成功',
icon :'none',
duration: 3000
});
}
})
}
})
const result = h5Copy(copyNo)
if (result === false) {
uni.showToast({
title:'不支持',
})
} else {
uni.showToast({
title:'复制成功',
icon:'none'
})
}
},
// 友情提示信息

1313
pages/vip/vip.vue
View File

File diff suppressed because it is too large Load Diff

46
pages/wxAuth/wxAuth.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<view class="content vertical">
<u-loading mode="flower"></u-loading>
</view>
</template>
<script>
import { wxCode, wxOpenid } from '@/apis/interfaces/wx'
export default {
data() {
return {
};
},
created() {
// 微信鉴权
if(!this.$Route.query.code){
wxCode({
pages: 'wechat-auth'
}).then(res => {
window.location.href = res
})
}else{
wxOpenid({
code: this.$Route.query.code
}).then(res => {
this.$store.commit('setCode', res.openid)
this.$Router.replaceAll({name: 'Index'})
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
.content{
background: white;
height: 100vh;
text-align: center;
}
</style>