Vue3电商项目实战-个人中心模块3【07-订单管理-tabs组件、08-订单管理-基础布局】

文章目录

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

07-订单管理-tabs组件

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

大致步骤：

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

铺垫知识：

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

render () {const name = 'tom'return <h3>{name}</h3>
}

落的代码：

src/components/library/xtx-tabs.vue

<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {name: 'XtxTabs',props: {modelValue: {type: String,default: ''}},setup (props, { emit }) {const activeName = useVModel(props, 'modelValue', emit)// 给xtx-tabs-panel传值provide('activeName', activeName)// 点击选项卡对应的处理函数const tabClick = (name, index) => {activeName.value = name// 触发一个点击自定义时间emit('tab-click', { name, index })}return { activeName, tabClick }},render () {// jsx语法，它能够让我们创建节点和写html一样// 1. 动态插值表达式{} 2. 尽量三元表示式做判断，使用map来遍历 3.事件使用原始方式绑定// 默认插槽节点const panels = this.$slots.default()console.log(panels)// 选项卡const nav = (<nav>{panels.map((item, i) => {return (<aonClick={() => this.tabClick(item.props.name, i)}class={{ active: item.props.name === this.activeName }}href="javascript:;">{item.props.label}</a>)})}</nav>)return <div class="xtx-tabs">{[nav, panels]}</div>}
}
</script>
<style lang="less">
.xtx-tabs {background: #fff;> nav {height: 60px;line-height: 60px;display: flex;border-bottom: 1px solid #f5f5f5;> a {width: 110px;border-right: 1px solid #f5f5f5;text-align: center;font-size: 16px;&.active {border-top: 2px solid @xtxColor;height: 60px;background: #fff;line-height: 56px;}}}
}
</style>

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

<template><!-- 装载是内容 --><div class="xtx-tabs-panel" v-show="activeName===name"><slot /></div>
</template>
<script>
import { inject } from 'vue'
export default {name: 'XtxTabsPanel',props: {// 标签页标题文章label: {type: String,default: ''},// 唯一标识name: {type: String,default: ''}},setup () {// 当前组件该不该显示，取决于xtx-tabs组件的activeName数据是否和props.name一样const activeName = inject('activeName')return { activeName }}
}
</script>
<style scoped lang="less"></style>

src/views/member/order/index.vue

<template><div class="member-order-page"><XtxTabs v-model="activeName" @click-tab="clickTab"><XtxTabsPanel name="all" label="全部订单">全部订单</XtxTabsPanel><XtxTabsPanel name="unpay" label="待付款">待付款</XtxTabsPanel><XtxTabsPanel name="deliver" label="待发货">待发货</XtxTabsPanel><XtxTabsPanel name="receive" label="待收货">待收货</XtxTabsPanel><XtxTabsPanel name="comment" label="待评价">待评价</XtxTabsPanel><XtxTabsPanel name="complete" label="已完成">已完成</XtxTabsPanel><XtxTabsPanel name="cancel" label="已取消">已取消</XtxTabsPanel></XtxTabs></div>
</template>
<script>
import { ref } from 'vue'
export default {name: 'MemberOrder',setup () {const activeName = ref('all')const clickTab = (name) => {console.log(name)}return { activeName, clickTab }}
}
</script>
<style scoped lang="less"></style>

组件升级：

弊端，动态生成的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 = (<nav>
+        {dynamicPanels.map((item, i) => {

src/views/member/order/index.vue

<template><div class="member-order-page"><XtxTabs v-model="activeName"><XtxTabsPanelv-for="item in orderStatus":key="item.name":label="item.label":name="item.name">{{item.label}}</XtxTabsPanel></XtxTabs></div>
</template>
<script>
import { ref } from 'vue'
import { orderStatus } from '@/api/constants'
export default {name: 'MemberOrderPage',setup () {const activeName = ref('all')return { activeName, orderStatus }}
}
</script>
<style scoped lang="less"></style>

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;}}}}}
}

