BJ_ZTEITS-Developers / parking-cloud-yudao

Commit e3a700b2d2340c6f37ef5c3455c5af1404f5b91d

Authored by YunaiV
2 parents bd661296 63cb9eb4

Merge remote-tracking branch 'origin/feature/1.8.0-uniapp' into feature/1.8.0-uniapp

Inline Side-by-side
Showing 3 changed files with 372 additions and 468 deletions
yudao-ui-admin/src/router/index.js
  View file @e3a700b
... ... @@ -205,10 +205,10 @@ export const constantRoutes = [
205 205 alwaysShow: true,
206 206 children: [
207 207 {
208   - path: '/order/goods-order',
  208 + path: '/mall/trade/order',
209 209 name: '商品订单',
210 210 meta: { title: '商品订单' },
211   - component: (resolve) => require(['@/views/order/goodsOrder'], resolve)
  211 + component: (resolve) => require(['@/views/mall/trade/order'], resolve)
212 212 }
213 213 ]
214 214 }
... ...
yudao-ui-admin/src/views/mall/trade/order/index.vue 0 → 100644
  View file @e3a700b
  1 +<template>
  2 + <div class="app-container">
  3 + <!-- 搜索工作栏 -->
  4 + <!-- TODO: inline 看看是不是需要; v-show= 那块逻辑还是要的 -->
  5 + <el-row :gutter="20">
  6 + <el-form :model="queryParams" label-width="68px" size="small">
  7 + <el-col :span="6" :xs="24">
  8 + <el-form-item label="搜索方式">
  9 + <el-input style="width: 240px">
  10 + <el-select v-model="queryParams.searchType" slot="prepend" clearable style="width: 100px">
  11 + <el-option v-for="dict in dicData.searchType" v-bind="dict" :key="dict.value"/>
  12 + </el-select>
  13 + </el-input>
  14 + </el-form-item>
  15 + </el-col>
  16 + <el-col :span="6" :xs="24">
  17 + <el-form-item label="订单类型">
  18 + <el-select v-model="queryParams.orderType" clearable style="width: 240px">
  19 + <el-option v-for="dict in dicData.orderType" v-bind="dict" :key="dict.value"/>
  20 + </el-select>
  21 + </el-form-item>
  22 + </el-col>
  23 + <el-col :span="6" :xs="24">
  24 + <el-form-item label="订单状态">
  25 + <el-select v-model="queryParams.orderStatus" clearable style="width: 240px">
  26 + <el-option v-for="dict in dicData.orderStatus" v-bind="dict" :key="dict.value"/>
  27 + </el-select>
  28 + </el-form-item>
  29 + </el-col>
  30 + <el-col :span="6" :xs="24">
  31 + <el-form-item label="订单来源">
  32 + <el-select v-model="queryParams.orderSource" clearable style="width: 240px">
  33 + <el-option v-for="dict in dicData.orderSource" v-bind="dict" :key="dict.value"/>
  34 + </el-select>
  35 + </el-form-item>
  36 + </el-col>
  37 + <el-col :span="6" :xs="24">
  38 + <el-form-item label="付款方式">
  39 + <el-select v-model="queryParams.payWay" clearable style="width: 240px">
  40 + <el-option v-for="dict in dicData.payWay" v-bind="dict" :key="dict.value"/>
  41 + </el-select>
  42 + </el-form-item>
  43 + </el-col>
  44 + <el-col :span="6" :xs="24">
  45 + <el-form-item label="营销类型">
  46 + <el-select v-model="queryParams.marketingType" clearable style="width: 240px">
  47 + <el-option v-for="dict in dicData.marketingType" v-bind="dict" :key="dict.value"/>
  48 + </el-select>
  49 + </el-form-item>
  50 + </el-col>
  51 + <el-col :span="6" :xs="24">
  52 + <el-form-item label="下单时间">
  53 + <el-date-picker v-model="queryParams.date" type="daterange" range-separator="至"
  54 + start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="rangePickerOptions" style="width: 240px"/>
  55 + </el-form-item>
  56 + </el-col>
  57 + <el-col :span="6" :xs="24" style="line-height: 32px">
  58 + <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
  59 + <el-button icon="el-icon-refresh" size="mini">重置</el-button>
  60 + <el-button icon="el-icon-document" size="mini">导出订单</el-button>
  61 + </el-col>
  62 + </el-form>
  63 + </el-row>
  64 +
  65 + <!-- tab切换-->
  66 + <el-radio-group v-model="activeTabName">
  67 + <el-radio-button v-for="tabPane in tabPanes" :label="tabPane.label">{{tabPane.text}}</el-radio-button>
  68 + </el-radio-group>
  69 +
  70 + <!-- table -->
  71 + <el-table :data="tableData" :show-header="false" class="order-table">
  72 + <el-table-column label="订单信息">
  73 + <template slot-scope="{ row }">
  74 + <el-row>
  75 + <el-col :span="5">
  76 + 订单号：{{row.orderNo}}
  77 + <el-popover title="支付流水号：" :content="row.payNo" ref="popover" placement="right" width="200" trigger="click"/>
  78 + <el-button type="text" v-popover:popover>更多</el-button>
  79 + </el-col>
  80 + <el-col :span="5">下单时间：{{row.time}}</el-col>
  81 + <el-col :span="4">订单来源：{{row.orderSource}}</el-col>
  82 + <el-col :span="4">支付方式：{{row.payWay}}</el-col>
  83 + <el-col :span="6" align="right" type="flex">
  84 + <el-button type="text">关闭订单</el-button>
  85 + <el-button type="text">修改地址</el-button>
  86 + <el-button type="text">调整价格</el-button>
  87 + <el-dropdown style="margin-left: 10px">
  88 + <el-button type="text">
  89 + 更多操作<i class="el-icon-arrow-down el-icon--right"></i>
  90 + </el-button>
  91 + <el-dropdown-menu slot="dropdown">
  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>
  94 + <el-dropdown-item><el-button type="text">备注</el-button></el-dropdown-item>
  95 + </el-dropdown-menu>
  96 + </el-dropdown>
  97 + </el-col>
  98 + </el-row>
  99 + <!-- 订单下的商品 -->
  100 + <el-table :data="row.goods" border>
  101 + <el-table-column label="商品" prop="goods" header-align="center" width="360">
  102 + <template slot-scope="{ row, $index }">
  103 + <div class="goods-info">
  104 + <img :src="row.picture"/>
  105 + <span class="ellipsis-2" :title="row.name">{{row.name}}</span>
  106 + </div>
  107 + </template>
  108 + </el-table-column>
  109 + <el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
  110 + <template slot-scope="{ row }">
  111 + <div>{{row.price}}</div>
  112 + <div>{{row.count}}</div>
  113 + </template>
  114 + </el-table-column>
  115 + <el-table-column label="维权" prop="safeguard" align="center" width="115"/>
  116 + <el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
  117 + <el-table-column label="买家/收货人" prop="buyer" header-align="center" width="360">
  118 + <template slot-scope="{ row }">
  119 + <div>{{row.buyer}}</div>
  120 + <div>{{row.receiver}}{{row.tel}}</div>
  121 + <div class="ellipsis-2" :title="row.address">{{row.address}}</div>
  122 + </template>
  123 + </el-table-column>
  124 + <el-table-column label="配送方式" prop="sendWay" align="center" width="115"/>
  125 + <el-table-column label="交易状态" prop="status" align="center"/>
  126 + </el-table>
  127 + </template>
  128 + </el-table-column>
  129 + </el-table>
  130 + </div>
  131 +</template>
  132 +
  133 +<script>
  134 + const dicData = {
  135 + searchType: [
  136 + { label: '订单号', value: 'ddh' },
  137 + { label: '交易流水号', value: 'jylsh' },
  138 + { label: '订单备注', value: 'ddbz' },
  139 + { label: '收货人姓名', value: 'shrxm' },
  140 + { label: '商品名称', value: 'spmc' },
  141 + { label: '收货人电话', value: 'shrdh' },
  142 + { label: '会员昵称', value: 'hync' },
  143 + { label: '商品编号', value: 'spbh' }
  144 + ],
  145 + orderType: [
  146 + { label: '全部', value: 'qb' },
  147 + { label: '物流订单', value: 'wldd' },
  148 + { label: '自提订单', value: 'ztdd' },
  149 + { label: '外卖订单', value: 'wmdd' },
  150 + { label: '虚拟订单', value: 'xndd' },
  151 + { label: '收银订单', value: 'sydd' }
  152 + ],
  153 + orderStatus: [
  154 + { label: '全部', value: 'qb' },
  155 + { label: '待支付', value: 'dzf' },
  156 + { label: '待发货', value: 'dfh' },
  157 + { label: '已发货', value: 'yfh' },
  158 + { label: '已收货', value: 'ysh' },
  159 + { label: '已完成', value: 'ywc' },
  160 + { label: '已关闭', value: 'ygb' },
  161 + { label: '退款中', value: 'tkz' }
  162 + ],
  163 + orderSource: [
  164 + { label: '全部', value: 'qb' },
  165 + { label: '微信公众号', value: 'wxgzh' },
  166 + { label: '微信小程序', value: 'wxxcx' },
  167 + { label: 'PC', value: 'pc' },
  168 + { label: 'H5', value: 'h5' },
  169 + { label: 'APP', value: 'app' },
  170 + { label: '收银台', value: 'syt' },
  171 + { label: '代客下单', value: 'dkxd' }
  172 + ],
  173 + payWay: [
  174 + { label: '全部', value: 'qb' },
  175 + { label: '在线支付', value: 'zxzf' },
  176 + { label: '余额支付', value: 'yezf' },
  177 + { label: '线下支付', value: 'xxzf' },
  178 + { label: '积分兑换', value: 'jfdh' },
  179 + { label: '支付宝支付', value: 'zfbzf' },
  180 + { label: '微信支付', value: 'wxzf' }
  181 + ],
  182 + marketingType: [
  183 + { label: '全部', value: 'qb' },
  184 + { label: '一口价', value: 'ykj' },
  185 + { label: '专题', value: 'zt' },
  186 + { label: '团购', value: 'tg' },
  187 + { label: '拼团', value: 'pt' },
  188 + { label: '拼团返利', value: 'ptfl' },
  189 + { label: '盲盒', value: 'mh' },
  190 + { label: '砍价', value: 'kj' },
  191 + { label: '礼品卡优惠', value: 'lpkyh' },
  192 + { label: '秒杀', value: 'ms' },
  193 + { label: '积分兑换', value: 'jfdh' },
  194 + { label: '组合套餐', value: 'zhtc' },
  195 + { label: '预售', value: 'ys' }
  196 + ]
  197 + }
  198 + const rangePickerOptions = {
  199 + shortcuts: [{
  200 + text: '最近一周',
  201 + onClick(picker) {
  202 + const end = new Date();
  203 + const start = new Date();
  204 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
  205 + picker.$emit('pick', [start, end]);
  206 + }
  207 + }, {
  208 + text: '最近一个月',
  209 + onClick(picker) {
  210 + const end = new Date();
  211 + const start = new Date();
  212 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
  213 + picker.$emit('pick', [start, end]);
  214 + }
  215 + }, {
  216 + text: '最近三个月',
  217 + onClick(picker) {
  218 + const end = new Date();
  219 + const start = new Date();
  220 + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
  221 + picker.$emit('pick', [start, end]);
  222 + }
  223 + }]
  224 + }
  225 + export default {
  226 + name: "index",
  227 + data () {
  228 + return {
  229 + dicData,
  230 + rangePickerOptions,
  231 + queryParams: {
  232 + searchType: 'ddh',
  233 + orderType: ''
  234 + },
  235 + activeTabName: 'all',
  236 + tabPanes: [
  237 + { text: '全部', label: 'all' },
  238 + { text: '待支付', label: 'toBePay' },
  239 + { text: '待发货', label: 'toBeSend' },
  240 + { text: '已发货', label: 'send' },
  241 + { text: '已收货', label: 'received' },
  242 + { text: '已完成', label: 'finished' },
  243 + { text: '已关闭', label: 'closed' },
  244 + { text: '退款中', label: 'refund' }
  245 + ],
  246 + tableData: [
  247 + {
  248 + orderInfo: '',
  249 + orderNo: '20221026220424001',
  250 + payNo: '20221026220424001',
  251 + time: '2022-10-26 22:04:20',
  252 + orderSource: 'PC',
  253 + payWay: '微信支付',
  254 + goods: [
  255 + {
  256 + name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
  257 + picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
  258 + price: '199',
  259 + count: '5件',
  260 + amount: 460,
  261 + safeguard: '主动退款',
  262 + buyer: '小明',
  263 + receiver: '小花',
  264 + tel: '15823655095',
  265 + address: '北京市-北京市-东城区 观音桥',
  266 + sendWay: '物流配送',
  267 + status: '已完成'
  268 + },
  269 + {
  270 + name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
  271 + picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
  272 + price: '199',
  273 + count: '5件',
  274 + amount: 460,
  275 + safeguard: '主动退款',
  276 + buyer: '小明',
  277 + receiver: '小花',
  278 + tel: '15823655095',
  279 + address: '北京市-北京市-东城区 观音桥',
  280 + sendWay: '物流配送',
  281 + status: '已完成'
  282 + }
  283 + ]
  284 + },
  285 + {
  286 + orderInfo: '',
  287 + orderNo: '20221026220424001',
  288 + payNo: '20221026220424001',
  289 + time: '2022-10-26 22:04:20',
  290 + orderSource: 'PC',
  291 + payWay: '微信支付',
  292 + goods: [
  293 + {
  294 + name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
  295 + picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
  296 + price: '199',
  297 + count: '5件',
  298 + amount: 460,
  299 + safeguard: '主动退款',
  300 + buyer: '小明',
  301 + receiver: '小花',
  302 + tel: '15823655095',
  303 + address: '北京市-北京市-东城区 观音桥',
  304 + sendWay: '物流配送',
  305 + status: '已完成'
  306 + },
  307 + {
  308 + name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
  309 + picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
  310 + price: '199',
  311 + count: '5件',
  312 + amount: 460,
  313 + safeguard: '主动退款',
  314 + buyer: '小明',
  315 + receiver: '小花',
  316 + tel: '15823655095',
  317 + address: '北京市-北京市-东城区 观音桥',
  318 + sendWay: '物流配送',
  319 + status: '已完成'
  320 + }
  321 + ]
  322 + }
  323 + ]
  324 + }
  325 + }
  326 + }
  327 +</script>
  328 +
  329 +<style lang="scss" scoped>
  330 + ::v-deep .order-table{
  331 + margin-top: 20px;
  332 + border-bottom: none;
  333 + &::before{
  334 + height: 0;
  335 + }
  336 + .el-table__row{
  337 + .el-table__cell{
  338 + border-bottom: none;
  339 + .cell{
  340 + .el-table {
  341 + .el-table__row{
  342 + >.el-table__cell{
  343 + .goods-info{
  344 + display: flex;
  345 + img{
  346 + margin-right: 10px;
  347 + width: 60px;
  348 + height: 60px;
  349 + border: 1px solid #e2e2e2;
  350 + }
  351 + }
  352 + .ellipsis-2{
  353 + display: -webkit-box;
  354 + overflow: hidden;
  355 + text-overflow: ellipsis;
  356 + white-space: normal;
  357 + -webkit-line-clamp: 2; /* 要显示的行数 */
  358 + -webkit-box-orient: vertical;
  359 + word-break: break-all;
  360 + line-height: 22px !important;
  361 + max-height: 44px !important;
  362 + }
  363 + }
  364 + }
  365 + }
  366 + }
  367 + }
  368 + }
  369 + }
  370 +</style>
