miniprogram / wineshopyuyue · 提交

转到一个项目

作者 王毅
提交 fb35ed5de3590660f3f9089d9dc9ffbe39afea2e 1 个父辈 8d54df1b

个人中心

内嵌 并排对比
正在显示 81 个修改的文件 包含 3417 行增加 和 0 行删除
// pages/mine/mine.js
Page({
/**
* 页面的初始数据
*/
data: {
box: [{
index: 0,
img: '/img/mine (9).png',
word: "待付款"
}, {
index: 1,
img: '/img/mine (11).png',
word: "待出行"
}, {
index: 2,
img: '/img/mine (13).png',
word: "已入住"
}, {
index: 3,
img: '/img/mine (15).png',
word: "已完成"
}, {
index: 4,
img: '/img/mine (1).png',
word: "已取消"
}],
current: "",
// 模态框
modal_show: false,
// 海报
poster_show: false,
imgUrl: "",
// 是否为vip
is_vip: ""
},
// 设置个人信息
set_infor() {
wx.navigateTo({
url: '/pages/mine_set/mine_set',
})
},
// 开通会员
open_vip() {
let t = this;
t.setData({
modal_show: true
})
},
modal_hide() {
let t = this;
t.setData({
modal_show: false
})
},
// 取消
cancel() {
let t = this;
t.setData({
modal_show: false
})
},
// 去购买
go_pay() {
let t = this;
setTimeout(function() {
t.setData({
modal_show: false,
is_vip: 1
})
}, 1000)
},
// 海报
poster_hide() {
let t = this;
t.setData({
poster_show: false
})
},
// 保存图片到相册
keep() {
let that = this
//若二维码未加载完毕，加个动画提高用户体验
wx.showToast({
icon: 'loading',
title: '正在保存图片',
duration: 1000
})
//判断用户是否授权"保存到相册"
wx.getSetting({
success(res) {
//没有权限，发起授权
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() { //用户允许授权，保存图片到相册
that.savePhoto();
},
fail() { //用户点击拒绝授权，跳转到设置页，引导用户授权
wx.openSetting({
success() {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
that.savePhoto();
}
})
}
})
}
})
} else { //用户已授权，保存到相册
that.savePhoto()
}
}
})
},
//保存图片到相册，提示保存成功
savePhoto() {
let that = this
wx.downloadFile({
url: that.data.imgUrl,
success: function(res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存成功',
icon: "success",
duration: 1000
})
}
})
}
})
},
// 前往订单页
go_order(e) {
let t = this;
t.setData({
current: e.currentTarget.dataset.id
});
wx.navigateTo({
url: '/pages/mine_order/mine_order?active=' + t.data.current,
})
},
// 前往我的钱包
go_wallet() {
wx.navigateTo({
url: '/pages/mine_wallet/mine_wallet',
})
},
// 前往我的收藏
go_collect() {
wx.navigateTo({
url: '/pages/mine_collect/mine_collect',
})
},
// 生成海报
go_poster() {
let t = this;
t.setData({
poster_show: true
})
},
// 前往兑换中心
go_exchange() {
wx.navigateTo({
url: '/pages/mine_exchange/mine_exchange',
})
},
// 前往我的客服
go_kefu() {
wx.navigateTo({
url: '/pages/mine_kefu/mine_kefu',
})
},
// 前往会员须知
go_notice() {
wx.navigateTo({
url: '/pages/mine_notice/mine_notice',
})
},
/**
* 生命周期函数--监听页面加载
*/
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='register' wx:if="{{modal_show}}" catchtouchmove="preventTouchMove" bindtap='modal_hide'>
<view class='modal_box'>
<view class='modal_title'>限量特权会员</view>
<view class='modal_word'>已购买会员权益的用户可参加分享返佣金特权，限量对首批会员开放，分享即可获得100元\位的返佣金上不封顶!
</view>
<view class='modal_btn layer_between'>
<view class='modal_left' catchtap='cancel'>取消</view>
<view class='modal_right' catchtap='go_pay'>去购买</view>
</view>
</view>
</view>
<!-- 海报 -->
<view class='register' wx:if="{{poster_show}}" catchtouchmove="preventTouchMove" bindtap='poster_hide'>
<view class='poster'>
<view class='poster_img'>
<image src='/img/sun_48.png'></image>
</view>
<view class='poster_btn' catchtap='keep'>保存图片至相册</view>
</view>
</view>
<view class="top layer_betweens" style='background-image: url("/img/mine (2).png")'>
<view class='top_left layer_star'>
<view class='top_img'>
<image src='/img/mine (5).png'></image>
<view class='vip_icon' wx:if="{{is_vip == 1}}">
<image src='/img/zuanshi.png'></image>
</view>
</view>
<view class='top_infor'>
<view class='top_name'>爱旅行的小李</view>
<view class='top_word' wx:if="{{is_vip == 1}}">加入会员享民宿免费住</view>
<view class='open_vip layer_center' bindtap='open_vip' wx:else>
<view class='top_set'>设置</view>
<view class='top_icon'>></view>
</view>
</view>
</view>
<view class='top_right layer_star' bindtap='set_infor'>
<view class='top_set'>设置</view>
<view class='top_icon'>></view>
</view>
</view>
<!-- 我的订单 -->
<view class='order'>
<view class='my_order'>
<view class='order_title'>我的订单</view>
<view class='order_box layer_between'>
<view class='order_one flex_center' wx:for="{{box}}" wx:key="index" bindtap='go_order' data-id='{{item.index}}'>
<view class='order_img'>
<image src='{{item.img}}'></image>
</view>
<view class='order_word'>{{item.word}}</view>
</view>
</view>
</view>
</view>
<!-- 加入理想会员 -->
<view class='join'>
<image src='/img/mine (6).png'></image>
</view>
<!-- 列表 -->
<view class='list'>
<view class='list_box layer_between' bindtap='go_wallet'>
<view class='list_left'>我的钱包</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='list_box layer_between' bindtap='go_collect'>
<view class='list_left'>我的收藏</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='list_box layer_between' bindtap='go_poster'>
<view class='list_left'>专属海报</view>
<view class='layer_star'>
<view class='share_word'>分享海报给朋友，享购买返利</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='list_box layer_between' bindtap='go_exchange'>
<view class='list_left'>兑换中心</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='list_box layer_between' bindtap='go_kefu'>
<view class='list_left'>我的客服</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='list_box layer_between' style='border:none' bindtap='go_notice'>
<view class='list_left'>会员须知</view>
<view class='list_right'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_betweens {
display: flex;
justify-content: space-between;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
.layer_center {
display: flex;
justify-content: center;
align-items: center;
}
.flex_center {
display: flex;
flex-direction: column;
align-items: center;
}
page {
background: #f9f9f9;
}
.top {
width: 100%;
height: 256rpx;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 0 32rpx;
box-sizing: border-box;
}
.top_left {
margin-top: -74rpx;
}
.top_img {
width: 96rpx;
height: 96rpx;
border: 4rpx solid #fff;
border-radius: 50%;
position: relative;
}
.vip_icon {
width: 34rpx;
height: 34rpx;
position: absolute;
bottom: -5rpx;
right: -7rpx;
}
.vip_icon img {
width: 100%;
height: 100%;
}
.top_img image {
width: 100%;
height: 100%;
border-radius: 50%;
}
.top_infor {
margin-left: 16rpx;
}
.top_name {
font-size: 36rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
.top_word {
margin-top: 14rpx;
font-size: 24rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.top_right {
margin-top: 54rpx;
height: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 1);
border-radius: 12rpx;
padding: 0 14rpx;
box-sizing: border-box;
}
.top_set {
font-size: 24rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
.top_icon {
line-height: 40rpx;
margin-left: 10rpx;
color: #fff;
}
.order {
padding: 0 32rpx;
box-sizing: border-box;
margin-top: -70rpx;
}
.my_order {
padding: 32rpx;
box-sizing: border-box;
background: rgba(255, 255, 255, 1);
box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.04);
border-radius: 20rpx;
}
.order_title {
font-size: 28rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
margin-bottom: 20rpx;
}
.order_box {
padding: 0 16rpx;
box-sizing: border-box;
}
.order_img {
width: 56rpx;
height: 52rpx;
}
.order_img image {
width: 100%;
height: 100%;
}
.order_word {
margin-top: 16rpx;
font-size: 26rpx;
font-weight: 400;
color: rgba(61, 68, 77, 1);
}
/* 加入理想会员 */
.join {
width: 686rpx;
height: 254rpx;
margin: 18rpx auto 0;
}
.join_box image {
width: 100%;
height: 100%;
}
/* 列表 */
.list {
margin-top: 26rpx;
background: #fff;
padding: 0 32rpx;
box-sizing: border-box;
}
.list_left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.list_right {
width: 22rpx;
height: 22rpx;
font-size: 0;
}
.list_right image {
width: 100%;
height: 100%;
}
.list_box {
padding: 34rpx 32rpx;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
}
.share_word {
margin-right: 18rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(255, 90, 78, 1);
}
.open_vip {
width: 98rpx;
border: 2rpx solid rgba(255, 255, 255, 1);
border-radius: 12rpx;
margin-top: 10rpx;
}
/* 模态框 */
.modal_box {
width: 622rpx;
background: #fff;
border-radius: 15rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 30rpx 32rpx 50rpx;
box-sizing: border-box;
}
.modal_title {
font-size: 36rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
-webkit-text-stroke: 1 rgba(0, 0, 0, 0.00);
text-stroke: 1 rgba(0, 0, 0, 0.00);
text-align: center;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 32rpx;
}
.modal_word {
margin-top: 30rpx;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: rgba(140, 145, 152, 1);
padding: 0 56rpx 48rpx;
box-sizing: border-box;
text-align: left;
}
.modal_btn {
padding: 0 56rpx 0 28rpx;
box-sizing: border-box;
}
.modal_left {
width: 214rpx;
background: rgba(238, 238, 238, 1);
border-radius: 44rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(140, 145, 152, 1);
text-align: center;
padding: 20rpx 0;
box-sizing: border-box;
}
.modal_right {
width: 214rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 44rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: center;
padding: 20rpx 0;
box-sizing: border-box;
}
/* 海报 */
.poster {
width: 696rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.poster_img {
width: 100%;
height: 834rpx;
}
.poster_img image {
width: 100%;
height: 100%;
}
.poster_btn {
margin-top: 40rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
opacity: 1;
border-radius: 44rpx;
padding: 26rpx 0;
box-sizing: border-box;
text-align: center;
font-size: 28rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
... ...
// pages/mine_collect/mine_collect.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
img: "/img/tuijianimg1.png",
address: "海淀区蔓图精品民宿",
title: "朗丽兹西山花园酒店",
name: "吴镇蔓图精品民宿",
label: ["原木轻奢", "豪华精致"],
price: "888",
free: "会员免费"
}, {
img: "/img/tuijianimg2.png",
address: "海淀区蔓图精品民宿",
title: "朗丽兹西山花园酒店",
name: "吴镇蔓图精品民宿",
label: ["原木轻奢", "豪华精致"],
price: "888",
free: "会员免费"
}]
},
/**
* 生命周期函数--监听页面加载
*/
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
... ...
<!--pages/mine_collect/mine_collect.wxml-->
<view class='box'>
<view class='one' wx:for="{{list}}" wx:key="" wx:for-item="item">
<view class='img'>
<image src='{{item.img}}'></image>
<view class='address_bg'></view>
<view class='address_box'>
<view class='address_contant layer_star'>
<view class='address_icon'>
<image src='/img/weizhi.png'></image>
</view>
<view class='address_word'>{{item.address}}</view>
</view>
</view>
</view>
<view class='one_box'>
<view class='title'>{{item.title}}</view>
<view class='word'>{{item.name}}</view>
<view class='layer_between'>
<view class='label layer_star'>
<view class='label_one' wx:for="{{item.label}}" wx:key="" wx:for-item="label">{{label}}</view>
</view>
<view class='price layer_star'>
<view class='num'>¥{{item.price}}</view>
<view class='price_btn'>{{item.free}}</view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_collect/mine_collect.wxss */
page {
background: #f9f9f9;
}
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
padding: 0 32rpx;
box-sizing: border-box;
}
.one {
margin-top: 24rpx;
}
.img {
width: 100%;
height: 368rpx;
position: relative;
}
.img image {
width: 100%;
height: 100%;
border-radius: 16rpx 16rpx 0 0;
}
.address_bg {
width: 292rpx;
height: 52rpx;
background: rgba(0, 0, 0, 1);
opacity: 0.3;
border-radius: 28rpx;
position: absolute;
bottom: 24rpx;
left: 24rpx;
}
.address_box {
position: absolute;
bottom: 24rpx;
left: 24rpx;
padding: 10rpx 20rpx;
box-sizing: border-box;
}
.address_icon {
width: 20rpx;
height: 24rpx;
font-size: 0;
}
.address_icon image {
width: 100%;
height: 100%;
}
.address_word {
font-size: 24rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
margin-left: 16rpx;
}
.one_box {
background: #fff;
padding: 14rpx 28rpx 24rpx 24rpx;
box-sizing: border-box;
}
.title {
margin-top: 14rpx;
font-size: 32rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
}
.word {
margin-top: 14rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.label {
margin-top: 20rpx;
}
.label_one {
background: #fff6f5;
font-size: 24rpx;
font-weight: 400;
color: rgba(255, 90, 78, 1);
margin-right: 12rpx;
padding: 2rpx 8rpx;
box-sizing: border-box;
}
.price {
background: rgba(255, 114, 113, 1);
border-radius: 15rpx;
padding: 10rpx 18rpx;
box-sizing: border-box;
}
.num {
font-size: 24rpx;
font-weight: 200;
color: rgba(255, 255, 255, 1);
text-decoration: line-through;
}
.price_btn {
margin-left: 14rpx;
font-size: 24rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
... ...
// pages/mine_detail/mine_detail.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
... ...
<!--pages/mine_detail/mine_detail.wxml-->
<view class='top'>
<!-- 待出行 -->
<view class='top_title'>待出行</view>
<!-- 已入住 -->
<view class='top_title' style='display:none'>已入住</view>
<!-- 已完成 -->
<view class='top_title' style='display:none'>已完成</view>
</view>
<view class='address_infor'>
<view class='card'>
<view class='card_top layer_star'>
<view class='card_title'>朗丽兹精选北京东直门店</view>
<view class='card_icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='card_list layer_between'>
<view class='card_left layer_star'>
<view class='list_icon'>
<image src='/img/ditu.png'></image>
</view>
<view class='list_word'>北京市朝阳区香河园路左家庄15号院</view>
</view>
<view class='card_right'>
<view class='list_img'>
<image src='/img/order_detail (3).png'></image>
</view>
</view>
</view>
<view class='card_list layer_between'>
<view class='card_left layer_star'>
<view class='list_icon'>
<image src='/img/ditu.png'></image>
</view>
<view class='list_word'>010-62076207</view>
</view>
<view class='card_right'>
<view class='list_img'>
<image src='/img/order_detail (1).png'></image>
</view>
</view>
</view>
<view class='card_state layer_between'>
<view class='state_left'>已付款</view>
<view class='state_right'>￥1768</view>
</view>
</view>
</view>
<view class='person_infor'>
<view class='person_box'>
<view class='person_one layer_star'>
<view class='person_left'>
房型
</view>
<view class='person_rigth'>高级大床房
<text>1间(含早)</text>
</view>
</view>
<view class='person_one layer_star'>
<view class='person_left'>
入住日期
</view>
<view class='person_rigth'>
<text class='into'>08月21日-08月23日</text> 共
<text>2</text>晚
</view>
</view>
<view class='person_one layer_star'>
<view class='person_left'>
到店时间
</view>
<view class='person_rigth'>
<text class='into'>08月21日</text>
<text>18:00</text>
</view>
</view>
<view class='person_one layer_star' style='border:none'>
<view class='person_left'>
入住人
</view>
<view class='person_rigth'>
刘娜
</view>
</view>
</view>
</view>
<!-- 待出行 -->
<view class='wait'>
<view class='policy'>
<view class='policy_top layer_star'>
<view class='policy_top_left'>
<image src='/img/order_detail (2).png'></image>
</view>
<view class='policy_top_right'>入住政策</view>
</view>
<view class='policy_word'>温馨提示：若因个人原因无法入住预订酒店，请务必提前48小时申请取消。如您未能48小时申请取消订单，平台将扣除30%保证金。未取消预订且未实际入住，将被扣除全部保证金</view>
</view>
<view class='btn'>
<view class='bot_btn'>取消订单</view>
</view>
</view>
<!-- 已完成 -->
<view class='wait' style='display:none'>
<view class='policy'>
<view class='policy_top layer_star'>
<view class='policy_top_left'>
<image src='/img/order_detail (2).png'></image>
</view>
<view class='policy_top_right'>保证金退还</view>
</view>
<view class='policy_word'>成功办理退房后，平台会将保证金退回至您付款的账号中，退款流程将在一个工作日完成</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_detail/mine_detail.wxss */
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: #f9f9f9;
}
.top {
width: 100%;
height: 232rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
padding: 56rpx 32rpx;
box-sizing: border-box;
}
.top_title {
font-size: 40rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
.address_infor {
padding: 0 32rpx;
box-sizing: border-box;
margin-top: -88rpx;
}
.card {
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(0, 0, 0, 0.02);
border-radius: 20rpx;
padding: 52rpx 26rpx 40rpx 32rpx;
box-sizing: border-box;
}
.card_top {
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
padding-bottom: 32rpx;
}
.card_title {
font-size: 32rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
margin-right: 32rpx;
}
.card_icon {
width: 22rpx;
height: 22rpx;
font-size: 0;
}
.card_icon image {
width: 100%;
height: 100%;
}
.list_icon {
width: 24rpx;
height: 30rpx;
font-size: 0;
}
.list_icon image {
width: 100%;
height: 100%;
}
.list_word {
margin-left: 20rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.list_img {
width: 56rpx;
height: 56rpx;
font-size: 0;
}
.list_img image {
width: 100%;
height: 100%;
}
.card_list {
padding: 24rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.card_state {
margin-top: 24rpx;
padding-right: 6rpx;
box-sizing: border-box;
}
.state_left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.state_right {
font-size: 36rpx;
font-weight: bold;
color: rgba(255, 90, 78, 1);
}
.person_infor {
margin-top: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.person_box {
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(0, 0, 0, 0.02);
border-radius: 20rpx;
padding: 0 32rpx;
box-sizing: border-boxs;
}
.person_one {
padding: 34rpx 0 32rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.person_left {
width: 96rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.person_rigth {
margin-left: 60rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.into {
margin-right: 32rpx;
}
.policy {
margin-top: 46rpx;
padding: 0 24rpx;
box-sizing: border-box;
}
.policy_top_left {
width: 48rpx;
height: 48rpx;
font-size: 0;
}
.policy_top_left image {
width: 100%;
height: 100%;
}
.policy_top_right {
margin-left: 10rpx;
font-size: 28rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
}
.policy_word {
margin-top: 34rpx;
font-size: 24rpx;
font-weight: 400;
line-height: 34rpx;
color: rgba(91, 94, 99, 1);
padding: 0 40rpx;
box-sizing: border-box;
}
.btn {
width: 100%;
padding: 0 52rpx;
box-sizing: border-box;
position: fixed;
bottom: 44rpx;
}
.bot_btn {
border: 2rpx solid rgba(189, 196, 206, 1);
font-size: 32rpx;
font-weight: 500;
color: rgba(6, 18, 30, 1);
text-align: center;
padding: 22rpx 0;
box-sizing: border-box;
border-radius: 50rpx;
}
... ...
// pages/mine_details/mine_details.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
... ...
<!--pages/mine_detail/mine_detail.wxml-->
<view class='tops'>
<!-- 已取消 -->
<view class='top_title'>已取消</view>
</view>
<view class='address_infor'>
<view class='card'>
<view class='card_top layer_star'>
<view class='card_title'>朗丽兹精选北京东直门店</view>
<view class='card_icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
<view class='card_list layer_between'>
<view class='card_left layer_star'>
<view class='list_icon'>
<image src='/img/ditu.png'></image>
</view>
<view class='list_word'>北京市朝阳区香河园路左家庄15号院</view>
</view>
<view class='card_right'>
<view class='list_img'>
<image src='/img/order_detail (1).png'></image>
</view>
</view>
</view>
<view class='card_list layer_between'>
<view class='card_left layer_star'>
<view class='list_icon'>
<image src='/img/ditu.png'></image>
</view>
<view class='list_word'>010-62076207</view>
</view>
<view class='card_right'>
<view class='list_img'>
<image src='/img/order_detail (3).png'></image>
</view>
</view>
</view>
<view class='card_state layer_between'>
<view class='state_left'>已退款</view>
<view class='state_right'>￥1768</view>
</view>
</view>
</view>
<view class='person_infor'>
<view class='person_box'>
<view class='person_one layer_star'>
<view class='person_left'>
房型
</view>
<view class='person_rigth'>高级大床房
<text>1间(含早)</text>
</view>
</view>
<view class='person_one layer_star'>
<view class='person_left'>
入住日期
</view>
<view class='person_rigth'>
<text class='into'>08月21日-08月23日</text> 共
<text>2</text>晚
</view>
</view>
<view class='person_one layer_star'>
<view class='person_left'>
到店时间
</view>
<view class='person_rigth'>
<text class='into'>08月21日</text>
<text>18:00</text>
</view>
</view>
<view class='person_one layer_star' style='border:none'>
<view class='person_left'>
入住人
</view>
<view class='person_rigth'>
刘娜
</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_detail/mine_detail.wxss */
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: #f9f9f9;
}
.top {
width: 100%;
height: 232rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
padding: 56rpx 32rpx;
box-sizing: border-box;
}
.tops {
width: 100%;
height: 232rpx;
background: rgba(189, 196, 206, 1);
padding: 56rpx 32rpx;
box-sizing: border-box;
}
.top_title {
font-size: 40rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
}
.address_infor {
padding: 0 32rpx;
box-sizing: border-box;
margin-top: -88rpx;
}
.card {
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(0, 0, 0, 0.02);
border-radius: 20rpx;
padding: 52rpx 26rpx 40rpx 32rpx;
box-sizing: border-box;
}
.card_top {
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
padding-bottom: 32rpx;
}
.card_title {
font-size: 32rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
margin-right: 32rpx;
}
.card_icon {
width: 22rpx;
height: 22rpx;
font-size: 0;
}
.card_icon image {
width: 100%;
height: 100%;
}
.list_icon {
width: 24rpx;
height: 30rpx;
font-size: 0;
}
.list_icon image {
width: 100%;
height: 100%;
}
.list_word {
margin-left: 20rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.list_img {
width: 56rpx;
height: 56rpx;
font-size: 0;
}
.list_img image {
width: 100%;
height: 100%;
}
.card_list {
padding: 24rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.card_state {
margin-top: 24rpx;
padding-right: 6rpx;
box-sizing: border-box;
}
.state_left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.state_right {
font-size: 36rpx;
font-weight: bold;
color: rgba(189,196,206,1);
}
.person_infor {
margin-top: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.person_box {
background: rgba(255, 255, 255, 1);
box-shadow: 0rpx 16rpx 24rpx rgba(0, 0, 0, 0.02);
border-radius: 20rpx;
padding: 0 32rpx;
box-sizing: border-boxs;
}
.person_one {
padding: 34rpx 0 32rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.person_left {
width: 96rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.person_rigth {
margin-left: 60rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.into {
margin-right: 32rpx;
}
... ...
// pages/mine_exchange/mine_exchange.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
... ...
<!--pages/mine_exchange/mine_exchange.wxml-->
<view class='box'>
<view class='top layer_center'>
<view class='top_icon'>
<image src='/img/mine_exchange.png'></image>
</view>
<view class='top_word'>请输入兑换码</view>
</view>
<view class='input'>
<input></input>
</view>
<view class='button'>
<view class='btn'>立即兑换</view>
</view>
<view class='words'>请输入购买的兑换码，即开通会员</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_exchange/mine_exchange.wxss */
.layer_center {
display: flex;
justify-content: center;
align-items: center;
}
page {
background: rgba(249, 249, 249, 1);
}
.box {
margin-top: 74rpx;
}
.top_icon {
width: 52rpx;
height: 52rpx;
font-size: 0;
}
.top_icon image {
width: 100%;
height: 100%;
}
.top_word {
margin-left: 16rpx;
font-size: 28rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
}
.input {
margin-top: 16rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.input input {
width: 100%;
height: 92rpx;
background: #fff;
text-align: center
}
.button {
margin-top: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.btn {
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 44rpx;
font-size: 28rpx;
font-weight: bold;
color: rgba(255, 255, 255, 1);
text-align: center;
padding: 26rpx 0;
box-sizing: border-box;
}
.words {
margin-top: 26rpx;
font-size: 24rpx;
font-weight: bold;
color: rgba(140, 145, 152, 1);
text-align: center;
}
... ...
// pages/mine_experience/mine_experience.js
Page({
/**
* 页面的初始数据
*/
data: {
length: 0,
lengths: 0,
show: false
},
// input输入字数
length(e) {
let length = e.detail.value.length
// console.log(length)
this.setData({
length: length
})
},
// textarea输入字数
lengths(e) {
let length = e.detail.value.length
// console.log(length)
this.setData({
lengths: length
})
},
// 开关
open() {
let t = this;
t.setData({
show: !t.data.show
})
console.log(t.data.show)
},
/**
* 生命周期函数--监听页面加载
*/
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
... ...
<!--pages/mine_experience/mine_experience.wxml-->
<view class='box'>
<view class='top layer_between'>
<input name='' value='' placeholder='请输入标题' bindinput='length' placeholder-class='input'></input>
<text class='input-right'>{{length}}/30</text>
</view>
<view class='bottom'>
<textarea placeholder='请输入笔记' bindinput='lengths' placeholder-class='input'></textarea>
<text class='text-right'>{{lengths}}/100</text>
</view>
<view class='creama'>
<view class='img_one'>
<image src='/img/mine_addping.png'></image>
</view>
</view>
</view>
<view class='show layer_between'>
<view class='left'>显示酒店</view>
<view class='right' bindtap='open'>
<image src='{{show?"/img/mine_open.png":"/img/mine_down.png"}}'></image>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_experience/mine_experience.wxss */
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: #f9f9f9;
}
.box {
margin-top: 24rpx;
background: #fff;
padding: 0 48rpx;
box-sizing: border-box;
}
.top {
padding: 36rpx 0 40rpx;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.input {
font-size: 32rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.input-left {
margin-left: 25rpx;
font-size: 30rpx;
}
.input-right {
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
input {
font-size: 30rpx;
width: 500rpx;
}
.bottom {
/* margin-top: 36rpx; */
padding-top: 36rpx;
box-sizing: border-box;
height: 260rpx;
position: relative;
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
}
.bottom textarea {
width: 100%;
height: 100%;
}
.text-right {
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
text-align: right;
position: absolute;
bottom: 16rpx;
right: 0;
}
.creama {
margin-top: 40rpx;
padding-bottom: 40rpx;
}
.img_one {
width: 180rpx;
height: 180rpx;
border: 2rpx solid rgba(140, 145, 152, 1);
border-radius: 4rpx;
position: relative;
}
.img_one image {
width: 52rpx;
height: 52rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.show {
margin-top: 24rpx;
background: #fff;
padding: 40rpx 50rpx;
box-sizing: border-box;
}
.right {
width: 76rpx;
height: 32rpx;
font-size: 0;
}
.right image {
width: 100%;
height: 100%;
}
... ...
// pages/mine_kefu/mine_kefu.js
Page({
/**
* 页面的初始数据
*/
data: {
},
// 前往常见问题
go_question(){
wx.navigateTo({
url: '/pages/mine_question/mine_question',
})
},
/**
* 生命周期函数--监听页面加载
*/
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
... ...
<!--pages/mine_kefu/mine_kefu.wxml-->
<view class='top'>
<view class='top_one layer_between'>
<view class='top_left'>在线客服</view>
<view class='top_right layer_star'>
<view class='time'>服务时间：9：00-22：00</view>
<view class='top_icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='top_one layer_between no_border'>
<view class='top_left'>电话客服</view>
<view class='top_right layer_star'>
<view class='time'>服务时间：9：00-22：00</view>
<view class='top_icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
</view>
<view class='bottom layer_between'>
<view class='left'>常见问题</view>
<view class='right layer_star' bindtap='go_question'>
<view class='right_word'>查看常见问题</view>
<view class='right_icon'>
<image src='/img/redyou.png'></image>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_kefu/mine_kefu.wxss */
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: rgba(249, 249, 249, 1);
}
.top {
background: #fff;
padding: 0 32rpx;
box-sizing: border-box;
}
.top_one {
padding: 34rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
}
.no_border {
border: none;
}
.top_icon {
width: 22rpx;
height: 22rpx;
font-size: 0;
}
.top_icon image {
width: 100%;
height: 100%;
}
.top_left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.time {
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
margin-right: 18rpx;
}
.bottom {
background: #fff;
margin-top: 24rpx;
padding: 34rpx 32rpx;
box-sizing: border-box;
}
.left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.right_word {
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 90, 78, 1);
margin-right: 18rpx
}
.right_icon{
width: 22rpx;
height: 22rpx;
font-size: 0
}
.right_icon image{
width: 100%;
height: 100%
}
\ No newline at end of file
... ...
// pages/mine_notice/mine_notice.js
Page({
/**
* 页面的初始数据
*/
data: {
notice: [{
title: "第一条、会员及期限",
question: [{
num: "1.会员资格;",
word: "凡年满18周岁或年满16周岁不满18周岁但以自己的劳 动收入为主要生活来源的完全民事行为能力人，同意并接 受会员服务协议的，均可申请成为会员。"
}, {
num: "2.入会方式",
word: "根据小程序指引填写真实、准确、合法且有效的个人 信息，将会员资格绑定身份证进行实名认证，在您完成会 员实名认证程序、阅读和同意《守麦会员服务协议》全部 内容、支付了会员费用并完成了成为守麦会员的其他所有 程序后，您即取得守麦会员资格。"
}, {
num: "3.会员期限",
word: "会员服务期限为一年。一年以365天计，以会员 权益激活当日开始计算(如: 您于2019年9月1日激活会员 权益，则服务期限为: 2019年9月1日至2020年8月31日， 均包含当天)。"
}]
}]
},
/**
* 生命周期函数--监听页面加载
*/
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
... ...
<!--pages/mine_notice/mine_notice.wxml-->
<view class='top'>
<view class='word'>（尊敬的会员，我们致力于为现代年轻都市人群 提供住宿优质解决方案，输出个性化内容与标准化服务。 基于现代都市人群的度假需求，推出会员制特色度假 住宿在线预订平台,为更好得体验我们为您提供的服务， 请认真阅读并充分理解《会员须知》，感谢您的支持和信任。）</view>
</view>
<view class='bottom'>
<view class='bottom_box' wx:for="{{notice}}" wx:key="" wx:for-item="item">
<view class='title'>{{item.title}}</view>
<view class='list' wx:for="{{item.question}}" wx:key="" wx:for-item="itema">
<view class='list_title'>{{itema.num}}</view>
<view class='list_word'>{{itema.word}}</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_notice/mine_notice.wxss */
page {
background: #f9f9f9;
}
.top {
padding: 0 48rpx;
margin-top: 46rpx;
}
.word {
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: rgba(6, 18, 30, 1);
}
.bottom {
margin-top: 30rpx;
background: #fff;
width: 100%;
padding: 34rpx 0 108rpx;
box-sizing: border-box
}
.bottom_box {
padding: 0 32rpx;
box-sizing: border-box;
}
.title {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
text-align: center;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 36rpx;
margin-bottom: 36rpx;
}
.list_title {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.list_word {
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: rgba(6, 18, 30, 1);
}
... ...
// pages/mine_order/mine_order.js
Page({
/**
* 页面的初始数据
*/
data: {
tab: [{
id: 0,
name: "待付款"
}, {
id: 1,
name: "待出行"
}, {
id: 2,
name: "已入住"
}, {
id: 3,
name: "已完成"
}, {
id: 4,
name: "已取消"
}],
active: 0,
list: [{
name: "蔓图精品民宿",
address: "北京市朝阳区蔓图精品民宿",
into: "09/11",
leave: "09/12",
day: "1",
price: "1902"
}]
},
// 切换tab
tab(e) {
console.log(e)
let t = this;
t.setData({
active: e.currentTarget.dataset.id
});
console.log(t.data.active)
},
// 立即付款
pay(e) {
console.log(e)
},
// 分享体验
go_share(){
wx.navigateTo({
url: '/pages/mine_experience/mine_experience',
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
console.log(options);
this.setData({
active: options.active
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
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
... ...
<!--pages/mine_order/mine_order.wxml-->
<view class='tab'>
<view class="{{item.id == active?'tab_ones':'tab_one'}}" wx:for="{{tab}}" wx:key="index" bindtap='tab' data-id="{{item.id}}">{{item.name}}</view>
</view>
<!-- 无数据内容展示 -->
<view class='no_order_num'>
<view class='flex_center no_order'>
<view class='no_img'>
<image src='/img/no_order.png'></image>
</view>
<view class='no_word'>暂时还没有订单哦 赶快去下单吧</view>
</view>
</view>
<!-- 有数据内容展示 -->
<view class='order'>
<view class='order_card' wx:for="{{list}}" wx:key="">
<view class='order_title'>{{item.name}}</view>
<view class='order_address layer_star'>
<view class='address_icon'>
<image src='/img/order_address.png'></image>
</view>
<view class='order_word'>{{item.address}}</view>
</view>
<view class='order_time layer_star'>
<view class='time_icon'>
<image src='/img/order_time.png'></image>
</view>
<view class='order_word'>入住：
<text class='into'>{{item.into}}</text>离店：
<text class='leave'>{{item.leave}}</text>共
<text>{{item.day}}</text>晚</view>
</view>
<!-- 待付款 -->
<view class='order_price layer_between' wx:if="{{active == 0}}">
<view class='price_num'>￥
<text>{{item.price}}</text>
</view>
<view class='price_btn' bindtap='pay'>立即付款</view>
</view>
<!-- 待出行 -->
<view class='order_trip layer_between' wx:elif="{{active == 1}}">
<view class='price_num'>￥
<text>{{item.price}}</text>
</view>
<view class='trip_right layer_star'>
<view class='trip_cancel'>取消订单</view>
<view class='trip_see'>查看详情</view>
</view>
</view>
<!-- 已入住 -->
<view class='order_check layer_between' wx:elif="{{active == 2}}">
<view class='price_num'>￥
<text>{{item.price}}</text>
</view>
<view class='trip_see'>查看详情</view>
</view>
<!-- 已完成 -->
<view class='order_complete layer_between' wx:elif="{{active == 3}}">
<view class='complete_left'>
<view class='price_num'>￥
<text>{{item.price}}</text>
</view>
<view class='complete_word'>已退还保证金</view>
</view>
<view class='complete_right layer_star'>
<view class='complete_share layer_star' bindtap='go_share'>
<view class='complete_share_icon'>
<image src='/img/mine_share.png'></image>
</view>
<view class='complete_share_btn'>分享体验</view>
</view>
<view class='complete_see'>查看详情</view>
</view>
</view>
<!-- 已取消 -->
<view class='order_cancel layer_between' wx:elif="{{active == 4}}">
<view class='cancel_left layer_star'>
<view class='price_num cancel_price'>￥
<text>{{item.price}}</text>
</view>
<view class='cencel_word'>已退还保证金</view>
</view>
<view class='complete_see'>查看详情</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_order/mine_order.wxss */
.flex_center {
display: flex;
flex-direction: column;
align-content: center;
}
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: #f9f9f9;
}
.tab {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 28rpx 32rpx;
box-sizing: border-box;
}
.tab_one {
font-size: 30rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.tab_ones {
font-size: 30rpx;
font-weight: bold;
color: rgba(255, 90, 78, 1);
position: relative;
}
.tab_ones:after {
content: "";
width: 48rpx;
height: 6rpx;
background: rgba(255, 90, 78, 1);
opacity: 1;
border-radius: 4rpx;
position: absolute;
bottom: 24rpx;
left: 50%;
transform: translate(-50%, 48rpx);
}
.no_order_num {
display: none;
}
.no_order {
text-align: center;
margin-top: 150rpx;
}
.no_img image {
width: 347rpx;
height: 240rpx;
}
.no_word {
font-size: 24rpx;
font-weight: 500;
color: rgba(140, 145, 152, 1);
}
/* 有数据的情况 */
.order {
padding: 28rpx 32rpx 0;
box-sizing: border-box;
}
.order_card {
background: rgba(255, 255, 255, 1);
box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.04);
border-radius: 20rpx;
margin: 12rpx 0;
padding: 32rpx;
box-sizing: border-box;
}
.order_title {
font-size: 28rpx;
font-weight: bold;
color: rgba(6, 18, 30, 1);
margin-bottom: 30rpx;
}
.address_icon {
margin-right: 16rpx;
}
.address_icon image {
width: 19rpx;
height: 23rpx;
}
.order_word {
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.order_time {
margin-top: 20rpx;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding-bottom: 34rpx;
}
.time_icon {
margin-right: 14rpx;
}
.time_icon image {
width: 20rpx;
height: 20rpx;
}
.into {
margin-right: 34rpx;
}
.leave {
margin-right: 22rpx;
}
/* 待付款 */
.price_num {
font-size: 24rpx;
font-weight: bold;
color: rgba(255, 90, 78, 1);
}
.price_num text {
font-size: 40rpx;
}
.price_btn {
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
padding: 10rpx 40rpx;
box-sizing: border-box;
}
/* 待出行 */
.trip_cancel {
background: rgba(189, 196, 206, 1);
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
padding: 10rpx 40rpx;
box-sizing: border-box;
}
.trip_see {
margin-left: 20rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
padding: 10rpx 40rpx;
box-sizing: border-box;
}
/* 已入住 */
.order_check, .order_complete, .order_cancel, .order_trip, .order_price {
margin-top: 32rpx;
}
/* 已完成 */
.complete_word {
margin-top: 6rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(91, 94, 99, 1);
}
.complete_share {
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 40rpx;
padding: 10rpx 22rpx;
box-sizing: border-box;
}
.complete_share_icon {
width: 40rpx;
height: 40rpx;
}
.complete_share_icon image {
width: 100%;
height: 100%;
font-size: 0;
}
.complete_share_btn {
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.complete_see {
margin-left: 20rpx;
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 40rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
padding: 10rpx 40rpx;
box-sizing: border-box;
}
/* 已取消 */
.cancel_price {
text-decoration: line-through;
}
.cencel_word {
margin-left: 26rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(91, 94, 99, 1);
}
... ...
// pages/mine_question/mine_question.js
Page({
/**
* 页面的初始数据
*/
data: {
list: [{
index: 1,
question: "1、会员卡的有效期是多久",
answer: "会员使用免费入住权限时，每次最多可预订1个房间，连续2晚。当您完成本次订单退房时可进行下次预订。"
}, {
index: 2,
question: "2、我可以同是预订好几个房间吗",
answer: "会员使用免费入住权限时，每次最多可预订1个房间，连续2晚。当您完成本次订单退房时可进行下次预订。"
}],
active: ""
},
// 点击查看答案
look(e) {
console.log(e)
let t = this;
t.setData({
active: e.currentTarget.dataset.id
})
},
/**
* 生命周期函数--监听页面加载
*/
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
... ...
<!--pages/mine_kefu/mine_kefu.wxml-->
<view class='list'>
<view class='box' wx:for="{{list}}" wx:key="index">
<view class='top'>
<view class='top_one layer_between' data-id='{{item.index}}' bindtap='look'>
<view class='top_left'>{{item.question}}</view>
<view class='top_icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='{{active == item.index?"bottoms":"bottom"}}'>{{item.answer}}</view>
</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_kefu/mine_kefu.wxss */
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
page {
background: rgba(249, 249, 249, 1);
}
.top {
padding: 0 32rpx;
box-sizing: border-box;
}
.box {
background: #fff;
}
.top_one {
padding: 34rpx 0;
box-sizing: border-box;
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
}
.no_border {
border: none;
}
.top_icon {
width: 22rpx;
height: 22rpx;
font-size: 0;
}
.top_icon image {
width: 100%;
height: 100%;
}
.top_left {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.bottom {
display: none;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: rgba(140, 145, 152, 1);
padding: 32rpx 74rpx;
box-sizing: border-box
}
.bottoms {
display: block;
font-size: 28rpx;
font-weight: 400;
line-height: 40rpx;
color: rgba(140, 145, 152, 1);
padding: 32rpx 74rpx;
box-sizing: border-box
}
... ...
// pages/mine_set/mine_set.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
... ...
<!--pages/mine_set/mine_set.wxml-->
<view class='top_img layer_between'>
<view class='title'>头像</view>
<view class='img'>
<image src='/img/mine (5).png'></image>
</view>
</view>
<view class='bottom'>
<view class='one layer_between'>
<view class='title'>昵称</view>
<view class='right layer_star'>
<view class='word'>爱旅行的小李</view>
<view class='icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='one layer_between'>
<view class='title'>手机号码</view>
<view class='right layer_star'>
<view class='word'>183****232</view>
<view class='icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='one layer_between'>
<view class='title'>常住地址</view>
<view class='right layer_star'>
<view class='word'>河北 沧州</view>
<view class='icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
<view class='one layer_between' style='border:none'>
<view class='title'>详细地址</view>
<view class='right layer_star'>
<view class='word'></view>
<view class='icon'>
<image src='/img/yourow.png'></image>
</view>
</view>
</view>
</view>
<view class='btn'>
<view class='bot_btn'>退出登录</view>
</view>
\ No newline at end of file
... ...
/* pages/mine_set/mine_set.wxss */
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
page {
background: #f9f9f9;
}
.top_img {
background: #fff;
padding: 14rpx 32rpx;
box-sizing: border-box;
}
.title {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.img {
width: 120rpx;
height: 120rpx;
font-size: 0;
}
.img image {
width: 100%;
height: 100%;
}
.bottom {
margin-top: 24rpx;
background: #fdfdfd;
padding: 0 32rpx;
box-sizing: border-box;
}
.one {
border-bottom: 1rpx solid rgba(238, 238, 238, 1);
padding: 38rpx 0;
box-sizing: border-box;
}
.title {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
}
.word {
font-size: 24rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
.icon {
width: 22rpx;
height: 22rpx;
font-size: 0;
margin-left: 18rpx;
}
.icon image {
width: 100%;
height: 100%;
}
.btn {
width: 100%;
padding: 0 52rpx;
box-sizing: border-box;
position: fixed;
bottom: 80rpx;
}
.bot_btn {
background: linear-gradient(180deg, rgba(252, 169, 162, 1) 0%, rgba(255, 119, 117, 1) 100%);
border-radius: 50rpx;
font-size: 32rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
text-align: center;
padding: 22rpx 0;
box-sizing: border-box;
}
... ...
// pages/mine_wallet/mine_wallet.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
... ...
<!--pages/mine_wallet/mine_wallet.wxml-->
<view class='top'>
<view class='top_box'>
<view class='title'>总金额（元）</view>
<view class='top_contant layer_between'>
<view class='top_left'>￥40.05</view>
<view class='top_right'>提现</view>
</view>
</view>
</view>
<!-- 银行卡列表 -->
<view class='bank_list'>
<view class='bank_box'>
<view class='bank_title'>银行卡</view>
<view class='bank_contant'>
<view class='bank_one layer_star'>
<view class='left'>
<image src='/img/mine_wallet (1).png'></image>
</view>
<view class='right'>
<view class='bank_name'>工商银行</view>
<view class='bank_num'>**** **** **** 6445</view>
</view>
</view>
<view class='bank_one bank_two layer_star'>
<view class='left'>
<image src='/img/mine_wallet (2).png'></image>
</view>
<view class='right'>
<view class='bank_name'>工商银行</view>
<view class='bank_num'>**** **** **** 6445</view>
</view>
</view>
</view>
<view class='add_bank layer_star'>
<view class='add_left'>
<image src='/img/mine_wallet (3).png'></image>
</view>
<view class='add_right'>添加银行卡</view>
</view>
</view>
</view>
\ No newline at end of file
... ...
page {
background: #f9f9f9;
}
.layer_between {
display: flex;
justify-content: space-between;
align-items: center;
}
.layer_star {
display: flex;
justify-content: flex-start;
align-items: center;
}
.top {
padding: 26rpx 32rpx 0;
box-sizing: border-box;
}
.top_box {
background: rgba(255, 255, 255, 1);
border-radius: 16rpx;
padding: 52rpx 32rpx 44rpx;
box-sizing: border-box;
}
.title {
font-size: 24rpx;
font-weight: 500;
color: rgba(6, 18, 30, 1);
}
.top_contant {
margin-top: 24rpx;
}
.top_left {
font-size: 48rpx;
font-weight: bold;
color: rgba(255, 90, 78, 1);
}
.top_right {
background: rgba(255, 114, 113, 1);
font-size: 28rpx;
font-weight: 500;
color: rgba(255, 255, 255, 1);
padding: 8rpx 72rpx;
box-sizing: border-box;
border-radius: 10rpx;
}
/* 银行卡 */
.bank_list {
margin-top: 24rpx;
padding: 0 32rpx;
box-sizing: border-box;
}
.bank_box {
background: #fff;
padding: 40rpx 32rpx;
box-sizing: border-box;
border-radius:16rpx;
}
.bank_title {
font-size: 28rpx;
font-weight: 400;
color: rgba(6, 18, 30, 1);
border-bottom: 1rpx solid rgba(235, 235, 235, 1);
padding-bottom: 40rpx;
}
.left {
width: 72rpx;
height: 72rpx;
}
.left image {
width: 100%;
height: 100%;
}
.bank_one {
margin-top: 24rpx;
background: rgba(201, 80, 89, 1);
border-radius: 16rpx;
padding: 24rpx 28rpx;
box-sizing: border-box;
}
.right {
margin-left: 28rpx;
}
.bank_name {
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.bank_num {
margin-top: 2rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(255, 255, 255, 1);
}
.bank_two {
background: rgba(0, 59, 143, 1);
}
.add_bank {
margin-top: 26rpx;
border: 4rpx solid rgba(238, 238, 238, 1);
border-radius: 16rpx;
padding: 24rpx 26rpx;
box-sizing: border-box
}
.add_left {
width: 72rpx;
height: 72rpx;
}
.add_left image {
width: 100%;
height: 100%;
}
.add_right {
margin-left: 30rpx;
font-size: 28rpx;
font-weight: 400;
color: rgba(140, 145, 152, 1);
}
... ...