基础结构：

    <div class="order-list"><div class="order-item"><div class="head"><span>下单时间：2018-01-08 15:02:00</span><span>订单编号：62205697599</span><span class="down-time"><i class="iconfont icon-down-time"></i><b>付款截止：28分20秒</b></span></div><div class="body"><div class="column goods"><ul><li v-for="i in 2" :key="i"><a class="image" href="javascript:;"><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png" alt="" /></a><div class="info"><p class="name ellipsis-2">原创设计一体化机身,精致迷你破壁机350mL</p><p class="attr ellipsis"><span>颜色：绿色</span><span>尺寸：10寸</span></p></div><div class="price">¥9.50</div><div class="count">x1</div></li></ul></div><div class="column state"><p>待付款</p></div><div class="column amount"><p class="red">¥19.00</p><p>（含运费：¥10.00）</p><p>在线支付</p></div><div class="column action"><XtxButton type="primary" size="small">立即付款</XtxButton><p><a href="javascript:;">查看详情</a></p><p><a href="javascript:;">取消订单</a></p></div></div></div><div class="order-item"><div class="head"><span>下单时间：2018-01-08 15:02:00</span><span>订单编号：62205697599</span><a href="javascript:;" class="del">删除</a></div><div class="body"><div class="column goods"><ul><li><a class="image" href="javascript:;"><img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png" alt="" /></a><div class="info"><p class="name ellipsis-2">原创设计一体化机身,精致迷你破壁机350mL</p><p class="attr ellipsis"><span>颜色：绿色</span><span>尺寸：10寸</span></p></div><div class="price">¥9.50</div><div class="count">x1</div></li></ul></div><div class="column state"><p>已取消</p></div><div class="column amount"><p class="red">¥9.50</p><p>（含运费：¥0.00）</p></div><div class="column action"><p><a href="javascript:;">查看详情</a></p></div></div></div></div>

Vue3电商项目实战-个人中心模块3【07-订单管理-tabs组件、08-订单管理-基础布局】相关推荐

Vue3电商项目实战-个人中心模块6【14-订单管理-查看物流、15-订单详情-头部展示】
文章目录 14-订单管理-查看物流 15-订单详情-头部展示 14-订单管理-查看物流目的:再订单列表,订单待收货,查询物流信息. 大致步骤: 定义查询物流的API函数定义一个查看物流组件在 o ...
Vue3电商项目实战-商品详情模块6【17-商品详情-标签页组件、18-商品详情-热榜组件、19-商品详情-详情组件、20-商品详情-注意事项组件】
文章目录 17-商品详情-标签页组件 18-商品详情-热榜组件 19-商品详情-详情组件 20-商品详情-注意事项组件 17-商品详情-标签页组件目的:实现商品详情组件和商品评价组件的切换大致步骤 ...
Vue3电商项目实战-首页模块7【26-首页主体-商品区块、27-首页主体-最新专题、28-首页主体-图片懒加载】
文章目录 26-首页主体-商品区块 27-首页主体-最新专题 28-首页主体-图片懒加载 26-首页主体-商品区块目的: 完成商品区域展示. 大致步骤: 准备一个商品盒子组件 home-goods ...
Vue3电商项目实战-购物车模块2【04-头部购物车-商品列表-本地、05-头部购物车-删除操作-本地、06-购物车页面-基础布局】
文章目录 04-头部购物车-商品列表-本地 05-头部购物车-删除操作-本地 06-购物车页面-基础布局 04-头部购物车-商品列表-本地目的:根据本地存储的商品获取最新的库存价格和有效状态. 大致 ...
Vue3电商项目实战-结算支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】
文章目录 05-结算-收货地址-添加 06-结算-收货地址-修改 07-结算-提交订单 05-结算-收货地址-添加目的:实现收货地址的添加. 大致步骤: 独立组件,准备一个对话框完成表单布局完成 ...
Vue3电商项目实战-结算支付 4【08-支付-支付页面-基础布局、10-支付-支付页面-信息展示、11-支付-支付流程】
文章目录 08-支付-支付页面-基础布局 10-支付-支付页面-信息展示 11-支付-支付流程 08-支付-支付页面-基础布局目的:配置路由和支付页面基础布局. src/views/member/p ...
电商项目实战之分布式事务解决方案
电商项目实战之分布式事务解决方案本地事务事务隔离级别事务传播机制分布式事务 CAP理论选举与同步理论 BASE理论解决方案 2PC模式(XA事务) 柔性事务-TCC事务补偿型方案柔性事务 ...
电商项目实战之商品秒杀
电商项目实战之商品秒杀定时任务 corn表达式实现方式基于注解基于接口实战秒杀系统秒杀系统关注问题秒杀架构设计商品上架获取当前秒杀商品获取当前商品的秒杀信息秒杀最终处理参考链 ...
电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局第二步,建立基本的文本目录及文件第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码第四步, ...

Vue3电商项目实战-个人中心模块3【07-订单管理-tabs组件、08-订单管理-基础布局】

文章目录

07-订单管理-tabs组件

08-订单管理-基础布局

Vue3电商项目实战-个人中心模块3【07-订单管理-tabs组件、08-订单管理-基础布局】相关推荐

最新文章

热门文章