301 lines
6.7 KiB
Vue
301 lines
6.7 KiB
Vue
|
<template>
|
|||
|
|
<view class="bed">
|
|||
|
|
<!-- <view class="location">
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="item" v-for="(item,index) in bedList[0]" :key="index">
|
|||
|
|
<image src="../../static/icon/bed-choice.png" mode="aspectFit"></image>
|
|||
|
|
<text>{{item}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text style="color: #808080;" class="aisle">过道</text>
|
|||
|
|
<view class="left">
|
|||
|
|
<view class="item" v-for="(item,index) in bedList[1]" :key="index">
|
|||
|
|
<image src="../../static/icon/bed-choice-right.png" mode="aspectFit"></image>
|
|||
|
|
<text>{{item}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- <view class="middle">
|
|||
|
|
<text>床位图示意</text>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 房间信息 -->
|
|||
|
|
<view class="dormitory-info">
|
|||
|
|
<text style="font-size: 36rpx; color: #131313;">{{roomName}}</text>
|
|||
|
|
<br>
|
|||
|
|
<!-- <text style="color: #808080; font-size: 28rpx;">南校区/学生公寓一/9层</text> -->
|
|||
|
|
</view>
|
|||
|
|
<!-- 房间选择 -->
|
|||
|
|
<view class="dormitory-choose">
|
|||
|
|
<view :class="!item.state?'item':'item-selected'" :id="activeIndex == index?'dormitory-choose-active':''"
|
|||
|
|
v-for="(item,index) in bedStateList" :key="index" @click="chooseDormitory(item)">
|
|||
|
|
<text>{{item.bedPosition+"（"+item.name+"）"}}</text><br />
|
|||
|
|
<text style="position: relative;top: -130rpx;">{{item.is_own ? "(我的床位)" : ""}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- <view style="margin-top: 700rpx;">
|
|||
|
|
<u-button text="确定" :disabled="disabledState" type="primary" @click="rightBed"></u-button>
|
|||
|
|
</view> -->
|
|||
|
|
<u-toast ref="uToast" @show="showToast"></u-toast>
|
|||
|
|
|
|||
|
|
<!-- 提示窗示例 -->
|
|||
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|||
|
|
<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="真的要取消选择床位吗"
|
|||
|
|
@confirm="dialogConfirm"></uni-popup-dialog>
|
|||
|
|
</uni-popup>
|
|||
|
|
|
|||
|
|
<!-- 提示信息弹窗 -->
|
|||
|
|
<uni-popup ref="message" type="message">
|
|||
|
|
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
|||
|
|
</uni-popup>
|
|||
|
|
|
|||
|
|
<zero-loading v-if="loading"></zero-loading>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
chooseBed,
|
|||
|
|
getBedsInfoByDormId,
|
|||
|
|
cancelOwnBed
|
|||
|
|
} from "@/api/dormApi.js";
|
|||
|
|
import {
|
|||
|
|
isEmpty
|
|||
|
|
} from "@/api/helpFunc.js";
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
roomName: "",
|
|||
|
|
bedStateList: [],
|
|||
|
|
// 选择状态
|
|||
|
|
activeIndex: -1,
|
|||
|
|
disabledState: true,
|
|||
|
|
toastParams: {
|
|||
|
|
message: "该床位已被选中",
|
|||
|
|
type: "error",
|
|||
|
|
duration: 1000
|
|||
|
|
},
|
|||
|
|
dorm_id: null,
|
|||
|
|
|
|||
|
|
msgType: 'success',
|
|||
|
|
messageText: '这是一条成功提示',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async dialogConfirm() {
|
|||
|
|
console.log('点击确认')
|
|||
|
|
this.loading = true;
|
|||
|
|
let res = await cancelOwnBed();
|
|||
|
|
if(res.code == 200){
|
|||
|
|
this.toastParams.message = res.msg;
|
|||
|
|
this.toastParams.type = "success";
|
|||
|
|
}else{
|
|||
|
|
this.toastParams.message = res.msg;
|
|||
|
|
this.toastParams.type = "error";
|
|||
|
|
}
|
|||
|
|
this.showToast();
|
|||
|
|
this.getBedInfo();
|
|||
|
|
this.loading = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
async getBedInfo() {
|
|||
|
|
this.loading = true;
|
|||
|
|
let res = await getBedsInfoByDormId(this.dorm_id);
|
|||
|
|
this.loading = false;
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
let data = res.data;
|
|||
|
|
let temp = [];
|
|||
|
|
let my_stu_no = uni.getStorageSync("stu_no");
|
|||
|
|
console.log(data);
|
|||
|
|
data.map(x => {
|
|||
|
|
temp.push({
|
|||
|
|
bedPosition: x.BedCode + "号床",
|
|||
|
|
name: x.XSXM == null ? "空床位" : x.XSXM,
|
|||
|
|
state: x.hasStudent,
|
|||
|
|
id: x.id,
|
|||
|
|
xh: my_stu_no,
|
|||
|
|
is_own: my_stu_no == x.XH
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
this.bedStateList = [...temp];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async chooseDormitory(v) {
|
|||
|
|
console.log(v)
|
|||
|
|
if (v.is_own) {
|
|||
|
|
this.loading = false;
|
|||
|
|
this.msgType = "info";
|
|||
|
|
this.$refs.alertDialog.open()
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (v.state) {
|
|||
|
|
this.message="该床位已被选中";
|
|||
|
|
this.type="error";
|
|||
|
|
return this.showToast();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loading = true;
|
|||
|
|
|
|||
|
|
let sdata = {
|
|||
|
|
bedId: v.id,
|
|||
|
|
dormitoryId: this.dorm_id
|
|||
|
|
};
|
|||
|
|
let res = await chooseBed(sdata);
|
|||
|
|
this.loading = false;
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.toastParams.message = "选择成功";
|
|||
|
|
this.toastParams.type = "success";
|
|||
|
|
this.showToast();
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: "/pages/pay/index"
|
|||
|
|
})
|
|||
|
|
}, 1000);
|
|||
|
|
} else {
|
|||
|
|
this.getBedInfo();
|
|||
|
|
this.toastParams.message = "换个床位吧";
|
|||
|
|
this.toastParams.type = "error";
|
|||
|
|
this.showToast();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
rightBed() {
|
|||
|
|
let params = {
|
|||
|
|
type: "loading",
|
|||
|
|
message: "正在确认",
|
|||
|
|
}
|
|||
|
|
this.showToast(params)
|
|||
|
|
},
|
|||
|
|
showToast(params) {
|
|||
|
|
this.$refs.uToast.show({
|
|||
|
|
...this.toastParams,
|
|||
|
|
...params
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(value) {
|
|||
|
|
let data = JSON.parse(value.param);
|
|||
|
|
this.roomName = data.name + "-" + data.bedNum + "人间";
|
|||
|
|
this.dorm_id = data.id;
|
|||
|
|
this.getBedInfo();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
$text-color: #808080;
|
|||
|
|
|
|||
|
|
.bed {
|
|||
|
|
padding: 20rpx;
|
|||
|
|
padding-bottom: 50px;
|
|||
|
|
|
|||
|
|
// 床位的位置
|
|||
|
|
.location {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 600rpx;
|
|||
|
|
margin: 40rpx 0;
|
|||
|
|
|
|||
|
|
.aisle {
|
|||
|
|
writing-mode: vertical-rl;
|
|||
|
|
/* 设置文字垂直排列方向为从上到下 */
|
|||
|
|
text-orientation: upright;
|
|||
|
|
/* 设置文字方向为直立 */
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
border-right: 1px solid #E9E9E9;
|
|||
|
|
padding: 0 90rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
border-left: 1px solid #E9E9E9;
|
|||
|
|
padding: 0 90rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right,
|
|||
|
|
.left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
height: 600rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
height: 140rpx;
|
|||
|
|
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
display: block;
|
|||
|
|
color: $text-color;
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 70rpx;
|
|||
|
|
height: 50rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.middle {
|
|||
|
|
text-align: center;
|
|||
|
|
color: $text-color;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-bottom: 1px solid #E2E2E2;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 房间信息
|
|||
|
|
.dormitory-info {
|
|||
|
|
padding-bottom: 30rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
border-bottom: 1px solid #E9E9E9;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#dormitory-choose-active {
|
|||
|
|
background-color: #4A90E2;
|
|||
|
|
color: white;
|
|||
|
|
transition: 200ms linear;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 宿舍选择
|
|||
|
|
.dormitory-choose {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
|
|||
|
|
.item-selected {
|
|||
|
|
background-color: #F4F4F4;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-selected,
|
|||
|
|
.item {
|
|||
|
|
width: 346rpx;
|
|||
|
|
height: 160rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 160rpx;
|
|||
|
|
margin-bottom: 25rpx;
|
|||
|
|
transition: 200ms ease-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
background-color: #F2F8FF;
|
|||
|
|
color: #4A90E2;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|