cansnow
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> |