751 lines
17 KiB
Vue
Raw Normal View History

2025-05-22 16:24:05 +08:00
<template>
<view class="content">
<view class="tops">
<view class="infos">
<view class="account">
<image :src="avatarUrl ? avatarUrl : '/static/avatar.png'" mode="aspectFill" @click="handleToAvatar"
v-if="token != '' && token != null"></image>
<image src="/static/avatar.png" mode="aspectFill" @click="handleToAvatar" v-else></image>
<view class="names">
<view class="title-wrap">
<view class="name-wrap" v-if="wxStatus">
<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
color="#fff" @click="handleGotoLogin"></u--text>
<span style="margin-left: 16rpx;">
<u-icon name="/static/wechat_bind.png" size="22" color="#fff"
@click="handleUnbindWeChart"></u-icon>
</span>
</view>
<!-- #ifdef H5-->
<view class="name-wrap" v-if="!wxStatus">
<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
v-if="token != '' && token != null" color="#fff" @click="gotoAccount()"></u--text>
<u--text size=16 bold :text="$tt('user.login')" v-else color="#fff"
@click="handleGotoLogin"></u--text>
</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS || MP-WEIXIN-->
<view class="name-wrap" v-if="!wxStatus">
<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
color="#fff" @click="gotoAccount()" v-if="token != '' && token != null"></u--text>
<u--text size=16 bold :text="$tt('user.login')" v-else color="#fff"
@click="handleGotoLogin"></u--text>
<span style="margin-left: 16rpx;">
<u-icon name="/static/wechat_unbind.png" size="22" color="#fff"
@click="handleBindWeChart" v-if="token != '' && token != null"></u-icon>
</span>
</view>
<!-- #endif -->
</view>
</view>
</view>
<view class="users">
<view class="u-item" @click="gotoScene()">
<view class="num">
<u-icon name="/static/scene(1).png" size="25" color="#fff" labelPos="bottom" labelSize="11"
space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
</view>
<view class="u-tit">{{$tt('user.addScene')}}</view>
</view>
<view class="u-item" @click="gotoGroup()">
<view class="num">
<u-icon name="/static/group.png" size="25" color="#fff" labelPos="bottom" labelSize="11"
space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
</view>
<view class="u-tit">{{$tt('user.groupManagement')}}</view>
</view>
<view class="u-item" @click="gotoEmulator()">
<view class="num">
<u-icon name="/static/message.png" size="25" color="#fff" labelPos="bottom" labelSize="11"
space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
</view>
<view class="u-tit">{{$tt('user.platformMsg')}}</view>
</view>
</view>
</view>
<view class="bg">
<image src="/static/bg.png" mode="aspectFill"></image>
</view>
</view>
<view class="main">
<view class="list">
<view class="group">
<!-- 平台消息 -->
<view class="item" @click="gotoMessageList()">
<view class="left">
<u-icon class="iconfont" name="chat-fill" size="10" color="#fff"
customStyle=" border-radius:50%; background: linear-gradient(45deg, #00FFCC,#33CCFF, #6699FF);padding:6rpx;"></u-icon>
<text class="text">{{$tt('user.platformMsg')}}</text>
</view>
<view class="right">
<u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
</view>
</view>
<!-- 多语言 -->
<view class="item" @click="gotoLanguage()">
<view class="left">
<u-icon class="iconfont" name="/static/language.png" size="10" color="#fff"
customStyle=" border-radius:50%; background: linear-gradient(45deg, #6CB4EE,#7FFFD4, #40E0D0);padding:6rpx;"></u-icon>
<text class="text">{{$tt('user.language')}}</text>
</view>
<view class="right">
<u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
</view>
</view>
<!-- 密码修改 -->
<view class="item" @click="gotoResetPsd()" v-if="token != '' && token != null">
<view class="left">
<u-icon class="iconfont" name="lock-fill" size="10" color="#fff"
customStyle=" border-radius:50%; background: linear-gradient(45deg, #87CEEB,#00FA9A,#48D1CC );padding:6rpx;"></u-icon>
<text class="text">{{$tt('user.updatePassword')}}</text>
</view>
<view class="right"><u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
</view>
</view>
</view>
<view class="group" v-if="token != '' && token != null">
<view class="logout" @click="handleExit">
<view class="left">
<text class="text">{{$tt('user.exitAccount')}}</text>
</view>
</view>
<view class="logout" @click="handleUnsubscribe()">
<view class="left">
<text class="text">{{$tt('user.signOut')}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="other-wrap">
<!-- 退出系统提示框 -->
<u-modal :show="show" :title="$tt('user.confirmExit')" :showCancelButton="true" @cancel="cancelExit"
@confirm="confirmExit"></u-modal>
<!-- 扫码模态框 -->
<u-modal :show="modal.show" :content="modal.content" @confirm="confirm" @cancel="cancel"
:showConfirmButton="modal.showConfirmButton" showCancelButton></u-modal>
<!-- 注销账号提示 -->
<u-modal :show="isUnsubscribe" :title="$tt('user.confirmSignOut')" :content="$tt('user.signOutAlert')"
:cancelText="$tt('user.notWriteOff')" :confirmText="$tt('user.confirmWriteOff')"
:showCancelButton="true" confirmColor="#606266" cancelColor="#2979ff" @cancel="isUnsubscribe = false"
@confirm="confirmUnsubscribe"></u-modal>
<!-- 解除微信绑定提示框 -->
<u-modal :show="isBindWeChart" :title="$tt('user.confirmWxBind')" :content="$tt('user.wxBindAlertTitle')"
:cancelText="$tt('user.notBind')" :confirmText="$tt('user.confirmBind')" :showCancelButton="true"
@cancel="isBindWeChart = false" @confirm="confirmBindWeChart"></u-modal>
<!-- 提示登录 -->
<u-modal :show="showModel" :content="$tt('user.notice')" @confirm="confirmGotoLogin"
@cancel="() => showModel = false" showCancelButton></u-modal>
</view>
</view>
</template>
<script>
import projectConfig from '@/env.config.js';
import {
mapState,
mapMutations
} from 'vuex';
import {
logout,
secureBind,
wechatBind
} from '@/apis/modules/common';
import {
deviceRelateUser
} from '@/apis/modules/device';
export default {
components: {},
data() {
return {
avatarUrl: '', // 头像
// 扫码模态窗
modal: {
show: false,
showConfirmButton: false,
content: ''
},
showModel: false,
wxStatus: false,
scanJson: {}, // 扫码获取的Json
// 退出模态窗
show: false,
isTopShow: false, // 顶部弹出层
isUnsubscribe: false, // 是否注销账号
isBindWeChart: false, // 是否绑定微信
isVipModel: false, // 是否会员升级
token: '',
};
},
onShow() {
// this.getProfile();
//小程序tabBar导航国际化特殊性
// #ifdef MP-WEIXIN
uni.setTabBarItem({
index: 0,
text: this.$tt('navBar.home'),
})
uni.setTabBarItem({
index: 1,
text: this.$tt('navBar.scene'),
})
uni.setTabBarItem({
index: 2,
text: '告警',
})
uni.setTabBarItem({
index: 3,
text: this.$tt('navBar.news'),
})
uni.setTabBarItem({
index: 4,
text: this.$tt('navBar.user'),
})
//#endif
},
computed: {
...mapState(['isLoggedIn']) // 获取登录状态
},
onLoad() {
this.getToken();
if (this.token != '' && this.token != null) {
this.getProfile();
} else {}
},
methods: {
getToken() {
// 本地缓存获取token
this.token = uni.getStorageSync('token');
// vuex存储token
uni.$u.vuex('vuex_token', this.token);
},
...mapMutations(['setLoggedIn']),
// 退出系统
handleExit() {
this.show = true;
},
// 取消退出系统
cancelExit() {
this.show = false;
},
// 确认退出系统
confirmExit() {
logout().then(() => {
this.clearToken();
this.setLoggedIn(false);
// 跳转
uni.reLaunch({
url: '/pagesB/login/waitLogin'
});
});
},
//移动端微信解绑
handleAppSecureBind() {
uni.navigateTo({
url: '/pagesB/user/secureBind'
});
},
gotoAccount() {
uni.$u.route('/pagesB/user/account');
},
//跳转信息
gotoMessageList() {
if (this.token != '' && this.token != null) {
uni.navigateTo({
url: '/pagesB/list/user/message'
});
} else {
this.showModel = true;
}
},
gotoLanguage() {
//this.clearToken()
uni.navigateTo({
url: '/pagesB/language/index'
})
},
gotoEmulator() {
if (this.token != '' && this.token != null) {
uni.navigateTo({
url: '/pagesB/list/user/message'
});
} else {
this.showModel = true;
}
},
gotoScene() {
if (this.token != '' && this.token != null) {
uni.switchTab({
url: '/pages/tabBar/scene/index'
});
} else {
this.showModel = true;
}
},
//确定去登录
confirmGotoLogin() {
// this.clearToken();
uni.reLaunch({
url: '/pagesB/login/waitLogin'
});
this.showModel = false;
},
handleGotoLogin() {
this.showModel = true;
},
// 设备分组
gotoGroup() {
if (this.token != '' && this.token != null) {
uni.navigateTo({
url: '/pagesB/user/deviceGroup/index'
});
} else {
this.showModel = true;
}
},
// 清除token
clearToken() {
uni.setStorageSync('token', '');
},
getProfile() {
// 调用用户信息接口
this.$api.common.getProfile().then(res => {
//存储用户信息,TODO 需要调用一次,不然其他页面调用返回空
uni.$u.vuex('profile', res.data);
this.avatarUrl = this.profile.avatar && projectConfig.baseUrl + this.profile.avatar;
this.wxStatus = res.wxBind;
}).catch(err => {
this.$u.toast(err.msg);
});
},
// 注销账户
handleUnsubscribe() {
this.isUnsubscribe = true;
},
//跳转密码修改
gotoResetPsd() {
/*uni.navigateTo({
url:"/pagesB/user/resetPsd"
})*/
uni.$u.route('/pagesB/user/resetPsd');
},
openhpLink() {
uni.navigateTo({
url: '/pages/common/webview/index?url=http://www.hpiot.cn/'
});
},
gotoAbout() {
uni.navigateTo({
url: '/pagesB/user/about'
})
},
confirmUnsubscribe() {
logout().then(() => {
this.clearToken();
// 跳转
uni.reLaunch({
url: '/pages/login/index'
});
});
},
//跳转个人信息
handleToAvatar() {
if (this.token != '' && this.token != null) {
const source = {
album: '从手机相册选择',
camera: '拍照',
};
const success = ({
tempFilePaths: a,
tempFiles: b
}) => {
const image = a ? a[0] : b[0].path;
uni.$u.route('/pagesB/user/avatar', {
url: image
});
};
const _uploadImage = (type) => {
const sizeType = ['original', 'compressed'];
uni.chooseImage({
count: 1,
sizeType,
sourceType: [type],
success
});
}
const list = Object.entries(source);
// #ifdef H5
_uploadImage(list[0][0]);
return;
// #endif
uni.showActionSheet({
itemList: list.map(v => v[1]),
success: async ({
tapIndex: i
}) => {
// #ifdef APP-PLUS
const permissionID = list[i][0] === 'album' ? 'READ_EXTERNAL_STORAGE' : 'CAMERA';
let result = await this.$store.dispatch("permission/requestPermissions",
permissionID);
if (result !== 1) return;
// #endif
_uploadImage(list[i][0]);
}
});
} else {
this.showModel = true;
}
},
// 开通会员
handleVipUpgrade() {
this.isVipModel = true;
},
//独立组态
gotoScada() {
if (this.token != '' && this.token != null) {
uni.navigateTo({
url: '/pagesB/user/scada/indeScada'
});
} else {
this.showModel = true;
}
},
openappLink() {
uni.navigateTo({
url: '/pages/common/webview/index?url=https://gitee.com/beecue/fastbee-app/tree/master/app'
});
},
// 解绑微信
handleUnbindWeChart() {
uni.navigateTo({
url: '/pagesB/user/secureBind'
});
},
// 绑定微信
handleBindWeChart() {
this.isBindWeChart = true;
},
confirmBindWeChart() {
this.isBindWeChart = false;
let that = this;
uni.login({
provider: 'weixin',
success: function(res) {
if (res) {
console.log('用户授权成功');
// #ifdef APP-PLUS
const params = {
sourceClient: 'wechat_open_mobile',
openId: res.authResult.openid,
unionId: res.authResult.unionid,
}
// #endif
// #ifdef MP-WEIXIN
const params = {
code: res.code,
sourceClient: 'wechat_open_mini_program',
}
// #endif
wechatBind(params).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'none',
title: '绑定成功!',
});
that.getProfile();
} else {
uni.$u.toast(res.msg);
}
}).catch(err => {
console.log(err);
});
}
}
})
}
}
};
</script>
<style scoped lang="scss">
.content {
background-color: #f5f5f5;
height: 100vh;
}
.tops {
position: relative;
height: 450rpx;
background-color: #00aaff;
/* background: url("https://img1.baidu.com/it/u=3643237076,897388802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400") no-repeat; */
background-size: 100% 100%;
z-index: 1;
margin-bottom: 150rpx;
}
.setIcon {
position: absolute;
top: 50rpx;
right: 50rpx;
}
.main {
// width: 100%;
min-height: 200rpx;
background: #f5f5f5;
// border-radius: 30rpx;
// transform: translateY(-30rpx);
margin: 30rpx;
z-index: 0;
.list {
.group {
border-radius: 20rpx;
background-color: #fff;
padding: 15rpx 30rpx;
margin-bottom: 20rpx;
box-shadow: 5px 5px 5px 0px #eaeaea;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 0;
font-size: 30rpx;
color: #555;
border-bottom: 1rpx solid #f8f8f8;
.left {
display: flex;
align-items: center;
.iconfont {
font-size: 38rpx;
// margin-right: 12rpx;
}
.text {
margin-left: 12rpx;
}
}
.right {
.iconfont {
font-size: 26rpx;
}
}
}
.logout {
justify-content: space-between;
align-items: center;
padding: 15rpx 0;
font-size: 32rpx;
color: #555;
border-bottom: 1rpx solid #f8f8f8;
}
.logout:last-child {
border: none;
}
.item:last-child {
border: none;
}
}
.group:last-child {
border: none;
}
}
}
.logout {
text-align: center;
}
.tops .infos {
width: 92%;
height: 200rpx;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -25%);
text-align: center;
z-index: 1;
}
.infos image {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 4rpx solid #fff;
}
.infos .names {
display: flex;
text-align: center;
justify-content: center;
font-weight: 700;
margin: 20rpx 0 10rpx;
.name-wrap {
display: flex;
}
}
.infos .desc {
max-width: 62%;
font-size: 28rpx;
color: #ffffff;
margin: 10rpx auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.infos .t-list {
margin-top: 60rpx;
display: flex;
justify-content: space-around;
}
.t-item .tit {
font-size: 32rpx;
color: #333;
margin-bottom: 10rpx;
}
.t-item .vals {
font-size: 36rpx;
color: #333;
font-weight: 700;
margin-bottom: 10rpx;
}
.users {
margin-top: 30rpx;
padding: 30rpx;
box-sizing: border-box;
height: 200rpx;
width: 100%;
background-color: #fff;
box-shadow: 1px 10rpx 20rpx #ececec;
border-radius: 12rpx;
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
z-index: 3;
}
.u-top {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 30rpx;
}
.users .u-top image {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
margin-right: 20rpx;
}
.u-top .tit {
font-size: 30rpx;
font-weight: 700;
color: #333;
}
.u-item {
text-align: center;
}
.u-item .u-tit {
color: #757575;
font-size: 26rpx;
margin-top: 10rpx;
}
.u-item .num {
color: #000000;
font-size: 33rpx;
font-weight: 700;
}
.bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
image {
width: 100%;
height: 100%;
filter: blur(3px);
/*transform: scale(2); */
opacity: 0.6;
}
}
.borderless-button {
border: none !important;
background-color: transparent;
color: #007bff;
/* 设置文字颜色 */
}
::v-deep.uni-list-item__content-title[data-v-296a3d7e] {
font-size: 30rpx;
color: #333;
overflow: hidden;
font-weight: 500;
}
::v-deep .uni-list-item__container {
padding: 30rpx;
}
.other-wrap {
.popup-title {
margin: 20px 20px;
}
.btnclass {
margin: 0px 20px 20px 20px;
border-radius: 10px;
}
}
</style>