文章目录

• • 07-订单管理-tabs组件
  • 08-订单管理-基础布局

07-订单管理-tabs组件

目的：封装一个高可用tabs组件

大致步骤：

• xtx-tabs 组件容器 可以有多个 xtx-tabs-panel 组件面板
• xtx-tabs-panel 需要暴露 标题 props.label，名称 props.name，内容
• xtx-tabs 组件组织结构，控制点击事件，标签页激活。

铺垫知识：

• jsx 语法，需要简单了解其基本使用 https://cn.vuejs.org/v2/guide/render-function.html

render () {const name = 'tom'return 
{name}
}

落的代码：

src/components/library/xtx-tabs.vue

src/components/library/xtx-tabs-panel.vue

src/views/member/order/index.vue

组件升级：

• 弊端，动态生成的xtx-tabs-panel无法正常运行。
• 补丁，动态判断节点类型，组织tabs列表

src/components/library/xtx-tabs.vue

    const panels = this.$slots.default()const dynamicPanels = []
+    panels.forEach(item => {
+      if (item.type.name === 'XtxTabsPanel') {
+        dynamicPanels.push(item)
+      } else {
+        item.children.forEach(com => {
+          dynamicPanels.push(com)
+        })
+      }
+    })// 选项卡const nav = (

src/views/member/order/index.vue

src/api/constant.js 订单状态常量数据

// 订单状态
export const orderStatus = [{ name: 'all', label: '全部订单' },{ name: 'unpay', label: '待付款' },{ name: 'deliver', label: '待发货' },{ name: 'receive', label: '待收货' },{ name: 'comment', label: '待评价' },{ name: 'complete', label: '已完成' },{ name: 'cancel', label: '已取消' }
]

08-订单管理-基础布局

目的：完成订单静态布局。

基础样式：

.order-list {background: #fff;padding: 20px;
}
.order-item {margin-bottom: 20px;border: 1px solid #f5f5f5;.head {height: 50px;line-height: 50px;background: #f5f5f5;padding: 0 20px;overflow: hidden;span {margin-right: 20px;&.down-time {margin-right: 0;float: right;i {vertical-align: middle;margin-right: 3px;}b {vertical-align: middle;font-weight: normal;}}}.del {margin-right: 0;float: right;color: #999;}}.body {display: flex;align-items: stretch;.column {border-left: 1px solid #f5f5f5;text-align: center;padding: 20px;> p {padding-top: 10px;}&:first-child {border-left: none;}&.goods {flex: 1;padding: 0;align-self: center;ul {li {border-bottom: 1px solid #f5f5f5;padding: 10px;display: flex;&:last-child {border-bottom: none;}.image {width: 70px;height: 70px;border: 1px solid #f5f5f5;}.info {width: 220px;text-align: left;padding: 0 10px;p {margin-bottom: 5px;&.name {height: 38px;}&.attr {color: #999;font-size: 12px;span {margin-right: 5px;}}}}.price {width: 100px;}.count {width: 80px;}}}}&.state {width: 120px;.green {color: @xtxColor;}}&.amount {width: 200px;.red {color: @priceColor;}}&.action {width: 140px;a {display: block;&:hover {color: @xtxColor;}}}}}
}

基础结构：

    
下单时间：2018-01-08 15:02:00订单编号：62205697599付款截止：28分20秒
原创设计一体化机身,精致迷你破壁机350mL
颜色：绿色尺寸：10寸
¥9.50
x1
待付款
¥19.00
（含运费：¥10.00）
在线支付
立即付款
查看详情
取消订单
下单时间：2018-01-08 15:02:00订单编号：62205697599删除
原创设计一体化机身,精致迷你破壁机350mL
颜色：绿色尺寸：10寸
¥9.50
x1
已取消
¥9.50
（含运费：¥0.00）
查看详情