完成页面布局

zhangzengfei

2021-06-07 e23a219e6e6056f6da5405881768a90c39097933

 pages/order/order.vue

@@ -1,9 +1,46 @@
<template>
   <view class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="委托" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="分配" name="second">配置管理</el-tab-pane>
        </el-tabs>
      <view class="chart-tab">
         <text :class="request ? 'active': ''" @click="handleClick('request')">委托</text>
         <text :class="handle ? 'active': ''" @click="handleClick('handle')">分配</text>
      </view>

      <view class="order-list">
         <view v-for="(item, index) in orders" :key="item.sn" class="order-item" v-show="request">
            <view class="sn-text">
               <text>编号:{{item.sn}}</text>
               <text style="float: right;">{{item.status | orderStata}}</text>
            </view>
            <view class="request-detail">
               <view>节点数量: {{item.nodes}}</view>
               <view>
                  <text>{{item.createDate}}</text>
                  <el-button round size="small" style="float: right;">撤销</el-button>
               </view>
            </view>
         </view>

         <view v-for="(item, index) in orders" :key="`handle` + item.sn" class="order-item" v-show="handle">
            <view class="sn-text">
               <text>{{item.createDate}}</text>
               <text style="float: right;">{{item.status | orderStata}}</text>
            </view>
            <view class="handle-detail">
               <view class="avatar">
                  <image class="logo-img" src="../../static/img/apple.png" mode=""></image>
               </view>
               <view class="user-info">
                  <view>{{`昵称`}}</view>
                  <view>{{`手机号13123456789`}}</view>
                  <view>{{item.createDate}} </view>

               </view>
               <view class="handle-btn">
                  <el-button round size="small" style="float: right;">撤销</el-button>
               </view>
            </view>
         </view>
      </view>
   </view>
</template>

@@ -11,17 +48,158 @@
   export default {
      data() {
         return {
            activeName:"first"
            activeName: "request",
            orders: [{
                  sn: "1003030303",
                  status: 0,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "1003030333",
                  status: 0,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "1003022303",
                  status: 1,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "10030122303",
                  status: 1,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "10030223303",
                  status: 1,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "10030221303",
                  status: 1,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               },
               {
                  sn: "100302232303",
                  status: 1,
                  nodes: 20,
                  createDate: "2021-05-07 12:23"
               }
            ]
         }
      },
      computed: {
         request() {
            return this.activeName == 'request'
         },
         handle() {
            return this.activeName == 'handle'
         }
      },
      filters: {
         orderStata(type) {
            let str = ""
            switch (type) {
               case 0:
                  str = "待分配";
                  break;
               case 1:
                  str = "已完成"
                  break;
               default:
                  break;
            }

            return str
         }
      },
      methods: {
         handleClick() {
				
         handleClick(tabName) {
            this.activeName = tabName;
         }
      }
   }
</script>

<style>
<style scoped>
   .content {
      padding: 0px;
   }

   .chart-tab {
      height: 4%;
      text-align: center;
      background-color: #FFF;
   }

   .chart-tab text {
      width: 100rpx;
      margin: 50rpx;
      padding-bottom: 10rpx;
      cursor: pointer;
   }

   .active {
      color: blue;
      border-bottom: 4rpx solid blue;
   }

   .order-list {
      overflow: auto;
      height: 84%;
   }

   .order-item {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #999999;
   }

   .sn-text {
      background-color: #FFF;
      padding: 0px 10px;
      height: 60rpx;
      line-height: 30px;
   }

   .request-detail,
   .handle-detail {
      height: 120rpx;
      line-height: 60rpx;
      margin-top: 5rpx;
      padding: 5px 10px;
      background-color: #FFF;
   }

   .handle-detail {
      position: relative;
      line-height: 40rpx;
   }

   .logo-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 150rpx;
   }

   .avatar {
      float: left;
   }

   .user-info {
      float: left;
      margin-left: 10px;
   }

   .handle-btn {
      position: absolute;
      bottom: 6rpx;
      right: 20rpx;
   }
</style>