|
|
@@ -1,791 +1,221 @@
|
|
|
<template>
|
|
|
<el-container class="order-detail">
|
|
|
<el-main>
|
|
|
- <div class="warm-tip sa-m-b-16">
|
|
|
- 温馨提示
|
|
|
- <br />1、如果无法发货，请及时与买家联系并说明情况后主动退款；
|
|
|
- <br />2、买家申请售后，须征得买家同意后发货，否则买家有权拒收货物；
|
|
|
- <br />3、订单全部退款将会退回商品库存，并且减少实际销量，订单商品上的主动退款不会退回库存和销量
|
|
|
+ <!-- 订单轨迹 -->
|
|
|
+ <div class="order-track sa-m-b-26">
|
|
|
+ <h3 class="sa-m-b-20">订单轨迹</h3>
|
|
|
+ <el-steps :active="getActiveStep()" align-center>
|
|
|
+ <el-step
|
|
|
+ v-for="(step, index) in state.orderDetail.status_steps"
|
|
|
+ :key="index"
|
|
|
+ :title="step.status_text"
|
|
|
+ :description="step.time"
|
|
|
+ :status="step.completed ? 'finish' : 'wait'"
|
|
|
+ />
|
|
|
+ </el-steps>
|
|
|
</div>
|
|
|
- <div class="status-content sa-m-b-16">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col class="sa-col-12 left" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="name sa-flex sa-m-b-4">
|
|
|
- <el-icon class="refresh sa-m-r-4" @click="getOrderDetail"><RefreshLeft /></el-icon>
|
|
|
- {{ state.orderDetail.status_text }}
|
|
|
+
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <div class="basic-info sa-m-b-26">
|
|
|
+ <h3 class="sa-m-b-20">基本信息</h3>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">订单编号：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.order_sn || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">订单状态：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.status_text || '--' }}</span>
|
|
|
</div>
|
|
|
- <div class="desc sa-m-b-16">
|
|
|
- {{ state.orderDetail.status_desc }}
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">全部金额：</span>
|
|
|
+ <span class="value">৳{{ state.orderDetail.total_amount || '--' }}</span>
|
|
|
</div>
|
|
|
- <div class="tools sa-m-b-4">
|
|
|
- <template v-if="state.orderDetail.btns">
|
|
|
- <el-button
|
|
|
- v-if="state.orderDetail.btns.includes('send')"
|
|
|
- v-auth="'shop.admin.order.order.dispatch'"
|
|
|
- type="primary"
|
|
|
- @click="onOpenDispatch"
|
|
|
- >立即发货</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-if="state.orderDetail.btns.includes('refund')"
|
|
|
- v-auth="'shop.admin.order.order.fullrefund'"
|
|
|
- @click="onOpenRefund"
|
|
|
- >全部退款</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">中奖状态：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.lottery_status || '--' }}</span>
|
|
|
</div>
|
|
|
- <div class="memo sa-flex">
|
|
|
- <template v-if="memoForm.flag">
|
|
|
- <el-input class="sa-w-120 sa-m-r-12" v-model="memoForm.data" size="small" />
|
|
|
- <el-button class="is-link" type="primary" size="small" @click="onConfirmMemo"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- class="is-link"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="memoForm.flag = false"
|
|
|
- >取消</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <!-- TODO：这里没有权限的时候有问题 -->
|
|
|
- <template v-if="!memoForm.flag">
|
|
|
- <div v-if="state.orderDetail.memo" class="sa-m-r-12">
|
|
|
- {{ state.orderDetail.memo }}
|
|
|
- </div>
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.editmemo'"
|
|
|
- class="is-link"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onChangeMemoFlag(state.orderDetail.memo)"
|
|
|
- >{{ state.orderDetail.memo ? '修改' : '添加' }}备注</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="sa-m-t-12">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">用户昵称：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.user_nickname || '--' }}</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
- <el-col class="sa-col-24 center" :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
|
|
|
- <status-steps :orderDetail="state.orderDetail" />
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">支付方式：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.payment_method || '--' }}</span>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
- <el-col class="sa-col-12 right" :xs="12" :sm="12" :md="6" :lg="6" :xl="6">
|
|
|
- <div class="right-item">
|
|
|
- <div class="label">商品总价：</div>
|
|
|
- <div class="content">¥{{ state.orderDetail.goods_amount }}</div>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">优惠金额：</span>
|
|
|
+ <span class="value">৳{{ state.orderDetail.discount_amount || '--' }}</span>
|
|
|
</div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="label">运费价格：</div>
|
|
|
- <div class="content"> ¥{{ state.orderDetail.dispatch_amount }} </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">奖励佣金：</span>
|
|
|
+ <span class="value">৳{{ state.orderDetail.commission_amount || '--' }}</span>
|
|
|
</div>
|
|
|
- <div
|
|
|
- class="right-item right-item-discount"
|
|
|
- v-if="
|
|
|
- state.orderDetail.ext &&
|
|
|
- (state.orderDetail.ext.promo_infos ||
|
|
|
- state.orderDetail.coupon_id)
|
|
|
- "
|
|
|
- >
|
|
|
- <div class="label">活动优惠：</div>
|
|
|
- <div class="content">
|
|
|
- <div
|
|
|
- class="sa-flex sa-m-b-12"
|
|
|
- v-if="Number(state.orderDetail.ext.promo_discounts.full_reduce) > 0"
|
|
|
- >
|
|
|
- <div class="label">满减</div>
|
|
|
- <div class="content sa-m-l-12">
|
|
|
- -¥{{ state.orderDetail.ext.promo_discounts.full_reduce }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sa-flex sa-m-b-12"
|
|
|
- v-if="Number(state.orderDetail.ext.promo_discounts.full_discount) > 0"
|
|
|
- >
|
|
|
- <div class="label">满折</div>
|
|
|
- <div class="content sa-m-l-12">
|
|
|
- -¥{{ state.orderDetail.ext.promo_discounts.full_discount }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sa-flex sa-m-b-12"
|
|
|
- v-if="Number(state.orderDetail.ext.promo_discounts.full_gift) > 0"
|
|
|
- >
|
|
|
- <div class="label">满赠</div>
|
|
|
- <div class="content sa-m-l-12"></div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="sa-flex sa-m-b-12"
|
|
|
- v-if="Number(state.orderDetail.ext.promo_discounts.free_shipping) > 0"
|
|
|
- >
|
|
|
- <div class="label">满包邮</div>
|
|
|
- <div class="content sa-m-l-12">
|
|
|
- -¥{{ state.orderDetail.ext.promo_discounts.free_shipping }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-if="state.orderDetail.coupon_id" class="right-item">
|
|
|
- <div class="label">优惠券</div>
|
|
|
- <div class="content sa-m-l-12">
|
|
|
- -¥{{ state.orderDetail.coupon_discount_fee }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="sa-m-t-12">
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">手机号码：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.mobile || '--' }}</span>
|
|
|
</div>
|
|
|
- <div class="right-item">
|
|
|
- <div class="label">
|
|
|
- {{['paid', 'completed'].includes(state.orderDetail.status)?'实付金额':'应付金额'}}：
|
|
|
- </div>
|
|
|
- <div class="content fee-content sa-flex">
|
|
|
- ¥{{ state.orderDetail.pay_fee }}
|
|
|
- <s
|
|
|
- v-if="state.orderDetail.pay_fee != state.orderDetail.original_pay_fee"
|
|
|
- class="original-pay-fee sa-m-l-4"
|
|
|
- >
|
|
|
- {{ state.orderDetail.original_pay_fee }}
|
|
|
- </s>
|
|
|
- <el-button
|
|
|
- v-if="state.orderDetail.btns && state.orderDetail.btns.includes('change_fee')"
|
|
|
- v-auth="'shop.admin.order.order.changefee'"
|
|
|
- class="is-link sa-m-l-8"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onChangeFee"
|
|
|
- >改价</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">支付金额：</span>
|
|
|
+ <span class="value">৳{{ state.orderDetail.pay_amount || '--' }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <div class="info-item">
|
|
|
+ <span class="label">实付金额：</span>
|
|
|
+ <span class="value">৳{{ state.orderDetail.actual_amount || '--' }}</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
- <div class="remark right-item">
|
|
|
- <div class="label">买家留言：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.remark || '暂无留言' }}
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <!-- 备注信息 -->
|
|
|
+ <div class="memo-info sa-m-b-26">
|
|
|
+ <h3 class="sa-m-b-20">备注信息</h3>
|
|
|
+ <div class="memo sa-flex">
|
|
|
+ <template v-if="memoForm.flag">
|
|
|
+ <el-input class="sa-w-120 sa-m-r-12" v-model="memoForm.data" size="small" />
|
|
|
+ <el-button class="is-link" type="primary" size="small" @click="onConfirmMemo"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <el-button class="is-link" type="primary" size="small" @click="memoForm.flag = false"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-if="!memoForm.flag">
|
|
|
+ <div v-if="state.orderDetail.memo" class="sa-m-r-12">
|
|
|
+ {{ state.orderDetail.memo }}
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ class="is-link"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ @click="onChangeMemoFlag(state.orderDetail.memo)"
|
|
|
+ >{{ state.orderDetail.memo ? '修改' : '添加' }}备注</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="remark sa-m-t-12">
|
|
|
+ <span class="label">买家留言：</span>
|
|
|
+ <span class="value">{{ state.orderDetail.remark || '暂无留言' }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- tabs内容 -->
|
|
|
- <div class="tabs-content sa-m-b-16">
|
|
|
- <el-tabs v-model="state.orderTabs" @tab-change="state.changeExpressStatus = false">
|
|
|
- <el-tab-pane label="订单信息" name="1">
|
|
|
- <el-row class="order-content" :gutter="10">
|
|
|
- <el-col class="sa-col-12" :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
|
|
|
- <div class="title">交易信息</div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">订单编号：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.order_sn }}
|
|
|
- <sa-svg
|
|
|
- class="copy sa-m-l-4 cursor-pointer"
|
|
|
- name="sa-copy"
|
|
|
- @click="useClip(state.orderDetail.order_sn)"
|
|
|
- ></sa-svg>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">订单来源：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.platform }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item" v-if="state.orderDetail.paid_time">
|
|
|
- <div class="label">付款时间：</div>
|
|
|
- <div class="content">{{ state.orderDetail.paid_time }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-if="state.orderDetail.user"
|
|
|
- class="sa-col-12"
|
|
|
- :xs="24"
|
|
|
- :sm="24"
|
|
|
- :md="12"
|
|
|
- :lg="6"
|
|
|
- :xl="6"
|
|
|
- >
|
|
|
- <div class="title">买家信息</div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">用户昵称：</div>
|
|
|
- <div class="content sa-flex">
|
|
|
- <sa-user-profile
|
|
|
- :user="state.orderDetail.user"
|
|
|
- :id="state.orderDetail.user_id"
|
|
|
- :isAvatar="false"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-if="state.orderDetail.address"
|
|
|
- class="sa-col-12"
|
|
|
- :xs="24"
|
|
|
- :sm="24"
|
|
|
- :md="12"
|
|
|
- :lg="6"
|
|
|
- :xl="6"
|
|
|
- >
|
|
|
- <div class="title sa-flex">
|
|
|
- 收货信息
|
|
|
- <template v-if="state.orderDetail?.btns.includes('edit_consignee')">
|
|
|
- <template v-if="!state.editConsigneeFlag">
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.editconsignee'"
|
|
|
- class="is-link sa-m-l-12"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onChangeEditConsigneeFlag(true)"
|
|
|
- >修改</el-button
|
|
|
- >
|
|
|
- <el-button
|
|
|
- class="is-link sa-m-l-8"
|
|
|
- type="success"
|
|
|
- size="small"
|
|
|
- @click="
|
|
|
- useClip(
|
|
|
- `收货昵称：${state.orderDetail.address.consignee};联系方式：${state.orderDetail.address.mobile};
|
|
|
- 收货地址：${state.orderDetail.address.province_name}${state.orderDetail.address.city_name}${state.orderDetail.address.district_name}${state.orderDetail.address.address}`,
|
|
|
- )
|
|
|
- "
|
|
|
- >复制</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- <template v-if="state.editConsigneeFlag">
|
|
|
- <el-button
|
|
|
- class="is-link sa-m-l-12"
|
|
|
- type="danger"
|
|
|
- size="small"
|
|
|
- @click="state.editConsigneeFlag = false"
|
|
|
- >
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- class="is-link sa-m-l-8"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onEditConsignee()"
|
|
|
- >确定</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">收货昵称：</div>
|
|
|
- <div class="content">
|
|
|
- <span v-if="!state.editConsigneeFlag">
|
|
|
- {{ state.orderDetail.address.consignee }}
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- v-if="state.editConsigneeFlag"
|
|
|
- v-model="state.address.consignee"
|
|
|
- size="small"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">联系方式：</div>
|
|
|
- <div class="content">
|
|
|
- <span v-if="!state.editConsigneeFlag">
|
|
|
- {{ state.orderDetail.address.mobile }}
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- v-if="state.editConsigneeFlag"
|
|
|
- v-model="state.address.mobile"
|
|
|
- size="small"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">收货地址：</div>
|
|
|
- <div class="content">
|
|
|
- <div class="sa-m-b-4" v-if="!state.editConsigneeFlag">
|
|
|
- {{ state.orderDetail.address.province_name }}
|
|
|
- {{ state.orderDetail.address.city_name }}
|
|
|
- {{ state.orderDetail.address.district_name }}
|
|
|
- </div>
|
|
|
- <el-cascader
|
|
|
- v-if="state.editConsigneeFlag"
|
|
|
- class="sa-m-b-4"
|
|
|
- ref="addressRef"
|
|
|
- v-model="state.address.pcd"
|
|
|
- :options="state.area"
|
|
|
- :props="{ label: 'name', value: 'id' }"
|
|
|
- size="small"
|
|
|
- />
|
|
|
- <div v-if="!state.editConsigneeFlag">
|
|
|
- {{ state.orderDetail.address.address }}
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- v-if="state.editConsigneeFlag"
|
|
|
- v-model="state.address.address"
|
|
|
- size="small"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-if="state.orderDetail.invoice_status == 1"
|
|
|
- class="sa-col-12"
|
|
|
- :xs="24"
|
|
|
- :sm="24"
|
|
|
- :md="12"
|
|
|
- :lg="6"
|
|
|
- :xl="6"
|
|
|
- >
|
|
|
- <div class="title sa-flex">
|
|
|
- 发票信息
|
|
|
- <div class="sa-m-l-12">
|
|
|
- <span
|
|
|
- v-if="state.orderDetail.invoice.status != 'waiting'"
|
|
|
- class="invoice-status"
|
|
|
- >{{ state.orderDetail.invoice.status_text }}</span
|
|
|
- >
|
|
|
- <el-button
|
|
|
- v-if="state.orderDetail.invoice.status == 'waiting'"
|
|
|
- class="is-link"
|
|
|
- type="primary"
|
|
|
- text
|
|
|
- size="small"
|
|
|
- @click="onChangeInvoiceStatus(state.orderDetail.invoice)"
|
|
|
- >确认开具</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">发票类型：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.invoice.type_text }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">抬头名称：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.invoice.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item" v-if="state.orderDetail.invoice.type === 'company'">
|
|
|
- <div class="label">税号：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.invoice.tax_no }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">手机号：</div>
|
|
|
- <div class="content">
|
|
|
- {{ state.orderDetail.invoice.mobile }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">金额：</div>
|
|
|
- <div class="content"> ￥{{ state.orderDetail.invoice.amount }} </div>
|
|
|
- </div>
|
|
|
- <div class="item" v-if="state.orderDetail.invoice.status === 'finish'">
|
|
|
- <div class="label">实际开票金额：</div>
|
|
|
- <div class="content"> ￥{{ state.orderDetail.invoice.invoice_amount }} </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane
|
|
|
- :label="`包裹${exindex + 1}`"
|
|
|
- v-for="(ex, exindex) in state.orderDetail.express"
|
|
|
- :key="ex"
|
|
|
- :name="`${exindex + 2}`"
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="action-buttons sa-m-b-26">
|
|
|
+ <template v-if="state.orderDetail.btns">
|
|
|
+ <el-button
|
|
|
+ v-if="state.orderDetail.btns.includes('send')"
|
|
|
+ type="primary"
|
|
|
+ @click="onOpenDispatch"
|
|
|
+ >立即发货</el-button
|
|
|
+ >
|
|
|
+ <el-button v-if="state.orderDetail.btns.includes('refund')" @click="onOpenRefund"
|
|
|
+ >全部退款</el-button
|
|
|
+ >
|
|
|
+ <el-button v-if="state.orderDetail.btns.includes('contact_user')" @click="onContactUser"
|
|
|
+ >联系用户</el-button
|
|
|
+ >
|
|
|
+ <el-button v-if="state.orderDetail.btns.includes('export_order')" @click="onExportOrder"
|
|
|
+ >导出订单</el-button
|
|
|
>
|
|
|
- <el-row class="express-content" :gutter="10">
|
|
|
- <el-col class="sa-col-8 left" :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
- <div class="title sa-flex">
|
|
|
- 物流信息
|
|
|
- <div class="sa-flex sa-m-l-12">
|
|
|
- <!-- 运单信息 -->
|
|
|
- <template v-if="!state.changeExpressStatus">
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.dispatch'"
|
|
|
- class="is-link"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onChangeExpressStatus(ex)"
|
|
|
- >修改运单</el-button
|
|
|
- >
|
|
|
- <el-popconfirm
|
|
|
- width="fit-content"
|
|
|
- confirm-button-text="确认"
|
|
|
- cancel-button-text="取消"
|
|
|
- title="您确定要取消运单吗？"
|
|
|
- @confirm="onCancelExpress(ex.id)"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.dispatch'"
|
|
|
- class="is-link sa-m-l-8"
|
|
|
- type="danger"
|
|
|
- size="small"
|
|
|
- @click="cancelExpressPopover = true"
|
|
|
- >
|
|
|
- 取消运单
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-popconfirm>
|
|
|
- </template>
|
|
|
- <!-- 修改运单信息 -->
|
|
|
- <template v-else>
|
|
|
- <el-button
|
|
|
- class="is-link"
|
|
|
- type="danger"
|
|
|
- size="small"
|
|
|
- @click="state.changeExpressStatus = false"
|
|
|
- >
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- class="is-link sa-m-l-8"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onConfirmExpress(ex.id)"
|
|
|
- >确认</el-button
|
|
|
- >
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">快递公司：</div>
|
|
|
- <div class="content">
|
|
|
- <div v-if="!state.changeExpressStatus">
|
|
|
- {{ ex.express_name }}
|
|
|
- </div>
|
|
|
- <el-select
|
|
|
- size="small"
|
|
|
- v-if="state.changeExpressStatus"
|
|
|
- v-model="express.code"
|
|
|
- placeholder="请选择快递公司"
|
|
|
- @change="onChangeExpressCode"
|
|
|
- filterable
|
|
|
- remote
|
|
|
- reserve-keyword
|
|
|
- :remote-method="remoteMethod"
|
|
|
- :loading="deliverCompany.loading"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="dc in deliverCompany.data"
|
|
|
- :key="dc"
|
|
|
- :label="dc.name"
|
|
|
- :value="dc.code"
|
|
|
- :ref="`dc-${dc.code}`"
|
|
|
- :data-name="dc.name"
|
|
|
- >{{ dc.name }} ({{ dc.code }})</el-option
|
|
|
- >
|
|
|
- <div class="sa-p-l-15 sa-p-r-27">
|
|
|
- <sa-pagination
|
|
|
- layout="total, prev, pager, next"
|
|
|
- :pageData="deliverCompany.pageData"
|
|
|
- @updateFn="getDeliverCompany"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="label">快递单号：</div>
|
|
|
- <div class="content">
|
|
|
- <div v-if="!state.changeExpressStatus">
|
|
|
- {{ ex.express_no }}
|
|
|
- </div>
|
|
|
- <el-input
|
|
|
- size="small"
|
|
|
- v-if="state.changeExpressStatus"
|
|
|
- v-model="express.no"
|
|
|
- ></el-input>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="goods-item sa-flex sa-m-t-12" v-for="goods in ex.items" :key="goods">
|
|
|
- <sa-image :url="goods.goods_image" size="40"></sa-image>
|
|
|
- <div class="sa-m-l-8">
|
|
|
- <div class="goods-title sa-table-line-1 sa-m-b-4">
|
|
|
- {{ goods.goods_title }}
|
|
|
- </div>
|
|
|
- <div class="sku sa-flex">
|
|
|
- <div v-if="goods.goods_sku_text" class="sa-m-r-8">
|
|
|
- {{ goods.goods_sku_text }}
|
|
|
- </div>
|
|
|
- <div>x {{ goods.goods_num }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- <el-col
|
|
|
- v-if="state.orderDetail.user"
|
|
|
- class="sa-col-16 right"
|
|
|
- :xs="24"
|
|
|
- :sm="24"
|
|
|
- :md="16"
|
|
|
- :lg="16"
|
|
|
- :xl="16"
|
|
|
- >
|
|
|
- <div class="title sa-flex sa-row-between">
|
|
|
- <template class="sa-flex">
|
|
|
- 物流状态
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.updateexpress'"
|
|
|
- class="is-link sa-m-l-12"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- @click="onUpdateExpress(ex.id, 'subscribe')"
|
|
|
- >重新订阅</el-button
|
|
|
- >
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- :width="300"
|
|
|
- trigger="hover"
|
|
|
- content="如果长时间物流状态没有更新，可以尝试刷新一下。如果没有物流信息，可以尝试重新订阅一下！"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <el-icon class="warning sa-m-l-4">
|
|
|
- <Warning />
|
|
|
- </el-icon>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- <el-button
|
|
|
- v-auth="'shop.admin.order.order.updateexpress'"
|
|
|
- class="refresh"
|
|
|
- size="small"
|
|
|
- icon="RefreshRight"
|
|
|
- @click="onUpdateExpress(ex.id, 'search')"
|
|
|
- ></el-button>
|
|
|
- </div>
|
|
|
- <el-timeline>
|
|
|
- <el-timeline-item
|
|
|
- :class="index == 0 ? 'el-timeline-item-first' : ''"
|
|
|
- v-for="(log, index) in ex.logs"
|
|
|
- :key="index"
|
|
|
- :timestamp="log.change_date"
|
|
|
- :color="index == 0 ? 'var(--t-color-primary)' : ''"
|
|
|
- >
|
|
|
- <div class="log-content">
|
|
|
- {{ log.content }}
|
|
|
- </div>
|
|
|
- <div class="change-date sa-m-t-8">{{ log.change_date }}</div>
|
|
|
- </el-timeline-item>
|
|
|
- </el-timeline>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
+ <el-button v-if="state.orderDetail.btns.includes('close_order')" @click="onCloseOrder"
|
|
|
+ >关闭订单</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 商品列表 -->
|
|
|
- <div class="goods-content">
|
|
|
- <el-tabs>
|
|
|
- <el-tab-pane label="商品信息">
|
|
|
- <el-table class="sa-table" :data="state.orderDetail.items" stripe>
|
|
|
- <el-table-column label="商品信息" min-width="250">
|
|
|
- <template #default="scope">
|
|
|
- <goods-item
|
|
|
- :goods="{
|
|
|
- id: scope.row.goods_id,
|
|
|
- image: scope.row.goods_image,
|
|
|
- title: scope.row.goods_title,
|
|
|
- sku_text: scope.row.goods_sku_text,
|
|
|
- }"
|
|
|
- :isGoods="true"
|
|
|
- mode="order-detail"
|
|
|
- ></goods-item>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="goods_price" label="单价(元)" min-width="100" />
|
|
|
- <el-table-column prop="goods_num" label="数量(件)" min-width="80" />
|
|
|
- <el-table-column prop="discount_fee" label="优惠(元)" min-width="90" />
|
|
|
- <el-table-column prop="pay_fee" label="支付金额" min-width="120" />
|
|
|
- <el-table-column label="订单类型" min-width="100">
|
|
|
- <template #default>{{ state.orderDetail.type_text }}</template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="dispatch_type_text" label="配送方式" width="100">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="发货状态" min-width="120">
|
|
|
- <template #default="scope">
|
|
|
- <status-button
|
|
|
- from="detail"
|
|
|
- :order="state.orderDetail"
|
|
|
- type="dispatch"
|
|
|
- :item="scope.row"
|
|
|
- ></status-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="退款状态" min-width="100">
|
|
|
- <template #default="scope">
|
|
|
- <status-button
|
|
|
- from="detail"
|
|
|
- :order="state.orderDetail"
|
|
|
- type="refund"
|
|
|
- :item="scope.row"
|
|
|
- @updateList="getOrderDetail"
|
|
|
- ></status-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="售后状态" min-width="120">
|
|
|
- <template #default="scope">
|
|
|
- <status-button from="detail" type="aftersale" :item="scope.row"></status-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="商品评价" min-width="100">
|
|
|
- <template #default="scope">
|
|
|
- <status-button
|
|
|
- type="comment"
|
|
|
- :order="state.orderDetail"
|
|
|
- :item="scope.row"
|
|
|
- ></status-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column width="100" label="配送信息">
|
|
|
- <template #default="scope">
|
|
|
- <div v-if="state.orderDetail.dispatch_status!=0">
|
|
|
- <el-popover trigger="hover" width="220">
|
|
|
- <div
|
|
|
- v-if="scope.row.dispatch_type=='autosend' || scope.row.dispatch_type=='custom'">
|
|
|
- <span>发货内容：</span>
|
|
|
- <template v-if="scope.row.ext?.dispatch_content_type=='text'">
|
|
|
- {{scope.row.ext?.dispatch_content}}
|
|
|
- </template>
|
|
|
- <template v-if="scope.row.ext?.dispatch_content_type=='params'"
|
|
|
- v-for="item in scope.row.ext?.dispatch_content">
|
|
|
- {{item.title}}-{{item.content}}
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <template v-if="scope.row.dispatch_type!='express'" #reference>
|
|
|
- <el-button type="primary" link>查看详情</el-button>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- <div v-if="scope.row.dispatch_type=='express'">-</div>
|
|
|
- </div>
|
|
|
- <div v-else>-</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </el-tab-pane>
|
|
|
- <el-tab-pane v-if="state.orderDetail?.activity_orders?.length > 0" label="优惠信息">
|
|
|
- <el-table class="sa-table" :data="state.orderDetail.activity_orders" stripe>
|
|
|
- <el-table-column prop="id" label="ID" min-width="80" />
|
|
|
- <el-table-column label="活动标题" min-width="120">
|
|
|
- <template #default="scope">
|
|
|
- <div class="sa-table-line-1">
|
|
|
- {{ scope.row.activity_title }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="活动类型" min-width="120" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <div
|
|
|
- :style="
|
|
|
- activityStatusStyle(scope.row.activity_type, {
|
|
|
- padding: '8px 12px',
|
|
|
- 'border-radius': '15px',
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- {{ scope.row.activity_type_text }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="优惠信息" min-width="120" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <div class="sa-table-line-1">
|
|
|
- {{ scope.row.discount_text }}
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="discount_fee"
|
|
|
- label="优惠金额(元)"
|
|
|
- min-width="120"
|
|
|
- align="center"
|
|
|
- />
|
|
|
- <el-table-column
|
|
|
- prop="goods_amount"
|
|
|
- label="参与商品金额(元)"
|
|
|
- min-width="140"
|
|
|
- align="center"
|
|
|
+ <!-- 商品信息 -->
|
|
|
+ <div class="goods-content sa-m-b-16">
|
|
|
+ <div class="sa-title sa-m-b-10">商品信息</div>
|
|
|
+ <el-table class="sa-table" :data="state.orderDetail.items" stripe border>
|
|
|
+ <el-table-column label="商品图片" width="100" align="center">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-image
|
|
|
+ :src="row.goods_image"
|
|
|
+ style="width: 60px; height: 60px; border-radius: 4px"
|
|
|
+ fit="cover"
|
|
|
/>
|
|
|
- <el-table-column label="参与商品" min-width="250" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <el-popover placement="top-start" :width="300" trigger="hover">
|
|
|
- <div class="discount-goods">
|
|
|
- <div class="item sa-flex" v-for="goods in scope.row.items" :key="goods">
|
|
|
- <sa-image :url="goods.goods_image" size="40"></sa-image>
|
|
|
- <div class="sa-m-l-12">
|
|
|
- <div class="sa-table-line-1">
|
|
|
- {{ goods.goods_title }}
|
|
|
- </div>
|
|
|
- <div class="">#{{ goods.goods_id }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template #reference>
|
|
|
- <div>
|
|
|
- <span class="discount-items">
|
|
|
- {{ scope.row.items?.length }}
|
|
|
- </span>
|
|
|
- 件商品
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="create_time" label="参与时间" min-width="172" />
|
|
|
- </el-table>
|
|
|
- </el-tab-pane>
|
|
|
- </el-tabs>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 支付列表 -->
|
|
|
- <div class="sa-title">支付信息</div>
|
|
|
- <div class="pay-content">
|
|
|
- <el-table class="sa-table" :data="state.orderDetail.pays" stripe>
|
|
|
- <el-table-column prop="pay_sn" label="支付单号" min-width="250" />
|
|
|
- <el-table-column prop="pay_type_text" label="支付方式" min-width="80" align="center" />
|
|
|
- <el-table-column prop="pay_fee" label="支付金额" min-width="120" align="center" />
|
|
|
- <el-table-column prop="transaction_id" label="交易单号" min-width="280" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <span>{{ scope.row.transaction_id || '-' }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="支付状态" min-width="120" align="center">
|
|
|
- <template #default="scope">
|
|
|
- <span :class="['status', `status-${scope.row.status}`]">{{
|
|
|
- scope.row.status_text
|
|
|
- }}</span>
|
|
|
- </template>
|
|
|
+ <el-table-column label="商品名称" prop="goods_title" min-width="200" />
|
|
|
+ <el-table-column label="规格" prop="goods_sku_text" width="120" align="center" />
|
|
|
+ <el-table-column label="数量" prop="goods_num" width="80" align="center" />
|
|
|
+ <el-table-column label="单价" width="120" align="center">
|
|
|
+ <template #default="{ row }"> ৳{{ row.goods_price || '--' }} </template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="refund_fee" label="已退款金额" min-width="120" align="center" />
|
|
|
- <el-table-column prop="create_time" label="交易时间" min-width="172" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 收货信息 -->
|
|
|
+ <div class="address-content sa-m-b-16">
|
|
|
+ <div class="sa-title sa-m-b-10">收货信息</div>
|
|
|
+ <el-table class="sa-table" :data="[state.orderDetail.address]" stripe border>
|
|
|
+ <el-table-column label="收件人" prop="consignee" width="120" align="center" />
|
|
|
+ <el-table-column label="手机号" prop="mobile" width="150" align="center" />
|
|
|
+ <el-table-column label="详细地址" prop="address" min-width="200" />
|
|
|
+ <el-table-column label="物流公司" prop="express_company" width="120" align="center" />
|
|
|
+ <el-table-column label="物流单号" prop="express_no" width="180" align="center" />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 拼团信息 -->
|
|
|
+ <div class="group-content" v-if="state.orderDetail.group_info">
|
|
|
+ <div class="sa-title sa-m-b-10"
|
|
|
+ >拼团信息（{{ state.orderDetail.group_info.group_type }}）</div
|
|
|
+ >
|
|
|
+ <el-table class="sa-table" :data="state.orderDetail.group_info.members" stripe border>
|
|
|
+ <el-table-column label="昵称" prop="nickname" min-width="120" align="center" />
|
|
|
+ <el-table-column label="手机号" prop="mobile" min-width="150" align="center" />
|
|
|
+ <el-table-column label="参团订单号" prop="order_sn" min-width="180" align="center" />
|
|
|
+ <el-table-column label="参团时间" prop="join_time" min-width="160" align="center" />
|
|
|
+ <el-table-column label="支付时间" prop="pay_time" min-width="160" align="center" />
|
|
|
+ <el-table-column label="奖励佣金" prop="commission" min-width="120" align="center" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-main>
|
|
|
</el-container>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
- import { computed, onMounted, reactive, ref, unref } from 'vue';
|
|
|
+ import { onMounted, reactive } from 'vue';
|
|
|
+ import { ElMessage } from 'element-plus';
|
|
|
import { api } from '../order.service';
|
|
|
- import { api as dataApi } from '@/app/shop/admin/data/data.service';
|
|
|
import { useModal } from '@/sheep/hooks';
|
|
|
- import useClip from '@/sheep/utils/clipboard.js';
|
|
|
- import useExpress from '@/app/shop/admin/data/express/express.js';
|
|
|
-
|
|
|
- import StatusButton from './components/status.vue';
|
|
|
- import { activityStatusStyle } from './status.js';
|
|
|
- import GoodsItem from '@/app/shop/components/goods-item.vue';
|
|
|
import OrderDispatch from './dispatch.vue';
|
|
|
import OrderRefund from './refund.vue';
|
|
|
- import OrderFee from './fee.vue';
|
|
|
- import StatusSteps from './components/status-steps.vue';
|
|
|
- import InvoiceEdit from '../invoice/edit.vue';
|
|
|
- import { cloneDeep } from 'lodash';
|
|
|
|
|
|
const emit = defineEmits(['modalCallBack']);
|
|
|
const props = defineProps(['modal']);
|
|
|
|
|
|
const state = reactive({
|
|
|
orderDetail: {}, // 订单详情
|
|
|
- orderStep: 1,
|
|
|
- orderTabs: '1',
|
|
|
- changeExpressStatus: false, // 变更运单状态
|
|
|
- editConsigneeFlag: false,
|
|
|
- address: {},
|
|
|
- area: [],
|
|
|
+ });
|
|
|
+
|
|
|
+ // 备注表单
|
|
|
+ const memoForm = reactive({
|
|
|
+ flag: false,
|
|
|
+ data: '',
|
|
|
});
|
|
|
|
|
|
// 获取订单详情
|
|
|
@@ -793,449 +223,308 @@
|
|
|
const { error, data } = await api.order.detail(props.modal.params.id);
|
|
|
if (error === 0) {
|
|
|
state.orderDetail = data;
|
|
|
- state.orderTabs = '1';
|
|
|
-
|
|
|
- onChangeEditConsigneeFlag(false);
|
|
|
- changeOrderStep();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- async function getArea() {
|
|
|
- const { data } = await dataApi.area.select();
|
|
|
- state.area = data;
|
|
|
+ // 获取激活步骤
|
|
|
+ function getActiveStep() {
|
|
|
+ if (!state.orderDetail.status_steps) return 0;
|
|
|
+ return state.orderDetail.status_steps.filter((step) => step.completed).length - 1;
|
|
|
}
|
|
|
|
|
|
- function changeOrderStep() {
|
|
|
- if (state.orderDetail.status == 'unpaid') {
|
|
|
- state.orderStep = 1;
|
|
|
- } else if (state.orderDetail.status == 'paid') {
|
|
|
- state.orderStep = 2;
|
|
|
- switch (state.orderDetail.status_code) {
|
|
|
- case 'nosend':
|
|
|
- state.orderStep = 2;
|
|
|
- break;
|
|
|
- case 'noget':
|
|
|
- state.orderStep = 3;
|
|
|
- break;
|
|
|
- case 'nocomment':
|
|
|
- state.orderStep = 4;
|
|
|
- break;
|
|
|
- case 'commented':
|
|
|
- state.orderStep = 4;
|
|
|
- break;
|
|
|
- }
|
|
|
- } else if (state.orderDetail.status == 'completed') {
|
|
|
- state.orderStep = 5;
|
|
|
+ // 发货
|
|
|
+ function onOpenDispatch() {
|
|
|
+ // 检查订单数据是否完整
|
|
|
+ if (!state.orderDetail || !state.orderDetail.items) {
|
|
|
+ ElMessage.error('订单数据加载中，请稍后再试');
|
|
|
+ return;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- function onOpenDispatch() {
|
|
|
useModal(
|
|
|
OrderDispatch,
|
|
|
{
|
|
|
title: '订单发货',
|
|
|
- data: state.orderDetail,
|
|
|
+ params: {
|
|
|
+ data: state.orderDetail,
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
- confirm: () => {
|
|
|
+ success: () => {
|
|
|
getOrderDetail();
|
|
|
},
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
|
|
|
+ // 退款
|
|
|
function onOpenRefund() {
|
|
|
useModal(
|
|
|
OrderRefund,
|
|
|
{
|
|
|
- title: '全部退款',
|
|
|
- class: 'refund-dialog',
|
|
|
- type: 'order.fullRefund',
|
|
|
- data: {
|
|
|
+ title: '订单退款',
|
|
|
+ width: '600px',
|
|
|
+ params: {
|
|
|
id: state.orderDetail.id,
|
|
|
- money: state.orderDetail.pay_fee,
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- confirm: () => {
|
|
|
- getOrderDetail();
|
|
|
},
|
|
|
},
|
|
|
- );
|
|
|
- }
|
|
|
-
|
|
|
- function onChangeFee() {
|
|
|
- useModal(
|
|
|
- OrderFee,
|
|
|
- {
|
|
|
- title: '改价',
|
|
|
- class: 'fee-dialog',
|
|
|
- id: state.orderDetail.id,
|
|
|
- pay_fee: state.orderDetail.pay_fee,
|
|
|
- },
|
|
|
{
|
|
|
- confirm: () => {
|
|
|
+ success: () => {
|
|
|
getOrderDetail();
|
|
|
},
|
|
|
},
|
|
|
);
|
|
|
}
|
|
|
|
|
|
- // 备注
|
|
|
- const memoForm = reactive({
|
|
|
- flag: false,
|
|
|
- data: '',
|
|
|
- });
|
|
|
- function onChangeMemoFlag(val) {
|
|
|
- memoForm.flag = true;
|
|
|
- memoForm.data = val;
|
|
|
- }
|
|
|
- async function onConfirmMemo() {
|
|
|
- const { error } = await api.order.editMemo(state.orderDetail.id, {
|
|
|
- memo: memoForm.data,
|
|
|
- });
|
|
|
- if (error == 0) {
|
|
|
- memoForm.flag = false;
|
|
|
- getOrderDetail();
|
|
|
+ // 联系用户
|
|
|
+ async function onContactUser() {
|
|
|
+ try {
|
|
|
+ const { error } = await api.order.contact(state.orderDetail.id);
|
|
|
+ if (error === 0) {
|
|
|
+ ElMessage.success('已发送联系信息');
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('联系用户失败');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- const { express, deliverCompany, getDeliverCompany, onChangeExpressCode, remoteMethod } =
|
|
|
- useExpress();
|
|
|
-
|
|
|
- function onChangeExpressStatus(ex) {
|
|
|
- state.changeExpressStatus = true;
|
|
|
-
|
|
|
- express.name = ex.express_name;
|
|
|
- express.code = ex.express_code;
|
|
|
- express.no = ex.express_no;
|
|
|
- }
|
|
|
-
|
|
|
- async function onChangeInvoiceStatus(row) {
|
|
|
- useModal(
|
|
|
- InvoiceEdit,
|
|
|
- {
|
|
|
- title: '编辑',
|
|
|
- type: 'edit',
|
|
|
- data: row,
|
|
|
- },
|
|
|
- {
|
|
|
- confirm: () => {
|
|
|
- getOrderDetail();
|
|
|
- },
|
|
|
- },
|
|
|
- );
|
|
|
- // const { data } = await api.invoice.confirm(id);
|
|
|
- }
|
|
|
-
|
|
|
- // 确认修改运单
|
|
|
- async function onConfirmExpress(order_express_id) {
|
|
|
- await api.order.dispatch({
|
|
|
- order_id: props.modal.params.id,
|
|
|
- order_express_id,
|
|
|
- action: 'change',
|
|
|
- express: express,
|
|
|
- });
|
|
|
- state.changeExpressStatus = false;
|
|
|
- getOrderDetail();
|
|
|
+ // 导出订单
|
|
|
+ async function onExportOrder() {
|
|
|
+ try {
|
|
|
+ const { error, data } = await api.order.export(state.orderDetail.id);
|
|
|
+ if (error === 0) {
|
|
|
+ ElMessage.success('导出成功');
|
|
|
+ if (data.download_url) {
|
|
|
+ window.open(data.download_url);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('导出订单失败');
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- // 取消运单
|
|
|
- const cancelExpressPopover = ref(false);
|
|
|
- async function onCancelExpress(order_express_id) {
|
|
|
- await api.order.dispatch({
|
|
|
- order_id: props.modal.params.id,
|
|
|
- order_express_id,
|
|
|
- action: 'cancel',
|
|
|
- });
|
|
|
- getOrderDetail();
|
|
|
+ // 关闭订单
|
|
|
+ async function onCloseOrder() {
|
|
|
+ try {
|
|
|
+ const { error } = await api.order.close(state.orderDetail.id);
|
|
|
+ if (error === 0) {
|
|
|
+ ElMessage.success('订单已关闭');
|
|
|
+ getOrderDetail();
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('关闭订单失败');
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- async function onUpdateExpress(order_express_id, type) {
|
|
|
- const { error } = await api.order.updateExpress(order_express_id, { type });
|
|
|
- if (error == 0) getOrderDetail();
|
|
|
+ // 修改备注标志
|
|
|
+ function onChangeMemoFlag(memo) {
|
|
|
+ memoForm.flag = true;
|
|
|
+ memoForm.data = memo || '';
|
|
|
}
|
|
|
|
|
|
- // 修改收货信息
|
|
|
- function onChangeEditConsigneeFlag(type) {
|
|
|
- if (state.orderDetail.address) {
|
|
|
- state.address = {
|
|
|
- consignee: state.orderDetail.address.consignee,
|
|
|
- mobile: state.orderDetail.address.mobile,
|
|
|
- pcd: [
|
|
|
- state.orderDetail.address.province_id,
|
|
|
- state.orderDetail.address.city_id,
|
|
|
- state.orderDetail.address.district_id,
|
|
|
- ],
|
|
|
- address: state.orderDetail.address.address,
|
|
|
- };
|
|
|
+ // 确认备注
|
|
|
+ async function onConfirmMemo() {
|
|
|
+ try {
|
|
|
+ const { error } = await api.order.editMemo(state.orderDetail.id, { memo: memoForm.data });
|
|
|
+ if (error === 0) {
|
|
|
+ ElMessage.success('备注更新成功');
|
|
|
+ memoForm.flag = false;
|
|
|
+ getOrderDetail();
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ ElMessage.error('备注更新失败');
|
|
|
}
|
|
|
- state.editConsigneeFlag = type;
|
|
|
- }
|
|
|
- const addressRef = ref();
|
|
|
- async function onEditConsignee() {
|
|
|
- let label = unref(addressRef).getCheckedNodes()[0].pathLabels;
|
|
|
- let tempAddress = cloneDeep(state.address);
|
|
|
- tempAddress = {
|
|
|
- ...tempAddress,
|
|
|
- province_name: label[0],
|
|
|
- province_id: state.address.pcd[0],
|
|
|
- city_name: label[1],
|
|
|
- city_id: state.address.pcd[1],
|
|
|
- district_name: label[2],
|
|
|
- district_id: state.address.pcd[2],
|
|
|
- };
|
|
|
- delete tempAddress.pcd;
|
|
|
-
|
|
|
- await api.order.editConsignee(state.orderDetail.id, tempAddress);
|
|
|
- getOrderDetail();
|
|
|
- state.editConsigneeFlag = false;
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
getOrderDetail();
|
|
|
- getArea();
|
|
|
});
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
.order-detail {
|
|
|
- .warm-tip {
|
|
|
- line-height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- color: var(--sa-font);
|
|
|
+ .order-track {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title);
|
|
|
+ }
|
|
|
}
|
|
|
- .status-content {
|
|
|
- border-radius: 8px;
|
|
|
- padding: var(--sa-padding);
|
|
|
- background: var(--sa-table-header-bg);
|
|
|
- .left,
|
|
|
- .center,
|
|
|
- .right {
|
|
|
- margin-bottom: var(--sa-padding);
|
|
|
+
|
|
|
+ .basic-info {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title);
|
|
|
}
|
|
|
- .right-item {
|
|
|
- line-height: 16px;
|
|
|
- margin-bottom: 8px;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- &.right-item-discount {
|
|
|
- align-items: flex-start;
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
.label {
|
|
|
flex-shrink: 0;
|
|
|
color: var(--sa-subfont);
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
- .content {
|
|
|
+
|
|
|
+ .value {
|
|
|
color: var(--sa-subtitle);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
- .left {
|
|
|
- .name {
|
|
|
- line-height: 24px;
|
|
|
- font-size: 18px;
|
|
|
- color: var(--sa-title);
|
|
|
- font-weight: 900;
|
|
|
- .refresh {
|
|
|
- color: var(--t-color-primary);
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .desc {
|
|
|
- line-height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- color: var(--sa-subfont);
|
|
|
- }
|
|
|
- .tools {
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
- .memo {
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: var(--sa-font);
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- .fee-content {
|
|
|
- height: 16px;
|
|
|
- .original-pay-fee {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .remark {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- padding: 0 12px;
|
|
|
- background: var(--sa-table-striped);
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
}
|
|
|
- .tabs-content {
|
|
|
- :deep() {
|
|
|
- .el-tabs {
|
|
|
- .el-tabs__content {
|
|
|
- padding: var(--sa-padding) var(--sa-padding) 0;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .action-buttons {
|
|
|
+ .el-button {
|
|
|
+ margin-right: 12px;
|
|
|
}
|
|
|
- .title {
|
|
|
- height: 24px;
|
|
|
- font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-content,
|
|
|
+ .address-content,
|
|
|
+ .group-content,
|
|
|
+ .memo-info {
|
|
|
+ .sa-title {
|
|
|
+ font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
color: var(--sa-title);
|
|
|
- margin-bottom: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
- .warning {
|
|
|
- color: #faad14;
|
|
|
- }
|
|
|
}
|
|
|
- .item {
|
|
|
- line-height: 24px;
|
|
|
- margin-bottom: 4px;
|
|
|
- display: flex;
|
|
|
- font-size: 12px;
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- .label {
|
|
|
- flex-shrink: 0;
|
|
|
- color: var(--sa-subfont);
|
|
|
- }
|
|
|
- .content {
|
|
|
- color: var(--sa-subtitle);
|
|
|
- }
|
|
|
- .copy {
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
- .order-content {
|
|
|
- .el-col {
|
|
|
- padding-bottom: var(--sa-padding);
|
|
|
- }
|
|
|
- .invoice-status {
|
|
|
- font-size: 12px;
|
|
|
- color: var(--sa-font);
|
|
|
+
|
|
|
+ .sa-table {
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+
|
|
|
+ :deep(.el-table) {
|
|
|
+ border: none;
|
|
|
+ border-radius: 0;
|
|
|
}
|
|
|
- :deep() {
|
|
|
- .nickname {
|
|
|
- height: 24px;
|
|
|
- line-height: 24px;
|
|
|
+
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ background: var(--sa-table-header-bg, #f5f7fa);
|
|
|
+
|
|
|
+ .el-table__header {
|
|
|
+ background: var(--sa-table-header-bg, #f5f7fa);
|
|
|
+
|
|
|
+ th {
|
|
|
+ background: var(--sa-table-header-bg, #f5f7fa) !important;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--sa-title, #303133);
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .express-content {
|
|
|
- .left {
|
|
|
- padding-bottom: var(--sa-padding);
|
|
|
- max-height: 218px;
|
|
|
- overflow: auto;
|
|
|
- .goods-item {
|
|
|
- .goods-title {
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- .goods-title,
|
|
|
- .sku {
|
|
|
- height: 16px;
|
|
|
- line-height: 16px;
|
|
|
- font-size: 12px;
|
|
|
- color: var(--sa-font);
|
|
|
+
|
|
|
+ :deep(.el-table__body-wrapper) {
|
|
|
+ .el-table__body {
|
|
|
+ tr {
|
|
|
+ &:hover {
|
|
|
+ background: #f5f7fa !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ td {
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ border-left: none;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child td {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .right {
|
|
|
- padding-bottom: var(--sa-padding);
|
|
|
- max-height: 218px;
|
|
|
- overflow: auto;
|
|
|
- .title {
|
|
|
- .refresh {
|
|
|
- padding: 5px;
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
+
|
|
|
+ // 确保边框完整性
|
|
|
+ :deep(.el-table--border) {
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- :deep() {
|
|
|
- .el-timeline-item__timestamp {
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- left: -140px;
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .goods-content {
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- .pay-content {
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- .status {
|
|
|
- &.status-unpaid {
|
|
|
- color: #999;
|
|
|
+
|
|
|
+ :deep(.el-table--border .el-table__cell) {
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ border-left: none;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
}
|
|
|
- &.status-paid {
|
|
|
- color: #52c41a;
|
|
|
+
|
|
|
+ // 修复表格底部和左侧边框
|
|
|
+ :deep(.el-table__body) {
|
|
|
+ border-left: none;
|
|
|
+ border-bottom: none;
|
|
|
}
|
|
|
- &.status-refund {
|
|
|
- color: #ff4d4f;
|
|
|
+
|
|
|
+ :deep(.el-table__header) {
|
|
|
+ border-left: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- :deep() {
|
|
|
- .el-tabs {
|
|
|
- .el-tabs__nav-wrap::after {
|
|
|
- height: 0;
|
|
|
+
|
|
|
+ .group-content {
|
|
|
+ .sa-table {
|
|
|
+ width: 100% !important;
|
|
|
+
|
|
|
+ :deep(.el-table) {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
- .el-tabs__content {
|
|
|
- background: var(--sa-table-header-bg);
|
|
|
- border-radius: 8px;
|
|
|
+
|
|
|
+ :deep(.el-table__header-wrapper) {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .discount-items {
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
|
|
|
- .discount-goods {
|
|
|
- .item {
|
|
|
- padding: 8px 0;
|
|
|
- border-bottom: 1px solid var(--sa-border);
|
|
|
- &:last-of-type {
|
|
|
- border-bottom: 0;
|
|
|
+ :deep(.el-table__body-wrapper) {
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .log-content {
|
|
|
- line-height: 18px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: var(--sa-subtitle);
|
|
|
- }
|
|
|
- .change-date {
|
|
|
- line-height: 14px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- color: var(--sa-subtitle);
|
|
|
- }
|
|
|
- .el-timeline-item-first {
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 4px;
|
|
|
- width: 2px;
|
|
|
- height: calc(50% - 16px);
|
|
|
- background: var(--t-color-primary);
|
|
|
+
|
|
|
+ .memo-info {
|
|
|
+ .memo {
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
- .el-timeline-item__tail {
|
|
|
- top: 8px;
|
|
|
- bottom: 8px;
|
|
|
+
|
|
|
+ .remark {
|
|
|
+ .label {
|
|
|
+ color: var(--sa-subfont);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: var(--sa-subtitle);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
