界面基本完成

src/router/index.js

@@ -56,7 +56,7 @@ export const constantRoutes = [{
 			}
 		}]
 	},
-	
+
 	{
 		path: '/stdbookMgr',
 		component: Layout,
@@ -98,7 +98,7 @@ export const constantRoutes = [{
 			}
 		}]
 	},
-	
+
 	// 404页面 必须放在最后!!
 	{
 		path: '*',

src/views/accountMgr/index.vue

@@ -5,7 +5,7 @@
 				<div class="cell">
 					<div class="cell-title">
 						<div class="title-left">
-							<div class="title">账号管理</div>
+							<div class="title">系统设置/账号管理</div>
 						</div>
 					</div>
 					<div class="cell-body">

src/views/residentialhostelMgr/index.vue

@@ -26,7 +26,7 @@
 							</el-form>
 							<div class="right-btns">
 								<el-button type="primary" class="export" @click="add_house_dialog">添加民宿</el-button>
-								<el-button type="primary" class="export">民宿配置</el-button>
+								<el-button type="primary" class="export" @click="hostelConfiguration">民宿配置</el-button>
 							</div>
 						</div>
 						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style" v-loading="loading"
@@ -154,7 +154,6 @@
 							</span>
 						</div>
 					</el-upload>
-
 					<!-- 预览弹窗 -->
 					<el-dialog :visible.sync="dialogVisible">
 						<img width="100%" :src="dialogImageUrl" alt="">
@@ -169,27 +168,231 @@
 				<el-button class="add-info" @click="add_house_dialog_handler">确 认</el-button>
 			</div>
 		</el-dialog>
-		<!-- 修改账号对话框 -->
-		<el-dialog title="修改房型" custom-class="modify-house-class" :visible.sync="dialogModifyHouseFormVisible" :close-on-click-modal="false"
+		<!-- 修改民宿对话框 -->
+		<el-dialog title="修改民宿" custom-class="modify-house-class" :visible.sync="dialogModifyHouseFormVisible" :close-on-click-modal="false"
 			:close-on-press-escape="false" @close="modify_house_dialog_close">
-			<el-form :model="formModifyHouse" ref="modifyAccountForm" :rules="modifyHouseFormRules">
-				<el-form-item label="房型：" :label-width="formLabelWidth" :required="true" prop="h_type">
-					<el-input v-model="formModifyHouse.h_type" autocomplete="off" placeholder="请输入房型" maxlength="16"></el-input>
-				</el-form-item>
-				<el-form-item label="房费：" :label-width="formLabelWidth" :required="true" prop="price">
-					<el-input v-model="formModifyHouse.price" autocomplete="off" placeholder="请输入房费" maxlength="4">
-					</el-input>
-				</el-form-item>
-				<el-form-item label="数量：" :label-width="formLabelWidth" :required="true" prop="number">
-					<el-input v-model="formModifyHouse.number" autocomplete="off" placeholder="请输入数量" maxlength="4">
-					</el-input>
-				</el-form-item>
-			</el-form>
+			<el-row>
+				<el-col :span="12">
+					<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">民宿信息</div>
+					<el-form :model="formAddHostel" ref="addAccountForm" :rules="addHouseFormRules">
+						<el-form-item label="民宿名称：" :label-width="formLabelWidth" :required="true" prop="h_type">
+							<el-input v-model="formAddHostel.h_type" autocomplete="off" placeholder="请输入名称">
+							</el-input>
+						</el-form-item>
+						<el-form-item label="法人姓名：" :label-width="formLabelWidth" :required="true" prop="price">
+							<el-input v-model="formAddHostel.price" autocomplete="off" placeholder="请输入姓名">
+							</el-input>
+						</el-form-item>
+						<el-form-item label="法人电话：" :label-width="formLabelWidth" :required="true" prop="number">
+							<el-input v-model="formAddHostel.number" autocomplete="off" placeholder="请输入电话">
+							</el-input>
+						</el-form-item>
+						<el-form-item label="所属乡镇：" :label-width="formLabelWidth" :required="true" prop="number">
+							<el-select v-model="formAddHostel.value" clearable placeholder="请选择乡镇">
+								<el-option v-for="item in formInline.options" :key="item.value" :label="item.label" :value="item.value">
+								</el-option>
+							</el-select>
+						</el-form-item>
+						<el-form-item label="民宿账号：" :label-width="formLabelWidth" :required="true" prop="number">
+							<el-input v-model="formAddHostel.number" autocomplete="off" placeholder="请输入账号" maxlength="4">
+							</el-input>
+						</el-form-item>
+					</el-form>
+					<div
+						style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
+						注：账号解冻后，密码默认为Jams123456</div>
+				</el-col>
+				<el-col :span="12">
+					<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: -10px 0 20px 20px;">提现信息</div>
+					<el-form :model="formAddInfo" ref="addAccountForm" :rules="addHouseFormRules">
+						<el-form-item label="银行卡号：" :label-width="formLabelWidth" :required="true" prop="bankcard">
+							<el-input v-model="formAddInfo.bankcard" autocomplete="off" placeholder="请输入房型">
+							</el-input>
+						</el-form-item>
+						<el-form-item label="户主姓名：" :label-width="formLabelWidth" :required="true" prop="uname">
+							<el-input v-model="formAddInfo.uname" autocomplete="off" placeholder="请输入房费">
+							</el-input>
+						</el-form-item>
+						<el-form-item label="银行名称：" :label-width="formLabelWidth" :required="true" prop="bankname">
+							<el-input v-model="formAddInfo.bankname" autocomplete="off" placeholder="请输入数量">
+							</el-input>
+						</el-form-item>
+					</el-form>
+				</el-col>
+			</el-row>
+			<el-row>
+				<el-col :span="24">
+					<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0px 0 20px 20px;">营业执照</div>
+					<el-upload action="#" accept=".jpg, .jpeg, .png" list-type="picture-card" :auto-upload="false" :on-change="handleChange"
+						:file-list="fileList" :limit="limitCount" :class="{hide:hideUpload}">
+						<i slot="default" class="el-icon-plus"></i>
+						<div slot="file" slot-scope="{file}">
+							<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
+							<span class="el-upload-list__item-actions">
+								<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+									<i class="el-icon-delete"></i>
+								</span>
+							</span>
+						</div>
+					</el-upload>
+					<!-- 预览弹窗 -->
+					<el-dialog :visible.sync="dialogVisible">
+						<img width="100%" :src="dialogImageUrl" alt="">
+					</el-dialog>
+				</el-col>
+			</el-row>
+			<div
+				style="font-size: 18px;font-weight: 400;letter-spacing: 0px;line-height: 26.06px;color: rgba(212, 48, 48, 1);text-align: left;vertical-align: top;">
+				（注：最多可上传6张图片）</div>
 			<div slot="footer" class="dialog-footer">
-				<el-button @click="dialogModifyHouseFormVisible = false">取 消</el-button>
-				<el-button type="primary" @click="modify_house_dialog_handler">确 认</el-button>
+				<el-button @click="dialogAddHouseFormVisible = false">取 消</el-button>
+				<el-button class="add-info" @click="add_house_dialog_handler">确 认</el-button>
 			</div>
 		</el-dialog>
+		<!-- 民宿配置 -->
+		<el-dialog title="民宿配置" custom-class="configuration-window" :visible.sync="dialogResidentialHostelConfigurationVisible" :close-on-click-modal="false"
+			:close-on-press-escape="false" @close="residential_hostel_configuration_dialog_close">
+			<el-tabs v-model="activeName" @tab-click="handleClick">
+				<el-tab-pane label="民宿类型" name="first">
+					<el-row>
+						<el-col :span="24" class="configure-btn-position">
+							<el-button class="configure-btn">添加</el-button>
+						</el-col>
+					</el-row>
+					<el-row>
+						<el-col :span="24">
+							<el-table :data="tableData_hostel_class" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
+								:header-cell-style="header_cell_style">
+								<el-table-column label="序号" align="center" width="100">
+									<template slot-scope="scope">
+										<span>{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="民宿类型" align="center">
+									<template slot-scope="scope">
+										<span>{{ scope.row.status }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="操作" align="center" width="110">
+									<template slot-scope="scope">
+										<div class="action-btns">
+											<el-link class="bg-btn" @click="modify_house_dialog(scope.$index, scope.row)">编辑</el-link>
+											<el-link type="danger" @click="delete_house_dialog(scope.$index, scope.row)">删除</el-link>
+										</div>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-col>
+					</el-row>
+				</el-tab-pane>
+				<el-tab-pane label="民宿服务" name="second">
+					<el-row>
+						<el-col :span="24" class="configure-btn-position">
+							<el-button class="configure-btn">添加</el-button>
+						</el-col>
+					</el-row>
+					<el-row>
+						<el-col :span="24">
+							<el-table :data="tableData_hostel_service" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
+								:header-cell-style="header_cell_style">
+								<el-table-column label="序号" align="center" width="100">
+									<template slot-scope="scope">
+										<span>{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="图标" align="center" width="128">
+									<template slot-scope="scope">
+										<img :src="scope.row.icon" width="24" height="24">
+									</template>
+								</el-table-column>
+								<el-table-column label="民宿服务" align="center">
+									<template slot-scope="scope">
+										<span>{{ scope.row.status }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="操作" align="center" width="110">
+									<template slot-scope="scope">
+										<div class="action-btns">
+											<el-link class="bg-btn" @click="modify_house_dialog(scope.$index, scope.row)">编辑</el-link>
+											<el-link type="danger" @click="delete_house_dialog(scope.$index, scope.row)">删除</el-link>
+										</div>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-col>
+					</el-row>
+				</el-tab-pane>
+				<el-tab-pane label="房型名称" name="third">
+					<el-row>
+						<el-col :span="24" class="configure-btn-position">
+							<el-button class="configure-btn">添加</el-button>
+						</el-col>
+					</el-row>
+					<el-row>
+						<el-col :span="24">
+							<el-table :data="tableData_house_name" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
+								:header-cell-style="header_cell_style">
+								<el-table-column label="序号" align="center" width="100">
+									<template slot-scope="scope">
+										<span>{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="房型名称" align="center">
+									<template slot-scope="scope">
+										<span>{{ scope.row.status }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="操作" align="center" width="110">
+									<template slot-scope="scope">
+										<div class="action-btns">
+											<el-link class="bg-btn" @click="modify_house_dialog(scope.$index, scope.row)">编辑</el-link>
+											<el-link type="danger" @click="delete_house_dialog(scope.$index, scope.row)">删除</el-link>
+										</div>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-col>
+					</el-row>
+				</el-tab-pane>
+				<el-tab-pane label="房型服务" name="fourth">
+					<el-row>
+						<el-col :span="24" class="configure-btn-position">
+							<el-button class="configure-btn">添加</el-button>
+						</el-col>
+					</el-row>
+					<el-row>
+						<el-col :span="24">
+							<el-table :data="tableData_house_service" height="380" style="width: 100%" :cell-style="cell_style" v-loading="loading"
+								:header-cell-style="header_cell_style">
+								<el-table-column label="序号" align="center" width="100">
+									<template slot-scope="scope">
+										<span>{{ (pagination.currentPage - 1) * pagination.pageSize + scope.$index + 1 }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="图标" align="center" width="128">
+									<template slot-scope="scope">
+										<img :src="scope.row.icon" alt="" width="24" height="24">
+									</template>
+								</el-table-column>
+								<el-table-column label="房型服务" align="center">
+									<template slot-scope="scope">
+										<span>{{ scope.row.status }}</span>
+									</template>
+								</el-table-column>
+								<el-table-column label="操作" align="center" width="110">
+									<template slot-scope="scope">
+										<div class="action-btns">
+											<el-link class="bg-btn" @click="modify_house_dialog(scope.$index, scope.row)">编辑</el-link>
+											<el-link type="danger" @click="delete_house_dialog(scope.$index, scope.row)">删除</el-link>
+										</div>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-col>
+					</el-row>
+				</el-tab-pane>
+			</el-tabs>
+		</el-dialog>
 		<!-- 删除确认对话框 -->
 		<el-dialog custom-class="el-dialog-delete-house" :visible.sync="dialogDeleteHouseVisible" :close-on-click-modal="false" :close-on-press-escape="false"
 			:show-close="false">
@@ -255,6 +458,8 @@
 				}, 100);
 			};
 			return {
+				activeName: 'first', // 默认激活那个选项卡
+				dialogResidentialHostelConfigurationVisible: false, // 民宿配置对话框显示和隐藏变量
 				dialogImageUrl: '',
 				dialogVisible: false,
 				disabled: false,
@@ -307,7 +512,50 @@
 					id: ''
 				},
 				tableData: [],
+				tableData_hostel_class: [{ // 民宿类别
+					status: '普通型'
+				}, {
+					status: '包吃住型'
+				}],
+				tableData_hostel_service: [{ // 民宿服务
+					status: '包早餐',
+					icon: require('@/icons/images/hostel/baozaocan.png')
+				}, {
+					status: '免费停车场',
+					icon: require('@/icons/images/hostel/mianfeitingchechang.png')
+				}, {
+					status: '会议室',
+					icon: require('@/icons/images/hostel/huiyishi.png')
+				}, {
+					status: '储物柜',
+					icon: require('@/icons/images/hostel/chuwugui.png')
+				}],
+				tableData_house_name: [{ // 房型名称
+					status: '2.0米大床房'
+				}, {
+					status: '标准房'
+				}, {
+					status: '麻将房'
+				}, {
+					status: '双人床'
+				}],
+				tableData_house_service: [{ // 房型服务
+					status: '免费wifi',
+					icon: require('@/icons/images/hostel/wifi.png')
+				}, {
+					status: '卫生间',
+					icon: require('@/icons/images/hostel/weishengjian.png')
+				}, {
+					status: '有窗户',
+					icon: require('@/icons/images/hostel/window.png')
+				}, {
+					status: '无窗户',
+					icon: require('@/icons/images/hostel/window.png')
+				}],
 				cond_data: {},
+
+
+
 				// 分页参数
 				pagination: {
 					currentPage: 1,
@@ -334,23 +582,6 @@
 					}]
 				},
 				dialogModifyHouseFormVisible: false,
-				formModifyHouse: { // 修改账号对话框 数据
-					id: '',
-					h_type: '',
-					price: '',
-					number: ''
-				},
-				modifyHouseFormRules: {
-					h_type: [{
-						validator: checkHType
-					}],
-					price: [{
-						validator: checkPrice
-					}],
-					number: [{
-						validator: checkNumber
-					}]
-				},
 				dialogDeleteHouseVisible: false
 			}
 		},
@@ -360,7 +591,10 @@
 			document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳至";
 		},
 		methods: {
-			// 上传
+			handleClick(tab, event) {
+				console.log(tab, event);
+			},
+			// 上传列表
 			handleChange(file, fileList) {
 				this.fileList = fileList;
 				this.hideUpload = this.fileList.length >= this.limitCount;
@@ -380,10 +614,21 @@
 			 * 显示添加对话框
 			 */
 			add_house_dialog() {
-				// 显示添加对话框
 				this.dialogAddHouseFormVisible = true;
 			},
 			/**
+			 * 打开民宿配置对话框
+			 */
+			hostelConfiguration() {
+				this.dialogResidentialHostelConfigurationVisible = true
+			},
+			/**
+			 * 修改民宿
+			 */
+			modify_house_dialog() {
+				this.dialogModifyHouseFormVisible = true;
+			},
+			/**
 			 * 关闭添加对话框
 			 */
 			add_house_dialog_close() {
@@ -391,6 +636,12 @@
 				this.dialogAddHouseFormVisible = false;
 			},
 			/**
+			 * 关闭民宿配置
+			 */
+			residential_hostel_configuration_dialog_close() {
+				this.dialogResidentialHostelConfigurationVisible = false
+			},
+			/**
 			 * 添加操作
 			 */
 			add_house_dialog_handler() {
@@ -424,50 +675,6 @@
 					}
 				})
 			},
