booking popup done

This commit is contained in:
Mohd Arief
2018-05-25 15:06:00 +08:00
parent 1b64a3d744
commit ce20c2b68f
+55 -11
View File
@@ -1,6 +1,8 @@
<template>
<el-main>
<!-- Input-Amount -->
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col :span="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="input"></el-input></div></el-col>
<el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
@@ -8,9 +10,9 @@
<el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
</el-select></div></el-col>
</el-row>
<!-- Input-Amount-end -->
<hr>
<!-- Rate-Display -->
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple" align="right"></div></el-col>
@@ -31,11 +33,37 @@
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
</el-row>
<!-- Form_popup -->
<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen="true">
<el-form :model="form"><div align="center">
<el-form-item>
<el-input placeholder="China Beneficiary Account" style="width: 80%"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="Branch / 分行/支行" style="width: 80%"></el-input>
</el-form-item>
<el-form-item>
<el-input placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"></el-input>
</el-form-item></div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogFormVisible = false">Book Now</el-button>
</span>
</el-dialog>
<!-- Form_popup-end -->
<br>
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
@@ -48,13 +76,19 @@
<el-row :gutter="20" type="flex" justify="center" align="middle">
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple"></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center"><el-button type="text">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
<el-col><div class="grid-content bg-purple" align="center">
<el-button type="text" @click="dialogFormVisible = true">Book</el-button></div></el-col>
</el-row>
<!-- Rate-Display-end -->
<br><br>
<hr>
<!-- Booking Table -->
<el-row :gutter="20" >
<div>
<el-table :data="tableData" >
@@ -89,9 +123,13 @@
</el-table>
</div>
</el-row>
<!-- Booking Table-end -->
</el-main>
</template>
<script>
export default {
middleware: ['auth'],
@@ -162,7 +200,13 @@
value: '',
value2: '',
input: '',
}
dialogFormVisible: false,
form: {
name: '',
region: ''
},
formLabelWidth: '0px'
};
},
methods: {
formatter(row, column) {
@@ -175,6 +219,6 @@
const property = column['property'];
return row[property] === value;
}
}
}
},
}
</script>