login-v2/components/ServicePack.vue

<template>
  <div class="py-4 has-background-light" style="border: 1px solid #D3D3D3; border-radius: 10px; margin-top: 30px;">
    <div class="columns mx-0 is-mobile border-bottom pb-3 mb-5">
    <div class="column is-6" v-if="viewport>1">
      <p class="fsb-20">
        <span :class="`tag is-large is-dark`">TÍNH NĂNG</span>
      </p>
    </div>
    <div :class="`column is-${viewport>1? 3 : 6}`" v-for="v in packages">
      <div class="field is-grouped is-grouped-multiline">
        <div class="control pr-4">
          <span :class="`tag is-large is-${v.code==='vip'? 'findata' :  'primary'}`"><b>{{ v.name }}</b></span>
        </div>
        <!--
        <div class="control">
          <p class="fsb-17 has-text-danger">
              <span>{{$numtoString(v.price, 'vi-VN')}} đ / tháng</span>
              <span class="ml-3" v-if="viewport>=4 && (v.origin_price>v.price)">(-{{$formatUnit((v.origin_price-v.price)/v.origin_price, 0.01, 0, true)}})</span>
          </p>
          <p class="fsb-17 has-text-danger" v-if="viewport<=3">
            <span v-if="v.origin_price>v.price">(-{{$formatUnit((v.origin_price-v.price)/v.origin_price, 0.01, 0, true)}})</span>
          </p>
          <p style="text-decoration: line-through;">
            <span class="fsb-17 has-text-grey">{{$numtoString(v.origin_price, 'vi-VN')}} đ / tháng</span>
          </p>
        </div>-->
      </div>
      <div class="field is-grouped is-grouped-multiline mt-4">
        <!--<div class="control pr-4" v-if="packinfo? packinfo.trialInfo==='no' : true">
          <button class="button is-dark" @click="trial(v)">Dùng thử</button> 
        </div>-->
        <div class="control">
          <button :class="`button is-danger`" @click="buy(v)">Mua ngay</button>
        </div>
      </div>
    </div>
  </div>
  <div class="columns mx-0 is-mobile" v-for="v in feature">
    <div class="column is-6 px-5">
      <Caption v-bind="{title: v.name, type: 'has-text-primary'}"></Caption>
      <template v-if="typeof v.detail==='string'">
        <p>{{ v.detail }}</p>
      </template>
      <template v-else>
        <p v-for="x in v.detail">
          - {{ x }}
        </p>
      </template>
    </div>
    <div class="column is-3 px-5" v-for="x in packages">
      <span :class="`material-symbols-outlined has-text-${v[x.code]? 'primary' : 'grey'}`">
        {{v[x.code]? 'select_check_box' : 'block'}} 
      </span>
    </div>
  </div>
</div>
</template>
<script>
export default {
  props: ['packinfo'],
  data() {
    return {
      packages: undefined,
      feature: [],
      packageFeature: []
    }
  },
  async created() {
    this.packages = await this.$getdata('servicepack', undefined, {sort: 'id'})
    this.packages = this.$filter(this.packages, {code: 'basic'})
    let data = await this.$getdata('feature')
    this.packageFeature = await this.$getdata('packagefeature')
    data.map(v=>{
      this.packages.map(x=>{
        let found = this.$find(this.packageFeature, {feature: v.id, package: x.id})
        if(found) v[x.code] = true
      })
      this.feature = data
    })
  },
  computed: {
    login: {
      get: function() {return this.$store.state.login},
      set: function(val) {this.$store.commit('updateLogin', {login: val})}
    },
    viewport: {
      get: function() {return this.$store.state.viewport},
      set: function(val) {this.$store.commit("updateViewPort", {viewport: val})}
    }
  },
  methods: {
    async trial(v) {
      if(!this.login) {
        this.$dialog('<span class="fs-16">BigDataTechCloud cần xác minh <b>gói dịch vụ</b> quý khách đang sử dụng. Vui lòng đăng nhập để tiếp tục. Xin cảm ơn quý khách.</span>', 'Đăng nhập', undefined, 8)
        return this.$router.push({path: '/signin', query: {href: '/service/package'}})
      }
      if(this.login.type!==1) return this.$router.push({path: '/welcome'})
      let trialpack =  await this.$getdata('userpack', {user: this.login.id, status__code: 'trial'}, undefined, true)
      if(trialpack) {
        let diff = this.$dayjs(trialpack.to_date).diff(this.$dayjs(), 'day')
        if(trialpack.expiry || diff<0) this.$router.push({path: '/welcome'})
        else this.$router.push({path: '/service/information'})
      } else this.$router.push({path: '/service/trial', query: {code: v.code}})
    },
    async buy(v) {
      if(!this.login) {
        this.$dialog('<span class="fs-16">BigDataTechCloud cần xác minh <b>gói dịch vụ</b> quý khách đang sử dụng. Vui lòng đăng nhập để tiếp tục. Xin cảm ơn quý khách.</span>', 'Đăng nhập', undefined, 8)
        return this.$router.push({path: '/signin', query: {href: '/service/package'}})
      }
      if(this.login.type!==1) return this.$router.push({path: '/welcome'})
      let order = await this.$getdata('order', {user: this.login.id, payment_status__code: 'unpaid'}, undefined, true)
      if(order) this.$router.push({path: '/service/order-info', query: {id: order.id}})
      else this.$router.push({path: '/service/order', query: {code: v.code}})
    }
  }
}
</script>