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) { ...@@ -162,3 +162,71 @@ export function upStatusChange(query) {
method: 'put' 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 = [{ ...@@ -300,6 +300,12 @@ export const asyncRouterMap = [{
component: _import('vehicleType/priceList'), component: _import('vehicleType/priceList'),
name: '租车价格表', name: '租车价格表',
authority: 'priceList' 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> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<div class="filter-container"> <div class="filter-container">
<div style="margin-bottom:10px"> <div style="margin-bottom:10px">
<el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button> <el-button type="primary" @click="dialogVisible = true">通用规则设置</el-button>
<el-button type="primary" @click="enterTo">{{enterTitle}}</el-button> <el-button type="primary" @click="enterTo">{{enterTitle}}</el-button>
</div> </div>
<el-dialog title="通用规则设置" :visible.sync="dialogVisible"> <el-dialog title="通用规则设置" :visible.sync="dialogVisible">
<p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p> <p style="padding-bottom:10px;border-bottom:1px solid #d9d9d9">节假日</p>
<el-form <el-form
:model="ruleForm" :model="ruleForm"
:rules="rules" :rules="rules"
ref="ruleForm" ref="ruleForm"
label-width="100px" label-width="110px"
class="demo-ruleForm" class="demo-ruleForm"
> >
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="现金支付" prop="name"> <el-form-item label="倍数" prop="multiple">
<el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input> <el-input v-model="ruleForm.multiple" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="使用免费天数" prop="name"> <el-form-item label="免费天数" prop="freeDays">
<el-input v-model="ruleForm.name" style="width:200px" placeholder="倍/天"></el-input> <el-input v-model="ruleForm.freeDays" style="width:200px" placeholder="倍/天"></el-input>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<div> <div>
<el-button type="primary">确定</el-button> <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
</div> </div>
</el-form> </el-form>
</el-dialog> </el-dialog>
<div class="month"> <div class="month">
<ul> <ul>
<!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
<li class="year-month" @click="pickYear(currentYear,currentMonth)"> <li class="year-month">
<span class="choose-year">{{ currentYear }}</span> <span class="choose-year">{{ currentYear }}</span>
<span class="choose-month">{{ currentMonth }}月</span> <span class="choose-month">{{ currentMonth }}月</span>
</li> </li>
<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li> <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
</ul> </ul>
</div> </div>
<!-- 星期 -->
<ul class="weekdays"> <!-- 星期 -->
<li>一</li> <ul class="weekdays">
<li>二</li> <li>一</li>
<li>三</li> <li>二</li>
<li>四</li> <li>三</li>
<li>五</li> <li>四</li>
<li style="color:red">六</li> <li>五</li>
<li style="color:red">日</li> <li style="color:red">六</li>
</ul> <li style="color:red">日</li>
<!-- 日期 --> </ul>
<ul class="days">
<!-- v-for循环 每一次循环用<li>标签创建一天 --> <!-- 日期 -->
<li <ul class="days" :class="{'days-border':isSetBorder}">
v-for="(dayobject,index) in days" <!-- v-for循环 每一次循环用<li>标签创建一天 -->
:key="index" <li
:class="{setHeight:setHeight,weekend:new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7,setBorder:isSetBorder}" 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 <!-- 选中的状态 -->
v-if="dayobject.day.getMonth()+1 != currentMonth" <span ref="activeDay"></span>
class="other-month" <!-- <span :class="{isChosse:isChosses}" ref="activeDay"></span> -->
>{{ dayobject.day.getDate() }}</span>
<!--本月-->
<!--如果是本月 还需要判断是不是这一天--> <!--如果不是本月 改变类名加灰色-->
<span v-else> <span
<span v-if="dayobject.day.getMonth()+1 != currentMonth"
v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="other-month"
class="active" >{{ dayobject.day.getDate() }}</span>
>{{ dayobject.day.getDate() }}</span>
<span v-else>{{ dayobject.day.getDate() }}</span> <!--如果是本月 还需要判断是不是这一天-->
</span> <span v-else>
<p <span
v-if="new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7" v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
style="color:red" class="active"
>两倍</p> >{{ dayobject.day.getDate() }}</span>
<!--显示剩余多少数量--> <span v-else>{{ dayobject.day.getDate() }}</span>
<!-- <p v-if="leftobj[dayobject.index]"> </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> <span style="color: red">{{leftobj[dayobject.index].count}}</span>
</p>--> </p>-->
<!----> <!---->
<!-- <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button> --> <!-- <button @click="order(dayobject)" v-if="leftobj[dayobject.index]">预定</button> -->
</li> </li>
</ul> </ul>
<div <div
style="background:#fff;padding:20px 0;border-top:1px solid red" style="background:#fff;padding:20px 0;border-top:1px solid rgb(251, 138, 78)"
v-show="isSetBorder == true" v-show="isSetBorder == true"
> >
<el-form <el-form
:model="setForm" :model="setForm"
:rules="setrules" :rules="setrules"
ref="ruleForm" ref="ruleForm"
label-width="100px" label-width="100px"
class="demo-ruleForm" class="demo-ruleForm"
> >
<el-form-item label="价格类型" prop="radio1"> <el-form-item label="价格类型" prop="type">
<el-radio-group v-model="setForm.radio1"> <el-radio-group v-model="setForm.type">
<el-radio-button label="倍数"></el-radio-button> <el-radio-button label="1">倍数</el-radio-button>
<el-radio-button label="绝对值"></el-radio-button> <el-radio-button label="2">绝对值</el-radio-button>
<el-radio-button label="会员价"></el-radio-button> <el-radio-button label="3">会员价</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="应用范围" prop="radio1"> <el-form-item label="应用范围" prop="isGlobal">
<el-radio-group v-model="setForm.radio1"> <el-radio-group v-model="setForm.isGlobal" @change="changeIsGlobal">
<el-radio-button label="全局设置"></el-radio-button> <el-radio-button label="1">全局设置</el-radio-button>
<el-radio-button label="不同车型不同倍数"></el-radio-button> <el-radio-button label="0">不同车型不同倍数</el-radio-button>
</el-radio-group> </el-radio-group>
<el-input v-model="setForm.input" placeholder="请输入倍数" style="width:100px;"></el-input> <el-select
</el-form-item> v-if="setForm.type ==3 && setForm.isGlobal == 1"
<el-button style="margin-left:30px" type="primary">确定</el-button> v-model="setForm.level"
</el-form> placeholder="请选择"
</div> >
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.level"></el-option>
<el-dialog title="倍数详情" :visible.sync="multiplePop"> </el-select>
<el-input
</el-dialog> v-else-if="setForm.type ==1 && setForm.isGlobal == 1"
</div> v-model="setForm.multiple"
</div> 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> </template>
<script> <script>
import { priceList, dayList, add_edit, levels,rule } from 'api/vehicleType'
export default { export default {
data() { data() {
return { return {
multiplePop: false, activeTime: '',
setForm: {}, nature: {},
setrules: {}, dayListData: [],
enterTitle: "进入编辑", setMultiplePop: false,
ruleForm: {}, isChosses: false,
rules: {}, setForm: {
dialogVisible: false, type: '1',
isSetBorder: false, isGlobal: '1',
setHeight: true, multiple: '',
isWeekend: false, freeDays: '',
currentDay: 1, level: ''
currentMonth: 1, },
currentYear: 1970, chooseData: [],
currentWeek: 1, options: [],
days: [], setrules: {},
leftobj: [ enterTitle: '进入编辑',
//存放剩余数量 calendarStatus: 0,
{ count: 1 }, ruleForm: {
{ count: 2 }, multiple: '',
{ count: 3 }, freeDays: ''
{ count: 4 }, },
{ count: 5 } rules: {
] multiple: [
}; { required: true, message: '请输入倍/天', trigger: 'blur' },
}, ],
created: function() { freeDays: [
//在vue初始化时调用 { required: true, message: '请输入/天', trigger: 'blur' },
this.initData(null); ],
},
methods: { },
//进入编辑 dialogVisible: false,
enterTo() { isSetBorder: false,
if (this.enterTitle == "进入编辑") { setHeight: true,
this.isSetBorder = true; isWeekend: false,
this.enterTitle = "取消编辑"; currentDay: 1,
} else { currentMonth: 1,
this.isSetBorder = false; currentYear: 1970,
this.enterTitle = "进入编辑"; currentWeek: 1,
} days: [],
}, dataList: [],
order: function(day) { leftobj: [
//预定函数 //存放剩余数量
if (this.leftobj[day.index].count >= 1) this.leftobj[day.index].count--; { count: 1 },
else alert("已经没有位置了"); { count: 2 },
}, { count: 3 },
initData: function(cur) { { count: 4 },
var leftcount = 0; //存放剩余数量 { count: 5 }
var date; ]
var index = 0; //控制显示预定的天数 ，比如下面设置只能预定三天的 }
//this.initleftcount(); 每次初始化更新数量 },
//有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费 created: function() {
// 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性 //在vue初始化时调用
//还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好） this.initData(null)
this.getList()
if (cur) { this.levelsFn()
date = new Date(cur); },
} else { methods: {
var now = new Date(); submitForm(formName) {
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1)); this.$refs[formName].validate(valid => {
d.setDate(35); if (valid) {
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); rule({multiple:this.ruleForm.multiple,freeDays:this.ruleForm.freeDays}).then(data=>{
} if (data.status == 200) {
this.currentDay = date.getDate(); this.$message.success('设置成功')
this.currentYear = date.getFullYear(); this.dialogVisible = false
this.currentMonth = date.getMonth() + 1; }else{
this.$message.error(data.message)
this.currentWeek = date.getDay(); // 1...6,0 }
if (this.currentWeek == 0) { })
this.currentWeek = 7; } else {
} console.log('error submit!!')
var str = this.formatDate( return false
this.currentYear, }
this.currentMonth, })
this.currentDay },
); changeIsGlobal(val) {
this.days.length = 0; let activeStatus = this.$refs.activeDay
// 今天是周日，放在第一行第7个位置，前面6个 if (val == 0) {
//初始化本周 for (let index = 0; index < activeStatus.length; index++) {
for (var i = this.currentWeek - 1; i >= 0; i--) { activeStatus[index].className = ''
var d = new Date(str); }
d.setDate(d.getDate() - i); }
},
var dayobject = {}; setPrice() {
dayobject.day = d; let params = []
var now = new Date(); //全局设置
if ( if (this.setForm.isGlobal == 1) {
d.getDate() === now.getDate() && if (this.chooseData == '') {
d.getMonth() === now.getMonth() && this.$message.error('请选择要设置的日期')
d.getFullYear() === now.getFullYear() return false
) { } else {
dayobject.index = index++; //从今天开始显示供预定的数量 this.chooseData.forEach(element => {
} else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量 let defaults = {}
defaults.date = element
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用 defaults.isGlobal =
} Number(this.setForm.isGlobal) == 1 ? true : false
//其他周 defaults.type = Number(this.setForm.type)
for (var i = 1; i <= 35 - this.currentWeek; i++) { defaults.multiple =
var d = new Date(str); Number(this.setForm.multiple) == ''
d.setDate(d.getDate() + i); ? ''
var dayobject = {}; : Number(this.setForm.multiple)
dayobject.day = d; defaults.price =
var now = new Date(); Number(this.setForm.price) == ''
if ( ? ''
d.getDate() === now.getDate() && : Number(this.setForm.price)
d.getMonth() === now.getMonth() && defaults.freeDays = Number(this.setForm.freeDays)
d.getFullYear() === now.getFullYear() defaults.level = this.setForm.level
) { params.push(defaults)
dayobject.index = index++; })
} else if (index != 0 && index < 3) dayobject.index = index++; }
this.days.push(dayobject); } else {
} this.dayListData.forEach(element => {
}, if (this.setForm.type == 1) {
pickPre: function(year, month) { if (!!element.multiple || !!element.freeDays) {
// setDate(0); 上月最后一天 params.push({
// setDate(-1); 上月倒数第二天 multiple: element.multiple,
// setDate(dx) 参数dx为 上月最后一天的前后dx天 date: this.activeTime,
var d = new Date(this.formatDate(year, month, 1)); isGlobal:
d.setDate(0); this.setForm.isGlobal == 1 ? true : false,
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); freeDays: element.freeDays,
}, vehicleModelId: element.vehicleModelId,
pickNext: function(year, month) { type: this.setForm.type
var d = new Date(this.formatDate(year, month, 1)); })
d.setDate(35); } else {
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); this.$message.error('请设置不同车型不同价格')
}, return false
pickYear: function(year, month) { }
alert(year + "," + month); } else if (this.setForm.type == 2) {
}, if (!!element.price || !!element.freeDays) {
params.push({
// 返回 类似 2016-01-02 格式的字符串 price: element.price,
formatDate: function(year, month, day) { date: this.activeTime,
var y = year; isGlobal:
var m = month; this.setForm.isGlobal == 1 ? true : false,
if (m < 10) m = "0" + m; freeDays: element.freeDays,
var d = day; vehicleModelId: element.vehicleModelId,
if (d < 10) d = "0" + d; type: this.setForm.type
return y + "-" + m + "-" + d; })
} } 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> </script>
<style> <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 { .setBorder {
border-left: 1px solid red; border-left: 1px solid rgb(251, 138, 78);
border-top: 1px solid red; border-top: 1px solid rgb(251, 138, 78);
} }
.setHeight { .setHeight {
height: 120px; height: 120px;
position: relative;
} }
.weekend { .isChosse {
color: red !important; 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 { ul {
list-style-type: none; list-style-type: none;
} }
body { body {
font-family: Verdana, sans-serif; font-family: Verdana, sans-serif;
background: #e8f0f3; /* background: #e8f0f3; */
} }
#calendar { #calendar {
width: 80%; width: 80%;
margin: 0 auto; 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), box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12); 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
} }
.month { .month {
width: 100%; width: 100%;
background: #20a0ff; background: #20a0ff;
} }
.month ul { .month ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.year-month { .year-month {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
.year-month:hover { .year-month:hover {
background: rgba(150, 2, 12, 0.1); background: rgba(150, 2, 12, 0.1);
} }
.choose-year { .choose-year {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
} }
.choose-month { .choose-month {
text-align: center; text-align: center;
font-size: 1.5rem; font-size: 1.5rem;
} }
.arrow { .arrow {
padding: 30px; padding: 30px;
} }
.arrow:hover { .arrow:hover {
background: rgba(100, 2, 12, 0.1); background: rgba(100, 2, 12, 0.1);
} }
.month ul li { .month ul li {
color: white; color: white;
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
} }
.weekdays { .weekdays {
margin: 0; margin: 0;
padding: 10px 0; padding: 10px 0;
background-color: #20a0ff; background-color: #20a0ff;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
color: #ffffff; color: #ffffff;
justify-content: space-around; justify-content: space-around;
} }
.weekdays li { .weekdays li {
display: inline-block; display: inline-block;
width: 13.6%; width: 13.6%;
text-align: center; text-align: center;
} }
.days { .days {
padding: 0; padding: 0;
background: #ffffff; background: #ffffff;
margin: 0; margin: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
}
.days-border {
border-right: 1px solid rgb(251, 138, 78);
} }
.days li { .days li {
list-style-type: none; list-style-type: none;
display: inline-block; display: inline-block;
width: 14.2%; width: 14.2%;
text-align: center; text-align: center;
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 15px; padding-top: 15px;
font-size: 1rem; font-size: 1rem;
color: #000; color: #000;
} }
.days li .active { .days li .active {
padding: 6px 10px; padding: 6px 10px;
border-radius: 50%; border-radius: 10px;
background: #20a0ff; background: #20a0ff;
color: #fff; color: #fff;
} }
.days li .other-month { .days li .other-month {
padding: 5px; padding: 5px;
color: gainsboro; color: gainsboro;
} }
.days li:hover { .days li:hover {
background: #c0c4cc; background: #c0c4cc;
} }
</style> </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