Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<div class="card-wrapper" @click="goToDetail(notif)">
<div class="card-left">
<div>
<SvgTransaction v-if="notif.kind == 'F' || notif.kind == 'V' || notif.kind == 'E' || notif.kind == 'M' || notif.kind == 'T'"/>
<SvgComplete v-if="notif.kind == 'C' || notif.kind == 'O' || notif.kind == 'H'"/>
<SvgInvestment v-if="notif.kind == 'P'"/>
<SvgWallet v-if="notif.kind == 'W'"/>
<SvgUser v-if="notif.kind == 'A'"/>
<SvgNews v-if="notif.kind == 'N'"/>
</div>
<div class="card-content text-left">
<p class="text-small-14 text-weight-bold">{{ notif.title }} <span v-if="!notif.read" class="text-red">•</span></p>
<p class="text-small-14 truncate-text" style="margin-top: -16px; color: #262626">{{ notif.message }}</p>
</div>
</div>
<div class="time-info"> {{ formatDateFromNow(removeTimezone(notif.createdAt)) }} </div>
</div>
</template>
<script lang="ts">
import { UserNotification } from '@/common/models';
import { defineComponent } from 'vue'
import SvgUser from '../svg/SvgUser.vue';
import SvgWallet from '../svg/SvgWallet.vue';
import {formatDateFromNow, removeTimezone } from '@/utils/timeUtilities';
import SvgNews from '../svg/SvgNews.vue';
import SvgTransaction from '../svg/SvgTransaction.vue';
import SvgInvestment from '../svg/SvgInvestment.vue';
import { useRouter } from 'vue-router';
import SvgComplete from '../svg/SvgComplete.vue';
export default defineComponent({
props:{
notif: {
type: Object as ()=> UserNotification,
required: true
}
},
setup() {
const router = useRouter();
const goToDetail = (opt: UserNotification)=>{
var ids:string[] = [];
if(opt.kind == "P" || opt.kind == "E" || opt.kind == "M" || opt.kind == "T")
ids = opt.codeKind.split(',');
switch (opt.kind) {
case 'F': router.push(`/transaction/property/${opt.codeKind}`); break;
case 'M': router.push(`/modular/${ids[0]}/update`); break;
case 'T': router.push(`/property/${ids[0]}`); break;
case 'O': router.push(`/bricks/project/${opt.codeKind}`); break;
case 'C': router.push(`/venture/project/${opt.codeKind}`); break;
case 'E': router.push(`/complex/project/${ids[0]}/phase/${ids[1]}`); break;
case 'V': router.push(`/transaction`); break;
case 'P': router.push(`/customer/management/${ids[0]}/fixed-income/${ids[1]}`); break;
case 'I': router.push(`/investment/${opt.codeKind}`); break;
case 'W': opt.title.toLowerCase().includes('withdraw') ? router.push(`/withdraw/${opt.codeKind}`) : router.push(`/topup/${opt.codeKind}`); break;
case 'A': router.push(`/kyc/${opt.codeKind}`); break;
}
}
return {formatDateFromNow, removeTimezone, goToDetail};
},
components: { SvgUser, SvgWallet, SvgNews, SvgTransaction, SvgInvestment, SvgComplete }
})
</script>
<style scoped lang="sass">
.card-wrapper
display: flex
align-items: center
justify-content: space-between
width: auto
height: auto
padding-top: 12px
width: 100%
.card-left
display: inline-flex
align-items: center
flex: 1 1 0%
padding-right: 16px
.card-content
display: flex
flex-direction: column
margin-left: 15px
.text-small-14
font-size: 14px
.time-info
font-size: 12px
width: auto
flex: none
color: #A6A6A6
</style> |