745 lines
17 KiB
Vue
745 lines
17 KiB
Vue
<template>
|
||
<view class="me_container" v-cloak v-if="userInfos.token">
|
||
<view class="m_c_header">
|
||
<view class="header_top">
|
||
<view class="h_t_left">
|
||
<view class="avt">
|
||
<image :src="userInfos.avatar" mode=""></image>
|
||
</view>
|
||
<view class="identity">
|
||
<view class="" @tap="modalUserName = true">{{userInfos.nickname}}</view>
|
||
<view style="margin-top: 20rpx;font-size: 28rpx;">身份資格：{{userInfos.level_text.title}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="h_t_right" @click="toShenfen">
|
||
升級
|
||
</view>
|
||
</view>
|
||
<!-- <view style="font-size: 20px;margin-top: 20px;">身份資格</view> -->
|
||
<!-- 遊客 -->
|
||
<!-- <view v-if="userInfos.level_text.title" style="
|
||
font-size: 29px;
|
||
font-weight: 700;
|
||
">{{userInfos.level_text.title}}</view> -->
|
||
<!-- 第二部分 -->
|
||
<!-- <view v-if="userInfos.area && userInfos.level && userInfos.level > 2 && userInfos.area.slice(0,2) != '99'">
|
||
{{ "("+chineseCity(userInfos.area)+")" }}</view>
|
||
<view v-if="userInfos.area && userInfos.area.slice(0,2) == '99'">(直營代理)</view>
|
||
<view class="btnSj" @tap="toShenfen">升級</view> -->
|
||
<!-- 名字錢包地址 -->
|
||
<!-- <view class="user_name" v-if="userInfos.nickname" @tap="modalUserName = true">{{userInfos.nickname}}</view> -->
|
||
<!-- <view class="user_adress" v-if="userInfos.wallet.address" @tap="copyAdress(userInfos.wallet.address)">{{userMoneyAdressOptions(userInfos.wallet.address)}}</view> -->
|
||
</view>
|
||
<!-- 內容 -->
|
||
<view style="padding: 30rpx;">
|
||
<view style="background-color: #3B3D83;border-radius: 30rpx 30rpx 0 0 ;">
|
||
<scroll-view scroll-y="true" class="m_c_footer">
|
||
<view style="padding:0 30rpx;">
|
||
<view class="listBox" v-for="(item,index) in srcollList" :key="index"
|
||
@tap="listClick(item.title)">
|
||
<view class="l_left">
|
||
<view class="l_icon">
|
||
<image :src="item.img" mode="widthFix"></image>
|
||
</view>
|
||
<view class="l_title" style="margin-left: 30rpx;">{{item.title}}</view>
|
||
</view>
|
||
<view class="l_right"><u-icon name="arrow-right" color="#FFF" size="16"></u-icon></view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
<!-- 退出登錄 -->
|
||
<view class="outlogin">
|
||
<view class="out_cent" @click="outlogin">
|
||
<view class="out_img">
|
||
<image src="/static/icon/uid.png" mode=""></image>
|
||
</view>
|
||
<view class="out">
|
||
退出登錄
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 測試舔磚 -->
|
||
<!-- 用戶名彈窗 -->
|
||
<view class="modal" v-if="modalUserName">
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<view class="zz_content">請輸入新用戶名</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<view class="modal-item">
|
||
<text class="modal-label">用戶名:</text>
|
||
<input v-model="newUserName" type="text" style="flex: 1;"/>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="modal-button cancel" @tap="modalUserName = false">取消</button>
|
||
<button class="modal-button confirm" @tap="submitUserName">確定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 密碼彈窗 -->
|
||
<view class="modal" v-if="modalName">
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<view class="zz_content">請輸入驗證信息</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<view class="modal-item zf_mod_item">
|
||
<text class="modal-label">郵箱:</text>
|
||
<view class="">{{userInfos.email}}</view>
|
||
</view>
|
||
<view class="modal-item zf_mod_item">
|
||
<text class="modal-label">支付密碼:</text>
|
||
<u--input color="#fff" style="width: 70%;" :value="zhifuMima" :password="showPassword"
|
||
border="none" @input="handleInput"></u--input>
|
||
<img :src="!showPassword ? showpwdImg : hidepwdImg" @tap="changePassword"
|
||
style="width: 50rpx;height: 50rpx;"></img>
|
||
</view>
|
||
<view class="modal-item zf_mod_item">
|
||
<text class="modal-label">郵箱驗證碼:</text>
|
||
<u--input color="#fff" style="width: 70%;" v-model="emailCode" border="none"></u--input>
|
||
<view class="sendcode" @click="tosendemail">{{emaiTip}}</view>
|
||
</view>
|
||
<view class="modal-item zf_mod_item">
|
||
<text class="modal-label">谷歌驗證碼:</text>
|
||
<u--input color="#fff" style="width: 70%;" v-model="googleCode" border="none"></u--input>
|
||
<view class="sendcode" @click="googleemail">{{googleTip}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="modal-button cancel" @tap="modalName = false">取消</button>
|
||
<button class="modal-button confirm" @tap="modalBtn">確定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 助記詞私鑰彈窗 -->
|
||
<view class="modal" v-if="modalNameZj">
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<view class="zz_content" v-if="exportType == 1 || exportType == 2">點擊可複製：</view>
|
||
<view class="zz_content" v-if="exportType == 3">關聯錢包</view>
|
||
</view>
|
||
<view class="modal-body" v-if="exportType == 1" @tap="copeZhuji(userMnemonic)" style="
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
">
|
||
助記詞：{{userMnemonic}}
|
||
</view>
|
||
<view class="modal-body" v-if="exportType == 2" @tap="copeZhuji(userPrivateKey)" style="
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
">
|
||
私鑰：{{privateKeyOptions(userPrivateKey)}}
|
||
</view>
|
||
<view class="modal-body" v-if="exportType == 3">
|
||
<view class="modal-item">
|
||
<text class="modal-label">關聯地址:</text>
|
||
<text class="modal-value" style="text-align: left;">
|
||
<input v-model="acconToAdress" type="text" style="color: #fff;" />
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<button class="modal-button cancel" @tap="modalNameZj = false">取消</button>
|
||
<button class="modal-button confirm" @tap="modalNameZj = false">確定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
publicjiemi
|
||
} from "@/common/jiemi.js";
|
||
import area from "@/components/mpvue-citypicker/city-data/area.js";
|
||
import city from "@/components/mpvue-citypicker/city-data/city.js";
|
||
import province from "@/components/mpvue-citypicker/city-data/province.js";
|
||
import {
|
||
_emailSend,
|
||
_profile,
|
||
_userInfos,
|
||
_walletinfo
|
||
} from "@/request/api.js";
|
||
import MD5 from "blueimp-md5";
|
||
export default {
|
||
data() {
|
||
return {
|
||
emailCode:"",
|
||
googleCode:"",
|
||
emaiTip:"發送",
|
||
googleTip:"發送",
|
||
acconToAdress: "",
|
||
showPassword: true,
|
||
showpwdImg: "static/icon/eye_on.png",
|
||
hidepwdImg: "static/icon/eye_off.png",
|
||
newUserName: "",
|
||
modalUserName: false,
|
||
exportType: "",
|
||
allProvince: null,
|
||
allCity: null,
|
||
allArea: null,
|
||
modalName: false,
|
||
modalNameZj: false,
|
||
zhifuMima: "",
|
||
userInfos: {},
|
||
userMnemonic: "",
|
||
userPrivateKey: "",
|
||
srcollList: [{
|
||
title: "邀請好友",
|
||
img: "/static/icon/tongxunlu.png"
|
||
},
|
||
{
|
||
title: "推薦客戶",
|
||
img: "/static/icon/tuandui1.png"
|
||
},
|
||
{
|
||
title: "導出助記詞",
|
||
img: "/static/icon/zhuciqi.png"
|
||
},
|
||
{
|
||
title: "導出私鑰",
|
||
img: "/static/icon/yinsi.png"
|
||
},
|
||
{
|
||
title: "修改密碼",
|
||
img: "/static/icon/qianbao.png"
|
||
},
|
||
{
|
||
title: "重置密碼",
|
||
img: "/static/icon/reset.png"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
watch: {
|
||
modalName: {
|
||
handler(val) {
|
||
if (val == false) {
|
||
this.emailCode = "";
|
||
this.googleCode = "";
|
||
this.zhifuMima = "";
|
||
this.emaiTip = "發送";
|
||
this.googleTip = "發送";
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onShow() {
|
||
this.allProvince = province;
|
||
this.allCity = city;
|
||
this.allArea = area;
|
||
},
|
||
mounted(){
|
||
this.getUserInfos();
|
||
},
|
||
methods: {
|
||
async tosendemail(){
|
||
if (this.emaiTip == "發送") {
|
||
let num = 60;
|
||
let emaiTimer = setInterval(() => {
|
||
this.emaiTip = num + 's';
|
||
num--;
|
||
if (num < 0) {
|
||
this.emaiTip = "發送";
|
||
clearInterval(emaiTimer)
|
||
}
|
||
}, 1000)
|
||
let res = await _emailSend({
|
||
email: this.userInfos.email,
|
||
event: "check"
|
||
});
|
||
if (res.code === 1) {
|
||
uni.showToast({
|
||
title: '發送成功',
|
||
icon: 'none'
|
||
});
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
} else {
|
||
return
|
||
}
|
||
},
|
||
googleemail() {
|
||
let num = 60;
|
||
let googleTimer = setInterval(() => {
|
||
this.googleTip = num + 's';
|
||
num--;
|
||
if (num < 0) {
|
||
this.googleTip = "發送";
|
||
clearInterval(googleTimer)
|
||
}
|
||
}, 1000)
|
||
},
|
||
privateKeyOptions(data) {
|
||
let start = data.substring(0, 26);
|
||
let end = data.substring(data.length - 4);
|
||
let middle = "…";
|
||
let finalString = start + middle + end;
|
||
return finalString
|
||
},
|
||
changePassword() {
|
||
this.showPassword = !this.showPassword;
|
||
},
|
||
async submitUserName() {
|
||
if (!this.newUserName) {
|
||
uni.showToast({
|
||
title: "請輸入新用戶名",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
const params = {
|
||
nickname: this.newUserName,
|
||
newpassword: "",
|
||
newpaykey: ""
|
||
};
|
||
let res = await _profile(params);
|
||
if (res.code === 1) {
|
||
uni.showToast({
|
||
title: '修改成功',
|
||
icon: "success",
|
||
duration: 1000
|
||
})
|
||
this.newUserName = "";
|
||
this.modalUserName = false;
|
||
this.getUserInfos();
|
||
}
|
||
},
|
||
copyAdress(adress) {
|
||
uni.setClipboardData({
|
||
data: adress,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '複製成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
chineseCity(cityCode) {
|
||
let _that = this;
|
||
let pppp = "";
|
||
let qqqq = "";
|
||
if (cityCode) {
|
||
let a = cityCode.substring(0, 2);
|
||
let b = cityCode.substring(0, 4);
|
||
_that.allProvince.map((item, index) => {
|
||
if (item.value == a) {
|
||
pppp = item.label;
|
||
if (b == "00") {
|
||
return
|
||
} else {
|
||
_that.allCity[index].map((item1, index1) => {
|
||
if (item1.value == b) {
|
||
_that.allArea[index][index1].map((item2, index2) => {
|
||
if (item2.value == cityCode) {
|
||
qqqq = item2.label;
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
return (pppp + qqqq)
|
||
} else {
|
||
return ""
|
||
}
|
||
},
|
||
async getUserInfos() {
|
||
let res = await _userInfos();
|
||
if (res.code === 1) {
|
||
this.userInfos = res.data.userinfo;
|
||
console.log('userInfos',this.userInfos);
|
||
}
|
||
},
|
||
copeZhuji(address) {
|
||
uni.setClipboardData({
|
||
data: address,
|
||
success: () => {
|
||
uni.showToast({
|
||
title: '複製成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
async modalBtn() {
|
||
if (!this.zhifuMima || !this.emailCode || !this.googleCode) return uni.showToast({
|
||
title: '請填寫正確資訊',
|
||
icon: 'none'
|
||
})
|
||
const params = {
|
||
code: this.emailCode,
|
||
googlecode: this.googleCode,
|
||
paykey: MD5(this.zhifuMima + (Math.floor(Date.now() / 1000))),
|
||
timestamp: Math.floor(Date.now() / 1000),
|
||
}
|
||
let res = await _walletinfo(params);
|
||
if (res.code === 1) {
|
||
this.modalName = false;
|
||
let jiemiinfos = await publicjiemi(this.exportType, this.zhifuMima, this.userInfos.wallet.address);
|
||
console.log('sssss')
|
||
this.exportType == 1 ? this.userMnemonic = jiemiinfos : this.userPrivateKey = jiemiinfos;
|
||
this.modalNameZj = true;
|
||
this.emailCode = "";
|
||
this.googleCode = "";
|
||
this.zhifuMima = "";
|
||
this.emaiTip = "發送";
|
||
this.googleTip = "發送";
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
toShenfen() {
|
||
uni.navigateTo({
|
||
url: "/pages/myProxy/myProxy"
|
||
})
|
||
},
|
||
userMoneyAdressOptions(data) {
|
||
let start = data.substring(0, 4);
|
||
let end = data.substring(data.length - 4);
|
||
let middle = "…";
|
||
let finalString = start + middle + end;
|
||
return finalString
|
||
},
|
||
listClick(title) {
|
||
switch (title) {
|
||
case "邀請好友":
|
||
uni.navigateTo({
|
||
url: "/pages/myuser/myuser"
|
||
})
|
||
break;
|
||
case "推薦客戶":
|
||
uni.navigateTo({
|
||
url: `/pages/mymoney/allDetail?detailLabel=${title}`
|
||
})
|
||
break;
|
||
case "修改關聯錢包":
|
||
this.exportInfos(3);
|
||
break;
|
||
case "導出助記詞":
|
||
this.exportInfos(1);
|
||
break;
|
||
case "導出私鑰":
|
||
this.exportInfos(2);
|
||
break;
|
||
case "修改密碼":
|
||
uni.navigateTo({
|
||
url: "/pages/me/editUserInfo"
|
||
})
|
||
break;
|
||
case "重置密碼":
|
||
uni.navigateTo({
|
||
url: "/pages/me/resetPwd"
|
||
})
|
||
break;
|
||
// case "退出登錄":
|
||
// uni.removeStorageSync("token");
|
||
// uni.reLaunch({
|
||
// url: "/pages/login/login"
|
||
// })
|
||
// break;
|
||
}
|
||
},
|
||
// 退出登錄
|
||
outlogin() {
|
||
uni.removeStorageSync("token");
|
||
uni.reLaunch({
|
||
url: "/pages/login/login"
|
||
})
|
||
},
|
||
//導出助記詞私鑰
|
||
exportInfos(n) {
|
||
this.modalName = true;
|
||
this.exportType = n;
|
||
},
|
||
handleInput(event) {
|
||
this.zhifuMima = event;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.me_container {
|
||
border-top: 1px solid dimgrey;
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background-color: #000033;
|
||
font-size: 30rpx;
|
||
|
||
.m_c_header {
|
||
height: 10%;
|
||
color: #fff;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
>view {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.user_name {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 20px;
|
||
font-size: 10px;
|
||
background-color: #4e538b;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.user_adress {
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 50px;
|
||
font-size: 10px;
|
||
background-color: #4e538b;
|
||
padding: 5px 10px;
|
||
}
|
||
|
||
.btnSj {
|
||
background-color: #4caf50;
|
||
width: 40%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
text-align: center;
|
||
border-radius: 15px;
|
||
}
|
||
}
|
||
|
||
// 新加
|
||
.header_top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 80rpx;
|
||
|
||
.h_t_left {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
height: 120rpx;
|
||
|
||
.avt {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.identity {
|
||
font-size: 40rpx;
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.h_t_right {
|
||
width: 135rpx;
|
||
height: 55rpx;
|
||
background-color: #263773;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.m_c_footer {
|
||
height: calc(75% - 40rpx);
|
||
margin-top: 40rpx;
|
||
box-sizing: border-box;
|
||
|
||
.listBox {
|
||
background-color: #3B3D83;
|
||
height: 120rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #fff;
|
||
box-sizing: border-box;
|
||
border-bottom: 2rpx solid #534a84;
|
||
|
||
.l_left {
|
||
display: flex;
|
||
}
|
||
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.modal {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
top: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: flex-end;
|
||
z-index: 999;
|
||
}
|
||
|
||
.modal-content {
|
||
background-color: #b6b5c8;
|
||
border-radius: 20px 20px 0 0;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
animation: slideUp 0.3s ease-out;
|
||
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.modal-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.modal-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-close {
|
||
font-size: 24px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.modal-body {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.modal-item {
|
||
display: flex;
|
||
margin-bottom: 15px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.zf_mod_item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.modal-label {
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.modal-value {
|
||
flex: 1;
|
||
font-weight: bold;
|
||
color: #333;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
/* 超出部分隱藏 */
|
||
text-overflow: ellipsis;
|
||
/* 超出部分顯示省略號 */
|
||
white-space: nowrap;
|
||
/* 不換行 */
|
||
}
|
||
|
||
.modal-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.modal-button {
|
||
width: 48%;
|
||
height: 44px;
|
||
border-radius: 22px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.modal-button.cancel {
|
||
background-color: #f0f0f0;
|
||
color: #333;
|
||
}
|
||
|
||
.modal-button.cancel:hover {
|
||
background-color: #e0e0e0;
|
||
}
|
||
|
||
.modal-button.confirm {
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
}
|
||
|
||
.modal-button.confirm:hover {
|
||
background-color: #45a049;
|
||
}
|
||
}
|
||
|
||
// 退出登錄
|
||
.outlogin {
|
||
padding: 0 30rpx;
|
||
|
||
.out_cent {
|
||
background-color: #515496;
|
||
width: 100%;
|
||
height: 110rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
color: #fff;
|
||
|
||
.out_img {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |