修改状态
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 name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<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="stylesheet" type="text/css" href="static/css/common.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="static/css/app.css"/>
|
||||
|
||||
@ -66,6 +66,21 @@ let VenueApi = {
|
||||
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;
|
||||
|
||||
@ -17,11 +17,13 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div></div>
|
||||
<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="balance_before" label="充值前余额"></el-table-column>
|
||||
<el-table-column prop="money" 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="充值余额" 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="create_time" label="创建时间"></el-table-column>
|
||||
</el-table>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="common-form">用户信息</div>
|
||||
<el-form :model="order" :label-width="formLabelWidth">
|
||||
<el-form-item label="用户名称:">
|
||||
<el-form :model="order" :label-width="formLabelWidth" v-if="order.user_id > 0">
|
||||
<el-form-item label="用户名称:" >
|
||||
<span>{{ order.nickName }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户头像:">
|
||||
@ -10,6 +10,12 @@
|
||||
</el-form-item>
|
||||
</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>
|
||||
<el-form :model="order" :label-width="formLabelWidth">
|
||||
<el-form-item label="灯光费用">
|
||||
@ -42,7 +48,7 @@
|
||||
<span v-if="order.order_status == 4">已取消</span>
|
||||
<span v-if="order.order_status == 5">退订/退款</span>
|
||||
</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 == 2">微信支付</span>
|
||||
</el-form-item>
|
||||
|
||||
@ -60,13 +60,22 @@
|
||||
<el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="userInfo" label="用户信息">
|
||||
<template slot-scope="scope">
|
||||
<div class="">用户昵称: {{ scope.row.nickName }}</div>
|
||||
<div class=""><img :src="scope.row.avatarUrl" width="30px" height="30px" /></div>
|
||||
<div class="">
|
||||
<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>
|
||||
</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="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="订单状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.order_status == 0" style="color: #F56C6C;">待付款</span>
|
||||
@ -86,7 +95,9 @@
|
||||
<el-table-column fixed="right" label="操作" width="170">
|
||||
<template slot-scope="scope">
|
||||
<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>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column fixed="right" label="操作" width="130">
|
||||
@ -322,6 +333,36 @@ export default {
|
||||
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">
|
||||
<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-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>
|
||||
@ -21,47 +21,70 @@
|
||||
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||
</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>
|
||||
<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="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="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="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_price" :label-width="formLabelWidth">
|
||||
<el-input v-model="form.light_price" autocomplete="off" placeholder="请输入场馆价格"></el-input>
|
||||
</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">
|
||||
@ -101,6 +124,7 @@ export default {
|
||||
initialFrameHeight: 500
|
||||
},
|
||||
},
|
||||
selectGroundType: null,
|
||||
form: {
|
||||
ground_id: '',
|
||||
img: '',
|
||||
@ -115,7 +139,26 @@ export default {
|
||||
'07:00-08: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: {
|
||||
ground_id: [{
|
||||
@ -158,10 +201,20 @@ export default {
|
||||
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,
|
||||
@ -231,6 +284,18 @@ export default {
|
||||
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({
|
||||
@ -277,6 +342,10 @@ export default {
|
||||
}
|
||||
this.isupload = false;
|
||||
},
|
||||
|
||||
changeGround(e) {
|
||||
this.selectGroundType = this.veuneList.find(item => item.id === e).type_id
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<el-form-item label="起始时间">
|
||||
<div class="block">
|
||||
<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="开始日期"
|
||||
end-placeholder="结束日期"></el-date-picker>
|
||||
</div>
|
||||
@ -55,6 +55,7 @@ export default {
|
||||
},
|
||||
},
|
||||
searchForm: {
|
||||
create_time: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
},
|
||||
@ -87,6 +88,7 @@ export default {
|
||||
|
||||
VenueApi.groundRoomRate(Params, true).then(res => {
|
||||
console.log("🚀 ~ res:", res)
|
||||
this.percentage = res.data.rate
|
||||
}).catch(error => {
|
||||
console.log("🚀 ~ error:", error)
|
||||
})
|
||||
@ -110,9 +112,8 @@ export default {
|
||||
onSubmit() {
|
||||
let self = this;
|
||||
self.loading = true;
|
||||
const start_time = self.searchForm.start_time;
|
||||
self.searchForm.start_time = start_time[0]
|
||||
self.searchForm.end_time = start_time[1]
|
||||
self.searchForm.start_time = self.searchForm.create_time[0]
|
||||
self.searchForm.end_time = self.searchForm.create_time[1]
|
||||
self.getData();
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,47 +21,73 @@
|
||||
<el-input v-model="form.title" autocomplete="off" placeholder="场地标题"></el-input>
|
||||
</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>
|
||||
<!-- 网球场 -->
|
||||
<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="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="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="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-select v-model="form.status">
|
||||
@ -101,6 +127,7 @@ export default {
|
||||
initialFrameHeight: 500
|
||||
},
|
||||
},
|
||||
selectGroundType: null,
|
||||
form: {
|
||||
ground_id: '',
|
||||
img: '',
|
||||
@ -112,6 +139,8 @@ export default {
|
||||
holiday: '',
|
||||
free_time: [],
|
||||
hit_time: [],
|
||||
light_time: [],
|
||||
set_light_price: '',
|
||||
},
|
||||
formRules: {
|
||||
ground_id: [{
|
||||
@ -154,11 +183,21 @@ export default {
|
||||
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: '请选择场地状态',
|
||||
@ -193,27 +232,35 @@ export default {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
this.dialogVisible = this.open_edit;
|
||||
console.log(this.editform.model);
|
||||
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;
|
||||
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_price = this.editform.light_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;
|
||||
@ -253,6 +300,17 @@ export default {
|
||||
|
||||
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;
|
||||
|
||||
@ -197,6 +197,7 @@ export default {
|
||||
|
||||
/*关闭弹窗*/
|
||||
closeDialogFunc(e, f) {
|
||||
console.log("🚀 ~ e, f:", e, f)
|
||||
if (f == 'add') {
|
||||
this.open_add = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
@ -216,7 +217,7 @@ export default {
|
||||
}
|
||||
}
|
||||
if (f == 'data') {
|
||||
this.open_add = e.openDialog;
|
||||
this.open_data = e.openDialog;
|
||||
if (e.type == 'success') {
|
||||
this.getTableList();
|
||||
}
|
||||
|
||||
@ -30,6 +30,8 @@
|
||||
v-auth="'/venue/venue/edit'">编辑</el-button>
|
||||
<el-button @click="deleteClick(scope.row)" type="text" size="small"
|
||||
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>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -148,6 +150,18 @@ export default {
|
||||
editClick(item) {
|
||||
this.venueModel = item;
|
||||
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