修改跳转路径

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

View File

@@ -1,37 +1,35 @@
<template> <template>
<view class="background"> <view v-if="loaded">
<view class="codeContent"> <image class="codeBack" :src="inviteData.cover"></image>
<!-- 邀请码图 --> <view class="codDate">
<view class="codeBack"> <view class="codDate-year" v-if="inviteData.date">
<image class="codeBack-img" src="/static/user/user-codeIcon.png" mode="widthFix"></image> {{inviteData.date.solar.month}}
<view class="codeBack-avatar" v-if="inviteData.user_info"> </view>
<image :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image> <view class="codDate-day">
<view class=""> {{inviteData.date.solar.day}}
{{inviteData.user_info.nickname}} </view>
</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>
<view class="codeBack-top"> <view class="codeCont-number">
<view class="codeBack-title"> 邀请码
您的邀请码 <view class="codeBack-number" @click="copyCenter(inviteData.invite)">
</view>
<view class="codeBack-number">
{{inviteData.invite}} {{inviteData.invite}}
</view> </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>
</view> </view>
<view class="codeImg">
<image class="codeImg-code" :src="inviteData.code" mode="widthFix"></image>
<view class="codeImg-name">长按识别</view>
</view>
</view> </view>
</template> </template>
@@ -40,7 +38,8 @@
export default { export default {
data() { data() {
return { return {
inviteData: {} //二维码信息 inviteData: {} ,//二维码信息
loaded : false
}; };
}, },
onLoad() { onLoad() {
@@ -52,6 +51,7 @@
inviteInfo(){ inviteInfo(){
userInvite().then(res => { userInvite().then(res => {
this.inviteData = res this.inviteData = res
this.loaded = true
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
icon: 'none', icon: 'none',
@@ -62,7 +62,6 @@
// 复制邀请码 // 复制邀请码
copyCenter(e) { copyCenter(e) {
console.log('ddd')
let copyNo = e let copyNo = e
uni.vibrateShort({ uni.vibrateShort({
success: () => { 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> </script>
<style lang="scss"> <style lang="scss" scoped>
.codeBack {
// 背景色 width: 100vw;
.background{ height: 100vh;
min-height: 100vh;
background: linear-gradient(to top, #7c52fc, #976dff);
}
// 背景
.codeImg {
width: 100%;
height: 100%;
}
// 内容
.codeContent {
position: absolute;
left: 0;
top: 0; top: 0;
left: 0;
position: relative;
}
.codeCont {
position: absolute;
width: 100%; width: 100%;
padding: 120rpx 80rpx 40rpx; bottom: 100rpx;
left: 0;
padding: 40rpx;
box-sizing: border-box; box-sizing: border-box;
text-align: center; z-index: 9;
.titleImg { .codeCont-avatar {
max-width: 100%; width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 6rpx solid #FFFFFF;
} }
.codeBack { .codeCont-text {
background-color: $uni-bg-color; position: absolute;
border-radius: $uni-border-radius-lg; width: 100%;
position: relative; left: 0;
margin: $margin * 2 0 $margin * 2.5; top: 0;
overflow: hidden; padding: 50rpx 40rpx 0 180rpx;
&::after, &::before { box-sizing: border-box;
position: absolute; .codeCont-name {
background-color: #8c62fe; color: #FFFFFF;
content: ''; font-size: 34rpx;
top: 278px; margin-bottom: 10rpx;
width: 40rpx;
height: 40rpx;
border-radius: $uni-border-radius-circle;
} }
&::after { .codeCont-number {
left: -20rpx; font-size: 28rpx;
} display: flex;
&::before { color: #c4a1cb;
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;
}
} }
} }
} }
// 分享途径 .codeImg {
.codeShare { position: absolute;
position: fixed; bottom: 120rpx;
left: 0; right: 40rpx;
bottom: 0;
z-index: 9; z-index: 9;
background-color: $uni-bg-color; width: 160rpx;
box-sizing: border-box; height: 160rpx;
height: 200rpx; color: #FFFFFF;
width: 100%; text-align: center;
display: flex; font-size: 24rpx;
justify-items: center; opacity: .9;
align-items:center; .codeImg-code {
.codeShare-label { width: 100%;
width: 50%; margin-bottom: 10rpx;
text-align: center; }
font-size: $uni-font-size-sm; }
color: $text-gray; .codDate {
image { position: absolute;
width: $uni-img-size-lg - 10; top: 30rpx;
height: $uni-img-size-lg - 10; right: 70rpx;
display: flex; z-index: 9;
margin: 0 auto $margin - 10; 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> </style>

BIN
static/user/01.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 268 KiB