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 {
immediate: true,
handler (val) {
if(val == 5){
if (this.scrollTop > 160) {
if (this.scrollTop > 180) {
this.transparentValue = 1;
} else {
this.transparentValue = this.scrollTop / 160;
this.transparentValue = this.scrollTop / 180;
}
}
}
......@@ -247,11 +247,11 @@ export default {
},
pageScroll(e) {
if (this.navbarType == 5) {
if (e.scrollTop && e.scrollTop > 0) {
if (e.scrollTop > 160) {
if (e.scrollTop && e.scrollTop > 10) {
if (e.scrollTop > 180) {
this.transparentValue = 1;
} else {
this.transparentValue = e.scrollTop / 160;
this.transparentValue = e.scrollTop / 180;
}
} else {
this.transparentValue = 0;
......
pages/index/index.vue
......@@ -66,7 +66,7 @@
<view class="flex-col part-bottom">
<view class="flex-between room-title">
<view class="room-name">
<text>{{item.name}}</text>
<text>{{item.name}}{{item.roomType?'【'+roomTypeEnum[item.roomType]+'】':''}}</text>
</view>
<view class="price" @tap.stop="onNavToInfo(item)">
<text>查看包厢</text>
......@@ -211,6 +211,7 @@
}
],
facilitieList: {},
roomTypeEnum:{},
show: true,
timer: null
}
......@@ -278,6 +279,7 @@
dicts = res.data.data;
uni.setStorageSync('dicts', JSON.stringify(res.data.data))
this.facilitieList = getDictItem(dicts, "indoor_facilities");
this.roomTypeEnum = getDictItem(dicts, "store_room_type");
})
// }
},
......@@ -457,11 +459,13 @@
<style>
page {
background-color: #FFFFFF;
background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.home {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
overflow-x: hidden;
......@@ -469,17 +473,20 @@
.scroll-view {
position: relative;
display: flex;
flex: 1;
width: 100vw;
height: 100%;
.content-box {
position: absolute;
left: 0;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 100%;
margin-bottom: 50px;
background: #f5f5f5;
// background: #f5f5f5;
// padding-bottom: 50px;
}
}
......@@ -724,12 +731,8 @@
}
.part-bottom {
width: 620upx;
border: 6upx solid #E40583;
border-radius: 0 0 36upx 36upx;
margin-top: -28upx;
padding-top: 28upx;
.room-title {
padding: 20upx;
}
......@@ -781,8 +784,12 @@
.facilitie-box {
display: flex;
flex: 1;
flex-wrap: wrap;
padding: 12rpx 0 12rpx 20rpx;
.cu-tag{
}
}
.location-box{
display: flex;
......@@ -845,24 +852,23 @@
display: flex;
justify-content: center;
align-items: center;
width: 260rpx;
width: 200rpx;
height: 280upx;
overflow: hidden;
.room-img{
height: 100%;
border-radius: 0 !important;
max-height: 240upx;
width: inherit;
height: 94%;
border-radius: 12rpx !important;
}
}
.part-bottom{
width: initial;
display: flex;
flex: 1;
border: 0 !important;
border-radius: 0rpx !important;
margin-top: 0rpx !important;
padding-top: 0rpx !important;
padding-left: 20rpx;
flex: right;
.room-title{
padding: 0 !important;
display: flex;
......@@ -991,7 +997,6 @@
}
.confirm-box{
display: flex;
flex: 1;
width: 100%;
align-items: center;
}
......
pages/order/order.vue
......@@ -145,10 +145,9 @@
</view>
</view>
<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"
:class="item.status === 0?'free':item.status==1?'used': item.status==2?'checked':'error'">
</view>
<text class="text-gray">{{item.hour}}</text>
</view>
......@@ -491,6 +490,9 @@
this.packageMode = this.roomInfo.packList
this.index = 1;
this.modeIndex = 0;
}else{
this.index = 0;
this.orderTypeList = this.orderTypeList.filter(item=>item.type==1)
}
this.onGetSortDistance()
}
......@@ -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) {
let obj = {
......
pages/orderRecord/orderRecord.vue
......@@ -12,10 +12,31 @@
<view class="list-content">
<view v-for="(item,index) in list" :key="index" class="list-item" @tap="onNavToOrderInfo(item)">
<view class="flex-between part-1">
<text class="text-title text-bold text-xl">{{item.roomName||'房间名称'}}</text>
<text class="text-pink">{{orderStatusEnum[item.status]}}</text>
<view class="flex-row store-name">
<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 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-col part-1">
......@@ -64,16 +85,16 @@
</view>
<view v-if="item.startDate" class="flex-between part-1">
<text class="text-gray">开始时间:</text>
<text class="text-title">{{item.startDate}}</text>
<text class="text-title">{{item.startDate}}:00</text>
</view>
<view v-if="item.endDate" class="flex-between part-1">
<text class="text-gray">结束时间:</text>
<text class="text-title">{{item.endDate}}</text>
<text class="text-title">{{item.endDate}}:00</text>
</view>
<view class="flex-between part-1">
<!-- <view class="flex-between part-1">
<text class="text-gray">订单总计:</text>
<text class="text-pink text-bold">{{item.totalPrice}}元</text>
</view>
</view> -->
</view>
</view>
</view>
......@@ -178,10 +199,17 @@ import NoLogin from "@/components/noLogin/noLogin"
orderList(this.queryParams).then(res => {
uni.hideLoading()
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){
this.list = res.data.rows
this.list = list
}else{
this.list = [...this.list,...res.data.rows]
this.list = [...this.list,...list]
}
if(this.list.length < res.data.total){
this.status = "loadmore"
......@@ -241,6 +269,35 @@ import NoLogin from "@/components/noLogin/noLogin"
display: flex;
align-items: center;
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"
}
.part-line{
height: 50upx;
width: 2upx;
background-color: #999999;
margin-left: -1upx;
width: 2px;
background-color: #f1f1f1;
margin-left: -1px;
}
}
.part-1{
......
pages/orderResult/orderResult.vue
<template>
<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-time">
<view class="flex-between">
......@@ -22,43 +22,47 @@
<view class="flex-between title">
<view class="flex-row">
<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>
<button class="cu-btn line-pink" @tap="onNavToMap">
<text>导航</text>
<image :src="assetsPath+'/map_icon.png'" mode="heightFix"></image>
<button class="cu-btn round line-pink" @tap="onNavToMap">
<text>导航到店</text>
<!-- <image :src="assetsPath+'/map_icon.png'" mode="heightFix"></image> -->
</button>
</view>
<view class="flex-row">
<view class="part-img">
<image :src="assetsPath+'/blank2.jpg'" mode="scaleToFill"></image>
<image :src="hostUrl+orderInfo.roomImages[0]" mode="heightFix"></image>
</view>
<view class="flex-1 flex-col">
<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 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 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 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 class="flex-between">
<text class="text-block text-lg">订单编号</text>
<text class="text-block text-lg">{{orderInfo.orderNo}}</text>
<text class="text-gray ">订单编号</text>
<text class="text-title ">{{orderInfo.orderNo}}</text>
</view>
<view class="flex-between">
<text class="text-block text-lg">支付方式</text>
<text class="text-block text-lg">{{orderInfo.payType==1?'微信支付':'其他支付'}}</text>
<text class="text-gray">支付方式</text>
<text class="text-title">{{orderInfo.payType==1?'微信支付':'其他支付'}}</text>
</view>
<view class="flex-between">
<text class="text-block text-lg">支付时间</text>
<text class="text-block text-lg">{{orderInfo.payTime||'-'}}</text>
<text class="text-gray">支付时间</text>
<text class="text-title">{{orderInfo.payTime||'-'}}</text>
</view>
</view>
......@@ -124,6 +128,7 @@
orderNo:'',
orderInfo:{},
assetsPath: config.assetsPath,
hostUrl:config.hostUrl
};
},
onLoad(option) {
......@@ -136,6 +141,7 @@
getOrderInfoByNo(this.orderNo).then(res=>{
this.orderInfo = {
...res.data.data,
roomImages: res.data.data.roomImages.split(','),
startDate: res.data.data.preStartDate.split(" ")[0],
startTime: res.data.data.preStartDate.split(" ")[1],
endDate: res.data.data.preEndDate.split(" ")[0],
......@@ -227,7 +233,6 @@
display: flex;
flex-direction: column;
width: 100vw;
padding-bottom: 120upx;
.order-info-content{
display: flex;
flex-direction: column;
......@@ -288,16 +293,17 @@
display: flex;
align-items: center;
width: 100%;
margin: 8upx 0;
.cu-btn{
padding: 0 12upx;
border-radius: 16upx;
image{
height: 80%;
border-radius: 50%;
max-width: 100upx;
margin-left: 12upx;
// padding: 0 12upx;
// border-radius: 16upx;
// image{
// height: 80%;
// border-radius: 50%;
// max-width: 100upx;
// margin-left: 12upx;
}
// }
}
}
.part-img{
......@@ -309,7 +315,6 @@
overflow: hidden;
>image{
display: block;
width: 100%;
height: 100%;
}
}
......@@ -318,7 +323,6 @@
flex-direction: row;
align-items: center;
flex: 1;
font-size: 20upx;
}
}
.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