H5：新增个人中心

htmldev/dashboard/README.md

@@ -24,7 +24,7 @@ npm run lint
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
 # todo list
-- [ ] 我订单状态整理
+- [x] 我订单状态整理
 - [ ] 新增个人中心（菜单配置）
 - [ ] 订座下单测试
 - [ ] api接口配置loading

htmldev/dashboard/src/router/index.js

@@ -13,27 +13,20 @@ const routes = [
   {
     path: '/404',
     name: '404',
-    component: _import('page/404/index'),
-    meta: {
-      isUseVanTabbar: false
-    }
+    component: _import('page/404/index')
   },
   {
     path: '/login',
     name: 'Login',
     component: _import('login/index'),
     meta: {
-      title: '登录',
-      isUseVanTabbar: false
+      title: '登录'
     }
   },
   {
     path: '/',
     name: 'Index',
     component: _import('views/index/index'),
-    meta: {
-      isUseVanTabbar: true
-    },
     redirect: '/place/list'
   },
   {
@@ -43,8 +36,7 @@ const routes = [
     meta: {
       title: '订座',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: true
+      keepAlive: false
     }
   },
   {
@@ -54,8 +46,7 @@ const routes = [
     meta: {
       title: '我的订座',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: true
+      keepAlive: false
     }
   },
   {
@@ -65,8 +56,7 @@ const routes = [
     meta: {
       title: '我的订座二维码',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: false
+      keepAlive: false
     }
   },
   {
@@ -76,8 +66,7 @@ const routes = [
     meta: {
       title: '支付方式',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: false
+      keepAlive: false
     },
     props: route => ({
       alipayForm: route.query.alipayForm,
@@ -91,8 +80,7 @@ const routes = [
     meta: {
       title: '演出计划',
       isUseCache: false,
-      keepAlive: true,
-      isUseVanTabbar: false
+      keepAlive: true
     },
     props: route => ({
       alipayForm: route.query.alipayForm,
@@ -106,8 +94,7 @@ const routes = [
     meta: {
       title: '点单',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: false
+      keepAlive: false
     }
   },
   {
@@ -117,8 +104,7 @@ const routes = [
     meta: {
       title: '订单',
       isUseCache: false,
-      keepAlive: false,
-      isUseVanTabbar: false
+      keepAlive: false
     }
   },
   {
@@ -132,8 +118,7 @@ const routes = [
         meta: {
           title: '订单',
           isUseCache: false,
-          keepAlive: false,
-          isUseVanTabbar: false
+          keepAlive: false
         }
       }
     ]
@@ -157,6 +142,16 @@ const routes = [
       isUseCache: false,
       keepAlive: false
     }
+  },
+  {
+    path: '/mine',
+    name: 'Mine',
+    component: _import('views/mine/index'),
+    meta: {
+      title: '个人中心',
+      isUseCache: false,
+      keepAlive: false
+    }
   }
 ]
 

htmldev/dashboard/src/views/mine/api/api.js

@@ -0,0 +1,17 @@
+import request from '@/api/request'
+
+/**
+ * 用户详情
+ */
+export const apiUserDetail = () => request({
+  method: 'GET',
+  url: '/api/v1/user/detail'
+})
+
+/**
+ * 退出登录
+ */
+export const apiUserLogout = () => request({
+  method: 'GET',
+  url: '/api/v1/user/logout'
+})

htmldev/dashboard/src/views/mine/index.vue

@@ -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>