Skip to content

G
gxpt_wechat
Commit 8f861dfe by zhangzhen
Options

首页优化

parent b62b1b0c
Showing with 123 additions and 42 deletions
pages/index/index.vue
......@@ -56,26 +56,37 @@
</view> -->
<view v-for="(item,index) in roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)">
<view class="itemRow listStyle">
<view class="listStyle">
<view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="aspectFill"
@tap.stop="onPreview(item.images)"></image>
<view class="absolute">
<view class='status-bg bg-gray' v-if="item.roomStat >= 3">
维护
<view class="stauts-tag">
<text>维护</text>
</view>
</view>
<view class='status-bg bg-red' v-else-if="item.isDirtyRoom >= 1">
未保洁
<view class="stauts-tag">
<text>未保洁</text>
</view>
</view>
<view v-else-if="item.recordsStatus>=0" class="status-bg bg-red">
{{recordsStatusEnum[item.recordsStatus]}}
<view class="stauts-tag">
<text>{{recordsStatusEnum[item.recordsStatus]}}</text>
</view>
</view>
<view v-else class='status-bg'
:class="item.status==0?'bg-green':item.status==1?'bg-pink':'bg-blue'">
{{roomStatusEnum[item.status]}}
{{item.recordsTime? '('+item.recordsTime+'结束)' : ''}}
<view class="stauts-tag">
<text>{{roomStatusEnum[item.status]}}</text>
</view>
<view v-if="item.recordsTime" class="room-use">
<text>占用结束时间</text>
<text>{{item.recordsTime}}</text>
</view>
</view>
</view>
</view>
......@@ -120,17 +131,33 @@
<view class="item-Go">
<view class="flex-row room-type">
<view class="flex-col flex-1">
<view v-for="(val,i) in item.packList" :key="i" v-if="i<2" class="item">
<view v-for="(val,i) in item.roomLabelList" :key="i" v-if="i<2" class="item">
<view class="part-2">
<text class="text-sm">{{val.duration}}小时套餐:</text>
<text class="text-sm">{{val.labelDuration}}小时套餐:</text>
<text class="text-red text-sm margin-left-sm">￥</text>
<text class="text-red text-bold text-xl">{{val.price}}</text>
<text class="text-red text-bold text-xl">{{val.packPrice}}</text>
</view>
</view>
</view>
<view class="confirm">
<button class="cu-btn">预定</button>
<view class="confirm-text">
<text>预定</text>
</view>
<view class="confirm-status">
<text v-if="item.roomStat >= 3">
维护
</text>
<text v-else-if="item.isDirtyRoom >= 1">
未保洁
</text>
<text v-else-if="item.recordsStatus>=0" >
{{recordsStatusEnum[item.recordsStatus]}}
</text>
<text v-else >
{{roomStatusEnum[item.status]}}
</text>
</view>
</view>
</view>
</view>
......@@ -466,9 +493,11 @@
} else if (item.status === 0) {
sortNum = 1
}
return {
...item,
sortNum,
roomLabelList: item.roomLabelList && item.roomLabelList.length? item.roomLabelList.filter(roomVal =>roomVal.openPack ==1):[],
recordsTime: item.recordsTime ? moment(item.recordsTime).format("HH:mm") :
"",
facilities: item.facilities ? item.facilities.split(",") : [],
......@@ -1057,8 +1086,7 @@
justify-content: center;
align-items: center;
width: 240rpx;
min-height: 300upx;
border-radius: 12upx;
min-height: 260upx;
overflow: hidden;
.room-img {
......@@ -1071,34 +1099,75 @@
left: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
height: 100%;
.status-bg {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
border: 2px solid #02F6FF;
background-color: transparent !important;
.stauts-tag{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 90upx;
padding: 2upx 0 6upx;
background: #02F6FF;
border-radius: 0 0 12upx 0 ;
z-index: 6;
text{
color: #ffffff;
font-size: 24rpx;
}
}
.room-use{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.2);
z-index: 2;
text{
color: #ffffff;
font-size: 24upx;
margin: 4upx 0;
}
}
}
.bg-gray {
background: rgba(136, 136, 136, 0.96);
color: #ffffff;
border-color: #9999A3;
.stauts-tag{
background: #9999A3;
}
}
.bg-pink {
background: rgba(230, 58, 159, 0.8);
border-color: #e51771;
.stauts-tag{
background: #e51771;
}
}
.bg-green {
background: rgba(57, 181, 74, 0.8);
border-color: #02F6FF;
.stauts-tag{
background: #02F6FF;
}
}
.bg-red {
background: rgba(229, 77, 66, 0.8);
border-color: #EE8A1A;
.stauts-tag{
background: #EE8A1A;
}
}
}
}
......@@ -1279,24 +1348,36 @@
}
.confirm {
.cu-btn {
padding: 8upx 20upx;
height: 52rpx;
background: linear-gradient(97deg, #E5268B, #FD5661);
color: #ffffff;
letter-spacing: 4upx;
font-size: 30upx;
text-align: center;
opacity: 0.95;
border-radius: 12rpx;
margin-right: 10upx;
width: 100upx;
.confirm-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 60upx;
background: linear-gradient(180deg, #E03997 18%, #FF375D 99%);
border-radius: 8upx 8upx 18upx 8upx;
text{
font-weight: 600;
font-size: 30rpx;
color: #FFFFFF;
letter-spacing: 4upx;
}
}
.text-lg {
font-size: 24rpx;
font-weight: bolder;
margin-bottom: 4upx;
margin-right: 4upx;
.confirm-status{
display: flex;
justify-content: center;
width: 100%;
border: 4upx solid #E40583;
border-top-color: transparent;
padding: 27upx 0 7upx;
border-radius: 0 0 10upx 10upx;
margin-top: -20upx;
text{
font-weight: 500;
font-size: 24rpx;
color: #F13A7A;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment