Commit ea5e6b2c0ea05dccaa9d49291c4265b90174608a
1 parent
63cb9eb4
新增了订单详情
Showing
3 changed files
with
286 additions
and
1 deletions
yudao-ui-admin/src/router/index.js
| @@ -209,6 +209,13 @@ export const constantRoutes = [ | @@ -209,6 +209,13 @@ export const constantRoutes = [ | ||
| 209 | name: '商品订单', | 209 | name: '商品订单', |
| 210 | meta: { title: '商品订单' }, | 210 | meta: { title: '商品订单' }, |
| 211 | component: (resolve) => require(['@/views/mall/trade/order'], resolve) | 211 | component: (resolve) => require(['@/views/mall/trade/order'], resolve) |
| 212 | + }, | ||
| 213 | + { | ||
| 214 | + path: '/mall/trade/order/detail', | ||
| 215 | + name: '订单详情', | ||
| 216 | + hidden: true, | ||
| 217 | + meta: { title: '订单详情' }, | ||
| 218 | + component: (resolve) => require(['@/views/mall/trade/order/detail'], resolve) | ||
| 212 | } | 219 | } |
| 213 | ] | 220 | ] |
| 214 | } | 221 | } |
yudao-ui-admin/src/views/mall/trade/order/detail.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <div class="app-container order-detail-page"> | ||
| 3 | + <template v-for="(group, index) in detailGroups"> | ||
| 4 | + <el-descriptions v-bind="group.groupProps" :key="`group_${index}`" :title="group.title"> | ||
| 5 | + <!-- 商品信息 --> | ||
| 6 | + <el-descriptions-item v-if="group.key === 'goodsInfo'" labelClassName="no-colon"> | ||
| 7 | + <el-table border> | ||
| 8 | + <el-table-column prop="date" label="商品" width="180"/> | ||
| 9 | + <el-table-column prop="jg" label="价格"/> | ||
| 10 | + <el-table-column prop="spbm" label="商品编码"/> | ||
| 11 | + <el-table-column prop="xl" label="数量"/> | ||
| 12 | + <el-table-column prop="xj" label="小计（元）"/> | ||
| 13 | + <el-table-column prop="tkzt" label="退款状态"/> | ||
| 14 | + <el-table-column prop="zt" label="状态"/> | ||
| 15 | + </el-table> | ||
| 16 | + </el-descriptions-item> | ||
| 17 | + | ||
| 18 | + <!-- 订单操作日志 --> | ||
| 19 | + <el-descriptions-item v-if="group.key === 'orderLog'" labelClassName="no-colon"> | ||
| 20 | + <el-timeline> | ||
| 21 | + <el-timeline-item | ||
| 22 | + v-for="(activity, index) in detailInfo[group.key]" | ||
| 23 | + :key="index" | ||
| 24 | + :timestamp="activity.timestamp" | ||
| 25 | + > | ||
| 26 | + {{activity.content}} | ||
| 27 | + </el-timeline-item> | ||
| 28 | + </el-timeline> | ||
| 29 | + </el-descriptions-item> | ||
| 30 | + | ||
| 31 | + <!-- 物流信息 --> | ||
| 32 | + <el-descriptions-item v-if="group.key === 'expressInfo'" labelClassName="no-colon"> | ||
| 33 | + <el-tabs type="card"> | ||
| 34 | + <!-- 循环包裹物流信息 --> | ||
| 35 | + <el-tab-pane v-for="(pkgInfo, pInIdx) in detailInfo[group.key]" :key="`pkgInfo_${pInIdx}`" :label="pkgInfo.label"> | ||
| 36 | + <!-- 包裹详情 --> | ||
| 37 | + <el-descriptions> | ||
| 38 | + <el-descriptions-item v-for="(pkgChild, pkgCIdx) in group.children" v-bind="pkgChild.childProps" :key="`pkgChild_${pkgCIdx}`" :label="pkgChild.label"> | ||
| 39 | + <!-- 包裹商品列表 --> | ||
| 40 | + <template v-if="pkgChild.valueKey === 'goodsList' && pkgInfo[pkgChild.valueKey]"> | ||
| 41 | + <div v-for="(goodInfo, goodInfoIdx) in pkgInfo[pkgChild.valueKey]" :key="`goodInfo_${goodInfoIdx}`" style="display: flex;"> | ||
| 42 | + <el-image | ||
| 43 | + style="width: 100px;height: 100px;flex: none" | ||
| 44 | + :src="goodInfo.imgUrl"> | ||
| 45 | + </el-image> | ||
| 46 | + <el-descriptions :column="1"> | ||
| 47 | + <el-descriptions-item labelClassName="no-colon">{{goodInfo.name}}</el-descriptions-item> | ||
| 48 | + <el-descriptions-item label="数量">{{goodInfo.count}}</el-descriptions-item> | ||
| 49 | + </el-descriptions> | ||
| 50 | + </div> | ||
| 51 | + </template> | ||
| 52 | + | ||
| 53 | + <!-- 包裹物流详情 --> | ||
| 54 | + <el-timeline v-else-if="pkgChild.valueKey==='wlxq'"> | ||
| 55 | + <el-timeline-item | ||
| 56 | + v-for="(activity, index) in pkgInfo[pkgChild.valueKey]" | ||
| 57 | + :key="index" | ||
| 58 | + :timestamp="activity.timestamp" | ||
| 59 | + > | ||
| 60 | + {{activity.content}} | ||
| 61 | + </el-timeline-item> | ||
| 62 | + </el-timeline> | ||
| 63 | + | ||
| 64 | + <template v-else> | ||
| 65 | + {{pkgInfo[pkgChild.valueKey]}} | ||
| 66 | + </template> | ||
| 67 | + </el-descriptions-item> | ||
| 68 | + </el-descriptions> | ||
| 69 | + </el-tab-pane> | ||
| 70 | + </el-tabs> | ||
| 71 | + </el-descriptions-item> | ||
| 72 | + | ||
| 73 | + <!--订单详情、订单状态--> | ||
| 74 | + <el-descriptions-item v-else v-for="(child, cIdx) in group.children" v-bind="child.childProps" :key="`child_${cIdx}`" :label="child.label"> | ||
| 75 | + | ||
| 76 | + <!-- 操作按钮(订单状态)--> | ||
| 77 | + <template v-if="group.key === 'orderStatus' && child.valueKey === 'actions'" slot="label"> | ||
| 78 | + <el-button type="primary">备注</el-button> | ||
| 79 | + <el-button type="primary">打印发货单</el-button> | ||
| 80 | + </template> | ||
| 81 | + | ||
| 82 | + <!-- 内容 --> | ||
| 83 | + <template v-else> | ||
| 84 | + {{detailInfo[child.valueKey]}} | ||
| 85 | + <!--复制地址(订单详情) --> | ||
| 86 | + <el-link v-if="child.valueKey==='shdz'" v-clipboard:copy="detailInfo[child.valueKey]" v-clipboard:success="clipboardSuccess" icon="el-icon-document-copy" type="primary"/> | ||
| 87 | + </template> | ||
| 88 | + </el-descriptions-item> | ||
| 89 | + </el-descriptions> | ||
| 90 | + </template> | ||
| 91 | + </div> | ||
| 92 | +</template> | ||
| 93 | + | ||
| 94 | +<script> | ||
| 95 | +export default { | ||
| 96 | + name: "detail", | ||
| 97 | + data () { | ||
| 98 | + return { | ||
| 99 | + detailGroups: [ | ||
| 100 | + { | ||
| 101 | + title: '订单详情', | ||
| 102 | + children: [ | ||
| 103 | + { label: '交易流水号', valueKey: 'jylsh'}, | ||
| 104 | + { label: '配送方式', valueKey: 'psfs'}, | ||
| 105 | + { label: '营销活动', valueKey: 'yxhd'}, | ||
| 106 | + { label: '订单编号', valueKey: 'ddbh'}, | ||
| 107 | + { label: '收货人', valueKey: 'shr'}, | ||
| 108 | + { label: '买家留言', valueKey: 'mjly'}, | ||
| 109 | + { label: '订单类型', valueKey: 'ddlx'}, | ||
| 110 | + { label: '联系电话', valueKey: 'lxdh'}, | ||
| 111 | + { label: '备注', valueKey: 'bz'}, | ||
| 112 | + { label: '订单来源', valueKey: 'ddly'}, | ||
| 113 | + { label: '付款方式', valueKey: 'fkfs'}, | ||
| 114 | + { label: '买家', valueKey: 'mj'}, | ||
| 115 | + { label: '收货地址', valueKey: 'shdz'} | ||
| 116 | + ] | ||
| 117 | + }, | ||
| 118 | + { | ||
| 119 | + title: '订单状态', | ||
| 120 | + key: 'orderStatus', | ||
| 121 | + groupProps: { | ||
| 122 | + column: 1 | ||
| 123 | + }, | ||
| 124 | + children: [ | ||
| 125 | + { label: '订单状态', valueKey: 'ddzt', childProps: { contentStyle: { color: 'red' }}}, | ||
| 126 | + { label: '', valueKey: 'actions', childProps: { labelClassName: 'no-colon'}}, | ||
| 127 | + { label: '提醒', valueKey: 'tx', childProps: { labelStyle: { color: 'red' }}} | ||
| 128 | + ] | ||
| 129 | + }, | ||
| 130 | + { | ||
| 131 | + title: '物流信息', | ||
| 132 | + key: 'expressInfo', | ||
| 133 | + children: [ | ||
| 134 | + { label: '发货时间', valueKey: 'fhsj'}, | ||
| 135 | + { label: '物流公司', valueKey: 'wlgs'}, | ||
| 136 | + { label: '运单号', valueKey: 'ydh'}, | ||
| 137 | + { label: '商品信息', valueKey: 'goodsList', childProps: { span: 3 }}, | ||
| 138 | + { label: '物流状态', valueKey: 'wlzt', childProps: { span: 3 }}, | ||
| 139 | + { label: '物流详情', valueKey: 'wlxq'} | ||
| 140 | + ] | ||
| 141 | + }, | ||
| 142 | + { | ||
| 143 | + title: '商品信息', | ||
| 144 | + key: 'goodsInfo' | ||
| 145 | + }, | ||
| 146 | + { | ||
| 147 | + title: '订单操作日志', | ||
| 148 | + key: 'orderLog' | ||
| 149 | + } | ||
| 150 | + ], | ||
| 151 | + detailInfo: { | ||
| 152 | + jylsh: '16674653573152181000', | ||
| 153 | + psfs: '物流配送', | ||
| 154 | + yxhd: '', | ||
| 155 | + ddbh: '20221103164918001', | ||
| 156 | + shr: '', | ||
| 157 | + mjly: '', | ||
| 158 | + ddlx: '', | ||
| 159 | + lxdh: '', | ||
| 160 | + bz: '', | ||
| 161 | + ddly: '', | ||
| 162 | + shdz: '陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)陕西省-西安市-莲湖区-九座花园西区(莲湖区二环南路西段202)', | ||
| 163 | + fkfs: '', | ||
| 164 | + mj: '', | ||
| 165 | + ddzt: '已完成', | ||
| 166 | + tx: '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）请及时关注你发出的包裹状态，确保可以配送至买家手中如果买家表示没收到货或货物有问题，请及时联系买家处理，友好协商', | ||
| 167 | + expressInfo: [ // 物流信息 | ||
| 168 | + { | ||
| 169 | + label: '包裹1', | ||
| 170 | + name: 'bg1', | ||
| 171 | + fhsj: '2022-11-03 16:50:45', | ||
| 172 | + wlgs: '极兔', | ||
| 173 | + ydh: '2132123', | ||
| 174 | + wlzt: '不支持此快递公司', | ||
| 175 | + wlxq: [ | ||
| 176 | + { | ||
| 177 | + content: '正在派送途中,请您准备签收(派件人:王涛,电话:13854563814)', | ||
| 178 | + timestamp: '2018-04-15 15:00:16' | ||
| 179 | + }, | ||
| 180 | + { | ||
| 181 | + content: '快件到达 【烟台龙口东江村委营业点】', | ||
| 182 | + timestamp: '2018-04-13 14:54:19' | ||
| 183 | + }, | ||
| 184 | + { | ||
| 185 | + content: '快件已发车', | ||
| 186 | + timestamp: '2018-04-11 12:55:52' | ||
| 187 | + }, | ||
| 188 | + { | ||
| 189 | + content: '快件已发车', | ||
| 190 | + timestamp: '2018-04-11 12:55:52' | ||
| 191 | + }, | ||
| 192 | + { | ||
| 193 | + content: '快件已发车', | ||
| 194 | + timestamp: '2018-04-11 12:55:52' | ||
| 195 | + } | ||
| 196 | + ], | ||
| 197 | + goodsList: [ // 包裹下的商品列表 | ||
| 198 | + { | ||
| 199 | + name: 'Otic 巴拉啦小魔仙联名麦克风儿童早教家用一体卡拉OK宝宝话筒唱歌 魔仙粉', | ||
| 200 | + count: 6, | ||
| 201 | + imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' | ||
| 202 | + } | ||
| 203 | + ] | ||
| 204 | + }, | ||
| 205 | + { | ||
| 206 | + label: '包裹2', | ||
| 207 | + name: 'bg1', | ||
| 208 | + fhsj: '', | ||
| 209 | + wlgs: '', | ||
| 210 | + ydh: '', | ||
| 211 | + wlzt: '', | ||
| 212 | + goodsInfo: {} | ||
| 213 | + }, | ||
| 214 | + { | ||
| 215 | + label: '包裹3', | ||
| 216 | + name: 'bg1', | ||
| 217 | + fhsj: '', | ||
| 218 | + wlgs: '', | ||
| 219 | + ydh: '', | ||
| 220 | + wlzt: '', | ||
| 221 | + goodsInfo: {} | ||
| 222 | + } | ||
| 223 | + ], | ||
| 224 | + orderLog: [ // 订单操作日志 | ||
| 225 | + { | ||
| 226 | + content: '买家【乌鸦】关闭了订单', | ||
| 227 | + timestamp: '2018-04-15 15:00:16' | ||
| 228 | + }, | ||
| 229 | + { | ||
| 230 | + content: '买家【乌鸦】下单了', | ||
| 231 | + timestamp: '2018-04-15 15:00:16' | ||
| 232 | + } | ||
| 233 | + ], | ||
| 234 | + goodsInfo: [] // 商品详情tableData | ||
| 235 | + } | ||
| 236 | + } | ||
| 237 | + }, | ||
| 238 | + methods: { | ||
| 239 | + clipboardSuccess() { | ||
| 240 | + this.$modal.msgSuccess("复制成功"); | ||
| 241 | + } | ||
| 242 | + } | ||
| 243 | +} | ||
| 244 | +</script> | ||
| 245 | + | ||
| 246 | +<style lang="scss" scoped> | ||
| 247 | + ::v-deep .el-descriptions{ | ||
| 248 | + &:not(:nth-child(1)) { | ||
| 249 | + margin-top: 20px; | ||
| 250 | + } | ||
| 251 | + .el-descriptions__title{ | ||
| 252 | + display: flex; | ||
| 253 | + align-items: center; | ||
| 254 | + &::before{ | ||
| 255 | + content: ''; | ||
| 256 | + display: inline-block; | ||
| 257 | + margin-right: 10px; | ||
| 258 | + width: 3px; | ||
| 259 | + height: 20px; | ||
| 260 | + background-color: #409EFF; | ||
| 261 | + } | ||
| 262 | + } | ||
| 263 | + .el-descriptions-item__container{ | ||
| 264 | + margin: 0 10px; | ||
| 265 | + .no-colon{ | ||
| 266 | + margin: 0; | ||
| 267 | + &::after{ | ||
| 268 | + content: '' | ||
| 269 | + } | ||
| 270 | + } | ||
| 271 | + } | ||
| 272 | + } | ||
| 273 | +</style> |
yudao-ui-admin/src/views/mall/trade/order/index.vue
| @@ -90,7 +90,7 @@ | @@ -90,7 +90,7 @@ | ||
| 90 | </el-button> | 90 | </el-button> |
| 91 | <el-dropdown-menu slot="dropdown"> | 91 | <el-dropdown-menu slot="dropdown"> |
| 92 | <el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item> | 92 | <el-dropdown-item><el-button type="text">打印发货单</el-button></el-dropdown-item> |
| 93 | - <el-dropdown-item><el-button type="text">详情</el-button></el-dropdown-item> | 93 | + <el-dropdown-item><el-button type="text" @click="goToDetail(row)">详情</el-button></el-dropdown-item> |
| 94 | <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item> | 94 | <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item> |
| 95 | </el-dropdown-menu> | 95 | </el-dropdown-menu> |
| 96 | </el-dropdown> | 96 | </el-dropdown> |
| @@ -322,6 +322,11 @@ | @@ -322,6 +322,11 @@ | ||
| 322 | } | 322 | } |
| 323 | ] | 323 | ] |
| 324 | } | 324 | } |
| 325 | + }, | ||
| 326 | + methods: { | ||
| 327 | + goToDetail (row) { | ||
| 328 | + this.$router.push({ path: '/mall/trade/order/detail', query: { orderNo: row.orderNo }}) | ||
| 329 | + } | ||
| 325 | } | 330 | } |
| 326 | } | 331 | } |
| 327 | </script> | 332 | </script> |