You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
358 lines
8.9 KiB
358 lines
8.9 KiB
<template> |
|
<div class="coin-profile"> |
|
<div class="majorBox"> |
|
<div class="majorTitleBox majorBoxStyle major-fiexd"> |
|
<p class="majorTitle">{{ $t('personal.profile.basicInfo.title') }}</p> |
|
<!-- 申请取消商家 --> |
|
<div |
|
class="major-te-two" |
|
v-if="applyStatus == 'MARKET'" |
|
@click="getMerchant()" |
|
> |
|
<span>{{ $t('exchangeotc.merchant.data_del') }}</span> |
|
</div> |
|
</div> |
|
|
|
<div class="secondaryBox majorBoxStyle majorBoxStyleBc"> |
|
<div v-show="isRemake === false" class="profileContent"> |
|
<span class="secondaryTitle" |
|
>{{ $t('personal.profile.basicInfo.userName') }}：</span |
|
> |
|
<span class="secondaryCont">{{ userName }}</span> |
|
<div class="btnRemake" @click="remakeName"> |
|
{{ $t('personal.profile.basicInfo.changeNameBtn') }} |
|
</div> |
|
</div> |
|
<div v-show="isRemake == true" class="profileContent"> |
|
<span class="secondaryTitle" |
|
>{{ $t('personal.profile.basicInfo.userName') }}：</span |
|
> |
|
<el-input |
|
v-model="userName" |
|
:placeholder="$t('personal.profile.basicInfo.userName_p')" |
|
></el-input> |
|
<div class="btnHandle" @click="renameSuccess"> |
|
{{ $t('personal.profile.basicInfo.affirm') }} |
|
</div> |
|
<div class="btnHandle" @click="remakeName('cancel')"> |
|
{{ $t('personal.profile.basicInfo.cancel') }} |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!--<div class="secondaryBox majorBoxStyle"> |
|
<div class="profileContent"> |
|
<span class="secondaryTitle" |
|
>{{ $t('personal.profile.basicInfo.loginPasswrod') }}：</span |
|
> |
|
<span class="secondaryCont">*********</span> |
|
<!– <router-link to="/profile/change-password"> |
|
<div class="btnRemake"> |
|
{{ $t('personal.profile.basicInfo.changePasswordBtn') }} |
|
</div> |
|
</router-link>–> |
|
</div> |
|
</div>--> |
|
</div> |
|
|
|
<div class="loginHistory" :style="{height: calac + 'px'}"> |
|
<div class="majorBox"> |
|
<div class="majorTitleBox majorBoxStyle"> |
|
<p class="majorTitle"> |
|
{{ $t('personal.profile.loginHistory.title') }} |
|
</p> |
|
</div> |
|
</div> |
|
<el-table :data="loginHistory" stripe style="width: 100%"> |
|
<el-table-column |
|
prop="createTime" |
|
:label="$t('personal.profile.loginHistory.table_header_time')" |
|
> |
|
<template slot-scope="scope"> |
|
<span class="timeData">{{ |
|
scope.row.createTime.split(' ')[0].replace(/-/g, '/') |
|
}}</span> |
|
<span class="timeData timeDataAfter">{{ |
|
scope.row.createTime.split(' ')[1] |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
<el-table-column |
|
prop="mobilePhone" |
|
:label="$t('personal.profile.loginHistory.phone')" |
|
></el-table-column> |
|
<el-table-column prop="ipAddress" label="IP"></el-table-column> |
|
<el-table-column |
|
prop="status" |
|
:label="$t('personal.profile.loginHistory.table_header_status')" |
|
> |
|
<template slot-scope="scope"> |
|
<span v-show="scope.row.status === 'SUCCESS'">{{ |
|
$t('personal.profile.loginHistory.success') |
|
}}</span> |
|
<span v-show="scope.row.status === 'FAIL'">{{ |
|
$t('personal.profile.loginHistory.fail') |
|
}}</span> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</div> |
|
|
|
<!-- 修改昵称成功弹窗 --> |
|
<el-dialog :visible.sync="is_dialog" center> |
|
<span>{{ $t('personal.profile.dialog') }}</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import {rename, getUserData, getLoginLog} from '@/api/user'; |
|
import {getCancelApply, cheackApply} from '@/api/coin'; |
|
export default { |
|
name: 'profile', |
|
data() { |
|
return { |
|
loginHistory: [], |
|
userName: '', |
|
isRemake: false, |
|
is_dialog: false, |
|
// dialogMerchant: false, |
|
id: '', |
|
applyStatus: '', |
|
}; |
|
}, |
|
created: function() { |
|
let userData = JSON.parse(localStorage.getItem('userData')); |
|
// console.log(userData) |
|
this.userName = userData.nickName; |
|
this.id = userData.id; |
|
this.getcheckApply(); // 查询用户市商状态 |
|
//请求登录日志 |
|
getLoginLog({ |
|
userId: this.id, |
|
// pageNum: 1, |
|
// pageSize: 10, |
|
}).then(res => { |
|
this.loginHistory = res.data.data.rows; |
|
}); |
|
}, |
|
computed: { |
|
calac: function() { |
|
if (this.loginHistory.length === 0) { |
|
return 202; |
|
} else { |
|
return (this.loginHistory.length + 2) * 71; |
|
} |
|
}, |
|
}, |
|
methods: { |
|
// 查询用户市商状态 |
|
getcheckApply() { |
|
cheackApply().then(res => { |
|
if (res.data.code === 200) { |
|
this.applyStatus = res.data.data; |
|
} else { |
|
this.$message.error(res.data.msg); |
|
} |
|
}); |
|
}, |
|
// 取消商家 |
|
getMerchant() { |
|
// this.$confirm( |
|
// this.$t('exchangeotc.merchant.cao'), |
|
// this.$t('exchangeotc.merchant.tishi'), |
|
// { |
|
// confirmButtonText: this.$t('exchangeotc.merchant.sure'), |
|
// cancelButtonText: this.$t('exchangeotc.merchant.delete'), |
|
// type: 'warning', |
|
// } |
|
// ) |
|
// .then(() => { |
|
getCancelApply().then(res => { |
|
if (res.data.code === 200) { |
|
this.$message({ |
|
type: 'success', |
|
message: this.$t('exchangeotc.merchant.success'), |
|
}); |
|
setInterval(() => { |
|
location.reload(); //成功刷新页面 |
|
}, 1000); |
|
} else { |
|
this.$message.error(res.data.msg); |
|
} |
|
}); |
|
// }) |
|
// .catch(() => { |
|
// this.$message({ |
|
// type: 'info', |
|
// message: this.$t('exchangeotc.merchant.deled'), |
|
// }); |
|
// }); |
|
}, |
|
remakeName(e) { |
|
if (e == 'cancel') { |
|
this.userName = JSON.parse(localStorage.getItem('userData')).nickName; |
|
} |
|
this.isRemake = !this.isRemake; |
|
}, |
|
//修改昵称 |
|
renameSuccess() { |
|
rename({ |
|
nickName: this.userName, |
|
}).then(res => { |
|
// console.log(res); |
|
if (res.data.code === 200) { |
|
this.is_dialog = true; |
|
this.isRemake = !this.isRemake; |
|
|
|
//修改成功之后再次请求用户信息接口，更新数据 |
|
getUserData().then(res => { |
|
// Cookie.set('userData', res.data.data); |
|
localStorage.setItem('userData', JSON.stringify(res.data.data)); |
|
}); |
|
} |
|
}); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.coin-profile { |
|
p { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
.btnRemake { |
|
cursor: pointer; |
|
color: #e8494a; |
|
margin-left: 20px; |
|
font-size: 14px; |
|
} |
|
|
|
.loginHistory { |
|
margin-top: 20px; |
|
margin-bottom: 60px; |
|
width: 1000px; |
|
} |
|
|
|
.el-table { |
|
margin-top: 1px; |
|
} |
|
|
|
.el-table th { |
|
height: 50px; |
|
font-size: 14px; |
|
color: #545663; |
|
padding: 0; |
|
} |
|
.el-table td { |
|
color: #545663; |
|
font-size: 12px; |
|
} |
|
.el-table th > .cell, |
|
.el-table__row td > .cell { |
|
padding-left: 50px; |
|
} |
|
|
|
.el-table td:first-child { |
|
padding: 0; |
|
} |
|
.el-table tr { |
|
height: 50px; |
|
box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
.el-input { |
|
width: 307px; |
|
height: 49px; |
|
} |
|
|
|
.btnHandle { |
|
color: #e8494a; |
|
font-size: 14px; |
|
margin-left: 30px; |
|
cursor: pointer; |
|
} |
|
|
|
.el-dialog { |
|
width: 544px; |
|
height: 169px; |
|
position: fixed; |
|
left: 50%; |
|
top: 50%; |
|
transform: translate(-50%, -50%); |
|
margin-top: 0 !important; |
|
} |
|
|
|
.el-dialog__body { |
|
font-size: 28px; |
|
padding: 0; |
|
position: absolute; |
|
top: 50%; |
|
left: 50%; |
|
transform: translate(-50%, -50%); |
|
span { |
|
color: #fff; |
|
} |
|
} |
|
|
|
.timeData { |
|
color: #a0a6b5; |
|
} |
|
|
|
.timeDataAfter { |
|
margin-left: 10px; |
|
} |
|
} |
|
.major-fiexd { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
.major-te-two { |
|
cursor: pointer; |
|
margin-right: 50px; |
|
|
|
font-size: 14px; |
|
color: #e8494a; |
|
span { |
|
padding: 9px 11px; |
|
border: 1px solid #e8494a; |
|
border-radius: 6px; |
|
} |
|
} |
|
} |
|
.el-message-box { |
|
width: 536px; |
|
background-color: #1f2026; |
|
border: 1px solid #1f2026; |
|
.el-message-box__header { |
|
padding: 18px 30px; |
|
background-color: #24252c; |
|
.el-message-box__title { |
|
font-size: 16px; |
|
color: #9ba0bc; |
|
} |
|
} |
|
.el-message-box__content { |
|
margin: 28px 30px; |
|
color: #e8494a; |
|
} |
|
.el-message-box__btns { |
|
.el-button { |
|
width: 80px; |
|
height: 40px; |
|
background-color: #1f2026; |
|
color: #686e7c; |
|
border: 1px solid #545663; |
|
} |
|
.el-button--primary { |
|
background-color: #e8494a; |
|
border: 1px solid #e8494a; |
|
color: #fff; |
|
margin-left: 19px; |
|
} |
|
} |
|
} |
|
</style>
|
|
|