websoft-uniapp仓库模板
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

110 lines
2.3 KiB

<template>
<view class="page">
<uni-card :border="false" class="qrcode">
<image src="https://file.jimeigroup.cn/reg-code3/QYPEwCcU.png" mode="widthFix"></image>
</uni-card>
<view class="user-info">
<view class="nickname">{{ userInfo.nickname }}</view>
<view class="desc">APP扫一扫立即关注我</view>
</view>
<uni-row class="qrcode-row" :width="nvueWidth">
<uni-col :span="8">
<view class="qrcode-row-col dark">
<view class="icon"><uni-icons type="scan" :size="30"></uni-icons></view>
<text>扫一扫</text>
</view>
</uni-col>
<uni-col :span="8">
<view class="qrcode-row-col dark">
<view class="icon"><uni-icons type="color" :size="30"></uni-icons></view>
<text>换个样式</text>
</view>
</uni-col>
<uni-col :span="8">
<view class="qrcode-row-col dark">
<view class="icon"><uni-icons custom-prefix="iconfont" type="icon-xiazai" :size="30"></uni-icons></view>
<text>保存</text>
</view>
</uni-col>
</uni-row>
</view>
</template>
<script>
import {
useUserStore
} from '@/store/modules/user';
const userStore = useUserStore();
export default {
data() {
return {
isLogin: false,
userInfo: {}
}
},
onLoad(){
this.reload()
},
methods: {
async reload(e) {
// 当前登录用户信息
const userInfo = await userStore.fetchUserInfo();
if (Object.keys(userInfo).length > 0) {
this.isLogin = true
this.userInfo = userInfo
}else{
this.isLogin = false
this.userInfo = {}
}
}
}
}
</script>
<style lang="scss" scoped>
.page{
height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.qrcode {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.user-info{
display: flex;
flex-direction: column;
align-items: center;
.nickname{
font-size: 48rpx;
padding: 12rpx 0;
}
.desc{
color: $uni-text-color-placeholder;
}
}
.qrcode-row-col {
margin: 100rpx auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text{
line-height: 2rem;
}
.icon{
width: 120rpx;
height: 120rpx;
border-radius: 120rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: $uni-text-color-inverse;
}
}
</style>