|
|
@@ -0,0 +1,169 @@
|
|
|
+<template>
|
|
|
+ <div class="min-container">
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="avatar">
|
|
|
+ <img :src="userDetail.user_head_url" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="name">
|
|
|
+ <p>{{ userDetail.user_name }}</p>
|
|
|
+ <p>ID：{{userDetail.user_account }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-wrap">
|
|
|
+ <router-link :to="{path: '/order'}" tag="p">
|
|
|
+ <img alt="" src="./image/icon_order@2x.png">
|
|
|
+ <span>订单记录</span>
|
|
|
+ </router-link>
|
|
|
+ <router-link :to="{name: 'PlaceReserve'}" tag="p">
|
|
|
+ <img alt="" src="./image/icon_place@2x.png">
|
|
|
+ <span>订座记录</span>
|
|
|
+ </router-link>
|
|
|
+ </div>
|
|
|
+ <van-button
|
|
|
+ :disabled="booLock"
|
|
|
+ class="btn-logout"
|
|
|
+ type="default"
|
|
|
+ @click="fetchUserLogout">退出登录
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { Toast, Button } from 'vant'
|
|
|
+import { apiUserDetail, apiUserLogout } from './api/api'
|
|
|
+import { clearStore, clearLoginInfo } from '../../utils'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'index',
|
|
|
+ components: {
|
|
|
+ 'van-button': Button
|
|
|
+ },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ userDetail: {},
|
|
|
+ booLock: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.fetchUserDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async fetchUserDetail () {
|
|
|
+ try {
|
|
|
+ const { status, data, msg } = await apiUserDetail()
|
|
|
+ if (status) {
|
|
|
+ this.userDetail = data
|
|
|
+ } else {
|
|
|
+ Toast(msg)
|
|
|
+ }
|
|
|
+ } catch (err) {}
|
|
|
+ },
|
|
|
+ async fetchUserLogout () {
|
|
|
+ try {
|
|
|
+ this.booLock = true
|
|
|
+ const { status, msg } = await apiUserLogout()
|
|
|
+ if (status) {
|
|
|
+ clearLoginInfo()
|
|
|
+ clearStore()
|
|
|
+ this.$router.replace({ name: 'Login' })
|
|
|
+ } else {
|
|
|
+ Toast(msg)
|
|
|
+ }
|
|
|
+ this.booLock = false
|
|
|
+ } catch (err) {
|
|
|
+ this.booLock = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.min-container {
|
|
|
+ position: relative;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 46px 20px 46px;
|
|
|
+ background: url("./image/header.png") center top/100% auto no-repeat;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ display: block;
|
|
|
+ width: 51px;
|
|
|
+ height: 51px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #fff;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ margin-left: 14px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ font-size: 21px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 29px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.menu-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 172px;
|
|
|
+ height: 68px;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #F2F2F2;
|
|
|
+
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-left: 11px;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1F1E1E;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.btn-logout {
|
|
|
+ @include horiz-center;
|
|
|
+ bottom: 100px;
|
|
|
+}
|
|
|
+</style>
|
panyong
