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 @@ ...@@ -56,26 +56,37 @@
</view> --> </view> -->
<view v-for="(item,index) in roomVoList" :key="index" class="list-item-box" <view v-for="(item,index) in roomVoList" :key="index" class="list-item-box"
@tap="onNavToOrder(item)"> @tap="onNavToOrder(item)">
<view class="itemRow listStyle"> <view class="listStyle">
<view class="relative part-top"> <view class="relative part-top">
<image class="room-img" :src="item.images[0]" mode="aspectFill" <image class="room-img" :src="item.images[0]" mode="aspectFill"
@tap.stop="onPreview(item.images)"></image> @tap.stop="onPreview(item.images)"></image>
<view class="absolute"> <view class="absolute">
<view class='status-bg bg-gray' v-if="item.roomStat >= 3"> <view class='status-bg bg-gray' v-if="item.roomStat >= 3">
维护 <view class="stauts-tag">
<text>维护</text>
</view>
</view> </view>
<view class='status-bg bg-red' v-else-if="item.isDirtyRoom >= 1"> <view class='status-bg bg-red' v-else-if="item.isDirtyRoom >= 1">
未保洁 <view class="stauts-tag">
<text>未保洁</text>
</view>
</view> </view>
<view v-else-if="item.recordsStatus>=0" class="status-bg bg-red"> <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>
<view v-else class='status-bg' <view v-else class='status-bg'
:class="item.status==0?'bg-green':item.status==1?'bg-pink':'bg-blue'"> :class="item.status==0?'bg-green':item.status==1?'bg-pink':'bg-blue'">
{{roomStatusEnum[item.status]}} <view class="stauts-tag">
{{item.recordsTime? '('+item.recordsTime+'结束)' : ''}} <text>{{roomStatusEnum[item.status]}}</text>
</view>
<view v-if="item.recordsTime" class="room-use">
<text>占用结束时间</text>
<text>{{item.recordsTime}}</text>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -120,17 +131,33 @@ ...@@ -120,17 +131,33 @@
<view class="item-Go"> <view class="item-Go">
<view class="flex-row room-type"> <view class="flex-row room-type">
<view class="flex-col flex-1"> <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"> <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-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>
</view> </view>
<view class="confirm"> <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> </view>
</view> </view>
...@@ -466,9 +493,11 @@ ...@@ -466,9 +493,11 @@
} else if (item.status === 0) { } else if (item.status === 0) {
sortNum = 1 sortNum = 1
} }
return { return {
...item, ...item,
sortNum, sortNum,
roomLabelList: item.roomLabelList && item.roomLabelList.length? item.roomLabelList.filter(roomVal =>roomVal.openPack ==1):[],
recordsTime: item.recordsTime ? moment(item.recordsTime).format("HH:mm") : recordsTime: item.recordsTime ? moment(item.recordsTime).format("HH:mm") :
"", "",
facilities: item.facilities ? item.facilities.split(",") : [], facilities: item.facilities ? item.facilities.split(",") : [],
...@@ -1057,8 +1086,7 @@ ...@@ -1057,8 +1086,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 240rpx; width: 240rpx;
min-height: 300upx; min-height: 260upx;
border-radius: 12upx;
overflow: hidden; overflow: hidden;
.room-img { .room-img {
...@@ -1071,34 +1099,75 @@ ...@@ -1071,34 +1099,75 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
display: flex; height: 100%;
justify-content: center;
align-items: center;
height: 60upx;
.status-bg { .status-bg {
display: flex; position: relative;
justify-content: center;
align-items: center;
width: 100%; width: 100%;
height: 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 { .bg-gray {
background: rgba(136, 136, 136, 0.96); border-color: #9999A3;
color: #ffffff; .stauts-tag{
background: #9999A3;
}
} }
.bg-pink { .bg-pink {
background: rgba(230, 58, 159, 0.8); border-color: #e51771;
.stauts-tag{
background: #e51771;
}
} }
.bg-green { .bg-green {
background: rgba(57, 181, 74, 0.8); border-color: #02F6FF;
.stauts-tag{
background: #02F6FF;
}
} }
.bg-red { .bg-red {
background: rgba(229, 77, 66, 0.8); border-color: #EE8A1A;
.stauts-tag{
background: #EE8A1A;
}
} }
} }
} }
...@@ -1279,24 +1348,36 @@ ...@@ -1279,24 +1348,36 @@
} }
.confirm { .confirm {
.cu-btn { width: 100upx;
padding: 8upx 20upx; .confirm-text {
height: 52rpx; display: flex;
background: linear-gradient(97deg, #E5268B, #FD5661); justify-content: center;
color: #ffffff; align-items: center;
letter-spacing: 4upx; width: 100%;
font-size: 30upx; height: 60upx;
text-align: center; background: linear-gradient(180deg, #E03997 18%, #FF375D 99%);
opacity: 0.95; border-radius: 8upx 8upx 18upx 8upx;
border-radius: 12rpx; text{
margin-right: 10upx; font-weight: 600;
font-size: 30rpx;
color: #FFFFFF;
letter-spacing: 4upx;
}
} }
.confirm-status{
.text-lg { display: flex;
font-size: 24rpx; justify-content: center;
font-weight: bolder; width: 100%;
margin-bottom: 4upx; border: 4upx solid #E40583;
margin-right: 4upx; 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