订单部分代码

(1)订单界面整体代码OrderV.vue

<template>
    <div class="wrapper">
        <div class="title">我的订单</div>
        <div class="orders">
            <div 
                class="order" 
                v-for="(item,index) in list" 
                :key="index"
            >
                <div class="order_title">
                    {{item.shopName}}
                    <span class="order__status">{{item.isCancled ? '已取消' : '已下单'}}</span>
                </div>
                <div class="order__content">
                    <div class="order__content__imgs">
                        <template 
                            v-for="(innerItem,innerIndex) in item.products"
                            :key="innerIndex"
            rderV.vue            >
                            <img 
                                class="order__content__img" 
                                :src="innerItem.product.img" 
                                v-if="innerIndex<=3"
                            />
                        </template>
                        
                    </div>
                    <div class="order__content__info">
                        <div class="order__content__price">￥{{item.totalPrice}}</div>
                        <div class="order__content__count">共 {{item.totalNumber}} 件</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <DockerV :currentIndex="2" />
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import DockerV from '../../components/DockerV.vue';
import { get } from '../../utils/request';
//处理订单列表逻辑
const useOrderListEffect = ()=>{
    const data = reactive({list:[]})
    const getOrderList = async ()=>{
        const result = await get('/api/order')
        if(result?.errno === 0 && result?.data?.length){
            const ordertList = result.data
            ordertList.forEach((order) => {
                const products = order.products ||{}
                let totalPrice = 0
                let totalNumber = 0
                products.forEach((productItem)=>{
                    totalNumber += (productItem?.orderSales || 0)
                    totalPrice+=((productItem?.product?.price*productItem?.orderSales) || 0)
                })
                order.totalPrice= totalPrice
                order.totalNumber = totalNumber
            });
            data.list = result.data;
        }
    }
    getOrderList()
    const {list} = toRefs(data)
    return {list}
}
export default {
    name:'OrderList',
    components:{DockerV},
    setup() {
        const {list} = useOrderListEffect()
        return {list}
    },
}
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper{
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: .5rem;
  right: 0;
  background: rgb(248,248,248);
}
.title{
    line-height: .44rem;
    background: $bgColor;
    font-size: .16rem;
    color: $content-fontcolor;
    text-align: center;
}
.order{
    margin: .16rem .18rem;
    padding: .16rem;
    background: $bgColor;
    &__title{
        margin-bottom: .16rem;
        line-height: .22rem;
        font-size: .16rem;
        color: $content-fontcolor;
    }
    &__status{
        float: right;
        font-size: .14rem;
        color: $light-fontColor;
    }
    &__content{
        display: flex;
        &__imgs{
            flex: 1;
        }
        &__img{
            width: .4rem;
            height: .4rem;
            margin-right: .12rem;
        }
        &__info{
            width: .7rem;
        }
        &__price{
            margin-bottom: .04rem;
            line-height: .2rem;
            font-size: .14rem;
            color: $highlight-fontColor;
            text-align: right;
        }
        &__count{
            font-size: .12rem;
            color: $content-fontcolor;
            text-align: right;
            line-height: .14rem;
        }
    }
}
</style>

（2）底部DockerV.vue

<template>
 <div class="docker">
    <!--BEM block element Modifier
    block__element--Modifier -->
    <div 
    v-for="(item,index) in dockerList"
    :class="{'docker__item':true,'docker__item--active':index===currentIndex}"
    class="docker__item "
    :key="item.icon"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon" />
        <div class="docker__title">{{item.text}}</div>
      </router-link>
      
    </div>
</div>
</template>
<script>
export default {
    name:'DockerV',
    props:['currentIndex'],
    setup(){
      const dockerList = [
        {icon:'&#xe867;',text:'首页',to:{name:'Home'}},
        {icon:'&#xe6bc;',text:'购物车',to:{name:'CartList'}},
        {icon:'&#xe7b3',text:'订单',to:{name:'OrderList'}},
        {icon:'&#xe78b',text:'我的',to:{name:'Home'}}
      ];
      return {dockerList}
    }
}
</script>
<style lang="scss" scoped>
@import '../style/viriables.scss';
@import '../style/mixins.scss';
.docker{
  display: flex;
  box-sizing: border-box;
  position: absolute;
  padding: 0 .18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top:.01rem solid $content-bgcolor ;
  
  &__item{
    flex: 1;
    text-align: center;
    a{
      color: $content-fontcolor;
      text-decoration: none;
    }
    .iconfont{
      margin: .07rem 0 .02rem 0;
      font-size: .18rem;
    }
    &--active{
      a{
        color: #1FA4FC;
      }
    }
  }
  &__title{
    font-size: .2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>

实现界面

订单.png