|
|
@@ -0,0 +1,187 @@
|
|
|
+<template>
|
|
|
+ <div class="scroll-wrapper">
|
|
|
+ <div class="scroll-track">
|
|
|
+
|
|
|
+ <q-card
|
|
|
+ v-for="item in data"
|
|
|
+ :key="item.id"
|
|
|
+ class="proposal-card"
|
|
|
+ flat
|
|
|
+ >
|
|
|
+ <div class="row no-wrap items-center">
|
|
|
+
|
|
|
+ <q-avatar size="48px" class="q-mr-sm">
|
|
|
+ <img :src="item.avatar" />
|
|
|
+ </q-avatar>
|
|
|
+
|
|
|
+ <div class="content">
|
|
|
+
|
|
|
+ <!-- HEADER -->
|
|
|
+ <div class="row justify-between items-center">
|
|
|
+ <div>
|
|
|
+ <div class="name">
|
|
|
+ {{ item.provider_name }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="rating">
|
|
|
+ {{ item.avarage_rating }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="distance">
|
|
|
+ {{ item.distance }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- DATA -->
|
|
|
+ <div class="datetime">
|
|
|
+ {{ item.date }} <br />
|
|
|
+ {{ item.start_time }} {{ item.end_time }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- PREÇO -->
|
|
|
+ <div class="price">
|
|
|
+ {{ 'R$ ' + chooseprice(item.period_type, item.daily_price_8h) }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- LABEL -->
|
|
|
+ <!-- <div class="type">
|
|
|
+ Candidato <span>sob medida</span>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- BOTÕES -->
|
|
|
+ <div class="actions">
|
|
|
+ <q-btn label="recusar" flat class="btn-reject" />
|
|
|
+ <q-btn label="aceitar" class="btn-accept" @click="() => handleAcceptProposal(item.id)" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </q-card>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { acceptProposal } from 'src/api/customSchedules'
|
|
|
+import { chooseprice } from 'src/helpers/utils'
|
|
|
+
|
|
|
+defineProps({
|
|
|
+ data: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const handleAcceptProposal = async (proposalId) => {
|
|
|
+ // isLoading.value = true
|
|
|
+ try {
|
|
|
+ await acceptProposal(proposalId)
|
|
|
+
|
|
|
+ // emit('refreshData')
|
|
|
+ // onDialogOK()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ } finally {
|
|
|
+ // isLoading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.scroll-wrapper {
|
|
|
+ overflow-x: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-track {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.scroll-track::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+
|
|
|
+.proposal-card {
|
|
|
+ min-width: 240px;
|
|
|
+ max-width: 240px;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 12px;
|
|
|
+ background: white;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.name {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.age {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.rating {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.distance {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #777;
|
|
|
+}
|
|
|
+
|
|
|
+.datetime {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #777;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.price {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #6b4eff;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.type {
|
|
|
+ font-size: 11px;
|
|
|
+ margin-top: 4px;
|
|
|
+ color: #6b4eff;
|
|
|
+}
|
|
|
+
|
|
|
+.type span {
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-reject {
|
|
|
+ background: #eee6ff;
|
|
|
+ color: #6b4eff;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ font-size: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-accept {
|
|
|
+ background: linear-gradient(90deg, #6b4eff, #9f6bff);
|
|
|
+ color: white;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 2px 10px;
|
|
|
+ font-size: 11px;
|
|
|
+}
|
|
|
+</style>
|