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> |