吉鹏 / gulu-admin

Blame view

src/views/application/appList.vue 5.46 KB
edit raw normal view history
d59b2d89e   BigBoss   madd appManage page 
1
 
  <template>
fc0d443bb   BigBoss   app 
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
    <el-container style="height: 853px; border: 1px solid #eee">
      <el-aside width="250px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1','2', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message" />非常戴镜</template>
            <el-menu-item v-for="(item,i) in nav_menu_data" :key="i" :index="item.name">{{ item.title }}</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu" />亚当光学</template>
            <el-menu-item index="2-1">产品列表</el-menu-item>
            <el-menu-item index="2-2">订单列表</el-menu-item>
            <el-menu-item index="2-3">用户列表</el-menu-item>
            <el-menu-item index="2-4">运行分析</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting" />秀野光学</template>
            <el-menu-item index="3-1">产品列表</el-menu-item>
            <el-menu-item index="3-2">订单列表</el-menu-item>
            <el-menu-item index="3-3">用户列表</el-menu-item>
            <el-menu-item index="3-4">运行分析</el-menu-item>
          </el-submenu>
        </el-menu>
d59b2d89e   BigBoss   madd appManage page 
24
25
 
      </el-aside>
fc0d443bb   BigBoss   app 
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
      <el-container>
        <el-header style="text-align: center; font-size: 24px">
          <span>这里的title</span>
        </el-header>
  
        <el-main>
          <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
            <el-tab-pane label="产品列表" name="first">
              <el-table :data="prodListTableData" stripe>
                <el-table-column prop="prodInfo" label="产品信息" width="340" />
                <el-table-column prop="prodTag" label="产品标签" width="340" />
                <el-table-column prop="stock" label="库存" width="340" />
                <el-table-column label="操作">
                  <el-button type="text">从应用中删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单列表" name="second">
              <el-table :data="prodListTableData" stripe>
                <el-table-column prop="prodInfo" label="下单时间" width="220" />
                <el-table-column prop="prodTag" label="金额" width="220" />
                <el-table-column prop="stock" label="产品id" width="220" />
                <el-table-column prop="stock" label="订单号" width="220" />
                <el-table-column prop="stock" label="状态" width="220" />
                <el-table-column label="操作">
                  <el-button type="text">从应用中删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="用户列表" name="third">
              <el-table :data="prodListTableData" stripe>
                <el-table-column prop="prodInfo" label="用户id" width="180" />
                <el-table-column prop="prodTag" label="加入时间" width="180" />
                <el-table-column prop="stock" label="引流人" width="180" />
                <el-table-column prop="stock" label="引流渠道" width="180" />
                <el-table-column prop="stock" label="消费额度" width="180" />
                <el-table-column prop="stock" label="访问时长" width="180" />
                <el-table-column prop="stock" label="带来流量" width="180" />
                <el-table-column label="操作">
                  <el-button type="text">从应用中删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="运营分析" name="fourth">
              <el-table :data="prodListTableData" stripe>
                <el-table-column prop="prodInfo" label="产品信息" width="340" />
                <el-table-column prop="prodTag" label="产品标签" width="340" />
                <el-table-column prop="stock" label="库存" width="340" />
                <el-table-column label="操作">
                  <el-button type="text">从应用中删除</el-button>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
d59b2d89e   BigBoss   madd appManage page 
82
 
    </el-container>
fc0d443bb   BigBoss   app 
83
d59b2d89e   BigBoss   madd appManage page 
84
85
86
87
 
  </template>
  
  <script>
  export default {
d59b2d89e   BigBoss   madd appManage page 
88
89
 
    data() {
      return {
fc0d443bb   BigBoss   app 
90
91
92
93
 
        activeName: 'second',
        path: '',
        nav_menu_data: [{
          title: '产品列表',
8a0e4eede   BigBoss   产品列表页 
94
 
          name: 'appList'
d59b2d89e   BigBoss   madd appManage page 
95
 
        }, {
fc0d443bb   BigBoss   app 
96
 
          title: '订单列表',
8a0e4eede   BigBoss   产品列表页 
97
 
          name: 'orderList'
d59b2d89e   BigBoss   madd appManage page 
98
 
        }, {
fc0d443bb   BigBoss   app 
99
 
          title: '用户列表',
8a0e4eede   BigBoss   产品列表页 
100
 
          name: 'userList'
fc0d443bb   BigBoss   app 
101
102
 
        }, {
          title: '运营分析',
8a0e4eede   BigBoss   产品列表页 
103
 
          name: 'analys'
d59b2d89e   BigBoss   madd appManage page 
104
 
        }],
fc0d443bb   BigBoss   app 
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
        prodListTableData: [{
          prodInfo: 'pic',
          prodTag: '非常带劲',
          stock: '102'
        },
        {
          prodInfo: 'pic',
          prodTag: '非常带劲',
          stock: '4531'
        },
        {
          prodInfo: 'pic',
          prodTag: '非常带劲',
          stock: '531'
        },
        {
          prodInfo: 'pic',
          prodTag: '非常带劲',
          stock: '768'
        }]
d59b2d89e   BigBoss   madd appManage page 
125
126
127
 
      }
    },
    watch: {
d59b2d89e   BigBoss   madd appManage page 
128
 
    },
fc0d443bb   BigBoss   app 
129
130
131
132
133
134
135
136
137
 
    created() {
    },
    method: {
      onRouteChanged() {
        const that = this
        that.path = that.$route.path
      },
      handleClick(tab, event) {
        console.log(tab, event)
d59b2d89e   BigBoss   madd appManage page 
138
139
140
 
      }
    }
  }
fc0d443bb   BigBoss   app 
141
d59b2d89e   BigBoss   madd appManage page 
142
143
 
  </script>
fc0d443bb   BigBoss   app 
144
145
146
147
148
149
150
151
152
153
154
 
  <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
  
    .el-aside {
      color: #333;
    }
  </style>