Skip to content

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

餐厅所有静态页面

parent be566b3d
Expand all 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
This diff is collapsed.
pages/restaurant/detail.vue 0 → 100644
View file @ 64bac0a3
This diff is collapsed.
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