Base Login

components/UserPack.vue

@@ -0,0 +1,69 @@
+<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>