update apply voucher design

This commit is contained in:
edmondlang
2023-06-27 16:46:42 +08:00
parent 32b9bfab1c
commit f005c65afc
@@ -224,23 +224,31 @@
</div>
</div>
</div>
<div class="row m-r-0">
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.amount">
<label>Enter Voucher</label>
<input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
<div class="row m-r-0 m-b-5" v-show="showApplyVoucher">
<div class="col p-r-0">
<validation-wrapper-component :validator="$v.amount">
<div class="row" style="padding-bottom: 3px;">
<div class="col">
<label>Enter Voucher</label>
<input class="form-control" name="voucherCode" v-model.lazy="voucherCode" @keyup="updateVoucherFlag($event)">
</div>
<div class="col-auto p-l-0 p-r-0">
<div class="col-auto p-0 h-100">
<button @click="applyVoucherCode()" class="h-100 btn btn-sm btn-primary b-rad-none all-caps p-l-30 p-r-30 rounded">
Apply
</button>
</div>
</div>
<div class="col-auto p-r-10 p-l-10">
<div @click="showApplyVoucher=!showApplyVoucher" class="h-100 btn btn-sm btn-secondary b-rad-none all-caps rounded d-flex justify-content-center align-items-center">
<i class="fa fa-times muted"></i>
</div>
</div>
</div>
</validation-wrapper-component>
</div>
<div class="col-auto b-r b-t b-b b-grey">
<div class="row h-100 align-items-center">
<div class="col">
<button @click="applyVoucherCode()" class="btn btn-sm h-100 btn-primary b-rad-none all-caps">
Apply
</button>
</div>
</div>
</div>
</div>
<span class="text-primary bold text-underline m-l-5 cursor text-small fs-12" style="margin-bottom: -10px; margin-top: -5px;" @click="showApplyVoucher=!showApplyVoucher" v-show="!showApplyVoucher">Apply a voucher</span>
<div class="row m-l-0 m-r-0" style="height: 20px">
<i class="fa fa-spinner fa-spin m-b-5" v-if="voucherIsChecking"></i>
<span class="text-danger" v-if="voucherCodeFailedReason">{{ voucherCodeFailedReason }}</span>
@@ -582,7 +590,8 @@
voucherCode: '',
voucherCodeFailedReason: '',
voucherValidated: false,
voucherIsChecking: false
voucherIsChecking: false,
showApplyVoucher: false,
}
},
validations () {