You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
577 lines
12 KiB
577 lines
12 KiB
<template>
|
|
<mNavbar title="服务时间" :leftClick="leftClick">
|
|
</mNavbar>
|
|
|
|
<view class="box">
|
|
<van-dropdown-menu>
|
|
<van-dropdown-item @change='changeServer' v-model="serviceTitle" :options="techniService" />
|
|
<van-dropdown-item @change="change" :options="operationList">
|
|
<template #title>快捷操作</template>
|
|
</van-dropdown-item>
|
|
</van-dropdown-menu>
|
|
|
|
<view v-show="serviceTitle == 0" class="time">
|
|
<view class="date-list">
|
|
<view :class="{'date-item' : true, act : i == index}" v-for="(item, index) in dateList"
|
|
@click="selectDate(item, index)">
|
|
<view>
|
|
{{ item.format('dddd') }}
|
|
</view>
|
|
<view>
|
|
{{ item.format('MM-DD') }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="display: flex;justify-content: center;" v-if="loading">
|
|
<van-loading />
|
|
</view>
|
|
|
|
|
|
<view class="time-list" v-else-if="timeList.length">
|
|
|
|
<view
|
|
:class="{'time-item' : true , no : !item.timeOut && item.isDelete == 'Y' , timeOut : item.timeout }"
|
|
v-for="(item, index) in timeList" @click="selectTime({time : item, date : dateList[i]})">
|
|
<van-checkbox-group v-model="checked">
|
|
<view v-if="multipleChoice" class="checked">
|
|
<van-checkbox :name="item.id" :disabled="item.timeout"></van-checkbox>
|
|
</view>
|
|
<view>
|
|
{{ item.timeName }}
|
|
</view>
|
|
<view class="status">
|
|
{{ item.timeout ? '过时' : item.isDelete != 'Y' ? '打开' : '关闭' }}
|
|
</view>
|
|
</van-checkbox-group>
|
|
</view>
|
|
</view>
|
|
|
|
<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="无数据请上线初始化" />
|
|
|
|
</view>
|
|
|
|
<view v-show="serviceTitle == 1" class="project">
|
|
<view v-if="projectList.length > 0" class="server-list">
|
|
<van-checkbox-group v-model="checked">
|
|
<view v-for="item in projectList" class="server-item">
|
|
<view v-if="multipleChoice" class="checked">
|
|
<van-checkbox :name="item.id"></van-checkbox>
|
|
</view>
|
|
<view class="img-box">
|
|
<image :src="item.shopObject.image" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="server-info">
|
|
<view class="server-title">{{ item.shopObject.title }}</view>
|
|
<view class="time-coupon">
|
|
<image src="@/static/home/time-icon.png"></image>
|
|
<view class="time">{{ item.shopObject.times }}分钟</view>
|
|
</view>
|
|
<view class="price">
|
|
<view class="current-price">
|
|
<text class="unit">￥</text>{{ item.shopObject.price }}
|
|
</view>
|
|
<view class="original-price">
|
|
<text class="unit">￥</text>{{ item.shopObject.oldPrice }}
|
|
</view>
|
|
</view>
|
|
<view class="sales-volume">
|
|
<image src="@/static/icons/icon1.png"></image>
|
|
<view class="desc">已售出{{ item.shopObject.payNum }}+单</view>
|
|
</view>
|
|
</view>
|
|
<view class="selective-technician">
|
|
<view @click.stop="selectProject(item)" class="btn">
|
|
{{ item.isDelete == 'Y' ? '取消项目' : '选择项目'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</van-checkbox-group>
|
|
</view>
|
|
|
|
<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="无数据请上线初始化" />
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mNavbar from '@/components/base/m-navbar.vue'
|
|
export default {
|
|
name: "serverTime",
|
|
components: {
|
|
mNavbar,
|
|
},
|
|
data() {
|
|
return {
|
|
i: 0,
|
|
dateList: [],
|
|
timeList: [],
|
|
loading: false,
|
|
projectList: [],
|
|
finished: false,
|
|
serviceTitle: 0,
|
|
techniService: [{
|
|
text: '服务时间',
|
|
value: 0
|
|
},
|
|
{
|
|
text: '服务项目',
|
|
value: 1
|
|
}
|
|
],
|
|
checked: [],
|
|
multipleChoice: false, //是否开启多选
|
|
operationList: [{
|
|
text: '打开',
|
|
value: 0
|
|
}, {
|
|
text: '关闭',
|
|
value: 1
|
|
},
|
|
{
|
|
text: '开启多选',
|
|
value: 2
|
|
},
|
|
{
|
|
text: '全选',
|
|
value: 3
|
|
}
|
|
],
|
|
today: null,
|
|
selDate: null,
|
|
isInit: false
|
|
};
|
|
},
|
|
onShow() {
|
|
if (this.dateList.length >= 7) return; //防止多次添加日期,onShow这个钩子每次离开页面然后回来都会调用一下
|
|
this.today = this.dayjs()
|
|
this.dateList.push(this.today)
|
|
for (let i = 1; i < 7; i++) {
|
|
this.dateList.push(this.today.add(i, 'day'))
|
|
}
|
|
this.selectDate(this.today, 0)
|
|
this.getProjectList()
|
|
},
|
|
methods: {
|
|
|
|
// 选择日期
|
|
selectDate(item, index) {
|
|
this.i = index
|
|
this.loading = true
|
|
this.$api('getVipTenOrderList', {
|
|
tenId: this.$route.query.uid,
|
|
name: item.format('dddd')
|
|
}, res => {
|
|
if (res.code == 200) {
|
|
res.result.forEach(time => {
|
|
if (this.isFormerly({
|
|
time,
|
|
date: this.dateList[this.i]
|
|
})) { //判断时间是否超时了
|
|
time.timeout = true
|
|
} else {
|
|
time.timeout = false
|
|
}
|
|
})
|
|
this.timeList = res.result;
|
|
this.selDate = item
|
|
}
|
|
this.loading = false
|
|
})
|
|
},
|
|
|
|
//选择时间
|
|
selectTime(item) {
|
|
if (item.time.timeout) { //判断是否是过去时间
|
|
return uni.showToast({title: '选择时间已过时',icon:'none'});
|
|
}
|
|
|
|
if (this.multipleChoice) {
|
|
if (this.checked.includes(item.time.id)) {
|
|
this.checked = this.checked.filter(id => id !== item.time.id);
|
|
} else {
|
|
this.checked.push(item.time.id);
|
|
}
|
|
return
|
|
}
|
|
this.updateTerTime([item.time.id], item.time.isDelete == 'Y' ? 'N' : 'Y');
|
|
},
|
|
|
|
//返回个人中心
|
|
leftClick() {
|
|
uni.switchTab({
|
|
url: '/pages/index/center'
|
|
})
|
|
},
|
|
|
|
//修改上钟时间
|
|
updateTerTime(selectTimeArr, isDelete) {
|
|
let data = {
|
|
ids: selectTimeArr.toString(),
|
|
isDelete
|
|
}
|
|
this.$api('updateTerTime', data, res => {
|
|
if (res.code == 200) {
|
|
this.selectDate(this.selDate, this.i)
|
|
uni.showToast({title : '操作成功',con : 'none'})
|
|
}
|
|
})
|
|
},
|
|
|
|
//获取项目列表
|
|
getProjectList() {
|
|
this.$api('queryTerProject', this.queryParams, res => {
|
|
if (res.code == 200) {
|
|
this.projectList = res.result;
|
|
}
|
|
})
|
|
},
|
|
|
|
//开启或关闭项目
|
|
updateTerProject(selectTimeArr, isDelete) {
|
|
let data = {
|
|
ids: selectTimeArr.toString(),
|
|
isDelete
|
|
}
|
|
this.$api('updateTerProject', data, res => {
|
|
if (res.code == 200) {
|
|
this.getProjectList()
|
|
uni.showToast({title : '操作成功',con : 'none'})
|
|
}
|
|
})
|
|
},
|
|
|
|
//切换选择
|
|
changeServer() {
|
|
this.checked = []; //清空已经选择的时间id或项目id
|
|
},
|
|
|
|
//打开关闭时间、项目
|
|
operationItem(isOpen) { //打开关闭项目
|
|
if (this.serviceTitle) {
|
|
this.updateTerProject(this.checked, isOpen)
|
|
|
|
} else { //打开关闭时间 isOpen 是否打开(打开Y 关闭N)
|
|
this.updateTerTime(this.checked, isOpen)
|
|
}
|
|
},
|
|
|
|
//选择项目
|
|
selectProject(item) {
|
|
if (this.multipleChoice) {
|
|
if (this.checked.includes(item.id)) {
|
|
this.checked = this.checked.filter(id => id !== item.id);
|
|
} else {
|
|
this.checked.push(item.id);
|
|
}
|
|
return
|
|
}
|
|
this.updateTerProject([item.id], item.isDelete == 'Y' ? 'N' : 'Y')
|
|
},
|
|
|
|
//区分不同操作列表不同操作(全选，打开，关闭等)
|
|
change(value) {
|
|
if (value == 0) {
|
|
this.operationItem('Y')
|
|
} else if (value == 1) {
|
|
this.operationItem('N')
|
|
} else if (value == 2) {
|
|
this.multipleChoice = !this.multipleChoice
|
|
this.operationList[2].text = this.multipleChoice ? '取消多选' : '开启多选'
|
|
this.checked = []
|
|
|
|
if (this.operationList[3].text == '取消全选') { //取消全选逻辑
|
|
this.operationList[3].text = '全选'
|
|
}
|
|
} else if (value == 3) { //全选
|
|
if (!this.multipleChoice) {
|
|
return uni.showToast({
|
|
title: '请开启多选',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
if (this.operationList[3].text == '取消全选') { //取消全选逻辑
|
|
this.operationList[3].text = '全选'
|
|
return this.checked = []
|
|
}
|
|
|
|
let arr = []
|
|
if (this.serviceTitle == 0) { //遍历时间列表
|
|
this.timeList.forEach(time => {
|
|
if (!time.timeout) { //筛选掉已过时的
|
|
arr.push(time.id)
|
|
}
|
|
})
|
|
} else {
|
|
this.projectList.forEach(project => {
|
|
arr.push(project.id)
|
|
})
|
|
}
|
|
this.checked = arr
|
|
this.operationList[3].text = '取消全选'
|
|
}
|
|
},
|
|
|
|
//项目滑动到底部
|
|
onLoad() {},
|
|
|
|
//判断时间是否为过去时间
|
|
isFormerly(e) {
|
|
let day = e.date.format('YYYY-MM-DD')
|
|
let selectTime = this.dayjs(`${day} ${e.time.timeName}`)
|
|
let nowTime = this.dayjs()
|
|
|
|
if (selectTime.isBefore(nowTime)) {
|
|
return true
|
|
}
|
|
|
|
return false
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
box-sizing: border-box;
|
|
|
|
.date-list {
|
|
display: flex;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
overflow-x: scroll;
|
|
padding: 30rpx 0rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
|
|
.date-item {
|
|
flex-shrink: 0;
|
|
padding: 10rpx;
|
|
margin: 0 10rpx;
|
|
|
|
&>view {
|
|
padding: 6rpx 10rpx;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background-color: #50a2a7;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.time-list {
|
|
display: flex;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
flex-wrap: wrap;
|
|
height: calc(100% - 200rpx);
|
|
overflow: hidden;
|
|
overflow-y: scroll;
|
|
|
|
.time-item {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
width: calc(25% - 20rpx);
|
|
background-color: #E4E4E4;
|
|
box-sizing: border-box;
|
|
margin: 10rpx;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
line-height: 40rpx;
|
|
color: #777;
|
|
|
|
.status {
|
|
color: #EBA44B;
|
|
}
|
|
|
|
&.no {
|
|
background-color: #50a2a7;
|
|
color: #fff;
|
|
|
|
.status {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
&.timeOut {
|
|
background: #ccc;
|
|
color: #FFFFFF;
|
|
|
|
.status {
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.checked {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.act {
|
|
background-color: #fff;
|
|
color: #55B16E;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.server-list {
|
|
padding-bottom: 80rpx;
|
|
|
|
.server-item {
|
|
position: relative;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
background: white;
|
|
border-radius: 15rpx;
|
|
box-sizing: border-box;
|
|
padding: 15rpx;
|
|
margin: 20rpx 0rpx;
|
|
|
|
.img-box {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.server-info {
|
|
width: calc(100% - 320rpx);
|
|
box-sizing: border-box;
|
|
padding: 0 15rpx;
|
|
|
|
.server-title {}
|
|
|
|
.time-coupon,
|
|
.price {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-coupon {
|
|
margin: 10rpx 0rpx;
|
|
font-size: 26rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.time {
|
|
color: #B8B8B8;
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.coupon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #F29E45;
|
|
color: white;
|
|
width: 140rpx;
|
|
height: 45rpx;
|
|
border-radius: 10rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
|
|
.price {
|
|
font-size: 26rpx;
|
|
color: #B8B8B8;
|
|
|
|
.current-price {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #D34430;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.sales-volume {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #B8B8B8;
|
|
font-size: 26rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.selective-technician {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
width: 140rpx;
|
|
|
|
.btn {
|
|
background: linear-gradient(178deg, #4FD3BC, #60C285);
|
|
color: white;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.checked {
|
|
position: absolute;
|
|
left: 15rpx;
|
|
top: 15rpx;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select-button {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100rpx;
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
box-shadow: -2px -2px 10px rgba(0, 0, 0, .1);
|
|
padding: 0 10rpx;
|
|
box-sizing: border-box;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 3;
|
|
height: 80rpx;
|
|
margin: 0 10rpx;
|
|
background: #50a2a7;
|
|
border-radius: 42.5rpx;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|