332 lines
7.6 KiB
Vue
332 lines
7.6 KiB
Vue
<template>
|
||
<view>
|
||
<view class="contain">
|
||
<!-- 第一部分 -->
|
||
<view class="view">
|
||
<view class="view-image-text" @tap="personal">
|
||
<image class="image-radius" :src="config.avatar ? config.avatar : 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/images/avatar.png'"></image>
|
||
<view class="text-container">
|
||
<view class="name">
|
||
{{ config.nick ? config.nick : '提莫' }}
|
||
<text class="hasname" v-if="hasname">(暂无昵称)</text>
|
||
</view>
|
||
<view class="ID">userID:{{ config.userID }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box">
|
||
<block v-for="(item, index) in userListInfo" :key="index">
|
||
<view class="list" :data-item="item" @tap="handleRouter">
|
||
<image class="list-URL" :src="item.iconUrl"></image>
|
||
<view class="list-name">
|
||
<view>{{ item.name }}</view>
|
||
</view>
|
||
<image class="listimage" src="https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/detail.svg"></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="quit-main">
|
||
<view class="quit-main-text" @tap="quit">退出登陆</view>
|
||
</view>
|
||
<view class="pop-mask" v-if="popupToggle">
|
||
<view class="pop-box">
|
||
<text class="text-title">《IM-免责声明》</text>
|
||
<text class="pop-box-text">IM（“本产品”）是由腾讯云提供的一款测试产品，腾讯云享有本产品的著作权和所有权。本产品仅用于功能体验，不得用于任何商业用途。为配合相关部门监管要求，本产品音视频互动全程均有录音录像存档，严禁在使用中有任何色情、辱骂、暴恐、涉政等违法内容传播。</text>
|
||
<view class="agree">
|
||
<button class="pop-agree" @tap="Agree">我已知晓</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const app = getApp();
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 页面初始信息
|
||
userListInfo: [
|
||
{
|
||
extra: 1,
|
||
name: '隐私条例',
|
||
path: 'https://web.sdk.qcloud.com/document/Tencent-IM-Privacy-Protection-Guidelines.html',
|
||
nav: 'Privacy-Protection',
|
||
iconUrl: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/Privacyregulations.svg',
|
||
},
|
||
{
|
||
extra: 1,
|
||
name: '用户协议',
|
||
path: 'https://web.sdk.qcloud.com/document/Tencent-IM-User-Agreement.html',
|
||
nav: 'User-Agreement',
|
||
iconUrl: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/Useragreement.svg',
|
||
},
|
||
{
|
||
extra: 3,
|
||
name: '免责声明',
|
||
iconUrl: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/Disclaimers.svg',
|
||
},
|
||
{
|
||
extra: 2,
|
||
name: '关于',
|
||
url: '../about/about',
|
||
iconUrl: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/about.svg',
|
||
},
|
||
{
|
||
extra: 1,
|
||
name: '联系我们',
|
||
path: 'https://cloud.tencent.com/document/product/269/20043',
|
||
iconUrl: 'https://jw-uniapp.oss-cn-beijing.aliyuncs.com/static/assets/contact.svg',
|
||
},
|
||
],
|
||
config: {
|
||
nick: '',
|
||
userID: '',
|
||
},
|
||
hasname: true,
|
||
popupToggle: false,
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
props: {},
|
||
|
||
onShow() {
|
||
uni.$TUIKit
|
||
.getMyProfile()
|
||
.then(imResponse => {
|
||
this.setData({
|
||
config: imResponse.data,
|
||
});
|
||
app.globalData.userProfile = imResponse.data;
|
||
|
||
if (imResponse.data.nick) {
|
||
this.setData({
|
||
hasname: false,
|
||
});
|
||
}
|
||
})
|
||
.catch(imError => {
|
||
console.warn('getMyProfile error:', imError); // 获取个人资料失败的相关信息
|
||
});
|
||
},
|
||
|
||
methods: {
|
||
onload() {},
|
||
|
||
personal() {
|
||
// TUIKit xxxx | mine | personal | xxxx
|
||
uni.navigateTo({
|
||
url: '/pages/im/personal/personal',
|
||
});
|
||
},
|
||
|
||
quit() {
|
||
// TUIKit xxxx | mine | quit | xxxx
|
||
uni.$TUIKit.logout().then(() => {
|
||
uni.clearStorage();
|
||
uni.redirectTo({
|
||
url: '/pages/login',
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '退出成功',
|
||
icon: 'none',
|
||
});
|
||
},
|
||
});
|
||
});
|
||
},
|
||
|
||
handleRouter(event) {},
|
||
|
||
Agree() {
|
||
this.setData({
|
||
popupToggle: false,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.page {
|
||
background-color: #ffffff;
|
||
}
|
||
.contain {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #5856d5;
|
||
}
|
||
|
||
.view {
|
||
height: 358rpx;
|
||
background: #5856d5;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.view-image-text {
|
||
display: flex;
|
||
width: 90%;
|
||
height: 189rpx;
|
||
justify-content: left;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
|
||
border-radius: 4px;
|
||
border-radius: 4px;
|
||
z-index: 1;
|
||
margin-top: 110px;
|
||
}
|
||
.image-radius {
|
||
padding-left: 43rpx;
|
||
padding-top: 43rpx;
|
||
padding-bottom: 40rpx;
|
||
height: 120rpx;
|
||
width: 120rpx;
|
||
}
|
||
.name {
|
||
height: 25px;
|
||
font-family: PingFangSC-Medium;
|
||
font-size: 18px;
|
||
color: #333333;
|
||
letter-spacing: 0;
|
||
margin-left: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.ID {
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
letter-spacing: 0;
|
||
margin-left: 10px;
|
||
margin-top: 10px;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
.box {
|
||
width: 100%;
|
||
}
|
||
.list {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: white;
|
||
width: 100%;
|
||
height: 56px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
letter-spacing: 0;
|
||
line-height: 24px;
|
||
padding-top: 16px;
|
||
border-bottom: 1px solid #eef0f3;
|
||
}
|
||
.list-URL {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
align-items: center;
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 5px;
|
||
}
|
||
|
||
.list-URL image {
|
||
width: 100%;
|
||
height: 20px;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
.list-name {
|
||
display: inline-block;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 16px;
|
||
color: #333333;
|
||
letter-spacing: 0;
|
||
line-height: 24px;
|
||
}
|
||
.listimage {
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
right: 36px;
|
||
}
|
||
.quit-main {
|
||
margin-top: 36px;
|
||
margin-left: 25px;
|
||
margin-right: 20px;
|
||
background-color: white;
|
||
width: 85%;
|
||
height: 46px;
|
||
border: 1px solid #5856d5;
|
||
border-radius: 24px;
|
||
border-radius: 24px;
|
||
}
|
||
.quit-main-text {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 13px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 16px;
|
||
color: #5856d5;
|
||
letter-spacing: 0;
|
||
}
|
||
.arrow {
|
||
width: 16px;
|
||
height: 16px;
|
||
float: right;
|
||
}
|
||
.pop-mask {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: fixed;
|
||
z-index: 2;
|
||
top: 0; /* #ifdef H5 */
|
||
top: calc(88rpx + constant(safe-area-inset-top));
|
||
top: calc(88rpx + env(safe-area-inset-top)); /* #endif */
|
||
right: 0;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.pop-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
padding: 20rpx;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
border: 1px solid #eef0f3;
|
||
z-index: 1;
|
||
}
|
||
.text-title {
|
||
right: 100px;
|
||
left: 100px;
|
||
}
|
||
.pop-box-text {
|
||
display: flex;
|
||
padding-top: 10px;
|
||
font-family: PingFangSC-Regular;
|
||
font-size: 16px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
.agree {
|
||
padding-top: 20rpx;
|
||
}
|
||
.pop-agree {
|
||
padding-top: 20rpx;
|
||
background: rgba(0, 110, 255, 1);
|
||
border-radius: 30px;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
letter-spacing: 0;
|
||
/* text-align: center; */
|
||
font-weight: 500;
|
||
}
|
||
</style>
|