Skip to content

G
gxpt_wechat
Commit ae38097f by zhangzhen
Options

页面继续优化

parent f0ac0084
Showing with 154 additions and 65 deletions
components/module/f-navbar/f-navbar.vue
...@@ -179,10 +179,10 @@ export default { ...@@ -179,10 +179,10 @@ export default {
immediate: true, immediate: true,
handler (val) { handler (val) {
if(val == 5){ if(val == 5){
if (this.scrollTop > 160) { if (this.scrollTop > 180) {
this.transparentValue = 1; this.transparentValue = 1;
} else { } else {
this.transparentValue = this.scrollTop / 160; this.transparentValue = this.scrollTop / 180;
} }
} }
} }
...@@ -247,11 +247,11 @@ export default { ...@@ -247,11 +247,11 @@ export default {
}, },
pageScroll(e) { pageScroll(e) {
if (this.navbarType == 5) { if (this.navbarType == 5) {
if (e.scrollTop && e.scrollTop > 0) { if (e.scrollTop && e.scrollTop > 10) {
if (e.scrollTop > 160) { if (e.scrollTop > 180) {
this.transparentValue = 1; this.transparentValue = 1;
} else { } else {
this.transparentValue = e.scrollTop / 160; this.transparentValue = e.scrollTop / 180;
} }
} else { } else {
this.transparentValue = 0; this.transparentValue = 0;
......
pages/index/index.vue
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
<view class="flex-col part-bottom"> <view class="flex-col part-bottom">
<view class="flex-between room-title"> <view class="flex-between room-title">
<view class="room-name"> <view class="room-name">
<text>{{item.name}}</text> <text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text>
</view> </view>
<view class="price" @tap.stop="onNavToInfo(item)"> <view class="price" @tap.stop="onNavToInfo(item)">
<text>查看包厢</text> <text>查看包厢</text>
...@@ -211,6 +211,7 @@ ...@@ -211,6 +211,7 @@
} }
], ],
facilitieList: {}, facilitieList: {},
roomTypeEnum:{},
show: true, show: true,
timer: null timer: null
} }
...@@ -278,6 +279,7 @@ ...@@ -278,6 +279,7 @@
dicts = res.data.data; dicts = res.data.data;
uni.setStorageSync('dicts', JSON.stringify(res.data.data)) uni.setStorageSync('dicts', JSON.stringify(res.data.data))
this.facilitieList = getDictItem(dicts, "indoor_facilities"); this.facilitieList = getDictItem(dicts, "indoor_facilities");
this.roomTypeEnum = getDictItem(dicts, "store_room_type");
}) })
// } // }
}, },
...@@ -457,11 +459,13 @@ ...@@ -457,11 +459,13 @@
<style> <style>
page { page {
background-color: #FFFFFF; background-color: #f5f5f5;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.home { .home {
display: flex;
flex-direction: column;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
...@@ -469,17 +473,20 @@ ...@@ -469,17 +473,20 @@
.scroll-view { .scroll-view {
position: relative; position: relative;
display: flex;
flex: 1;
width: 100vw; width: 100vw;
height: 100%;
.content-box { .content-box {
position: absolute;
left: 0;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
width: 100%; // background: #f5f5f5;
min-height: 100%; // padding-bottom: 50px;
margin-bottom: 50px;
background: #f5f5f5;
} }
} }
...@@ -724,12 +731,8 @@ ...@@ -724,12 +731,8 @@
} }
.part-bottom { .part-bottom {
width: 620upx;
border: 6upx solid #E40583; border: 6upx solid #E40583;
border-radius: 0 0 36upx 36upx; border-radius: 0 0 36upx 36upx;
margin-top: -28upx;
padding-top: 28upx;
.room-title { .room-title {
padding: 20upx; padding: 20upx;
} }
...@@ -781,8 +784,12 @@ ...@@ -781,8 +784,12 @@
.facilitie-box { .facilitie-box {
display: flex; display: flex;
flex: 1;
flex-wrap: wrap; flex-wrap: wrap;
padding: 12rpx 0 12rpx 20rpx; padding: 12rpx 0 12rpx 20rpx;
.cu-tag{
}
} }
.location-box{ .location-box{
display: flex; display: flex;
...@@ -845,24 +852,23 @@ ...@@ -845,24 +852,23 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 260rpx; width: 200rpx;
height: 280upx; height: 280upx;
overflow: hidden; overflow: hidden;
.room-img{ .room-img{
height: 100%; width: inherit;
border-radius: 0 !important; height: 94%;
max-height: 240upx;
border-radius: 12rpx !important; border-radius: 12rpx !important;
} }
} }
.part-bottom{ .part-bottom{
width: initial; display: flex;
flex: 1;
border: 0 !important; border: 0 !important;
border-radius: 0rpx !important; border-radius: 0rpx !important;
margin-top: 0rpx !important;
padding-top: 0rpx !important;
padding-left: 20rpx; padding-left: 20rpx;
flex: right;
.room-title{ .room-title{
padding: 0 !important; padding: 0 !important;
display: flex; display: flex;
...@@ -991,7 +997,6 @@ ...@@ -991,7 +997,6 @@
} }
.confirm-box{ .confirm-box{
display: flex; display: flex;
flex: 1;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
......
pages/order/order.vue
...@@ -145,10 +145,9 @@ ...@@ -145,10 +145,9 @@
</view> </view>
</view> </view>
<view class="date-point-box"> <view class="date-point-box">
<view v-for="(item,k) in intervalList" :key="k" class="date-point-item"> <view v-for="(item,k) in intervalList" :key="k" class="date-point-item" @tap="onSelectDatePoint(item,k)">
<view class="date-point" <view class="date-point"
:class="item.status === 0?'free':item.status==1?'used': item.status==2?'checked':'error'"> :class="item.status === 0?'free':item.status==1?'used': item.status==2?'checked':'error'">
</view> </view>
<text class="text-gray">{{item.hour}}</text> <text class="text-gray">{{item.hour}}</text>
</view> </view>
...@@ -491,6 +490,9 @@ ...@@ -491,6 +490,9 @@
this.packageMode = this.roomInfo.packList this.packageMode = this.roomInfo.packList
this.index = 1; this.index = 1;
this.modeIndex = 0; this.modeIndex = 0;
}else{
this.index = 0;
this.orderTypeList = this.orderTypeList.filter(item=>item.type==1)
} }
this.onGetSortDistance() this.onGetSortDistance()
} }
...@@ -943,6 +945,27 @@ ...@@ -943,6 +945,27 @@
} }
}) })
}, },
onSelectDatePoint(val,i){
console.log(val,i)
if(i<24){
if(val.status ==1){
let mTime=moment(val.endHoldTime).format("mm")
console.log(mTime,"分钟数据")
if( mTime>= '59' ){
uni.showToast({
icon:'none',
title:'当前时段不可选'
})
}else{
this.startTime = `${i}:${mTime}`;
this.onSetEndTime()
}
}else{
this.startTime = `${i}:00`;
this.onSetEndTime()
}
}
},
// 将时间转换成完整日期 // 将时间转换成完整日期
onSetDateTime(startTime, endTime) { onSetDateTime(startTime, endTime) {
let obj = { let obj = {
......
pages/orderRecord/orderRecord.vue
...@@ -12,10 +12,31 @@ ...@@ -12,10 +12,31 @@
<view class="list-content"> <view class="list-content">
<view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)"> <view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view class="flex-between part-1"> <view class="flex-between part-1">
<text class="text-title text-bold text-xl">{{item.roomName||'房间名称'}}</text> <view class="flex-row store-name">
<text class="text-pink">{{orderStatusEnum[item.status]}}</text> <text class="cuIcon cuIcon-title text-pink"></text>
<text class="text-title text-bold text-xl">{{item.storeName||'门店名称'}}</text>
</view>
<text :class="item.status==1?'text-pink':item.status==0?'text-cyan':item.status==2?'text-gray':'text-red'">{{orderStatusEnum[item.status]}}</text>
</view> </view>
<view class="flex-row room-image-box">
<view class="img-box">
<image :src="item.roomImages[0]" mode="heightFix"></image>
</view>
<view class="flex-col">
<view class="flex-1 flex-col part-top">
<text class="text-title text-xl text-bold">{{item.roomName}}</text>
<text class="text-black margin-top">预约时长：{{Number(item.timeLong)}}小时</text>
</view>
<view class="flex-1 flex-row part-bottom">
<text>实付：</text>
<view class="flex-row">
<text class="text-pink text-bold">￥</text>
<text class="text-pink text-bold text-xxl">{{item.payPrice}}</text>
</view>
</view>
</view>
</view>
<view class="flex-row timeline"> <view class="flex-row timeline">
<view class="flex-col part-1"> <view class="flex-col part-1">
...@@ -64,16 +85,16 @@ ...@@ -64,16 +85,16 @@
</view> </view>
<view v-if="item.startDate" class="flex-between part-1"> <view v-if="item.startDate" class="flex-between part-1">
<text class="text-gray">开始时间:</text> <text class="text-gray">开始时间:</text>
<text class="text-title">{{item.startDate}}</text> <text class="text-title">{{item.startDate}}:00</text>
</view> </view>
<view v-if="item.endDate" class="flex-between part-1"> <view v-if="item.endDate" class="flex-between part-1">
<text class="text-gray">结束时间:</text> <text class="text-gray">结束时间:</text>
<text class="text-title">{{item.endDate}}</text> <text class="text-title">{{item.endDate}}:00</text>
</view> </view>
<view class="flex-between part-1"> <!-- <view class="flex-between part-1">
<text class="text-gray">订单总计:</text> <text class="text-gray">订单总计:</text>
<text class="text-pink text-bold">{{item.totalPrice}}元</text> <text class="text-pink text-bold">{{item.totalPrice}}元</text>
</view> </view> -->
</view> </view>
</view> </view>
</view> </view>
...@@ -178,10 +199,17 @@ import NoLogin from "@/components/noLogin/noLogin" ...@@ -178,10 +199,17 @@ import NoLogin from "@/components/noLogin/noLogin"
orderList(this.queryParams).then(res => { orderList(this.queryParams).then(res => {
uni.hideLoading() uni.hideLoading()
if (res.data.code == 200) { if (res.data.code == 200) {
let list =res.data.rows.map(item=>{
return {
...item,
roomImages:item.roomImages?item.roomImages.split(','):[]
}
});
if(this.queryParams.pageNum ==1){ if(this.queryParams.pageNum ==1){
this.list = res.data.rows this.list = list
}else{ }else{
this.list = [...this.list,...res.data.rows] this.list = [...this.list,...list]
} }
if(this.list.length < res.data.total){ if(this.list.length < res.data.total){
this.status = "loadmore" this.status = "loadmore"
...@@ -241,6 +269,35 @@ import NoLogin from "@/components/noLogin/noLogin" ...@@ -241,6 +269,35 @@ import NoLogin from "@/components/noLogin/noLogin"
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10upx; padding: 10upx;
.store-name{
align-items: center;
}
}
.room-image-box{
width: 100%;
height: 240upx;
.img-box{
width: 200upx;
height: 100%;
image{
height: 100%;
background-color: #f5f5f5;
border-radius: 20upx;
}
}
>.flex-col{
display: flex;
flex: 1;
height: 100%;
padding: 6upx 24upx;
.part-bottom{
align-items: flex-end;
padding-bottom: 8upx;
.flex-row{
align-items: flex-end;
}
}
}
} }
} }
} }
...@@ -261,9 +318,9 @@ import NoLogin from "@/components/noLogin/noLogin" ...@@ -261,9 +318,9 @@ import NoLogin from "@/components/noLogin/noLogin"
} }
.part-line{ .part-line{
height: 50upx; height: 50upx;
width: 2upx; width: 2px;
background-color: #999999; background-color: #f1f1f1;
margin-left: -1upx; margin-left: -1px;
} }
} }
.part-1{ .part-1{
......
pages/orderResult/orderResult.vue
<template> <template>
<view class="order-info-box"> <view class="order-info-box">
<f-navbar title="订单详情" bgColor="#e40583" fontColor="#ffffff"></f-navbar> <f-navbar title="订单详情" bgColor="#e40583" :font-size="32" fontColor="#ffffff"></f-navbar>
<view class="order-info-content"> <view class="order-info-content">
<view class="order-time"> <view class="order-time">
<view class="flex-between"> <view class="flex-between">
...@@ -22,43 +22,47 @@ ...@@ -22,43 +22,47 @@
<view class="flex-between title"> <view class="flex-between title">
<view class="flex-row"> <view class="flex-row">
<text class="cuIcon-titles text-pink text-xl"></text> <text class="cuIcon-titles text-pink text-xl"></text>
<text class="text-black text-xl text-bold">{{orderInfo.storeName || '门店名称'}}</text> <text class="text-black text-xl text-bold">【{{orderInfo.storeName || '门店名称'}}】</text>
</view> </view>
<button class="cu-btn line-pink" @tap="onNavToMap"> <button class="cu-btn round line-pink" @tap="onNavToMap">
<text>导航</text> <text>导航到店</text>
<image :src="assetsPath+'/map_icon.png'" mode="heightFix"></image> <!-- <image :src="assetsPath+'/map_icon.png'" mode="heightFix"></image> -->
</button> </button>
</view> </view>
<view class="flex-row"> <view class="flex-row">
<view class="part-img"> <view class="part-img">
<image :src="assetsPath+'/blank2.jpg'" mode="scaleToFill"></image> <image :src="hostUrl+orderInfo.roomImages[0]" mode="heightFix"></image>
</view> </view>
<view class="flex-1 flex-col"> <view class="flex-1 flex-col">
<view class="info"> <view class="info">
<text class="text-black text-lg">预约门店:{{orderInfo.storeName|| ''}}</text> <text class="text-title text-bold">预约包间：</text>
<text class="text-title ">{{orderInfo.roomName}}</text>
</view> </view>
<view class="info"> <view class="info">
<text class="text-black text-lg">下单时间:{{orderInfo.updateTime || orderInfo.createTime||'-'}}</text> <text class="text-title text-bold">下单时间：</text>
<text class="text-title ">{{orderInfo.updateTime || orderInfo.createTime||'-'}}</text>
</view> </view>
<view class="info"> <view class="info">
<text class="text-black text-lg">开始时间:{{orderInfo.preStartDate}}:00</text> <text class="text-title text-bold">开始时间：</text>
<text class="text-title ">{{orderInfo.preStartDate}}:00</text>
</view> </view>
<view class="info"> <view class="info">
<text class="text-black text-lg">结束时间:{{orderInfo.preEndDate}}:00</text> <text class="text-title text-bold">结束时间：</text>
<text class="text-title ">{{orderInfo.preEndDate}}:00</text>
</view> </view>
</view> </view>
</view> </view>
<view class="flex-between"> <view class="flex-between">
<text class="text-block text-lg">订单编号</text> <text class="text-gray ">订单编号</text>
<text class="text-block text-lg">{{orderInfo.orderNo}}</text> <text class="text-title ">{{orderInfo.orderNo}}</text>
</view> </view>
<view class="flex-between"> <view class="flex-between">
<text class="text-block text-lg">支付方式</text> <text class="text-gray">支付方式</text>
<text class="text-block text-lg">{{orderInfo.payType==1?'微信支付':'其他支付'}}</text> <text class="text-title">{{orderInfo.payType==1?'微信支付':'其他支付'}}</text>
</view> </view>
<view class="flex-between"> <view class="flex-between">
<text class="text-block text-lg">支付时间</text> <text class="text-gray">支付时间</text>
<text class="text-block text-lg">{{orderInfo.payTime||'-'}}</text> <text class="text-title">{{orderInfo.payTime||'-'}}</text>
</view> </view>
</view> </view>
...@@ -124,6 +128,7 @@ ...@@ -124,6 +128,7 @@
orderNo:'', orderNo:'',
orderInfo:{}, orderInfo:{},
assetsPath: config.assetsPath, assetsPath: config.assetsPath,
hostUrl:config.hostUrl
}; };
}, },
onLoad(option) { onLoad(option) {
...@@ -136,6 +141,7 @@ ...@@ -136,6 +141,7 @@
getOrderInfoByNo(this.orderNo).then(res=>{ getOrderInfoByNo(this.orderNo).then(res=>{
this.orderInfo = { this.orderInfo = {
...res.data.data, ...res.data.data,
roomImages: res.data.data.roomImages.split(','),
startDate: res.data.data.preStartDate.split(" ")[0], startDate: res.data.data.preStartDate.split(" ")[0],
startTime: res.data.data.preStartDate.split(" ")[1], startTime: res.data.data.preStartDate.split(" ")[1],
endDate: res.data.data.preEndDate.split(" ")[0], endDate: res.data.data.preEndDate.split(" ")[0],
...@@ -227,7 +233,6 @@ ...@@ -227,7 +233,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100vw; width: 100vw;
padding-bottom: 120upx;
.order-info-content{ .order-info-content{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -288,16 +293,17 @@ ...@@ -288,16 +293,17 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
margin: 8upx 0;
.cu-btn{ .cu-btn{
padding: 0 12upx; // padding: 0 12upx;
border-radius: 16upx; // border-radius: 16upx;
image{ // image{
height: 80%; // height: 80%;
border-radius: 50%; // border-radius: 50%;
max-width: 100upx; // max-width: 100upx;
margin-left: 12upx; // margin-left: 12upx;
} // }
} }
} }
.part-img{ .part-img{
...@@ -309,7 +315,6 @@ ...@@ -309,7 +315,6 @@
overflow: hidden; overflow: hidden;
>image{ >image{
display: block; display: block;
width: 100%;
height: 100%; height: 100%;
} }
} }
...@@ -318,7 +323,6 @@ ...@@ -318,7 +323,6 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex: 1; flex: 1;
font-size: 20upx;
} }
} }
.part-2{ .part-2{
......
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