evshop_h5/src/pages/My/Index.vue

<template>
    <!-- Main Start -->
    <main class="main-wrap account-page mb-xxl">
      <div class="account-wrap section-b-t">
        <div class="user-panel">
          <div class="media">
            <a href="javascript:void(0)"> 
              <img :src="userInfo.headimg" alt="avatar" />
            </a>
            <div class="media-body">
              <a href="javascript:void(0)" class="title-color">
                {{ userInfo.line_name }}
                <span class="content-color font-sm">非會員</span>
              </a>
            </div>
            <div class="media-right" @click="$router.push('/user/setting')">
              <i class="icon-pencil"></i>
            </div>
          </div>
          <div class="user-info-block">
          <div class="user-info">
            <div>
              餘額
            </div>
            <div>
              ${{ userInfo.user_money }}              
            </div>
          </div>
          <div class="user-info">
            <div>
              未入帳
            </div>
            <div>
              ${{ userInfo.frozen_money }}
            </div>
          </div>
          <div class="user-info">
            <div>
              推薦人數
            </div>
            <div>
              {{ userInfo.refer_num}}人              
            </div>
          </div>
          <div class="user-info">
            <div>
              分潤金額
            </div>
            <div>
              $0         
            </div>
          </div>

        </div>
        </div>

        <!-- Navigation Start -->
        <ul class="navigation">
          <li>
            <a class="nav-link title-color font-sm">
              <i class="icon-account icli"></i>
              <span>推薦人</span>
            </a>
            <a>
              {{ userInfo.parent_name || '沒有推薦人'}}
            </a>
          </li>
          <li>
            <a href="javacript:void(0)" class="nav-link title-color font-sm">
              <i class="icon-link-variant icli"></i>
              <span>推薦連結</span>
            </a>
              <button v-clipboard:copy="userInfo.refer_url"
              v-clipboard:success="onSuccess"
              v-clipboard:error="onError"
              >複制</button>
          </li>
          <li @click="$router.push('/address')">
            <a class="nav-link title-color font-sm">
              <i class="icon-map-marker icli"></i>
              <span>收貨地址</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
          <li @click="$router.push('/user/order')">
            <a class="nav-link title-color font-sm">
              <i class="icon-order icli"></i>
              <span>我的訂單</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
          <li @click="$router.push('/user/account')">
            <a class="nav-link title-color font-sm">
              <i class="icon-home icli"></i>
              <span>餘額管理</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
          <li @click="$router.push('/user/share')">
            <a  class="nav-link title-color font-sm">
              <i class="icon-share icli"></i>
              <span>我的推薦</span>
            </a>
            <a class="arrow">
              <i class="icon-chevron-right"></i>
            </a>
          </li>
        </ul>
        <!-- Navigation End -->
        <button class="log-out" data-bs-toggle="offcanvas" data-bs-target="#confirmation" aria-controls="confirmation" @click="handleLogout">
          <i class="icon-arrow-right-bold-box icli"></i>
          登出
        </button>
      </div>
    </main>
    <!-- Main End -->
</template>

<script setup>
import liff from '@line/liff';
import Cookies from 'js-cookie';

import { onMounted , ref } from 'vue'

import { useRouter } from 'vue-router'
import { useShopStore } from '@/store/Shop'

import { getUserInfo } from '@/services/user'
import { showToast } from 'vant';


(async ()=>{
  await liff.init({ liffId: '1657782615-qGK9WQ5m' });
})()

const router = useRouter()

const shopStore = useShopStore()

const userInfo = ref({})

onMounted(async () => {

  let res = await getUserInfo()

  if(res.code === 200){
    userInfo.value = res.data
  }
})

const handleLogout = () => {
  Cookies.remove('token',{ domain: shopStore.sso_domain})
  Cookies.remove('uid',{ domain: shopStore.sso_domain})

  // liff.logout()
  router.replace('/login')
}

// 推薦連結
const onSuccess = () => {
  showToast('複制成功')
}

const onError = () => {
  showToast('複制失敗')
}
</script>

<style lang="less" scoped>
.media{
  .media-body{
    width: 100%;
  }
  .media-right{
  width: 100%;
  vertical-align: text-top;
  text-align: right;
  i{
    font-size: 20px;
  }
  }

}
.user-info-block{
  box-sizing: content-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .user-info{
    // flex: 1;
    border: 1px gray solid;
    border-radius: 8px;
    margin: 5px 0;
    padding: 5px 10px;
    width: 48%;
  }
}

</style>