Files
asan-service/components/agents/CheckRepAndUploadDocs.vue
T
2023-08-17 13:05:51 +03:30

137 lines
4.1 KiB
Vue

<template>
<el-dialog title="پیگیری وضعیت درخواست" :visible.sync="showModal">
<div v-if="!$auth.loggedIn || !$auth.hasScope('user')" class="panel not-logged-in">
<h3>
<span> برای بررسی درخواست نمایندگی باید </span>
<nuxt-link :to="{ name: 'auth-login-register', query: { path: 'representation' } }">وارد حساب کاربری</nuxt-link>
<span>خود شوید.</span>
</h3>
</div>
<div v-else class="checkUploadModalContent">
<div class="repCheckBox">
<form class="form form_3" @submit.prevent="checkRepCode">
<div class="formRow" :class="validation.representation_code && 'err'">
<input
id="repCodeInput"
v-model="repCodeInput"
type="text"
placeholder="کد پیگیری درخواست خود را وارد کنید"
/>
<p v-if="validation.representation_code">{{ validation.representation_code.msg }}</p>
</div>
<div class="formRow">
<button type="submit" class="btn btn-primary">بررسی</button>
</div>
</form>
</div>
<div class="resultBox">
<div class="repInfo" :class="repInfo.status">
<p>
<span>تاریخ ثبت درخواست:</span>
<b> {{ $jDate(repInfo.created_at) }} </b>
</p>
<p>
<span>وضعیت درخواست: </span>
<b v-if="repInfo.status === 'registered'"> ثبت شده در سیستم </b>
<b v-if="repInfo.status === 'ongoing'"> در دست اقدام </b>
<b v-if="repInfo.status === 'verification'"> احراز هویت و بررسی مدارک </b>
<b v-if="repInfo.status === 'accepted'"> تایید شده </b>
<b v-if="repInfo.status === 'rejected'"> رد شده </b>
</p>
<p v-if="repInfo.status !== 'rejected'">
<span>دسترسی برای آپلود مدارک: </span>
<b v-if="repInfo.upload"> دارید </b>
<b v-else> ندارید </b>
</p>
</div>
</div>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'CheckRepAndUploadDocs',
props: {
show: {
type: Boolean,
default: false
}
},
data() {
return {
checkingRepCode: false,
repCodeInput: '',
repInfo: {},
validation: {}
}
},
computed: {
showModal: {
get() {
return this.show
},
set(value) {
this.$emit('closeModal')
}
}
},
watch: {
showModal(newVal, oldVal) {
if (newVal) setTimeout(() => $('#repCodeInput').focus(), 300)
}
},
methods: {
showResult() {
const _DU = 0.3
this.$gsap
.timeline({ onCompleted: () => console.log('hiiiiiiiiiiii') })
.to(
$('.checkUploadModalContent'),
{ height: $('.checkUploadModalContent .resultBox').height() + 32, duration: _DU },
0
)
.set($('.checkUploadModalContent .repCheckBox'), { position: 'absolute', left: 0, top: 0 }, 0)
.to($('.checkUploadModalContent .repCheckBox'), { top: '-100%', opacity: 0, duration: _DU }, 0)
.to($('.checkUploadModalContent .resultBox'), { top: 0, opacity: 1, duration: _DU }, 0.05)
.set($('.checkUploadModalContent .resultBox'), { position: 'static' })
.set($('.checkUploadModalContent'), { height: 'auto' })
},
checkRepCode() {
this.validation = {}
this.$axios
.post('/api/user/checkRepresentation', { representation_code: this.repCodeInput?.trim() })
.then(res => {
this.repInfo = res.data
setTimeout(() => this.showResult(), 300)
})
.catch(err => {
if (err.response.status === 422) this.validation = err.response.data.validation
else {
const title = 'خطا'
this.$alert(err.response.data.message, title, {
confirmButtonText: 'بستن'
})
}
})
}
}
}
</script>