1064 lines
36 KiB
Vue
1064 lines
36 KiB
Vue
<template>
|
||
<view>
|
||
<view class="user-info">
|
||
<block v-if="isAuth">
|
||
<view class="user-info-left">
|
||
<u-avatar shape="square" class="active" size="120rpx"
|
||
:default-url="require('@/static/imgs/default-active.png')" :src="avatar" mode="aspectFill"
|
||
@click="onNav('UserInfo')"></u-avatar>
|
||
<view class="nickname nowrap" @click="onNav('UserInfo')">{{nickname}}</view>
|
||
<view class="tags">
|
||
<view class="tags-item" v-if="certification">
|
||
<image class="tags-icon" src="@/static/icons/Identity_icon.png" mode="widthFix"></image>实名认证
|
||
</view>
|
||
<block v-if="identity.id != '5'">
|
||
<view class="tags-item" >{{identity.name}}</view>
|
||
<view class="tags-item" v-if="team_name!=''">隶属：{{team_name}}</view>
|
||
</block>
|
||
<block v-if="identity.id == '5'">
|
||
<view class="tags-item" v-if="team_name!=''">{{team_name}}</view>
|
||
</block>
|
||
</view>
|
||
<view class="state">
|
||
<view class="state-tag">
|
||
<u-icon class="state-icon" size="28rpx" color="#555" name="plus"></u-icon>状态
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="user-info-right" @click="onUserCode">
|
||
<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="user-info-left">
|
||
<u-avatar shape="square" class="active" size="120rpx"
|
||
:default-url="require('@/static/imgs/default-active.png')" mode="aspectFill"
|
||
@click="onNav('UserInfo')"></u-avatar>
|
||
<view class="nickname nowrap" @click="onNav('UserInfo')">登录</view>
|
||
<view class="tags">暂未登录</view>
|
||
</view>
|
||
<view class="user-info-right">
|
||
<image class="user-qrcode" src="@/static/icons/qrcode.png" mode="widthFix"></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="border-solid-empty"></view>
|
||
<view class="nav-flex" @click="onNav('AccountIntegral')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_00.png"></image>火力值
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="onNav('AccountCash')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_01.png"></image>业绩账户
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="border-solid-empty"></view>
|
||
<view class="nav-flex" @click="onNav('UserTeam')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_02.png"></image>我的客户
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="yungying('team',team_id)" v-if="team_status != 0">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/yunying.png"></image> 法务运营中心
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
|
||
<view class="nav-flex" @click="yungying('region',region_id)" v-if="region_status != 0">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/yunying.png"></image> 大区运营中心
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="onNav('AccountBonus')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_04.png"></image>奖金账户
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="onNav('UserCertification')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_03.png"></image>实名认证
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="onParent">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_07.png"></image>推荐人
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<view class="nav-flex" @click="onNav('WeChat')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_06.png"></image>关注公众号
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<!-- <view class="nav-flex" @click="onReckoner">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_09.png"></image>盘债计算器
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view> -->
|
||
<view class="border-solid-empty"></view>
|
||
<view class="nav-flex" @click="updateApp">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_08.png"></image>版本检测
|
||
</view>
|
||
<view class="nav-text">
|
||
<text>V{{version}}</text>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="nav-flex" @click="onNav('UserSet')">
|
||
<view class="nav-icon">
|
||
<image class="nav-icon-src" src="@/static/icons/user_nav_05.png"></image>设置
|
||
</view>
|
||
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
|
||
</view>
|
||
<!-- 绑定分享关系 -->
|
||
<u-modal :show="showBind" confirmColor="#446EFE" :showCancelButton="true"
|
||
:confirmText="isInvitation ? '校验邀请码': '绑定关系'" @cancel="()=> {
|
||
this.showBind = false
|
||
this.isInvitation = true
|
||
this.invitation = ''
|
||
}" @confirm="onBind">
|
||
<slot>
|
||
<view class="bind-view" v-if="isInvitation">
|
||
<view class="bind-title">绑定推荐人</view>
|
||
<view class="bind-subtitle">选择通过那种方式绑定推荐人</view>
|
||
<view class="bind-type">
|
||
<u-radio-group class="bind-type-radios" v-model="bindTypeVal" placement="row">
|
||
<u-radio :customStyle="{marginLeft: '4px', marginRight: '4px'}"
|
||
v-for="(item, index) in bindTypeArr" :key="index" :label="item.name"
|
||
:name="item.value" />
|
||
</u-radio-group>
|
||
</view>
|
||
<view class="bind-input">
|
||
<input type="text" v-model="invitation"
|
||
:placeholder="bindTypeVal == 'mobile'? '输入推荐人手机号' : '输入推荐人邀请码'">
|
||
</view>
|
||
</view>
|
||
<view class="bind-user" v-else>
|
||
<view class="bind-title">推荐人</view>
|
||
<view class="bind-subtitle">请确认绑定推荐人关系用户信息</view>
|
||
<view class="bind-acitve">
|
||
<image :src="invitationUser.avatar || require('@/static/imgs/default-active.png')"
|
||
mode="aspectFill"></image>
|
||
</view>
|
||
<view class="bind-nickname">{{invitationUser.nickname}}</view>
|
||
<view class="bind-username">{{invitationUser.username}}</view>
|
||
</view>
|
||
</slot>
|
||
</u-modal>
|
||
|
||
<!-- 弹窗展示输入运营中心姓名 -->
|
||
<u-popup :show="yunyingShow" mode="center" @close="yunyingShow = false" :round="22">
|
||
<view class="yunying">
|
||
<view class="yunying_title">
|
||
<view class="title">{{team_status == '1'?'完善法务运营中心':'完善大区运营中心'}} </view>
|
||
<image class="yunying_bg" src="/static/icons/yunying_bg.png" mode="widthFix" />
|
||
</view>
|
||
<view class="rz-item">
|
||
<input type="text" maxlength="4" v-model='yunying_name' placeholder-class="inputP" placeholder="请输入名称" />
|
||
<view class="btn">{{team_status == '1'?'法务运营中心':'大区运营中心'}}</view>
|
||
</view>
|
||
<view class="button" @click="sureYunYing">确认名称</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 盘债计算机二维码 -->
|
||
<!-- <u-popup :show="reckonerShow" mode="center" bgColor="transparent">
|
||
<view class="reckoner-lay">
|
||
<view class="reckoner-content">
|
||
<image class="reckoner-code" :src="reckonerQrcode" mode="widthFix"></image>
|
||
<view class="reckoner-url" @click="onCopyUrl(reckonerURL)">邀请码：{{reckonerInvite}}<text>复制</text></view>
|
||
<view class="reckoner-btn" @click="onIsSeve">保存海报</view>
|
||
<image class="reckoner-back" src="@/static/imgs/reckoner-back.png" mode="aspectFill"></image>
|
||
</view>
|
||
<u-icon name="close-circle-fill" size="42" color="#fff" @click="reckonerShow = false"></u-icon>
|
||
</view>
|
||
</u-popup> -->
|
||
<!-- 海报 -->
|
||
<!-- <l-painter class="l-painter" :board="reckonerPoster" isCanvasToTempFilePath @success="qrcodePath"/> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { info, relationsVerify, relationsBind, submitTeamName, debtUrl } from '@/apis/interfaces/user.js'
|
||
import { getVersions } from '@/apis/interfaces/versions'
|
||
import { request } from '../../apis';
|
||
import permision from "@/js_sdk/wa-permission/permission.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
version : plus.runtime.version,
|
||
isAuth : false,
|
||
nickname : '',
|
||
identity : '',
|
||
team_name :'',
|
||
avatar : '',
|
||
certification : '',
|
||
// 绑定关系
|
||
bindTypeArr : [{
|
||
name: '手机号',
|
||
value: 'mobile'
|
||
},
|
||
{
|
||
name: '邀请码',
|
||
value: 'verify'
|
||
},
|
||
],
|
||
bindTypeVal : 'mobile',
|
||
showBind : false,
|
||
isInvitation : true,
|
||
parent : '',
|
||
invitationUser : {
|
||
avatar : '',
|
||
nickname : '',
|
||
username : ''
|
||
},
|
||
invitation : '',
|
||
yunyingShow :false, // 运营中心是否展示
|
||
yunying_name :'', // 运营名称
|
||
team_status :'', // 状态 0 不展示运营中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
|
||
team_id :'',
|
||
region_status :'', // 状态 0 不展示 大区中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
|
||
region_id :'',
|
||
// 计算器
|
||
reckonerShow : false,
|
||
reckonerURL : '',
|
||
reckonerQrcode : '',
|
||
reckonerInvite : '',
|
||
reckonerPoster : {}
|
||
};
|
||
},
|
||
onShow() {
|
||
this.isAuth = this.$store.getters.getToken != ''
|
||
if (this.$store.getters.getToken != '') this.getUserInfo()
|
||
},
|
||
methods: {
|
||
// 检查保存海报权限
|
||
async onIsSeve(){
|
||
let result = await permision.requestAndroidPermission('android.permission.READ_EXTERNAL_STORAGE')
|
||
// 检查用户权限
|
||
if(result == 1){
|
||
this.onDowQRcode()
|
||
return
|
||
}
|
||
// 引导用户设置联系电话
|
||
uni.showModal({
|
||
title : '提示',
|
||
content : '请授权应用获得[写入相册]权限',
|
||
showCancel : false,
|
||
confirmText : '设置',
|
||
success : modalRes => {
|
||
permision.gotoAppPermissionSetting()
|
||
}
|
||
})
|
||
},
|
||
// 保存盘债计算器海报
|
||
onDowQRcode(){
|
||
uni.showLoading({
|
||
title: '获取海报中...',
|
||
mask : true
|
||
})
|
||
this.reckonerPoster = {
|
||
css: {
|
||
width: '600rpx',
|
||
borderRadius: '20rpx'
|
||
},
|
||
views: [
|
||
{
|
||
css: {
|
||
width: '600rpx',
|
||
height: '840rpx',
|
||
objectFit: 'cover',
|
||
borderRadius: '20rpx'
|
||
},
|
||
src : require('@/static/imgs/reckoner-back.png'),
|
||
type: "image"
|
||
},
|
||
{
|
||
css: {
|
||
width: '440rpx',
|
||
height: '440rpx',
|
||
position: 'absolute',
|
||
left: '80rpx',
|
||
top: '120rpx',
|
||
borderRadius: '20rpx'
|
||
},
|
||
src : this.reckonerQrcode,
|
||
type: "image"
|
||
}, {
|
||
type: 'text',
|
||
text: '邀请码：' + this.reckonerInvite,
|
||
css: {
|
||
textAlign: 'center',
|
||
color: '#fff',
|
||
position: 'absolute',
|
||
left: '30rpx',
|
||
top: '600rpx',
|
||
width: '540rpx',
|
||
lineHeight: '50rpx',
|
||
fontSize: '16px',
|
||
fontWeight: 'bold'
|
||
}
|
||
}, {
|
||
type: 'text',
|
||
text: '使用微信扫一扫，打开盘债计算器',
|
||
css: {
|
||
textAlign: 'center',
|
||
color: '#fff',
|
||
position: 'absolute',
|
||
left: '30rpx',
|
||
top: '670rpx',
|
||
width: '540rpx',
|
||
lineHeight: '50rpx',
|
||
fontSize: '14px'
|
||
}
|
||
},
|
||
]
|
||
}
|
||
},
|
||
// 生成海报地址
|
||
qrcodePath(path){
|
||
uni.hideLoading()
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: path,
|
||
success :() => {
|
||
uni.showToast({
|
||
title: '海报已保存，赶快去分享吧',
|
||
icon : 'none'
|
||
})
|
||
},
|
||
fail : () => {
|
||
uni.showToast({
|
||
title: '保存失败，请检查系统权限',
|
||
icon : 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
// 复制用户地址
|
||
onCopyUrl(url){
|
||
uni.setClipboardData({
|
||
data : url,
|
||
success : res => {
|
||
uni.showToast({
|
||
title: '地址已复制'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 盘债计算器
|
||
onReckoner() {
|
||
if(!this.isAuth){
|
||
this.$Router.push({
|
||
name: 'Auth'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '获取邀请码',
|
||
mask : true
|
||
})
|
||
debtUrl().then(res => {
|
||
uni.hideLoading()
|
||
let { url, qrcode, invite } = res;
|
||
this.reckonerURL = url
|
||
this.reckonerQrcode = qrcode
|
||
this.reckonerInvite = invite
|
||
this.reckonerShow = true
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 获取用户信息
|
||
getUserInfo() {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
info().then(res => {
|
||
let {
|
||
nickname,
|
||
identity,
|
||
avatar,
|
||
certification,
|
||
parent,team_name,teams
|
||
} = res
|
||
this.nickname = nickname
|
||
this.identity = identity
|
||
this.avatar = avatar
|
||
this.certification = certification
|
||
this.parent = parent
|
||
this.team_name = team_name
|
||
uni.hideLoading()
|
||
// team_status:'', // 状态 0 不展示运营中心 1可以申请但是没有完善，2申请完，审核中，3已通过，已修改
|
||
this.team_status = teams.center.status // 运营中心状态
|
||
this.team_id = teams.center.identity_id // 运营中心
|
||
this.region_status = teams.region.status // 大区中心状态
|
||
this.region_id = teams.region.identity_id // 大区中心id
|
||
if(teams.center.status == 1){
|
||
this.yunyingShow = true
|
||
return
|
||
}
|
||
if(teams.region.status == 1){
|
||
this.yunyingShow = true
|
||
return
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
yungying(type,id){
|
||
if(type === 'team'){
|
||
if(this.team_status == 2){
|
||
uni.showToast({
|
||
title:'法务运营中心名称审核中',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:3000,
|
||
})
|
||
return
|
||
}
|
||
if(this.team_status == 1){
|
||
this.yunyingShow = true
|
||
return
|
||
}
|
||
}
|
||
if(type == 'region'){
|
||
if(this.region_status == 2){
|
||
uni.showToast({
|
||
title:'大区运营中心名称审核中',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:3000,
|
||
})
|
||
return
|
||
}
|
||
if(this.region_status == 1){
|
||
this.yunyingShow = true
|
||
return
|
||
}
|
||
}
|
||
uni.navigateTo({
|
||
url:'/pages/account/yunying?id='+id+'&teamtype='+type
|
||
})
|
||
},
|
||
// 导航
|
||
onNav(name) {
|
||
this.$Router.push({
|
||
name
|
||
})
|
||
},
|
||
// 推荐关系
|
||
onParent() {
|
||
if(!this.isAuth){
|
||
this.$Router.push({
|
||
name: 'Auth'
|
||
})
|
||
return
|
||
}
|
||
if (this.parent == '') {
|
||
this.showBind = true
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '我的推荐人',
|
||
content: this.parent.nickname,
|
||
confirmText: '关闭',
|
||
cancelText: '联系TA',
|
||
success: modalRes => {
|
||
if (modalRes.cancel) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.parent.username
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 绑定邀请码
|
||
onBind() {
|
||
// 检验邀请码
|
||
if (this.isInvitation) {
|
||
if (this.invitation === '') {
|
||
uni.showToast({
|
||
title: '请输入邀请码',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
relationsVerify(this.invitation, this.bindTypeVal).then(res => {
|
||
this.invitationUser = res
|
||
this.isInvitation = false
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
return
|
||
}
|
||
// 绑定关系
|
||
relationsBind(this.invitation, this.bindTypeVal).then(res => {
|
||
this.showBind = false
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '关系绑定成功',
|
||
showCancel: false,
|
||
success: res => {
|
||
this.getUserInfo()
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 分享码
|
||
onUserCode() {
|
||
if (this.identity.order > 1) {
|
||
uni.showActionSheet({
|
||
itemList: ['客户邀请码', '业务员邀请码'],
|
||
success: res => {
|
||
switch (res.tapIndex) {
|
||
case 0:
|
||
this.$Router.push({
|
||
name: 'UserCode'
|
||
})
|
||
break;
|
||
case 1:
|
||
this.$Router.push({
|
||
name: 'SalesmanCode'
|
||
})
|
||
break;
|
||
}
|
||
}
|
||
})
|
||
//
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '您当前非业务员身份无法分享',
|
||
cancelColor: '确定',
|
||
cancelColor: '#555',
|
||
confirmText: '立即开通',
|
||
confirmColor: '#446EFE',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$Router.pushTab({
|
||
name: 'Work'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 运营中心确认按钮处理
|
||
sureYunYing(){
|
||
if(this.yunying_name == '' || this.yunying_name.length == 0){
|
||
uni.showToast({
|
||
title:this.team_status == 1?'请完善法务运营中心名称':'请完善大区运营中心名称',
|
||
icon:'none',
|
||
mask:true,
|
||
duration:2000,
|
||
})
|
||
return
|
||
}
|
||
let pararms = {
|
||
name:this.yunying_name,
|
||
identity_id:this.team_status ==1 ? this.team_id:this.region_id
|
||
}
|
||
submitTeamName(pararms).then(res => {
|
||
this.showBind = false
|
||
uni.showModal({
|
||
title: '微信提示',
|
||
content: this.team_status ==1?'法务运营中心姓名完善完成，请耐心等待审核！':'大区运营中心姓名完善完成，请耐心等待审核！',
|
||
showCancel: false,
|
||
success: res => {
|
||
this.getUserInfo()
|
||
this.yunyingShow = false
|
||
}
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 检查版本更新
|
||
updateApp() {
|
||
uni.showLoading({
|
||
title: '检查更新'
|
||
})
|
||
//#ifdef APP-PLUS
|
||
// 获取系统版本号
|
||
getVersions({
|
||
platform: plus.os.name,
|
||
version : plus.runtime.version,
|
||
channel : 'app'
|
||
}).then(res => {
|
||
uni.hideLoading()
|
||
if (res.update) {
|
||
uni.showModal({
|
||
title: "更新提示",
|
||
content: res.note || '版本更新信息',
|
||
confirmText: "更新",
|
||
success: modalRes => {
|
||
if (modalRes.confirm) {
|
||
if (plus.os.name == "Android") {
|
||
uni.showToast({
|
||
title: '新版本下载中，将在下载完成后自动为您安装更新包',
|
||
icon: 'none'
|
||
})
|
||
uni.downloadFile({
|
||
url: res.info.download,
|
||
success: apkPick => {
|
||
plus.runtime.install(apkPick
|
||
.tempFilePath, '',
|
||
installRES => {
|
||
// 安装完成用于提示新版本引导，暂时无用
|
||
}, installERR => {
|
||
// 安装失败
|
||
})
|
||
},
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: '安装包下载失败，请检查您的网络或稍后重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无ios版本这块留着后续用',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "当前已是最新版本",
|
||
showCancel: false,
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
//#endif
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 计算器弹出层
|
||
.l-painter{ position: fixed; top: -100%; left: -100%; }
|
||
.reckoner-lay{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.reckoner-content{
|
||
border-radius: 20rpx;
|
||
padding: 70rpx 50rpx;
|
||
width: 75vw;
|
||
box-sizing: border-box;
|
||
margin-bottom: 30rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.reckoner-back{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
}
|
||
.reckoner-code{
|
||
width: 45vw;
|
||
height: 45vw;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.reckoner-btn{
|
||
margin-top: 50rpx;
|
||
background: white;
|
||
color: #051437;
|
||
width: 55vw;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 34rpx;
|
||
}
|
||
.reckoner-url{
|
||
color: white;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
text{ font-weight: bold; margin-left: 15rpx; }
|
||
}
|
||
}
|
||
}
|
||
// close-circle-fill
|
||
|
||
// 导航栏
|
||
.nav-flex {
|
||
height: 120rpx;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 34rpx;
|
||
|
||
.nav-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.nav-icon-src {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
vertical-align: middle;
|
||
margin-right: $margin;
|
||
margin-top: 5rpx;
|
||
}
|
||
}
|
||
.nav-text{
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
color: #999;
|
||
font-size: 30rpx;
|
||
text{ padding-right: 10rpx; }
|
||
}
|
||
}
|
||
|
||
// 用户信息
|
||
.user-info {
|
||
padding: 50rpx $padding;
|
||
display: flex;
|
||
|
||
&-left {
|
||
padding-left: 140rpx;
|
||
position: relative;
|
||
width: calc(100% - 150rpx);
|
||
|
||
.active {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
border-radius: $radius;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.nickname {
|
||
font-size: 42rpx;
|
||
line-height: 50rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tags {
|
||
padding-top: 20rpx;
|
||
|
||
.tags-item {
|
||
@extend .border;
|
||
display: inline-block;
|
||
border-radius: 20rpx;
|
||
padding: 0 15rpx;
|
||
font-size: 24rpx;
|
||
line-height: 40rpx;
|
||
height: 40rpx;
|
||
color: #555;
|
||
font-weight: 400;
|
||
margin-right: $margin - 10;
|
||
|
||
&::after{
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
&:first-child ,&:nth-child(3) {
|
||
margin-left: 0;
|
||
}
|
||
&:nth-child(3){
|
||
margin-top: 10rpx;
|
||
// background: #4674DA;
|
||
// color: #fff;
|
||
}
|
||
|
||
.tags-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
vertical-align: middle;
|
||
margin-right: 5rpx;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.state {
|
||
padding-top: 20rpx;
|
||
|
||
.state-tag {
|
||
@extend .border;
|
||
display: inline-block;
|
||
border-radius: 30rpx;
|
||
padding: 0 20rpx;
|
||
font-size: 30rpx;
|
||
line-height: 50rpx;
|
||
height: 50rpx;
|
||
color: #555;
|
||
font-weight: 400;
|
||
|
||
&::after {
|
||
border-radius: 50rpx;
|
||
}
|
||
|
||
.state-icon {
|
||
display: inline-block;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&-right {
|
||
width: 150rpx;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
position: relative;
|
||
text-align: center;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 1rpx;
|
||
height: 100%;
|
||
background-image: linear-gradient(90deg, $border-color 50%, transparent 50%);
|
||
}
|
||
|
||
.user-qrcode {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 邀请码
|
||
.bind-view {
|
||
padding: 15rpx 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.bind-title {
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bind-type {
|
||
margin-top: 30rpx;
|
||
|
||
.bind-type-radios {
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.bind-subtitle {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
padding-top: 15rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bind-input {
|
||
padding-top: 30rpx;
|
||
|
||
input {
|
||
background: #f8f8f8;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
padding: 0 30rpx;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 确认绑定用户关系
|
||
.bind-user {
|
||
padding: 15rpx 30rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
|
||
.bind-title {
|
||
text-align: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bind-subtitle {
|
||
line-height: 40rpx;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
padding-top: 15rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bind-acitve {
|
||
text-align: center;
|
||
padding-top: 30rpx;
|
||
|
||
image {
|
||
width: 108rpx;
|
||
height: 108rpx;
|
||
background: #f8f8f8;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.bind-nickname {
|
||
text-align: center;
|
||
font-size: 32rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
line-height: 40rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.bind-username {
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: gray;
|
||
}
|
||
}
|
||
|
||
|
||
.yunying {
|
||
width: 606rpx;
|
||
|
||
.yunying_title{
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.title{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
z-index: 10;
|
||
|
||
color: #fff;
|
||
}
|
||
.yunying_bg{
|
||
width: 100%;
|
||
}
|
||
}
|
||
.button {
|
||
width: 540rpx;
|
||
height: 90rpx;
|
||
background: #4674DA;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
color: #FFFFFF;
|
||
margin: $margin 33rpx 40rpx 33rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.title {
|
||
padding: $padding;
|
||
font-size: 36rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
text-align: center;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
}
|
||
|
||
.rz-item {
|
||
padding: $padding;
|
||
margin-top: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
font-size: 30rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #111111;
|
||
position: relative;
|
||
.title{
|
||
font-size: 30rpx;
|
||
}
|
||
input {
|
||
flex: 1;
|
||
background-color: #f9f9f9;
|
||
margin-left: $margin;
|
||
padding: 20rpx $padding;
|
||
border-radius: 10rpx;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.inputP {
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.btn {
|
||
height: 60rpx;
|
||
// background: #4674DA;
|
||
border-radius: 10rpx;
|
||
// font-size: 24rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
// color: #FFFFFF;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
padding: 0 20rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|