From 7ffb617367fb77d1194bb392e212f21535b7edae Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Tue, 31 Mar 2020 21:51:01 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9Auser-info?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   2 +
 src/icons/svg/copy.svg           |   1 +
 src/icons/svg/good.svg           |   2 +-
 src/icons/svg/save.svg           |   1 +
 src/store/getters.js             |   4 +-
 src/store/modules/user.js        |  13 ++--
 src/views/detail/index.vue       |   7 ++-
 src/views/user/index.vue         |  24 ++++---
 src/views/user/modules/Info.vue  |  85 +++++++++++++++++++++++++
 src/views/user/modules/Order.vue | 104 +++++++++++++++++++++++++++++++
 src/views/user/modules/Tools.vue |  25 ++++++++
 11 files changed, 246 insertions(+), 22 deletions(-)
 create mode 100644 src/icons/svg/copy.svg
 create mode 100644 src/icons/svg/save.svg
 create mode 100644 src/views/user/modules/Info.vue
 create mode 100644 src/views/user/modules/Order.vue
 create mode 100644 src/views/user/modules/Tools.vue

diff --git a/package.json b/package.json
index 6508732..e698a16 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/icons/svg/copy.svg b/src/icons/svg/copy.svg
new file mode 100644
index 0000000..e947913
--- /dev/null
+++ b/src/icons/svg/copy.svg
@@ -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>
\ No newline at end of file
diff --git a/src/icons/svg/good.svg b/src/icons/svg/good.svg
index ba5c894..596d378 100644
--- a/src/icons/svg/good.svg
+++ b/src/icons/svg/good.svg
@@ -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>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/icons/svg/save.svg b/src/icons/svg/save.svg
new file mode 100644
index 0000000..d6a619e
--- /dev/null
+++ b/src/icons/svg/save.svg
@@ -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>
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index f4344bb..f307e7b 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -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
 }
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 9341f16..c893347 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -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 => {
diff --git a/src/views/detail/index.vue b/src/views/detail/index.vue
index 032b865..f1b3abf 100644
--- a/src/views/detail/index.vue
+++ b/src/views/detail/index.vue
@@ -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" />
 
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index ec059cf..683d8b5 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -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>
diff --git a/src/views/user/modules/Info.vue b/src/views/user/modules/Info.vue
new file mode 100644
index 0000000..a3b59e0
--- /dev/null
+++ b/src/views/user/modules/Info.vue
@@ -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>
diff --git a/src/views/user/modules/Order.vue b/src/views/user/modules/Order.vue
new file mode 100644
index 0000000..e2356f9
--- /dev/null
+++ b/src/views/user/modules/Order.vue
@@ -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>
diff --git a/src/views/user/modules/Tools.vue b/src/views/user/modules/Tools.vue
new file mode 100644
index 0000000..72c7a0b
--- /dev/null
+++ b/src/views/user/modules/Tools.vue
@@ -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>