新生报到移动端V1.0
This commit is contained in:
301
pages/bedChoice/bedChoice.vue
Normal file
301
pages/bedChoice/bedChoice.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user