移动端V1.0
This commit is contained in:
544
pages/OneStopCommunity/appointment/detail.vue
Normal file
544
pages/OneStopCommunity/appointment/detail.vue
Normal file
@@ -0,0 +1,544 @@
|
||||
<template>
|
||||
<view class="detail" v-if="detail!=null">
|
||||
<view style="margin: 40rpx;">
|
||||
<uni-swiper-dot :info="swiperList" :current="current" :dots-styles="dotStyles" field="content" mode="round">
|
||||
<swiper interval="2000" autoplay class="swiper-box" @change="change">
|
||||
<swiper-item v-for="(img ,index) in swiperList" :key="index">
|
||||
<view class="swiper-item">
|
||||
<image mode="aspectFill" :src="basePath+img">
|
||||
|
||||
</image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
<view class="title-a">
|
||||
<text>{{detail.roomName}}</text>
|
||||
<view class="open-up">开放中</view>
|
||||
</view>
|
||||
<view class="title-b">
|
||||
<view>
|
||||
<uni-icons color="#FFBB12" type="staff-filled" size="24"></uni-icons>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{detail.staffOneStopRoom[0].roomCapacity}}/人</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="introduction">
|
||||
<text>
|
||||
{{detail.roomInfo}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="time-zone">
|
||||
<view>预定详情</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>活动：</text><text>{{detail.rtTheme}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>活动房：</text><text>{{detail.roomName}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>预约时间：</text><text>{{detail.rtTime}} {{detail.rtTimePeriod}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>参与人员类型：</text><text>{{detail.rtRole}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>预约用途：</text><text>{{detail.rtPurpose}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>使用部门/学院：</text><text>{{detail.rtDepar}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>参与人数：</text><text>{{detail.rtPeople}}人</text>
|
||||
</view>
|
||||
<view class="status">
|
||||
<text>审批状态：</text>
|
||||
<text v-for="(tab,index) in auStatelist" :key="index" :class="tab.dictValue|formateAuStatus"
|
||||
v-show="detail.auditStatus==tab.dictValue">
|
||||
{{tab.dictLabel}}
|
||||
</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>使用状态：</text>
|
||||
<text v-for="(tab,index) in rtstatelist" :key="index"
|
||||
v-if="tab.dictValue==detail.rtState">{{tab.dictLabel}}</text>
|
||||
</view>
|
||||
<view v-if="detail.auditStatus==2">
|
||||
<text>不同意原因：</text>
|
||||
<text>{{detail.editOpinion}}</text>
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view>
|
||||
<text style="color:#9C9C9C ;">使用事项：</text>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>{{detail.staffOneStopRoom[0].roomMatter}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="display: flex;flex-wrap: wrap;">
|
||||
<view>
|
||||
<text style="color:#9C9C9C ;">使用反馈：</text>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<text>{{detail.feedback}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button-a" v-show="detail.auditStatus<2&&detail.rtState<2">
|
||||
<button v-if="detail.auditStatus==0" @click="cancelMake()"><text>取消预约</text> </button>
|
||||
<button v-else-if="detail.auditStatus==1" @click="finish()"><text>使用结束</text></button>
|
||||
</view>
|
||||
<view class="button-b" v-show="detail.auditStatus==2&&detail.rtState<2">
|
||||
<view><button @click="updateMake()">修改预约</button></view>
|
||||
<view><button type="default" @click="cancelMake()">取消预约</button></view>
|
||||
</view>
|
||||
<uni-popup ref="popup" class="finish-popup">
|
||||
<view class="content">
|
||||
<view class="title">图片上传</view>
|
||||
<view><text class="tip">*</text>请上传使用期间图片</view>
|
||||
<view class="upload-img" v-if="tempSceneImgs.length==0" @tap="uploadSceneImg">
|
||||
<view class="add">
|
||||
+ 添加照片
|
||||
</view>
|
||||
<view class="tip">
|
||||
图片要求：最多3张，上限5MB
|
||||
</view>
|
||||
<view class="img-list">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="img-list" v-else>
|
||||
<view class="imgs">
|
||||
<view class="img" v-for="(img,index) in tempSceneImgs">
|
||||
<image :src="img.path" @tap="previewImg(tempSceneImgs)" mode="aspectFill"></image>
|
||||
<text class="remove" @tap="onRemoveSceneImg(index,img.path)">X</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="tempSceneImgs.length<3" class="btn" @tap="uploadSceneImg">
|
||||
+ 添加照片
|
||||
</view>
|
||||
</view>
|
||||
<view @click="submit" class="bottom">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDetailList,
|
||||
Deleteid,
|
||||
Update
|
||||
} from '@/api/OneStopCommunity/appointment.js'
|
||||
import {
|
||||
uploadImg,
|
||||
previewImg,
|
||||
removeImg
|
||||
} from "../common/uploadImg.js"
|
||||
import {
|
||||
baseUrl
|
||||
} from "@/config.js";
|
||||
import {
|
||||
getDicts
|
||||
} from '@/api/system/dict/data.js'
|
||||
import {
|
||||
toBackPage
|
||||
} from "@/utils/toBack.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
dotStyles: {
|
||||
width: 12,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.4)',
|
||||
border: '1px rgba(255, 255, 255, 0.4) solid',
|
||||
color: '#fff',
|
||||
selectedBackgroundColor: '#1890FF',
|
||||
selectedBorder: '1px #1890FF solid'
|
||||
},
|
||||
swiperList: [],
|
||||
tempSceneImgs: [],
|
||||
rwPicture: "",
|
||||
rtId: null,
|
||||
detail: null,
|
||||
auStatelist: [],
|
||||
basePath: baseUrl,
|
||||
submitlist: {
|
||||
},
|
||||
rtstatelist: [],
|
||||
auditlist: {}
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formateAuStatus(val) {
|
||||
if (val == 1) {
|
||||
return "agree"
|
||||
} else if (val == 2) {
|
||||
return "refuse"
|
||||
} else {
|
||||
return "pending"
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
this.current = e.detail.current;
|
||||
},
|
||||
updateMake() {
|
||||
uni.navigateTo({
|
||||
url: `./reservation?item=${JSON.stringify(this.detail)}`
|
||||
})
|
||||
},
|
||||
cancelMake() {
|
||||
uni.showModal({
|
||||
title: "确定取消预约吗?",
|
||||
success: async (bool) => {
|
||||
if (bool.confirm) {
|
||||
let res = await Deleteid(this.detail.rtId)
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: "取消成功"
|
||||
})
|
||||
toBackPage(500)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
finish() {
|
||||
this.$refs.popup.open("center")
|
||||
},
|
||||
uploadSceneImg() {
|
||||
uploadImg('/common/upload', this.rwPicture, this.tempSceneImgs, baseUrl, (error, result) => {
|
||||
if (!error) {
|
||||
this.rwPicture = result.photo
|
||||
}
|
||||
});
|
||||
},
|
||||
onRemoveSceneImg(index, path) {
|
||||
removeImg(index, path, this.rwPicture, this.tempSceneImgs, baseUrl, (error, result) => {
|
||||
if (!error) {
|
||||
this.rwPicture = result.photo
|
||||
}
|
||||
});
|
||||
},
|
||||
previewImg(imgs) {
|
||||
previewImg(imgs);
|
||||
},
|
||||
submit() {
|
||||
if (this.rwPicture == "") {
|
||||
uni.showToast({
|
||||
title: "请上传使用图片",
|
||||
icon: "none"
|
||||
})
|
||||
return;
|
||||
}
|
||||
uni.showModal({
|
||||
title: "确定结束使用吗?",
|
||||
success: async (bool) => {
|
||||
if (bool.confirm) {
|
||||
this.submitlist.rtImgs = this.rwPicture;
|
||||
this.submitlist.rtId = this.detail.rtId;
|
||||
this.submitlist.rtState = 2;
|
||||
// this.submitlist.auditStatus=3
|
||||
this.submitlist.staffOneStopRoomOpeningHoursList = this.detail.staffOneStopRoomOpeningHoursList
|
||||
console.log(this.submitlist)
|
||||
let res = await Update(this.submitlist)
|
||||
this.$refs.popup.close()
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: "提交成功"
|
||||
})
|
||||
}
|
||||
toBackPage(500)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async getDetail() {
|
||||
let res = await getDetailList(this.rtId);
|
||||
if (res.code == 200) {
|
||||
this.detail = res.data;
|
||||
var split=[]
|
||||
if(res.data.staffOneStopRoom[0].roomImgs!=null){
|
||||
split = res.data.staffOneStopRoom[0].roomImgs.split(",")
|
||||
}
|
||||
this.swiperList = split
|
||||
}
|
||||
console.log(res)
|
||||
},
|
||||
async getstate() {
|
||||
let res = await getDicts('rt_fu_audit_au_status')
|
||||
this.auStatelist = res.data
|
||||
},
|
||||
async getRtstate() {
|
||||
let res = await getDicts('routine_rtfureservation_rt_state')
|
||||
this.rtstatelist = res.data
|
||||
},
|
||||
},
|
||||
onLoad(option) {
|
||||
this.rtId = option.rtId
|
||||
this.getstate()
|
||||
this.getRtstate()
|
||||
this.getDetail()
|
||||
},
|
||||
onShow() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
background-color: rgba(244, 244, 244, .6);
|
||||
|
||||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.swiper-item {
|
||||
border-radius: 16rpx;
|
||||
height: 600rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0rpx 40rpx;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: center;
|
||||
|
||||
.title-a {
|
||||
display: flex;
|
||||
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
font-family: PingFang SC;
|
||||
}
|
||||
|
||||
.open-up {
|
||||
width: 80rpx;
|
||||
height: 32rpx;
|
||||
background-color: #E7FAF0;
|
||||
border: 1px #D0F5E0 solid;
|
||||
margin-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
margin-top: 4rpx;
|
||||
text-align: center;
|
||||
margin-top: 6px;
|
||||
color: #71E2A3;
|
||||
}
|
||||
}
|
||||
|
||||
.title-b {
|
||||
display: flex;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.introduction {
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
line-height: 35rpx;
|
||||
letter-spacing: 3rpx;
|
||||
font-size: 24rpx;
|
||||
color: #202020;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-zone {
|
||||
width: 100%;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
background-color: #ffffff;
|
||||
padding: 40rpx;
|
||||
margin-top: 40rpx;
|
||||
|
||||
&>view:nth-child(1) {
|
||||
font-size: 40rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
font-size: 32rpx;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 84rpx;
|
||||
|
||||
&>view {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
&>view>text:first-child {
|
||||
color: #9C9C9C;
|
||||
}
|
||||
}
|
||||
|
||||
.button-a {
|
||||
button {
|
||||
color: #FFFFFF;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
}
|
||||
|
||||
.button-b {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&>view {
|
||||
width: 46%;
|
||||
}
|
||||
|
||||
&>view:nth-child(2)>button {
|
||||
color: #FFFFFF;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
|
||||
&>view:nth-child(1)>button {
|
||||
color: #1890FF;
|
||||
border: 1px solid #1890FF !important;
|
||||
}
|
||||
}
|
||||
|
||||
.finish-popup {
|
||||
.content {
|
||||
background-color: white;
|
||||
border-radius: 16rpx;
|
||||
width: 90vw;
|
||||
|
||||
&>view:nth-child(-n+3) {
|
||||
margin: 40rpx 40rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 40rpx 0 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 38rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.upload-img {
|
||||
border: 1px solid #E1E1E1;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.tip {
|
||||
margin-top: 15rpx;
|
||||
color: #7a7a7a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img-list {
|
||||
border: 1px solid #D8D8D8;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.imgs {
|
||||
padding: 22rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.img {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 170rpx;
|
||||
margin-bottom: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-top: 1px solid #D8D8D8;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
background-color: #1890FF;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 0 0 16rpx 16rpx;
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
.pending {
|
||||
color: #FFBA00;
|
||||
}
|
||||
|
||||
.refuse {
|
||||
color: #FF9292;
|
||||
}
|
||||
|
||||
.agree {
|
||||
color: #71E2A3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
320
pages/OneStopCommunity/appointment/index.vue
Normal file
320
pages/OneStopCommunity/appointment/index.vue
Normal file
@@ -0,0 +1,320 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<view class="search">
|
||||
<uni-search-bar placeholder="请输入房间名" @clear="clear" @cancel="cancel" @confirm="search"
|
||||
v-model="queryParams.roomName">
|
||||
</uni-search-bar>
|
||||
</view>
|
||||
<view style="height: 50rpx;width: 100%;"></view>
|
||||
<scroll-view class="scroll-views" scroll-y="true" @scrolltolower="scrolltolower">
|
||||
<view class="list">
|
||||
<view class="box" v-for="(item,index) in list" :key="index" @click="detail(item)">
|
||||
<view>
|
||||
<view>
|
||||
<text>{{item.roomName}}</text>
|
||||
</view>
|
||||
<view v-for="(tab,index) in rolelist" :key="index" v-show="item.auditStatus==tab.dictValue"
|
||||
class="status">
|
||||
{{tab.dictLabel}}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view>
|
||||
<image mode="aspectFill"
|
||||
:src="basePath+item.staffOneStopRoom[0].roomImgs"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view><text>活动房：</text><text>{{item.rtTheme}}</text></view>
|
||||
<view><text>预约时间：</text><text>{{item.rtTime}} {{item.rtTimePeriod}}</text></view>
|
||||
<view>
|
||||
<text>用途：</text><text>{{item.rtPurpose}}</text>
|
||||
</view>
|
||||
<view><text>人数：</text><text>{{item.rtPeople}}人</text></view>
|
||||
<view style="flex: 1;text-align: end;"><text>{{item.rtCreattime}} 提交</text><text
|
||||
style="color: #1890FF;" @click="detail(item)">详情</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty" v-if="list.length==0&&!topLoading">
|
||||
<image src="@/static/empty.png" mode="widthFix"></image>
|
||||
暂时没有数据
|
||||
</view>
|
||||
<view class="loading-more-top" v-if="topLoading">
|
||||
<uni-load-more style="padding-top: 90px;" status="loading" />
|
||||
</view>
|
||||
<view class="loading-more" v-if="loading">
|
||||
<uni-load-more status="loading" />
|
||||
</view>
|
||||
<view class="no-more" v-if="!loading&&list.length!=0">
|
||||
到底啦~~
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getDicts
|
||||
} from '@/api/system/dict/data.js'
|
||||
import {
|
||||
listRoomReservation,
|
||||
getDetailList,
|
||||
listByUserName
|
||||
} from '@/api/OneStopCommunity/appointment.js'
|
||||
import {
|
||||
baseUrl
|
||||
} from "@/config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
basePath: baseUrl,
|
||||
list: [],
|
||||
loading: false,
|
||||
topLoading: true,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
roomName: ""
|
||||
},
|
||||
srclist: [],
|
||||
rolelist: []
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
formatPath(pathJSON) {
|
||||
if (pathJSON.indexOf(',') !== -1) {
|
||||
let arr = pathJSON.split(',');
|
||||
return arr[0]
|
||||
}else{
|
||||
return pathJSON;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel(res) {
|
||||
this.queryParams.roomName = ""
|
||||
this.getlist()
|
||||
},
|
||||
clear(res) {
|
||||
this.queryParams.roomName = ""
|
||||
this.getlist()
|
||||
},
|
||||
async getlist() {
|
||||
let res = await listByUserName(this.queryParams)
|
||||
var arr = res.rows
|
||||
for (var i = 0; i < res.rows.length; i++) {
|
||||
if(res.rows[i].staffOneStopRoom[0].roomImgs!=null){
|
||||
var split = res.rows[i].staffOneStopRoom[0].roomImgs.split(",")
|
||||
arr[i].staffOneStopRoom[0].roomImgs=split[0]
|
||||
}else{
|
||||
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
if (this.queryParams.pageNum == 1) {
|
||||
this.list = arr; // 如果是第一页，直接显示新数据
|
||||
} else {
|
||||
this.list = this.list.concat(arr); // 否则追加新数据到列表中
|
||||
}
|
||||
this.totalPages = Math.ceil(res.total / this.queryParams.pageSize);
|
||||
this.topLoading = false;
|
||||
// console.log(res)
|
||||
},
|
||||
detail(item) {
|
||||
uni.navigateTo({
|
||||
url: `detail?rtId=${item.rtId}`
|
||||
})
|
||||
},
|
||||
search() {
|
||||
this.getlist()
|
||||
},
|
||||
scrolltolower() {
|
||||
if (this.queryParams.pageNum < this.totalPages) {
|
||||
this.queryParams.pageNum++;
|
||||
this.loading = true;
|
||||
setTimeout(() => {
|
||||
//请求参数
|
||||
this.getlist()
|
||||
}, 1000)
|
||||
} else {
|
||||
|
||||
}
|
||||
},
|
||||
async getrole() {
|
||||
let res = await getDicts('rt_fu_audit_au_status')
|
||||
this.rolelist = res.data
|
||||
console.log(res.data)
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getlist();
|
||||
this.getrole();
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index {
|
||||
min-height: 100vh;
|
||||
background-color: #F5F5F7;
|
||||
// padding: 40rpx;
|
||||
|
||||
.search {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
top: 80rpx;
|
||||
background-color: #F5F5F7;
|
||||
|
||||
/deep/ .uni-searchbar__box {
|
||||
background-color: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-views {
|
||||
height: calc(100vh - 10px);
|
||||
|
||||
.list {
|
||||
padding: 24rpx;
|
||||
|
||||
.box {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
border-radius: 16rpx;
|
||||
position: relative;
|
||||
padding: 30rpx 20rpx 20rpx 20rpx;
|
||||
margin-top: 40rpx;
|
||||
|
||||
&>view:nth-child(1) {
|
||||
&>view:nth-child(1) {
|
||||
text {
|
||||
font-size: 38rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
width: 20%;
|
||||
height: 56rpx;
|
||||
line-height: 56rpx;
|
||||
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
background-color: #FFF8E6;
|
||||
border: 1px solid #FFE399;
|
||||
color: #FFBA00;
|
||||
}
|
||||
|
||||
&>view:nth-child(3) {
|
||||
background-color: #e7faf0;
|
||||
border: 1px solid #D0F5E0;
|
||||
color: #71E2A3;
|
||||
}
|
||||
|
||||
&>view:nth-child(4) {
|
||||
background-color: #FFDBDB;
|
||||
border: 1px solid #FFEDED;
|
||||
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
||||
color: #FF9292;
|
||||
}
|
||||
&>view:nth-child(5) {
|
||||
background-color: #ebebec;
|
||||
border: 1px solid #e9e9eb;
|
||||
border-radius: 0rpx 16rpx 0rpx 16rpx;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
width: 100%;
|
||||
height: 334rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40rpx;
|
||||
|
||||
&>view:nth-child(1) {
|
||||
width: 45%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 334rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
width: 52%;
|
||||
height: 334rpx;
|
||||
line-height: 50rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-start;
|
||||
font-size: 26rpx;
|
||||
|
||||
&>view {
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&>view:last-child {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&>view>text:first-child {
|
||||
color: #9C9C9C;
|
||||
}
|
||||
|
||||
&>view>text:last-child {
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
color: gray;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 200rpx;
|
||||
color: #9E9E9E;
|
||||
font-size: 36rpx;
|
||||
|
||||
image {
|
||||
width: 250rpx;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
453
pages/OneStopCommunity/appointment/reservation.vue
Normal file
453
pages/OneStopCommunity/appointment/reservation.vue
Normal file
@@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<view class="reservation">
|
||||
<view style="padding: 40rpx;">
|
||||
<form>
|
||||
<view class="form-item">
|
||||
<label>功能房</label>
|
||||
<input type="text" v-model="list.roomName" disabled placeholder="请输入"
|
||||
placeholder-class="input-placeholder" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>主题</label>
|
||||
<input type="text" v-model="formData.rtTheme" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>申请人</label>
|
||||
<input type="text" v-model="formData.rtCreatRole" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>使用部门/学院</label>
|
||||
<input type="text" v-model="formData.rtDepar" placeholder="请输入"
|
||||
placeholder-class="input-placeholder" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>参与人数</label>
|
||||
<input type="number" v-model="formData.rtPeople"
|
||||
:placeholder="'当前功能房最大人数为'+list.staffOneStopRoom[0].roomCapacity+'人'"
|
||||
placeholder-class="input-placeholder" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>预约用途</label>
|
||||
<picker range-key="dictLabel" :value="rangeIndex" :range="Reserveduse" @change="classChange">
|
||||
<view class="uni-input">
|
||||
<text v-if="Reserveduse.length" class="val">{{Reserveduse[rangeIndex].dictLabel}}</text>
|
||||
<uni-icons type="down" size="16" color="#202020"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<label>人员类型</label>
|
||||
<picker mode="multiSelector" :value="typeValues" :range="rolelist" @change="typeChange">
|
||||
<view class="uni-input">
|
||||
<!-- 显示所有选中的值 -->
|
||||
<text v-if="typeValues.length" class="val">
|
||||
{{ typeValues.map(value => rolelist.find(item => item.dictLabel === value).dictLabel).join(', ') }}
|
||||
</text>
|
||||
<uni-icons type="down" size="16" color="#202020"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
<view class="time-zone">
|
||||
<view>
|
||||
<view>
|
||||
<text>开放时间</text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="color: red;">*</text>
|
||||
<text>请点击下方时间段进行预约确认</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-for="(item,index) in slotslist" :key="index">
|
||||
<button @click="make(item,index)" :disabled="item.isOccupy==1"
|
||||
:class="timeindex==index?'active':'dark'">{{item.openingHours}}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<text>使用事项：</text>
|
||||
<view>
|
||||
<text>{{list.roomMatter}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<button v-if="slotslist.length!=0" type="primary" :disabled="isSubmitting" class="submit-btn"
|
||||
@tap="onSubmit">提交</button>
|
||||
<button v-else type="primary" :disabled="true" class="submit-btn">当前功能房时间未开放</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
selectRtFuReservationTime,
|
||||
updateRoomReservation,
|
||||
addRoomReservation
|
||||
} from '@/api/OneStopCommunity/room.js'
|
||||
import {
|
||||
getDetailList,
|
||||
Update
|
||||
} from '@/api/OneStopCommunity/appointment.js'
|
||||
import {
|
||||
getDicts
|
||||
} from '@/api/system/dict/data.js'
|
||||
import {
|
||||
toBackPage
|
||||
} from "@/utils/toBack.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isSubmitting: false, //表单提交标志位
|
||||
timeindex: null,
|
||||
formData: {
|
||||
rtTheme: "",
|
||||
rtRole: "",
|
||||
rtPurpose: "",
|
||||
rtPeople: "",
|
||||
rtTimePeriod: "",
|
||||
rtCreatRole: "",
|
||||
rtDepar: "",
|
||||
roomName: "",
|
||||
|
||||
},
|
||||
rangeIndex: 0,
|
||||
typeIndex: 0,
|
||||
roomNo: "",
|
||||
rtTime: "",
|
||||
list: {},
|
||||
slotslist: [],
|
||||
Reserveduse: [],
|
||||
rolelist: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
classChange(e) {
|
||||
this.rangeIndex = e.detail.value;
|
||||
},
|
||||
typeChange(e) {
|
||||
this.typeIndex = e.detail.value;
|
||||
},
|
||||
onSubmit() {
|
||||
this.isSubmitting = true; // 设置为正在提交
|
||||
if (this.timeindex == null) {
|
||||
uni.showToast({
|
||||
title: "请填写完整内容！",
|
||||
icon: 'none' // 根据需要设置图标
|
||||
});
|
||||
this.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
this.formData.rtPurpose = this.Reserveduse[this.rangeIndex].dictLabel;
|
||||
this.formData.rtRole = this.rolelist[this.typeIndex].dictLabel;
|
||||
this.formData.roomNo = this.list.roomNo
|
||||
var arr = this.list.rtTimePeriod.split(" ")
|
||||
this.formData.rtTime = this.list.rtTime
|
||||
this.formData.rtTimePeriod = this.slotslist[this.timeindex].openingHours
|
||||
this.formData.roomName = this.list.roomName
|
||||
this.formData.rtNo = this.slotslist[this.timeindex].rtNo
|
||||
this.formData.staffOneStopRoomOpeningHoursList = this.list.staffOneStopRoomOpeningHoursList
|
||||
console.log(this.formData)
|
||||
if (parseInt(this.formData.rtPeople) <= 0) {
|
||||
uni.showToast({
|
||||
title: "功能房参与人数不能小于0！",
|
||||
icon: 'none' // 根据需要设置图标
|
||||
});
|
||||
this.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
if (parseInt(this.formData.rtPeople) > parseInt(this.list.staffOneStopRoom[0].roomCapacity)) {
|
||||
uni.showToast({
|
||||
title: "功能房最大人数为" + this.list.staffOneStopRoom[0].roomCapacity + "！",
|
||||
icon: 'none' // 根据需要设置图标
|
||||
});
|
||||
this.isSubmitting = false;
|
||||
return;
|
||||
}
|
||||
for (let var2 in this.formData) {
|
||||
if (this.formData[var2] == null || this.formData[var2] == '') {
|
||||
uni.showToast({
|
||||
title: "请填写完整内容！",
|
||||
icon: 'none' // 根据需要设置图标
|
||||
});
|
||||
this.isSubmitting = false;
|
||||
return; // 停止执行后续操作
|
||||
}
|
||||
}
|
||||
this.add()
|
||||
},
|
||||
make(item, index) {
|
||||
// this.formData.rtYuyue = item
|
||||
this.timeindex = index
|
||||
},
|
||||
async getlist() {
|
||||
let obj = {
|
||||
roomNo: this.list.roomNo,
|
||||
rtTime: this.list.rtTime
|
||||
}
|
||||
// console.log(obj)
|
||||
let res = await selectRtFuReservationTime(obj)
|
||||
console.log(res)
|
||||
this.slotslist = res.data
|
||||
},
|
||||
async getReserved() {
|
||||
let res = await getDicts('routine_rtfureservations_rt_purpose')
|
||||
this.Reserveduse = res.data
|
||||
},
|
||||
async getrole() {
|
||||
let res = await getDicts('routine_rtfureservation_rt_role')
|
||||
this.rolelist = res.data
|
||||
},
|
||||
async add() {
|
||||
this.formData.rtId = this.list.rtId
|
||||
this.formData.auditStatus = 0
|
||||
this.formData.rtState = 0
|
||||
let res = await Update(this.formData)
|
||||
console.log(res)
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
title: "提交成功"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: "../appointment/index"
|
||||
})
|
||||
}, 1000)
|
||||
this.isSubmitting = false;
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "已被预约",
|
||||
icon: 'error'
|
||||
})
|
||||
this.isSubmitting = false;
|
||||
}
|
||||
},
|
||||
async getDetail() {
|
||||
let res = await getDetailList(this.list.rtId);
|
||||
if (res.code == 200) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
},
|
||||
},
|
||||
onLoad(option) {
|
||||
this.list = JSON.parse(option.item)
|
||||
console.log(this.list)
|
||||
this.formData.rtPurpose = this.list.rtDepar;
|
||||
this.formData.rtRole = this.list.rtRole;
|
||||
this.formData.roomName = this.list.roomName
|
||||
this.formData.rtTheme = this.list.rtTheme
|
||||
this.formData.rtCreatRole = this.list.rtCreatRole
|
||||
this.formData.rtDepar = this.list.rtDepar
|
||||
this.formData.rtPeople = this.list.rtPeople
|
||||
this.getlist()
|
||||
this.getReserved()
|
||||
this.getrole()
|
||||
this.getDetail()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reservation {
|
||||
background-color: rgba(244, 244, 244, .6);
|
||||
|
||||
.form-item {
|
||||
padding: 22rpx 40rpx;
|
||||
background-color: white;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
|
||||
.uni-icons {
|
||||
opacity: .5;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: 20rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid #E1E1E1;
|
||||
border-radius: 10rpx;
|
||||
height: 70rpx;
|
||||
padding-left: 30rpx;
|
||||
|
||||
.input-placeholder {
|
||||
color: #b6b6b6;
|
||||
}
|
||||
}
|
||||
|
||||
picker {
|
||||
border: 1px solid #E1E1E1;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.uni-input {
|
||||
display: flex;
|
||||
color: #797979;
|
||||
|
||||
.val {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-img {
|
||||
border: 1px solid #E1E1E1;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
.tip {
|
||||
margin-top: 15rpx;
|
||||
color: #7a7a7a;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.img-list {
|
||||
border: 1px solid #D8D8D8;
|
||||
border-radius: 20rpx;
|
||||
|
||||
.imgs {
|
||||
padding: 22rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.img {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 170rpx;
|
||||
margin-bottom: 15rpx;
|
||||
margin-right: 15rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.remove {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-top: 1px solid #D8D8D8;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-zone {
|
||||
width: 100%;
|
||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||
background-color: #ffffff;
|
||||
padding: 40rpx;
|
||||
|
||||
// margin-top: 10rpx;
|
||||
&>view:nth-child(1) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 65rpx;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
&>view:nth-child(1) {
|
||||
text {
|
||||
font-size: 40rpx;
|
||||
font-weight: 550;
|
||||
}
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
&>text:nth-child(2) {
|
||||
font-size: 24rpx;
|
||||
color: #202020;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>view:nth-child(2) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-content: flex-start;
|
||||
|
||||
view {
|
||||
width: 30%;
|
||||
margin: 10rpx;
|
||||
|
||||
button {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
color: #C1CCDF;
|
||||
background-color: rgba(234, 241, 255, .8);
|
||||
border-radius: 20rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.active {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border: 1px #1890FF solid;
|
||||
background-color: #f9fbfc;
|
||||
color: #ffffff;
|
||||
background-color: #1890FF;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.dark {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border: 1px #1890FF solid;
|
||||
background-color: #f9fbfc;
|
||||
color: #1890FF;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>view:nth-child(3) {
|
||||
margin-top: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(32, 32, 32, .5);
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user