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.
373 lines
8.5 KiB
373 lines
8.5 KiB
<template>
|
|
<!-- 个人账户管理 -->
|
|
<div class="user-wrapper wrapper_1200">
|
|
<div class="router-tips">
|
|
<nuxt-link to="/">首页></nuxt-link>
|
|
<nuxt-link :to="{ path: '/user', query: { types: 0 } }">个人中心></nuxt-link>
|
|
<span>{{ userMenu[indexCur].title }}</span>
|
|
</div>
|
|
<div class="content clearfix">
|
|
<div class="left-box">
|
|
<div class="user-menu">
|
|
<div class="svip">
|
|
<div class="box">
|
|
<img
|
|
class="avatar"
|
|
:src="imgUrl + userInfo.headimg"
|
|
@click="upLoadHeadImgDialog"
|
|
alt
|
|
v-if="userInfo.headimg"
|
|
/>
|
|
|
|
<img
|
|
src="@/assets/images/default_headimg.png"
|
|
alt
|
|
v-else
|
|
@click="upLoadHeadImgDialog"
|
|
/>
|
|
<i class="el-icon-edit"></i>
|
|
</div>
|
|
<!-- <img src="~assets/images/svipSign.png" class="sign" > -->
|
|
</div>
|
|
<p class="name">{{ userInfo.nickname }}</p>
|
|
<div
|
|
@click="goPage(menu, index)"
|
|
class="menu-item"
|
|
v-for="(menu, index) in userMenu"
|
|
:key="index"
|
|
:class="{ active: menuCur == menu.key }"
|
|
>
|
|
{{ menu.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-box">
|
|
<NuxtChild />
|
|
</div>
|
|
</div>
|
|
|
|
<el-dialog
|
|
:visible="headDialog"
|
|
:show-close="false"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
width="13%"
|
|
title="头像上传"
|
|
center
|
|
>
|
|
<div class="UPhead">
|
|
<UploadImage1
|
|
UploadImage1Url="/upload/headimg"
|
|
@input="uploadSccess($event)"
|
|
:value="headimg"
|
|
>
|
|
<template v-slot:upload>
|
|
<div class="upload_BOX">
|
|
<div class="upload">
|
|
<img src="~assets/images/downloadIMG.png" alt />
|
|
<span>上传图片</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UploadImage1>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button size="mini" @click="headDialog = false">取 消</el-button>
|
|
<el-button size="mini" type="primary" @click="headSubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Setting from "~/setting";
|
|
export default {
|
|
name: "user",
|
|
auth: false,
|
|
data() {
|
|
return {
|
|
imgUrl: Setting.uplodBaseURL,
|
|
userInfo: JSON.parse(localStorage.getItem("userInfo")),
|
|
userMenu: [
|
|
{
|
|
key: 0,
|
|
link: "/user",
|
|
title: "账户与安全",
|
|
},
|
|
{
|
|
key: 3,
|
|
title: "收货地址",
|
|
link: "/user/address_list",
|
|
},
|
|
{
|
|
key: 6,
|
|
title: "我的收藏",
|
|
link: "/user/collect",
|
|
},
|
|
{
|
|
key: 5,
|
|
title: "我的积分",
|
|
link: "/user/integral",
|
|
},
|
|
{
|
|
key: 1,
|
|
title: "我的优惠券",
|
|
link: "/user/myCoupon",
|
|
},
|
|
{
|
|
key: 2,
|
|
title: "账户余额",
|
|
link: "/user/balance",
|
|
},
|
|
{
|
|
key: 4,
|
|
title: "我的发票",
|
|
link: "/user/invoice",
|
|
},
|
|
],
|
|
menuCur: 0,
|
|
indexCur: 0,
|
|
headDialog: false,
|
|
headimg: "",
|
|
};
|
|
},
|
|
|
|
watch: {
|
|
$route: {
|
|
immediate: true,
|
|
// 深度观察监听
|
|
deep: true,
|
|
handler: function (val, oldVal) {
|
|
var reg1 = new RegExp("/", "g");
|
|
this.userMenu.forEach((el, index) => {
|
|
if (el.link.replace(reg1, "") == val.path.replace(reg1, "")) {
|
|
this.menuCur = el.key;
|
|
this.indexCur = index;
|
|
}
|
|
});
|
|
},
|
|
},
|
|
},
|
|
fetch({ store }) {
|
|
store.commit("isHeader", true);
|
|
store.commit("isFooter", true);
|
|
},
|
|
head() {
|
|
return {
|
|
title: "个人中心-" + this.$store.state.titleCon,
|
|
};
|
|
},
|
|
mounted() {
|
|
var reg1 = new RegExp("/", "g");
|
|
if (this.$route.query.types) {
|
|
this.indexCur = JSON.parse(this.$route.query.types);
|
|
this.userMenu.forEach((el) => {
|
|
if (el.link.replace(reg1, "") == this.$route.path.replace(reg1, "")) {
|
|
this.menuCur = el.key;
|
|
}
|
|
});
|
|
} else {
|
|
this.indexCur = 0;
|
|
}
|
|
console.log(this.indexCur, `indexCur`);
|
|
|
|
console.log(this.menuCur, `active`);
|
|
},
|
|
methods: {
|
|
goPage(menu, index) {
|
|
this.menuCur = menu.key;
|
|
this.$router.push({
|
|
path: `${menu.link}`,
|
|
query: { types: `${index}` },
|
|
});
|
|
},
|
|
upLoadHeadImgDialog() {
|
|
this.headDialog = true;
|
|
},
|
|
|
|
uploadSccess(e) {
|
|
this.headimg = e;
|
|
},
|
|
// 上传头像
|
|
headSubmit() {
|
|
let obj = {
|
|
headimg: this.headimg,
|
|
};
|
|
this.$axios.post(`/member/modifyheadimg`, obj).then((res) => {
|
|
console.log(res);
|
|
this.$message({
|
|
message: res.message,
|
|
type: "success",
|
|
});
|
|
this.getInfo();
|
|
this.headDialog = false;
|
|
// this.$router.go(0);
|
|
});
|
|
},
|
|
getInfo() {
|
|
this.$axios
|
|
.post(`/member/info`)
|
|
.then((res) => {
|
|
this.userInfo = res.data;
|
|
localStorage.setItem("userInfo", JSON.stringify(res.data));
|
|
})
|
|
.catch((err) => {
|
|
this.$message.error(err);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.user-wrapper {
|
|
margin-bottom: 30px;
|
|
.content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.left-box {
|
|
width: 193px;
|
|
.user-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 170px;
|
|
background: #fff;
|
|
color: #282828;
|
|
font-size: 14px;
|
|
.svip {
|
|
background: url("~assets/images/vipUser.png") center/cover no-repeat;
|
|
width: 59px;
|
|
height: 62px;
|
|
position: relative;
|
|
.sign {
|
|
width: 32px;
|
|
height: 14px;
|
|
position: absolute;
|
|
bottom: -12px;
|
|
left: 50%;
|
|
margin-left: -18px;
|
|
}
|
|
}
|
|
img {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
margin: 9px 1px;
|
|
}
|
|
.name {
|
|
margin-top: 10px;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
.user-menu {
|
|
padding: 20px 0;
|
|
background: #fff;
|
|
.svip {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 100%;
|
|
overflow: hidden;
|
|
margin: auto;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.box:hover {
|
|
.el-icon-edit {
|
|
width: 100%;
|
|
background: rgba($color: #fff, $alpha: 0.5);
|
|
color: var(--themeColor);
|
|
// color: #aaa;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.el-icon-edit:before {
|
|
margin-left: 14px;
|
|
}
|
|
}
|
|
}
|
|
.name {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
text-align: center;
|
|
margin: 10px 0 39px;
|
|
}
|
|
.menu-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.menu-item {
|
|
display: block;
|
|
margin-bottom: 30px;
|
|
padding-left: 36px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
&.active {
|
|
color: var(--themeColor);
|
|
// background: url("~assets/images/left-icon.png") no-repeat left center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-box {
|
|
width: calc(1200px - 213px);
|
|
min-height: 330px;
|
|
padding-bottom: 30px;
|
|
margin-left: 20px;
|
|
background: #fff;
|
|
}
|
|
/deep/.el-dialog {
|
|
.el-dialog__header {
|
|
padding: 10px 20px 10px;
|
|
}
|
|
.el-dialog__body {
|
|
padding: 0px 28px 0px;
|
|
}
|
|
}
|
|
.UPhead {
|
|
.upload_BOX {
|
|
width: 152px !important;
|
|
height: 152px !important;
|
|
border-radius: 4px;
|
|
border: 1px solid #dddddd;
|
|
text-align: center;
|
|
|
|
.upload {
|
|
color: #ccc;
|
|
padding-top: 50px;
|
|
img {
|
|
margin: auto;
|
|
width: 22px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.router-tips {
|
|
height: 60px;
|
|
line-height: 60px;
|
|
font-size: 14px;
|
|
a {
|
|
color: #333;
|
|
}
|
|
span {
|
|
color: #999999;
|
|
}
|
|
}
|
|
</style>
|
|
|