From e23a219e6e6056f6da5405881768a90c39097933 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期一, 07 六月 2021 16:18:29 +0800
Subject: [PATCH] 完成页面布局
---
pages/order/order.vue | 194 ++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 186 insertions(+), 8 deletions(-)
diff --git a/pages/order/order.vue b/pages/order/order.vue
index 6df680e..5199747 100644
--- a/pages/order/order.vue
+++ b/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>
--
Gitblit v1.8.0