Skip to content

G
gxpt_wechat
Commit e30975ac by zhangzhen
Options

首页和订单页面修改

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