Skip to content

J
jz_Travel
Commit 64bac0a3 authored by 罗超's avatar 罗超
Browse files
Options

餐厅所有静态页面

parent be566b3d
Hide whitespace changes
Inline Side-by-side
Showing with 3027 additions and 100 deletions
components/sidebar/index.vue
View file @ 64bac0a3
......@@ -64,8 +64,9 @@ export default {
handler(nVal) {
// 视图更新后再执行移动操作
this.$nextTick(() => {
console.log("更新下标",nVal)
this.currentIndex = nVal;
this.change(nVal)
});
}
},
......
pages.json
View file @ 64bac0a3
......@@ -667,6 +667,16 @@
"root": "pages/restaurant",
"pages":[{
"path":"list"
},{
"path":"detail",
"enablePullDownRefresh": true,
"style": {
"navigationStyle": "custom"
}
},{
"path":"picture"
},{
"path":"order"
}]
},
//酒店
......
pages/restaurant/components/near-good.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="near-good">
<image src="https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg" mode="aspectFill"></image>
<view class="good-name">上海宋城</view>
</view>
</template>
<script>
</script>
<style>
.near-good{
margin-right: 20rpx;
flex-shrink: 0;
}
.near-good image{
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
margin-bottom: 29rpx;
}
.near-good .good-name{
font-weight: bold;
color: #1F1F1F;
font-size: 28rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
pages/restaurant/components/package-good.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="package-good">
<view class="rm-left">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459632000_216.png" mode="aspectFill">
</image>
</view>
<view class="rm-right">
<view class="package-name">海鲜团队用餐</view>
<view class="f11">
<text class="king" style="margin-right: 14rpx;">6人起订</text>
<text>仅周五、周六可用，节假日可用</text>
</view>
<viwe class="give f11">
提前1天预约
</viwe>
<view class="price" style="margin-top:30rpx;">
<text class="f11" style="margin-right: 10rpx;">￥</text>
<text>889</text>
</view>
</view>
<view class="rm-opera">
<view class="buy" @click="previewOrder">
<view class="buy-content">抢</view>
<view class="buy-tips">在线订</view>
</view>
</view>
</view>
</template>
<script>
export default {
methods: {
previewOrder(){
uni.navigateTo({
url:"/pages/restaurant/order"
})
},
},
}
</script>
<style>
.package-good {
margin-bottom: 30rpx;
display: flex;
align-items: center;
}
.package-good .king {
color: #DFBE6E !important;
}
.package-good .f11 {
font-size: 22rpx;
font-weight: 500;
}
.package-good .rm-right {
width: 1px;
flex: 1;
}
.package-good .rm-opera{
margin-left: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-items: center;
}
.package-good .rm-opera .warm-count{
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #111111;
margin-bottom: 10rpx;
}
.package-good .rm-opera .buy{
width: 70rpx;
height: 81rpx;
background: #FFFFFF;
border: 2rpx solid #111111;
border-radius: 8rpx;
display: flex;
flex-direction: column;
}
.package-good .rm-opera .buy.disabled{
background: #EBEBEB;
border: 2rpx solid #DCDCDC;
}
.package-good .rm-opera .buy.disabled .buy-tips{
background: #A09E9E;
color: #fff;
}
.package-good .rm-opera .buy.disabled .buy-content{
color: #A09E9E;
}
.package-good .rm-opera .buy .buy-tips{
height: 27rpx;
background: #000000;
text-align: center;
color:#DFBE6E;
font-size: 18rpx;
line-height: 27rpx;
}
.package-good .rm-opera .buy .buy-content{
height: 1px;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 800;
color: #111111;
}
.package-good .rm-right .package-name {
font-size: 30rpx;
font-weight: 800;
color: #111111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-good .rm-right .give {
background: #ECF1F4;
border-radius: 4rpx;
padding: 10rpx;
margin-top:15rpx;
display: inline-block;
}
.package-good .rm-right .price{
font-weight: 800;
font-size: 40rpx;
color:#111;
}
.package-good .rm-left {
width: 174rpx;
height: 257rpx;
border-radius: 20rpx;
margin-right: 30rpx;
position: relative;
overflow: hidden;
}
.package-good .rm-left image {
width: 100%;
height: 100%;
}
.package-good .rm-left .mark {
padding: 14rpx;
background: rgba(0, 0, 0, .4);
color: #FFF;
border-radius: 20rpx 0px 20rpx 0px;
font-size: 24rpx;
font-weight: 500;
position: absolute;
right: 0;
bottom: 0;
}
</style>
pages/restaurant/components/package-good2.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="package-good">
<view class="rm-left">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459631000_626.jpg" mode="aspectFill">
</image>
</view>
<view class="rm-right">
<view class="package-name">海鲜团队用餐</view>
<view class="f11">
<text class="king" style="margin-right: 14rpx;">6人起订</text>
<text>仅周五、周六可用，节假日可用</text>
</view>
<viwe class="give f11">
提前1天预约
</viwe>
<view class="price" style="margin-top:30rpx;">
<text class="f11" style="margin-right: 10rpx;">￥</text>
<text>889</text>
</view>
</view>
<view class="rm-opera">
<view class="buy disabled" @click="previewOrder">
<view class="buy-content">抢</view>
<view class="buy-tips">已售罄</view>
</view>
</view>
</view>
</template>
<script>
export default {
methods: {
previewOrder(){
uni.navigateTo({
url:"/pages/hotel/order"
})
},
},
}
</script>
<style>
.package-good {
margin-bottom: 30rpx;
display: flex;
align-items: center;
}
.package-good .king {
color: #DFBE6E !important;
}
.package-good .f11 {
font-size: 22rpx;
font-weight: 500;
}
.package-good .rm-right {
width: 1px;
flex: 1;
}
.package-good .rm-opera{
margin-left: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
justify-items: center;
align-items: center;
}
.package-good .rm-opera .warm-count{
text-align: center;
font-size: 18rpx;
font-weight: 500;
color: #111111;
margin-bottom: 10rpx;
}
.package-good .rm-opera .buy{
width: 70rpx;
height: 81rpx;
background: #FFFFFF;
border: 2rpx solid #111111;
border-radius: 8rpx;
display: flex;
flex-direction: column;
}
.package-good .rm-opera .buy.disabled{
background: #EBEBEB;
border: 2rpx solid #DCDCDC;
}
.package-good .rm-opera .buy.disabled .buy-tips{
background: #A09E9E;
color: #fff;
}
.package-good .rm-opera .buy.disabled .buy-content{
color: #A09E9E;
}
.package-good .rm-opera .buy .buy-tips{
height: 27rpx;
background: #000000;
text-align: center;
color:#DFBE6E;
font-size: 18rpx;
line-height: 27rpx;
}
.package-good .rm-opera .buy .buy-content{
height: 1px;
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-weight: 800;
color: #111111;
}
.package-good .rm-right .package-name {
font-size: 30rpx;
font-weight: 800;
color: #111111;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-good .rm-right .give {
background: #ECF1F4;
border-radius: 4rpx;
padding: 10rpx;
margin-top:15rpx;
display: inline-block;
}
.package-good .rm-right .price{
font-weight: 800;
font-size: 40rpx;
color:#111;
}
.package-good .rm-left {
width: 174rpx;
height: 257rpx;
border-radius: 20rpx;
margin-right: 30rpx;
position: relative;
overflow: hidden;
}
.package-good .rm-left image {
width: 100%;
height: 100%;
}
.package-good .rm-left .mark {
padding: 14rpx;
background: rgba(0, 0, 0, .4);
color: #FFF;
border-radius: 20rpx 0px 20rpx 0px;
font-size: 24rpx;
font-weight: 500;
position: absolute;
right: 0;
bottom: 0;
}
</style>
pages/restaurant/components/recommed-restaurant.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="restaurant-list-item">
<view class="img-box">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459632000_216.png" mode="aspectFill"></image>
</view>
<view class="restaurant-info">
<view class="restaurant-name">乐山禅驿·嘉定院子酒店</view>
<view class="restaurant-start">
<view class="other-rate">
<text>日式料理</text>
<span class="line"></span>
</view>
</view>
<view class="localtion">距该酒店直线4.1公里·近九寨千古情景区·沟口</view>
<view>
<u-tag text="纯正日式" bg-color="#FFF" border-color="#DFBE6E" color="#DFBE6E" size="mini"></u-tag>
</view>
<view class="price">
<text>￥</text>
<text class="money">599</text>
<text>起</text>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
restaurantType:{
type:Number,
default:0
}
},
data() {
return {
}
},
}
</script>
<style>
.restaurant-list-item{
margin: 30rpx 0;
padding-bottom: 30rpx;
/* border-bottom: 1rpx solid #E2E2E2; */
display: flex;
align-items: center;
}
.restaurant-list-item .img-box{
width: 220rpx;
height: 280rpx;
border-radius: 20rpx;
overflow: hidden;
margin-right: 30rpx;
}
.restaurant-list-item .img-box image{
width: 100%;
}
.restaurant-list-item .restaurant-info{
width: 1px;
flex: 1;
}
.restaurant-list-item .restaurant-info .restaurant-name{
font-weight: 500;
color: #111111;
line-height: 30rpx;
font-size: 30rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.restaurant-list-item .restaurant-info .restaurant-start{
margin:10rpx 0;
}
.restaurant-list-item .restaurant-info .restaurant-start .rate{
font-size: 30rpx;
font-weight: 500;
color: #999999;
line-height: 30rpx;
}
.restaurant-list-item .restaurant-info .restaurant-start .other-rate{
display: inline-block;
position: relative;
}
.restaurant-list-item .restaurant-info .restaurant-start .other-rate text{
position: relative;z-index: 2;
font-size: 30rpx;
line-height: 30rpx;
font-weight: 500;
color: #111;
}
.restaurant-list-item .restaurant-info .restaurant-start .other-rate .line{
background-color: #DFBE6E;
height: 6px;
bottom: 2px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
.restaurant-list-item .restaurant-info .localtion{
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 10rpx;
}
.restaurant-list-item .restaurant-info .price{
margin-top: 10rpx;
font-weight: 500;
color: #000;
font-size: 20rpx;
text-align: right;
}
.restaurant-list-item .restaurant-info .price .money{
font-size: 36rpx;
}
</style>
pages/restaurant/components/restaurant-good.vue
View file @ 64bac0a3
......@@ -35,7 +35,7 @@
},
data() {
return {
key: value
// key: value
}
},
}
......
pages/restaurant/components/restaurant-type.vue 0 → 100644
View file @ 64bac0a3
<template>
<div class="rtypestyle" style="background: #FFF;">
<div class="left-slider">
<sidebar :active="tid" name="Name" :active-color="mainColor" :border="false" :list="d" @change="changeHandler">
</sidebar>
</div>
<div class="right-slider">
<scroll-view scroll-y="true" style="height: 30vh;">
<div class="item" :class="{'active':d[tid].Id==currentObj.Id}" @click="clickHandler(d[tid])">
<div class="left">不限</div>
</div>
<div class="item" :class="{'active':x.Id==currentObj.Id}" v-for="(x, index) in sd" :key="index" @click="clickHandler(x)">
<div class="left">{{ x.Name }}</div>
</div>
</scroll-view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
<u-button :custom-style="btnStyle" @click="sendResult(-1)">取消</u-button>
</view>
<view style="flex:1;">
<u-button :custom-style="btnStyle2" @click="sendResult(0)">完成</u-button>
</view>
</view>
</div>
</div>
</template>
<script>
import sidebar from "../../../components/sidebar/index";
export default {
props: {
d:{
type:Array,
default:[{
Id:1,
Name:"川菜",
ChildList:[
{
Id:2,
Name:"中餐"
},
{
Id:3,
Name:"汤锅"
},
{
Id:4,
Name:"干锅"
},
{
Id:5,
Name:"火锅"
},
{
Id:6,
Name:"蓉派川菜"
},
{
Id:7,
Name:"渝派川菜"
},
{
Id:8,
Name:"盐帮菜"
}
]
},{
Id:9,
Name:"火锅",
ChildList:[
{
Id:10,
Name:"成都火锅"
},
{
Id:11,
Name:"藏式火锅"
},
{
Id:12,
Name:"重庆火锅"
},
{
Id:13,
Name:"北京火锅"
}
]
}]
},
current:{
type:Object,
default:{
Id:-1,
active:0
}
}
},
watch: {
current:{
handler(newValue, oldValue){
this.$nextTick(() => {
this.active=newValue.active
this.currentObj=newValue
this.changeHandler(this.active)
});
},
deep:true
}
},
data() {
return {
mainColor: "",
tid: 0,
active: 0,
sd: [],
btnStyle:{
borderRadius: '16rpx',
color: '#111',
fontSize: '30rpx',
width: '100%',
border:"1px solid #111",
background:"#FFF"
},
btnStyle2:{
borderRadius: '16rpx',
color: '#fff',
fontSize: '30rpx',
width: '100%',
background:"#111"
},
currentObj:{
Id:-1,
active:0
}
};
},
components: {
sidebar,
},
created() {
this.mainColor = this.$uiConfig.mainColor;
this.sd = this.d[this.tid].ChildList;
},
methods: {
changeHandler(i) {
this.tid = i;
this.sd = this.d[this.tid].ChildList;
},
clickHandler(item) {
this.currentObj=item
this.currentObj.active=this.active
// let Id1 = this.d[this.tid].Id;
// let Id2 = item.Id;
// let CategoryIds = Id2;
// let IsEducation = uni.getStorageSync('basedata') ?
// (uni.getStorageSync('basedata').mall.setting.mallStyle.IsEducation ? uni.getStorageSync('basedata').mall.setting.mallStyle
// .IsEducation : 0) :
// 0;
// if (IsEducation == 1) {
// uni.navigateTo({
// url: '/pages/school/courseList?CategoryIds=' + CategoryIds
// });
// } else {
// uni.navigateTo({
// url: '/pages/goods/list?CategoryIds=' + CategoryIds
// });
// }
},
sendResult(t){
if(t==-1){
this.currentObj={
Id:-1,
active:0
}
}
this.$emit("sure-type",this.currentObj)
}
},
};
</script>
<style>
.rtypestyle {
display: flex;
}
.rtypestyle .left-slider {
width: 85px;
background: #f5f5f5;
}
.rtypestyle .right-slider {
padding: 10px;
height: 100%;
width: 1px;
flex: 1;
overflow: hidden;
overflow-y: auto;
}
.rtypestyle .right-slider .item {
background: #f5f5f5;
margin-bottom: 4px;
}
.rtypestyle .right-slider .item.active .left{
background-color: #111;
color: #FFF;
}
.rtypestyle .right-slider .item .left {
padding: 15rpx;
font-size: 28rpx;
font-weight: 600;
color: #666;
}
</style>
pages/restaurant/components/time/day.js 0 → 100644
View file @ 64bac0a3
//节假日信息
const day=[
{
year:2022,
month:1,
festival:[
{name:'元旦',day:1},
{name:'除夕',day:31},
]
},
{
year:2022,
month:2,
festival:[
{name:'春节',day:1},
{name:'元宵',day:15},
{name:'情人节',day:14}
]
},
{
year:2022,
month:3,
festival:[
{name:'妇女节',day:8},
]
},
{
year:2022,
month:4,
festival:[
{name:'清明',day:4},
]
},
{
year:2022,
month:5,
festival:[
{name:'劳动节',day:1},
{name:'青年节',day:4},
{name:'母亲节',day:10},
]
},
{
year:2021,
month:6,
festival:[
{name:'儿童节',day:1},
{name:'父亲节',day:21},
{name:'端午',day:14},
]
},
{
year:2021,
month:7,
festival:[
{name:'建党节',day:1}
]
},
{
year:2021,
month:8,
festival:[
{name:'建军节',day:1},
{name:'七夕',day:14},
{name:'中元节',day:22},
]
},
{
year:2021,
month:9,
festival:[
{name:'教师节',day:10},
{name:'中秋',day:21}
]
},
{
year:2021,
month:10,
festival:[
{name:'国庆',day:1},
{name:'重阳',day:14}
]
},
{
year:2021,
month:11,
festival:[
{name:'感恩节',day:26}
]
},
{
year:2021,
month:12,
festival:[
{name:'平安夜',day:24},
{name:'圣诞节',day:25}
]
}
]
export default day
\ No newline at end of file
pages/restaurant/components/time/index.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="content">
<scroll-view :scroll-y="true" style="height: 100%;">
<view class="header">
<!-- <view class="bar"></view>
<view class="set text-gray">
<text @click="close" style="font-size:40upx;">返回</text>
<text @click="reset" style="font-size:35upx;color:#DDDDDD">清空</text>
</view> -->
<!-- <view class="in-and-out">
<view class="item" v-if="start.length > 0">
<view style="font-size:30upx;color:#C0C0C0">入住日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ startDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ startWeek }}</view>
</view>
<view class="item text" v-if="start.length == 0">
<view>入住日期</view>
</view>
<view class="item">
<view class="count-border" :class="day == 0 ? 'gray' : 'orange'">
<view class="count" style="font-size:26upx;line-height:26upx;">共{{ day }}晚</view>
</view>
</view>
<view class="item text" v-if="end.length == 0">
<view>离店日期</view>
</view>
<view class="item" v-if="end.length > 0">
<view style="font-size:30upx;color:#C0C0C0">离店日期</view>
<view style="font-weight: bold;margin-top:10upx;font-size:36upx">{{ endDay }}</view>
<view style="font-size:24upx;margin-top:10upx">{{ endWeek }}</view>
</view>
</view> -->
<view style="font-size: 32rpx;color:#111;text-align: center;padding:30rpx 0;">
<text>选择日期</text>
</view>
<view class="week">
<view>日</view>
<view>一</view>
<view>二</view>
<view>三</view>
<view>四</view>
<view>五</view>
<view>六</view>
</view>
</view>
<view class="section">
<view v-for="(res, line) in resDate" class="item" :key="line">
<view class="year">{{ res.year }}年{{ res.month }}月</view>
<view class="day">
<view v-for="week in res.oneDayWeek" class="day-list"
:style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
<view @tap="selectDay(line, index,(line+1).toString()+index)" v-for="(item, index) in res.day"
:key="index" class="day-list" :class="[
line == start[0] && index == start[1] ? 'bg-orange select-style' : '',
(line >= start[0] && line <= end[0] && index > start[1] && index < end[1]) || (line >= start[0] && index > start[1] && line < end[0]) || (line <= end[0] && index < end[1] && line > start[0]) || (line < end[0] && line > start[0]) ? 'bg-higlt-orange' : '',
line == 0 && index + 1 < nowDay ? 'time-out' : '',
isNaN(item) ? 'is-festival' : '',
(isNaN(item) && line == start[0] && index == start[1]) || (isNaN(item) && line == end[0] && index == end[1]) ? 'not-festival' : '',
(priceStauts.length > 0 && priceStauts[line][index] <0 && start.length>0 && end.length>0) ||(priceStauts.length > 0 && priceStauts[line][index] <0 &&start.length==0 && end.length==0)?'not-sub' : '',
priceStauts.length > 0 && end.length==0 && start.length>0 && priceStauts[line][index]<0 && line+index*2!=lastNot[0]+lastNot[1]*2? 'not-sub' : '',
]" :style="{ width: (dayWidth - 10) / 7 + 'px',borderRadius:line == end[0] && index == end[1]?'0px 6px 6px 0px':'',backgroundColor:line == end[0] && index == end[1]?'#111':'',color:line == end[0] && index == end[1]?'#FFFFFF':''}">
<view style="padding-top:2px;padding-bottom:2px;">{{ item }}</view>
<view class="select-style" v-if="line == start[0] && index == start[1]">入住</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">离店</view>
<view style="font-size:12px;padding-bottom: 3px;" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index]>0">￥{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index] <0">无房</view>
</view>
</view>
</view>
</view>
</view>
<view class="submit">
<button class="sub-btn" :disabled="!isSub" @click="submit">
<text v-if="isSub">确定</text>
<text v-if="!isSub">请选择入住日期</text>
</button>
</view>
</scroll-view>
</view>
</template>
<script>
//引入节假日的数据，也可以用后台返回去渲染
import json from './day.js';
export default {
computed: {
//房间是否能预订
isSub() {
if (this.priceStauts.length > 0) {
for (var i = this.start[0]; i <= this.end[0]; i++) {
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.date[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (this.end[0] == this.start[0]) {
for (var j = this.start[1]; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else if (i == this.end[0]) {
for (var j = 0; j < this.end[1]; j++) {
if (this.priceStauts[i][j] == -1) return false
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) return false
}
}
}
}
return this.start.length == 2 && this.end.length == 2 ? true : false
},
//计算日历里的节假日
resDate() {
if (this.date.length == 0) return
for (var i = 0; i < this.date.length; i++) {
for (var j = 0; j < this.festival.length; j++) {
if (this.festival[j].year == this.date[i].year && this.festival[j].month == this.date[i].month) {
for (var k = 0; k < this.festival[j].festival.length; k++) {
if (this.date[i].day.indexOf(this.festival[j].festival[k].day) != -1) {
this.date[i].day[this.date[i].day.indexOf(this.festival[j].festival[k].day)] = this
.festival[j].festival[k].name;
}
}
}
}
}
return this.date;
}
},
data() {
return {
out: 0,
festival: json, //节假日
type: '-', //日期分隔符
date: [], //日期数组对象
dayWidth: 0, //日期的宽度
nowDay: 0, //当前时间的日
start: [], //入住时间
count: 6, //显示月的数量
startDay: '', //入住日期
startWeek: '', //入住时间的周几
end: [], //离开时间
endDay: '', //离开日期
endWeek: '', //离开时间的周几
day: 0, //多少晚
priceStauts: [], //价格状态
lastNot: [0, 10] //前置的无房操作
};
},
mounted () {
console.log("进入了....")
uni.getSystemInfo({
success: res => {
this.dayWidth = res.windowWidth;
}
});
this.setDate();
this.nowDay = new Date().getDate();
/*默认入住离店日期，今日入住明日离店，此处应在setDefaultDate函数内传入vuex里保存的日期进行默认操作
*不推荐使用本地缓存，下边只是使用缓存的示例
*/
uni.getStorage({
key: 'Time',
success: (res) => {
console.log(res)
if (res && res.data) {
var obj = JSON.parse(res.data)
this.start = this.setDefaultDate(obj.start);
this.end = this.setDefaultDate(obj.end);
}
},
fail: () => {
this.start = this.setDefaultDate(this.getDefaultDate(0));
this.end = this.setDefaultDate(this.getDefaultDate(1));
}
})
//如果需要日期的价格，-1为无房，其他价格代表正常
// if (option && option.request) {
// uni.request({
// url: 'http://api.tcdbp.com', //当需要日历价格的时候请求的后台接口地址
// method: 'GET',
// data: {
// count: this.count //获取几个月分的数据
// },
// success: res => {
// if (res.data.status != 1) {
// return uni.showToast({
// title: res.data.message,
// icon: 'none',
// mask: true
// });
// }
// this.priceStauts = res.data.data;
// },
// fail: () => {
// uni.showToast({
// title: '网络错误请稍后再试',
// icon: 'none',
// mask: true
// });
// }
// });
// }
},
watch: {
//离店日期
end(newVal) {
if (this.end.length != 0) {
//计算选择离店日期
this.endDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.endWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(newVal[0], newVal[1]));
//计算天数
var startDay = this.date[this.start[0]].year + '/' + this.date[this.start[0]].month + '/' + this
.isFestival(this.start[0], this.start[1]);
var endDay = this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this.isFestival(this
.end[0], this.end[1]);
this.day = this.getDay(startDay, endDay);
} else {
this.day = 0;
}
},
//入住日期
start(newVal) {
if (this.start.length > 0) {
this.startDay = this.setMonth(newVal[0]) + this.isFestival(newVal[0], newVal[1]) + '日';
this.startWeek = this.getWeek(this.date[newVal[0]].year + '/' + this.date[newVal[0]].month + '/' + this
.isFestival(
newVal[0], newVal[1]));
}
if (this.priceStauts.length > 0) {
console.log(this.lastNot)
for (var i = newVal[0]; i < this.priceStauts.length; i++) {
if (i == newVal[0]) {
for (var j = newVal[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j]
console.log(this.lastNot)
return
}
}
} else {
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] == -1) {
this.lastNot = [i, j];
console.log(this.lastNot)
return
}
}
}
}
//清空
this.lastNot = []
}
}
},
methods: {
//月份补零
setMonth(dateIndex) {
let month = this.date[dateIndex].month;
if (month < 10) {
month = '0' + month;
}
return month + '月';
},
//如果是节假日名称则返回选择的日期天数
isFestival(line, index, push = false) {
var date = this.date[line].day[index];
if (isNaN(date)) {
var newIndex = this.date[line].day.indexOf(date) + 1;
if (push) return newIndex;
return newIndex < 10 ? '0' + newIndex : newIndex;
} else {
if (push) return date;
return date < 10 ? '0' + date : date;
}
},
//获取今天明天的日期
getDefaultDate(AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
var year = dd.getFullYear();
var mon = dd.getMonth() + 1; //获取当前月份的日期
var day = dd.getDate();
return year + '-' + mon + '-' + day;
},
//设置入住时间 如果没有传值则根据默认值设置
setDefaultDate(data) {
var arr = [0, parseInt(this.nowDay - 1)];
var start = data.indexOf('-') != -1 ? data.split('-') : data.split('/');
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
for (var i = 0; i < this.date.length; i++) {
if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
arr = [i, parseInt(this.nowDay - 1)];
} else {
arr = [i, parseInt(start[2] - 1)];
}
break;
}
}
return arr;
},
//清空
reset() {
this.start = [];
this.end = [];
this.day = 0;
},
//补零操作
setPull(day) {
if (day < 10) {
day = '0' + day;
}
return day
},
//计算天数
getDay(date1, date2) {
//获得天数
//date1：开始日期，date2结束日期
var a1 = Date.parse(new Date(date1));
var a2 = Date.parse(new Date(date2));
var day = parseInt((a2 - a1) / (1000 * 60 * 60 * 24)); //核心：时间戳相减，然后除以天数
return day;
},
//计算周几
getWeek(date) {
var weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
//选择入住离开
selectDay(line, index) {
if (line == 0 && index + 1 < this.nowDay) return;
//如果有入住情况和价格则需要进行一些列的判断
if (this.priceStauts.length > 0) {
if ((this.start.length == 0 && this.priceStauts[line][index] < 0) || (this.end.length > 0 && this
.priceStauts[line][index] < 0)) {
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
}
if ((this.start.length > 0 && line < this.start[0]) || (line == this.start[0] && this.start[1] >
index)) {
if (this.priceStauts[line][index] < 0)
return uni.showToast({
title: '该日期已被预订',
icon: 'none'
});
this.start = [line, index];
this.end = [];
return;
}
if (this.start.length > 0 && this.end.length == 0) {
if (this.start[0] - line == 0) {
for (var j = this.start[1]; j < index; j++) {
if (this.priceStauts[line][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//如果不在同一个月份有三种情况需要处理
for (var i = this.start[0]; i <= line; i++) {
//开始日期到开始日期当月的最大日期是否包含无房情况
if (i == this.start[0]) {
for (var j = this.start[1]; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else if (i == line) {
//结束日期到当月结束日期之前是否包含无房情况
for (var j = 0; j < index; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
} else {
//中间间隔的月份需要检查每一天是否包含无房情况
for (var j = 0; j < this.priceStauts[i].length; j++) {
if (this.priceStauts[i][j] < 0)
return uni.showToast({
title: '很抱歉，所选入离店时间包含无房日期',
icon: 'none',
mask: true
});
}
}
}
}
}
}
//如果没有入住时间
if (this.start.length == 0) {
//填充入住时间
this.start = [line, index];
} else if (this.start.length > 0 && this.start[0] == line && this.start[1] == index && this.end.length ==
0) {
return;
} else {
//如果没有离开时间
if (this.end.length == 0) {
//如果有价格和入住离开情况则需要进行判断所选的离店时间时候包含无房日期
if (line < this.start[0] || (line == this.start[0] && index < this.start[1])) {
this.end = this.start;
this.start = [line, index];
} else {
//如果离开时间比入住时间晚则填充
this.end = [line, index];
}
} else {
//如果有离开时间则清空离开时间重新填充入住时间
this.start = [line, index];
this.end = [];
}
}
},
//设置日历
setDate() {
//年份
var year = new Date().getFullYear();
//月份
var month = new Date().getMonth();
console.log("执行了...")
for (let i = 0; i < this.count; i++) {
var day = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
day.push(j + 1);
}
this.date.push({
year: year,
month: month + 1,
day: day,
oneDayWeek: new Date(Date.parse(year + '/' + (month + 1) + '/' + '01')).getDay()
});
if (month == 11) {
year += 1;
month = 0;
} else {
month++;
}
}
return this.date;
},
//关闭
close() {
uni.navigateBack({
delta: 1
});
},
//确定入住离店事件提交
submit() {
var obj = {
/* startYMD: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type + this.isFestival(
this.start[0], this.start[1]),
startMD: this.date[this.start[0]].month + this.type + this.isFestival(this.start[0], this.start[1]),
startDay: this.startDay,
startWeek: this.startWeek,
endYMD: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this.isFestival(this
.end[0], this.end[1]),
emdMD: this.date[this.end[0]].month + this.type + this.type + this.isFestival(this.end[0], this.end[1]),
endDay: this.endDay,
endWeek: this.endWeek,
day: this.day */
startWeek: this.startWeek,
endWeek: this.endWeek,
start: this.date[this.start[0]].year + this.type + this.date[this.start[0]].month + this.type +
this.isFestival(this.start[0], this.start[1], true),
end: this.date[this.end[0]].year + this.type + this.date[this.end[0]].month + this.type + this
.isFestival(this.end[0], this.end[1], true),
startDay: this.date[this.start[0]].month + '-' + this.isFestival(this.start[0], this.start[1],
true),
endDay: this.date[this.end[0]].month + '-' + this.isFestival(this.end[0], this.end[1], true),
day: this.day
};
/*此处应把需要的数据进行保存,如入住离开日期...添加到vuex然后再进行跳转到上一页
*不推荐使用本地缓存,下面是缓存的示例
*/
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.$emit("finish",obj)
//价格清单,应该存入vuex获取缓存中
// if (this.priceStauts.length > 0) {
// var price = []
// if (this.end[0] - this.start[0] == 0) {
// for (var i = this.start[1]; i < this.end[1]; i++) {
// var day = this.date[this.start[0]].year + this.type + this.setPull(this.date[this.start[0]]
// .month) + this.type + this.isFestival(
// this.start[0], i)
// price.push({
// day_str: day,
// price: this.priceStauts[this.start[0]][i]
// })
// }
// } else {
// for (var i = this.start[0]; i <= this.end[0]; i++) {
// console.log(i)
// if (i == this.start[0]) {
// for (var j = this.start[1]; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else if (i == this.end[0]) {
// for (var j = 0; j < this.end[1]; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// } else {
// for (var j = 0; j < this.date[i].day.length; j++) {
// var day = this.date[i].year + this.type + this.setPull(this.date[i].month) + this
// .type + this.isFestival(
// i, j)
// price.push({
// day_str: day,
// price: this.priceStauts[i][j]
// })
// }
// }
// }
// }
// //加入缓存
// uni.setStorage({
// key: 'Price',
// data: JSON.stringify(price)
// })
// }
//跳转到上一页
// uni.navigateBack({
// delta: 1
// })
},
}
};
</script>
<style>
/**确认按钮**/
.submit {
width: 100%;
background: white;
position: fixed;
bottom: 0upx;
height: auto;
}
.sub-btn {
height: auto;
border-radius: 10upx;
background: #111;
color: white;
}
.content {
height: 100%;
z-index: 999;
}
/**不能预订**/
/* 入住离开时间的color */
.bg-orange {
background: #111111 !important;
border-radius: 6px 0px 0px 6px !important;
}
.bg-higlt-orange {
background-color: #fff;
}
/* 节假日的日期样式 */
.is-festival {
font-size: 22rpx !important;
color: #000 !important;
}
/** 非节假日的日期样式**/
.not-festival {
font-size: 18upx;
color: white;
}
/***入住离开时间的日历样式*/
.not-sub {
color: #222222;
background: #dddddd;
}
.select-out-item {
background: #ffffff;
}
.select-style {
color: white !important;
font-size: 20rpx !important;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
.time-out {
/* text-decoration: line-through; */
color: #ccc !important;
}
/**
* 点击日期的样式
*/
.bg {
background: orange;
}
/**
* 日期部分
*/
.section {
width: 100%;
padding-bottom: 150upx;
height: auto;
padding-top: 176rpx;
background-color: #F1F4F6;
}
.section>.item>.year {
text-align: center;
height: 50rpx;
font-weight: bold;
/* padding-left:30upx;
padding-right: 30upx; */
font-size: 24rpx;
line-height: 50rpx;
color: #1B1D1E;
}
.section>.item>.day {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
.section>.item>.day>.day-list {
margin-top: 30upx;
margin-bottom: 30upx;
min-height: 100upx;
max-height: 180upx;
display: flex;
font-size: 26rpx;
flex-direction: column;
align-items: center;
justify-content: center;
color:#1B1D1E;
}
/**
* 头部固定
*/
.header {
position: fixed;
top: 0;
width: 100%;
/* height: 400upx; */
background: white;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
}
.bar {
width: 100%;
height: var(--status-bar-height);
background: #222222;
}
/**
* 关闭清空
*/
.set {
height: 100upx;
padding-left: 30upx;
padding-right: 30upx;
align-items: center;
display: flex;
justify-content: space-between;
}
/**
* 入住离开时间
*/
.in-and-out {
height: 210upx;
padding-left: 30upx;
padding-right: 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
/**
* 入住离开的view
*/
.in-and-out>.item {
display: flex;
flex-direction: column;
height: 100upx;
}
/**
* 未选择入离时间时的文字样式
*/
.in-and-out>.text {
margin-top: 100upx;
font-weight: bold;
font-size: 36upx;
color: #c0c0c0;
}
/**
* 一共选择了多少晚的样式
*/
.in-and-out>.item>.count-border {
width: 200upx;
font-size: 28upx;
height: 40upx;
margin-top: 48upx;
text-align: center;
}
.gray {
color: #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
.orange {
color: orange;
border-bottom: 1px solid orange;
}
/**
* 共多少晚
*/
.in-and-out>.item>.count-border>.count {
font-size: 10px;
}
/**
* 周一到周日
*/
.week {
/* height: 70upx; */
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
font-size: 24rpx;
color:#1B1D1E;
background: white;
margin-bottom: 16rpx;
}
.isa {
color: red;
}
.isa2 {
color: red;
}
</style>
pages/restaurant/detail.vue 0 → 100644
View file @ 64bac0a3
<template>
<view class="restaurant-detail">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper :list="imgsList" :effect3d="false" :height="407" :interval="5000" :border-radius="0"
@click="openPicture" name="picUrl" v-if="active==1"></u-swiper>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]"
style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
</view>
</view>
<view class="restaurant-title" :style="[titleStyle]">
<view @click="goback">
<u-icon name="arrow-left" size="44"></u-icon>
</view>
<view style="flex: 1;margin-left: 30rpx; text-align: left;">老兵烧烤-九寨特色</view>
</view>
<view class="restaurant-content">
<view class="restaurant-base">
<view class="head">
<view style="flex:1;">
<view class="restaurant-name">老兵烧烤-九寨特色</view>
<view class="restaurant-tag">
<u-tag style="margin-right: 22rpx;" text="小吃" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"/>
<u-tag style="margin-right: 22rpx;" text="九寨特色" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"/>
<u-tag style="margin-right: 22rpx;" text="米饭不给钱" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"/>
<u-tag style="margin-right: 22rpx;" text="酒水免费" mode="plain" border-color="#DFBE6E" color="#DFBE6E" size="mini"/>
</view>
</view>
<!-- 关注 -->
<view class="op-box">
<image v-if="!islike"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_840.png"
@click="changeLike"></image>
<image v-if="islike"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622453740000_764.png"
@click="changeLike"></image>
</view>
</view>
<view class="location" style="margin-bottom: 36rpx;padding-bottom: 36rpx;border-bottom: 1px solid rgba(0,0,0,.1);">
<view class="loc-left">
<view class="loc-name">
<u-icon name="clock" size="28" />
<text style="margin-left: 14rpx;">营业时间 11:30-12:30</text>
<u-tag style="margin-left: 22rpx;" text="营业中" bg-color="#DFBE6E" border-color="#DFBE6E" color="#ffffff"/>
</view>
<view class="loc-remark">
<view>无休息日，全年营业</view>
</view>
</view>
</view>
<view class="location" style="margin-bottom: 50rpx;">
<view class="loc-left">
<view class="loc-name">
<u-icon name="location" size="28" />
<text style="margin-left: 14rpx;">沟口 | 九寨沟风景区沟口</text>
</view>
<view class="loc-remark">
<view>距浦东国际机场14.5km，驾车约19min</view>
<view>距车站约1km，驾车约5min</view>
</view>
</view>
<view class="loc-right">
<text style="margin-right: 20rpx;">地图详情</text>
<u-icon name="arrow" size="20" />
</view>
</view>
<view class="empty-block" style="margin: 0 -50rpx;"></view>
<view class="big-title" style="margin-top: 50rpx;">
<text>推荐菜品</text>
</view>
<ul class="title-style-one hr">
<li>
<view class="item-title regular">鸡汤包饭</view>
</li>
<li>
<view class="item-title regular">土豆片</view>
</li>
<li>
<view class="item-title regular">鸡脚</view>
</li>
<li>
<view class="item-title regular">鸡汤包饭</view>
</li>
<li>
<view class="item-title regular">土豆片</view>
</li>
<li>
<view class="item-title regular">鸡脚</view>
</li>
</ul>
<view class="big-title">
<text>优惠套餐</text>
</view>
<view class="restaurant-room">
<view class="room-list">
<package-good></package-good>
<package-good-test></package-good-test>
</view>
</view>
</view>
<view class="empty-block"></view>
<view class="detail-box">
<view class="flex">
<view class="big-title">
<text>发现周边</text>
</view>
<view class="flex" style="margin-left: 64rpx;">
<view class="nearby-type" :class="{'active':nearbyType==0}" @click="changeNearbyType(0)">景区
</view>
<view class="nearby-type" :class="{'active':nearbyType==1}" @click="changeNearbyType(1)">美食
</view>
</view>
</view>
<view class="flex" style="margin: 50rpx 0;overflow-x: auto;">
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
<near-good></near-good>
</view>
<view class="flex">
<view class="big-title">
<text>精选推荐</text>
</view>
<view class="flex" style="margin-left: 64rpx;">
<view class="nearby-type active">附近满足条件酒店(2)</view>
</view>
</view>
<view>
<recommed-restaurant></recommed-restaurant>
<recommed-restaurant></recommed-restaurant>
</view>
</view>
</view>
</scroll-view>
<u-popup v-model="showTimePopup" mode="bottom" border-radius="20" length="85%" :safe-area-inset-bottom="true">
<canlendar @finish="chosenDateResult"></canlendar>
</u-popup>
</view>
</template>
<script>
import packageGood from './components/package-good.vue';
import packageGoodTest from './components/package-good2.vue';
import nearGood from './components/near-good.vue';
import recommedRestaurant from './components/recommed-restaurant.vue';
import canlendar from "./components/time/index.vue"
export default {
data() {
return {
imgsList: [{
picUrl: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1622459632000_216.png"
},
{
picUrl: "https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg"
},
{
picUrl: "https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg"
},
{
picUrl: "https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg"
}
],
id: 0,
typeList: [{
Id: 0,
Name: '视频'
}, {
Id: 1,
Name: '图片'
}],
boxOption: 0,
titleStyle: {},
mainColor: "",
showTimePopup: false,
controls: false,
videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
active: 1,
islike: false,
currentRoomType: 0,
nearbyType: 0,
searchObj: {
date: {}
},
threeLevelList: [{
name: "全部",
id: 0
},
{
name: "大床房",
id: 1
},
{
name: "双床房",
id: 2
},
{
name: "含早餐",
id: 3
},
{
name: "可取消",
id: 4
},
{
name: "优惠活动",
id: 5
}
]
}
},
components: {
packageGood,
packageGoodTest,
nearGood,
recommedRestaurant,
canlendar
},
created() {
let d1 = new Date();
let d = new Date();
let d2 = new Date(d.setDate(d.getDate() + 1))
var obj = {
start: `${d1.getFullYear()}-${d1.getMonth()+1}-${d1.getDate()}`,
end: `${d2.getFullYear()}-${d2.getMonth()+1}-${d2.getDate()}`,
startDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
endDay: `${this.getMonth(d1)}月${d1.getDate()}日`,
startWeek: this.getWeek(d1),
endWeek: this.getWeek(d2),
day: 1
}
uni.setStorage({
key: 'Time',
data: JSON.stringify(obj)
})
this.searchObj.date = obj
},
onLoad(options) {
// this.id=options.id
// this.ProjectType=options.type
let that = this
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity: "0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
goMap(name, lon, lat) {
wx.openLocation({
latitude:lat,
longitude:lon,
scale: 18,
name,
address:"武侯区科华中路 2 号",
success:(res)=>{
// console.log(res)
},
fail: (err) => {
// console.log(err)
}
})
},
openPicture(){
uni.navigateTo({
url:"/pages/restaurant/picture"
})
},
openDescription(){
uni.navigateTo({
url:"/pages/restaurant/description"
})
},
chosenDateResult(obj) {
obj.startDay = this.formatMonthDay(obj.startDay)
obj.endDay = this.formatMonthDay(obj.endDay)
this.searchObj.date = obj
this.showTimePopup = false
},
formatMonthDay(str) {
let temp = str.split('-')
temp[0] = temp[0] > 9 ? temp[0] : "0" + temp[0]
temp[1] = temp[1] > 9 ? temp[1] : "0" + temp[1]
return `${temp[0]}月${temp[1]}日`
},
getMonth(date) {
let m = date.getMonth() + 1
return m > 9 ? m : "0" + m
},
getDay(date) {
let d = date.getDate()
return d > 9 ? d : "0" + d
},
getWeek(date) {
let day = date.getDay();
if (day === 1) {
var week = "一";
} else if (day === 2) {
week = "二";
} else if (day === 3) {
week = "三";
} else if (day === 4) {
week = "四";
} else if (day === 5) {
week = "五";
} else if (day === 6) {
week = "六";
} else if (day === 7) {
week = "日";
}
return "周" + week
},
changeNearbyType(t) {
this.nearbyType = t
},
changeRoomType(i) {
this.currentRoomType = i
},
changeLike() {
this.islike = !this.islike
},
previewImage(i) {
// uni.previewImage({
// urls: this.imgsList,
// current: i,
// longPressActions: {
// itemList: ["发送给朋友", "保存图片", "收藏"],
// success: function(data) {},
// fail: function(err) {
// console.log(err.errMsg);
// },
// },
// });
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
this.$forceUpdate()
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction: 0
})
},
videoControl(e) {
if (e.detail.fullScreen == false) {
this.videoContext.stop()
this.controls = false
} else {
this.videoContext.play()
this.controls = true
}
},
goback() {
uni.navigateBack({
delta: 1,
});
},
changeHandler(i) {
this.active = i;
},
},
}
</script>
<style>
.restaurant-detail {
height: 100vh;
overflow: hidden;
width: 100vw;
font-family: 'pingfang';
}
.restaurant-detail .flex {
display: flex;
align-items: center;
}
.restaurant-detail .f12 {
font-size: 24rpx !important;
}
.restaurant-detail .king {
color: #DFBE6E !important;
}
.restaurant-detail .regular {
font-weight: 500 !important;
}
.restaurant-detail .restaurant-content {
position: relative;
z-index: 2;
top: -110rpx;
}
.restaurant-detail .restaurant-content .date-box {
margin: 30rpx 0;
background: #ECF1F4;
border-radius: 16rpx;
padding: 25rpx;
}
.restaurant-detail .restaurant-content .date-box .hr-line {
width: 24rpx;
height: 4rpx;
background: #222;
margin-right: 24rpx;
}
.restaurant-detail .restaurant-content .date-box .ver-line {
width: 1px;
height: 49rpx;
background: #A8A8A8;
opacity: 0.3;
margin-right: 24rpx;
}
.restaurant-detail .restaurant-content .date-box .date {
font-size: 24rpx;
font-weight: bold;
color: #111111;
margin-right: 24rpx;
}
.restaurant-detail .restaurant-content .date-box .date .date-week {
font-size: 24rpx;
font-weight: 500;
color: #6E6E6E;
margin-left: 18rpx;
}
.restaurant-detail .restaurant-content .restaurant-more-info {
width: 140rpx;
height: 60rpx;
line-height: 60rpx;
background: #FFFFFF;
border: 1px solid #111111;
border-radius: 8rpx;
margin: 0 auto;
font-size: 24rpx;
font-weight: 500;
color: #1F1F1F;
text-align: center;
}
.restaurant-detail .empty-block {
height: 20rpx;
background-color: #ECF1F4;
}
.restaurant-detail .restaurant-content .detail-box {
padding: 50rpx;
}
.restaurant-detail .restaurant-content .detail-box .nearby-type {
padding: 0 16rpx;
height: 40rpx;
background: #FFF;
border-radius: 20rpx;
margin-right: 10rpx;
font-size: 28rpx;
font-weight: 500;
color: #1F1F1F;
}
.restaurant-detail .restaurant-content .detail-box .nearby-type.active {
color: #DFBE6E;
background: rgba(223, 190, 110, .2);
}
.restaurant-detail .restaurant-content .title-style-one {
padding: 0;
margin: 50rpx 0;
display: block;
}
.restaurant-detail .restaurant-content .title-style-one.hr {
display: flex;
flex-wrap: wrap;
}
.restaurant-detail .restaurant-content .title-style-one.hr li {
width: 50%;
flex-shrink: 0;
margin: 0;
}
.restaurant-detail .restaurant-content .title-style-one li {
list-style: none;
margin-bottom: 40rpx;
padding-left: 33rpx;
position: relative;
}
.restaurant-detail .restaurant-content .title-style-one li::before {
content: ' ';
display: block;
width: 10rpx;
height: 10rpx;
background: #111111;
border-radius: 50%;
position: absolute;
left: 0;
top: 15rpx;
}
.restaurant-detail .restaurant-content .title-style-one li:last-child {
margin-bottom: 0px;
}
.restaurant-detail .restaurant-content .title-style-one li .item-title {
font-size: 28rpx;
font-weight: bold;
color: #1F1F1F;
margin-bottom: 20rpx;
}
.restaurant-detail .restaurant-content .title-style-one li .item-content {
font-size: 24rpx;
font-weight: 500;
color: #6E6E6E;
}
.restaurant-detail .restaurant-content .big-title {
position: relative;
}
.restaurant-detail .restaurant-content .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.restaurant-detail .restaurant-content .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1F1F1F;
position: relative;
z-index: 2;
}
.restaurant-detail .restaurant-content .restaurant-base .restaurant-room .room-type {
/* padding:10rpx 30rpx; */
display: flex;
align-items: center;
overflow-x: auto;
flex-wrap: nowrap;
}
.restaurant-detail .restaurant-content .restaurant-base .room-list {
padding-top: 40rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .restaurant-room .room-type .item {
padding: 16rpx 30rpx;
background: #ECF1F4;
border-radius: 8rpx;
margin-right: 26rpx;
font-size: 22rpx;
color: #999999;
font-weight: 400;
flex-shrink: 0;
}
.restaurant-detail .restaurant-content .restaurant-base .restaurant-room .room-type .item.active {
background: #111111;
color: #FFFFFF;
}
.restaurant-detail .restaurant-content .restaurant-base .restaurant-room .room-type .item:last-child {
margin-right: 0;
}
.restaurant-detail .restaurant-content .restaurant-base {
/* position: relative;
top: -140rpx; */
border-top-left-radius: 60rpx;
border-top-right-radius: 60rpx;
background-color: #FFF;
padding: 50rpx;
}
.location {
display: flex;
align-items: center;
}
.location .loc-left {
width: 1px;
flex: 1;
}
.location .loc-left .loc-name {
font-size: 28rpx;
font-weight: 800;
color: #111111;
display: flex;
align-items: center;
margin-bottom: 20rpx;
}
.location .loc-left .loc-remark {
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
line-height: 34rpx;
}
.location .loc-right {
font-size: 24rpx;
font-weight: 500;
color: #111111;
display: flex;
align-items: center;
}
.restaurant-detail .restaurant-content .restaurant-base .head {
display: flex;
align-items: center;
margin-bottom: 30rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .head .restaurant-name {
font-size: 36rpx;
font-weight: 800;
color: #111111;
}
.restaurant-detail .restaurant-content .restaurant-base .head .restaurant-tag {
margin-top: 20rpx;
/* font-size: 22rpx;
font-weight: 500;
color: #6E6E6E; */
}
.restaurant-detail .restaurant-content .restaurant-base .head .op-box{
margin-top: -175rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .head .op-box image {
width: 109rpx;
height: 109rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .shebei {
padding: 34rpx 0;
margin-bottom: 34rpx;
border-bottom: 1px solid rgba(0, 0, 0, .1);
display: flex;
align-items: center;
}
.restaurant-detail .restaurant-content .restaurant-base .shebei .sb-left {
width: 1px;
flex: 1;
display: flex;
align-items: center;
}
.restaurant-detail .restaurant-content .restaurant-base .shebei .sb-left .sb-item {
padding: 7rpx 13rpx;
background: #ECF1F4;
border-radius: 4rpx;
font-size: 22rpx;
font-weight: 500;
color: #111111;
margin-right: 10rpx;
}
.restaurant-detail .restaurant-content .restaurant-base .shebei .sb-right {
font-size: 24rpx;
font-weight: 500;
color: #111111;
display: flex;
align-items: center;
}
.restaurant-detail .restaurant-title {
line-height: 45px !important;
font-size: 16px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
color: #111;
box-sizing: content-box;
z-index: 5;
display: flex;
align-items: center;
background-color: #f6f6f6;
padding-left: 6rpx;
}
.restaurant-detail .media {
height: 407rpx;
position: relative;
z-index: 1;
}
.restaurant-detail .media .play-btn {
position: absolute;
left: 50%;
top: 50%;
margin-top: -49rpx;
margin-left: -49rpx;
width: 98rpx;
height: 98rpx;
border-radius: 20rpx;
background-color: rgba(255, 255, 255, .4);
display: flex;
align-items: center;
justify-content: center;
}
.restaurant-detail .media .video-box {
background-color: #111;
height: 407rpx;
position: relative;
}
.restaurant-detail .media .type-box {
width: 100px;
height: 50rpx;
position: absolute;
background-color: rgba(255, 255, 255, .6);
border-radius: 50rpx;
left: 50%;
bottom: 80px;
margin-left: -50px;
}
.restaurant-detail .media .media-info .type-img-box {
background-color: rgba(255, 255, 255, .5);
color: #FFF;
display: flex;
align-items: center;
height: 96rpx;
width: 96rpx;
padding: 8rpx;
border-radius: 12rpx;
position: relative;
}
.restaurant-detail .media .media-info .type-img-box image {
height: 80rpx;
width: 80rpx;
border-radius: 12rpx;
opacity: 0.5;
}
.restaurant-detail .media .media-info .type-img-box .content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
font-size: 20rpx;
color: #FFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-items: center;
}
.restaurant-detail .media .media-info .type-img-box text {
font-size: 22rpx;
font-family: pingfang;
margin-left: 6rpx;
}
.restaurant-detail .media .media-info {
position: absolute;
background-color: rgba(0, 0, 0, .35);
top: 287rpx;
bottom: 0;
left: 0;
right: 0;
padding:30rpx 50rpx;
}
.restaurant-detail .media .media-info .mi-left {
flex: 1;
}
</style>
pages/restaurant/list.vue
View file @ 64bac0a3
......@@ -10,7 +10,11 @@
<u-dropdown ref="uDropdown" @open="open" @close="close" active-color="#000" inactive-color="#444">
<u-dropdown-item v-model="searchObj.sort" :title="optionsTitle[0]" :options="options1" @change="change">
</u-dropdown-item>
<u-dropdown-item v-model="searchObj.enclosure" :title="optionsTitle[1]" :options="options2" @change="change2"></u-dropdown-item>
<u-dropdown-item :title="optionsTitle[1]" @change="change2">
<view class="slot-content">
<restaurant-type @sure-type="sureType" :current="currentTypeObj"></restaurant-type>
</view>
</u-dropdown-item>
<u-dropdown-item :title="optionsTitle[2]">
<view class="slot-content" style="padding: 30rpx;background-color: #FFF;">
<view>
......@@ -19,11 +23,11 @@
<view class="hotel-rate-box">
<view v-for="(x,i) in options2" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.types.indexOf(x.value)!=-1}" @click="setRestaurant(x.value)">{{x.label}}</view>
</view>
<view style="margin: 20rpx 0 29rpx 0;">
<text style="font-size: 28rpx;color:#111;font-weight: 800;">星级</text>
<view style="margin-top: 20rpx;">
<text style="font-size: 28rpx;color:#111;font-weight: 800;">价格</text>
</view>
<view class="hotel-rate-box">
<view v-for="(x,i) in rates" :key="i" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.value)!=-1}" @click="setHotelRate(x.value)">{{x.label}}</view>
<view v-for="(x,i) in rates" class="hotel-rate" :class="{'active':tempRateAndPrice.rate.indexOf(x.value)!=-1}" @click="setRestaurantPrice(x.value)">{{x.label}}</view>
</view>
<view style="box-shadow: 0px -10px 30px 0px rgba(36, 36, 36, 0.06);margin-top:40rpx;display: flex;">
<view style="flex:1;margin-right: 30rpx;">
......@@ -35,14 +39,10 @@
</view>
</view>
</u-dropdown-item>
<!-- <u-dropdown-item v-model="value2" :title="optionsTitle[3]" :options="options2"></u-dropdown-item> -->
</u-dropdown>
</view>
<view class="morewhere">
<view v-for="(x,i) in threeLevelList" class="item" @click="chosenMorewhere(x.id)" :class="{'active':searchObj.moreSearch.indexOf(x.id)!=-1}">{{x.name}}</view>
</view>
<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
@scroll="scroll" style="height: calc(100% - 224rpx); padding-bottom: 0px;">
@scroll="scroll" style="height: calc(100% - 168rpx); padding-bottom: 0px;">
<restaurant-good></restaurant-good>
<restaurant-good></restaurant-good>
<restaurant-good></restaurant-good>
......@@ -57,26 +57,23 @@
<script>
import rangeSlider from "./components/range-slider.vue"
import restaurantGood from './components/restaurant-good.vue';
import restaurantType from './components/restaurant-type.vue';
export default {
data() {
return {
value1: 1,
value2: 2,
searchObj:{
searchKey:"",
sort:1,
enclosure:-1,
rtype:-1,
rateAndPrice:{
price:{},
types:[-1],
priceText:"不限",
rate:[]
},
date:{},
moreSearch:[]
rate:[-1]
}
},
tempRateAndPrice:{
rate:[],
types:[]
rate:[-1],
types:[-1]
},
optionsTitle: [
"推荐排序",
......@@ -84,6 +81,10 @@
"筛选"
],
rates: [
{
label:"不限",
value:-1
},
{
label:"50以下",
value:1
......@@ -100,10 +101,9 @@
label:"150-200",
value:4
},
,
{
label:"200以上",
value:4
value:5
}
],
options1: [
......@@ -165,32 +165,6 @@
width: '100%',
background:"#111"
},
threeLevelList:[
{
name:"民宿",
id:0
},
{
name:"大床房",
id:1
},
{
name:"双床房",
id:2
},
{
name:"含早餐",
id:3
},
{
name:"免费取消",
id:4
},
{
name:"优惠活动",
id:5
}
],
loadText: {
loadmore: "轻轻上拉，加载更多",
loading: "努力加载中",
......@@ -202,11 +176,16 @@
},
showLoading:false,
status: "loadmore",
currentTypeObj:{
Id:-1,
active:0
}
}
},
components: {
rangeSlider,
restaurantGood
restaurantGood,
restaurantType
},
created() {
// uni.navigateTo({
......@@ -232,6 +211,7 @@
this.searchObj.date=obj
},
methods: {
scroll: function(e) {
this.old.scrollTop = e.detail.scrollTop;
},
......@@ -252,20 +232,19 @@
// this.status = "nomore";
// }
},
chosenMorewhere(id){
let i=this.searchObj.moreSearch.indexOf(id)
if(i==-1){
this.searchObj.moreSearch.push(id)
}else{
this.searchObj.moreSearch.splice(i,1)
}
},
setHotelRate(rateId){
let temp=this.tempRateAndPrice.rate.indexOf(rateId)
if(temp==-1){
this.tempRateAndPrice.rate.push(rateId)
setRestaurantPrice(rateId){
if(rateId==-1){
this.tempRateAndPrice.rate=[-1]
}else{
this.tempRateAndPrice.rate.splice(temp,1)
if(this.tempRateAndPrice.rate.indexOf(-1)!=-1){
this.tempRateAndPrice.rate.splice(this.tempRateAndPrice.rate.indexOf(-1),1)
}
let temp=this.tempRateAndPrice.rate.indexOf(rateId)
if(temp==-1){
this.tempRateAndPrice.rate.push(rateId)
}else{
this.tempRateAndPrice.rate.splice(temp,1)
}
}
},
setRestaurant(typeId){
......@@ -284,19 +263,23 @@
}
},
resetPrice(){
this.optionsTitle[2]="价格/星级"
this.optionsTitle[2]="筛选"
this.searchObj.rateAndPrice={
price:{
minValue:0,
maxValue:1000
},
types:[-1],
priceText:"不限",
rate:[]
rate:[-1]
}
this.closeDropdown();
},
surePrice(){
let result=""
if(this.tempRateAndPrice.types.length>0){
this.options2.forEach(x=>{
if(this.tempRateAndPrice.types.indexOf(x.value)!=-1){
result+=x.label+","
}
})
}
if(this.tempRateAndPrice.rate.length>0){
this.rates.forEach(x=>{
if(this.tempRateAndPrice.rate.indexOf(x.value)!=-1){
......@@ -304,16 +287,21 @@
}
})
}
if(this.tempRateAndPrice.priceText!="不限"){
result+=this.tempRateAndPrice.priceText
}
result=result==""?"价格/星级":result
result=result==""?"筛选":result
console.log(result)
this.optionsTitle[2]=result
this.$forceUpdate()
this.searchObj.rateAndPrice=this.tempRateAndPrice
this.closeDropdown();
},
sureType(item){
this.searchObj.rtype=item.Id
this.optionsTitle[1]=item.Id==-1?'菜系':item.Name
this.closeDropdown();
item.newTimespan=this.rand(1000,9999)
this.currentTypeObj=item
},
rangechange4(e){
if(e.minValue==0){
if(e.maxValue==1000){
......@@ -336,8 +324,16 @@
this.$refs.uDropdown.highlight();
if(index==2){
this.tempRateAndPrice=this.searchObj.rateAndPrice
}else if(index==1){
this.currentTypeObj.newTimespan=this.rand(1000,9999)
this.$forceUpdate()
console.log(this.currentTypeObj.newTimespan)
}
},
rand(min,max) {
return Math.floor(Math.random()*(max-min))+min;
},
close(index) {
// 关闭的时候，给当前项加上高亮
// 当然，您也可以通过监听dropdown-item的@change事件进行处理
......@@ -406,9 +402,10 @@
.hotel-rate-box{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.hotel-rate{
width: 160rpx;
width: 159rpx;
height: 60rpx;
background: #ECF1F4;
border-radius: 10rpx;
......@@ -418,6 +415,7 @@
margin-right: 15rpx;
text-align: center;
flex-shrink: 0;
margin-top: 29rpx;
}
.hotel-rate:last-child{
margin-right: 0;
......@@ -426,30 +424,4 @@
background: #111111;
color: #FFFFFF;
}
.hotel-list .morewhere{
padding:10rpx 30rpx;
display: flex;
align-items: center;
overflow-x: auto;
flex-wrap: nowrap;
}
.hotel-list .morewhere .item{
padding: 0 20rpx;
height: 36rpx;
line-height: 36rpx;
background: #ECF1F4;
border-radius: 8rpx;
margin-right: 26rpx;
font-size: 22rpx;
color: #999999;
font-weight: 400;
flex-shrink: 0;
}
.hotel-list .morewhere .item.active{
background: #111111;
color: #FFFFFF;
}
.hotel-list .morewhere .item:last-child{
margin-right: 0;
}
</style>
pages/restaurant/order.vue 0 → 100644
View file @ 64bac0a3
<template>
<view>
<view class="hotel-order">
<view class="o-head">
<view class="room-name">烧烤多人餐</view>
<view class="room-remark">需要提前1天下单预约</view>
<view class="big-title">
<text class=" f12">订餐必知</text>
</view>
<view class="rule">
<text class="king">此套餐节假日不可用</text>
<text>需要提前预约，餐厅营业时间为：周一至周日 09:00-21:00，请您提前安排好行程时间</text>
</view>
</view>
<view class="form">
<view class="form-items">
<view class="label">用餐人数</view>
<view class="val">
<u-number-box size="28" :min="1" :max="100" v-model="order.roomCount"></u-number-box>
</view>
</view>
<view class="form-items">
<view class="label">联系人</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="若是多人,输入代表人员即可" />
</view>
</view>
<view class="form-items">
<view class="label">联系电话</view>
<view class="val">
<input type="text" v-model="order.userName" placeholder="输入电话号码" />
</view>
</view>
</view>
<view class="empty-block"></view>
<view style="padding:50rpx 40rpx">
<view class="big-title">
<text>费用明细</text>
</view>
<view class="form" style="margin:40rpx 0;padding: 0;">
<view class="form-items">
<view class="label">
在线支付
</view>
<view class="val f14 regular" style="text-align: right;">
<text style="margin-right: 30rpx;">5分套餐</text>
<text class="red">￥3000</text>
</view>
</view>
<view class="form-items" style="border-bottom: none;">
<view class="label">
套餐明细
</view>
</view>
<view class="flex f12 grey">
<view style="flex:1">
<text style="margin-right: 30rpx;">烧烤多人餐</text>
</view>
<view style="text-align: right;">5份 × ¥600</view>
</view>
</view>
</view>
<view class="empty-block"></view>
</view>
<view class="opera-box">
<view class="box flex">
<view class="price">
<text class="f11">￥</text>
<text>3000</text>
</view>
<view class="sum-detail">共计 5份</view>
<u-button :ripple="true" :hair-line="false" :custom-style="btnStyle">立即购买</u-button>
</view>
</view>
</view>
</template>
<script>
export default{
data() {
return {
order: {
roomCount:1,
userName:''
},
btnStyle:{
height:"80rpx",
lineHeight:"80rpx",
borderRadius:"16rpx",
background:"#111",
color:"#FFF",
fontSize:"28rpx",
fontWeight:"600",
width:'193rpx',
}
}
},
created() {
uni.setNavigationBarTitle({
title: "九寨沟星宇国际大酒店",
});
},
}
</script>
<style>
.hotel-order{
color: #111111;
margin-bottom: 160rpx;
}
.opera-box{
background-color: #FFF;
padding: 20rpx 45rpx 40rpx 45rpx;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
.opera-box .box{
height: 100rpx;
background: #FFFFFF;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
border-radius: 16rpx;
display: flex;
align-items: center;
padding: 0 10rpx 0 36rpx;
}
.opera-box .box .price{
font-size: 40rpx;
font-weight: 500;
color: #D91818;
margin-right: 20rpx;
}
.opera-box .box .sum-detail{
font-size: 24rpx;
flex: 1;
font-weight: 500;
color: #6E6E6E;
}
.hotel-order .red{
color:#D91818 !important
}
.hotel-order .grey{
color:#6E6E6E !important
}
.hotel-order .form{
margin-top: 60rpx;
padding:0 45rpx;
}
.hotel-order .form .form-items{
margin-bottom: 40rpx;
display: flex;
align-items: center;
padding-bottom: 36rpx;
border-bottom:1px solid #f5f5f5;
font-size: 28px;
font-weight: 500;
}
.hotel-order .form .form-items:last-child{
border-bottom: none;
}
.hotel-order .form .form-items .label{
font-size: 28rpx;
font-weight: 600;
margin-right: 60rpx;
flex-shrink: 0;
}
.hotel-order .form .form-items .val{
flex:1;
}
.hotel-order .sheshi{
margin-top: 50rpx;
}
.hotel-order .sheshi .she-title{
font-size: 28rpx;
font-weight: 800;
}
.hotel-order .sheshi .she-content{
margin-top: 24rpx;
}
.hotel-order .sheshi .she-content text{
font-size: 24rpx;
font-weight: 500;
color: #4A4A4A;
line-height: 40rpx;
margin-right: 24rpx;
}
.hotel-order .form .form-items .val input{
border:none;
padding: 0;
margin: 0;
outline: none;
height: 38rpx;
line-height: 38rpx;
font-size: 28rpx;
font-weight: 500;
width: 100%;
}
.hotel-order .king {
color: #DFBE6E !important;
}
.hotel-order .f12 {
font-size:24rpx !important;
}
.f11 {
font-size:22rpx !important;
}
.hotel-order .f14 {
font-size:28rpx !important;
}
.hotel-order .regular {
font-weight: 500 !important;
}
.hotel-order .flex{
display: flex;
align-items: center;
}
.hotel-order .empty-block{
height: 20rpx;
background: #ECF1F4;
}
.hotel-order .flex-wrap{
flex-wrap: wrap;
}
.hotel-order .o-head{
padding: 45rpx;
background: #FFFFFF;
box-shadow: 0px 2rpx 15rpx 0px rgba(76, 76, 76, 0.13);
border-radius: 0px 0px 60rpx 60rpx;
}
.hotel-order .o-head .o-timer{
height: 100rpx;
background: #ECF1F4;
border-radius: 20rpx;
padding: 0 40rpx;
}
.hotel-order .o-head .o-timer .time-item{
font-size: 32rpx;
font-weight: 800;
flex:1;
}
.hotel-order .o-head .o-timer .time-item:last-child{
text-align: right;
}
.hotel-order .o-head .o-timer .time-split{
font-size: 24rpx;
font-weight: 400;
text-align: center;
}
.hotel-order .o-head .room-name{
font-size: 32rpx;
font-weight: bold;
margin-top: 40rpx;
margin-bottom: 10rpx;
}
.hotel-order .o-head .room-remark{
font-size: 28rpx;
font-weight: 500;
padding-bottom:30rpx;
margin-bottom: 30rpx;
border-bottom: 1px solid #E7E7E7;
}
.hotel-order .o-head .rule{
font-size: 22rpx;
font-weight: 500;
color: #6E6E6E;
margin-top: 18rpx;
}
.hotel-order .big-title {
position: relative;
}
.hotel-order .big-title::before {
display: block;
width: 71rpx;
height: 12rpx;
background: #DFBE6E;
border-radius: 4rpx;
content: ' ';
position: absolute;
left: 0;
bottom: 6rpx;
z-index: 1;
}
.hotel-order .big-title text {
font-size: 34rpx;
font-weight: bold;
color: #1F1F1F;
position: relative;
z-index: 2;
}
</style>
pages/restaurant/picture.vue 0 → 100644
View file @ 64bac0a3
<template>
<view>
<scroll-view scroll-y="true" class="hotel-pic">
<view class="content">
<view class="left">
<view v-for="(x,i) in jiList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
<image :src="x.picUrl" mode="widthFix"></image>
</view>
</view>
<view class="right">
<view v-for="(x,i) in ouList" :key="i" class="image-box" @click="previewImage(x.picUrl)">
<image :src="x.picUrl" mode="widthFix"></image>
</view>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
imageList:[
{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
},{
picUrl:"https://ak-d.tripcdn.com/images/200j13000000v60wjE77D_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/t1/hotel/533000/532930/3fcc6398b3c44c08bb1b57aef579793e_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/20010r000000hmqk32EF2_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"https://ak-d.tripcdn.com/images/200v0f0000007d6wgBCD6_R_1080_808_R5_D.jpg",
type:"酒店"
},
{
picUrl:"http://imgfile.oytour.com/Upload/DMC/202105251114114560000000058.png",
type:"酒店"
},
{
picUrl:"https://dimg07.c-ctrip.com/images/01066120008jk5bcc94AC_C_1600_1200.jpg",
type:"酒店"
}
],
jiList:[],
ouList:[],
allImageSrc:[]
}
},
created() {
uni.setNavigationBarTitle({
title: "酒店图片",
});
this.imageList.forEach((x,i)=>{
this.allImageSrc.push(x.picUrl)
if(i%2==0){
this.jiList.push(x)
}else{
this.ouList.push(x)
}
})
console.log(this.jiList,this.ouList)
},
mounted () {
},
methods: {
previewImage(src) {
uni.previewImage({
urls: this.allImageSrc,
current: src,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
}
},
}
</script>
<style>
.hotel-pic{
height: 100vh;
width: 100vw;
}
.hotel-pic .content{
display: flex;
align-items: flex-start;
padding: 44rpx;
padding-top: 14rpx;
}
.hotel-pic .content .left{
flex:1;
margin-right: 15rpx;
}
.hotel-pic .content .right{
flex:1;
margin-left: 15rpx;
}
.hotel-pic .content .image-box{
width:100%;
margin-top: 30rpx;
}
.hotel-pic .content .image-box image{
width: 100%;
border-radius: 20rpx;
}
</style>
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