个人中心

+// 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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "我的"
+}

+<!-- 模态框 -->
+<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>

+.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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "我的收藏"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "待出行"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "已取消"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "兑换中心"
+}

+<!--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>

+/* 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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "旅行笔记"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "我的客服"
+}

+<!--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>

+/* 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%
+}

+// 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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "会员须知"
+}

+<!--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>

+/* 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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "我的订单"
+}

+<!--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>

+/* 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() {
+
+    }
+})

+{
+    "navigationBarTitleText": "常见问题"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "个人设置"
+}

+<!--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>

+/* 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 () {
+
+    }
+})

+{
+    "navigationBarTitleText": "我的钱包"
+}

+<!--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>

+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);
+}