-			modify_house_dialog(index, row) {
-				// console.log(index, row);
-				// 赋值准备修改
-				this.formModifyHouse.h_type = row.h_type;
-				this.formModifyHouse.id = row.id;
-				this.formModifyHouse.price = row.price;
-				this.formModifyHouse.number = row.number;
-				// 显示修改对话框
-				this.dialogModifyHouseFormVisible = true;
-			},
-			/**
-			 * 修改操作
-			 */
-			modify_house_dialog_handler() {
-				// 调用修改接口
-				this.$refs["modifyAccountForm"].validate(validate => {
-					if (validate) {
-						// console.log(this.formAddHostel);
-						modifyHouseType(this.formModifyHouse).then((res) => {
-							// console.log(res);
-							if (typeof res.code == 'undefined' || res.code == '') {
-								this.$message.error('返回数据格式问题，code未获取到！');
-								return;
-							}
-
-							if (res.code === 200) {
-								// 重新读取，刷新表格显示
-								this.get_table_data();
-
-								this.dialogModifyHouseFormVisible = false;
-								this.$message.success(res.message);
-							} else {
-								this.$message.error(res.message);
-							}
-						}).catch((err) => {
-							// console.log(err);
-							this.$message.error(err.message);
-						})
-					} else {
-						this.$message.error('验证不通过');
-						return false;
-					}
-				})
-			},
 			/**
 			 * 关闭修改对话框
 			 */
