gx

queenwuli

2020-12-18 bfc807ed1acd06060fe1c3b941f08ac643b9d81b

 hive-app/pages/workbench/orderList.vue

@@ -1,10 +1,9 @@
<template>
   <!-- 订单列表 -->
   <view>
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <search-bar :placeholder=placeholder class="header-input"></search-bar>
      <view class="header">
         <search-bar class="mb-0"></search-bar>
      </view>
      <view>
         <h-tabs
            class="tab"
@@ -14,33 +13,35 @@
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 4,
               fontSize: '30',
               fontSize: '28',
               underLineWidth: 60,
            }"
         />
         <view class="order">
            <view class="flex justify-between order-number">
               <text class="font-14">订单号: N202012123556</text>
               <text class="font-14 blue">待付款</text>
            </view>
            <view class="flex justify-between order-content">
               <view class="flex flex-v">
                  <text class="font-12">李某某</text>
                  <text class="font-12 gray mt-10">2020-12-15 18:11:01</text>
         <view class="list">
            <view class="list-item" v-for="item in 4">
               <view class="list-header">
                  <text>订单号: N202012123556</text>
                  <text class="blue">待付款</text>
               </view>
               <view class="flex flex-v">
                  <text class="font-12">应付金额</text>
                  <text class="font-12 mt-10">实付金额</text>
                  <text class="font-12 mt-10">欠款总额</text>
               <view class="list-content">
                  <view class="flex flex-v">
                     <text class="font-bold font-16">李某某</text>
                     <text class="gray">2020-12-15 18:11:01</text>
                  </view>
                  <view class="flex flex-v">
                     <text>应付金额</text>
                     <text>实付金额</text>
                     <text>欠款总额</text>
                  </view>
                  <view class="flex flex-v right">
                     <text>￥ 8000.00</text>
                     <text>￥ 0.00</text>
                     <text>￥ 8000.00</text>
                  </view>
               </view>
               <view class="flex flex-v">
                  <text class="font-12">￥ 8000.00</text>
                  <text class="font-12 mt-10">￥ 0.00</text>
                  <text class="font-12 mt-10">￥ 8000.00</text>
               <view class="list-footer">
                  <text class="blue-btn small-btn">取消订单</text>
               </view>
            </view>
            <view class="flex justify-end">
               <button class="blue-btn small-btn">取消订单</button>
            </view>
         </view>
      </view>
@@ -57,7 +58,6 @@
      },
      data() {
        return {
         placeholder:"输入会员姓名、手机号、编号查询",
          tabs:[
            {
               state: 1,
@@ -65,7 +65,7 @@
            },
            {
               state: 2,
               name: '代付款'
               name: '待付款'
            },
            {
               state: 3,
@@ -82,32 +82,41 @@
</script>

<style>
   .header-input{
      margin: 0 10px;
   page{
      background: #F6F6F8;
   }
   .header{
      padding: 10px;
      background: #FFFFFF;
   }
   .tab{
      background: #FFFFFF;
      border-bottom: 1px solid #EDEAF4;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .order{
      border: 1px solid #EDEAF4;
   .list-item{
      background: #FFFFFF;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      margin: 10px;
      padding: 0 6px;
      color: #3a3f3f;
   }
   .order-number{
      padding: 10px 6px;
   .list-header{
      display: flex;
      justify-content: space-between;
      padding: 12px 15px;
      font-size: 15px;
      border-bottom: 1px solid #EDEAF4;
   }
   .order-content{
      padding: 15px 6px;
      border-bottom: 1px solid #EDEAF4;
   .list-content{
      display: flex;
      justify-content: space-between;
      padding: 12px 15px;
      font-size: 14px;
      line-height: 28px;
   }
   .small-btn{
      width: 100px;
      margin: 10px 0;
      line-height: 30px;
   .list-footer{
      display: flex;
      justify-content: flex-end;
      padding: 10px 15px;
      border-top: 1px solid #EDEAF4;
   }
</style>