feat:user-info

master
ewall 5 years ago
parent 9c1d85c9db
commit 7ffb617367

@ -14,6 +14,7 @@
"url": "git+https://github.com/Ewall1106/mall"
},
"scripts": {
"dev": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
@ -27,6 +28,7 @@
"normalize.css": "^8.0.1",
"vant": "^2.5.5",
"vue": "^2.6.11",
"vue-clipboard2": "^0.3.1",
"vue-content-loader": "^0.2.3",
"vue-router": "^3.1.5",
"vue-scrollto": "^2.17.1",

@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M768 682.667v-512a85.333 85.333 0 00-85.333-85.334h-512a85.333 85.333 0 00-85.334 85.334v512A85.333 85.333 0 00170.667 768h512A85.333 85.333 0 00768 682.667zm-597.333-512h512v512h-512zM853.333 256v512A85.333 85.333 0 01768 853.333H256a85.333 85.333 0 0085.333 85.334H768A170.667 170.667 0 00938.667 768V341.333A85.333 85.333 0 00853.333 256z"/></svg>

After

Width:  |  Height:  |  Size: 482 B

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585298080705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2813" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M459.755102 637.387755c-5.22449 0-10.44898-2.089796-14.628571-6.269388l-104.489796-104.489796c-8.359184-8.359184-8.359184-21.420408 0-29.779591 8.359184-8.359184 21.420408-8.359184 29.779592 0l104.489795 104.489796c8.359184 8.359184 8.359184 21.420408 0 29.779591-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" p-id="2814" fill="#ea625b"></path><path d="M459.755102 637.387755c-5.22449 0-10.44898-2.089796-14.628571-6.269388-8.359184-8.359184-8.359184-21.420408 0-29.779591l208.979591-208.979592c8.359184-8.359184 21.420408-8.359184 29.779592 0 8.359184 8.359184 8.359184 21.420408 0 29.779592l-208.979592 208.979591c-4.702041 4.179592-9.926531 6.269388-15.15102 6.269388z" p-id="2815" fill="#ea625b"></path><path d="M512 929.959184c-230.4 0-417.959184-187.559184-417.959184-417.959184s187.559184-417.959184 417.959184-417.959184 417.959184 187.559184 417.959184 417.959184-187.559184 417.959184-417.959184 417.959184z m0-794.122449c-207.412245 0-376.163265 168.75102-376.163265 376.163265s168.75102 376.163265 376.163265 376.163265 376.163265-168.75102 376.163265-376.163265-168.75102-376.163265-376.163265-376.163265z" p-id="2816" fill="#ea625b"></path></svg>
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M459.755 637.388c-5.224 0-10.449-2.09-14.628-6.27l-104.49-104.49c-8.36-8.359-8.36-21.42 0-29.779 8.359-8.36 21.42-8.36 29.78 0l104.49 104.49c8.358 8.359 8.358 21.42 0 29.78-4.703 4.179-9.927 6.269-15.152 6.269z"/><path d="M459.755 637.388c-5.224 0-10.449-2.09-14.628-6.27-8.36-8.359-8.36-21.42 0-29.78l208.98-208.979c8.358-8.359 21.42-8.359 29.779 0 8.359 8.36 8.359 21.42 0 29.78l-208.98 208.98c-4.702 4.179-9.926 6.269-15.15 6.269z"/><path d="M512 929.96C281.6 929.96 94.04 742.4 94.04 512S281.6 94.04 512 94.04 929.96 281.6 929.96 512 742.4 929.96 512 929.96zm0-794.123c-207.412 0-376.163 168.75-376.163 376.163S304.587 888.163 512 888.163 888.163 719.413 888.163 512 719.413 135.837 512 135.837z"/></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 840 B

@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M718.188 520.572H305.821v-51.546c0-18.978 15.386-34.363 34.364-34.363h343.64c18.978 0 34.363 15.385 34.363 34.363v51.546z"/><path d="M512 958.709c-13.91 0-27.837-4.203-39.717-12.618l-175.83-124.594C191.214 738.909 133.996 622.15 133.996 491.733V255.222a34.37 34.37 0 0119.648-31.05L473.626 72.453a31.992 31.992 0 013.691-1.493c22.3-7.55 46.915-7.567 69.248 0a32.1 32.1 0 013.691 1.493l320.099 151.719a34.363 34.363 0 0119.648 31.05v236.512c0 130.434-57.217 247.184-161.098 328.757L551.733 946.082c-11.88 8.416-25.807 12.627-39.733 12.627zm-309.276-681.75v214.774c0 108.873 47.888 206.428 134.822 274.702L512 890.006 687.813 765.42c85.592-67.252 133.463-164.806 133.463-273.687V276.96l-298.37-141.416c-7.131-2.064-14.832-2.064-21.93 0L202.724 276.959z"/><path d="M512 676.532c-18.977 0-34.364-15.386-34.364-34.363v-329.1c0-18.978 15.387-34.364 34.364-34.364s34.364 15.386 34.364 34.363v329.1c0 18.978-15.387 34.364-34.364 34.364z"/></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -1,8 +1,6 @@
const getters = {
// base info
avatar: state => state.user.avatar,
name: state => state.user.name,
token: state => state.user.token,
userInfo: state => state.user.userInfo,
// address
selectedAddress: state => state.address.selectedAddress
}

@ -3,19 +3,15 @@ import { getToken, setToken, removeToken } from '@/utils/auth'
const state = {
token: getToken(),
name: '',
avatar: ''
userInfo: {}
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
SET_USER_INFO: (state, info) => {
state.userInfo = info
}
}
@ -63,8 +59,7 @@ const actions = {
if (!data) {
reject(new Error('获取基本信息失败,请重新登录'))
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
commit('SET_USER_INFO', data)
resolve(data)
})
.catch(error => {

@ -17,7 +17,12 @@
<Section @input="isSkuShow = $event" />
<Comment :rate="comment.rate" :num="comment.num" :tags="comment.tags" :list="comment.list" />
<Comment
:rate="comment.rate"
:num="comment.num"
:tags="comment.tags"
:list="comment.list"
/>
<Description :description="description" />

@ -1,15 +1,23 @@
<template>
<div class="user">user......</div>
<div class="user">
<Info />
<Order />
<Tools />
</div>
</template>
<script>
export default {
name: 'User'
}
</script>
<style lang="scss" scoped>
.user {
import Info from './modules/Info'
import Order from './modules/Order'
import Tools from './modules/Tools'
export default {
name: 'User',
components: {
Info,
Order,
Tools
}
}
</style>
</script>

@ -0,0 +1,85 @@
<template>
<div class="user-info">
<image-pic round width="50" height="50" :src="userInfo.avatar" />
<div class="main">
<div class="main__title">
<h3 class="name">{{userInfo.name}}</h3>
</div>
<div class="main__id" @click="doCopy(userInfo.id)">
<span class="code">用户id{{userInfo.id}}</span>
<span style="color:#fff">
<svg-icon icon-class="copy" :width="13" :height="13" />
</span>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
export default {
computed: {
...mapGetters(['userInfo'])
},
methods: {
doCopy(val) {
this.$copyText(val).then(
e => {
// success
this.$toast.success('Id复制成功')
},
e => {
// fail
console.log(e)
}
)
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.user-info {
display: flex;
flex-direction: row;
padding: 60px 24px 50px 24px;
background: $red;
border-radius: 100% 100% 100% 100% / 0% 0% 16% 16%;
.main {
margin-left: 18px;
.main__title {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 6px;
.name {
font-size: $large;
font-weight: 500;
color: #fff;
display: inline-block;
max-width: 350px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
}
}
.main__id {
margin-top: 24px;
.code {
font-size: $small;
font-weight: 400;
color: #fff;
margin-right: 10px;
}
}
}
}
</style>

@ -0,0 +1,104 @@
<template>
<div class="user-order">
<h3 class="order__title">
<p class="order__title__title">我的订单</p>
<p class="order__title__navigate">
<span>全部订单</span>
<van-icon name="arrow" color="#969799" />
</p>
</h3>
<div class="order__bd">
<div class="order__bd__item" v-for="(item,idx) in orderList" :key="idx">
<van-icon :name="item.icon" size="25" color="#dab309" :badge="item.count" />
<span class="name">{{item.name}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
orderList: [
{
icon: 'pending-payment',
name: '待支付',
count: 3
},
{
icon: 'peer-pay',
name: '待发货',
count: ''
},
{
icon: 'logistics',
name: '待收货',
count: ''
},
{
icon: 'chat-o',
name: '售后',
count: ''
}
]
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.user-order {
width: 702px;
height: 268px;
margin: 0 auto;
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
border-radius: 24px;
margin-top: 42px;
.order__title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 34px 24px 34px 34px;
.order__title__title {
font-size: 36px;
font-weight: 500;
color: $black;
}
.order__title__navigate {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 6px;
span {
font-size: 26px;
font-family: PingFangSC;
font-weight: 400;
color: $gray;
margin-right: 10px;
}
}
}
.order__bd {
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 46px;
.order__bd__item {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 14px;
.name {
font-size: 26px;
color: $gray;
margin-top: 16px;
}
}
}
}
</style>

@ -0,0 +1,25 @@
<template>
<div class="user-tools">
<van-cell title="Git仓库" is-link />
<van-cell title="文档说明" is-link />
<van-cell title="相关组件" is-link />
<van-cell title="推荐学习" is-link />
<van-cell title="退出登录" is-link />
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.user-tools {
width: 702px;
background: rgba(255, 255, 255, 1);
margin: 0 auto;
margin-top: 24px;
box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
border-radius: 24px;
overflow: hidden;
}
</style>
Loading…
Cancel
Save