69 lines
2.9 KiB
Vue
69 lines
2.9 KiB
Vue
<template>
|
|
<div class="columns is-multiline mx-0" v-if="userpack? userpack.length>0 : false">
|
|
<div class="column is-4 my-0 py-0" v-for="v in userpack">
|
|
<div :class="`px-5 py-4 ${v.expiry? 'has-background-light' : 'has-background-light'}`" style="border: 1px solid #D3D3D3; border-radius: 10px; margin-top: 25px;">
|
|
<div class="field is-grouped">
|
|
<div class="control is-expanded">
|
|
<Caption v-bind="{title: 'Gói dịch vụ', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
|
|
</div>
|
|
<div class="control">
|
|
<span class="tag is-medium is-danger" v-if="v.expiry"><span class="fs-18">Hết hạn</span></span>
|
|
<span class="tag is-medium is-primary is-clickable" v-else-if="v.package__code==='basic'" @click="upgrade(v)">
|
|
<span class="fs-18">Nâng cấp</span>
|
|
</span>
|
|
<span class="tag is-medium is-success ml-4" v-if="!v.expiry">
|
|
<span class="icon-text">
|
|
<span class="material-symbols-outlined fs-18">check</span>
|
|
<span class="fs-18 ml-1">Active</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<p class="fsb-16">
|
|
<span>{{ v.package__name }}</span>
|
|
</p>
|
|
<Caption class="mt-5" v-bind="{title: 'Thời hạn sử dụng', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
|
|
<p class="fsb-16">
|
|
<span>{{ $dayjs(v.from_date).format('DD/MM/YYYY') }}</span>
|
|
<span class="px-2">-</span>
|
|
<span>{{ $dayjs(v.to_date).format('DD/MM/YYYY') }}</span>
|
|
</p>
|
|
<Caption class="mt-5" v-bind="{title: 'Trạng thái', type: `has-text-${v.status__code==='buy'? 'primary' : 'findata'}`}"></Caption>
|
|
<p class="fsb-16">
|
|
<span>{{ v.status__name }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userpack: undefined
|
|
}
|
|
},
|
|
async created() {
|
|
let arr = await this.$getdata('userpack', {user: this.$store.state.login.id}, undefined)
|
|
arr.map(v=>{
|
|
let diff = this.$dayjs(v.to_date).diff(this.$dayjs(), 'day')
|
|
if(!v.expiry && diff<0) v.expiry = true
|
|
})
|
|
this.userpack = arr
|
|
let trial = this.$find(arr, {status__code: 'trial'})
|
|
let buy = arr.find(v=>v.status__code!=='trial' && v.expiry===false)
|
|
let data = {userpack: arr, trialInfo: trial? (trial.expiry? 'expiry' : 'active') : 'no', trial: trial, buy: buy}
|
|
this.$emit('info', data)
|
|
},
|
|
methods: {
|
|
upgrade(v) {
|
|
if(v.status__code==='trial') this.$router.push({path: '/service/trial-upgrade', query: {id: v.id}})
|
|
else {
|
|
this.$dialog(`Quý khách đang sử dụng gói dịch vụ <b>${v.package__name}</b>.
|
|
Để nâng cấp lên <b>gói cao hơn</b> vui lòng liên hệ với nhân viên của chúng tôi để được hỗ trợ. Xin cảm ơn.`,
|
|
'Liên hệ')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |