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

修改跳转路径

Browse Source
This commit is contained in:
zhangmanman
2021-09-28 14:22:07 +08:00
parent f4d06813fb
commit 016ad427ac
2 changed files with 99 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
pages/user/code.vue
View File

@@ -1,37 +1,35 @@
<template>
<view class="background">
<view class="codeContent">
<!-- 邀请码图 -->
<view class="codeBack">
<image class="codeBack-img" src="/static/user/user-codeIcon.png" mode="widthFix"></image>
<view class="codeBack-avatar" v-if="inviteData.user_info">
<image :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="">
{{inviteData.user_info.nickname}}
</view>
<view v-if="loaded">
<image class="codeBack" :src="inviteData.cover"></image>
<view class="codDate">
<view class="codDate-year" v-if="inviteData.date">
{{inviteData.date.solar.month}}
</view>
<view class="codDate-day">
{{inviteData.date.solar.day}}
</view>
<view class="codDate-lunar">
农历{{inviteData.date.lunar}}
</view>
</view>
<view class="codeCont">
<image class="codeCont-avatar" v-if="inviteData.user_info" :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
<view class="codeCont-text">
<view class="codeCont-name" v-if="inviteData.user_info">
{{inviteData.user_info.nickname}}
</view>
<view class="codeBack-top">
<view class="codeBack-title">
您的邀请码
</view>
<view class="codeBack-number">
<view class="codeCont-number">
邀请码：
<view class="codeBack-number" @click="copyCenter(inviteData.invite)">
{{inviteData.invite}}
</view>
<view class="codeBack-copy" @click="copyCenter(inviteData.invite)">
复制
</view>
</view>
<view class="codeBack-yard">
<image class="codeBack-yard-img" :src="inviteData.code" mode="widthFix"></image>
<view class="codeBack-yard-name">
扫码识别链商星球
</view>
<view class="codeBack-yard-tips">
加入链商星球享受能量球权益
</view>
</view>
</view>
</view>
<view class="codeImg">
<image class="codeImg-code" :src="inviteData.code" mode="widthFix"></image>
<view class="codeImg-name">长按识别</view>
</view>
</view>
</template>
@@ -40,7 +38,8 @@
export default {
data() {
return {
inviteData: {} //二维码信息
inviteData: {} ,//二维码信息
loaded : false
};
},
onLoad() {
@@ -52,6 +51,7 @@
inviteInfo(){
userInvite().then(res => {
this.inviteData = res
this.loaded = true
}).catch(err => {
uni.showToast({
icon: 'none',
@@ -62,7 +62,6 @@
// 复制邀请码
copyCenter(e) {
console.log('ddd')
let copyNo = e
uni.vibrateShort({
success: () => {
@@ -78,209 +77,92 @@
})
}
})
},
// 分享微信好友
friend(scene) {
uni.share({
provider: 'weixin',
title: '我正在使用ocChain',
scene: scene,
href: 'https://live.funnyzhibo.com/blockdownload',
imageUrl: 'https://live.funnyzhibo.com/oc-chain.png',
summary: '邀请您一起加入，邀请码' + this.inviteData.invite,
complete: res=> {
console.log(res)
}
})
}
}
}
</script>
<style lang="scss">
// 背景色
.background{
min-height: 100vh;
background: linear-gradient(to top, #7c52fc, #976dff);
}
// 背景
.codeImg {
width: 100%;
height: 100%;
}
// 内容
.codeContent {
position: absolute;
left: 0;
<style lang="scss" scoped>
.codeBack {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
position: relative;
}
.codeCont {
position: absolute;
width: 100%;
padding: 120rpx 80rpx 40rpx;
bottom: 100rpx;
left: 0;
padding: 40rpx;
box-sizing: border-box;
text-align: center;
.titleImg {
max-width: 100%;
z-index: 9;
.codeCont-avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 6rpx solid #FFFFFF;
}
.codeBack {
background-color: $uni-bg-color;
border-radius: $uni-border-radius-lg;
position: relative;
margin: $margin * 2 0 $margin * 2.5;
overflow: hidden;
&::after, &::before {
position: absolute;
background-color: #8c62fe;
content: '';
top: 278px;
width: 40rpx;
height: 40rpx;
border-radius: $uni-border-radius-circle;
.codeCont-text {
position: absolute;
width: 100%;
left: 0;
top: 0;
padding: 50rpx 40rpx 0 180rpx;
box-sizing: border-box;
.codeCont-name {
color: #FFFFFF;
font-size: 34rpx;
margin-bottom: 10rpx;
}
&::after {
left: -20rpx;
}
&::before {
right: -20rpx;
}
.codeBack-img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.codeBack-top {
width: 100%;
padding: $padding;
height: 150px;
box-sizing: border-box;
position: relative;
.codeBack-title {
color: #7c52fc
}
.codeBack-number {
font-size: 40rpx;
color: #7c52fc;
text-transform:uppercase;
font-weight: 700;
margin: $margin - 10 0 $margin;
}
.codeBack-copy {
font-size: $title-size-lg;
display: inline-block;
background: linear-gradient(to right, #f9c869, #eca824);
color: #fff;
padding: 15rpx $padding * 2;
border-radius: $uni-border-radius-lg;
margin-bottom: $margin * 2;
}
.codeBack-tips {
.codeBack-tips-text {
color: #7c52fc;
font-weight: 700;
}
.codeBack-tips-label {
margin-top: $margin;
border-radius: $uni-border-radius-lg;
display: inline-block;
background-color: #fbeec9;
font-size: $title-size-sm;
padding: 0 $padding + 12;
height: 56rpx;
line-height: 56rpx;
color: #9f7d42;
}
}
}
.codeBack-avatar {
margin-top: $margin * 2;
font-size: 32rpx;
font-weight: 600;
image {
width: 140rpx;
height: 140rpx;
border-radius: 50%;
margin-bottom: $margin;
}
}
.codeBack-yard {
padding: $padding $padding * 2 $padding * 2;
text-align: center;
position: relative;
font-size: $title-size-lg;
&::after {
position: absolute;
content: '';
left: 50rpx;
top: 0;
width: calc(100% - 100rpx);
border-top: #cccbd0 2rpx dashed;
}
.codeBack-yard-img {
max-width: 75%;
border: 4rpx solid #f3f3f3;
margin: 20rpx 0 40rpx;
}
.codeBack-yard-name {
color: #a0a1a3;
margin-bottom: $margin - 10;
}
.codeBack-yard-tips {
color: #7c52fc
}
}
}
.codeRule {
background-color: $uni-bg-color;
border-radius: $radius;
padding: $padding + 10;
.codeRule-title {
font-size: $uni-font-size-lg + 4;
color: #7c52fc;
font-weight: 700;
margin-bottom: $margin + 10;
}
.codeRule-list {
text-align: left;
font-size: $title-size-m;
line-height: 38rpx;
text {
display: block;
margin-bottom: $margin - 5;
color: #7c52fc;
}
.codeCont-number {
font-size: 28rpx;
display: flex;
color: #c4a1cb;
}
}
}
// 分享途径
.codeShare {
position: fixed;
left: 0;
bottom: 0;
.codeImg {
position: absolute;
bottom: 120rpx;
right: 40rpx;
z-index: 9;
background-color: $uni-bg-color;
box-sizing: border-box;
height: 200rpx;
width: 100%;
display: flex;
justify-items: center;
align-items:center;
.codeShare-label {
width: 50%;
text-align: center;
font-size: $uni-font-size-sm;
color: $text-gray;
image {
width: $uni-img-size-lg - 10;
height: $uni-img-size-lg - 10;
display: flex;
margin: 0 auto $margin - 10;
}
width: 160rpx;
height: 160rpx;
color: #FFFFFF;
text-align: center;
font-size: 24rpx;
opacity: .9;
.codeImg-code {
width: 100%;
margin-bottom: 10rpx;
}
}
.codDate {
position: absolute;
top: 30rpx;
right: 70rpx;
z-index: 9;
color: #FFFFFF;
text-align: center;
font-size: 24rpx;
border: 2rpx solid #fffefc;
.codDate-year {
padding-top: 5rpx;
}
.codDate-day {
padding: 5rpx 0;
font-size: 32rpx;
font-weight: 600;
border-bottom: 2rpx solid #a980c6;
}
.codDate-lunar {
font-size: 24rpx;
transform: scale(.8);
padding: 4rpx 0;
}
}
</style>

BIN
static/user/01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 268 KiB