|
|
@@ -1,50 +1,55 @@
|
|
|
<template>
|
|
|
<div class="content">
|
|
|
- <div class="edit_data">编辑资料</div>
|
|
|
<van-cell-group :border="false">
|
|
|
<van-cell title="头像" is-link>
|
|
|
<template #value>
|
|
|
<van-image
|
|
|
round
|
|
|
- width="36"
|
|
|
- height="36"
|
|
|
+ width="40"
|
|
|
+ height="40"
|
|
|
:src="userInfo.avatar || require('@assets/svgs/img_default_photo.svg')"
|
|
|
fit="cover"
|
|
|
/>
|
|
|
<van-uploader class="avatar" :after-read="afterRead" result-type="file" />
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
- <van-divider class="edit_data_divider"/>
|
|
|
<van-cell
|
|
|
title="昵称"
|
|
|
@click="$router.push('/changeText?type=nickname')"
|
|
|
is-link
|
|
|
:value="userInfo.nickname"
|
|
|
/>
|
|
|
- <van-divider class="edit_data_divider"/>
|
|
|
<van-cell
|
|
|
- title="简介"
|
|
|
+ title="个性签名"
|
|
|
:class="[userInfo.intro ? 'intro' : 'not']"
|
|
|
@click="$router.push('/changeText?type=intro')"
|
|
|
is-link
|
|
|
- :value="userInfo.intro || '介绍一下自己让大家认识你吧～'"
|
|
|
+ :border="false"
|
|
|
+ :value="userInfo.intro || 'TA还什么都没有留下～'"
|
|
|
/>
|
|
|
- <van-divider class="edit_data_divider"/>
|
|
|
- <van-cell title="主页背景" class="not" is-link>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-cell title="手机号码" :value="showPhone" />
|
|
|
+ <van-cell title="实名认证" is-link :value="userInfo.phone">
|
|
|
<template #value>
|
|
|
- <span> 更换背景</span>
|
|
|
- <van-uploader class="avatar" :after-read="afterRead2" result-type="file" />
|
|
|
+ <div class="value-text">
|
|
|
+ <img src="@assets/ok.png" alt="" />
|
|
|
+ <span>已认证</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell title="支付密码" is-link :value="userInfo.phone" @click="$router.push('/tradingPassword')">
|
|
|
+ <template #value>
|
|
|
+ <div class="value-text" v-if="set">
|
|
|
+ <img src="@assets/ok.png" alt="" />
|
|
|
+ <span>已设置</span>
|
|
|
+ </div>
|
|
|
+ <div class="value-text" v-else>
|
|
|
+ <span>未设置</span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
- <van-divider class="edit_data_divider"/>
|
|
|
</van-cell-group>
|
|
|
- <div class="user_id">
|
|
|
- <div class="user_id_title">用户ID</div>
|
|
|
- <div class="user_id_con">
|
|
|
- <div>{{userInfo.id}}</div>
|
|
|
- <img :src="require('@assets/copy_icon.png')" alt="" class="user_id_con_img" @click="copy">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
<div class="edit_return">
|
|
|
<div class="edit_return_con" @click="$router.go(-1)">返回</div>
|
|
|
@@ -56,8 +61,29 @@ import { mapState } from 'vuex';
|
|
|
import { ref } from 'vue';
|
|
|
import eruda from 'eruda';
|
|
|
export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ set: false
|
|
|
+ };
|
|
|
+ },
|
|
|
computed: {
|
|
|
- ...mapState(['userInfo'])
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ showPhone() {
|
|
|
+ if (this.userInfo.phone) {
|
|
|
+ return this.userInfo.phone.slice(0, 3) + '****' + this.userInfo.phone.slice(-4);
|
|
|
+ }
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$http
|
|
|
+ .get('/user/tradeCodeStatus', {
|
|
|
+ userId: this.userInfo.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.set = res.set;
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
copy() {
|
|
|
@@ -118,142 +144,160 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-/deep/ .van-cell--clickable:active{
|
|
|
- background: #0F0F27;
|
|
|
+/deep/ .van-cell--clickable:active {
|
|
|
+ background: @bg;
|
|
|
}
|
|
|
- .content{
|
|
|
- // margin-top: 44px;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- background: #0F0F27;
|
|
|
- padding: 16px 12px 0px 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- .edit_data{
|
|
|
- font-size: 20px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
- .edit_data_divider{
|
|
|
- margin: 14px 0;
|
|
|
- height: 1px;
|
|
|
- background: #5F646F;
|
|
|
- opacity: 0.2;
|
|
|
+.content {
|
|
|
+ // margin-top: 44px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background: @bg;
|
|
|
+ padding:20px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .edit_data {
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .edit_data_divider {
|
|
|
+ margin: 14px 0;
|
|
|
+ height: 1px;
|
|
|
+ background: #5f646f;
|
|
|
+ opacity: 0.2;
|
|
|
+ }
|
|
|
+ .user_id {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .user_id_title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
- .user_id{
|
|
|
+ .user_id_con {
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .user_id_title{
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- .user_id_con{
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #5F646F;
|
|
|
- line-height: 24px;
|
|
|
- .user_id_con_img{
|
|
|
- width: 18px;
|
|
|
- height: 20px;
|
|
|
- margin-left: 4px;
|
|
|
- padding-top: 2px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #5f646f;
|
|
|
+ line-height: 24px;
|
|
|
+ .user_id_con_img {
|
|
|
+ width: 18px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 4px;
|
|
|
+ padding-top: 2px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .avatar {
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- opacity: 0;
|
|
|
- bottom: 0;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0;
|
|
|
+ bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.van-cell-group {
|
|
|
+ background-color: @bg2;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.van-cell-group + .van-cell-group {
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+/deep/ .van-cell:after {
|
|
|
+ border-color: #97979710;
|
|
|
+}
|
|
|
+/deep/ .van-cell__title {
|
|
|
+ width: 120px;
|
|
|
+}
|
|
|
+/deep/ .van-cell {
|
|
|
+ align-items: center;
|
|
|
+ height: 66px;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 16px;
|
|
|
+ .van-cell__title {
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
- /deep/ .van-cell:after{
|
|
|
- border: none;
|
|
|
+ .van-cell__value {
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff66;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
- /deep/ .van-cell__title{
|
|
|
- width: 120px;
|
|
|
+ .van-uploader__input {
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 45px;
|
|
|
}
|
|
|
- /deep/ .van-cell {
|
|
|
- align-items: center;
|
|
|
- height: 45px;
|
|
|
- position: relative;
|
|
|
- padding: 0;
|
|
|
- .van-cell__title {
|
|
|
+ &.not {
|
|
|
+ .van-cell__value {
|
|
|
span {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff66;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ &.intro {
|
|
|
+ overflow: hidden;
|
|
|
.van-cell__value {
|
|
|
span {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #FFFFFF;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #ffffff;
|
|
|
line-height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- .van-uploader__input{
|
|
|
- position: absolute;
|
|
|
- top: 7px;
|
|
|
- left: 45px;
|
|
|
- }
|
|
|
- &.not {
|
|
|
- .van-cell__value {
|
|
|
- span {
|
|
|
- font-size: 12px;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #5F646F;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.intro {
|
|
|
- overflow: hidden;
|
|
|
- .van-cell__value {
|
|
|
- span {
|
|
|
- font-size: 13px;
|
|
|
- color: #FFFFFF;
|
|
|
- line-height: 24px;
|
|
|
- display: -webkit-box;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
+ display: -webkit-box;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .edit_return{
|
|
|
- width: 100%;
|
|
|
- height: 56px;
|
|
|
- background: #15152D;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- padding: 8px 16px;
|
|
|
- box-sizing: border-box;
|
|
|
- .edit_return_con{
|
|
|
- height: 40px;
|
|
|
- background: #29293F;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Medium, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #939599;
|
|
|
- line-height: 40px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+}
|
|
|
+.edit_return {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: #15152d;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 8px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .edit_return_con {
|
|
|
+ height: 40px;
|
|
|
+ background: #29293f;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.value-text {
|
|
|
+ .flex();
|
|
|
+ justify-content: flex-end;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 16px !important;
|
|
|
+ color: rgba(255, 255, 255, 0.5) !important;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-left: 3px;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
panhui
