miniprogram / wineshopyuyue · 提交

转到一个项目

作者 王毅
提交 1ea4a8617cf144ea1bffcd1fccbd462795679ebe 1 个父辈 fd1996a5

个人中心

内嵌 并排对比
正在显示 45 个修改的文件 包含 166 行增加 和 4048 行删除
{
"pages": [
"pages/hoteldetail/hoteldetail",
"pages/ruzhuxuzhi/ruzhuxuzhi",
"pages/jiudiandetail/jiudiandetail",
"pages/fangxingintro/fangxingintro",
"pages/yudingfinish/yudingfinish",
"pages/yuding/yuding",
"pages/roomdetail/roomdetail",
"pages/gongluedetail/gongluedetail",
"pages/selectcity/selectcity",
"pages/houselist/houselist",
"pages/experience/experience",
"pages/gonglue/gonglue",
"pages/tiyan/tiyan",
"pages/huiyuanxieyi/huiyuanxieyi",
"pages/zhucexieyi/zhucexieyi",
"pages/huiyuanindex/huiyuanindex",
"pages/huiyuan/huiyuan",
"pages/yudingzhinan/yudingzhinan",
"pages/wantruzhu/wantruzhu",
"pages/opencity/opencity",
"pages/lixiangzhong/lixiangzhong",
"pages/login/login",
"pages/index/index",
"pages/logs/logs"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
"pages": [
"pages/selectcity/selectcity",
"pages/houselist/houselist",
"pages/experience/experience",
"pages/gongluedetail/gongluedetail",
"pages/gonglue/gonglue",
"pages/tiyan/tiyan",
"pages/huiyuanxieyi/huiyuanxieyi",
"pages/zhucexieyi/zhucexieyi",
"pages/huiyuanindex/huiyuanindex",
"pages/huiyuan/huiyuan",
"pages/yudingzhinan/yudingzhinan",
"pages/wantruzhu/wantruzhu",
"pages/opencity/opencity",
"pages/lixiangzhong/lixiangzhong",
"pages/login/login",
"pages/index/index",
"pages/logs/logs",
"pages/mine/mine",
"pages/mine_order/mine_order",
"pages/mine_wallet/mine_wallet",
"pages/mine_collect/mine_collect",
"pages/mine_kefu/mine_kefu",
"pages/mine_question/mine_question",
"pages/mine_exchange/mine_exchange",
"pages/mine_notice/mine_notice",
"pages/mine_set/mine_set",
"pages/mine_detail/mine_detail",
"pages/mine_details/mine_details",
"pages/mine_experience/mine_experience"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
\ No newline at end of file
... ...
... ... @@ -7,77 +7,10 @@
top: 0;
left: 0;
right: 0;
z-index: 99;
z-index: 5;
}
image{
width:100%;
height:100%;
}
/* 轮播图 */
.swiper_image{
width:750rpx;
height:376rpx;
font-size: 0;
margin: 30rpx auto 0;
position: relative;
box-shadow:0px -1px 6px 0px rgba(212,137,96,0.11);
}
.swiper_item_img{
height:376rpx;
}
.swiper_image image{
width:100%;
height:100%;
/* box-shadow:0px -1px 6px 0px rgba(212,137,96,0.11); */
}
.swiper_item_img swiper-item{
width:686rpx;
height:376rpx;
box-shadow:0px -1px 6px 0px rgba(212,137,96,0.11);
display:felx;
align-items: center;justify-content: center;
}
.swiper_item_img swiper-item image{
width:100%;
height:100%;
}
.dots{
/* width: 156rpx; */
display: flex;
align-items: center;
flex-direction: row;
position: absolute;
justify-content: center;
left: 0;
right:0;
bottom: 20rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
margin-right: 26rpx;
background-color:#fff;
}
/*选中以后的小圆点样式 */
.active{
width: 12rpx;
height: 12rpx;
border-radius:50%;
background-color: #FF5A4E;
}
\ No newline at end of file
... ...
// pages/hoteldetail/hoteldetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
selitem: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
selkind(e) {
this.setData({
selitem: e.currentTarget.dataset.type
})
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class="minsuintor">
<view class="minsutou">蔓图精品民宿</view>
<view class="suconcatbox">
<view class="suhead suheadone">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/ditu.png"></image>
</view>
<view class="sunheadword">北京海淀区蔓图精品民宿</view>
</view>
<view class="suheadright">
<image src="/img/dianhua.png"></image>
</view>
</view>
<view class="suhead suheadsec">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/haibao.png"></image>
</view>
<view class="sunheadword">08月29日-08月31日</view>
</view>
<view class="ruzhuright">
<view class="ruzhu">
入住
<text class="ruzhunum">2</text>晚
</view>
<view class="ruzhuyou">
<image src="/img/yourow.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="minsulist">
<view class='minsuitem {{selitem==1?"selactive":""}}' bindtap="selkind" data-type="1">房型介绍</view>
<view class='minsuitem {{selitem==2?"selactive":""}}' bindtap="selkind" data-type="2">酒店介绍</view>
<view class='minsuitem {{selitem==3?"selactive":""}}' bindtap="selkind" data-type="3">入住须知</view>
<view class='minsuitem {{selitem==4?"selactive":""}}' bindtap="selkind" data-type="4">游玩攻略</view>
</view>
<!--房型介绍 -->
<view class="fangjieshao" wx:if="{{selitem==1}}">
<view class="fangjieshaoitem">
<view class="fangjietop">
<image src="/img/tuijianimg3.png"></image>
</view>
<view class="fangjiebot">
<view class="fangjieleft">尊享大床房</view>
<view class="fangjieprice">￥197</view>
</view>
<view class="fangjiabot">
<view class="fangjiabotleft">
<view class="fangjiabotlefttop">55㎡ 1张1.8米大床</view>
<view class="kindtext">
<text class="fangjiabotbottom">有窗</text>
<text class="jinzhang">房屋紧张</text>
</view>
</view>
<view class="yudingqita">
<view class="yudingqitaleft">预定其他日期</view>
<view class="yudingyou">
<image src="/img/whiteyourow.png"></image>
</view>
</view>
<!-- <view class="fangjiabotright">免费预订</view> -->
</view>
</view>
<view class="fangjieshaoitem">
<view class="fangjietop">
<image src="/img/tuijianimg3.png"></image>
</view>
<view class="fangjiebot">
<view class="fangjieleft">尊享大床房</view>
<view class="fangjieprice">￥197</view>
</view>
<view class="fangjiabot">
<view class="fangjiabotleft">
<view class="fangjiabotlefttop">55㎡ 1张1.8米大床</view>
<view class="fangjiabotbottom">有窗</view>
</view>
<view class="fangjiabotright">免费预订</view>
</view>
</view>
<view class="fangjieshaoitem">
<view class="fangjietop">
<image src="/img/tuijianimg3.png"></image>
</view>
<view class="fangjiebot">
<view class="fangjieleft">尊享大床房</view>
<view class="fangjieprice">￥197</view>
</view>
<view class="fangjiabot">
<view class="fangjiabotleft">
<view class="fangjiabotlefttop">55㎡ 1张1.8米大床</view>
<view class="fangjiabotbottom">有窗</view>
</view>
<view class="fangjiabotright">免费预订</view>
</view>
</view>
</view>
<!-- 酒店介绍 -->
<view class="jiudianbigbox" wx:if="{{selitem==2}}">
<!-- 酒店介绍 -->
<view class="jiudianintortext">
<view class="jiudainjie">
<view class="jiudianjieleft">酒店介绍</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jieshaojiu.png"></image>
</view>
<view class="jiudianhuan">周边环境</view>
</view>
<view class="zhoubiantext">
上海艾格瑞公寓位于具有“上海缩影”之称的虹口，坐拥浦江繁华内环核心，占据内环具有价值“黄金三角生活圈”。公寓毗邻瑞虹天地商圈、四川北路商圈、海伦路商圈之众多商场和写字楼，步行可达和平公园、鲁迅公园、1933老场坊、多伦路文化名人街，乘车前往外滩、陆家嘴约十余分钟。 　　公寓设有标准层和行政层，标准层设有7种各具特色的北欧风房型，行政层设有3种舒适简约套房房型，每间房间配有无线上网服务。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/shejistyle.png"></image>
</view>
<view class="jiudianhuan">设计风格</view>
</view>
<view class="zhoubiantext">
酒店设计现代、简约。 游玩回到水晶可以在露台喝茶聊天，看书发呆。尽情享受度假时光。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jiaotong.png"></image>
</view>
<view class="jiudianhuan">交通路线</view>
</view>
<view class="zhoubiantext">
酒店临近16号线永丰南站，步行4分钟即可到达地铁站；
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/tuijianreson.png"></image>
</view>
<view class="jiudianhuan">推荐理由</view>
</view>
<view class="zhoubiantext">
公寓内还设有健身房、咖啡厅、公共会客厅、棋牌桌游吧、会议室、商务中心等设施。在这里，可以充分感受上海气息的品质居住体验，愿能成为您商务、旅行下榻的优选。
</view>
</view>
</view>
<!-- 设施服务 -->
<view class="jiudianintortext">
<view class="jiudainjie">
<view class="jiudianjieleft">设施服务</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiaotong">
<view class="jiaotongitem">
<view class="jiaotongtop">交通服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">免费停车</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">自行车租赁服务</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">餐饮服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">中餐厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">咖啡厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">送餐服务</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">烧烤</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">网络设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">客房WIFI</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">公共区域WIFI</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">娱乐和健身设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">茶室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">健身房</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">服务项目</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">会议室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">全天前天</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="jiudianbottom">
<view class="jiudianbottomleft">
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/pin.png"></image>
</view>
<view class="jiudianitembot">首页</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/kefu.png"></image>
</view>
<view class="jiudianitembot kename">客服</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/shou.png"></image>
</view>
<view class="jiudianitembot">收藏</view>
</view>
</view>
<view class="jiudianbottomright">购买会员免费入住</view>
</view>
page {
background: #F9F9F9;
}
.minsuintor {
padding: 40rpx 44rpx;
box-sizing: border-box;
background: #fff;
}
.minsutou {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
}
.suhead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 32rpx 30rpx 0;
box-sizing: border-box;
}
.suheadone {
margin-top: 32rpx;
}
.suheadsec {
margin-top: 16rpx;
}
.suheadleft {
display: flex;
align-items: center;
}
.suheadleimg {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.sunheadword {
color: #06121e;
font-size: 28rpx;
margin-left: 12rpx;
}
.suheadright {
width: 44rpx;
height: 44rpx;
font-size: 0;
}
.ruzhu {
color: #06121e;
font-size: 28rpx;
}
.ruzhunum {
color: #ff5a4e;
font-size: 28rpx;
}
.ruzhuright {
display: flex;
align-items: center;
}
.ruzhuyou {
width: 18rpx;
height: 18rpx;
font-size: 0;
margin-left: 16rpx;
}
.minsulist {
display: flex;
align-items: center;
padding: 32rpx 58rpx;
box-sizing: border-box;
justify-content: space-between;
background: #fff;
margin-top:20rpx;
}
.minsuitem {
color: #06121e;
font-size: 26rpx;
}
.selactive {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
position: relative;
}
.selactive::after {
position: absolute;
display: block;
content: '';
width: 48rpx;
height: 6rpx;
background: #ff5a4e;
left: 50%;
right: 50%;
transform: translateX(-50%);
bottom: -12rpx;
border-radius: 4rpx;
}
.judianjieright {
width: 34rpx;
height: 34rpx;
font-size: 0;
}
.jiudainjie {
width: 686rpx;
margin: 24rpx auto 0;
padding: 38rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20rpx;
}
.jiudianjieleft {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
}
.fuwujie {
margin-bottom: 52rpx;
}
.jiudianbottomleft {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 34rpx;
box-sizing: border-box;
width: 350rpx;
}
.jiudianbottomright {
width: 400rpx;
height: 98rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 98rpx;
}
.jiudianbottom {
display: flex;
align-items: center;
}
.jiudianitem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.jiudianitemtop {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.jiudianitembot {
color: #bdc4ce;
font-size: 22rpx;
}
.kename {
color: #ff5a4e;
font-size: 22rpx;
}
.fangjietop {
width: 686rpx;
height: 320rpx;
font-size: 0;
margin: 28rpx auto 0;
}
.fangjieshao {
padding: 0 32rpx 0rpx;
box-sizing: border-box;
margin-bottom:54rpx;
}
.fangjieleft {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
}
.fangjiebot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 32rpx;
padding: 0 32rpx;
box-sizing: border-box
}
.fangjieprice {
color: #ff5a4e;
font-size: 24rpx;
font-weight: bold;
}
.fangjiabot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top:14rpx;
padding: 0 32rpx;
box-sizing: border-box
}
.fangjiabotlefttop {
color: #8c9198;
font-size: 24rpx;
}
.fangjiabotbottom {
color: #ff5a4e;
font-size: 22rpx;
}
.jinzhang{
color:#EB9E52;
font-size: 22rpx;
margin-left:40rpx;
}
.fangjiabotright {
width: 150rpx;
height: 60rpx;
background: rgba(255, 90, 78, 1);
opacity: 1;
border-radius: 40rpx;
color:#fff;
font-size: 28rpx;
text-align: center;
line-height: 60rpx
}
.fangjieshaoitem{
background: #fff;
padding-bottom: 30rpx
}
.yudingqita{
width:240rpx;
height:60rpx;
background:rgba(255,90,78,1);
opacity:1;
border-radius:40rpx;
display:flex;
align-items: center;
padding: 0 24rpx;
box-sizing: border-box
}
.yudingqitaleft{
color:#fff;
font-size: 28rpx;
}
.yudingyou{
width:22rpx;
height:22rpx;
font-size: 0;
margin-left:5rpx;
}
\ No newline at end of file
... ... @@ -5,16 +5,7 @@ Page({
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
},
/**
... ... @@ -24,12 +15,6 @@ Page({
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
... ...
<!-- <view class="gongdetailtop">
<view class="gongdetailtop">
<image src="/img/tuijianimg1.png"></image>
<view class="dongdetailbot">
</view> -->
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dongdetailbot">
<view class="topimg">
<image src="/img/hong.png"></image>
</view>
<view class="zhongcaoname">58人种草</view>
<view class="topimg">
<image src="/img/hong.png"></image>
</view>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
<view class="zhongcaoname">58人种草</view>
</view>
</view>
</view>
<view class="gongdetailbox">
<view class="detailboxhead">
<view class="detailboxtop">西湖美景民宿</view>
... ...
... ... @@ -156,7 +156,4 @@ page {
height:20rpx;
font-size: 0;
margin-left:10rpx;
}
.swiper_image{
position: relative
}
\ No newline at end of file
... ...
// pages/hoteldetail/hoteldetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
selitem:4
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
selkind(e){
this.setData({
selitem:e.currentTarget.dataset.type
})
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "酒店详情"
}
\ No newline at end of file
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class="minsuintor">
<view class="minsutou">蔓图精品民宿</view>
<view class="suconcatbox">
<view class="suhead suheadone">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/ditu.png"></image>
</view>
<view class="sunheadword">北京海淀区蔓图精品民宿</view>
</view>
<view class="suheadright">
<image src="/img/dianhua.png"></image>
</view>
</view>
<view class="suhead suheadsec">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/haibao.png"></image>
</view>
<view class="sunheadword">08月29日-08月31日</view>
</view>
<view class="ruzhuright">
<view class="ruzhu">
入住
<text class="ruzhunum">2</text>晚
</view>
<view class="ruzhuyou">
<image src="/img/yourow.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="minsulist">
<view class='minsuitem {{selitem==1?"selactive":""}}' bindtap="selkind" data-type="1">房型介绍</view>
<view class='minsuitem {{selitem==2?"selactive":""}}' bindtap="selkind" data-type="2">酒店介绍</view>
<view class='minsuitem {{selitem==3?"selactive":""}}' bindtap="selkind" data-type="3">入住须知</view>
<view class='minsuitem {{selitem==4?"selactive":""}}' bindtap="selkind" data-type="4">游玩攻略</view>
</view>
<!-- 房型介绍 -->
<view class="fangxing" wx:if="{{selitem==1}}">
<view class="jiudainjie">
<view class="jiudianjieleft">酒店介绍</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudainjie fuwujie">
<view class="jiudianjieleft">设施服务</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
</view>
<!-- 酒店介绍 -->
<view class="jiudianbigbox" wx:if="{{selitem==2}}">
<view class="jiudianintortext">
<view class="jiudainjieintro">
<view class="jiudianjieleft">酒店介绍</view>
<view class="judianjieright intoryou">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jieshaojiu.png"></image>
</view>
<view class="jiudianhuan">周边环境</view>
</view>
<view class="zhoubiantext">
上海艾格瑞公寓位于具有“上海缩影”之称的虹口，坐拥浦江繁华内环核心，占据内环具有价值“黄金三角生活圈”。公寓毗邻瑞虹天地商圈、四川北路商圈、海伦路商圈之众多商场和写字楼，步行可达和平公园、鲁迅公园、1933老场坊、多伦路文化名人街，乘车前往外滩、陆家嘴约十余分钟。 　　公寓设有标准层和行政层，标准层设有7种各具特色的北欧风房型，行政层设有3种舒适简约套房房型，每间房间配有无线上网服务。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/shejistyle.png"></image>
</view>
<view class="jiudianhuan">设计风格</view>
</view>
<view class="zhoubiantext">
酒店设计现代、简约。 游玩回到水晶可以在露台喝茶聊天，看书发呆。尽情享受度假时光。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jiaotong.png"></image>
</view>
<view class="jiudianhuan">交通路线</view>
</view>
<view class="zhoubiantext">
酒店临近16号线永丰南站，步行4分钟即可到达地铁站；
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/tuijianreson.png"></image>
</view>
<view class="jiudianhuan">推荐理由</view>
</view>
<view class="zhoubiantext">
公寓内还设有健身房、咖啡厅、公共会客厅、棋牌桌游吧、会议室、商务中心等设施。在这里，可以充分感受上海气息的品质居住体验，愿能成为您商务、旅行下榻的优选。
</view>
</view>
</view>
<!-- 设施服务 -->
<view class="jiudianintortext">
<view class="jiudainjieintro">
<view class="jiudianjieleft">设施服务</view>
<view class="judianjieright intoryou">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiaotong">
<view class="jiaotongitem">
<view class="jiaotongtop">交通服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">免费停车</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">自行车租赁服务</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">餐饮服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">中餐厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">咖啡厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">送餐服务</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">烧烤</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">网络设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">客房WIFI</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">公共区域WIFI</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">娱乐和健身设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">茶室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">健身房</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">服务项目</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">会议室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">全天前天</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 入住须知 -->
<view class="ruzhuxuzhi" wx:if="{{selitem==3}}">
<view class="ruzhuxuname">入住须知</view>
<view></view>
</view>
<!-- 游玩攻略 -->
<view class="youwangong" wx:if="{{selitem==4}}">
<view class="youwanitem">
<view class="youwantop">在·杭州</view>
<view class="youwantextname">为您解锁地区</view>
<view class='youwanimgbox'>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
</view>
<view class="youwantext">杭州处于亚热带季风区，四季分明，、夏季气候炎热，湿润，是新四大火炉之一。相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。</view>
</view>
<view class="youwanitem">
<view class="youwantop">在·杭州</view>
<view class="youwantextname">为您解锁地区</view>
<view class='youwanimgbox'>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
</view>
<view class="youwantext">杭州处于亚热带季风区，四季分明，、夏季气候炎热，湿润，是新四大火炉之一。相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。</view>
</view>
<view class="youwanitem">
<view class="youwantop">在·杭州</view>
<view class="youwantextname">为您解锁地区</view>
<view class='youwanimgbox'>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
</view>
<view class="youwantext">杭州处于亚热带季风区，四季分明，、夏季气候炎热，湿润，是新四大火炉之一。相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。</view>
</view>
<view class="youwanitem">
<view class="youwantop">在·杭州</view>
<view class="youwantextname">为您解锁地区</view>
<view class='youwanimgbox'>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
</view>
<view class="youwantext">杭州处于亚热带季风区，四季分明，、夏季气候炎热，湿润，是新四大火炉之一。相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。</view>
</view>
<view class="youwanitem">
<view class="youwantop">在·杭州</view>
<view class="youwantextname">为您解锁地区</view>
<view class='youwanimgbox'>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
<view class="youwanimg">
<image src="/img/lineimg2.png"></image>
</view>
</view>
<view class="youwantext">杭州处于亚热带季风区，四季分明，、夏季气候炎热，湿润，是新四大火炉之一。相反，冬季寒冷，干燥。春秋两季气候宜人，是观光旅游的黄金季节。</view>
</view>
</view>
<view class="jiudianbottom">
<view class="jiudianbottomleft">
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/pin.png"></image>
</view>
<view class="jiudianitembot">首页</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/kefu.png"></image>
</view>
<view class="jiudianitembot kename">客服</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/shou.png"></image>
</view>
<view class="jiudianitembot">收藏</view>
</view>
</view>
<view class="jiudianbottomright">购买会员免费入住</view>
</view>
\ No newline at end of file
page {
background: #f7f7f7;
}
.minsuintor {
padding: 40rpx 44rpx;
box-sizing: border-box;
background: #fff;
}
.minsutou {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
}
.suhead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 32rpx 30rpx 0;
box-sizing: border-box;
}
.suheadone {
margin-top: 32rpx;
}
.suheadsec {
margin-top: 16rpx;
}
.suheadleft {
display: flex;
align-items: center;
}
.suheadleimg {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.sunheadword {
color: #06121e;
font-size: 28rpx;
margin-left: 12rpx;
}
.suheadright {
width: 44rpx;
height: 44rpx;
font-size: 0;
}
.ruzhu {
color: #06121e;
font-size: 28rpx;
}
.ruzhunum {
color: #ff5a4e;
font-size: 28rpx;
}
.ruzhuright {
display: flex;
align-items: center;
}
.ruzhuyou {
width: 18rpx;
height: 18rpx;
font-size: 0;
margin-left: 16rpx;
}
.minsulist {
display: flex;
align-items: center;
padding: 32rpx 58rpx;
box-sizing: border-box;
justify-content: space-between;
background: #fff;
}
.minsuitem {
color: #06121e;
font-size: 26rpx;
}
.selactive {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
position: relative;
}
.selactive::after {
position: absolute;
display: block;
content: '';
width: 48rpx;
height: 6rpx;
background: #ff5a4e;
left: 50%;
right: 50%;
transform: translateX(-50%);
bottom: -12rpx;
border-radius: 4rpx;
}
.judianjieright {
width: 34rpx;
height: 34rpx;
font-size: 0;
}
.jiudainjie {
width: 686rpx;
margin: 24rpx auto;
padding: 38rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20rpx;
background: #fff;
}
.jiudainjieintro {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40rpx 0;
box-sizing: border-box;
}
.jiudianjieleft {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
}
.fuwujie {
margin-bottom: 52rpx;
}
.jiudianbottomleft {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 34rpx;
box-sizing: border-box;
width: 350rpx;
background: #fff;
}
.jiudianbottomright {
width: 400rpx;
height: 98rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 98rpx;
}
.jiudianbottom {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
}
.jiudianitem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.jiudianitemtop {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.jiudianitembot {
color: #bdc4ce;
font-size: 22rpx;
}
.kename {
color: #ff5a4e;
font-size: 22rpx;
}
.jiudianboxtop {
display: flex;
align-items: center;
margin-top: 38rpx;
}
.jiudiantopleft {
width: 48rpx;
height: 48rpx;
font-size: 0;
}
.jiudianintortext {
width: 686rpx;
margin: 24rpx auto 0;
padding: 0 32rpx 24rpx;
box-sizing: border-box;
box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20px;
background: #fff;
}
.jiudianhuan {
color: #06121e;
font-size: 32rpx;
margin-left: 10rpx;
}
.zhoubiantext {
color: #5b5e63;
font-size: 28rpx;
margin-top: 24rpx;
}
.jiudianbigbox {
margin-bottom: 156rpx;
}
.jiaotongtop {
color: #06121e;
font-size: 30rpx;
}
.jiaotongitemleft {
width: 48rpx;
height: 48rpx;
font-size: 0;
}
.jiaotongbottomitem {
display: flex;
align-items: center;
margin-top: 16rpx;
margin-right: 40rpx;
}
.jiaotongitemname {
color: #5b5e63;
font-size: 28rpx;
margin-left: 12rpx;
}
.jiaotongbottom {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.jiaotongitem {
margin-top: 20rpx;
}
.fangxing {
margin-bottom: 146rpx;
}
.intoryou {
width: 30rpx;
height: 30rpx;
font-size: 0;
transform: rotate(90deg);
}
/* 入住须知 */
.ruzhuxuzhi {
width: 686rpx;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20rpx;
padding: 40rpx 32rpx;
box-sizing: border-box;
margin: 24rpx auto 0;
}
.ruzhuxuname{
color:#06121E;
font-size: 32rpx;
font-weight: bold;
}
.youwangong{
/* padding: 50rpx 0rpx 50rpx 32rpx;
box-sizing: border-box; */
background: #fff;
margin-top:24rpx;
margin-bottom:156rpx;
}
.youwanitem{
padding:50rpx 0 50rpx 32rpx;
box-sizing: border-box
}
/* 游玩攻略 */
.youwantop{
color:#06121E;
font-size: 36rpx;
font-weight:bold;
}
.youwantextname{
color:#8C9198;
font-size: 24rpx;
margin-top:5rpx;
}
.youwanimgbox{
display:flex;
align-items: center;
overflow-x: scroll;
margin-top:34rpx;
}
.youwanimg{
width:670rpx;
height: 392rpx;
font-size: 0;
flex:0 0 auto;
margin-right:20rpx;
}
.youwantext{
color:#06121E;
font-size: 28rpx;
width:656rpx;
margin:34rpx auto 0;
}
\ No newline at end of file
// pages/hoteldetail/hoteldetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
selitem: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
selkind(e) {
this.setData({
selitem: e.currentTarget.dataset.type
})
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "酒店详情"
}
\ No newline at end of file
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class="minsuintor">
<view class="minsutou">蔓图精品民宿</view>
<view class="suconcatbox">
<view class="suhead suheadone">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/ditu.png"></image>
</view>
<view class="sunheadword">北京海淀区蔓图精品民宿</view>
</view>
<view class="suheadright">
<image src="/img/dianhua.png"></image>
</view>
</view>
<view class="suhead suheadsec">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/haibao.png"></image>
</view>
<view class="sunheadword">08月29日-08月31日</view>
</view>
<view class="ruzhuright">
<view class="ruzhu">
入住
<text class="ruzhunum">2</text>晚
</view>
<view class="ruzhuyou">
<image src="/img/yourow.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="minsulist">
<view class='minsuitem {{selitem==1?"selactive":""}}' bindtap="selkind" data-type="1">房型介绍</view>
<view class='minsuitem {{selitem==2?"selactive":""}}' bindtap="selkind" data-type="2">酒店介绍</view>
<view class='minsuitem {{selitem==3?"selactive":""}}' bindtap="selkind" data-type="3">入住须知</view>
<view class='minsuitem {{selitem==4?"selactive":""}}' bindtap="selkind" data-type="4">游玩攻略</view>
</view>
<view class="jiudianbigbox">
<!-- 酒店介绍 -->
<view class="jiudianintortext">
<view class="jiudainjie">
<view class="jiudianjieleft">酒店介绍</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jieshaojiu.png"></image>
</view>
<view class="jiudianhuan">周边环境</view>
</view>
<view class="zhoubiantext">
上海艾格瑞公寓位于具有“上海缩影”之称的虹口，坐拥浦江繁华内环核心，占据内环具有价值“黄金三角生活圈”。公寓毗邻瑞虹天地商圈、四川北路商圈、海伦路商圈之众多商场和写字楼，步行可达和平公园、鲁迅公园、1933老场坊、多伦路文化名人街，乘车前往外滩、陆家嘴约十余分钟。 　　公寓设有标准层和行政层，标准层设有7种各具特色的北欧风房型，行政层设有3种舒适简约套房房型，每间房间配有无线上网服务。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/shejistyle.png"></image>
</view>
<view class="jiudianhuan">设计风格</view>
</view>
<view class="zhoubiantext">
酒店设计现代、简约。 游玩回到水晶可以在露台喝茶聊天，看书发呆。尽情享受度假时光。
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/jiaotong.png"></image>
</view>
<view class="jiudianhuan">交通路线</view>
</view>
<view class="zhoubiantext">
酒店临近16号线永丰南站，步行4分钟即可到达地铁站；
</view>
</view>
<view class="jiudiancontentitem">
<view class="jiudianboxtop">
<view class="jiudiantopleft">
<image src="/img/tuijianreson.png"></image>
</view>
<view class="jiudianhuan">推荐理由</view>
</view>
<view class="zhoubiantext">
公寓内还设有健身房、咖啡厅、公共会客厅、棋牌桌游吧、会议室、商务中心等设施。在这里，可以充分感受上海气息的品质居住体验，愿能成为您商务、旅行下榻的优选。
</view>
</view>
</view>
<!-- 设施服务 -->
<view class="jiudianintortext">
<view class="jiudainjie">
<view class="jiudianjieleft">设施服务</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiaotong">
<view class="jiaotongitem">
<view class="jiaotongtop">交通服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">免费停车</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">自行车租赁服务</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">餐饮服务</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">中餐厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">咖啡厅</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">送餐服务</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">烧烤</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">网络设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">客房WIFI</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">公共区域WIFI</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">娱乐和健身设施</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">茶室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">健身房</view>
</view>
</view>
</view>
<view class="jiaotongitem">
<view class="jiaotongtop">服务项目</view>
<view class="jiaotongbottom">
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">会议室</view>
</view>
<view class="jiaotongbottomitem">
<view class="jiaotongitemleft">
<image src="/img/duigou.png"></image>
</view>
<view class="jiaotongitemname">全天前天</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="jiudianbottom">
<view class="jiudianbottomleft">
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/pin.png"></image>
</view>
<view class="jiudianitembot">首页</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/kefu.png"></image>
</view>
<view class="jiudianitembot kename">客服</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/shou.png"></image>
</view>
<view class="jiudianitembot">收藏</view>
</view>
</view>
<view class="jiudianbottomright">购买会员免费入住</view>
</view>
\ No newline at end of file
page {
background: #F9F9F9;
}
.minsuintor {
padding: 40rpx 44rpx;
box-sizing: border-box;
background: #fff;
}
.minsutou {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
}
.suhead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 32rpx 30rpx 0;
box-sizing: border-box;
}
.suheadone {
margin-top: 32rpx;
}
.suheadsec {
margin-top: 16rpx;
}
.suheadleft {
display: flex;
align-items: center;
}
.suheadleimg {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.sunheadword {
color: #06121e;
font-size: 28rpx;
margin-left: 12rpx;
}
.suheadright {
width: 44rpx;
height: 44rpx;
font-size: 0;
}
.ruzhu {
color: #06121e;
font-size: 28rpx;
}
.ruzhunum {
color: #ff5a4e;
font-size: 28rpx;
}
.ruzhuright {
display: flex;
align-items: center;
}
.ruzhuyou {
width: 18rpx;
height: 18rpx;
font-size: 0;
margin-left: 16rpx;
}
.minsulist {
display: flex;
align-items: center;
padding: 32rpx 58rpx;
box-sizing: border-box;
justify-content: space-between;
background: #fff;
}
.minsuitem {
color: #06121e;
font-size: 26rpx;
}
.selactive {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
position: relative;
}
.selactive::after {
position: absolute;
display: block;
content: '';
width: 48rpx;
height: 6rpx;
background: #ff5a4e;
left: 50%;
right: 50%;
transform: translateX(-50%);
bottom: -12rpx;
border-radius: 4rpx;
}
.judianjieright {
width: 34rpx;
height: 34rpx;
font-size: 0;
}
.jiudainjie {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #f5f5f5;
padding: 40rpx 0;
box-sizing: border-box;
}
.jiudianjieleft {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
}
.fuwujie {
margin-bottom: 52rpx;
}
.jiudianbottomleft {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 34rpx;
box-sizing: border-box;
width: 350rpx;
background: #fff;
}
.jiudianbottomright {
width: 400rpx;
height: 98rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
color: #fff;
font-size: 32rpx;
text-align: center;
line-height: 98rpx;
}
.jiudianbottom {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
}
.jiudianitem {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.jiudianitemtop {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.jiudianitembot {
color: #bdc4ce;
font-size: 22rpx;
}
.kename {
color: #ff5a4e;
font-size: 22rpx;
}
.jiudianboxtop {
display: flex;
align-items: center;
margin-top: 38rpx;
}
.jiudiantopleft {
width: 48rpx;
height: 48rpx;
font-size: 0;
}
.jiudianintortext {
width: 686rpx;
margin: 24rpx auto 0;
padding: 0 32rpx 24rpx;
box-sizing: border-box;
box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20px;
background: #fff
}
.jiudianhuan {
color: #06121e;
font-size: 32rpx;
margin-left: 10rpx;
}
.zhoubiantext {
color: #5b5e63;
font-size: 28rpx;
margin-top: 24rpx;
}
.jiudianbigbox{
margin-bottom: 156rpx;
}
.jiaotongtop{
color:#06121E;
font-size: 30rpx;
}
.jiaotongitemleft{
width:48rpx;
height:48rpx;
font-size: 0
}
.jiaotongbottomitem{
display:flex;
align-items: center;
margin-top:16rpx;
margin-right:40rpx;
}
.jiaotongitemname{
color:#5B5E63;
font-size: 28rpx;
margin-left:12rpx;
}
.jiaotongbottom{
display:flex;
align-items: center;
flex-wrap: wrap;
}
.jiaotongitem{
margin-top:20rpx;
}
\ No newline at end of file
// pages/roomdetail/roomdetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "酒店详情"
}
\ No newline at end of file
<view class="roomtop">
<image src="/img/lineimg2.png"></image>
<view class="jiudianbox">
<view class="jiudianname">尊享大床房</view>
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class="rulelist">
<view class="ruleitem">
<view class="ruleitemleft">
<view class="leftname">面积</view>
<view class="rightname">20-23ml</view>
</view>
<view class="ruleitemright">
<view class="leftname">所在楼层</view>
<view class="rightname">2-9层</view>
</view>
</view>
<view class="ruleitem">
<view class="ruleitemleft">
<view class="leftname">房型</view>
<view class="rightname">双人</view>
</view>
<view class="ruleitemright">
<view class="leftname">床型</view>
<view class="rightname">1.8大床</view>
</view>
</view>
</view>
<view class="rulelist">
<view class="ruleitem">
<view class="ruleitemleft">
<view class="leftname">可住</view>
<view class="rightname">2人</view>
</view>
<view class="ruleitemright">
<view class="leftname">窗户</view>
<view class="rightname">有窗</view>
</view>
</view>
<view class="ruleitem">
<view class="ruleitemleft">
<view class="leftname">加床</view>
<view class="rightname">不可加床</view>
</view>
<view class="ruleitemright">
<view class="leftname">上网方式</view>
<view class="rightname">免费wifi</view>
</view>
</view>
</view>
<view class="lijiding">立即预订</view>
</view>
</view>
\ No newline at end of file
.roomtop {
width: 750rpx;
height: 284rpx;
font-size: 0;
position: relative;
}
.jiudianbox {
width: 750rpx;
background: #fff;
/* height: 500rpx; */
opacity: 1;
border-radius: 20rpx 20rpx 0rpx 0rpx;
position: absolute;
top: 260rpx;
margin-bottom:40rpx;
}
.jiudianname {
color: #06121e;
font-size: 32rpx;
padding: 28rpx 32rpx;
}
/* 轮播图 */
.swiper_image {
width: 686rpx;
height: 344rpx;
font-size: 0;
margin: 0 auto 0;
position: relative;
box-shadow: 0px -1px 6px 0px rgba(212, 137, 96, 0.11);
}
.swiper_item_img {
height: 344rpx;
}
.swiper_image image {
width: 100%;
height: 100%;
/* box-shadow:0px -1px 6px 0px rgba(212,137,96,0.11); */
}
.swiper_item_img swiper-item {
width: 686rpx;
height: 344rpx;
box-shadow: 0px -1px 6px 0px rgba(212, 137, 96, 0.11);
display: felx;
align-items: center;
justify-content: center;
}
.swiper_item_img swiper-item image {
width: 100%;
height: 100%;
}
.rulelist {
padding: 0 50rpx 48rpx 50rpx;
box-sizing: border-box;
border-bottom: 1rpx solid #f5f5f5;
padding-bottom: 48rpx;
}
.ruleitem {
display: flex;
align-items: center;
margin-top: 48rpx;
}
.ruleitemleft {
width: 300rpx;
display: flex;
align-items: center;
}
.leftname {
color: #8c9198;
font-size: 24rpx;
}
.rightname {
color: #06121e;
font-size: 24rpx;
margin-left: 40rpx;
}
.ruleitemright {
display: flex;
align-items: center;
margin-left: 115rpx;
}
.lijiding {
width: 684rpx;
height: 88rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
border-radius: 48rpx;
color:#fff;
font-size: 32rpx;
text-align: center;
line-height: 88rpx;
margin:68rpx auto 0;
}
// pages/hoteldetail/hoteldetail.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
'/img/tuijianimg1.png',
],
indicatorDots: false,
autoplay: true,
interval: 2000,
duration: 1000,
currentSwiper: 0,
selitem: 1
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
selkind(e) {
this.setData({
selitem: e.currentTarget.dataset.type
})
},
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "酒店详情"
}
\ No newline at end of file
<view class="swiper_image">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" class="swiper_item_img" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="doct">
<swiper-item style="border-radius:10px;">
<image src="{{item}}" data-index='{{index}}' class="slide-image" bindtap='viewImg' width="355" height="150" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<view class="minsuintor">
<view class="minsutou">蔓图精品民宿</view>
<view class="suconcatbox">
<view class="suhead suheadone">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/ditu.png"></image>
</view>
<view class="sunheadword">北京海淀区蔓图精品民宿</view>
</view>
<view class="suheadright">
<image src="/img/dianhua.png"></image>
</view>
</view>
<view class="suhead suheadsec">
<view class="suheadleft">
<view class="suheadleimg">
<image src="/img/haibao.png"></image>
</view>
<view class="sunheadword">08月29日-08月31日</view>
</view>
<view class="ruzhuright">
<view class="ruzhu">
入住
<text class="ruzhunum">2</text>晚
</view>
<view class="ruzhuyou">
<image src="/img/yourow.png"></image>
</view>
</view>
</view>
</view>
</view>
<view class="minsulist">
<view class='minsuitem {{selitem==1?"selactive":""}}' bindtap="selkind" data-type="1">房型介绍</view>
<view class='minsuitem {{selitem==2?"selactive":""}}' bindtap="selkind" data-type="2">酒店介绍</view>
<view class='minsuitem {{selitem==3?"selactive":""}}' bindtap="selkind" data-type="3">入住须知</view>
<view class='minsuitem {{selitem==4?"selactive":""}}' bindtap="selkind" data-type="4">游玩攻略</view>
</view>
<view class="jiudainjie">
<view class="jiudianjieleft">酒店介绍</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudainjie fuwujie">
<view class="jiudianjieleft">设施服务</view>
<view class="judianjieright">
<image src="/img/yourow.png"></image>
</view>
</view>
<view class="jiudianbottom">
<view class="jiudianbottomleft">
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/pin.png"></image>
</view>
<view class="jiudianitembot">首页</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/kefu.png"></image>
</view>
<view class="jiudianitembot kename">客服</view>
</view>
<view class="jiudianitem">
<view class="jiudianitemtop">
<image src="/img/shou.png"></image>
</view>
<view class="jiudianitembot">收藏</view>
</view>
</view>
<view class="jiudianbottomright">购买会员免费入住</view>
</view>
\ No newline at end of file
page {
background: #fff;
}
.minsuintor {
padding: 40rpx 44rpx;
box-sizing: border-box;
}
.minsutou {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
}
.suhead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 32rpx 30rpx 0;
box-sizing: border-box;
}
.suheadone {
margin-top: 32rpx;
}
.suheadsec {
margin-top: 16rpx;
}
.suheadleft {
display: flex;
align-items: center;
}
.suheadleimg {
width: 40rpx;
height: 40rpx;
font-size: 0;
}
.sunheadword {
color: #06121e;
font-size: 28rpx;
margin-left: 12rpx;
}
.suheadright {
width: 44rpx;
height: 44rpx;
font-size: 0;
}
.ruzhu {
color: #06121e;
font-size: 28rpx;
}
.ruzhunum {
color: #ff5a4e;
font-size: 28rpx;
}
.ruzhuright {
display: flex;
align-items: center;
}
.ruzhuyou {
width: 18rpx;
height: 18rpx;
font-size: 0;
margin-left: 16rpx;
}
.minsulist {
display: flex;
align-items: center;
padding: 32rpx 58rpx;
box-sizing: border-box;
justify-content: space-between;
}
.minsuitem {
color: #06121e;
font-size: 26rpx;
}
.selactive {
color: #06121e;
font-size: 38rpx;
font-weight: bold;
position: relative;
}
.selactive::after {
position: absolute;
display: block;
content: '';
width: 48rpx;
height: 6rpx;
background: #ff5a4e;
left: 50%;
right: 50%;
transform: translateX(-50%);
bottom: -12rpx;
border-radius: 4rpx;
}
.judianjieright {
width: 34rpx;
height: 34rpx;
font-size: 0;
}
.jiudainjie {
width: 686rpx;
margin: 24rpx auto 0;
padding: 38rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20rpx;
}
.jiudianjieleft{
color:#06121E;
font-size: 32rpx;
font-weight: bold;
}
.fuwujie{
margin-bottom:52rpx;
}
.jiudianbottomleft{
display:flex;
align-items: center;
justify-content: space-between;
padding: 12rpx 34rpx;
box-sizing: border-box;
width:350rpx;
}
.jiudianbottomright{
width:400rpx;
height:98rpx;
background:linear-gradient(180deg,rgba(252,169,162,1) 0%,rgba(255,119,117,1) 100%);
opacity:1;
color:#fff;
font-size: 32rpx;
text-align: center;
line-height: 98rpx;
}
.jiudianbottom{
display:flex;
align-items: center
}
.jiudianitem{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center
}
.jiudianitemtop{
width:40rpx;
height:40rpx;
font-size: 0
}
.jiudianitembot{
color:#BDC4CE;
font-size: 22rpx;
}
.kename{
color:#FF5A4E;
font-size:22rpx;
}
\ No newline at end of file
... ... @@ -5,162 +5,62 @@ Page({
* 页面的初始数据
*/
data: {
letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
newcity: ['北京', '上海', '广州', '深圳', '成都', '杭州'],
citylist: [{ "letter": "A", "data": [{ "id": "v7", "cityName": "安徽" }] }, { "letter": "B", "data": [{ "id": "v10", "cityName": "巴中" }, { "id": "v4", "cityName": "包头" }, { "id": "v1", "cityName": "北京" }] }, { "letter": "C", "data": [{ "id": "v15", "cityName": "成都" }] }, { "letter": "D", "data": [{ "id": "v21", "cityName": "稻城" }] }, { "letter": "G", "data": [{ "id": "v17", "cityName": "广州" }, { "id": "v29", "cityName": "桂林" }] }, { "letter": "H", "data": [{ "id": "v9", "cityName": "海南" }, { "id": "v3", "cityName": "呼和浩特" }] }, { "letter": "L", "data": [{ "id": "v24", "cityName": "洛阳" }, { "id": "v20", "cityName": "拉萨" }, { "id": "v14", "cityName": "丽江" }] }, { "letter": "M", "data": [{ "id": "v13", "cityName": "眉山" }] }, { "letter": "N", "data": [{ "id": "v27", "cityName": "南京" }] }, { "letter": "S", "data": [{ "id": "v18", "cityName": "三亚" }, { "id": "v2", "cityName": "上海" }] }, { "letter": "T", "data": [{ "id": "v5", "cityName": "天津" }] }, { "letter": "W", "data": [{ "id": "v12", "cityName": "乌鲁木齐" }, { "id": "v25", "cityName": "武汉" }] }, { "letter": "X", "data": [{ "id": "v23", "cityName": "西安" }, { "id": "v28", "cityName": "香港" }, { "id": "v19", "cityName": "厦门" }] }, { "letter": "Z", "data": [{ "id": "v8", "cityName": "张家口" }] }],
currentCity:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.getcity()
},
//获取用户当前位置
getcity() {
let that = this;
wx.getLocation({
type: 'gcj02',
success: function (res) {
// 经纬度
var latitude = res.latitude
var longitude = res.longitude
var aK = that.data.aK
wx.request({
url: 'https://api.map.baidu.com/geocoder/v2/?ak=y8jPDTMIuAnaVscUztce1RKfNx8v5sok&location=' + latitude + ',' + longitude + '&output=json',
data: {},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log('1234567890', res)
var province = res.data.result.addressComponent.province;
let district = res.data.result.addressComponent.district
that.setData({
currentCity: province
})
}
})
},
fail: function () {
wx.showToast({
title: '授权失败,请打开GPS重新进入页面授权',
icon: 'none',
duration: 2000
})
}
})
},
reseatweizhi(){
this.getcity()
},
letterTap(e) {
console.log(e)
const Item = e.currentTarget.dataset.item;
this.setData({
cityListId: Item
});
// let scrollHeight = wx.getSystemInfoSync().windowHeight;
// this.setData({
// scrollHeight: scrollHeight
// })
// var query = wx.createSelectorQuery();
// var that = this;
// query.select('.city_left').boundingClientRect(function (rect) {
// console.log('66666',rect)
// }).exec();
//滚动到某一位置
// var me = this;
// var query = wx.createSelectorQuery().in(me);
// query.selectViewport().scrollOffset()
// query.select("#comment").boundingClientRect();
// query.exec(function (res) {
// console.log(res);
// var miss = res[0].scrollTop + res[1].top - 10;
// wx.pageScrollTo({
// scrollTop: miss,
// duration: 300
// });
// });
// if (Item == '#') {
// this.setData({
// scrollHeight: this.data.len
// });
// } else {
// }
// console.log('77777', Item)
// console.log('909090', this.data.scrollHeight)
onLoad: function (options) {
// console.log("..............." + this.data.cityListId);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
onShareAppMessage: function () {
}
})
\ No newline at end of file
... ...
<view class="selcityhead">
<view class="selcityleft">
<view class="selcityimg">
<image src="/img/sousuo.png"></image>
</view>
<view class="selinput">
<input placeholder='请输入搜索城市' placeholder-class='searchcity' />
</view>
</view>
<view class="selcityright">取消</view>
</view>
<view class="cityhead">
<view class="cityheadleft">
<view class="selimgsize">
<image src="/img/ditu.png"></image>
</view>
<view class="cityleftname">{{currentCity}}</view>
<view class="cityleftding">当前定位</view>
</view>
<view class="cityheadright" bindtap="reseatweizhi">重新定位</view>
</view>
<view class='city_box'>
<view class='city_left'>
<scroll-view style='width:100%;height:100%;' scroll-with-animation scroll-into-view='{{cityListId}}' class="citybox" scroll-y='true' scroll-top="{{scrollHeight}}">
<view class='new_city'>
<view class='new_city_title'>热门城市</view>
<view class='new_city_box'>
<text class='new_city_text' wx:for='{{newcity}}' wx:key='this' data-types='new' catchtap='cityTap' data-val='{{item}}'>{{item}}</text>
<view class="selcityhead">
<view class="selcityleft">
<view class="selcityimg">
<image src="/img/sousuo.png"></image>
</view>
</view>
<view class="selinput">
<input placeholder='请输入搜索城市'/>
</view>
</view>
<view class='city_list_box'>
<block wx:for='{{citylist}}' wx:key='this' wx:for-item='letterItem' wx:for-index='letterIndex'>
<view class='city_first_letter' id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
<text class='city_name' wx:for='{{letterItem.data}}' wx:key='this' data-types='list' catchtap='cityTap' data-index='{{index}}' data-val='{{item}}'>{{item.cityName}}</text>
</block>
</view>
</scroll-view>
</view>
<view class='city_right'>
<text class='letter_item' wx:for='{{letter}}' wx:key='this' catchtap='letterTap' data-item='{{item}}'>{{item}}</text>
</view>
<view class="selcityright">取消</view>
</view>
\ No newline at end of file
... ...
page{
padding: 0 24rpx;
box-sizing: border-box;
height:100%;
}
.selcityhead{
display:flex;
align-items: center;
padding: 24rpx 0 40rpx;
box-sizing: border-box;
justify-content: space-between;
border-bottom:1rpx soild #EEE;
padding: 24rpx 32rpx;
box-sizing: border-box
}
.selcityleft{
width:580rpx;
background: #F9F9F9;
display:flex;
align-items: center;
padding: 14rpx 34rpx;
box-sizing: border-box;
align-items: center
}
.selcityimg{
width:28rpx;
height:28rpx;
font-size: 0
}
.selinput{
width:502rpx;
color:#BDC4CE;
font-size: 28rpx;
margin-left:10rpx;
}
.searchcity{
color:#BDC4CE;
font-size: 28rpx;
}
.selcityright{
color:#06121E;
font-size: 28rpx;
}
.cityhead{
display:flex;
align-items: center;
justify-content: space-between;
width:750
}
.cityheadleft{
display:flex;
align-items: center;
}
.selimgsize{
width:40rpx;
height:40rpx;
font-size: 0;
}
.cityleftname{
color:#06121E;
font-size: 32rpx;
margin-left:12rpx;
font-weight: bold;
}
.cityleftding{
color:#8C9198;
font-size: 24rpx;
margin-left:12rpx;
}
.cityheadright{
color:#FF5A4E;
font-size: 24rpx;
}
.dituimg{
width:40rpx;
height:40rpx;
font-size: 0;
}
/* 字母排序城市 */
.city_box{
height:100%;
background: #fff;
display: flex;
}
.city_left{
flex: 1;
}
.city_right{
width: 60rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.letter_item{
flex: 1;
display: block;
font-size: 24rpx;
color: #33B9FF;
text-align: center;
}
.city_locate,.national{
height: 80rpx;
line-height: 80rpx;
border-bottom: 1px solid #efefef;
font-size: 28rpx;
color: #333;
padding-left: 25rpx;
}
.city_locate_title{
color: #999;
margin-right: 20rpx;
}
.new_city{
/* background: #efefef; */
font-size: 28rpx;
margin-top:44rpx;
}
.new_city_title{
line-height: 50rpx;
color: #BDC4CE;
padding-left: 25rpx;
margin-bottom: 20rpx;
}
.new_city_box{
display: flex;
flex-wrap: wrap;
}
.new_city_text{
/* width: 200rpx; */
text-align: center;
line-height: 70rpx;
background: #fff;
border-radius: 35rpx;
margin:0 22rpx 22rpx 0;
font-size: 22rpx;
color:#06121E;
padding: 12rpx 70rpx;
box-sizing: border-box;
}
.city_first_letter{
line-height: 40rpx;
height: 40rpx;
padding-left: 25rpx;
font-size: 28rpx;
background: #eee;
color: #999;
}
.city_name{
display: block;
line-height: 80rpx;
height: 80rpx;
border-bottom: 1px solid #efefef;
font-size: 28rpx;
color: #333;
padding-left: 25rpx;
}
\ No newline at end of file
... ...
// pages/yuding/yuding.js
Page({
/**
* 页面的初始数据
*/
data: {
zhifushow:false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "预定"
}
\ No newline at end of file
<view class="yudingtou">
<view class="yudingtouname">蔓图精品民宿</view>
<view class="yudingtoutext">尊享大床房（含早）</view>
<view class="yudingbot">
<view class="yudingbotleft">
<image src="/img/weizhi.png"></image>
</view>
<view class="weizhitext">北京市朝阳区香河园路左家庄15号院</view>
</view>
</view>
<view class='yuding'>
<view class="housetime">
<view class="houseleft">
<view class="houselefttop">08月21日</view>
<view class="houseleftbottom">(周三入住)</view>
</view>
<view class="middletime">
<view class="housemiddle">
<view class="housemiddletop">共2晚</view>
<image src="/img/rowright.png"></image>
</view>
</view>
<view class="houseleft">
<view class="houselefttop">08月21日</view>
<view class="houseleftbottom">(周三入住)</view>
</view>
</view>
<view class="ruzhuren">入住人：李娜</view>
<view class="ruzhuphone">手机号：13216599216</view>
<view class="ruzhubot">
<view class="ruzhubotleft">
<view class="ruzhuleftimg">
<image src="/img/sun_23.png"></image>
</view>
<view class='ruzhutext'>放心订 2019-08-21 18:00前可免费取消</view>
</view>
</view>
</view>
<view class="yudingsec">
<view class="yudingtopname">退订政策</view>
<view class="yudingtext">
因个人原因无法入住已预约酒店 1、请在48小时申请取消; 2、入住前未能取消扣除30%的保证金;如未能在订单日期14:00前取消订单 3、或未能实际入住，平台扣除全额保证金
</view>
<view class="yudingtopname">退订政策</view>
<view class="yudingtext">
会员预订房间需预付与该房间市场价等额的保证金，离店后，保证金原路退回您的支付宝账户。
</view>
</view>
<view class="yudingbottom">
<view class="yudingbottomleft">
<view class="yudingleftname">￥1902</view>
<view class="yudingleftcontent">离店退还保证金</view>
</view>
<view class="yudingbottomright">支付保证金</view>
</view>
<!-- 支付保证金 -->
<view class="register" wx:if="{{zhifushow}}">
<view class="zhifuwrap">
<view class="zhifuname">支付保证金</view>
<view class="zhifumoney">￥1902</view>
<view class="zhifutui">退房退还保证金</view>
<view class="zhifutuihuan">支付保证金</view>
</view>
</view>
\ No newline at end of file
page {
background: #f9f9f9;
}
.yudingtou {
width: 750rpx;
height: 348rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
padding: 0 32rpx;
box-sizing: border-box;
overflow: hidden;
position: relative;
}
.yudingtouname {
color: #fff;
font-size: 40rpx;
margin-top: 60rpx;
}
.yudingtoutext {
color: #fff;
font-size: 28rpx;
margin-top: 12rpx;
}
.yudingbotleft {
width: 30rpx;
height: 30rpx;
font-size: 0;
}
.weizhitext {
color: #fff;
font-size: 24rpx;
margin-left: 10rpx;
}
.yudingbot {
display: flex;
align-items: center;
margin-top: 18rpx;
}
.yuding {
width: 686rpx;
height: 400rpx;
background: #fff;
border-radius: 20rpx;
padding: 40rpx 60rpx;
box-sizing: border-box;
margin: 26rpx auto 0;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
z-index: 33;
position: absolute;
top: 246rpx;
left: 32rpx;
}
.yudingsec {
width: 686rpx;
/* height: 400rpx; */
background: #fff;
border-radius: 20rpx;
padding: 40rpx 60rpx;
box-sizing: border-box;
margin: 0 auto 150rpx;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
z-index: 33;
position: absolute;
top: 695rpx;
left: 32rpx;
}
.housetime {
display: flex;
align-items: center;
/* padding: 40rpx 106rpx; *//* box-sizing: border-box; */
justify-content: space-between;
}
.housemiddle {
width: 96rpx;
height: 56rpx;
font-size: 0;
position: relative;
}
.houselefttop {
color: #06121e;
font-size: 36rpx;
font-weight: bold;
}
.houseleftbottom {
color: #8c9198;
font-size: 24rpx;
text-align: center;
margin-top: 8rpx;
}
.housemiddletop {
width: 80rpx;
color: #ff5a4e;
font-size: 24rpx;
text-align: center;
position: absolute;
top: -15rpx;
}
.yudingtopleftname {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
width: 158rpx;
display: flex;
align-items: center;
}
.ruzhu {
color: #8c9198;
font-size: 24rpx;
margin-top: 8rpx;
text-align: center;
width: 158rpx;
}
.yudingtop {
display: flex;
align-items: center;
}
.ydingname {
color: #333;
}
.ruzhuren {
color: #5b5e63;
font-size: 28rpx;
margin-top: 28rpx;
}
.ruzhuphone {
color: #5b5e63;
font-size: 28rpx;
margin-top: 20rpx;
}
.ruzhubot {
display: flex;
align-items: center;
}
.ruzhuleftimg {
width: 27rpx;
height: 27rpx;
font-size: 0;
}
.ruzhutext {
color: #ff5a4e;
font-size: 24rpx;
margin-left: 15rpx;
}
.ruzhubotleft {
display: flex;
align-items: center;
margin-top: 82rpx;
}
.yudingtext {
color: #8c9198;
font-size: 28rpx;
margin-top: 26rpx;
}
.yudingtopname {
color: #06121e;
font-size: 32rpx;
font-weight: bold;
margin-top: 24rpx;
}
.yudingbottom {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
left: 0;
z-index: 44;
}
.yudingbottomleft {
width: 510rpx;
display: flex;
align-items: center;
padding: 32rpx;
box-sizing: border-box;
background: #fff;
}
.yudingbottomright {
width: 240rpx;
padding: 36rpx 0;
/* height:98rpx; */
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
color: #fff;
font-size: 28rpx;
text-align: center;
box-sizing: border-box;
}
.yudingleftname {
color: #ff5a4e;
font-size: 36rpx;
font-weight: bold;
}
.yudingleftcontent {
color: #5b5e63;
font-size: 24rpx;
margin-left: 20rpx;
}
.zhifuwrap {
width: 622rpx;
height: 403rpx;
background: rgba(255, 255, 255, 1);
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30rpx 84rpx;
box-sizing: border-box;
border-radius: 16rpx;
}
.zhifuname {
color: #06121e;
font-size: 36rpx;
text-align: center;
font-weight: bold;
}
.zhifumoney {
color: #ff5a4e;
font-size: 40rpx;
text-align: center;
margin-top: 60rpx;
}
.zhifutui {
color: #8c9198;
font-size: 26rpx;
text-align: center;
margin-top: 14rpx;
}
.zhifutuihuan {
width: 442rpx;
height: 80rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
border-radius: 44rpx;
color:#fff;
text-align: center;
line-height: 80rpx;
margin-top:32rpx;
}
// pages/yudingfinish/yudingfinish.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
\ No newline at end of file
{
"navigationBarTitleText": "预定成功"
}
\ No newline at end of file
<view class="yudingsucehead">
<view class="yudingstop">
<view class="yudingstopleft">
<image src="/img/yudingfinish.png"></image>
</view>
<view class="yudingstopright">保证金支付成功,欢迎入住！</view>
</view>
<view class="seedetail">
<view class="seedetailzuo">查看详情</view>
<view class="seedetailyou">
<image src="/img/yourowrow.png"></image>
</view>
</view>
</view>
<view class="mantu">
<view class="mantuname">蔓图精品民宿</view>
<view class="mantugao">高级大床房 1间(含早)</view>
<view class="mantuyue">2019-08-21日 周三 至 2019-08-23日 周五</view>
<view class="totalwan">共2晚</view>
<view class='zongjia'>
<view class="zongjialeft">总价</view>
<view class="zongjiaright">￥1902</view>
</view>
</view>
<view class="backindex">返回首页</view>
\ No newline at end of file
page {
background: #f4f8fb;
}
.yudingsucehead {
width: 750rpx;
height: 232rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
padding: 50rpx 22rpx;
box-sizing: border-box;
}
.yudingstop {
display: flex;
align-items: center;
}
.yudingstopleft {
width: 80rpx;
height: 80rpx;
font-size: 0;
}
.yudingstopright {
color: #fff;
font-size: 40rpx;
}
.seedetail {
display: flex;
align-items: center;
justify-content: flex-end;
}
.seedetailyou {
width: 12rpx;
height: 12rpx;
font-size: 0;
}
.seedetailzuo {
color: #fff;
font-size: 24rpx;
}
.mantu {
width: 686rpx;
height: 476rpx;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 16rpx 24rpx rgba(0, 0, 0, 0.02);
opacity: 1;
border-radius: 20rpx;
padding: 48rpx 32rpx;
box-sizing: border-box;
position: absolute;
top: 194rpx;
left: 32rpx;
}
.mantuname {
color: #06121e;
font-size: 40rpx;
font-weight: bold;
}
.mantugao {
color: #5b5e63;
font-size: 28rpx;
margin-top: 16rpx;
}
.mantuyue {
color: #5b5e63;
font-size: 28rpx;
margin-top: 66rpx;
}
.totalwan {
color: #ff5a4e;
font-size: 28rpx;
text-align: center;
margin-top: 32rpx;
}
.zongjia {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 60rpx;
}
.zongjialeft {
color: #06121e;
font-size: 28rpx;
}
.zongjiaright {
color: #ff5a4e;
font-size: 36rpx;
}
.backindex {
width: 646rpx;
height: 88rpx;
border: 1px solid rgba(140, 145, 152, 1);
opacity: 1;
border-radius: 44rpx;
margin:40rpx auto 0;
position: absolute;
top:710rpx;
left:52rpx;
text-align: center;
line-height: 88rpx;
}
... ... @@ -4,13 +4,12 @@
"ignore": []
},
"setting": {
"urlCheck": false,
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false,
"checkInvalidKey": true
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.8.3",
... ... @@ -31,13 +30,109 @@
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
"current": 12,
"list": [
{
"id": -1,
"name": "123",
"pathName": "pages/houselist/houselist",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的",
"pathName": "pages/mine/mine",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的订单",
"pathName": "pages/mine_order/mine_order",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的钱包",
"pathName": "pages/mine_wallet/mine_wallet",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的收藏",
"pathName": "pages/mine_collect/mine_collect",
"query": "",
"scene": null
},
{
"id": -1,
"name": "我的客服",
"pathName": "pages/mine_kefu/mine_kefu",
"query": "",
"scene": null
},
{
"id": -1,
"name": "常见问题",
"pathName": "pages/mine_question/mine_question",
"query": "",
"scene": null
},
{
"id": -1,
"name": "兑换中心",
"pathName": "pages/mine_exchange/mine_exchange",
"query": "",
"scene": null
},
{
"id": -1,
"name": "会员须知",
"pathName": "pages/mine_notice/mine_notice",
"query": "",
"scene": null
},
{
"id": -1,
"name": "个人设置",
"pathName": "pages/mine_set/mine_set",
"query": "",
"scene": null
},
{
"id": -1,
"name": "待出行",
"pathName": "pages/mine_detail/mine_detail",
"query": "",
"scene": null
},
{
"id": -1,
"name": "已取消",
"pathName": "pages/mine_details/mine_details",
"query": "",
"scene": null
},
{
"id": -1,
"name": "旅行笔记",
"pathName": "pages/mine_experience/mine_experience",
"query": "",
"scene": null
}
]
}
}
}
\ No newline at end of file
... ...