完成页面布局

zhangzengfei

2021-06-07 e23a219e6e6056f6da5405881768a90c39097933

完成页面布局

 pages/index/index.vue

File was deleted

 pages/main/main.vue

@@ -8,8 +8,7 @@
            <view class="chart-income">6.3</view>
            <view class="charts-box">
                <qiun-data-charts type="line" :chartData="chartData" :errorShow="false"
                    :eopts="{seriesTemplate:{smooth:true}}"
                    background="none"/>
                    :eopts="{seriesTemplate:{smooth:true}}" background="none" />
            </view>
        </view>

@@ -82,10 +81,6 @@
        mapMutations
    } from 'vuex'

    import {
        univerifyLogin
    } from '@/common/univerify.js'

    export default {
        data() {
            return {
@@ -143,72 +138,23 @@
            let uniIdToken = uni.getStorageSync('uni_id_token')
            if (uniIdToken) {
                this.login(uni.getStorageSync('username'))
                uniCloud.callFunction({
                    name: 'user-center',
                    data: {
                        action: 'checkToken',
                    },
                    success: (e) => {

                        console.log('checkToken success', e);

                        if (e.result.code > 0) {
                            //token过期或token不合法，重新登录
                            if (this.forcedLogin) {
                                uni.reLaunch({
                                    url: '../login/login'
                                });
                            } else {
                                uni.navigateTo({
                                    url: '../login/login'
                                });
                            }
                        }
                    },
                    fail(e) {
                        uni.showModal({
                            content: JSON.stringify(e),
                            showCancel: false
                        })
                    }
                })
				
                // 验证token
                if (false) {					
                    uni.reLaunch({
                        url: '../login/login'
                    });
                }
            } else {
                this.guideToLogin()
                uni.reLaunch({
                    url: '../login/login'
                });
            }
        },
        methods: {
            ...mapMutations(['login']),
            handleClick(tabName) {
                this.activeName = tabName;				
            },
            guideToLogin() {
                uni.showModal({
                    title: '未登录',
                    content: '您未登录，需要登录后才能继续',
                    /**
                     * 如果需要强制登录，不显示取消按钮
                     */
                    showCancel: !this.forcedLogin,
                    success: (res) => {
                        if (res.confirm) {
                            univerifyLogin().catch((err) => {
                                if (err === false) return;
                                /**
                                 * 如果需要强制登录，使用reLaunch方式
                                 */
                                if (this.forcedLogin) {
                                    uni.reLaunch({
                                        url: '../login/login'
                                    });
                                } else {
                                    uni.navigateTo({
                                        url: '../login/login'
                                    });
                                }
                            })
                        }
                    }
                });
                this.activeName = tabName;
            }
        }


 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>