... ...
yudao-ui-admin/src/views/order/goodsOrder/index.vue deleted
View file @bd66129
1   -<template>
2   - <!-- TODO：挪到 mall/trade/order/index.vue -->
3   - <!-- TODO：咱的一些 html 标签，是不是可以按照一行，紧凑一点，嘿嘿，这样阅读起来方便一些 -->
4   - <div class="app-container">
5   -
6   - <!-- 搜索工作栏 -->
7   - <!-- TODO: inline 看看是不是需要; v-show= 那块逻辑还是要的 -->
8   - <el-row :gutter="20">
9   - <el-form
10   - :model="queryParams"
11   - label-width="68px"
12   - size="small"
13   - >
14   - <el-col :span="6" :xs="24">
15   - <el-form-item label="搜索方式">
16   - <el-input style="width: 240px">
17   - <el-select
18   - v-model="queryParams.searchType"
19   - slot="prepend"
20   - clearable
21   - style="width: 100px"
22   - >
23   - <el-option
24   - v-for="dict in dicData.searchType"
25   - v-bind="dict"
26   - :key="dict.value"
27   - />
28   - </el-select>
29   - </el-input>
30   - </el-form-item>
31   - </el-col>
32   - <el-col :span="6" :xs="24">
33   - <el-form-item label="订单类型">
34   - <el-select
35   - v-model="queryParams.orderType"
36   - clearable
37   - style="width: 240px"
38   - >
39   - <el-option
40   - v-for="dict in dicData.orderType"
41   - v-bind="dict"
42   - :key="dict.value"
43   - />
44   - </el-select>
45   - </el-form-item>
46   - </el-col>
47   - <el-col :span="6" :xs="24">
48   - <el-form-item label="订单状态">
49   - <el-select
50   - v-model="queryParams.orderStatus"
51   - clearable
52   - style="width: 240px"
53   - >
54   - <el-option
55   - v-for="dict in dicData.orderStatus"
56   - v-bind="dict"
57   - :key="dict.value"
58   - />
59   - </el-select>
60   - </el-form-item>
61   - </el-col>
62   - <el-col :span="6" :xs="24">
63   - <el-form-item label="订单来源">
64   - <el-select
65   - v-model="queryParams.orderSource"
66   - clearable
67   - style="width: 240px"
68   - >
69   - <el-option
70   - v-for="dict in dicData.orderSource"
71   - v-bind="dict"
72   - :key="dict.value"
73   - />
74   - </el-select>
75   - </el-form-item>
76   - </el-col>
77   - <el-col :span="6" :xs="24">
78   - <el-form-item label="付款方式">
79   - <el-select
80   - v-model="queryParams.payWay"
81   - clearable
82   - style="width: 240px"
83   - >
84   - <el-option
85   - v-for="dict in dicData.payWay"
86   - v-bind="dict"
87   - :key="dict.value"
88   - />
89   - </el-select>
90   - </el-form-item>
91   - </el-col>
92   - <el-col :span="6" :xs="24">
93   - <el-form-item label="营销类型">
94   - <el-select
95   - v-model="queryParams.marketingType"
96   - clearable
97   - style="width: 240px"
98   - >
99   - <el-option
100   - v-for="dict in dicData.marketingType"
101   - v-bind="dict"
102   - :key="dict.value"
103   - />
104   - </el-select>
105   - </el-form-item>
106   - </el-col>
107   - <el-col :span="6" :xs="24">
108   - <el-form-item label="下单时间">
109   - <el-date-picker
110   - v-model="queryParams.date"
111   - type="daterange"
112   - range-separator="至"
113   - start-placeholder="开始日期"
114   - end-placeholder="结束日期"
115   - :picker-options="rangePickerOptions"
116   - style="width: 240px"
117   - />
118   - </el-form-item>
119   - </el-col>
120   - <el-col :span="6" :xs="24" style="line-height: 32px">
121   - <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
122   - <el-button icon="el-icon-refresh" size="mini">重置</el-button>
123   - <el-button icon="el-icon-document" size="mini">导出订单</el-button>
124   - </el-col>
125   - </el-form>
126   - </el-row>
127   -
128   - <el-radio-group v-model="activeTabName">
129   - <el-radio-button
130   - v-for="tabPane in tabPanes"
131   - :label="tabPane.label"
132   - >{{tabPane.text}}</el-radio-button>
133   - </el-radio-group>
134   -
135   - <el-table
136   - :data="tableData"
137   - :span-method="spanMethod"
138   - :row-class-name="rowClassName"
139   - border
140   - >
141   - <!-- TODO: 多选，咱先去掉哈 -->
142   - <el-table-column type="selection" :selectable="(row, index) => index % 2"/>
143   - <el-table-column label="商品" prop="goods" width="360">
144   - <template slot-scope="{ row, $index }">
145   - <el-row
146   - v-if="$index % 2 === 0"
147   - class="card-header"
148   - >
149   - <el-col :span="5">
150   - 订单号：{{row.orderNo}}
151   - <el-popover
152   - title="支付流水号："
153   - :content="row.payNo"
154   - ref="popover"
155   - placement="right"
156   - width="200"
157   - trigger="click"
158   - />
159   - <el-button type="text" v-popover:popover>
160   - 更多
161   - </el-button>
162   - </el-col>
163   - <el-col :span="5">下单时间：{{row.time}}</el-col>
164   - <el-col :span="5">订单来源：{{row.orderSource}}</el-col>
165   - <el-col :span="5">支付方式：{{row.payWay}}</el-col>
166   - <el-col :span="4" align="right">
167   - <el-button type="text">打印发货单</el-button>
168   - <el-button type="text">详情</el-button>
169   - <el-button type="text">备注</el-button>
170   - </el-col>
171   - <!-- TODO：关闭订单、修改地址、调整价格 -->
172   - </el-row>
173   - <div v-else class="goods-info">
174   - <img :src="row.picture"/>
175   - <span class="ellipsis-2">{{row.name}}</span>
176   - </div>
177   - </template>
178   - </el-table-column>
179   - <!-- TODO：需要考虑下，一个订单下，有多个商品的情况 -->
180   - <el-table-column label="单价(元)/数量" prop="fee" align="center" width="115">
181   - <template slot-scope="{ row }">
182   - <div>{{row.price}}</div>
183   - <div>{{row.count}}</div>
184   - </template>
185   - </el-table-column>
186   - <el-table-column label="维权" prop="safeguard" align="center" width="115"/>
187   - <el-table-column label="实付金额(元)" prop="amount" align="center" width="115"/>
188   - <el-table-column label="买家/收货人" prop="buyer" width="360">
189   - <template slot-scope="{ row }">
190   - <div>{{row.buyer}}</div>
191   - <div>{{row.receiver}}{{row.tel}}</div>
192   - <div class="ellipsis-2">{{row.address}}</div>
193   - </template>
194   - </el-table-column>
195   - <el-table-column label="配送方式" prop="sendWay" width="115"/>
196   - <el-table-column label="交易状态" prop="status"/>
197   - </el-table>
198   -
199   - <pagination/>
200   - </div>
201   -</template>
202   -
203   -<script>
204   -const dicData = {
205   - searchType: [
206   - { label: '订单号', value: 'ddh' },
207   - { label: '交易流水号', value: 'jylsh' },
208   - { label: '订单备注', value: 'ddbz' },
209   - { label: '收货人姓名', value: 'shrxm' },
210   - { label: '商品名称', value: 'spmc' },
211   - { label: '收货人电话', value: 'shrdh' },
212   - { label: '会员昵称', value: 'hync' },
213   - { label: '商品编号', value: 'spbh' }
214   - ],
215   - orderType: [
216   - { label: '全部', value: 'qb' },
217   - { label: '物流订单', value: 'wldd' },
218   - { label: '自提订单', value: 'ztdd' },
219   - { label: '外卖订单', value: 'wmdd' },
220   - { label: '虚拟订单', value: 'xndd' },
221   - { label: '收银订单', value: 'sydd' }
222   - ],
223   - orderStatus: [
224   - { label: '全部', value: 'qb' },
225   - { label: '待支付', value: 'dzf' },
226   - { label: '待发货', value: 'dfh' },
227   - { label: '已发货', value: 'yfh' },
228   - { label: '已收货', value: 'ysh' },
229   - { label: '已完成', value: 'ywc' },
230   - { label: '已关闭', value: 'ygb' },
231   - { label: '退款中', value: 'tkz' }
232   - ],
233   - orderSource: [
234   - { label: '全部', value: 'qb' },
235   - { label: '微信公众号', value: 'wxgzh' },
236   - { label: '微信小程序', value: 'wxxcx' },
237   - { label: 'PC', value: 'pc' },
238   - { label: 'H5', value: 'h5' },
239   - { label: 'APP', value: 'app' },
240   - { label: '收银台', value: 'syt' },
241   - { label: '代客下单', value: 'dkxd' }
242   - ],
243   - payWay: [
244   - { label: '全部', value: 'qb' },
245   - { label: '在线支付', value: 'zxzf' },
246   - { label: '余额支付', value: 'yezf' },
247   - { label: '线下支付', value: 'xxzf' },
248   - { label: '积分兑换', value: 'jfdh' },
249   - { label: '支付宝支付', value: 'zfbzf' },
250   - { label: '微信支付', value: 'wxzf' }
251   - ],
252   - marketingType: [
253   - { label: '全部', value: 'qb' },
254   - { label: '一口价', value: 'ykj' },
255   - { label: '专题', value: 'zt' },
256   - { label: '团购', value: 'tg' },
257   - { label: '拼团', value: 'pt' },
258   - { label: '拼团返利', value: 'ptfl' },
259   - { label: '盲盒', value: 'mh' },
260   - { label: '砍价', value: 'kj' },
261   - { label: '礼品卡优惠', value: 'lpkyh' },
262   - { label: '秒杀', value: 'ms' },
263   - { label: '积分兑换', value: 'jfdh' },
264   - { label: '组合套餐', value: 'zhtc' },
265   - { label: '预售', value: 'ys' }
266   - ]
267   -}
268   -const rangePickerOptions = {
269   - shortcuts: [{
270   - text: '最近一周',
271   - onClick(picker) {
272   - const end = new Date();
273   - const start = new Date();
274   - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
275   - picker.$emit('pick', [start, end]);
276   - }
277   - }, {
278   - text: '最近一个月',
279   - onClick(picker) {
280   - const end = new Date();
281   - const start = new Date();
282   - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
283   - picker.$emit('pick', [start, end]);
284   - }
285   - }, {
286   - text: '最近三个月',
287   - onClick(picker) {
288   - const end = new Date();
289   - const start = new Date();
290   - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
291   - picker.$emit('pick', [start, end]);
292   - }
293   - }]
294   -}
295   -export default {
296   - name: "index",
297   - data () {
298   - return {
299   - dicData,
300   - rangePickerOptions,
301   - queryParams: {
302   - searchType: 'ddh',
303   - orderType: ''
304   - },
305   - activeTabName: 'all',
306   - tabPanes: [
307   - { text: '全部', label: 'all' },
308   - { text: '待支付', label: 'toBePay' },
309   - { text: '待发货', label: 'toBeSend' },
310   - { text: '已发货', label: 'send' },
311   - { text: '已收货', label: 'received' },
312   - { text: '已完成', label: 'finished' },
313   - { text: '已关闭', label: 'closed' },
314   - { text: '退款中', label: 'refund' }
315   - ],
316   - tableData: []
317   - }
318   - },
319   - mounted () {
320   - const data = [
321   - {
322   - orderNo: '20221026220424001',
323   - payNo: '20221026220424001',
324   - time: '2022-10-26 22:04:20',
325   - orderSource: 'PC',
326   - payWay: '微信支付',
327   - name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
328   - picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
329   - price: '199',
330   - count: '5件',
331   - amount: 460,
332   - safeguard: '主动退款',
333   - buyer: '小明',
334   - receiver: '小花',
335   - tel: '15823655095',
336   - address: '北京市-北京市-东城区 观音桥',
337   - sendWay: '物流配送',
338   - status: '已完成'
339   - },
340   - {
341   - orderNo: '20221026220424001',
342   - payNo: '20221026220424001',
343   - time: '2022-10-26 22:04:20',
344   - orderSource: 'PC',
345   - payWay: '微信支付',
346   - name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
347   - picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
348   - price: '199',
349   - count: '5件',
350   - amount: 460,
351   - safeguard: '主动退款',
352   - buyer: '小明',
353   - receiver: '小花',
354   - tel: '15823655095',
355   - address: '北京市-北京市-东城区 观音桥',
356   - sendWay: '物流配送',
357   - status: '已完成'
358   - },
359   - {
360   - orderNo: '20221026220424001',
361   - payNo: '20221026220424001',
362   - time: '2022-10-26 22:04:20',
363   - orderSource: 'PC',
364   - payWay: '微信支付',
365   - name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
366   - picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
367   - price: '199',
368   - count: '5件',
369   - amount: 460,
370   - safeguard: '主动退款',
371   - buyer: '小明',
372   - receiver: '小花',
373   - tel: '15823655095',
374   - address: '北京市-北京市-东城区 观音桥',
375   - sendWay: '物流配送',
376   - status: '已完成'
377   - },
378   - {
379   - orderNo: '20221026220424001',
380   - payNo: '20221026220424001',
381   - time: '2022-10-26 22:04:20',
382   - orderSource: 'PC',
383   - payWay: '微信支付',
384   - name: '颜衫短袖男polo衫夏季翻领衣服潮牌休闲上衣夏天翻领半袖男士t恤',
385   - picture: 'https://b2c-v5-yanshi.oss-cn-hangzhou.aliyuncs.com/upload/1/common/images/20220723/20220723115621165854858145027_SMALL.webp',
386   - price: '199',
387   - count: '5件',
388   - amount: 460,
389   - safeguard: '主动退款',
390   - buyer: '小明',
391   - receiver: '小花',
392   - tel: '15823655095',
393   - address: '北京市-北京市-东城区 观音桥',
394   - sendWay: '物流配送',
395   - status: '已完成'
396   - }
397   - ]
398   - data.forEach((record, index) => {
399   - data.splice(index, 0, record)
400   - })
401   - this.tableData = data
402   - },
403   - methods: {
404   - spanMethod ({ row, column, rowIndex, columnIndex }) {
405   - if (rowIndex % 2 === 0) {
406   - if (columnIndex === 1) {
407   - return [1, 8]
408   - } else {
409   - return [0, 0]
410   - }
411   - }
412   - },
413   - rowClassName ({ rowIndex }) {
414   - if (rowIndex % 2 === 0) {
415   - return 'even-row'
416   - } else {
417   - return 'odd-row'
418   - }
419   - }
420   - }
421   -}
422   -</script>
423   -
424   -<style lang="scss" scoped>
425   - ::v-deep .el-table {
426   - margin-top: 20px;
427   - .el-table__row{
428   - &.even-row{
429   - >.el-table__cell{
430   - padding: 0;
431   - .cell{
432   - padding: 0;
433   - .card-header{
434   - padding: 0 10px;
435   - line-height: 44px;
436   - background: #f7f7f7;
437   - color: #333;
438   - }
439   - }
440   - }
441   - }
442   - >.el-table__cell{
443   - .goods-info{
444   - display: flex;
445   - img{
446   - margin-right: 10px;
447   - width: 60px;
448   - height: 60px;
449   - border: 1px solid #e2e2e2;
450   - }
451   - }
452   - .ellipsis-2{
453   - display: -webkit-box;
454   - overflow: hidden;
455   - text-overflow: ellipsis;
456   - white-space: normal;
457   - -webkit-line-clamp: 2; /* 要显示的行数 */
458   - -webkit-box-orient: vertical;
459   - word-break: break-all;
460   - line-height: 22px !important;
461   - max-height: 44px !important;
462   - }
463   - }
464   - }
465   - }
466   -</style>