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

﹏ヽ暗。殇╰゛Y 2024-03-31 11:23 92阅读 0赞

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

#### 实际案例图片 ####

![我的订单有数据页面][2130bffdcc04494e9db31b6f9724ddbb.png]

![我的订单无数据页面][b542721961f14ae797ec89b8a21dc880.png]

订单页面顶部选项卡

> 具体内容图片自己替换哈，随便找了个图片的做示例  
> 具体位置见目录结构  
> 通过 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>

#### 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;
    }

#### 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>

#### pages.json 部分代码 ####

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

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

#### 目录结构 ####

##### 前端目录结构 #####

*  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

[2130bffdcc04494e9db31b6f9724ddbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/ae3d95e6188b4c4ca96b46a01bc7cdc3.png
[b542721961f14ae797ec89b8a21dc880.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/050d455d246844b3bf0025470358542b.png