190 lines
4.4 KiB
Vue
190 lines
4.4 KiB
Vue
<template>
|
|
<view class="userInfo-container">
|
|
<view class="user-avatar">
|
|
<u--image
|
|
class="user-avatar-img"
|
|
:src="userInfo.user_avatar || '../../static/user-img.png'"
|
|
shape="circle"
|
|
width="110"
|
|
height="110"
|
|
></u--image>
|
|
<view class="user-avatar-text">更换用户头像</view>
|
|
</view>
|
|
<u-form :model="userInfo" ref="uForm" class="form" label-width="100">
|
|
<u-form-item label="用户编号" prop="id">
|
|
<u-input
|
|
class="form-input"
|
|
disabled
|
|
disabledColor="#fff"
|
|
inputAlign="right"
|
|
v-model="userInfo.id"
|
|
placeholder=""
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item
|
|
label="用户账号"
|
|
prop="user_account"
|
|
class="user-account-item"
|
|
>
|
|
<u-input
|
|
class="form-input"
|
|
disabled
|
|
disabledColor="#fff"
|
|
inputAlign="right"
|
|
v-model="userInfo.user_account"
|
|
placeholder=""
|
|
/>
|
|
<view slot="right" class="copy" @click="copy"> 复制 </view>
|
|
</u-form-item>
|
|
<u-form-item label="用户姓名" prop="name">
|
|
<u-input
|
|
class="form-input"
|
|
disabled
|
|
disabledColor="#fff"
|
|
inputAlign="right"
|
|
v-model="name"
|
|
placeholder=""
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item label="手机号" prop="name">
|
|
<u-input
|
|
class="form-input"
|
|
disabled
|
|
disabledColor="#fff"
|
|
inputAlign="right"
|
|
v-model="phone"
|
|
placeholder=""
|
|
/>
|
|
</u-form-item>
|
|
</u-form>
|
|
<u-form :model="userInfo" ref="uForm" class="form" label-width="100">
|
|
<u-form-item label="注册时间" prop="time">
|
|
<u-input
|
|
class="form-input"
|
|
disabled
|
|
disabledColor="#fff"
|
|
inputAlign="right"
|
|
v-model="registerTime"
|
|
placeholder=""
|
|
/>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
name: "",
|
|
phone: "",
|
|
registerTime: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState("user", ["userInfo"]),
|
|
},
|
|
onShow() {
|
|
let auditInfo = uni.getStorageSync("auditInfo");
|
|
this.name = this.nameHide(auditInfo.contact_name);
|
|
this.phone = this.phoneHide(auditInfo.login_mobile);
|
|
this.registerTime = auditInfo.created_at;
|
|
},
|
|
methods: {
|
|
copy() {
|
|
uni.setClipboardData({
|
|
data: this.userInfo.user_account,
|
|
success: function () {
|
|
uni.showToast({
|
|
title: "复制成功",
|
|
icon: "none",
|
|
});
|
|
},
|
|
});
|
|
},
|
|
nameHide(name) {
|
|
if (name.length == 2) {
|
|
name = name.substring(0, 1) + "*"; // 截取name 字符串截取第一个字符，
|
|
return name; // 张三显示为张*
|
|
} else if (name.length == 3) {
|
|
name = name.substring(0, 1) + "*" + name.substring(2, 3); // 截取第一个和第三个字符
|
|
return name; // 李思思显示为李*思
|
|
} else if (name.length > 3) {
|
|
name =
|
|
name.substring(0, 1) + "*" + "*" + name.substring(3, name.length); // 截取第一个和大于第4个字符
|
|
return name; // 王五哈哈显示为王**哈
|
|
}
|
|
},
|
|
phoneHide(phone) {
|
|
let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
|
|
phone = phone.replace(reg, "$1****$2");
|
|
return phone; // 185****6696
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.userInfo-container {
|
|
height: calc(100vh - 88rpx);
|
|
background: #f6f6f6;
|
|
|
|
.user-avatar {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 60rpx 0;
|
|
background: #fff;
|
|
|
|
.user-avatar-img {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.user-avatar-text {
|
|
color: #ec5d29;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
padding: 40rpx 0;
|
|
|
|
.u-form-item {
|
|
padding: 0 32rpx;
|
|
border-top: 1px solid #f4f4f4;
|
|
background: #fff;
|
|
|
|
.form-input {
|
|
background: #fff;
|
|
}
|
|
|
|
.form-input-time {
|
|
outline: none;
|
|
}
|
|
|
|
.shop-description {
|
|
display: flex;
|
|
flex-flow: column;
|
|
|
|
.title {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.textarea {
|
|
border: 1px solid #f4f4f4;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.copy {
|
|
padding: 8rpx 20px;
|
|
border-radius: 12rpx;
|
|
background: #aaaaaa;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style> |