深圳网站建设计,重庆 网站 建设 公司,视频制作模板,微信营销推广文章目录09-订单管理-列表渲染10-订单管理-条件查询09-订单管理-列表渲染 目的#xff1a;完成订单列表默认渲染。 大致步骤#xff1a;
定义API接口函数抽取单条订单组件获取数据进行渲染
落的代码#xff1a;
1.获取订单列表API借口
/*** 查询订单列表* param {Number…
文章目录09-订单管理-列表渲染10-订单管理-条件查询09-订单管理-列表渲染 目的完成订单列表默认渲染。 大致步骤
定义API接口函数抽取单条订单组件获取数据进行渲染
落的代码
1.获取订单列表API借口
/*** 查询订单列表* param {Number} orderState - 订单状态1为待付款、2为待发货、3为待收货、4为待评价、5为已完成、6为已取消未传该参数或0为全部* param {Number} page - 页码* param {Number} pageSize - 每页条数* returns*/
export const findOrderList ({ orderState, page, pageSize }) {return request(/member/order, get, { orderState, page, pageSize })
}2.组件初始化获取订单信息
import { reactive, ref } from vue
import { findOrderList } from /api/order// 查询订单参数const requestParams reactive({page: 1,pageSize: 5,orderState: 0})// 订单列表const orderList ref([])// 查询订单findOrderList(requestParams).then(data {orderList.value data.result.items})return { activeName, tabClick, orderTabs, orderList }3.渲染列表 提取order-item组件 order/components/order-item.vue
templatediv classorder-itemdiv classheadspan下单时间{{order.createTime}}/spanspan订单编号{{order.id}}/span!-- 未付款倒计时时间还有 --span classdown-time v-iforder.orderState1i classiconfont icon-down-time/ib付款截止{{countdownText}}/b/span!-- 已完成 已取消 --a v-if[5,6].includes(order.orederState) hrefjavascript:; classdel删除/a/divdiv classbodydiv classcolumn goodsulli v-forgoods in order.skus :keygoods.ida classimage hrefjavascript:;img :srcgoods.image alt //adiv classinfop classname ellipsis-2{{goods.name}}/pp classattr ellipsis{{goods.attrsText}}/p/divdiv classprice¥{{goods.realPay}}/divdiv classcountx{{goods.quantity}}/div/li/ul/divdiv classcolumn statep{{orderStatus[order.orderState].label}}/p!-- 待收货查看物流 --!-- 待评价评价商品 --!-- 已完成查看评价 --p v-iforder.orderState3a hrefjavascript:; classgreen查看物流/a/pp v-iforder.orderState4a hrefjavascript:; classgreen评价商品/a/pp v-iforder.orderState5a hrefjavascript:; classgreen查看评价/a/p/divdiv classcolumn amountp classred¥{{order.payMoney}}/pp含运费¥{{order.postFee}}/pp在线支付/p/divdiv classcolumn action!-- 待支付立即付款查看详情取消订单 --!-- 待发货查看详情再次购买 --!-- 待收货确认收货查看详情再次购买 --!-- 待评价查看详情再次购买申请售后 --!-- 已完成查看详情再次购买申请售后 --!-- 已取消查看详情 --XtxButton v-iforder.orderState1 typeprimary sizesmall立即付款/XtxButtonXtxButton v-iforder.orderState3 typeprimary sizesmall确认收货/XtxButtonpa hrefjavascript:;查看详情/a/pp v-iforder.orderState1a hrefjavascript:;取消订单/a/pp v-if[2,3,4,5].includes(order.orderState)a hrefjavascript:;再次购买/a/pp v-if[4,5].includes(order.orderState)a hrefjavascript:;申请售后/a/p/div/div/div
/template
script
import { orderStatus } from /api/constants
import { ref } from vue
import { usePayTime } from /hooks
export default {name: OrderItem,props: {order: {type: Object,default: () ({})}},setup (props) {const { start, timeText } usePayTime()start(props.order.countdown)return { orderStatus, timeText }}
}
/script
style scoped langless
.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;}}}}}
}
/style使用order-item组件 order/index.vue
import OrderItem from ./components/order-item
export default {name: MemberOrder,components: { OrderItem },div classorder-listOrderItem v-foritem in orderList :keyitem.id :orderitem //divdiv v-else classloading/divstyle scoped langless
.order-list {padding: 20px;
}
/style10-订单管理-条件查询 目的根据状态切换页码切换加载数据。 大致步骤
完成tab切换加载完成加载中无数据处理完成分页加载
落地代码
1.tab切换加载数据 !-- tabs组件 --XtxTabs v-modelactiveName tab-clicktabClickconst tabClick (tab) {// 此时tab.index 就是订单的状态requestParams.orderState tab.indexrequestParams.page 1}const orderList ref([])watch(requestParams, () {findOrderList(requestParams).then(data {orderList.value data.result.items})}, { immediate: true })2.加载状态暂无数据 // 订单列表const orderList ref([])const total ref(0)const loading ref(true)// 初始化后查询条件更改后查询。watch(requestParams, () {loading.value truefindOrderList(requestParams).then(data {orderList.value data.result.itemsloading.value false})}, { immediate: true })div classorder-listdiv v-ifloading classloading/divdiv classnone v-if!loading orderList.length 0暂无数据/divOrderItem v-foritem in orderList :keyitem.id :orderitem //div.order-list {padding: 20px;position: relative;min-height: 400px;
}
.loading {height: 100%;width: 100%;position: absolute;left: 0;top: 0;background: rgba(255,255,255,.9) url(../../../assets/images/loading.gif) no-repeat center;
}
.none {height: 400px;text-align: center;line-height: 400px;color: #999;
}3.分页实现 // 订单列表const orderList ref([])const total ref(0)const loading ref(true)// 初始化后查询条件更改后查询。watch(requestParams, () {loading.value truefindOrderList(findOrderList).then(data {orderList.value data.result.itemstotal.value data.result.countsloading.value false})}, { immediate: true })XtxPaginationv-iftotal requestParams.pageSizecurrent-changerequestParams.page$event:totaltotal:page-sizerequestParams.pageSize:current-pagerequestParams.page /4.返回的数据给模版使用 return {activeName,orderStatus,tabClick,requestParams,orderList,loading,total,changePager,}
