UNIAPP实战项目笔记45 订单页面布局完成和数据渲染

忘是亡心i 2024-03-31 12:36 37阅读 0赞

### UNIAPP实战项目笔记45 订单页面布局完成和数据渲染 ###

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

![订单页面全部][94b6d3f009524134a05707635b3685ab.png]

![订单页面无数据][1b01c8c3ddcd4bb696f3a874640b7535.png]

订单页面

> 具体内容图片自己替换哈，随便找了个图片的做示例  
> 具体位置见目录结构  
> 通过 模拟数据list 来实现数据渲染  
> 完善布局页面和样式  
> 将商品items改为组件形式

#### 代码 my-order.vue 页面部分 ####

my-order.vue 订单页面布局和渲染

> flex 样式布局  
> 模拟list数据

<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>
            
            <block
                v-for="(tabItem,tabI) in tabList"
                :key="tabI"
            >
                <view v-show="tabI===tabIndex" >
                    <view v-if="tabItem.list.length>0" class="order-main" :style="'height:'+clentHeight+'px;'">
                        
                        <view class="order-goods" v-for="(k,i) in tabItem.list" :key="i">
                            <view class="goods-status f-active-color">
                                {
        {
        k.status}}
                            </view>
                            <view class="goods-item" v-for="(item,index) in k.goods_item">
                                
                               <OrderList :item='item' :index='index'></OrderList>
                                
                            </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 v-else class="no-order" :style="'height:'+clentHeight+'px;'">
                        <view class="no-order-text">
                            您还没有相关订单
                        </view>
                        <view class="no-order-home">
                            去首页逛逛
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </template>
    
    <script>
        import Lines from '@/components/common/Lines.vue'
        import OrderList from '@/components/order/order-list.vue'
        export default {
        
            data() {
        
                return {
        
                    // 内容块的高度
                    clentHeight:0,
                    tabIndex:0,
                    tabList:[
                        {
        
                            name:"全部",
                            list:[
                                {
        
                                    status:'待付款',
                                    totalPrice:'3999.00',
                                    goods_item:[
                                        {
        
                                            imgUrl:'../../static/logo.png',
                                            name:'一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字',
                                            attrs:'黑色',
                                            pprice:"299.00",
                                            num:"1"
                                        },
                                        {
        
                                            imgUrl:'../../static/logo.png',
                                            name:'一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字一堆介绍文字',
                                            attrs:'红色',
                                            pprice:"299.00",
                                            num:"5"
                                        }
                                    ]
                                }
                            ]
                        },
                        {
        name:"待付款",list:[]},
                        {
        name:"待发货",list:[]},
                        {
        name:"待收货",list:[]},
                        {
        name:"待评价",list:[]}
                    ]
                };
            },
            components:{
        
                Lines,
                OrderList
            },
            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;
    }
    .no-order-text{
        
        padding:  50rpx; ;
    }
    </style>

#### order-list.vue 文件代码 ####

> 设置默认样式

<template>
        <view class="goods-content bg-active-color">
            <image class="goods-img" :src="item.imgUrl" mode=""></image>
            <view class="goods-text">
                <view class="goods-name">
                    {
        {
        item.name}}
                </view>
                <view class="goods-size f-color">
                    颜色分类:{
        {
        item.attrs}}
                </view>
                <view class="f-active-color">
                    7天无理由
                </view>
            </view>
            <view class="">
                <view class="">
                     ￥{
        {
        item.pprice}}
                </view>
                <view class="goods-size">
                    x {
        {
        item.num}}
                </view>
            </view>
        </view>
    </template>
    
    <script>
    export default {
        
        props:{
        
            item:Object,
            index:Number
        },
        name:"order",
        data() {
        
            return {
        
                
            };
        }
    }
    </script>
    
    <style lang="less">
    .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;
    }
    </style>

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

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

*  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
     *  order
        
         *  `order-list.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

[94b6d3f009524134a05707635b3685ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/7f6ca6b17d1b4402aeffb0f884980928.png
[1b01c8c3ddcd4bb696f3a874640b7535.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/742073605a2f4225aab1d0d83c87de80.png