asan-service/pages/admin/gps/fee/index.vue

<template>
  <div>


    <CustomSubHeader>
      <CBreadcrumb class="border-0 mb-0"> تنظیم هزینه نصب </CBreadcrumb>
    </CustomSubHeader>

    <CRow>
      <CCol xl="6">
        <CCard>
          <CCardHeader>
            <slot name="header">
              <i class="fas fa-filter"></i>
              <b>فیلتر ها</b>
            </slot>
          </CCardHeader>

          <CCardBody>
            <CRow>
              <CCol sm="12">

              </CCol>
              <CCol sm="12">
                <el-divider></el-divider>
              </CCol>
              <CCol sm="12">
                <el-form ref="form" :model="form" :rules="rules">
                  <el-form-item label="مبلغ نصب" prop="amount">
                    <el-input v-model="form.amount" placeholder="مبلغ"></el-input>
                    <span v-if="form.amount">{{ formatCurrency(form.amount) }}</span>
                  </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="setFee">ثبت</el-button>
                  </el-form-item>
                </el-form>
              </CCol>
              <CCol sm="12">
                <el-divider></el-divider>
              </CCol>
              <CCol sm="12">
                <el-form ref="scoreForm" :model="scoreForm" :rules="scoreRules">
                  <el-form-item label="امتیاز نصب" prop="score">
                    <el-input v-model="scoreForm.score" placeholder="امتیاز"></el-input>
                    <span v-if="scoreForm.score">{{ scoreForm.score }} امتیاز</span>
                  </el-form-item>
                  <el-form-item >
                    <el-button type="primary" @click="setScore">ثبت</el-button>
                  </el-form-item>
                </el-form>
              </CCol>
            </CRow>
          </CCardBody>
        </CCard>
      </CCol>
    </CRow>


  </div>
</template>

<script>
export default {
  name: 'AdminGpsWithdrawList',
  layout: 'admin',

  data() {
    return {
      form: {
        amount: 0
      },
      rules: {
        amount: [{ required: true, message: 'لطفا مبلغ را وارد کنید', trigger: 'blur' }]
      },
      scoreForm: {
        score: 0
      },
      scoreRules: {
        score: [{ required: true, message: 'لطفا امتیاز را وارد کنید', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getFee()
    this.getScore()
  },
  methods: {
    async setFee() {
      try {
        await this.$axios.post('/api/admin/gps/settings/install-fee', this.form)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'هزینه نصب با موفقیت ثبت شد'
            })
            this.$nuxt.refresh()
          })
      } catch (error) {
        console.log(error)
      }
    },
    async getFee() {
      try {
        await this.$axios.get('/api/admin/gps/settings/install-fee')
          .then(res => {
            this.form.amount = res.data.amount
          })
      } catch (error) {
        console.log(error)
      }
    },
    formatCurrency(amount) {
      const formatted= new Intl.NumberFormat('fa-IR').format(amount);
        return `${formatted} تومان`;
    },
    async setScore() {
      try {
        await this.$axios.post('/api/admin/gps/settings/install-score', this.scoreForm)
          .then(res => {
            this.$message({
              type: 'success',
              message: 'امتیاز نصب با موفقیت ثبت شد'
            })
            this.$nuxt.refresh()
          })
      } catch (error) {
        console.log(error)
      }
    },
    async getScore() {
      try {
        await this.$axios.get('/api/admin/gps/settings/install-score')
          .then(res => {
            if (res.data && res.data.amount) {
              this.scoreForm.score = res.data.amount
            }
          })
      } catch (error) {
        console.log(error)
      }
    }
  }
}

</script>
<style>
.unreadMsgInCv {
  background: rgba(orange, 0.1) !important;
}
</style>