Skip to content

C
cloud-platform-ui
Commit e412166b authored by guoyou's avatar guoyou
Browse files
Options

租车日历

parent 25013b30
Hide whitespace changes
Inline Side-by-side
Showing with 1037 additions and 333 deletions
src/api/vehicleType.js
View file @ e412166b
......@@ -162,3 +162,71 @@ export function upStatusChange(query) {
method: 'put'
});
}
// 日历价格月份查询
export function priceList(month) {
return fetch({
url: '/vehicle/admin/vehicle_model/calendar_price/month?date=' + month,
method: 'get'
});
}
// 日历价格具体日期查询
export function dayList(day) {
return fetch({
url: '/vehicle/admin/vehicle_model/calendar_price/day?date=' + day,
method: 'get'
});
}
// 日历价格设置
export function add_edit(params) {
return fetch({
url: '/vehicle/admin/vehicle_model/calendar_price/add_edit',
method: 'post',
data: params
});
}
// 会员等级
export function levels() {
return fetch({
url: 'api/admin/member/app/unauth/levels',
method: 'get'
});
}
// 节假日设置
export function add_edit_set(params) {
return fetch({
url: '/vehicle/admin/vehicle_model/holiday_price/add_edit',
method: 'post',
data: params
});
}
// 节假日列表
export function pageList(params) {
return fetch({
url: '/vehicle/admin/vehicle_model/holiday_price/page',
method: 'post',
data: params
});
}
// 节假日删除
export function deleteList(id) {
return fetch({
url: '/vehicle/admin/vehicle_model/holiday_price/'+id,
method: 'delete'
});
}
// 通用规则设置
export function rule(query) {
return fetch({
url: 'vehicle/admin/vehicle_model/holiday_price/update',
method: 'put',
params: query
});
}
\ No newline at end of file
src/router/index.js
View file @ e412166b
......@@ -300,6 +300,12 @@ export const asyncRouterMap = [{
component: _import('vehicleType/priceList'),
name: '租车价格表',
authority: 'priceList'
},
{
path: 'mockSun',
component: _import('vehicleType/mockSun'),
name: '节日价格',
authority: 'mockSun'
}
]
},
......
src/views/vehicleType/mockSun.vue 0 → 100644
View file @ e412166b
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<el-date-picker v-model="year" align="right" type="year" placeholder="选择年" @change="changeYear"></el-date-picker>
<el-date-picker v-model="date" type="month" placeholder="选择月" @change="changeDate"></el-date-picker>
<el-button type="primary" @click="addBtn">添加</el-button>
<el-dialog :title="popTitle" :visible.sync="dialogVisible" @close="closePop">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="节假日名称" prop="festival" style="width:500px">
<el-input v-model="ruleForm.festival"></el-input>
</el-form-item>
<el-form-item label="节假日日期" prop="date" style="width:500px">
<el-date-picker
v-model="ruleForm.date"
type="daterange"
placeholder="选择日期范围"
style="width:100%"
@chage="changeData"
></el-date-picker>
</el-form-item>
<el-form-item label="倍数" prop="multiple" style="width:500px">
<el-input v-model="ruleForm.multiple"></el-input>
</el-form-item>
<el-form-item label="免费天数" prop="freeDays" style="width:500px">
<el-input v-model="ruleForm.freeDays"></el-input>
</el-form-item>
<el-row>
<el-button type="primary" @click="comfirm('ruleForm')">确定</el-button>
<el-button type="primary" @click="dialogVisible = false">取消</el-button>
</el-row>
</el-form>
</el-dialog>
<el-table
:data="list"
border
fit
highlight-current-row
style="width: 100%;margin-top:20px"
v-loading="loading"
>
<el-table-column align="center" label="节日名称">
<template scope="scope">
<span>{{scope.row.festival}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="开始时间">
<template scope="scope">
<span>{{scope.row.startDate}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="结束时间">
<template scope="scope">
<span>{{scope.row.endDate}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="倍数">
<template scope="scope">
<span>{{scope.row.multiple}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="免费天数">
<template scope="scope">
<span>{{scope.row.freeDays}}</span>
</template>
</el-table-column>
<el-table-column align="center" width="200" label="操作" fixed="right">
<template scope="scope">
<el-button
size="small"
class="el-button el-button--text el-button--small"
@click="edidor(scope.row)"
>编辑</el-button>
<el-button
size="small"
class="el-button el-button--text el-button--small"
@click="deleteData(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import { add_edit_set, pageList, deleteList } from 'api/vehicleType'
export default {
created() {
this.getList()
},
data() {
return {
popTitle: '添加节假日',
loading: false,
year: '',
date: '',
activeId: '',
dialogVisible: false,
ruleForm: {
festival: null,
multiple: null,
freeDays: null,
date: []
},
list: [],
paramsList: {
page: '1',
limit: '10'
},
rules: {
festival: [
{
required: true,
message: '请输入节假日名称',
trigger: 'blur'
}
],
date: [
{
type: 'array',
required: true,
message: '请选择日期',
trigger: 'change'
}
],
multiple: [
{
required: true,
message: '请输入倍数',
trigger: 'blur'
}
],
freeDays: [
{
required: true,
message: '请输入免费天数',
trigger: 'blur'
}
]
}
}
},
methods: {
deleteData(row){
deleteList(row.id).then(data=>{
if (data.status == 200) {
this.$message.success('删除成功')
this.getList()
}else{
this.$message.error(data.message)
}
})
},
addBtn() {
this.dialogVisible = true
this.popTitle = '添加节假日'
},
changeData(val) {
if (!val) {
this.ruleForm.date = []
}
},
format(d) {
let year = d.getFullYear()
let month =
(d.getMonth() + 1).toString().length == 1
? '0' + (d.getMonth() + 1)
: d.getMonth() + 1
let date =
d.getDate().toString().length == 1
? '0' + d.getDate()
: d.getDate()
return year + '-' + month + '-' + date + ' 00:00:00'
},
closePop() {
// this.$refs.ruleForm.resetFields()
// this.ruleForm.date = []
this.ruleForm = {
festival: null,
multiple: null,
freeDays: null,
date: []
}
},
getList() {
this.loading = true
pageList(this.paramsList).then(data => {
if (data.status == 200) {
this.list = data.data
}
setTimeout(() => {
this.loading = false
}, 300)
})
},
changeYear(val) {
this.paramsList.year = val
this.getList()
},
changeDate(val) {
this.paramsList.date = val + '-01'
this.getList()
},
edidor(row) {
this.popTitle = '编辑节假日'
this.dialogVisible = true
this.ruleForm.festival = row.festival
this.ruleForm.multiple = row.multiple.toString()
this.ruleForm.freeDays = row.freeDays.toString()
this.ruleForm.date = [row.startDate, row.endDate]
this.activeId = row.id
console.log(this.ruleForm)
},
comfirm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
console.log(this.ruleForm)
if (this.popTitle == '添加节假日') {
this.ruleForm.startDate = this.format(
this.ruleForm.date[0]
)
this.ruleForm.endDate = this.format(
this.ruleForm.date[1]
)
delete this.ruleForm.id
this.successApi()
} else {
this.ruleForm.startDate = this.ruleForm.date[0]
this.ruleForm.endDate = this.ruleForm.date[1]
!this.activeId ? '' : (this.ruleForm.id = this.activeId)
this.successApi()
}
}
})
},
successApi() {
delete this.ruleForm.date
add_edit_set(this.ruleForm).then(data => {
console.log(data)
if (data.status == 200) {
this.$message.success('成功')
this.dialogVisible = false
this.getList()
} else {
this.$message.error(data.message)
}
})
},
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7
}
}
}
}
</script>
<style>
.el-tag {
margin: 0 0 20px 15px !important;
}
</style>
\ No newline at end of file
src/views/vehicleType/priceList.vue
View file @ e412166b
<template>
<div class="app-container calendar-list-container">
<div class="filter-container">
<div style="margin-bottom:10px">
<el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button>
<el-button type="primary" @click="enterTo">{{enterTitle}}</el-button>
</div>
<el-dialog title="通用规则设置" :visible.sync="dialogVisible">
<p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="现金支付" prop="name">
<el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="使用免费天数" prop="name">
<el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item>
</el-col>
</el-row>
<div>
<el-button type="primary">确定</el-button>
</div>
</el-form>
</el-dialog>
<div class="month">
<ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
<span class="choose-year">{{ currentYear }}</span>
<span class="choose-month">{{ currentMonth }}月</span>
</li>
<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
</ul>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
<li style="color:red">日</li>
</ul>
<!-- 日期 -->
<ul class="days">
<!-- v-for循环 每一次循环用<li>标签创建一天 -->
<li
v-for="(dayobject,index) in days"
:key="index"
:class="{setHeight:setHeight,weekend:new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7,setBorder:isSetBorder}"
>
<!--本月-->
<!--如果不是本月 改变类名加灰色-->
<span
v-if="dayobject.day.getMonth()+1 != currentMonth"
class="other-month"
>{{ dayobject.day.getDate() }}</span>
<!--如果是本月 还需要判断是不是这一天-->
<span v-else>
<span
v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
class="active"
>{{ dayobject.day.getDate() }}</span>
<span v-else>{{ dayobject.day.getDate() }}</span>
</span>
<p
v-if="new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7"
style="color:red"
>两倍</p>
<!--显示剩余多少数量-->
<!-- <p v-if="leftobj[dayobject.index]">
<div class="app-container calendar-list-container">
<div class="filter-container">
<div style="margin-bottom:10px">
<el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button>
<el-button type="primary" @click="enterTo">{{enterTitle}}</el-button>
</div>
<el-dialog title="通用规则设置" :visible.sync="dialogVisible">
<p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
>
<el-row>
<el-col :span="12">
<el-form-item label="倍数" prop="multiple">
<el-input v-model="ruleForm.multiple" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="免费天数" prop="freeDays">
<el-input v-model="ruleForm.freeDays" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item>
</el-col>
</el-row>
<div>
<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div>
</el-form>
</el-dialog>
<div class="month">
<ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
<li class="year-month">
<span class="choose-year">{{ currentYear }}</span>
<span class="choose-month">{{ currentMonth }}月</span>
</li>
<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
</ul>
</div>
<!-- 星期 -->
<ul class="weekdays">
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li style="color:red">六</li>
<li style="color:red">日</li>
</ul>
<!-- 日期 -->
<ul class="days" :class="{'days-border':isSetBorder}">
<!-- v-for循环 每一次循环用<li>标签创建一天 -->
<li
v-for="(dayobject,index) in days"
:key="index"
:class="{setHeight:setHeight,setBorder:isSetBorder}"
@click="setVal(GMTToStrs(dayobject.day),index,dayobject.day.getMonth()+1 != currentMonth)"
>
<!-- 选中的状态 -->
<span ref="activeDay"></span>
<!-- <span :class="{isChosse:isChosses}" ref="activeDay"></span> -->
<!--本月-->
<!--如果不是本月 改变类名加灰色-->
<span
v-if="dayobject.day.getMonth()+1 != currentMonth"
class="other-month"
>{{ dayobject.day.getDate() }}</span>
<!--如果是本月 还需要判断是不是这一天-->
<span v-else>
<span
v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
class="active"
>{{ dayobject.day.getDate() }}</span>
<span v-else>{{ dayobject.day.getDate() }}</span>
</span>
<p style="color:red">{{matching(GMTToStr(dayobject.day))}}</p>
<!-- <p style="color:red">{{GMTToStr(dayobject.day)}}倍</p> -->
<!-- <p
v-if="new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7"
style="color:red"
>{{GMTToStr(dayobject.day)}}</p>-->
<!--显示剩余多少数量-->
<!-- <p v-if="leftobj[dayobject.index]">
剩余：
<span style="color: red">{{leftobj[dayobject.index].count}}</span>
</p>-->
<!---->
<!-- <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button> -->
</li>
</ul>
<div
style="background:#fff;padding:20px 0;border-top:1px solid red"
v-show="isSetBorder == true"
>
<el-form
:model="setForm"
:rules="setrules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="价格类型" prop="radio1">
<el-radio-group v-model="setForm.radio1">
<el-radio-button label="倍数"></el-radio-button>
<el-radio-button label="绝对值"></el-radio-button>
<el-radio-button label="会员价"></el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="应用范围" prop="radio1">
<el-radio-group v-model="setForm.radio1">
<el-radio-button label="全局设置"></el-radio-button>
<el-radio-button label="不同车型不同倍数"></el-radio-button>
</el-radio-group>
<el-input v-model="setForm.input" placeholder="请输入倍数" style="width:100px;"></el-input>
</el-form-item>
<el-button style="margin-left:30px" type="primary">确定</el-button>
</el-form>
</div>
<el-dialog title="倍数详情" :visible.sync="multiplePop">
</el-dialog>
</div>
</div>
</p>-->
<!---->
<!-- <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button> -->
</li>
</ul>
<div
style="background:#fff;padding:20px 0;border-top:1px solid rgb(251, 138, 78)"
v-show="isSetBorder == true"
>
<el-form
:model="setForm"
:rules="setrules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="价格类型" prop="type">
<el-radio-group v-model="setForm.type">
<el-radio-button label="1">倍数</el-radio-button>
<el-radio-button label="2">绝对值</el-radio-button>
<el-radio-button label="3">会员价</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="应用范围" prop="isGlobal">
<el-radio-group v-model="setForm.isGlobal" @change="changeIsGlobal">
<el-radio-button label="1">全局设置</el-radio-button>
<el-radio-button label="0">不同车型不同倍数</el-radio-button>
</el-radio-group>
<el-select
v-if="setForm.type ==3 && setForm.isGlobal == 1"
v-model="setForm.level"
placeholder="请选择"
>
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.level"></el-option>
</el-select>
<el-input
v-else-if="setForm.type ==1 && setForm.isGlobal == 1"
v-model="setForm.multiple"
placeholder="倍数"
style="width:100px;"
></el-input>
<el-input
v-else-if="setForm.type ==2 && setForm.isGlobal == 1"
v-model="setForm.price"
placeholder="绝对值"
style="width:100px;"
></el-input>
<el-input
v-show="setForm.isGlobal == 1"
v-model="setForm.freeDays"
placeholder="请输入天数"
style="width:100px;"
></el-input>
</el-form-item>
<el-button style="margin-left:30px" type="primary" @click="setPrice">确定</el-button>
</el-form>
</div>
<el-dialog title="设置倍数" :visible.sync="setMultiplePop" class="setValWidth">
<ul class="set-val">
<li v-for="(item,index) in dayListData" :key="index">
<p>{{item.name}}</p>
<span class="price-val" style>{{item.basePrice}}</span>
<el-input v-if="setForm.type == 1" v-model="item.multiple" placeholder="倍数"></el-input>
<el-input v-else-if="setForm.type == 2" v-model="item.price" placeholder="绝对值"></el-input>
<el-select v-else v-model="item.level" placeholder="会员等级" class="grade-width">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.level"
style="width:200px"
></el-option>
</el-select>
<el-input v-model="item.freeDays" placeholder="天数" style="width:50px"></el-input>
</li>
</ul>
<div style="text-align:center">
<el-button @click="setMultiplePop =false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import { priceList, dayList, add_edit, levels,rule } from 'api/vehicleType'
export default {
data() {
return {
multiplePop: false,
setForm: {},
setrules: {},
enterTitle: "进入编辑",
ruleForm: {},
rules: {},
dialogVisible: false,
isSetBorder: false,
setHeight: true,
isWeekend: false,
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
leftobj: [
//存放剩余数量
{ count: 1 },
{ count: 2 },
{ count: 3 },
{ count: 4 },
{ count: 5 }
]
};
},
created: function() {
//在vue初始化时调用
this.initData(null);
},
methods: {
//进入编辑
enterTo() {
if (this.enterTitle == "进入编辑") {
this.isSetBorder = true;
this.enterTitle = "取消编辑";
} else {
this.isSetBorder = false;
this.enterTitle = "进入编辑";
}
},
order: function(day) {
//预定函数
if (this.leftobj[day.index].count >= 1) this.leftobj[day.index].count--;
else alert("已经没有位置了");
},
initData: function(cur) {
var leftcount = 0; //存放剩余数量
var date;
var index = 0; //控制显示预定的天数 ，比如下面设置只能预定三天的
//this.initleftcount(); 每次初始化更新数量
//有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费
// 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性
//还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好）
if (cur) {
date = new Date(cur);
} else {
var now = new Date();
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
d.setDate(35);
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
}
this.currentDay = date.getDate();
this.currentYear = date.getFullYear();
this.currentMonth = date.getMonth() + 1;
this.currentWeek = date.getDay(); // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7;
}
var str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
);
this.days.length = 0;
// 今天是周日，放在第一行第7个位置，前面6个
//初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
var now = new Date();
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++; //从今天开始显示供预定的数量
} else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {};
dayobject.day = d;
var now = new Date();
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++;
} else if (index != 0 && index < 3) dayobject.index = index++;
this.days.push(dayobject);
}
},
pickPre: function(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1));
d.setDate(0);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickNext: function(year, month) {
var d = new Date(this.formatDate(year, month, 1));
d.setDate(35);
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
},
pickYear: function(year, month) {
alert(year + "," + month);
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function(year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
}
}
};
data() {
return {
activeTime: '',
nature: {},
dayListData: [],
setMultiplePop: false,
isChosses: false,
setForm: {
type: '1',
isGlobal: '1',
multiple: '',
freeDays: '',
level: ''
},
chooseData: [],
options: [],
setrules: {},
enterTitle: '进入编辑',
calendarStatus: 0,
ruleForm: {
multiple: '',
freeDays: ''
},
rules: {
multiple: [
{ required: true, message: '请输入倍/天', trigger: 'blur' },
],
freeDays: [
{ required: true, message: '请输入/天', trigger: 'blur' },
],
},
dialogVisible: false,
isSetBorder: false,
setHeight: true,
isWeekend: false,
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
dataList: [],
leftobj: [
//存放剩余数量
{ count: 1 },
{ count: 2 },
{ count: 3 },
{ count: 4 },
{ count: 5 }
]
}
},
created: function() {
//在vue初始化时调用
this.initData(null)
this.getList()
this.levelsFn()
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
rule({multiple:this.ruleForm.multiple,freeDays:this.ruleForm.freeDays}).then(data=>{
if (data.status == 200) {
this.$message.success('设置成功')
this.dialogVisible = false
}else{
this.$message.error(data.message)
}
})
} else {
console.log('error submit!!')
return false
}
})
},
changeIsGlobal(val) {
let activeStatus = this.$refs.activeDay
if (val == 0) {
for (let index = 0; index < activeStatus.length; index++) {
activeStatus[index].className = ''
}
}
},
setPrice() {
let params = []
//全局设置
if (this.setForm.isGlobal == 1) {
if (this.chooseData == '') {
this.$message.error('请选择要设置的日期')
return false
} else {
this.chooseData.forEach(element => {
let defaults = {}
defaults.date = element
defaults.isGlobal =
Number(this.setForm.isGlobal) == 1 ? true : false
defaults.type = Number(this.setForm.type)
defaults.multiple =
Number(this.setForm.multiple) == ''
? ''
: Number(this.setForm.multiple)
defaults.price =
Number(this.setForm.price) == ''
? ''
: Number(this.setForm.price)
defaults.freeDays = Number(this.setForm.freeDays)
defaults.level = this.setForm.level
params.push(defaults)
})
}
} else {
this.dayListData.forEach(element => {
if (this.setForm.type == 1) {
if (!!element.multiple || !!element.freeDays) {
params.push({
multiple: element.multiple,
date: this.activeTime,
isGlobal:
this.setForm.isGlobal == 1 ? true : false,
freeDays: element.freeDays,
vehicleModelId: element.vehicleModelId,
type: this.setForm.type
})
} else {
this.$message.error('请设置不同车型不同价格')
return false
}
} else if (this.setForm.type == 2) {
if (!!element.price || !!element.freeDays) {
params.push({
price: element.price,
date: this.activeTime,
isGlobal:
this.setForm.isGlobal == 1 ? true : false,
freeDays: element.freeDays,
vehicleModelId: element.vehicleModelId,
type: this.setForm.type
})
} else {
this.$message.error('请设置不同车型不同价格')
return false
}
} else {
if (!!element.level || !!element.freeDays) {
params.push({
level: element.level,
date: this.activeTime,
isGlobal:
this.setForm.isGlobal == 1 ? true : false,
freeDays: element.freeDays,
vehicleModelId: element.vehicleModelId,
type: this.setForm.type
})
} else {
this.$message.error('请设置不同车型不同价格')
return false
}
}
})
}
if (params == '') {
this.$message.error('请设置不同车型不同价格')
return false
} else {
add_edit(params).then(data => {
if (data.status == 200) {
this.$message.success('设置成功')
this.getList()
} else {
this.$message.error(data.message)
}
})
}
},
setBtn() {
this.setPrice()
},
levelsFn() {
levels().then(data => {
this.options = data
})
},
setVal(val, index, isClick) {
if (!isClick) {
this.activeTime = val
if (this.calendarStatus == 1 && this.setForm.isGlobal == 0) {
dayList(val).then(data => {
data.data.forEach(element => {
element.multiple = ''
element.price = ''
element.level = ''
element.freeDays = ''
})
this.dayListData = data.data
this.setMultiplePop = true
})
} else if (
this.calendarStatus == 1 &&
this.setForm.isGlobal == 1
) {
if (this.$refs.activeDay[index].className == 'isChosse') {
this.$refs.activeDay[index].className = ''
var index = this.chooseData.indexOf(val)
if (index > -1) {
this.chooseData.splice(index, 1)
}
} else {
this.$refs.activeDay[index].className = 'isChosse'
this.chooseData.push(val)
}
}
}
},
matching(val) {
let diploid = ''
this.dataList.forEach(element => {
if (element.vehicleModelDay == val) {
if (element.type == 1) {
if (element.vehicleModelDay == val)
!!element.multiple
? (diploid = element.multiple + '倍')
: ''
} else if (element.type == 2) {
!!element.price ? (diploid = element.price + '元') : ''
} else if (element.type == 3) {
diploid =
element.level === 1
? '普通会员'
: element.level === 2
? '黄金会员'
: '钻石会员'
}
}
})
return diploid
},
GMTToStr(time) {
let date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let datas =
date.getDate().toString().length == 1
? '0' + date.getDate()
: date.getDate()
let Str = year + '-' + month + '-' + datas + ' 00:00:00'
return Str
},
GMTToStrs(time) {
let date = new Date(time)
let year = date.getFullYear()
let month = date.getMonth() + 1
let datas =
date.getDate().toString().length == 1
? '0' + date.getDate()
: date.getDate()
let Str = year + '-' + month + '-' + datas
return Str
},
//列表
getList() {
let month =
this.currentMonth.toString().length == 1
? '0' + this.currentMonth
: this.currentMonth
console.log(month)
priceList(this.currentYear + '-' + month + '-01').then(data => {
if (data.status == 200) {
this.dataList = data.data
}
})
},
//进入编辑
enterTo() {
if (this.enterTitle == '进入编辑') {
this.isSetBorder = true
this.enterTitle = '取消编辑'
this.calendarStatus = 1
} else {
this.isSetBorder = false
this.calendarStatus = 0
this.enterTitle = '进入编辑'
}
},
order: function(day) {
//预定函数
if (this.leftobj[day.index].count >= 1)
this.leftobj[day.index].count--
else alert('已经没有位置了')
},
initData: function(cur) {
var leftcount = 0 //存放剩余数量
var date
var index = 0 //控制显示预定的天数 ，比如下面设置只能预定三天的
//this.initleftcount(); 每次初始化更新数量
//有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费
// 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性
//还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好）
if (cur) {
date = new Date(cur)
} else {
var now = new Date()
var d = new Date(
this.formatDate(now.getFullYear(), now.getMonth(), 1)
)
d.setDate(35)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
}
this.currentDay = date.getDate()
this.currentYear = date.getFullYear()
this.currentMonth = date.getMonth() + 1
this.currentWeek = date.getDay() // 1...6,0
if (this.currentWeek == 0) {
this.currentWeek = 7
}
var str = this.formatDate(
this.currentYear,
this.currentMonth,
this.currentDay
)
this.days.length = 0
// 今天是周日，放在第一行第7个位置，前面6个
//初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str)
d.setDate(d.getDate() - i)
var dayobject = {}
dayobject.day = d
var now = new Date()
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++ //从今天开始显示供预定的数量
} else if (index != 0 && index < 3) dayobject.index = index++ //从今天开始3天内显示供预定的数量
this.days.push(dayobject) //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str)
d.setDate(d.getDate() + i)
var dayobject = {}
dayobject.day = d
var now = new Date()
if (
d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear()
) {
dayobject.index = index++
} else if (index != 0 && index < 3) dayobject.index = index++
this.days.push(dayobject)
}
},
pickPre: function(year, month) {
// setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1))
d.setDate(0)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
this.getList()
},
pickNext: function(year, month) {
var d = new Date(this.formatDate(year, month, 1))
d.setDate(35)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
this.getList()
},
// 返回 类似 2016-01-02 格式的字符串
formatDate: function(year, month, day) {
var y = year
var m = month
if (m < 10) m = '0' + m
var d = day
if (d < 10) d = '0' + d
return y + '-' + m + '-' + d
}
}
}
</script>
<style>
.grade-width {
/* border: 1px solid red; */
width: 140px;
}
.setValWidth .el-dialog--small {
width: 1100px;
}
.price-val {
display: inline-block;
text-align: center;
width: 80px;
border: 1px solid #ccc;
padding: 9px 0;
position: relative;
top: -14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.set-val {
overflow: hidden;
padding: 0;
}
.set-val li {
float: left;
margin-left: 30px;
margin-bottom: -25px;
}
.set-val li p {
display: inline-block;
width: 200px;
border: 1px solid #ccc;
padding: 8px 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.set-val li .el-input {
top: -27px;
}
.set-val li .el-input:nth-child(3) {
width: 100px;
}
.setBorder {
border-left: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid rgb(251, 138, 78);
border-top: 1px solid rgb(251, 138, 78);
}
.setHeight {
height: 120px;
height: 120px;
position: relative;
}
.weekend {
color: red !important;
.isChosse {
display: inline-block;
width: 5px;
height: 5px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(251, 138, 78);
position: absolute;
left: -7px;
top: -1px;
transform: rotate(130deg);
}
/* .weekend {
color: red !important;
} */
* {
box-sizing: border-box;
box-sizing: border-box;
}
ul {
list-style-type: none;
list-style-type: none;
}
body {
font-family: Verdana, sans-serif;
background: #e8f0f3;
font-family: Verdana, sans-serif;
/* background: #e8f0f3; */
}
#calendar {
width: 80%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
width: 80%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.month {
width: 100%;
background: #20a0ff;
width: 100%;
background: #20a0ff;
}
.month ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.year-month {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.year-month:hover {
background: rgba(150, 2, 12, 0.1);
background: rgba(150, 2, 12, 0.1);
}
.choose-year {
padding-left: 20px;
padding-right: 20px;
padding-left: 20px;
padding-right: 20px;
}
.choose-month {
text-align: center;
font-size: 1.5rem;
text-align: center;
font-size: 1.5rem;
}
.arrow {
padding: 30px;
padding: 30px;
}
.arrow:hover {
background: rgba(100, 2, 12, 0.1);
background: rgba(100, 2, 12, 0.1);
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #20a0ff;
display: flex;
flex-wrap: wrap;
color: #ffffff;
justify-content: space-around;
margin: 0;
padding: 10px 0;
background-color: #20a0ff;
display: flex;
flex-wrap: wrap;
color: #ffffff;
justify-content: space-around;
}
.weekdays li {
display: inline-block;
width: 13.6%;
text-align: center;
display: inline-block;
width: 13.6%;
text-align: center;
}
.days {
padding: 0;
background: #ffffff;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
background: #ffffff;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.days-border {
border-right: 1px solid rgb(251, 138, 78);
}
.days li {
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
padding-bottom: 15px;
padding-top: 15px;
font-size: 1rem;
color: #000;
list-style-type: none;
display: inline-block;
width: 14.2%;
text-align: center;
padding-bottom: 15px;
padding-top: 15px;
font-size: 1rem;
color: #000;
}
.days li .active {
padding: 6px 10px;
border-radius: 50%;
background: #20a0ff;
color: #fff;
padding: 6px 10px;
border-radius: 10px;
background: #20a0ff;
color: #fff;
}
.days li .other-month {
padding: 5px;
color: gainsboro;
padding: 5px;
color: gainsboro;
}
.days li:hover {
background: #c0c4cc;
background: #c0c4cc;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment