Base Login

components/ServicePack.vue

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