131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
|
<template>
|
|||
|
|
<view style="display: flex;height: 100vh;align-items: center;flex-direction: column;">
|
|||
|
|
<uni-nav-bar
|
|||
|
|
style="width: 100%;"
|
|||
|
|
statusBar
|
|||
|
|
left-icon="left"
|
|||
|
|
@clickLeft="goto(1)"
|
|||
|
|
right-icon="more-filled"
|
|||
|
|
@clickRight="scan"
|
|||
|
|
:border="false"
|
|||
|
|
backgroundColor="transparent"
|
|||
|
|
title=""
|
|||
|
|
>
|
|||
|
|
</uni-nav-bar>
|
|||
|
|
<view style="flex:1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
|||
|
|
<view class="info_card">
|
|||
|
|
<my-avatar :src="userInfo.faceURL" :desc="userInfo.nickname" size="64" />
|
|||
|
|
<view class="id_row">
|
|||
|
|
<text class="nickname">{{ userInfo.nickname }}</text>
|
|||
|
|
<view class="id_row_copy" @click="copy">
|
|||
|
|
<text class="id">{{ userInfo.userID }}</text>
|
|||
|
|
<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
|
|||
|
|
<view style="color: #b4b4b4;">扫一扫上面的二维码图案，加我为朋友</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="width: 80%;display: flex;align-items: center;justify-content: center;height: 20%;">
|
|||
|
|
<u-button type="default" plain :hairline="false" iconColor="#9aa2b2" @click="scan">扫一扫</u-button>
|
|||
|
|
<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">换个样式</u-button>
|
|||
|
|
<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">保存图片</u-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import MyAvatar from "@/components/MyAvatar/index.vue";
|
|||
|
|
import QRCode from "@/components/qrcode.js";
|
|||
|
|
import UserBase from '@/components/User.vue';
|
|||
|
|
import util from "@/util";
|
|||
|
|
export default {
|
|||
|
|
mixins:[UserBase],
|
|||
|
|
components: {
|
|||
|
|
MyAvatar,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
console.log(this.userInfo)
|
|||
|
|
this.createQrcode();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
...util,
|
|||
|
|
createQrcode() {
|
|||
|
|
const _this = this;
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
new QRCode({
|
|||
|
|
context: _this, // 上下文环境
|
|||
|
|
canvasId: 'qrcode_canvas', // canvas-id
|
|||
|
|
usingComponents: true, // 是否是自定义组件
|
|||
|
|
showLoading: false, // 是否显示loading
|
|||
|
|
loadingText: "", // loading文字
|
|||
|
|
text: "/pages/common/invite_register?code=", // 生成内容
|
|||
|
|
size: 320, // 二维码大小
|
|||
|
|
background: "#fff", // 背景色
|
|||
|
|
foreground: '#000000', // 前景色
|
|||
|
|
pdground: '#000000', // 定位角点颜色
|
|||
|
|
correctLevel: 3, // 容错级别
|
|||
|
|
image: "", // 二维码图标
|
|||
|
|
imageSize: 40, // 二维码图标大小
|
|||
|
|
cbResult: function(res) { // 生成二维码的回调
|
|||
|
|
//_this.qrcode_src = (res)
|
|||
|
|
//resolve(res);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.info_card {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 196rpx;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
background: #fff;
|
|||
|
|
margin: 0 auto 0 auto;
|
|||
|
|
padding: 0 36rpx;
|
|||
|
|
color: #0c1c33;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.id_row {
|
|||
|
|
@include vCenterBox();
|
|||
|
|
display: flex;
|
|||
|
|
//height: 46px;
|
|||
|
|
margin-left: 16rpx;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
|
|||
|
|
&_copy {
|
|||
|
|
@include vCenterBox();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nickname {
|
|||
|
|
@include nomalEllipsis();
|
|||
|
|
max-width: 400rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.id {
|
|||
|
|
color: #8e9ab0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 18px;
|
|||
|
|
height: 18px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|