cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-22 05:44:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'Lingges/fixpoFormat' into 'master'

Browse Source 
fix/homeBookingForm

See merge request CIEFWorldwideSdnBhd/exchange!148
This commit is contained in:
omair saleh
2018-10-15 07:57:48 +00:00
parent 94ce39b262 d9717afdbc
commit 81802021da
3 changed files with 63 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -22,6 +22,7 @@
"bootstrap": "^4.0.0",
"canvas2image": "^1.0.5",
"element-ui": "^2.4.4",
"epic-spinners": "^1.0.3",
"image-compressor.js": "^1.1.4",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
resources/assets/js/pages/booking/uploadUserBankSlip.vue
+52 -34
View File
@@ -47,40 +47,52 @@
</vue-countdown>
</div>
</div>
<!-- upload image -->
<div class="row upload">
<div class="col">
<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
align="center">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog> -->
<el-upload
class="avatar-uploader"
ref="upload"
action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
:auto-upload="false"
:show-file-list="false"
:on-success="handleUploadSuccess"
:on-change="beforeFileUpload"
algin="center">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">select file</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> -->
<div style="position: relative;">
<div v-show="isLoading" style=" position: absolute; height: 100%; width: 100%; background-color: rgba(255, 255,255,0.8); z-index: 99; " >
<div class="row align-items-center justify-content-center" style="height: 100%;">
<div class="col">
<breeding-rhombus-spinner
:animation-duration="1000"
:size="60"
:color="'#ff1d5e'" style="margin: auto; " />
<p style="text-align:center; margin-top:30px; text-weight:bold;">Please wait, uploading bankslip...</p>
</div>
</div>
</div>
<!-- upload image -->
<div class="row upload">
<div class="col">
<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
:on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
align="center">
<i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img :src="dialogImageUrl" width="100%" alt="">
</el-dialog> -->
<el-upload
class="avatar-uploader"
ref="upload"
action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
:auto-upload="false"
:show-file-list="false"
:on-success="handleUploadSuccess"
:on-change="beforeFileUpload"
algin="center">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<!-- <el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">select file</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
</el-upload> -->
</div>
</div>
<!-- upload image end -->
<div class="row bankinAmount">
@@ -98,7 +110,8 @@
</el-form-item>
</el-form>
</div>
</div>
</div>
</div>
</el-main>
</template>
<style>
@@ -172,6 +185,7 @@
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
import ImageCompressor from 'image-compressor.js';
import { BreedingRhombusSpinner } from 'epic-spinners';
export default {
middleware: ['auth'],
@@ -179,7 +193,8 @@
components: {
'vue-countdown': VueCountdown,
'progress-track': ProgressTrack,
'x2-progress-track': X2ProgressTrack
'x2-progress-track': X2ProgressTrack,
BreedingRhombusSpinner
},
data() {
return {
@@ -189,6 +204,7 @@
},
start: false,
loading: false,
isLoading: false,
dialogImageUrl: '',
imageUrl: null,
dialogVisible: false,
@@ -309,6 +325,7 @@
},
beforeFileUpload(file) {
this.isLoading = true;
//const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
var vm = this;
@@ -342,6 +359,7 @@
reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function() {
vm.isLoading = false;
vm.imageUrl = reader.result;
vm.user_slip_form.slip_image = reader.result;
}
resources/assets/js/pages/home.vue
+10 -3
View File
@@ -150,9 +150,14 @@
</el-form-item>
<el-form-item prop="order_no">
<el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Name" style="width: 80%" required="true" />
</el-form-item>
<br>
<div align=center>
<h7>China's Supplier Details</h7>
</div>
<br>
<el-form-item prop="account_name">
<el-input v-model="bookingForm.account_name" placeholder="Account Name" style="width: 80%" required="true" />
</el-form-item>
<el-form-item prop="account_num">
<el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number" style="width: 80%"/>
@@ -172,6 +177,7 @@
</div>
</el-form>
</el-dialog>
<!-- Form_popup-end -->
<!-- Booking_confirmation_popup -->
@@ -390,6 +396,7 @@
</div>
</el-row><br><br>
</el-tab-pane>
</el-tabs>
<!-- Booking Table-end -->