462 lines
11 KiB
Vue
462 lines
11 KiB
Vue
<template>
|
||
<view class="my-box">
|
||
<!-- 顶部用户信息区域 -->
|
||
<view class="user-info">
|
||
<view class="avatar-box">
|
||
<u-image v-if="userInfo.avatar" width="122rpx" height="122rpx" :src="userInfo.avatar" shape="circle"></u-image>
|
||
<u-image v-else width="122rpx" height="122rpx" src="http://static.drgyen.com/app/hc-app-power/images/my/avatar.png" shape="circle"></u-image>
|
||
</view>
|
||
<view class="info-content">
|
||
<view class="nickname">{{ userInfo.nickName }}</view>
|
||
<view class="user-id">手机号：{{ userInfo.phonenumber }}</view>
|
||
<view class="user-open-id">{{ openId }} <text class="iconfont icon-clipboard" @click="copyOpenID"></text> </view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能列表区域 -->
|
||
<view class="function-list">
|
||
<view class="list-item" @click="goRouterFn('/pages/my/passwordModify')">
|
||
<view class="item-left">
|
||
<u-icon name="lock" color="#666666" size="32"></u-icon>
|
||
<text class="item-title">修改密码</text>
|
||
</view>
|
||
<view class="item-right">
|
||
<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="list-item" @click="goRouterFn('/pages/test/payTest')">
|
||
<view class="item-left">
|
||
<u-icon name="rmb-circle" color="#666666" size="32"></u-icon>
|
||
<text class="item-title">支付测试</text>
|
||
</view>
|
||
<view class="item-right">
|
||
<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
|
||
</view>
|
||
</view> -->
|
||
<view class="list-item">
|
||
<view class="item-left">
|
||
<u-icon name="integral" color="#666666" size="32"></u-icon>
|
||
<text class="item-title">版本号</text>
|
||
</view>
|
||
<view class="item-right">
|
||
<text class="item-value">v1.0.0</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- 退出 -->
|
||
<view class="btn-box">
|
||
<u-button shape="circle" @click="outLoginFn" type="primary" >退出登录</u-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
avatar: '',
|
||
userInfo: {
|
||
avatar:""
|
||
},
|
||
tenantInfo: null,
|
||
version:'1.0.0',
|
||
menuList:[
|
||
{
|
||
name:'新报警提醒',
|
||
remark:'掌握动态',
|
||
icon:"dicon-icon_gaojingjilu",
|
||
url:"./my/newAlarmRemind",
|
||
background:"linear-gradient(0deg, #D94353, #FF887C);",
|
||
twoColor: "rgba(255,79,98,0.1);"
|
||
},
|
||
{
|
||
name: "维保记录",
|
||
remark: "数智化管理",
|
||
icon: "dicon-icon_weibao",
|
||
url: "./my/maintenanceRecord",
|
||
background: "linear-gradient(0deg, #005CAE, #008CFB);",
|
||
twoColor: "rgba(0,108,204,0.1);"
|
||
},
|
||
{
|
||
name: "工程服务",
|
||
remark: "一站式对接服务",
|
||
icon: "dicon-icon_gongcheng",
|
||
url: "./my/projectServe",
|
||
background: "linear-gradient(0deg, #008C18, #00C853);",
|
||
twoColor: "rgba(0,172,36,0.1);"
|
||
},
|
||
{
|
||
name: "联系我们",
|
||
remark: "战略合作",
|
||
icon: "dicon-xiaoxi",
|
||
url: "./my/onlineServe",
|
||
background: "linear-gradient(0deg, #4E00A1, #8A00E2);",
|
||
twoColor: "rgba(99,0,211,0.1);"
|
||
},
|
||
{
|
||
name: "密码修改",
|
||
remark: "安全保护",
|
||
icon: "dicon-mima1",
|
||
url: "./my/passwordModify",
|
||
background: "linear-gradient(0deg, #03648F, #04A4E6);",
|
||
twoColor: "rgba(4,123,179,0.1);"
|
||
},
|
||
{
|
||
name: "帮助中心",
|
||
remark: "快速找到解决方案",
|
||
icon: "dicon-bangzhu",
|
||
url: "./my/help",
|
||
// url: "/pages/my/helpCenter",
|
||
background: "linear-gradient(0deg, #D38A00, #FFB700);",
|
||
twoColor: "rgba(248,163,0,0.1);"
|
||
},
|
||
{
|
||
name: "关于平台",
|
||
remark: "一目了然",
|
||
icon: "dicon-icon_guanyu",
|
||
url: "./my/about",
|
||
background: "linear-gradient(0deg, #B22C9D, #FF6EC7);",
|
||
twoColor: "rgba(213,54,189,0.1);"
|
||
}
|
||
],
|
||
officialAccount: {
|
||
appid: '',
|
||
appsecret: '',
|
||
},
|
||
openId:''
|
||
}
|
||
},
|
||
onLoad() {
|
||
let appIdPublic = uni.getStorageSync('appIdPublic');
|
||
console.log("this.$store.state.app.appConfig.appIdPublic",this.$store.state.app.appConfig.appIdPublic)
|
||
this.officialAccount.appid = appIdPublic || '';
|
||
// #ifdef MP-WEIXIN
|
||
const accountInfo = wx.getAccountInfoSync();
|
||
if(accountInfo.miniProgram.envVersion=='release'){
|
||
this.version = accountInfo.miniProgram.version;
|
||
}
|
||
// #endif
|
||
this.getUserInfoFn();
|
||
|
||
|
||
},
|
||
onShow() {
|
||
// opneID获取
|
||
let res = uni.getStorageSync('openId');
|
||
if (res) {
|
||
this.openId = res;
|
||
} else {
|
||
// #ifdef H5
|
||
let code = this.getUrlCode('code')
|
||
if (code || this.code) {
|
||
this.code = code;
|
||
this.getOpenidAndUserinfo(code)
|
||
// // 清除URL中的code参数
|
||
// const url = window.location.href;
|
||
// const newUrl = url.split('?')[0]; // 去掉参数部分
|
||
// history.replaceState({}, '', newUrl+'');
|
||
} else {
|
||
this.getH5Code()
|
||
}
|
||
// #endif
|
||
}
|
||
},
|
||
methods: {
|
||
copyOpenID(){
|
||
uni.setClipboardData({
|
||
data: this.openId,
|
||
success: function () {
|
||
console.log('success');
|
||
}
|
||
});
|
||
},
|
||
isWechat() {
|
||
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
|
||
},
|
||
getH5Code() {
|
||
if (this.isWechat()) {
|
||
// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
|
||
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.officialAccount
|
||
.appid + '&redirect_uri=' + encodeURIComponent(window.location.href) +
|
||
'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
|
||
console.log("跳转授权页面",'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.officialAccount
|
||
.appid + '&redirect_uri=' + encodeURIComponent(window.location.href) +
|
||
'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect')
|
||
}
|
||
},
|
||
getUrlCode(name) {
|
||
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [,
|
||
''])[1].replace(/\+/g, '%20')) || null
|
||
},
|
||
getOpenidAndUserinfo(code) {
|
||
console.log("code换openid")
|
||
this.$api.orderApi.getWxOpenid({
|
||
code: code
|
||
}).then((res) => {
|
||
console.log("获取openid", res)
|
||
if (res.code == 200) {
|
||
if(res.data.openid){
|
||
this.openId = res.data.openid;
|
||
uni.setStorageSync('openId', res.data.openid)
|
||
this.clearUrlCode();
|
||
}else{
|
||
this.clearUrlCode();
|
||
this.getUrlCode();
|
||
}
|
||
// 1、调用后端获取支付参数
|
||
// 2、调起支付
|
||
}else{
|
||
|
||
}
|
||
}).catch(() => {
|
||
|
||
})
|
||
},
|
||
clearUrlCode(){
|
||
// 清除URL中的code参数
|
||
const url = window.location.href;
|
||
const newUrl = url.split('?')[0]; // 去掉参数部分
|
||
history.replaceState({}, '', newUrl+'/pages/order/detail?id='+this.orderId);
|
||
},
|
||
getUserInfoFn() {
|
||
// let userToken = uni.getStorageSync("userToken");
|
||
let userType = uni.getStorageSync("userType");
|
||
// let getUserInfoUrl = userType === "企业用户"?"/system/personal/profile":"/system/user/profile";
|
||
let getUserInfoUrl = "/system/user/getInfo";
|
||
|
||
this.$get(getUserInfoUrl).then((res) => {
|
||
console.log(res, "res");
|
||
if (!res.data) return;
|
||
this.userInfo = res.data.user;
|
||
this.tenantInfo = res.data.tenant;
|
||
uni.setStorageSync("tenantInfo", res.data.tenant)
|
||
uni.setStorageSync("userInfo", this.userInfo)
|
||
})
|
||
},
|
||
goRouterFn(url) {
|
||
console.log(url, "url");
|
||
uni.navigateTo({
|
||
url: url
|
||
})
|
||
},
|
||
getUrl(url) {
|
||
if (url && url.indexOf('http') > 0) {
|
||
return url;
|
||
} else {
|
||
return this.$config.baseUrl + url;
|
||
}
|
||
},
|
||
// 退出登录
|
||
outLoginFn(){
|
||
// uni.clearStorageSync();
|
||
uni.removeStorageSync('userToken');
|
||
uni.reLaunch({
|
||
url:"../auth/passwordLogin"
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
page {
|
||
height: 100%;
|
||
background-color: #F5F5F5;
|
||
}
|
||
.my-box {
|
||
width: 100%;
|
||
// padding: 10rpx 45rpx 0;
|
||
font-family: Source Han Sans CN;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.user-info {
|
||
padding: 40rpx 32rpx;
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar-box {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.info-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.nickname {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.user-id {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
}
|
||
.user-open-id{
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
display: flex;
|
||
align-items: center;
|
||
.iconfont{
|
||
padding: 10rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
.function-list {
|
||
margin-top: 20rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.list-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 32rpx;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
}
|
||
|
||
.list-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.item-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-title {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-left: 16rpx;
|
||
}
|
||
|
||
.item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.item-value {
|
||
font-size: 14px;
|
||
color: #999999;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
|
||
.header-box {
|
||
width: 660rpx;
|
||
height: 292rpx;
|
||
border-radius: 20px;
|
||
background: url("http://static.drgyen.com/app/hc-app-power/images/my/header-bg.jpg") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 27rpx;
|
||
padding-top: 20rpx;
|
||
.avatar-box {
|
||
margin-right: 26rpx;
|
||
}
|
||
.userinfo-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
.header-userinfo-name {
|
||
font-size: 28rpx;
|
||
}
|
||
.header-userinfo-company {
|
||
font-size: 24rpx;
|
||
padding-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
// 菜单
|
||
.menu-box{
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
.menu-item{
|
||
width: 320rpx;
|
||
height: 200rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx 20rpx 15rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
|
||
&:nth-child(2n-1) {
|
||
margin-right: 20rpx;
|
||
}
|
||
.home-menu-item-header {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.home-menu-item-name {
|
||
font-weight: 550;
|
||
font-size: 28rpx;
|
||
}
|
||
.home-menu-item-remark {
|
||
font-size: 20rpx;
|
||
color: #999999;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.home-menu-item-right {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
background: #EFEFEF;
|
||
border-radius: 50%;
|
||
padding-left: 2rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.home-menu-item-value{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
bottom: 26rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 550;
|
||
}
|
||
.home-menu-item-bg {
|
||
position: absolute;
|
||
right: 37rpx;
|
||
bottom: 26rpx;
|
||
font-size: 75rpx;
|
||
z-index: 99;
|
||
color: transparent;
|
||
display: inline-block;
|
||
-webkit-background-clip: text;
|
||
}
|
||
.home-menu-item-bg-two{
|
||
position: absolute;
|
||
right: 44rpx;
|
||
bottom: 26rpx;
|
||
font-size: 75rpx;
|
||
z-index: 98;
|
||
}
|
||
}
|
||
.border-box{
|
||
height:1px;
|
||
background: #E0E3E5;
|
||
}
|
||
}
|
||
|
||
.btn-box{
|
||
margin-top: 100rpx;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
}
|
||
</style> |