Skip to content

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

租车日历

parent 25013b30
Show 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
...@@ -12,23 +12,23 @@ ...@@ -12,23 +12,23 @@
: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>
...@@ -37,13 +37,14 @@ ...@@ -37,13 +37,14 @@
<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"> <ul class="weekdays">
<li>一</li> <li>一</li>
...@@ -54,17 +55,22 @@ ...@@ -54,17 +55,22 @@
<li style="color:red">六</li> <li style="color:red">六</li>
<li style="color:red">日</li> <li style="color:red">日</li>
</ul> </ul>
<!-- 日期 --> <!-- 日期 -->
<ul class="days"> <ul class="days" :class="{'days-border':isSetBorder}">
<!-- v-for循环 每一次循环用<li>标签创建一天 --> <!-- v-for循环 每一次循环用<li>标签创建一天 -->
<li <li
v-for="(dayobject,index) in days" v-for="(dayobject,index) in days"
:key="index" :key="index"
:class="{setHeight:setHeight,weekend:new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7,setBorder:isSetBorder}" :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 <span
v-if="dayobject.day.getMonth()+1 != currentMonth" v-if="dayobject.day.getMonth()+1 != currentMonth"
class="other-month" class="other-month"
...@@ -78,10 +84,13 @@ ...@@ -78,10 +84,13 @@
>{{ dayobject.day.getDate() }}</span> >{{ dayobject.day.getDate() }}</span>
<span v-else>{{ dayobject.day.getDate() }}</span> <span v-else>{{ dayobject.day.getDate() }}</span>
</span> </span>
<p <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" v-if="new Date(dayobject.day).getDay()+1 == 1 || new Date(dayobject.day).getDay()+1 == 7"
style="color:red" style="color:red"
>两倍</p> >{{GMTToStr(dayobject.day)}}</p>-->
<!--显示剩余多少数量--> <!--显示剩余多少数量-->
<!-- <p v-if="leftobj[dayobject.index]"> <!-- <p v-if="leftobj[dayobject.index]">
剩余： 剩余：
...@@ -93,7 +102,7 @@ ...@@ -93,7 +102,7 @@
</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
...@@ -103,40 +112,110 @@ ...@@ -103,40 +112,110 @@
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
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-form-item>
<el-button style="margin-left:30px" type="primary">确定</el-button> <el-button style="margin-left:30px" type="primary" @click="setPrice">确定</el-button>
</el-form> </el-form>
</div> </div>
<el-dialog title="倍数详情" :visible.sync="multiplePop"> <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> </el-dialog>
</div> </div>
</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: {},
dayListData: [],
setMultiplePop: false,
isChosses: false,
setForm: {
type: '1',
isGlobal: '1',
multiple: '',
freeDays: '',
level: ''
},
chooseData: [],
options: [],
setrules: {}, setrules: {},
enterTitle: "进入编辑", enterTitle: '进入编辑',
ruleForm: {}, calendarStatus: 0,
rules: {}, ruleForm: {
multiple: '',
freeDays: ''
},
rules: {
multiple: [
{ required: true, message: '请输入倍/天', trigger: 'blur' },
],
freeDays: [
{ required: true, message: '请输入/天', trigger: 'blur' },
],
},
dialogVisible: false, dialogVisible: false,
isSetBorder: false, isSetBorder: false,
setHeight: true, setHeight: true,
...@@ -146,6 +225,7 @@ export default { ...@@ -146,6 +225,7 @@ export default {
currentYear: 1970, currentYear: 1970,
currentWeek: 1, currentWeek: 1,
days: [], days: [],
dataList: [],
leftobj: [ leftobj: [
//存放剩余数量 //存放剩余数量
{ count: 1 }, { count: 1 },
...@@ -154,136 +234,414 @@ export default { ...@@ -154,136 +234,414 @@ export default {
{ count: 4 }, { count: 4 },
{ count: 5 } { count: 5 }
] ]
}; }
}, },
created: function() { created: function() {
//在vue初始化时调用 //在vue初始化时调用
this.initData(null); this.initData(null)
this.getList()
this.levelsFn()
}, },
methods: { 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() { enterTo() {
if (this.enterTitle == "进入编辑") { if (this.enterTitle == '进入编辑') {
this.isSetBorder = true; this.isSetBorder = true
this.enterTitle = "取消编辑"; this.enterTitle = '取消编辑'
this.calendarStatus = 1
} else { } else {
this.isSetBorder = false; this.isSetBorder = false
this.enterTitle = "进入编辑"; this.calendarStatus = 0
this.enterTitle = '进入编辑'
} }
}, },
order: function(day) { order: function(day) {
//预定函数 //预定函数
if (this.leftobj[day.index].count >= 1) this.leftobj[day.index].count--; if (this.leftobj[day.index].count >= 1)
else alert("已经没有位置了"); this.leftobj[day.index].count--
else alert('已经没有位置了')
}, },
initData: function(cur) { initData: function(cur) {
var leftcount = 0; //存放剩余数量 var leftcount = 0 //存放剩余数量
var date; var date
var index = 0; //控制显示预定的天数 ，比如下面设置只能预定三天的 var index = 0 //控制显示预定的天数 ，比如下面设置只能预定三天的
//this.initleftcount(); 每次初始化更新数量 //this.initleftcount(); 每次初始化更新数量
//有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费 //有两种方案 一种是每次翻页 ajax获取数据初始化 http请求过多会导致资源浪费
// 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性 // 一种是每次请求 ajax获取数据初始化 数据更新过慢会导致缺少实时性
//还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好） //还可以setTimeout 定时请求更新数据 实现数据刷新（可能会更好）
if (cur) { if (cur) {
date = new Date(cur); date = new Date(cur)
} else { } else {
var now = new Date(); var now = new Date()
var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1)); var d = new Date(
d.setDate(35); this.formatDate(now.getFullYear(), now.getMonth(), 1)
date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); )
d.setDate(35)
date = new Date(
this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)
)
} }
this.currentDay = date.getDate(); this.currentDay = date.getDate()
this.currentYear = date.getFullYear(); this.currentYear = date.getFullYear()
this.currentMonth = date.getMonth() + 1; this.currentMonth = date.getMonth() + 1
this.currentWeek = date.getDay(); // 1...6,0 this.currentWeek = date.getDay() // 1...6,0
if (this.currentWeek == 0) { if (this.currentWeek == 0) {
this.currentWeek = 7; this.currentWeek = 7
} }
var str = this.formatDate( var str = this.formatDate(
this.currentYear, this.currentYear,
this.currentMonth, this.currentMonth,
this.currentDay this.currentDay
); )
this.days.length = 0; this.days.length = 0
// 今天是周日，放在第一行第7个位置，前面6个 // 今天是周日，放在第一行第7个位置，前面6个
//初始化本周 //初始化本周
for (var i = this.currentWeek - 1; i >= 0; i--) { for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str); var d = new Date(str)
d.setDate(d.getDate() - i); d.setDate(d.getDate() - i)
var dayobject = {}; var dayobject = {}
dayobject.day = d; dayobject.day = d
var now = new Date(); var now = new Date()
if ( if (
d.getDate() === now.getDate() && d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() && d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear() d.getFullYear() === now.getFullYear()
) { ) {
dayobject.index = index++; //从今天开始显示供预定的数量 dayobject.index = index++ //从今天开始显示供预定的数量
} else if (index != 0 && index < 3) dayobject.index = index++; //从今天开始3天内显示供预定的数量 } else if (index != 0 && index < 3) dayobject.index = index++ //从今天开始3天内显示供预定的数量
this.days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用 this.days.push(dayobject) //将日期放入data 中的days数组 供页面渲染使用
} }
//其他周 //其他周
for (var i = 1; i <= 35 - this.currentWeek; i++) { for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str); var d = new Date(str)
d.setDate(d.getDate() + i); d.setDate(d.getDate() + i)
var dayobject = {}; var dayobject = {}
dayobject.day = d; dayobject.day = d
var now = new Date(); var now = new Date()
if ( if (
d.getDate() === now.getDate() && d.getDate() === now.getDate() &&
d.getMonth() === now.getMonth() && d.getMonth() === now.getMonth() &&
d.getFullYear() === now.getFullYear() d.getFullYear() === now.getFullYear()
) { ) {
dayobject.index = index++; dayobject.index = index++
} else if (index != 0 && index < 3) dayobject.index = index++; } else if (index != 0 && index < 3) dayobject.index = index++
this.days.push(dayobject); this.days.push(dayobject)
} }
}, },
pickPre: function(year, month) { pickPre: function(year, month) {
// setDate(0); 上月最后一天 // setDate(0); 上月最后一天
// setDate(-1); 上月倒数第二天 // setDate(-1); 上月倒数第二天
// setDate(dx) 参数dx为 上月最后一天的前后dx天 // setDate(dx) 参数dx为 上月最后一天的前后dx天
var d = new Date(this.formatDate(year, month, 1)); var d = new Date(this.formatDate(year, month, 1))
d.setDate(0); d.setDate(0)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
this.getList()
}, },
pickNext: function(year, month) { pickNext: function(year, month) {
var d = new Date(this.formatDate(year, month, 1)); var d = new Date(this.formatDate(year, month, 1))
d.setDate(35); d.setDate(35)
this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
}, this.getList()
pickYear: function(year, month) {
alert(year + "," + month);
}, },
// 返回 类似 2016-01-02 格式的字符串 // 返回 类似 2016-01-02 格式的字符串
formatDate: function(year, month, day) { formatDate: function(year, month, day) {
var y = year; var y = year
var m = month; var m = month
if (m < 10) m = "0" + m; if (m < 10) m = '0' + m
var d = day; var d = day
if (d < 10) d = "0" + d; if (d < 10) d = '0' + d
return y + "-" + m + "-" + 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;
} }
...@@ -294,14 +652,14 @@ ul { ...@@ -294,14 +652,14 @@ ul {
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 {
...@@ -376,7 +734,9 @@ body { ...@@ -376,7 +734,9 @@ body {
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;
...@@ -390,7 +750,7 @@ body { ...@@ -390,7 +750,7 @@ body {
.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;
} }
......
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