@@ -746,15 +953,6 @@
 							}
 						}
 
-						.action-btns {
-							display: flex;
-							justify-content: space-around;
-
-							.bg-btn {
-								color: rgba(9, 101, 98, 1);
-							}
-						}
-
 						.pagination-table {
 							display: flex;
 							justify-content: space-between;
@@ -813,6 +1011,15 @@
 							}
 						}
 					}
+
+					.action-btns {
+						display: flex;
+						justify-content: space-around;
+
+						.bg-btn {
+							color: rgba(9, 101, 98, 1);
+						}
+					}
 				}
 			}
 		}
@@ -917,6 +1124,11 @@
 		height: 800px !important;
 	}
 
+	.configuration-window {
+		width: 580px !important;
+		height: 620px !important;
+	}
+
 	.el-dialog-delete-house {
 		height: 300px !important;
 		width: 500px !important;
@@ -932,7 +1144,7 @@
 		border: none !important;
 		margin-left: 60px !important;
 	}
-	
+
 	.add-info {
 		border: none !important;
 		background: rgba(9, 101, 98, 1) !important;
@@ -940,4 +1152,16 @@
 		border-radius: 5px !important;
 		margin-left: 80px !important;
 	}
+
+	.configure-btn-position {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.configure-btn {
+		border: none !important;
+		background: rgba(9, 101, 98, 1) !important;
+		color: #fff !important;
+		border-radius: 5px !important;
+	}
 </style>

src/views/stdbookMgr/index.vue

@@ -17,14 +17,27 @@
 										</el-option>
 									</el-select>
 								</el-form-item>
+								<el-form-item label="订单金额">
+									<el-input placeholder="请输入金额" v-model="amount1" style="width: 110px;">
+									</el-input>
+									-
+									<el-input placeholder="请输入金额" v-model="amount2" style="width: 110px;">
+									</el-input>
+								</el-form-item>
+								<el-form-item label="退房时间">
+									<el-date-picker v-model="search_datatime" type="datetimerange" align="right" start-placeholder="开始日期" end-placeholder="结束日期"
+										:default-time="['12:00:00', '08:00:00']">
+									</el-date-picker>
+								</el-form-item>
 								<el-form-item label="">
-									<el-input v-model="formInline.h_type" prefix-icon="el-icon-search" clearable placeholder="请输入关键字"></el-input>
+									<el-input v-model="formInline.h_type" style="width: 200px;" prefix-icon="el-icon-search" clearable
+										placeholder="请输入关键字"></el-input>
 								</el-form-item>
 								<el-form-item>
 									<el-button type="primary" class="btn-search" @click="btn_search">查询</el-button>
 								</el-form-item>
 							</el-form>
-							<el-button type="primary" class="export" @click="">导出订单</el-button>
+							<el-button type="primary" icon="el-icon-download" class="export" @click="">导出订单</el-button>
 						</div>
 						<el-table :data="tableData" height="510" style="width: 100%" :cell-style="cell_style" v-loading="loading"
 							:header-cell-style="header_cell_style">
@@ -453,7 +466,7 @@
 							padding-right: 100px;
 
 							.txt-notice {
-								
+
 								span {
 									font-size: 28px;
 									font-weight: 500;