<style lang="scss" scoped>
.wrap_layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
margin-bottom: 20px;
}
.wrap_card {
width: 390px;
height: 100%;
padding-top: 10px;
background: white;
border-radius: 10px;
box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}
.card_title {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
margin: 0 20px;
font-weight: 700;
border-bottom: 1px solid #d5d5d5;
}
.card_content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
padding: 20px;
}
.card_subtitle {
font-size: 12px;
font-weight: 600;
}
.card_subcontent {
margin-top: 10px;
color: #757575;
}
.state {
padding: 5px;
font-size: 12px;
font-weight: 500;
color: white;
background: #3477ea;
border-radius: 5px;
}
.layout_title {
margin-bottom: 20px;
font-size: 30px;
font-weight: 600;
}
.wrap_right_info_nav {
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: 20px;
border-bottom: solid 1px #e5e5e5;
>p {
box-sizing: border-box;
flex: 1;
height: 70px;
padding: 28px 0 14px;
font-size: 15px;
color: #b8b8b8;
text-align: center;
letter-spacing: -0.75px;
cursor: pointer;
}
}
</style>
<template>
<div class="layout_title">
업체 목록
</div>
<div class="wrap_right_info_nav">
<p :class="getCurrentSectionStyle(0)" @click="selectRightSection(0)">
상담중
</p>
<p :class="getCurrentSectionStyle(1)" @click="selectRightSection(1)">
계약
</p>
<p :class="getCurrentSectionStyle(2)" @click="selectRightSection(2)">
종료
</p>
</div>
<div class="wrap_layout" v-if="isCurrentSection(0)">
<!-- eslint-disable-next-line max-len -->
<div class="wrap_card" v-for="(shop, index) in shopList.filter((v: any) => v.managerInfo?.id === userData.managerId && v.state === '상담중').slice((current-1)*pageSize, (current-1)*pageSize+pageSize)" :key="index">
<div class="wrap_card_content cursor" @click="pushQueryPage('receptionDetail', shop.id)">
<div class="card_title">
<div>
<span>{{ shop.shopName }}</span>
</div>
<div class="state">{{ shop.state }}</div>
</div>
<div class="card_content">
<div>
<div class="card_subtitle">이메일</div>
<div class="card_subcontent">{{ shop.email }}</div>
</div>
<div>
<div class="card_subtitle">전화번호</div>
<div class="card_subcontent">{{ shop.phoneNumber }}</div>
</div>
<div>
<div class="card_subtitle">지역</div>
<div class="card_subcontent">{{ shop.region }}</div>
</div>
<div>
<div class="card_subtitle">가입일</div>
<div class="card_subcontent">{{ dayjs(shop.createDate).format('YYYY. MM. DD') }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap_layout" v-if="isCurrentSection(1)">
<!-- eslint-disable-next-line max-len -->
<div class="wrap_card" v-for="(shop, index) in shopList.filter((v: any) => v.managerInfo?.id === userData.managerId && v.state === '계약(BASIC)' || v.state === '계약(PRO)').slice((current-1)*pageSize, (current-1)*pageSize+pageSize)" :key="index">
<div class="wrap_card_content cursor" @click="pushQueryPage('receptionDetail', shop.id)">
<div class="card_title">
<div>
<span>{{ shop.shopName }}</span>
</div>
<div class="state">{{ shop.state }}</div>
</div>
<div class="card_content">
<div>
<div class="card_subtitle">이메일</div>
<div class="card_subcontent">{{ shop.email }}</div>
</div>
<div>
<div class="card_subtitle">전화번호</div>
<div class="card_subcontent">{{ shop.phoneNumber }}</div>
</div>
<div>
<div class="card_subtitle">지역</div>
<div class="card_subcontent">{{ shop.region }}</div>
</div>
<div>
<div class="card_subtitle">가입일</div>
<div class="card_subcontent">{{ dayjs(shop.createDate).format('YYYY. MM. DD') }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap_layout" v-if="isCurrentSection(2)">
<!-- eslint-disable-next-line max-len -->
<div class="wrap_card" v-for="(shop, index) in shopList.filter((v: any) => v.managerInfo?.id === userData.managerId && v.state === '종료').slice((current-1)*pageSize, (current-1)*pageSize+pageSize)" :key="index">
<div class="wrap_card_content cursor" @click="pushQueryPage('receptionDetail', shop.id)">
<div class="card_title">
<div>
<span>{{ shop.shopName }}</span>
</div>
<div class="state">{{ shop.state }}</div>
</div>
<div class="card_content">
<div>
<div class="card_subtitle">이메일</div>
<div class="card_subcontent">{{ shop.email }}</div>
</div>
<div>
<div class="card_subtitle">전화번호</div>
<div class="card_subcontent">{{ shop.phoneNumber }}</div>
</div>
<div>
<div class="card_subtitle">지역</div>
<div class="card_subcontent">{{ shop.region }}</div>
</div>
<div>
<div class="card_subtitle">가입일</div>
<div class="card_subcontent">{{ dayjs(shop.createDate).format('YYYY. MM. DD') }}</div>
</div>
</div>
</div>
</div>
</div>
<a-pagination v-model:current="current" v-model:pageSize="pageSize" :total="shopList.length" show-less-items />
</template>