parent
4a74caa575
commit
4a311f1bfc
@ -1,70 +1,163 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="logo-wrap">
|
||||
<!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
|
||||
<a href="###">
|
||||
<img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="avatar-wrap" @click="$router.push('/cart')">
|
||||
<!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
|
||||
<!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Start -->
|
||||
<main class="main-wrap notification-page mb-xxl">
|
||||
<div class="nav-wrap">
|
||||
<!-- Notification Tabs Start -->
|
||||
<ul class="nav nav-tab2 nav-pills" id="pills-tab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<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>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<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>
|
||||
</ul>
|
||||
<!-- 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>
|
||||
<header class="header">
|
||||
<div class="logo-wrap">
|
||||
<!-- <i class="icon-menu icli nav-bar" @click="toggleMenu"></i> -->
|
||||
<a href="###">
|
||||
<img class="logo" src="@/assets/images/logo/logo_w.png" alt="logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="avatar-wrap" @click="$router.push('/cart')">
|
||||
<!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
|
||||
<!-- <van-icon name="cart-o" :badge="cartStore.cartNum" /> -->
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Start -->
|
||||
<main class="main-wrap notification-page mb-xxl">
|
||||
<div class="nav-wrap">
|
||||
<!-- Notification Tabs Start -->
|
||||
<ul class="nav nav-tab2 nav-pills" id="pills-tab" role="tablist">
|
||||
<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>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation" @click="active = 2">
|
||||
<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>
|
||||
</ul>
|
||||
<!-- 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 -->
|
||||
<section class="tab-content ratio2_1" id="pills-tabContent">
|
||||
<!-- Alert Content Start -->
|
||||
<div class="tab-pane fade show active" id="alert1" role="tabpanel" aria-labelledby="alert1-tab">
|
||||
<!-- Last 7 Days Start -->
|
||||
<!-- Tab Content Start -->
|
||||
<section class="tab-content ratio2_1" id="pills-tabContent" v-if="active == 1">
|
||||
<!-- Alert Content Start -->
|
||||
<div class="tab-pane fade show active" id="alert1" role="tabpanel" aria-labelledby="alert1-tab">
|
||||
<template v-for="(uf, i) in userFavorite" :key="i">
|
||||
<van-swipe-cell >
|
||||
<div class="offer-wrap">
|
||||
<!-- Offer Box Start -->
|
||||
<div class="offer-box" v-for="i in 5" :key="i">
|
||||
<div class="media">
|
||||
<div class="icon-wrap bg-theme-orange-light">
|
||||
<i class="iconly-Password icli"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h3 class="font-sm title-color">Wayne Hsu</h3>
|
||||
<span class="font-xs content-color">2023/2/14 13:00</span>
|
||||
</div>
|
||||
<span class="badges bg-theme-theme-light font-theme">查看訊息</span>
|
||||
<div class="offer-box" >
|
||||
<div class="media" @click="goCard(uf.nfcurl)">
|
||||
<div class="icon-wrap bg-theme-orange-light avatar">
|
||||
<img :src="uf.avatar" alt="avatar">
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<h3 class="font-sm title-color">{{ uf.real_name }}</h3>
|
||||
<div class="font-xs content-color">{{ uf.company }}</div>
|
||||
<div class="font-xs content-color">{{ uf.title }}</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>
|
||||
<!-- Last 7 Days End -->
|
||||
</div>
|
||||
<!-- Alert Content End -->
|
||||
</section>
|
||||
<!-- Tab Content End -->
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
<Footer/>
|
||||
<p>{{ v.company }}</p>
|
||||
<p>{{ v.time }}</p>
|
||||
</van-step>
|
||||
</van-steps>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Main End -->
|
||||
<Footer />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
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>
|
||||
|
||||
<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>
|
||||
Loading…
Reference in new issue