Skip to content

G
gxpt_wechat
Commit e30975ac by zhangzhen
Options

首页和订单页面修改

parent 823765af
Showing with 331 additions and 163 deletions
pages/index/index.vue
......@@ -33,8 +33,8 @@
</view>
</view>
<view class="flex-row part-right">
<image :src="assetsPath +'/map_icon.png'" mode="heightFix" @tap="onNavToMap"></image>
<image :src="assetsPath +'/phone_icon.png'" mode="heightFix" @tap="onOpenTelphone">
<image :src="assetsPath +'/map_icon.png'" mode="scaleToFill" @tap="onNavToMap"></image>
<image :src="assetsPath +'/phone_icon.png'" mode="scaleToFill" @tap="onOpenTelphone">
</image>
</view>
</view>
......@@ -269,18 +269,17 @@
},
onGetDicts() {
let dicts = []
if (uni.getStorageSync('dicts')) {
dicts = JSON.parse(uni.getStorageSync('dicts'))
this.facilitieList = getDictItem(dicts, "indoor_facilities");
this.onLoading()
} else {
// if (uni.getStorageSync('dicts')) {
// dicts = JSON.parse(uni.getStorageSync('dicts'))
// this.facilitieList = getDictItem(dicts, "indoor_facilities");
// this.onLoading()
// } else {
dictList().then(res => {
dicts = res.data.data;
uni.setStorageSync('dicts', JSON.stringify(res.data.data))
this.facilitieList = getDictItem(dicts, "indoor_facilities");
this.onLoading()
})
}
// }
},
onCheckUserLogin(){
wx.login({
......@@ -318,7 +317,6 @@
uni.getLocation({
type: "gcj02",
complete: (res) => {
console.log(res,909090)
if(res.errMsg == 'getLocation:ok' ){
this.latitude = res.latitude;
this.longitude = res.longitude;
......@@ -345,6 +343,7 @@
nowLongitude: this.longitude||''
}).then(res => {
if (res.data.code == 200 && res.data.data.length) {
uni.hideLoading()
this.storeList = res.data.data;
let obj = {}
obj = res.data.data[0];
......@@ -360,7 +359,6 @@
}
})
}
uni.hideLoading()
}
})
},
......@@ -617,10 +615,10 @@
margin-right: 12upx;
height: 100%;
image {
height: 70%;
margin: 0 12upx;
max-width: 100upx;
width: 38px;
height: 38px;
border-radius: 50%;
margin: 0 15upx;
}
}
}
......@@ -683,18 +681,6 @@
border: 2upx solid #DBA556;
.part-top {
position: relative;
width: 620upx;
height: 300upx;
z-index: 10;
background-color: #FFFFFF;
border-radius: 36upx 36upx 36upx 36upx;
box-shadow: 0 0 4upx rgba(0, 0, 0, 0.3);
overflow: hidden;
.room-img {
height: 100%;
border-radius: 36upx 36upx 36upx 36upx;
}
.part-top-content {
.flex-between {
padding: 12upx 4upx;
......@@ -855,17 +841,17 @@
padding: 20upx 0;
// 容器
.part-top{
position: initial;
width: 260rpx !important;
height: 220rpx !important;
z-index: 10;
background-color: #FFFFFF;
border-radius: 12rpx !important;
box-shadow: 0 !important;
display: flex;
justify-content: center;
align-items: center;
width: 260rpx;
height: 280upx;
overflow: hidden;
.room-img{
height: 100%;
border-radius: 0 !important;
max-height: 240upx;
border-radius: 12rpx !important;
}
}
.part-bottom{
......@@ -890,10 +876,11 @@
}
// 标签
.facilitie-box{
padding: 20rpx 0 16rpx 0 !important;
padding: 8rpx 0 ;
.bg-brown{
color: #c98d35;
background-color: #f8eddd;
margin: 8upx;
}
}
// 价格
......@@ -972,7 +959,7 @@
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
padding: 8upx;
background: #fc3f21;
text{
color: #ffffff;
......@@ -983,7 +970,7 @@
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
padding: 8upx;
border-right: 2upx solid #fc3f21;
}
.part-3{
......@@ -991,7 +978,7 @@
justify-content: center;
align-items: center;
height: 100%;
padding: 10upx;
padding: 8upx;
}
text {
font-size: 25upx;
......
pages/order/order.vue
<template>
<view class="order-page">
<view class="flex-row header">
<view class="part-left">
<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="scaleToFill">
</image>
<view class="part-2">
<text class="tips"><text class="text-bold">预定须知:</text> 预定成功后，请按预约时间及时到店消费，若无法及时到店消费，可提前取消订单</text>
</view>
<view class="part-right">
<view class="flex-between part-1">
<text class="text-title text-xl text-bold">{{roomInfo.name||'一帆风顺'}}</text>
<view class="cu-tag line-blue radius sm">
空闲中
</view>
<view class="status-icon-box">
<view class="status-box" :class="'status-box-'+roomInfo.status">
<text>{{roomStatusEnum[roomInfo.status]}}</text>
</view>
<view class="flex-between part-2">
<text class="text-title text-lg">预定须知</text>
<!-- <text class="text-blue text-lg">使用教程></text> -->
<image class="img" :src="assetsPath+'/fa_icon_'+roomInfo.status+'.png'" mode="widthFix"></image>
</view>
<view class="part-3">
<text class="text-gray">预定成功后，请按预约时间及时到店消费，若无法及时到店消费，可提前取消订单</text>
</view>
<view class="part-left">
<image :src="roomInfo.images.length?roomInfo.images[0]:'../../static/blank2.jpg'" mode="widthFix">
</image>
</view>
</view>
<view class="order-type-box">
<view class="tab-box">
<view v-for="(item,i) in orderTypeList" :key="i" class="tab-item" :class="{active:i ===index}"
@tap="onTypeChange(i)">
<text class="text-gray text-xl text-bold">{{item.label}}</text>
<view class="line">
</view>
</view>
</view>
<view class="flex-col date-content-box">
<view class="flex-row date-tips">
<text class="text-xl margin-right">选择日期</text>
<text class="text-2">请先选择使用日期, 再勾选其他选项哦</text>
</view>
<view class="flex-row date-box">
<view class="bg-box" :style="{left:20*dateIndex+'%'}"></view>
<view class="bg-box" :style="{left:20*dateIndex+'%'}">
<image class="img" :src="assetsPath+'/calendar.png'" mode="scaleToFill"></image>
</view>
<view v-for="(item,k) in dateList" :key="k" class="flex-1 flex-col date-item"
:class="{active:dateIndex === k}" @tap="onDateChange(k)">
<text class="text-title text-bold text-lg">{{ item.date}}</text>
<text class="text-title text-bold text-lg">{{ k>0?item.weekday: '今天'}}</text>
<text class="text-title text-bold text-first ">{{ k>0?item.weekday: '今天'}}</text>
<text class="text-title text-bold" style="margin-top: 12upx;">{{ item.date}}</text>
</view>
</view>
<view v-show="index==1" class="flex-row package-mode">
<view class="">
</view>
<view class="flex-col data-content-box">
<view v-show="index==1" class="flex-col package-mode">
<view class="part-1">
<text class="text-title text-lg text-bold">套餐选择：</text>
</view>
<view class="flex-1 package-box">
<view v-for="(item,index) in packageMode" :key="index" class="flex-col item"
:class="{active: modeIndex===index}" @tap="onChangeMode(index)">
:class="{active: modeIndex===index,'item-3':packageMode.length<3,'item-n':packageMode.length>=3}" @tap="onChangeMode(index)">
<text class="text-title">{{item.name}}</text>
<view class="flex-row">
<text>￥</text><text class="text-title text-bold text-xl">{{item.price}}</text>
<view class="flex-row" style="margin-top: 12upx;">
<text style="margin-bottom: 4upx;">￥</text>
<text class="text-title text-bold text-xl">{{item.price}}</text>
</view>
</view>
</view>
</view>
<view v-show="orderType ===1 && index == 0" class="flex-row distance-mode">
<view class="">
<view v-show="orderType ===1 && index == 0" class="flex-col distance-mode">
<view class="distance-title">
<text class="text-title text-lg text-bold">时长选择：</text>
</view>
<view class="flex-1 distance-box">
<view v-for="(item,index) in distanceMode" :key="index" class="flex-col" style="margin: 0 12upx;"
@tap="onDurationChange(index)">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-pink':'line-gray'">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-black':'line-gray'">
<text>{{ index >= distanceMode.length-1 && !editDuration.length ? item.duration: item.duration+'小时'}}</text>
<text v-if="index >= distanceMode.length-1" class="cuIcon-edit text-lg"></text>
</view>
......@@ -66,34 +78,53 @@
</view>
</view>
<view v-if="orderType ===2" class="flex-row distance-mode" style="margin: 40upx 20upx 40upx;">
<view class="">
<view v-if="orderType ===2" class="flex-col distance-mode" style="margin: 40upx 20upx 40upx;">
<view class="distance-title">
<text class="text-title text-lg text-bold">时长选择：</text>
</view>
<view class="flex-1 distance-box">
<view v-for="(item,index) in distanceMode2" :key="index" class="flex-col" style="margin: 0 6upx;"
@tap="onDurationChange2(index)">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-pink':'line-gray'">
<view class="cu-tag radius" :class="index===distanceIndex? 'line-black':'line-gray'">
<text>{{item.duration<1?'半小时': item.duration+'小时'}}</text>
</view>
</view>
</view>
</view>
<view class="flex-row date-mode">
<view class="">
<text class="text-title text-lg text-bold">时间选择：</text>
<view class="flex-col date-mode">
<view class="flex-row date-box">
<view class="part-1">
<text class="text-title">开始时间</text>
</view>
<view class="flex-1 date-box">
<button class="cu-btn round" :class="orderType===1?'line-pink':'line-gray'" @tap="onSelectDate">
<view class="part-2">
</view>
<view class="part-1 part-3">
<text class="text-title">结束时间</text>
</view>
</view>
<view class="flex-row date-box">
<view class="part-1">
<button class="cu-btn round" :class="orderType===1?'line-black':'line-gray'" @tap="onSelectDate">
<text>{{startTime}}</text>
<text class="cuIcon-edit"></text>
</button>
<text class="margin-lr text-gray text-lg">至</text>
</view>
<view class="part-2">
<text class=" text-black text-lg">至</text>
</view>
<view class="part-1 part-3">
<button class="cu-btn round line-gray">
<text>{{endTime}}</text>
</button>
</view>
</view>
</view>
<view class="date-interval">
<view class="flex-1 flex-row">
......@@ -112,11 +143,6 @@
</view>
<text>不可选时段</text>
</view>
<!-- <view class="flex-1 flex-row">
<view class="round-box error">
</view>
<text>重叠时段</text>
</view> -->
</view>
<view class="date-point-box">
<view v-for="(item,k) in intervalList" :key="k" class="date-point-item">
......@@ -128,36 +154,42 @@
</view>
</view>
</view>
</view>
<view class="flex-col count-price">
<view class="flex-between original-price">
<text class="text-title text-bold text-xl text-blank">订单总价</text>
<text class="text-black text-left">订单总价</text>
<view class="flex-row">
<text class="text-pink">￥</text>
<text class="text-pink text-xl">{{(Number(roomInfo.price)*duration).toFixed(2)}}</text>
<text class="text-black text-sm text-bold" style="margin-bottom: 3upx;">￥</text>
<text class="text-black text-lg text-bold">{{computePriceInfo.totalFee}}</text>
</view>
</view>
<view class="flex-between price">
<text class="text-gray text-lg">预约时长：</text>
<text class="text-title text-lg">{{duration}}小时</text>
<text class="text-black text-left">预约时长</text>
<text class="text-black">{{duration}}小时</text>
</view>
<view class="flex-between price">
<text class="text-gray text-lg">房间单价：</text>
<text class="text-title text-lg">{{roomInfo.price}}元/小时</text>
<text class="text-black text-left">房间单价</text>
<view class="flex-row">
<text class="text-black text-sm text-bold" style="margin-bottom: 3upx;">￥</text>
<text class="text-black text-lg text-bold">{{roomInfo.price}}</text>
<text>/小时</text>
</view>
</view>
<view class="line"></view>
<view class="flex-between price use-coupon-box">
<text class="text-title text-lg">优惠券</text>
<text class="text-black text-left">优惠券</text>
<view class="flex-row" @tap="onNavToSelectCoupon">
<text class="text-lg" :class="useCouponList.length?'text-pink':'text-gray'">
<text class="" :class="useCouponList.length?'text-pink':'text-gray'">
{{useCouponList.length? useCouponList[selectCouponIndex].name: '暂无可用'}}</text>
<text class="cuIcon-right " :class="useCouponList.length?'text-pink':'text-gray'"></text>
</view>
</view>
<view class="flex-between price">
<text class="text-title text-lg">预约优惠</text>
<text class="text-title text-lg text-pink">
{{Number(roomInfo.price)*duration > computePriceInfo.payFee ?'-￥'+ Number(Number(roomInfo.price)*duration - computePriceInfo.payFee).toFixed(2):'￥0'}}
</text>
<text class="text-black text-left">预约优惠</text>
<view class="flex-row">
<text class="text-pink text-sm text-bold" style="margin-bottom: 3upx;">{{computePriceInfo.couponFee>0?'-':''}}￥</text>
<text class="text-pink text-lg text-bold">{{computePriceInfo.couponFee}}</text>
</view>
</view>
<!-- <view class="flex-between price">
<text class="text-title text-lg">账户余额</text>
......@@ -169,15 +201,15 @@
</view>
<view class="pay-content-box">
<view class="flex-row">
<text class="text-title text-lg">优惠价</text>
<text class="text-pink">优惠价</text>
<view class="flex-row margin-left">
<text class="text-lg">￥</text>
<text class="text-xxl">{{Number(computePriceInfo.payFee).toFixed(2)}}</text>
<text class="">￥</text>
<text class="text-xxl text-bold">{{Number(computePriceInfo.payFee).toFixed(2)}}</text>
</view>
</view>
<view class="">
<button v-if="orderType===1" class="cu-btn bg-pink round lg margin-right" @tap="onNavToCheckedCoupon">团购验券</button>
<button class="cu-btn bg-pink round lg" @tap="onOrderConfirm">{{orderType===1?'预约':'续单'}} </button>
<view class="btn-box">
<button v-if="orderType===1" class="cu-btn cu-btn-1 margin-right" @tap="onNavToCheckedCoupon">团购验券</button>
<button class="cu-btn cu-btn-2 " @tap="onOrderConfirm">{{orderType===1?'预约':'续单'}} </button>
</view>
</view>
......@@ -275,6 +307,8 @@
import LoginPop from "@/components/login/login"
import config from "@/config/index.config"
import moment from "@/common/moment_zh_cn.js";
import {dictList} from "@/api/index.js";
import {getDictItem} from "@/utils/tools.js"
import {
listSortDistance,
roomInfo
......@@ -296,7 +330,7 @@
let dateList = [];
for (let i = 0; i < 5; i++) {
let obj = {
date: moment().add(i, "days").format("MM/DD"),
date: moment().add(i, "days").format("MM-DD"),
readDate: moment().add(i, "days").format("YYYY-MM-DD"),
weekday: moment().add(i, "days").format("dddd")
}
......@@ -307,6 +341,7 @@
orderType: 1,
payWay: 1,
hostUrl: config.hostUrl,
assetsPath: config.assetsPath,
roomInfo: {
images: []
},
......@@ -403,13 +438,15 @@
totalFee: '',
},
dateObj: {},
preOrderNo:''
preOrderNo:'',
roomStatusEnum:{}
};
},
onLoad(option) {
uni.showLoading({
title: "加载中"
})
this.onGetDicts();
this.id = option.roomId || 106;
if(option.orderNo){
this.orderType = 2;
......@@ -424,6 +461,19 @@
},
methods: {
onGetDicts() {
let dicts = []
if (uni.getStorageSync('dicts')) {
dicts = JSON.parse(uni.getStorageSync('dicts'))
this.roomStatusEnum = getDictItem(dicts, "store_room_status");
} else {
dictList().then(res => {
dicts = res.data.data;
uni.setStorageSync('dicts', JSON.stringify(res.data.data))
this.roomStatusEnum = getDictItem(dicts, "store_room_status");
})
}
},
// 获取房间信息相关
onLoading() {
roomInfo({
......@@ -925,103 +975,165 @@
align-items: center;
width: 100vw;
overflow-x: hidden;
padding: 10upx 0 200upx;
padding: 0 0 150upx;
.header {
display: flex;
width: 94%;
border-radius: 16upx;
padding: 20upx;
flex-direction: column;
width: 100%;
padding: 30upx;
background-color: #ffffff;
margin-top: 20upx;
align-items: center;
.part-2 {
display: flex;
align-items: center;
width: 100%;
height: 100upx;
background: #F8EDDD;
border-radius: 50rpx;
padding: 0 30upx;
.tips{
line-height: 36upx;
}
text{
color: #C98D35;
}
}
.part-left {
display: block;
width: 240upx;
height: 260upx;
border-radius: 12upx;
overflow: hidden;
width: 100%;
image {
display: block;
width: 100%;
height: 100%;
max-height: 400upx;
}
}
.part-right {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 20upx;
.part-1 {
justify-content: space-between;
align-items: center;
}
.part-2 {
width: 100%;
padding: 20upx 6upx;
.status-icon-box{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 30upx;
.status-box{
background: #F0F9EB;
border: 2upx solid #67C23A;
box-shadow: 0rpx 5rpx 13rpx 0rpx rgba(0,0,0,0.1);
border-radius: 6px;
font-size: 28upx;
padding: 8upx 30upx 8upx 16upx;
color: #67C23A;
}
.part-3 {
margin-top: 20upx;
.status-box-0{
background: #F0F9EB;
border: 2upx solid #67C23A;
color: #67C23A;
}
.status-box-1{
background: #FDF6EC;
border: 2upx solid #F5DAB1;
color: #F5DAB1;
}
.status-box-3{
background: #ECF5FF;
border: 2upx solid #B3D8FF;
color: #B3D8FF;
}
.img{
width: 68upx;
margin-left: -30upx;
max-height: 180upx ;
}
}
}
}
.order-type-box {
display: flex;
flex-direction: column;
width: 94%;
border-radius: 16upx;
background-color: #ffffff;
margin-top: 20upx;
min-height: 400upx;
width: 100%;
margin-top: 30upx;
min-height: 600upx;
overflow: hidden;
.tab-box {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
background: #ffffff;
.tab-item {
position: relative;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
height: 80upx;
border-bottom: 2upx solid #ffaaff;
width: 36%;
text {
color: #000000;
font-size: 34upx;
font-weight: 600;
}
.line{
position: absolute;
width: 30%;
height: 2px;
bottom: 0;
background: transparent;
transition: all 0.3s ease-in-out;
}
}
.active {
background-color: #ffaaff;
text {
color: #ffffff;
color: #DBA556;
}
.line{
background: #DBA556;
}
}
}
.date-content-box{
width: 100%;
background-color: #FFF7F5;
}
.date-tips{
display: flex;
flex-direction: row;
align-items: center;
width: 92%;
margin: 30upx auto 12upx;
.text-2{
color: #8C8C8C;
}
}
.date-box {
position: relative;
margin: 10upx 20upx;
margin: 10upx 30upx;
.date-item {
position: relative;
justify-content: center;
align-items: center;
padding: 20upx 0;
padding: 40upx 0 12upx 0;
z-index: 10;
text {
color: #000000;
color: #6B0000;
}
.text-first{
letter-spacing: 4upx;
}
}
.active {
.text-title {
color: #333333;
color: #E40583;
}
}
......@@ -1031,40 +1143,61 @@
left: 0;
width: 20%;
height: 100%;
background: rgba(255, 170, 255, 0.8);
border-radius: 20upx;
transition: left 0.3s ease-in-out;
.img{
width: 100%;
height: 100%;
border-radius: 12upx;
}
}
}
.data-content-box{
width: 100%;
background-color: #ffffff;
}
.package-mode {
margin: 10upx 20upx;
padding: 0 30upx 30upx;
border-bottom: 2upx solid #F1F1F1;
.part-1{
margin: 30upx 0;
}
.package-box {
.item {
width: 30%;
margin: 0 1.5%;
justify-content: center;
align-items: center;
border: 1px solid #dadada;
border: 1px solid transparent;
border-radius: 12upx;
padding: 12upx 0;
color: #333333;
background-color: #F7F8FA;
.flex-row {
align-items: flex-end;
}
}
.item-3{
width: 30%;
}
.item-n{
flex: 1;
}
.active {
border: 1px solid #ffaaff;
background: #FBF6EE;
border: 1px solid #DBA556;
text{
color: #B67D32;
}
}
}
}
.distance-mode {
margin: 10upx 20upx;
align-items: center;
margin: 10upx 30upx;
.distance-title{
margin: 20upx 0;
}
.distance-box {
display: flex;
flex-direction: row;
......@@ -1073,16 +1206,33 @@
}
.date-mode {
margin: 10upx 20upx;
margin: 10upx 30upx;
align-items: center;
.date-box {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
.part-1{
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
.part-2{
display: flex;
justify-content: center;
align-items: center;
width: 60upx;
}
.part-3{
text{
color: #8C8C8C;
}
}
.cu-btn {
width: 180upx;
width: 80%;
font-size: 32upx;
}
......@@ -1178,25 +1328,31 @@
.count-price {
display: flex;
width: 94%;
border-radius: 16upx;
width: 100%;
background-color: #ffffff;
margin-top: 20upx;
min-height: 400upx;
padding: 20upx 0;
margin-top: 30upx;
min-height: 300upx;
padding:0 0 15upx;
overflow: hidden;
align-items: center;
.text-left{
width: 120upx;
text-align-last: justify;
}
.original-price {
width: 100%;
padding: 30upx 30upx;
padding: 30upx 30upx 15upx;
.flex-row{
align-items: flex-end;
}
}
.price {
align-items: center;
width: 100%;
padding: 18upx 30upx;
padding: 15upx 30upx;
.flex-row {
align-items: center;
......@@ -1223,11 +1379,11 @@
justify-content: space-between;
align-items: center;
width: 100%;
height: 160upx;
background: #ffffff;
border-radius: 12upx 12upx 0 0;
box-shadow: 0 0 8upx rgba(255, 170, 255, 0.8);
height: 120rpx;
background: #FFFFFF;
box-shadow: 0rpx 5rpx 25rpx 0rpx rgba(0,0,0,0.1);
padding: 0 30upx;
z-index: 111;
>.flex-row {
display: flex;
flex-direction: row;
......@@ -1240,11 +1396,36 @@
color: #e03997;
}
}
.btn-box{
.cu-btn-1{
width: 159rpx;
line-height: 58rpx;
background: linear-gradient(97deg, #FADB4A, #FFA751);
box-shadow: 0rpx 5rpx 9rpx 0rpx rgba(54,4,9,0.42);
opacity: 0.95;
border-radius: 29rpx;
font-size: 30upx;
text-align: center;
color: #ffffff;
padding: 0;
}
.cu-btn-2{
width: 159rpx;
line-height: 58rpx;
background: linear-gradient(97deg, #E5268B, #FD5661);
box-shadow: 0rpx 5rpx 9rpx 0rpx rgba(54,4,9,0.42);
opacity: 0.95;
border-radius: 29rpx;
text-align: center;
color: #ffffff;
padding: 0;
}
}
}
}
.select-box {
height: 320upx;
height: 420upx;
background-color: #f1f1f1;
.picker-view {
......
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