加入人脈紀錄

3 years ago · 9493be2150
parent b24e5bbccf
commit 9493be2150
7 changed files with 173 additions and 129 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "axios": "^0.26.1",
        "core-js": "^3.6.5",
+        "dayjs": "^1.11.7",
        "vant": "^3.4.7",
        "vue": "^3.0.0",
        "vue-router": "^4.0.0-0",
@ -5422,6 +5423,11 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
    "node_modules/debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@ -19164,6 +19170,11 @@
        "assert-plus": "^1.0.0"
      }
    },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
    "debug": {
      "version": "4.3.4",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
  "dependencies": {
    "axios": "^0.26.1",
    "core-js": "^3.6.5",
+    "dayjs": "^1.11.7",
    "vant": "^3.4.7",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="<%= BASE_URL %>css/flex2html.css">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="stylesheet" href="<%= BASE_URL %>css/flex2html.css" />
    <title><%= htmlWebpackPlugin.options.title %></title>
-<style>
-[v-cloak] {
+    <style>
+      [v-cloak] {
        display: none;
-}  
-</style>
+      }
+    </style>
  </head>
  <body>
    <noscript>
@ -21,4 +24,4 @@
    <!-- built files will be auto injected -->
    <script src="<%= BASE_URL %>js/flex2html.min.js"></script>
  </body>
-  </html>
+</html>
--- a/src/assets/css/common.less
+++ b/src/assets/css/common.less
@ -19,4 +19,5 @@ p {
 :root{
    --van-nav-bar-background-color: #000;
    --van-nav-bar-title-text-color: #FFF;
+	--van-nav-bar-text-color: #fff;
 }
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/plugins/vant.js
+++ b/src/plugins/vant.js
@ -1,7 +1,7 @@
 import { 
    Locale , Button , Toast, ShareSheet , NavBar ,
    Tab, Tabs, Form, Field, CellGroup , Uploader ,
-    Dialog
+    Dialog, Popup, List, Step, Steps 
 } from 'vant'

 import zhTW from 'vant/es/locale/lang/zh-TW';
@ -20,4 +20,9 @@ export function vant(app){
        .use(CellGroup)
        .use(Uploader)
        .use(Dialog)
+        .use(Popup)
+        .use(List)
+        .use(Step)
+        .use(Steps)
+
 }
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,6 +1,6 @@
 <template>
  <div id="home">
-    <van-nav-bar title="我的名片" />
+    <van-nav-bar title="我的名片"  right-text="人脈紀錄" @click-right="showUserConn = true"/>
    <div class="tab-section" v-cloak>
      <van-tabs :lazy-render="true" v-model:active="activeName" v-show="user.nc_type > 1 && cid !== '1'">
        <van-tab title="我的名片" name="0">
@ -18,17 +18,16 @@
        </div>
      </div>
      <div class="recommend" v-if="activeName == '0'">
+        <div>
          <img class="avatar" :src="user.avatar" style="display:block; margin:auto;">
          <br />
-        <p style="text-align: center; font-size: 35px; "><strong>{{user.name}}</strong><br /></p>
-        <p style="text-align: center; font-size: 20px;">{{user.company}}<br />
-        {{user.title}}</p>
+          <p style="text-align: center; font-size: 35px; "><strong>{{ user.name }}</strong><br /></p>
+          <p style="text-align: center; font-size: 20px;">{{ user.company }}<br />
+            {{ user.title }}</p>
          <hr width=85%>
          <p style="text-align: center; font-size: 15px;" v-html="user.mark">
          </p>
        </div>
-    </div>
-
        <div class="btn-area" v-if="user.level > 0">
          <dl class="dl02">
            <a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
@ -70,10 +69,28 @@
        </div>

      </div>
+    </div>
+  </div>
+  <van-popup v-model:show="showUserConn" position="right" :style="{ width: '70%',height: '100%' }">
+    <van-steps direction="vertical" :active="0">
+      <van-step v-for="(v,i) in userConnections" :key="i">
+        <div class="user-conn">
+          <div class="user-conn-left">{{ v.name }}</div>
+          <div class="user-conn-right" @click="goUC(v.nfcurl)">
+            查看
+          </div>
+        </div>
+        <p>{{ v.company }}</p>
+        <p>{{ v.time }}</p>
+      </van-step>
+    </van-steps>    
+  </van-popup>
 </template>

 <script>
-import { nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
+import dayjs from 'dayjs'
+
+import { nextTick, onBeforeMount, reactive, ref, toRefs, watch, computed } from 'vue'

 import { checkUser, getCard, getCusCard, getVipCard } from '@/api'

@ -109,6 +126,7 @@ export default {
    //取得user id
    let token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
    let cardid = encodeURIComponent(new URLSearchParams(window.location.search).get('cardid'))
+    let nouc = encodeURIComponent(new URLSearchParams(window.location.search).get('nouc'))

    cid.value = cardid

@ -141,7 +159,6 @@ export default {

      const card1Res = await getCard(params)

-      console.log('card1Res', card1Res)
      if (card1Res.code !== 200) {
        Toast('操作錯誤')
        return
@ -149,8 +166,8 @@ export default {
      }

      changeMeta({
-        site_name:"Utel電子名片",
-        title: card1Res.data.name +" "+card1Res.data.company,
+        site_name: "Utel電子名片",
+        title: card1Res.data.name + " " + card1Res.data.company,
        description: card1Res.data.mark,
        image: card1Res.data.avatar
      })
@ -170,6 +187,12 @@ export default {
        state.vip_card = []
      }

+      //儲存人脈
+      if(nouc != '1'){
+        saveConnection(card1Res.data)
+      }
+
+    })

      // activeName.value = '0'
      watch(() => activeName.value, function (newVal, oldVal) {
@ -180,7 +203,6 @@ export default {
        }
      }, { immediate: true })

-    })

    async function showFlex(id) {

@ -223,7 +245,7 @@ export default {

              await nextTick()

-              if(flexRef.value){                
+              if (flexRef.value) {
                flexRef.value.innerHTML = ''
              }
              flex2html("flex", state.flexContent)
@ -236,12 +258,58 @@ export default {
      }
    }

+    //人脈紀錄
+    const showUserConn = ref(false)
+
+    function saveConnection(data){
+      
+      let connData = {
+        userid: data.user_id,
+        name: data.name,
+        nfcurl: data.nfcurl,
+        company: data.company,
+        title: data.title,
+        avatar: data.avatar,
+        time: dayjs().format('YYYY/MM/DD HH:mm')
+      }
+
+      let n_user_conn = []
+
+      if(localStorage.getItem('user_conn')){
+        //移除加入過的資料
+        let i = 0
+        let t_connData = JSON.parse(localStorage.getItem('user_conn')).filter(item=>{
+          i++
+          return item.userid !=connData.userid && i < 5
+        })
+
+        n_user_conn = [connData,...t_connData]
+      }else{
+        n_user_conn = [connData]
+      }
+
+      localStorage.setItem('user_conn',JSON.stringify(n_user_conn)) 
+    }
+
+    
+    const userConnections = computed(()=>{
+      return JSON.parse(localStorage.getItem('user_conn'))
+    })
+
+    const goUC = (url)=>{
+      showUserConn.value = false
+      window.location.href = url + '&nouc=1'
+    }
+
    return {
      ...toRefs(state),
+      showUserConn,
      activeName,
      cid,
      flexRef,
-      isIOs
+      isIOs,
+      userConnections,
+      goUC
    }
  }
 }
@ -334,9 +402,23 @@ export default {
 .recommend {
  width: 100%;
  padding-top: 20px;
-  .avatar{
+
+  .avatar {
    width: 50%;
    border-radius: 50%;
  }
 }
+
+.user-conn{
+  display: flex;
+  margin-bottom: 10px;
+  .user-conn-left{
+    flex: 1;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .user-conn-right{
+    width: 50px
+  }
+}
 </style>