• UNIAPP实战项目笔记44 订单页面顶部选项卡 有数据页面样式布局和无数据页面样式布局

    UNIAPP实战项目笔记44 订单页面顶部选项卡 有数据页面样式布局和无数据页面样式布局

    实际案例图片

    我的订单有数据页面

    我的订单无数据页面

    订单页面顶部选项卡

    具体内容图片自己替换哈，随便找了个图片的做示例
    具体位置见目录结构
    通过 v-show 的false 和 true来切换有无数据页面布局

    代码 my-order.vue 页面部分

    my-order.vue 订单页面布局

    flex 样式布局

    <template>
    <view class="my-order bg-active-color">
        <Lines/>
        <view class="order-header">
            <view
                class="header-item"
                :class="tabIndex==index? 'active':''"
                v-for="(item,index) in tabList"
                :key="index"
                @tap="changeTab(index)"
            >
                {{item.name}}
            </view>
        </view>
        
        <view class="order-main" :style="'height:'+clentHeight+'px;'" v-show="true">
            <!-- 商品 -->
            <view class="order-goods">
                <view class="goods-status f-active-color">
                    待买家支付
                </view>
                <view class="goods-item" v-for="(item,index) in 3">
                    
                    <view class="goods-content bg-active-color">
                        <image class="goods-img" src="../../static/logo.png" mode=""></image>
                        <view class="goods-text">
                            <view class="goods-name">
                                一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字
                            </view>
                            <view class="goods-size f-color">
                                颜色分类:黑色
                            </view>
                            <view class="f-active-color">
                                7天无理由
                            </view>
                        </view>
                        <view class="">
                            <view class="">
                                 ￥299.00
                            </view>
                            <view class="goods-size">
                                x 1
                            </view>
                        </view>
                    </view>
                    
                </view>
            </view>
            
            <!-- 总价 -->
            <Lines></Lines>
            <view class="total-price">
                订单金额: <text class="f-active-color">$39.00</text> (包含运费￥0.09)
            </view>
            
            <!-- 支付 -->
            <view class="payment">
                <view class="payment-text f-active-color">
                    支付
                </view>
            </view>
        </view>
        
        <!-- 无订单数据页面布局 -->
        <view class="no-order" :style="'height:'+clentHeight+'px;'">
            <view class="">
                您还没有相关订单
            </view>
            <view class="no-order-home">
                去首页逛逛
            </view>
        </view>
    </view>
</template>

<script>
    import Lines from '@/components/common/Lines.vue'
    export default {
        data() {
            return {
                // 内容块的高度
                clentHeight:0,
                tabIndex:0,
                tabList:[
                    {'name':"全部"},
                    {'name':"待付款"},
                    {'name':"待发货"},
                    {'name':"待收货"},
                    {'name':"待评价"}
                ]
            };
        },
        components:{
            Lines
        },
        methods:{
            // 顶部切换
            changeTab(index){
                this.tabIndex = index;
            },
            // 获取可视区域高度【兼容】
            getClientHeight(){
                const res = uni.getSystemInfoSync();
                console.log(res.platform,res.statusBarHeight);
                const system = res.platform;
                if ( system === 'iso') {
                    return 44 + res.statusBarHeight;
                }else if( system === 'android' ){
                    return 48 + res.statusBarHeight;
                } else{
                    return 0;
                }
            },
        },
        onReady() { // 初步渲染完后执行
            uni.getSystemInfo({
                success: (res) => {
                    // 可视区域高度 减去头部高度
                    this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight();
                }
            })
        },
    }
</script>

<style lang="scss">
.order-header{
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2rpx solid #f7f7f7;
}
.header-item{
    text-align: center;
    flex: 1;
    line-height: 120rpx;
}
.active{
    border-bottom: 5rpx solid #49bdfb;
}

.goods-status{
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 20rpx;
}

