修改状态
This commit is contained in:
wangxiaowei
1
dist/index.html
vendored
Normal file
1
dist/index.html
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=Content-Security-Policy content=upgrade-insecure-requests><title>秀湖网球中心</title><link rel="shortcut icon" href=static/imgs/favicon.ico><link rel=stylesheet type=text/css href=static/css/common.css><link rel=stylesheet type=text/css href=static/css/app.css><script src=./static/UE/ueditor.config.js type=text/javascript charset=utf-8></script><script src=./static/UE/ueditor.all.js type=text/javascript charset=utf-8></script><script src=./static/UE/lang/zh-cn/zh-cn.js type=text/javascript charset=utf-8></script><script src=./static/UE/ueditor.parse.min.js type=text/javascript charset=utf-8></script><link href=/shop/static/css/app.e7047d36a03a2793b41a30c52f203bd1.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/shop/static/js/manifest.3103172e847482f429bc.js></script><script type=text/javascript src=/shop/static/js/vendor.127c5faa24b714f60eb5.js></script><script type=text/javascript src=/shop/static/js/app.fb0c89cdb9c312d1da44.js></script></body></html>
|
||||||
@ -4,7 +4,7 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
||||||
<title>三勾商城后台系统</title>
|
<title>秀湖网球中心</title>
|
||||||
<link rel="shortcut icon" href="static/imgs/favicon.ico">
|
<link rel="shortcut icon" href="static/imgs/favicon.ico">
|
||||||
<link rel="stylesheet" type="text/css" href="static/css/common.css"/>
|
<link rel="stylesheet" type="text/css" href="static/css/common.css"/>
|
||||||
<link rel="stylesheet" type="text/css" href="static/css/app.css"/>
|
<link rel="stylesheet" type="text/css" href="static/css/app.css"/>
|
||||||
|
|||||||
@ -66,6 +66,21 @@ let VenueApi = {
|
|||||||
groundRoomRate(data, errorback) {
|
groundRoomRate(data, errorback) {
|
||||||
return request._post('/shop/ground.groundRoom/groundRoomRate', data, errorback);
|
return request._post('/shop/ground.groundRoom/groundRoomRate', data, errorback);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**场地预定列表 */
|
||||||
|
getSchedule(data, errorback) {
|
||||||
|
return request._post('/shop/order.select/getSchedule', data, errorback);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 立即预约 */
|
||||||
|
reserveGround(data, errorback) {
|
||||||
|
return request._post('/shop/order.select/submitStoreOrder', data, errorback);
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 取消预定 */
|
||||||
|
cancelAdminReserve(data, errorback) {
|
||||||
|
return request._post('/shop/order.select/cancelGroundOrder', data, errorback);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default VenueApi;
|
export default VenueApi;
|
||||||
|
|||||||
@ -17,11 +17,13 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
|
<div></div>
|
||||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||||
<el-table-column prop="remark" label="订单号"></el-table-column>
|
<el-table-column prop="remark" label="订单号"></el-table-column>
|
||||||
<el-table-column prop="balance_before" label="充值前余额"></el-table-column>
|
<el-table-column prop="balance_before" label="充值前余额" v-if="record_type == 'recharge'"></el-table-column>
|
||||||
<el-table-column prop="money" label="充值余额"></el-table-column>
|
<el-table-column prop="money" label="充值余额" v-if="record_type == 'recharge'"></el-table-column>
|
||||||
|
<el-table-column prop="money" label="消费余额" v-if="record_type == 'pay'"></el-table-column>
|
||||||
|
<el-table-column prop="money" label="退款金额" v-if="record_type == 'refund'"></el-table-column>
|
||||||
<el-table-column prop="balance_after" label="账户剩余余额"></el-table-column>
|
<el-table-column prop="balance_after" label="账户剩余余额"></el-table-column>
|
||||||
<el-table-column prop="create_time" label="创建时间"></el-table-column>
|
<el-table-column prop="create_time" label="创建时间"></el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="common-form">用户信息</div>
|
<div class="common-form">用户信息</div>
|
||||||
<el-form :model="order" :label-width="formLabelWidth">
|
<el-form :model="order" :label-width="formLabelWidth" v-if="order.user_id > 0">
|
||||||
<el-form-item label="用户名称:">
|
<el-form-item label="用户名称:" >
|
||||||
<span>{{ order.nickName }}</span>
|
<span>{{ order.nickName }}</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="用户头像:">
|
<el-form-item label="用户头像:">
|
||||||
@ -10,6 +10,12 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
|
<el-form :model="order" :label-width="formLabelWidth" v-if="order.user_id == 0">
|
||||||
|
<el-form-item label="" >
|
||||||
|
<span style="font-weight: bold;">管理员预定</span>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
<div class="common-form">费用明细</div>
|
<div class="common-form">费用明细</div>
|
||||||
<el-form :model="order" :label-width="formLabelWidth">
|
<el-form :model="order" :label-width="formLabelWidth">
|
||||||
<el-form-item label="灯光费用">
|
<el-form-item label="灯光费用">
|
||||||
@ -42,7 +48,7 @@
|
|||||||
<span v-if="order.order_status == 4">已取消</span>
|
<span v-if="order.order_status == 4">已取消</span>
|
||||||
<span v-if="order.order_status == 5">退订/退款</span>
|
<span v-if="order.order_status == 5">退订/退款</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="支付方式">
|
<el-form-item label="支付方式" v-if="order.user_id > 0">
|
||||||
<span v-if="order.pay_way == 1">余额支付-{{ cardType(order.pay_type) }}</span>
|
<span v-if="order.pay_way == 1">余额支付-{{ cardType(order.pay_type) }}</span>
|
||||||
<span v-if="order.pay_way == 2">微信支付</span>
|
<span v-if="order.pay_way == 2">微信支付</span>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|||||||
@ -60,13 +60,22 @@
|
|||||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||||
<el-table-column prop="userInfo" label="用户信息">
|
<el-table-column prop="userInfo" label="用户信息">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<div class="">用户昵称: {{ scope.row.nickName }}</div>
|
<div class="">
|
||||||
<div class=""><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
<span v-if="scope.row.user_id == 0" style="font-weight: bold;">管理员预定</span>
|
||||||
|
<span v-if="scope.row.user_id > 0">用户昵称: {{ scope.row.nickName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="" v-if="scope.row.user_id > 0"><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="order_sn" label="订单号"></el-table-column>
|
<el-table-column prop="order_sn" label="订单号"></el-table-column>
|
||||||
<el-table-column prop="name" label="场馆"></el-table-column>
|
<el-table-column prop="name" label="场馆"></el-table-column>
|
||||||
<el-table-column prop="dtime" label="创建时间"></el-table-column>
|
<el-table-column prop="yuding_time" label="场馆预定日期"></el-table-column>
|
||||||
|
<el-table-column prop="yuding_hour" label="预定小时">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.yuding_hour }} 小时
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="dtime" label="订单创建时间"></el-table-column>
|
||||||
<el-table-column prop="order_status" label="订单状态">
|
<el-table-column prop="order_status" label="订单状态">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span v-if="scope.row.order_status == 0" style="color: #F56C6C;">待付款</span>
|
<span v-if="scope.row.order_status == 0" style="color: #F56C6C;">待付款</span>
|
||||||
@ -86,7 +95,9 @@
|
|||||||
<el-table-column fixed="right" label="操作" width="170">
|
<el-table-column fixed="right" label="操作" width="170">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button @click="detailClick(scope.row)" type="text" size="small"
|
<el-button @click="detailClick(scope.row)" type="text" size="small"
|
||||||
v-auth="'/venue/order/detail'">详情</el-button>
|
v-auth="'/venue/order/detail'">详情</el-button>
|
||||||
|
<el-button v-if="scope.row.user_id == 0 && scope.row.order_status == 1" @click="cancleClick(scope.row)" type="text" size="small"
|
||||||
|
v-auth="'/venue/order/cancel'">取消预定</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<!-- <el-table-column fixed="right" label="操作" width="130">
|
<!-- <el-table-column fixed="right" label="操作" width="130">
|
||||||
@ -322,6 +333,36 @@ export default {
|
|||||||
scene: 'view'
|
scene: 'view'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
cancleClick(row) {
|
||||||
|
this.$confirm('是否取消此订单?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
VenueApi.cancelAdminReserve({
|
||||||
|
order_id: row.order_id,
|
||||||
|
}, true).
|
||||||
|
then(res => {
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
if (res.code == 1) {
|
||||||
|
this.$message({
|
||||||
|
message: '取消成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
location.reload()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}).catch(error => {});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: '已取消'
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
357
src/views/venue/reserve/Add.vue
Normal file
357
src/views/venue/reserve/Add.vue
Normal file
@ -0,0 +1,357 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog title="添加场地" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false">
|
||||||
|
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
||||||
|
<el-form-item label="选择场馆" prop="ground_id" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.ground_id" @change="changeGround">
|
||||||
|
<el-option :value="item.id" :label="item.name" :key="item.id" v-for="item in veuneList"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场地图" prop="img" :label-width="formLabelWidth">
|
||||||
|
<el-row>
|
||||||
|
<el-button type="primary" @click="openUpload">选择图片</el-button>
|
||||||
|
<div v-if="form.img != ''" class="img">
|
||||||
|
<img :src="file_path" width="100" height="100" />
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场地标题" prop="title" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<template v-if="selectGroundType == 1">
|
||||||
|
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
||||||
|
<el-date-picker
|
||||||
|
type="dates"
|
||||||
|
v-model="form.holiday"
|
||||||
|
placeholder="选择一个或多个日期">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光使用时段" prop="light_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.light_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期灯光价格" prop="set_light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.set_light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="selectGroundType == 2">
|
||||||
|
<el-form-item label="场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.status">
|
||||||
|
<el-option :value="1" label="启用"></el-option>
|
||||||
|
<el-option :value="0" label="禁用"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
<!--上传图片组件-->
|
||||||
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PorductApi from '@/api/product.js';
|
||||||
|
import Upload from '@/components/file/Upload';
|
||||||
|
import Uediter from '@/components/UE.vue';
|
||||||
|
import VenueApi from '@/api/venue.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Upload,
|
||||||
|
Uediter,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
/*富文本框配置*/
|
||||||
|
ueditor: {
|
||||||
|
text: '',
|
||||||
|
config: {
|
||||||
|
initialFrameWidth: 400,
|
||||||
|
initialFrameHeight: 500
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selectGroundType: null,
|
||||||
|
form: {
|
||||||
|
ground_id: '',
|
||||||
|
img: '',
|
||||||
|
title: '',
|
||||||
|
price: '',
|
||||||
|
holiday_price: '',
|
||||||
|
light_price: '',
|
||||||
|
status: 1,
|
||||||
|
holiday: '',
|
||||||
|
free_time: [
|
||||||
|
'06:00-07:00',
|
||||||
|
'07:00-08:00',
|
||||||
|
'08:00-09:00',
|
||||||
|
],
|
||||||
|
hit_time:[],
|
||||||
|
light_time:[
|
||||||
|
'06:00-07:00',
|
||||||
|
'07:00-08:00',
|
||||||
|
'08:00-09:00',
|
||||||
|
'09:00-10:00',
|
||||||
|
'10:00-11:00',
|
||||||
|
'11:00-12:00',
|
||||||
|
'12:00-13:00',
|
||||||
|
'13:00-14:00',
|
||||||
|
'14:00-15:00',
|
||||||
|
'15:00-16:00',
|
||||||
|
'16:00-17:00',
|
||||||
|
'17:00-18:00',
|
||||||
|
'18:00-19:00',
|
||||||
|
'19:00-20:00',
|
||||||
|
'20:00-21:00',
|
||||||
|
'21:00-22:00',
|
||||||
|
],
|
||||||
|
set_light_price: ''
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
ground_id: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择场地',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
img: [{
|
||||||
|
required: true,
|
||||||
|
message: '请上传场地图片',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
title: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入场地标题',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
price: [{
|
||||||
|
required: true,
|
||||||
|
message: '普通日期场地价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
holiday_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入节假日场地价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
holiday: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择节假日',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
free_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择免费时间段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
hit_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择高峰时间段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
light_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择灯光使用时段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
set_light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入高峰期灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
status: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择场地状态',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
options: [],
|
||||||
|
/*左边长度*/
|
||||||
|
formLabelWidth: '120px',
|
||||||
|
/*是否显示*/
|
||||||
|
dialogVisible: false,
|
||||||
|
loading: false,
|
||||||
|
/*是否上传图片*/
|
||||||
|
isupload: false,
|
||||||
|
veuneList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ['open_add', 'addform'],
|
||||||
|
created() {
|
||||||
|
this.dialogVisible = this.open_add;
|
||||||
|
// 生成 6:00-22:00 的时间段，格式为 { value: '06:00-07:00', label: '06:00 - 07:00' }
|
||||||
|
const start = 6, end = 22;
|
||||||
|
this.options = [];
|
||||||
|
for (let i = start; i < end; i++) {
|
||||||
|
const h1 = i < 10 ? `0${i}` : `${i}`;
|
||||||
|
const h2 = i + 1 < 10 ? `0${i + 1}` : `${i + 1}`;
|
||||||
|
this.options.push({
|
||||||
|
value: `${h1}:00-${h2}:00`,
|
||||||
|
label: `${h1}:00 - ${h2}:00`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.getVeuneList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取场馆列表-不需要分页
|
||||||
|
getVeuneList() {
|
||||||
|
let self = this;
|
||||||
|
VenueApi.gdLists({}, true)
|
||||||
|
.then(res => {
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
self.veuneList = res.data;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*添加场地*/
|
||||||
|
addUser() {
|
||||||
|
let self = this;
|
||||||
|
// 复制表单数据
|
||||||
|
let params = { ...self.form };
|
||||||
|
// 处理节假日日期格式
|
||||||
|
if (Array.isArray(params.holiday)) {
|
||||||
|
params.holiday = params.holiday.map(date => {
|
||||||
|
if (typeof date === 'string') return date;
|
||||||
|
const d = new Date(date);
|
||||||
|
const y = d.getFullYear();
|
||||||
|
const m = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = d.getDate().toString().padStart(2, '0');
|
||||||
|
return `${y}-${m}-${day}`;
|
||||||
|
});
|
||||||
|
params.holiday = params.holiday.join(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
self.loading = true;
|
||||||
|
|
||||||
|
if (this.selectGroundType == 2) {
|
||||||
|
// 篮球场只需要保留场馆、场地图、标题、价格、场地状态其余的不要
|
||||||
|
delete params.holiday_price;
|
||||||
|
delete params.light_price;
|
||||||
|
delete params.set_light_price;
|
||||||
|
delete params.holiday;
|
||||||
|
delete params.free_time;
|
||||||
|
delete params.hit_time;
|
||||||
|
delete params.light_time;
|
||||||
|
}
|
||||||
|
|
||||||
|
VenueApi.addGroundRoom(params).then(data => {
|
||||||
|
self.loading = false;
|
||||||
|
self.$message({
|
||||||
|
message: '添加成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
self.dialogFormVisible(true);
|
||||||
|
}).catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*获取富文本内容*/
|
||||||
|
contentChangeFunc(e){
|
||||||
|
this.form.textarea1 = e;
|
||||||
|
},
|
||||||
|
|
||||||
|
/*关闭弹窗*/
|
||||||
|
dialogFormVisible(e) {
|
||||||
|
if (e) {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'success',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'error',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*上传*/
|
||||||
|
openUpload(e) {
|
||||||
|
this.type = e;
|
||||||
|
this.isupload = true;
|
||||||
|
},
|
||||||
|
/*获取图片*/
|
||||||
|
returnImgsFunc(e) {
|
||||||
|
if (e != null && e.length > 0) {
|
||||||
|
this.file_path = e[0].file_path;
|
||||||
|
this.form.img = e[0].file_id;
|
||||||
|
}
|
||||||
|
this.isupload = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
changeGround(e) {
|
||||||
|
this.selectGroundType = this.veuneList.find(item => item.id === e).type_id
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
127
src/views/venue/reserve/Data.vue
Normal file
127
src/views/venue/reserve/Data.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog title="场地使用率" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false">
|
||||||
|
|
||||||
|
<div class="common-seach-wrap">
|
||||||
|
<el-form size="small" :inline="true" :model="searchForm" class="demo-form-inline">
|
||||||
|
<el-form-item label="起始时间">
|
||||||
|
<div class="block">
|
||||||
|
<span class="demonstration"></span>
|
||||||
|
<el-date-picker size="small" v-model="searchForm.create_time" type="daterange"
|
||||||
|
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"></el-date-picker>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="small" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<div style="">
|
||||||
|
<div style="text-align: center;">场地使用率</div>
|
||||||
|
<div style="margin-top: 20px;display: flex; justify-content: center;">
|
||||||
|
<el-progress type="circle" :percentage="percentage"></el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<!-- <el-button @click="dialogFormVisible">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button> -->
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PorductApi from '@/api/product.js';
|
||||||
|
import Upload from '@/components/file/Upload';
|
||||||
|
import Uediter from '@/components/UE.vue';
|
||||||
|
import VenueApi from '@/api/venue.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Upload,
|
||||||
|
Uediter,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
/*富文本框配置*/
|
||||||
|
ueditor: {
|
||||||
|
text: '',
|
||||||
|
config: {
|
||||||
|
initialFrameWidth: 400,
|
||||||
|
initialFrameHeight: 500
|
||||||
|
},
|
||||||
|
},
|
||||||
|
searchForm: {
|
||||||
|
create_time: '',
|
||||||
|
start_time: '',
|
||||||
|
end_time: ''
|
||||||
|
},
|
||||||
|
/*左边长度*/
|
||||||
|
formLabelWidth: '120px',
|
||||||
|
/*是否显示*/
|
||||||
|
dialogVisible: false,
|
||||||
|
loading: false,
|
||||||
|
/*是否上传图片*/
|
||||||
|
isupload: false,
|
||||||
|
model: {},
|
||||||
|
percentage: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ['open_data', 'dataform'],
|
||||||
|
created() {
|
||||||
|
this.model = this.dataform;
|
||||||
|
this.dialogVisible = this.open_data;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
const Params = this.searchForm
|
||||||
|
Params.room_id = this.model.id
|
||||||
|
|
||||||
|
if (Params.start_time && Params.end_time) {
|
||||||
|
Params.start_time = Params.start_time
|
||||||
|
Params.end_time = Params.end_time
|
||||||
|
}
|
||||||
|
|
||||||
|
VenueApi.groundRoomRate(Params, true).then(res => {
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
this.percentage = res.data.rate
|
||||||
|
}).catch(error => {
|
||||||
|
console.log("🚀 ~ error:", error)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
/*关闭弹窗*/
|
||||||
|
dialogFormVisible(e) {
|
||||||
|
if (e) {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'success',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'error',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onSubmit() {
|
||||||
|
let self = this;
|
||||||
|
self.loading = true;
|
||||||
|
self.searchForm.start_time = self.searchForm.create_time[0]
|
||||||
|
self.searchForm.end_time = self.searchForm.create_time[1]
|
||||||
|
self.getData();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
370
src/views/venue/reserve/Edit.vue
Normal file
370
src/views/venue/reserve/Edit.vue
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog title="修改场地" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
|
||||||
|
:close-on-press-escape="false">
|
||||||
|
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
||||||
|
<el-form-item label="选择场馆" prop="ground_id" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.ground_id">
|
||||||
|
<el-option :value="item.id" :label="item.name" :key="item.id" v-for="item in veuneList"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场地图" prop="img" :label-width="formLabelWidth">
|
||||||
|
<el-row>
|
||||||
|
<el-button type="primary" @click="openUpload">选择图片</el-button>
|
||||||
|
<div v-if="form.img != ''" class="img">
|
||||||
|
<img :src="file_path" width="100" height="100" />
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="场地标题" prop="title" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<!-- 网球场 -->
|
||||||
|
<template v-if="selectGroundType == 1">
|
||||||
|
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
||||||
|
<el-date-picker
|
||||||
|
type="dates"
|
||||||
|
v-model="form.holiday"
|
||||||
|
placeholder="选择一个或多个日期">
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光使用时段" prop="light_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.light_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期灯光价格" prop="set_light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.set_light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 篮球场 -->
|
||||||
|
<template v-if="selectGroundType == 2">
|
||||||
|
<el-form-item label="场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.status">
|
||||||
|
<el-option :value="1" label="启用"></el-option>
|
||||||
|
<el-option :value="0" label="禁用"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="addUser" :loading="loading">确 定</el-button>
|
||||||
|
</div>
|
||||||
|
<!--上传图片组件-->
|
||||||
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import PorductApi from '@/api/product.js';
|
||||||
|
import Upload from '@/components/file/Upload';
|
||||||
|
import Uediter from '@/components/UE.vue';
|
||||||
|
import VenueApi from '@/api/venue.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Upload,
|
||||||
|
Uediter,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
/*富文本框配置*/
|
||||||
|
ueditor: {
|
||||||
|
text: '',
|
||||||
|
config: {
|
||||||
|
initialFrameWidth: 400,
|
||||||
|
initialFrameHeight: 500
|
||||||
|
},
|
||||||
|
},
|
||||||
|
selectGroundType: null,
|
||||||
|
form: {
|
||||||
|
ground_id: '',
|
||||||
|
img: '',
|
||||||
|
title: '',
|
||||||
|
price: '',
|
||||||
|
holiday_price: '',
|
||||||
|
light_price: '',
|
||||||
|
status: '',
|
||||||
|
holiday: '',
|
||||||
|
free_time: [],
|
||||||
|
hit_time: [],
|
||||||
|
light_time: [],
|
||||||
|
set_light_price: '',
|
||||||
|
},
|
||||||
|
formRules: {
|
||||||
|
ground_id: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择场地',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
img: [{
|
||||||
|
required: true,
|
||||||
|
message: '请上传场地图片',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
title: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入场地标题',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
price: [{
|
||||||
|
required: true,
|
||||||
|
message: '普通日期场地价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
holiday_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入节假日场地价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
holiday: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择节假日',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
free_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择免费时间段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
hit_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择高峰期时间段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
light_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择灯光使用时段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
set_light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入高峰期灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
status: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择场地状态',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
/*左边长度*/
|
||||||
|
formLabelWidth: '120px',
|
||||||
|
/*是否显示*/
|
||||||
|
dialogVisible: false,
|
||||||
|
loading: false,
|
||||||
|
/*是否上传图片*/
|
||||||
|
isupload: false,
|
||||||
|
veuneList: [],
|
||||||
|
options: [],
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ['open_edit', 'editform'],
|
||||||
|
created() {
|
||||||
|
this.getVeuneList()
|
||||||
|
|
||||||
|
// 生成 6:00-22:00 的时间段，格式为 { value: '06:00-07:00', label: '06:00 - 07:00' }
|
||||||
|
const start = 6, end = 22;
|
||||||
|
this.options = [];
|
||||||
|
for (let i = start; i < end; i++) {
|
||||||
|
const h1 = i < 10 ? `0${i}` : `${i}`;
|
||||||
|
const h2 = i + 1 < 10 ? `0${i + 1}` : `${i + 1}`;
|
||||||
|
this.options.push({
|
||||||
|
value: `${h1}:00-${h2}:00`,
|
||||||
|
label: `${h1}:00 - ${h2}:00`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.dialogVisible = this.open_edit;
|
||||||
|
this.selectGroundType = this.editform.ground_id;
|
||||||
|
|
||||||
|
this.form.id = this.editform.id;
|
||||||
|
this.form.ground_id = this.editform.ground_id;
|
||||||
|
this.form.img = this.editform.img_id;
|
||||||
|
this.form.title = this.editform.title;
|
||||||
|
this.form.price = this.editform.price;
|
||||||
|
|
||||||
|
if (this.form.ground_id == 1) {
|
||||||
|
this.form.holiday_price = this.editform.holiday_price;
|
||||||
|
// 将字符串日期转为 Date 对象，适配 el-date-picker
|
||||||
|
this.form.holiday = this.editform.holiday.split(',').map(str => {
|
||||||
|
// 支持 'YYYY-MM-DD' 格式转 Date
|
||||||
|
if (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
|
||||||
|
return new Date(str.replace(/-/g, '/'));
|
||||||
|
}
|
||||||
|
// 其它格式直接尝试 new Date
|
||||||
|
return new Date(str);
|
||||||
|
});
|
||||||
|
console.log("🚀 ~ this.form.holiday:", this.form.holiday)
|
||||||
|
this.form.free_time = this.editform.free_time;
|
||||||
|
this.form.hit_time = this.editform.hit_time;
|
||||||
|
this.form.light_time = this.editform.light_time;
|
||||||
|
this.form.light_price = this.editform.light_price;
|
||||||
|
this.form.set_light_price = this.editform.set_light_price;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.form.status = this.editform.status;
|
||||||
|
console.log("🚀 ~ this.form:", this.form)
|
||||||
|
this.file_path = this.editform.img;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取场馆列表-不需要分页
|
||||||
|
getVeuneList() {
|
||||||
|
let self = this;
|
||||||
|
VenueApi.gdLists({}, true)
|
||||||
|
.then(res => {
|
||||||
|
// 确保为数组
|
||||||
|
self.veuneList = Array.isArray(res.data) ? res.data : [];
|
||||||
|
console.log("🚀 ~ self.veuneList:", self.veuneList)
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*添加场地*/
|
||||||
|
addUser() {
|
||||||
|
let self = this;
|
||||||
|
let params = self.form;
|
||||||
|
|
||||||
|
// 处理节假日日期格式
|
||||||
|
if (Array.isArray(params.holiday)) {
|
||||||
|
params.holiday = params.holiday.map(date => {
|
||||||
|
if (typeof date === 'string') return date;
|
||||||
|
const d = new Date(date);
|
||||||
|
const y = d.getFullYear();
|
||||||
|
const m = (d.getMonth() + 1).toString().padStart(2, '0');
|
||||||
|
const day = d.getDate().toString().padStart(2, '0');
|
||||||
|
return `${y}-${m}-${day}`;
|
||||||
|
});
|
||||||
|
params.holiday = params.holiday.join(',');
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.selectGroundType == 2) {
|
||||||
|
// 篮球场只需要保留场馆、场地图、标题、价格、场地状态其余的不要
|
||||||
|
delete params.holiday_price;
|
||||||
|
delete params.light_price;
|
||||||
|
delete params.set_light_price;
|
||||||
|
delete params.holiday;
|
||||||
|
delete params.free_time;
|
||||||
|
delete params.hit_time;
|
||||||
|
delete params.light_time;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.loading = true;
|
||||||
|
VenueApi.editGroundRoom(params).then(data => {
|
||||||
|
self.loading = false;
|
||||||
|
self.$message({
|
||||||
|
message: '添加成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
self.dialogFormVisible(true);
|
||||||
|
}).catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*获取富文本内容*/
|
||||||
|
contentChangeFunc(e){
|
||||||
|
this.form.textarea1 = e;
|
||||||
|
},
|
||||||
|
|
||||||
|
/*关闭弹窗*/
|
||||||
|
dialogFormVisible(e) {
|
||||||
|
if (e) {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'success',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$emit('closeDialog', {
|
||||||
|
type: 'error',
|
||||||
|
openDialog: false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*上传*/
|
||||||
|
openUpload(e) {
|
||||||
|
this.type = e;
|
||||||
|
this.isupload = true;
|
||||||
|
},
|
||||||
|
/*获取图片*/
|
||||||
|
returnImgsFunc(e) {
|
||||||
|
if (e != null && e.length > 0) {
|
||||||
|
this.file_path = e[0].file_path;
|
||||||
|
this.form.img = e[0].file_id;
|
||||||
|
}
|
||||||
|
this.isupload = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.img {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
245
src/views/venue/reserve/index.vue
Normal file
245
src/views/venue/reserve/index.vue
Normal file
@ -0,0 +1,245 @@
|
|||||||
|
<template>
|
||||||
|
<div class="venue">
|
||||||
|
<!--内容-->
|
||||||
|
<div class="product-content">
|
||||||
|
<div class="table-wrap">
|
||||||
|
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||||
|
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="ground_name" label="场馆名称"></el-table-column>
|
||||||
|
<el-table-column prop="title" label="场地名称"></el-table-column>
|
||||||
|
<el-table-column prop="nickName" label="场地图片">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<img :src="scope.row.img" width="30px" height="30px" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="170">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button @click="editClick(scope.row)" type="text" size="small"
|
||||||
|
v-auth="'/venue/reserve/reserve'">预定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--分页-->
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
|
||||||
|
:current-page="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper"
|
||||||
|
:total="totalDataNumber"></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--添加-->
|
||||||
|
<Add v-if="open_add" :open_add="open_add" @closeDialog="closeDialogFunc($event, 'add')"></Add>
|
||||||
|
<!--修改-->
|
||||||
|
<Edit v-if="open_edit" :open_edit="open_edit" :editform="venueModel" @closeDialog="closeDialogFunc($event, 'edit')"></Edit>
|
||||||
|
<!-- 使用率 -->
|
||||||
|
<Data v-if="open_data" :open_data="open_data" :dataform="venueModel" @closeDialog="closeDialogFunc($event, 'data')"></Data>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UserApi from '@/api/user.js';
|
||||||
|
import VenueApi from '@/api/venue.js';
|
||||||
|
import Add from './Add.vue';
|
||||||
|
import Edit from './Edit.vue';
|
||||||
|
import Data from './Data.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
/*编辑组件*/
|
||||||
|
Edit,
|
||||||
|
Add,
|
||||||
|
Data
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
/*是否加载完成*/
|
||||||
|
loading: true,
|
||||||
|
/*列表数据*/
|
||||||
|
tableData: [],
|
||||||
|
/*一页多少条*/
|
||||||
|
pageSize: 20,
|
||||||
|
/*一共多少条数据*/
|
||||||
|
totalDataNumber: 0,
|
||||||
|
/*当前是第几页*/
|
||||||
|
curPage: 1,
|
||||||
|
/*横向表单数据模型*/
|
||||||
|
formInline: {
|
||||||
|
title: '',
|
||||||
|
ground_id: '',
|
||||||
|
status: ''
|
||||||
|
},
|
||||||
|
/*是否打开添加弹窗*/
|
||||||
|
open_add: false,
|
||||||
|
/*是否打开编辑弹窗*/
|
||||||
|
open_edit: false,
|
||||||
|
open_data: false,
|
||||||
|
/*当前编辑的对象*/
|
||||||
|
venueModel: {},
|
||||||
|
veuneList: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
/*获取列表*/
|
||||||
|
this.getTableList();
|
||||||
|
this.getVeuneList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取场馆列表-不需要分页
|
||||||
|
getVeuneList() {
|
||||||
|
let self = this;
|
||||||
|
VenueApi.gdLists({}, true)
|
||||||
|
.then(res => {
|
||||||
|
self.veuneList = res.data;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/*选择第几页*/
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
let self = this;
|
||||||
|
self.curPage = val;
|
||||||
|
self.loading = true;
|
||||||
|
self.getTableList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/*每页多少条*/
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.curPage = 1;
|
||||||
|
this.pageSize = val;
|
||||||
|
this.getTableList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/*获取列表*/
|
||||||
|
getTableList() {
|
||||||
|
let self = this;
|
||||||
|
let Params = self.formInline;
|
||||||
|
Params.page = self.curPage;
|
||||||
|
Params.size = self.pageSize;
|
||||||
|
VenueApi.groundRoomList(Params, true)
|
||||||
|
.then(res => {
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
self.loading = false;
|
||||||
|
self.tableData = res.data.data;
|
||||||
|
self.totalDataNumber = res.data.total;
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*搜索查询*/
|
||||||
|
onSubmit() {
|
||||||
|
let self = this;
|
||||||
|
self.loading = true;
|
||||||
|
self.curPage = 1;
|
||||||
|
self.getTableList();
|
||||||
|
},
|
||||||
|
|
||||||
|
/*重置*/
|
||||||
|
onReset() {
|
||||||
|
this.formInline = {
|
||||||
|
title: '',
|
||||||
|
ground_id: '',
|
||||||
|
status: ''
|
||||||
|
};
|
||||||
|
this.onSubmit();
|
||||||
|
},
|
||||||
|
|
||||||
|
/*打开添加*/
|
||||||
|
addClick(item) {
|
||||||
|
this.open_add = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/*打开编辑*/
|
||||||
|
editClick(item) {
|
||||||
|
let self = this;
|
||||||
|
let params = item.id;
|
||||||
|
self.$router.push({
|
||||||
|
path: '/venue/reserve/reserve',
|
||||||
|
query: {
|
||||||
|
room_id: params
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/*关闭弹窗*/
|
||||||
|
closeDialogFunc(e, f) {
|
||||||
|
console.log("🚀 ~ e, f:", e, f)
|
||||||
|
if (f == 'add') {
|
||||||
|
this.open_add = e.openDialog;
|
||||||
|
if (e.type == 'success') {
|
||||||
|
this.getTableList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (f == 'edit') {
|
||||||
|
this.open_edit = e.openDialog;
|
||||||
|
if (e.type == 'success') {
|
||||||
|
this.getTableList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (f == 'tag') {
|
||||||
|
this.open_tag = e.openDialog;
|
||||||
|
if (e.type == 'success') {
|
||||||
|
this.getTableList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (f == 'data') {
|
||||||
|
this.open_data = e.openDialog;
|
||||||
|
if (e.type == 'success') {
|
||||||
|
this.getTableList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/*删除场地*/
|
||||||
|
deleteClick(row) {
|
||||||
|
let self = this;
|
||||||
|
self
|
||||||
|
.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
self.loading = true;
|
||||||
|
VenueApi.delGroundRoom(
|
||||||
|
{
|
||||||
|
id: row.id
|
||||||
|
},
|
||||||
|
true
|
||||||
|
)
|
||||||
|
.then(data => {
|
||||||
|
self.loading = false;
|
||||||
|
if (data.code == 1) {
|
||||||
|
self.$message({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
self.getTableList();
|
||||||
|
} else {
|
||||||
|
self.loading = false;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
self.loading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 打开使用率
|
||||||
|
dataClick(item) {
|
||||||
|
this.open_data = true;
|
||||||
|
this.venueModel = item;
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style></style>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
:close-on-press-escape="false">
|
:close-on-press-escape="false">
|
||||||
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
<el-form size="small" :model="form" :rules="formRules" ref="form">
|
||||||
<el-form-item label="选择场馆" prop="ground_id" :label-width="formLabelWidth">
|
<el-form-item label="选择场馆" prop="ground_id" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.ground_id">
|
<el-select v-model="form.ground_id" @change="changeGround">
|
||||||
<el-option :value="item.id" :label="item.name" :key="item.id" v-for="item in veuneList"></el-option>
|
<el-option :value="item.id" :label="item.name" :key="item.id" v-for="item in veuneList"></el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -21,47 +21,70 @@
|
|||||||
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
<template v-if="selectGroundType == 1">
|
||||||
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
</el-form-item>
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
||||||
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
type="dates"
|
type="dates"
|
||||||
v-model="form.holiday"
|
v-model="form.holiday"
|
||||||
placeholder="选择一个或多个日期">
|
placeholder="选择一个或多个日期">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
<el-form-item label="灯光使用时段" prop="light_time" :label-width="formLabelWidth">
|
||||||
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
<el-select v-model="form.light_time" multiple placeholder="请选择">
|
||||||
</el-form-item>
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期灯光价格" prop="set_light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.set_light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="selectGroundType == 2">
|
||||||
|
<el-form-item label="场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.status">
|
<el-select v-model="form.status">
|
||||||
@ -101,6 +124,7 @@ export default {
|
|||||||
initialFrameHeight: 500
|
initialFrameHeight: 500
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
selectGroundType: null,
|
||||||
form: {
|
form: {
|
||||||
ground_id: '',
|
ground_id: '',
|
||||||
img: '',
|
img: '',
|
||||||
@ -115,7 +139,26 @@ export default {
|
|||||||
'07:00-08:00',
|
'07:00-08:00',
|
||||||
'08:00-09:00',
|
'08:00-09:00',
|
||||||
],
|
],
|
||||||
hit_time:[]
|
hit_time:[],
|
||||||
|
light_time:[
|
||||||
|
'06:00-07:00',
|
||||||
|
'07:00-08:00',
|
||||||
|
'08:00-09:00',
|
||||||
|
'09:00-10:00',
|
||||||
|
'10:00-11:00',
|
||||||
|
'11:00-12:00',
|
||||||
|
'12:00-13:00',
|
||||||
|
'13:00-14:00',
|
||||||
|
'14:00-15:00',
|
||||||
|
'15:00-16:00',
|
||||||
|
'16:00-17:00',
|
||||||
|
'17:00-18:00',
|
||||||
|
'18:00-19:00',
|
||||||
|
'19:00-20:00',
|
||||||
|
'20:00-21:00',
|
||||||
|
'21:00-22:00',
|
||||||
|
],
|
||||||
|
set_light_price: ''
|
||||||
},
|
},
|
||||||
formRules: {
|
formRules: {
|
||||||
ground_id: [{
|
ground_id: [{
|
||||||
@ -158,10 +201,20 @@ export default {
|
|||||||
message: '请选择高峰时间段',
|
message: '请选择高峰时间段',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
}],
|
||||||
|
light_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择灯光使用时段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
light_price: [{
|
light_price: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入灯光价格',
|
message: '请输入灯光价格',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
|
set_light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入高峰期灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
}],
|
}],
|
||||||
status: [{
|
status: [{
|
||||||
required: true,
|
required: true,
|
||||||
@ -231,6 +284,18 @@ export default {
|
|||||||
self.$refs.form.validate((valid) => {
|
self.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
self.loading = true;
|
self.loading = true;
|
||||||
|
|
||||||
|
if (this.selectGroundType == 2) {
|
||||||
|
// 篮球场只需要保留场馆、场地图、标题、价格、场地状态其余的不要
|
||||||
|
delete params.holiday_price;
|
||||||
|
delete params.light_price;
|
||||||
|
delete params.set_light_price;
|
||||||
|
delete params.holiday;
|
||||||
|
delete params.free_time;
|
||||||
|
delete params.hit_time;
|
||||||
|
delete params.light_time;
|
||||||
|
}
|
||||||
|
|
||||||
VenueApi.addGroundRoom(params).then(data => {
|
VenueApi.addGroundRoom(params).then(data => {
|
||||||
self.loading = false;
|
self.loading = false;
|
||||||
self.$message({
|
self.$message({
|
||||||
@ -277,6 +342,10 @@ export default {
|
|||||||
}
|
}
|
||||||
this.isupload = false;
|
this.isupload = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
changeGround(e) {
|
||||||
|
this.selectGroundType = this.veuneList.find(item => item.id === e).type_id
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
<el-form-item label="起始时间">
|
<el-form-item label="起始时间">
|
||||||
<div class="block">
|
<div class="block">
|
||||||
<span class="demonstration"></span>
|
<span class="demonstration"></span>
|
||||||
<el-date-picker size="small" v-model="searchForm.start_time" type="daterange"
|
<el-date-picker size="small" v-model="searchForm.create_time" type="daterange"
|
||||||
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
|
||||||
end-placeholder="结束日期"></el-date-picker>
|
end-placeholder="结束日期"></el-date-picker>
|
||||||
</div>
|
</div>
|
||||||
@ -55,6 +55,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
searchForm: {
|
searchForm: {
|
||||||
|
create_time: '',
|
||||||
start_time: '',
|
start_time: '',
|
||||||
end_time: ''
|
end_time: ''
|
||||||
},
|
},
|
||||||
@ -87,6 +88,7 @@ export default {
|
|||||||
|
|
||||||
VenueApi.groundRoomRate(Params, true).then(res => {
|
VenueApi.groundRoomRate(Params, true).then(res => {
|
||||||
console.log("🚀 ~ res:", res)
|
console.log("🚀 ~ res:", res)
|
||||||
|
this.percentage = res.data.rate
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.log("🚀 ~ error:", error)
|
console.log("🚀 ~ error:", error)
|
||||||
})
|
})
|
||||||
@ -110,9 +112,8 @@ export default {
|
|||||||
onSubmit() {
|
onSubmit() {
|
||||||
let self = this;
|
let self = this;
|
||||||
self.loading = true;
|
self.loading = true;
|
||||||
const start_time = self.searchForm.start_time;
|
self.searchForm.start_time = self.searchForm.create_time[0]
|
||||||
self.searchForm.start_time = start_time[0]
|
self.searchForm.end_time = self.searchForm.create_time[1]
|
||||||
self.searchForm.end_time = start_time[1]
|
|
||||||
self.getData();
|
self.getData();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -21,47 +21,73 @@
|
|||||||
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
<!-- 网球场 -->
|
||||||
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
<template v-if="selectGroundType == 1">
|
||||||
</el-form-item>
|
<el-form-item label="普通日期场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入普通日期场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
<el-form-item label="节假日场地价格" prop="holiday_price" :label-width="formLabelWidth">
|
||||||
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
<el-input v-model="form.holiday_price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
<el-form-item label="节假日选择" prop="holiday" :label-width="formLabelWidth">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
type="dates"
|
type="dates"
|
||||||
v-model="form.holiday"
|
v-model="form.holiday"
|
||||||
placeholder="选择一个或多个日期">
|
placeholder="选择一个或多个日期">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
<el-form-item label="免费时间段" prop="free_time" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
<el-select v-model="form.free_time" multiple placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
<el-form-item label="高峰期时间段" prop="hit_time" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
<el-select v-model="form.hit_time" multiple placeholder="请选择">
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in options"
|
v-for="item in options"
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:label="item.label"
|
:label="item.label"
|
||||||
:value="item.value">
|
:value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光使用时段" prop="light_time" :label-width="formLabelWidth">
|
||||||
|
<el-select v-model="form.light_time" multiple placeholder="请选择">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="高峰期灯光价格" prop="set_light_price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.set_light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 篮球场 -->
|
||||||
|
<template v-if="selectGroundType == 2">
|
||||||
|
<el-form-item label="场地价格" prop="price" :label-width="formLabelWidth">
|
||||||
|
<el-input v-model="form.price" autocomplete="off" placeholder="请输入场地价格"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
<el-form-item label="灯光价格" prop="light_price" :label-width="formLabelWidth">
|
|
||||||
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
<el-form-item label="场地状态" prop="status" :label-width="formLabelWidth">
|
||||||
<el-select v-model="form.status">
|
<el-select v-model="form.status">
|
||||||
@ -101,6 +127,7 @@ export default {
|
|||||||
initialFrameHeight: 500
|
initialFrameHeight: 500
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
selectGroundType: null,
|
||||||
form: {
|
form: {
|
||||||
ground_id: '',
|
ground_id: '',
|
||||||
img: '',
|
img: '',
|
||||||
@ -112,6 +139,8 @@ export default {
|
|||||||
holiday: '',
|
holiday: '',
|
||||||
free_time: [],
|
free_time: [],
|
||||||
hit_time: [],
|
hit_time: [],
|
||||||
|
light_time: [],
|
||||||
|
set_light_price: '',
|
||||||
},
|
},
|
||||||
formRules: {
|
formRules: {
|
||||||
ground_id: [{
|
ground_id: [{
|
||||||
@ -154,11 +183,21 @@ export default {
|
|||||||
message: '请选择高峰期时间段',
|
message: '请选择高峰期时间段',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
}],
|
||||||
|
light_time: [{
|
||||||
|
required: true,
|
||||||
|
message: '请选择灯光使用时段',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
light_price: [{
|
light_price: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入灯光价格',
|
message: '请输入灯光价格',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}],
|
}],
|
||||||
|
set_light_price: [{
|
||||||
|
required: true,
|
||||||
|
message: '请输入高峰期灯光价格',
|
||||||
|
trigger: 'blur'
|
||||||
|
}],
|
||||||
status: [{
|
status: [{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请选择场地状态',
|
message: '请选择场地状态',
|
||||||
@ -193,27 +232,35 @@ export default {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
this.dialogVisible = this.open_edit;
|
this.dialogVisible = this.open_edit;
|
||||||
console.log(this.editform.model);
|
this.selectGroundType = this.editform.ground_id;
|
||||||
|
|
||||||
this.form.id = this.editform.id;
|
this.form.id = this.editform.id;
|
||||||
this.form.ground_id = this.editform.ground_id;
|
this.form.ground_id = this.editform.ground_id;
|
||||||
this.form.img = this.editform.img_id;
|
this.form.img = this.editform.img_id;
|
||||||
this.form.title = this.editform.title;
|
this.form.title = this.editform.title;
|
||||||
this.form.price = this.editform.price;
|
this.form.price = this.editform.price;
|
||||||
this.form.holiday_price = this.editform.holiday_price;
|
|
||||||
// 将字符串日期转为 Date 对象，适配 el-date-picker
|
if (this.form.ground_id == 1) {
|
||||||
this.form.holiday = this.editform.holiday.split(',').map(str => {
|
this.form.holiday_price = this.editform.holiday_price;
|
||||||
// 支持 'YYYY-MM-DD' 格式转 Date
|
// 将字符串日期转为 Date 对象，适配 el-date-picker
|
||||||
if (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
|
this.form.holiday = this.editform.holiday.split(',').map(str => {
|
||||||
return new Date(str.replace(/-/g, '/'));
|
// 支持 'YYYY-MM-DD' 格式转 Date
|
||||||
}
|
if (/^\d{4}-\d{2}-\d{2}$/.test(str)) {
|
||||||
// 其它格式直接尝试 new Date
|
return new Date(str.replace(/-/g, '/'));
|
||||||
return new Date(str);
|
}
|
||||||
});
|
// 其它格式直接尝试 new Date
|
||||||
console.log("🚀 ~ this.form.holiday:", this.form.holiday)
|
return new Date(str);
|
||||||
this.form.free_time = this.editform.free_time;
|
});
|
||||||
this.form.hit_time = this.editform.hit_time;
|
console.log("🚀 ~ this.form.holiday:", this.form.holiday)
|
||||||
this.form.light_price = this.editform.light_price;
|
this.form.free_time = this.editform.free_time;
|
||||||
|
this.form.hit_time = this.editform.hit_time;
|
||||||
|
this.form.light_time = this.editform.light_time;
|
||||||
|
this.form.light_price = this.editform.light_price;
|
||||||
|
this.form.set_light_price = this.editform.set_light_price;
|
||||||
|
}
|
||||||
|
|
||||||
this.form.status = this.editform.status;
|
this.form.status = this.editform.status;
|
||||||
console.log("🚀 ~ this.form:", this.form)
|
console.log("🚀 ~ this.form:", this.form)
|
||||||
this.file_path = this.editform.img;
|
this.file_path = this.editform.img;
|
||||||
@ -253,6 +300,17 @@ export default {
|
|||||||
|
|
||||||
self.$refs.form.validate((valid) => {
|
self.$refs.form.validate((valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
if (this.selectGroundType == 2) {
|
||||||
|
// 篮球场只需要保留场馆、场地图、标题、价格、场地状态其余的不要
|
||||||
|
delete params.holiday_price;
|
||||||
|
delete params.light_price;
|
||||||
|
delete params.set_light_price;
|
||||||
|
delete params.holiday;
|
||||||
|
delete params.free_time;
|
||||||
|
delete params.hit_time;
|
||||||
|
delete params.light_time;
|
||||||
|
}
|
||||||
|
|
||||||
self.loading = true;
|
self.loading = true;
|
||||||
VenueApi.editGroundRoom(params).then(data => {
|
VenueApi.editGroundRoom(params).then(data => {
|
||||||
self.loading = false;
|
self.loading = false;
|
||||||
|
|||||||
@ -197,6 +197,7 @@ export default {
|
|||||||
|
|
||||||
/*关闭弹窗*/
|
/*关闭弹窗*/
|
||||||
closeDialogFunc(e, f) {
|
closeDialogFunc(e, f) {
|
||||||
|
console.log("🚀 ~ e, f:", e, f)
|
||||||
if (f == 'add') {
|
if (f == 'add') {
|
||||||
this.open_add = e.openDialog;
|
this.open_add = e.openDialog;
|
||||||
if (e.type == 'success') {
|
if (e.type == 'success') {
|
||||||
@ -216,7 +217,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (f == 'data') {
|
if (f == 'data') {
|
||||||
this.open_add = e.openDialog;
|
this.open_data = e.openDialog;
|
||||||
if (e.type == 'success') {
|
if (e.type == 'success') {
|
||||||
this.getTableList();
|
this.getTableList();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,6 +30,8 @@
|
|||||||
v-auth="'/venue/venue/edit'">编辑</el-button>
|
v-auth="'/venue/venue/edit'">编辑</el-button>
|
||||||
<el-button @click="deleteClick(scope.row)" type="text" size="small"
|
<el-button @click="deleteClick(scope.row)" type="text" size="small"
|
||||||
v-auth="'/venue/venue/delete'">删除</el-button>
|
v-auth="'/venue/venue/delete'">删除</el-button>
|
||||||
|
<el-button @click="reserveClick(scope.row)" type="text" size="small"
|
||||||
|
v-auth="'/venue/venue/delete'" v-if="scope.row.type_id == 1">预定</el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
@ -148,6 +150,18 @@ export default {
|
|||||||
editClick(item) {
|
editClick(item) {
|
||||||
this.venueModel = item;
|
this.venueModel = item;
|
||||||
this.open_edit = true;
|
this.open_edit = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
/*打开预定*/
|
||||||
|
reserveClick(item) {
|
||||||
|
let self = this;
|
||||||
|
let params = item.id;
|
||||||
|
self.$router.push({
|
||||||
|
path: '/venue/venue/reserve',
|
||||||
|
query: {
|
||||||
|
cg_id: params
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/*关闭弹窗*/
|
/*关闭弹窗*/
|
||||||
|
|||||||
481
src/views/venue/venue/reserve.vue
Normal file
481
src/views/venue/venue/reserve.vue
Normal file
@ -0,0 +1,481 @@
|
|||||||
|
<template>
|
||||||
|
<div class="venue">
|
||||||
|
<div @click="toCgOrder" style="margin-bottom: 20px;cursor: pointer;color: #365A9A;font-size: 16px;">
|
||||||
|
备注信息：如果选错预定场地时间，可以前往场馆->订单管理，取消改订单重新预定。
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="tag">
|
||||||
|
<div class="tag1">可预约</div>
|
||||||
|
<div class="tag2">已选中</div>
|
||||||
|
<div class="tag3">已约</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--内容-->
|
||||||
|
<div class="date-block">
|
||||||
|
<div class="date1-block">
|
||||||
|
<div class="date1-block-item bg-f7f7f7" :class="currentWeek == index ? 'bg-365A9A text-fff' : ''" v-for="(item, index) in weekList" :key="index" @click="selectWeek(item, index, item)">
|
||||||
|
<div>{{ item.value[0] }}</div>
|
||||||
|
<div>{{ item.value[1] }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<!-- 场馆时间 -->
|
||||||
|
<div class="d-f">
|
||||||
|
<div class="cg-time-block">
|
||||||
|
<div class="cg-time" v-for="(item, index1) in timeList" :key="index1">
|
||||||
|
{{ item.t }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-f cg-info pr" style="" v-if="timeList.length > 0">
|
||||||
|
<div class="" style="width: 120px;margin-right: 20px;" v-for="(item2, index2) in cdList" :key="index2">
|
||||||
|
<div class="" style="margin-bottom: 20px; text-align: center;font-size: 22px;">{{ item2.title }}</div>
|
||||||
|
<div class="pr" style="padding-bottom: 30px;">
|
||||||
|
<div
|
||||||
|
ref="cgInfoTime"
|
||||||
|
v-for="(item3, index3) in item2.time" :key="index3"
|
||||||
|
@click="handleSelectTime(item2.title, item3.t, item3.status, item2.room_id, item3.price, item3.light_price)"
|
||||||
|
class="cg-info-time" :class="[
|
||||||
|
item3.status == 1
|
||||||
|
? 'cg-info-time-none'
|
||||||
|
: selectedTime[item2.title] && selectedTime[item2.title].includes(item3.t)
|
||||||
|
? 'cg-info-time-select'
|
||||||
|
: 'cg-info-time-normal'
|
||||||
|
]" >
|
||||||
|
<template v-if="item3.price > 0 && item3.status == 0">￥{{ item3.price }}</template>
|
||||||
|
<template v-else-if="item3.status == 1">已约</template>
|
||||||
|
<template v-else>免费</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tc mt60 ww100 f30" v-else>今日预约已结束</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="price-btn" @click="nowReserve">立即预约</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import UserApi from '@/api/user.js';
|
||||||
|
import VenueApi from '@/api/venue.js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ground_id: 0,
|
||||||
|
cdList: [],
|
||||||
|
weekList: [],
|
||||||
|
timeList: [],
|
||||||
|
currentWeek: 0,
|
||||||
|
selectedTime: [],
|
||||||
|
selectedWeekDay: '',
|
||||||
|
selectedReserveTime: [],
|
||||||
|
countSelectedTime: 0,
|
||||||
|
roomSelectList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created(arg) {
|
||||||
|
/*获取列表*/
|
||||||
|
this.ground_id = this.$route.query.cg_id;
|
||||||
|
this.getReserveTime()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 获取场馆下的数据
|
||||||
|
*/
|
||||||
|
getData() {
|
||||||
|
this.cdList = res.data.lists1
|
||||||
|
this.weekList = res.data.lists2
|
||||||
|
this.timeList = res.data.lists3
|
||||||
|
this.getReserveTime()
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取预定时间
|
||||||
|
getReserveTime() {
|
||||||
|
const loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '加载中',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
});
|
||||||
|
|
||||||
|
let self = this;
|
||||||
|
let params = {}
|
||||||
|
|
||||||
|
if (self.selectedWeekTimes) {
|
||||||
|
params = {
|
||||||
|
ground_id: self.ground_id,
|
||||||
|
today: self.selectedWeekTimes
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
params = {
|
||||||
|
ground_id: self.ground_id,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
VenueApi.getSchedule(params, true).
|
||||||
|
then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
loading.close();
|
||||||
|
|
||||||
|
self.cdList = res.data.lists1
|
||||||
|
self.weekList = res.data.lists2
|
||||||
|
self.timeList = res.data.lists3
|
||||||
|
|
||||||
|
// 初始化选择的时间
|
||||||
|
if (!self.selectedWeekDay) {
|
||||||
|
self.selectedWeekDay = res.data.lists2[0].value[1] + '' + res.data.lists2[0].value[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!self.selectedWeekTimes) {
|
||||||
|
self.selectedWeekTimes = res.data.lists2[0].times
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}).catch(error => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 选择日期
|
||||||
|
selectWeek(item, index) {
|
||||||
|
let self = this
|
||||||
|
self.currentWeek = index
|
||||||
|
self.selectedWeekDay = item.value[1] + '' + item.value[0]
|
||||||
|
self.selectedWeekTimes = item.times
|
||||||
|
|
||||||
|
// 重置已选时间
|
||||||
|
self.selectedTime = []
|
||||||
|
self.selectedReserveTime = []
|
||||||
|
self.getReserveTime()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 预约时间选择
|
||||||
|
* @param title
|
||||||
|
* @param time
|
||||||
|
* @param status
|
||||||
|
*/
|
||||||
|
handleSelectTime(title, time, status) {
|
||||||
|
if (status == 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 多选逻辑，selectedTime为对象，按title区分
|
||||||
|
if (!this.selectedTime[title]) {
|
||||||
|
this.$set(this.selectedTime, title, []);
|
||||||
|
}
|
||||||
|
const idx = this.selectedTime[title].indexOf(time);
|
||||||
|
if (idx > -1) {
|
||||||
|
// 已选中则取消
|
||||||
|
this.selectedTime[title].splice(idx, 1);
|
||||||
|
} else {
|
||||||
|
// 未选中则添加
|
||||||
|
this.selectedTime[title].push(time);
|
||||||
|
}
|
||||||
|
this.countSelectedTime = Object.values(this.selectedTime).reduce((acc, times) => acc + times.length, 0);
|
||||||
|
|
||||||
|
// 遍历所有已选时间，生成 room_list
|
||||||
|
const room_list = [];
|
||||||
|
|
||||||
|
Object.keys(this.selectedTime).forEach(roomTitle => {
|
||||||
|
const roomObj = this.cdList.find(cd => cd.title === roomTitle);
|
||||||
|
const roomId = roomObj ? roomObj.room_id : undefined;
|
||||||
|
|
||||||
|
this.selectedTime[roomTitle].forEach(t => {
|
||||||
|
// t 可能是 '09:00-10:00' 或 '09:00', 需拆分
|
||||||
|
let start_time = t, end_time = '';
|
||||||
|
if (t.includes('-')) {
|
||||||
|
[start_time, end_time] = t.split('-');
|
||||||
|
} else {
|
||||||
|
start_time = t;
|
||||||
|
// 假设每个时间段为1小时，自动+1小时
|
||||||
|
const [h, m] = t.split(':');
|
||||||
|
const nextH = (parseInt(h, 10) + 1).toString().padStart(2, '0');
|
||||||
|
end_time = `${nextH}:${m}`;
|
||||||
|
}
|
||||||
|
room_list.push({
|
||||||
|
room_id: roomId,
|
||||||
|
day_title: this.selectedWeekDay,
|
||||||
|
day_time: this.selectedWeekTimes,
|
||||||
|
start_time,
|
||||||
|
end_time,
|
||||||
|
room_price: 0,
|
||||||
|
light_price: 0,
|
||||||
|
amount_price: 0,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.selectedReserveTime = room_list;
|
||||||
|
|
||||||
|
|
||||||
|
// 新增：生成 roomSelectList 变量
|
||||||
|
const roomSelectList = Object.keys(this.selectedTime).map(roomTitle => {
|
||||||
|
const roomObj = this.cdList.find(cd => cd.title === roomTitle);
|
||||||
|
const roomId = roomObj ? roomObj.room_id : undefined;
|
||||||
|
const select_time = (this.selectedTime[roomTitle] || []).join(',');
|
||||||
|
return {
|
||||||
|
room_id: roomId,
|
||||||
|
select_time
|
||||||
|
};
|
||||||
|
});
|
||||||
|
this.roomSelectList = roomSelectList;
|
||||||
|
console.log('🚀 ~ roomSelectList:', roomSelectList);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
nowReserve() {
|
||||||
|
let self = this;
|
||||||
|
if (self.selectedReserveTime.length == 0) {
|
||||||
|
self.$message.error('请选择预约时间');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '预定中',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
});
|
||||||
|
// 加载中
|
||||||
|
try {
|
||||||
|
self.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: 'Loading',
|
||||||
|
spinner: 'el-icon-loading',
|
||||||
|
background: 'rgba(0, 0, 0, 0.7)'
|
||||||
|
});
|
||||||
|
const start = self.selectedReserveTime[0].day_time + ' ' + self.selectedReserveTime[0].end_time;
|
||||||
|
const end = self.selectedReserveTime[self.selectedReserveTime.length -1].day_time + ' ' + self.selectedReserveTime[self.selectedReserveTime.length -1].end_time;
|
||||||
|
// 转换为时间戳
|
||||||
|
const startTimestamp = Math.floor(Date.parse(start.replace(/-/g, '/')) / 1000);;
|
||||||
|
const endTimestamp = Math.floor(Date.parse(end.replace(/-/g, '/')) / 1000);;
|
||||||
|
|
||||||
|
VenueApi.reserveGround({
|
||||||
|
ground_id: self.ground_id,
|
||||||
|
room_list: JSON.stringify(self.selectedReserveTime),
|
||||||
|
type: 1, // 网球场馆1 篮球场馆2
|
||||||
|
start_end: startTimestamp + '-' + endTimestamp,
|
||||||
|
amount_price: 0
|
||||||
|
}, true).
|
||||||
|
then(res => {
|
||||||
|
if (res.code == 1) {
|
||||||
|
|
||||||
|
self.cdList = res.data.lists1
|
||||||
|
self.weekList = res.data.lists2
|
||||||
|
self.timeList = res.data.lists3
|
||||||
|
|
||||||
|
// 初始化选择的时间
|
||||||
|
if (!self.selectedWeekDay) {
|
||||||
|
self.selectedWeekDay = res.data.lists2[0].value[1] + '' + res.data.lists2[0].value[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!self.selectedWeekTimes) {
|
||||||
|
self.selectedWeekTimes = res.data.lists2[0].times
|
||||||
|
}
|
||||||
|
|
||||||
|
self.$message({
|
||||||
|
message: '场地预约成功',
|
||||||
|
type: 'success'
|
||||||
|
});
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
location.reload()
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}).catch(error => {});
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to show loading:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.close();
|
||||||
|
},
|
||||||
|
|
||||||
|
toCgOrder() {
|
||||||
|
this.$router.push({
|
||||||
|
path: '/venue/order/index',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1, .tag2, .tag3 {
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 34px;
|
||||||
|
color: #909399;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #41C95D;
|
||||||
|
border: 2px solid #41C95D;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #365A9A;
|
||||||
|
border: 2px solid #365A9A;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #D4DAE6;
|
||||||
|
border: 2px solid #D4DAE6;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-303133 {
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fff {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-f7f7f7 {
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-365A9A {
|
||||||
|
background-color: #365A9A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-D4DAE6 {
|
||||||
|
background-color: #D4DAE6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date1-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date1-block-item {
|
||||||
|
width: 100px;
|
||||||
|
height: 60px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-f {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-time-block {
|
||||||
|
margin-top: 85px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-time {
|
||||||
|
font-size: 26px;
|
||||||
|
color: #303133;
|
||||||
|
height: 60px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
margin: 4px 4px 14px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-info {
|
||||||
|
margin-left: 54px;
|
||||||
|
margin-top: 38px;
|
||||||
|
display: flex;
|
||||||
|
overflow-x: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-border {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid #FFC880;
|
||||||
|
top: 38px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-right-border {
|
||||||
|
position: absolute;
|
||||||
|
right: -8px;
|
||||||
|
top: -12px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 4px solid #FFC880;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-right-border:last-of-type {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-info-time {
|
||||||
|
margin: 4px;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
width: 120px;
|
||||||
|
height: 60px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-right-border.no-border {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-info-time-none {
|
||||||
|
background: #BBBFC7;
|
||||||
|
border: 2px solid #BBBFC7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-info-time-normal {
|
||||||
|
background: #41C95D;
|
||||||
|
border: 2px solid #41C95D;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cg-info-time-select {
|
||||||
|
background: #365A9A;
|
||||||
|
border: 2px solid #365A9A;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-btn {
|
||||||
|
width: 368px;
|
||||||
|
height: 90px;
|
||||||
|
line-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
background: #365A9A;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #FFF;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user