parent
4a74caa575
commit
4a311f1bfc
@ -1,70 +1,163 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="logo-wrap">
|
<div class="logo-wrap">
|
||||||
<!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
|
<!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
|
||||||
<a href="###">
|
<a href="###">
|
||||||
<img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
|
<img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="avatar-wrap" @click="$router.push('/cart')">
|
<div class="avatar-wrap" @click="$router.push('/cart')">
|
||||||
<!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
|
<!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
|
||||||
<!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
|
<!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Start -->
|
<!-- Main Start -->
|
||||||
<main class="main-wrap notification-page mb-xxl">
|
<main class="main-wrap notification-page mb-xxl">
|
||||||
<div class="nav-wrap">
|
<div class="nav-wrap">
|
||||||
<!-- Notification Tabs Start -->
|
<!-- Notification Tabs Start -->
|
||||||
<ul class="nav nav-tab2 nav-pills" id="pills-tab" role="tablist">
|
<ul class="nav nav-tab2 nav-pills" id="pills-tab" role="tablist">
|
||||||
<li class="nav-item" role="presentation">
|
<li class="nav-item" role="presentation" @click="active = 1">
|
||||||
<button class="nav-link active" id="alert1-tab" data-bs-toggle="pill" data-bs-target="#alert1" type="button" role="tab" aria-controls="alert1" aria-selected="true">最愛</button>
|
<button class="nav-link active" id="alert1-tab" data-bs-toggle="pill" data-bs-target="#alert1" type="button"
|
||||||
</li>
|
role="tab" aria-controls="alert1" aria-selected="true">最愛</button>
|
||||||
<li class="nav-item" role="presentation">
|
</li>
|
||||||
<button class="nav-link" id="offer1-tab" data-bs-toggle="pill" data-bs-target="#offer1" type="button" role="tab" aria-controls="offer1" aria-selected="true">紀錄</button>
|
<li class="nav-item" role="presentation" @click="active = 2">
|
||||||
</li>
|
<button class="nav-link" id="offer1-tab" data-bs-toggle="pill" data-bs-target="#offer1" type="button" role="tab"
|
||||||
</ul>
|
aria-controls="offer1" aria-selected="true">紀錄</button>
|
||||||
<!-- Notification Tabs End -->
|
</li>
|
||||||
<!-- <button class="font-md font-theme"><img src="assets/icons/svg/d-check.svg" alt="check" /> Mark all as read</button> -->
|
</ul>
|
||||||
</div>
|
<!-- Notification Tabs End -->
|
||||||
|
<!-- <button class="font-md font-theme"><img src="assets/icons/svg/d-check.svg" alt="check" /> Mark all as read</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Tab Content Start -->
|
<!-- Tab Content Start -->
|
||||||
<section class="tab-content ratio2_1" id="pills-tabContent">
|
<section class="tab-content ratio2_1" id="pills-tabContent" v-if="active == 1">
|
||||||
<!-- Alert Content Start -->
|
<!-- Alert Content Start -->
|
||||||
<div class="tab-pane fade show active" id="alert1" role="tabpanel" aria-labelledby="alert1-tab">
|
<div class="tab-pane fade show active" id="alert1" role="tabpanel" aria-labelledby="alert1-tab">
|
||||||
<!-- Last 7 Days Start -->
|
<template v-for="(uf, i) in userFavorite" :key="i">
|
||||||
|
<van-swipe-cell >
|
||||||
<div class="offer-wrap">
|
<div class="offer-wrap">
|
||||||
<!-- Offer Box Start -->
|
<div class="offer-box" >
|
||||||
<div class="offer-box" v-for="i in 5" :key="i">
|
<div class="media" @click="goCard(uf.nfcurl)">
|
||||||
<div class="media">
|
<div class="icon-wrap bg-theme-orange-light avatar">
|
||||||
<div class="icon-wrap bg-theme-orange-light">
|
<img :src="uf.avatar" alt="avatar">
|
||||||
<i class="iconly-Password icli"></i>
|
</div>
|
||||||
</div>
|
<div class="media-body">
|
||||||
<div class="media-body">
|
<h3 class="font-sm title-color">{{ uf.real_name }}</h3>
|
||||||
<h3 class="font-sm title-color">Wayne Hsu</h3>
|
<div class="font-xs content-color">{{ uf.company }}</div>
|
||||||
<span class="font-xs content-color">2023/2/14 13:00</span>
|
<div class="font-xs content-color">{{ uf.title }}</div>
|
||||||
</div>
|
|
||||||
<span class="badges bg-theme-theme-light font-theme">查看訊息</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Offer Box End -->
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #right>
|
||||||
|
<van-button square text="删除" type="danger" class="delete-button" @click="handleDeleteUF(uf.ufid)"/>
|
||||||
|
</template>
|
||||||
|
</van-swipe-cell>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<!-- Alert Content End -->
|
||||||
|
</section>
|
||||||
|
<!-- Tab Content End -->
|
||||||
|
|
||||||
|
<section class="tab-content ratio2_1" id="pills-tabContent" v-else>
|
||||||
|
<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">
|
||||||
|
<i class="icon-heart" @click="handleAddFavorite(v.userid)">收藏</i>
|
||||||
|
<i class="icon-eye-circle" @click="goCard(v.nfcurl)">查看</i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Last 7 Days End -->
|
<p>{{ v.company }}</p>
|
||||||
</div>
|
<p>{{ v.time }}</p>
|
||||||
<!-- Alert Content End -->
|
</van-step>
|
||||||
</section>
|
</van-steps>
|
||||||
<!-- Tab Content End -->
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<!-- Main End -->
|
<!-- Main End -->
|
||||||
<Footer/>
|
<Footer />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
import Footer from '@/components/Footer'
|
import Footer from '@/components/Footer'
|
||||||
|
|
||||||
|
import { getUserFavorite, getUserConnections, addFavorite, delFavorite } from '@/api/user'
|
||||||
|
|
||||||
|
import { Toast } from 'vant'
|
||||||
|
|
||||||
|
const active = ref(1)
|
||||||
|
|
||||||
|
const userFavorite = ref()
|
||||||
|
|
||||||
|
const userConnections = ref()
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
let res = await getUserFavorite()
|
||||||
|
if (res.code === 200) {
|
||||||
|
userFavorite.value = res.data
|
||||||
|
}
|
||||||
|
let res2 = await getUserConnections()
|
||||||
|
if (res2.code === 200) {
|
||||||
|
userConnections.value = JSON.parse(res2.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const goCard = (url) => {
|
||||||
|
window.open(url + '&nouc=1', '_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAddFavorite = async (userid) => {
|
||||||
|
let res = await addFavorite(userid)
|
||||||
|
if (res.code === 200) {
|
||||||
|
return Toast('收藏成功')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteUF = async (id) => {
|
||||||
|
let res = await delFavorite(id)
|
||||||
|
if(res.code === 200){
|
||||||
|
userFavorite.value = userFavorite.value.filter(item => item.id !== id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="less" scoped>
|
||||||
|
.media {
|
||||||
|
.avatar {
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-conn {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
.user-conn-left {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-conn-right {
|
||||||
|
width: 70px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-button {
|
||||||
|
height: 100%;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in new issue