.goods-content{
    padding: 10rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.goods-text{
    width: 360rpx;
    padding: 0 10rpx;
    font-size: 26rpx;
}
.goods-img{
    width: 160rpx;
    height: 160rpx;
}
.goods-size{
    font-size: 24rpx;
}
.total-price{
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 20rpx;
}
.payment{
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    padding: 20rpx;
}
.payment-text{
    border: 2rpx solid #49bdfb;
    line-height: 40rpx;
    padding: 6rpx 40rpx;
    border-radius: 30rpx;
}

.no-order{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.no-order-home{
    padding: 6rpx 60rpx;
    border: 2rpx solid #49bdfb;
    color: #49bdfb;
    border-radius: 40rpx;
}
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200

    common.css 文件代码

    设置默认样式

    /* 全局css */

/* 默认字体颜色 */
.f-color{
    color: #636263;
}
/* 选中字体颜色 */
.f-active-color{
    color: #40bdfb;
}
/* 背景色 */
.bg-color{
    background-color: #42b7fb;
}
/* 页面默认背景色 */
.bg-active-color{
    background-color: #f7f7f7;
}


/* 隐藏滑块 */
::-webkit-scrollbar{
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background:transparent;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    my.vue 页面布局

    点击订单 跳转到 我的订单页面

    <template>
    <view class="my">
        <!-- 头部 -->
        <view class="my-header">
            <view class="header-main">
                <view class="header-config" @tap="goConfig">
                    <image class="config-img" src="../../static/tabbar/list.png" mode=""></image>
                </view>
                <view class="header-logo">
                    <image class="logo-img" src="../../static/logo.png" mode=""></image>
                    <view class="logo-name">用户昵称</view>
                </view>
            </view>
        </view>
        <!-- 我的订单 -->
        <view class="order">
            <view class="order-title" @tap="goOrder">
                <view class="">我的订单</view>
                <view class="">全部订单 > </view>
            </view>
            <view class="order-list">
                <view class="order-item">
                    <image class="order-img" src="../../static/logo.png" mode=""></image>
                    <view class="">待付款</view>
                </view>
                <view class="order-item">
                    <image class="order-img" src="../../static/logo.png" mode=""></image>
                    <view class="">待付款</view>
                </view>
                <view class="order-item">
                    <image class="order-img" src="../../static/logo.png" mode=""></image>
                    <view class="">待付款</view>
                </view>
                <view class="order-item">
                    <image class="order-img" src="../../static/logo.png" mode=""></image>
                    <view class="">待付款</view>
                </view>
                <view class="order-item">
                    <image class="order-img" src="../../static/logo.png" mode=""></image>
                    <view class="">待付款</view>
                </view>
            </view>
            <!-- 内容列表 -->
            <view class="my-content">
                <view class="my-content-item" v-for="(item,index) in 6">
                    <view class="">
                        我的收藏
                    </view>
                    <view class="">
                        >
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            goConfig(){
                uni.navigateTo({
                    url:'../my-config/my-config'
                })
            },
            goOrder(){
                uni.navigateTo({
                    url:'../my-order/my-order'
                })
            }
        }
    }
</script>

<style lang="scss">
.my-header{
    background: url("../../static/img/b3.jpg") no-repeat;
    width: 100%;
    height: 400rpx;
}
.header-main{
    position:relative;
    top: 120rpx;
}
.header-config{
    position: absolute;
    left: 20rpx;
}
.header-logo{
    position: absolute;
    left:50%;
    margin-left:-60rpx;
    width: 120rpx;
}
.config-img{
    width: 40rpx;
    height: 40rpx;
}
.logo-img{
    width: 120rpx;
    height: 120rpx;
    border:2rpx solid #ccc;
    border-radius: 50%;
    background-color: #FFFFFF;
}
.logo-name{
    color: #FFFFFF;
    font-size: 30rpx;
    font-weight: bold;
}
.order-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
}
.order-list{
    padding:20rpx;
    display: flex;
}
.order-item{
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.order-img{
    width: 80rpx;
    height: 80rpx;
}
.my-content{
    margin:20rpx 0;
    padding: 0 20rpx;
}
.my-content-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2px solid #ccc;
}
</style>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149

    pages.json 部分代码

    自定义页面标题文字和背景色

    {
            "path" : "pages/my-order/my-order",
            "style" :                                                                                    
            {
                "navigationBarBackgroundColor": "#FFFFFF",
                "navigationBarTitleText": "我的订单",
                "enablePullDownRefresh": false
            }
            
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    目录结构

    前端目录结构

    • manifest.json 配置文件： appid、logo…

    • pages.json 配置文件： 导航、 tabbar、 路由

    • main.js vue初始化入口文件

    • App.vue 全局配置：样式、全局监视

    • static 静态资源：图片、字体图标

    • page 页面

      • index
        • index.vue
      • list
        • list.vue
      • my
        • my.vue
      • my-config
        • my-config.vue
      • my-config
        • my-config.vue
      • my-add-path
        • my-add-path.vue
      • my-path-list
        • my-path-list.vue
      • search
        • search.vue
      • search-list
        • search-list.vue
      • shopcart
        • shopcart.vue
      • details
        • details.vue
      • my-order
        • my-order.vue

    • components 组件

      • index
        • Banner.vue
        • Hot.vue
        • Icons.vue
        • indexSwiper.vue
        • Recommend.vue
        • Shop.vue
      • common
        • Card.vue
        • Commondity.vue
        • CommondityList.vue
        • Line.vue
        • ShopList.vue
      • uni
        • uni-number-box
          • uni-number-box.vue
        • uni-icons
          • uni-icons.vue
        • uni-nav-bar
          • uni-nav-bar.vue
        • mpvue-citypicker
          • mpvueCityPicker.vue

    • common 公共文件：全局css文件 || 全局js文件

      • api
        • request.js
      • common.css
      • uni.css

    • store vuex状态机文件

      • modules
        • cart.js
        • path.js
      • index.js
  • 相关阅读:
    SmartInitializingSingleton接口
    快速掌握Java中List和Set接口的基本使用
    Linux实现原理 — I/O 处理流程与优化手段
    计算机跨考现状，两极分化现象很严重
    git初学者使用教程（包含Android studio中git使用）
    TiDB 7.4 发版：正式兼容 MySQL 8.0
    redis详细解析和配置选择
    『LeetCode|每日一题』----＞最小路径和
    CentOs/Ubuntu 一行指令安装Docker
    Arduino驱动BMA220三轴加速度传感器（惯性测量传感器篇）
  • 原文地址：https://blog.csdn.net/gixome/article/details/128036074