<template>
|
<div class="search">
|
<div>
|
<Card style="height: 60px">
|
<div style="">
|
<Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button>
|
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button>
|
<Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button>
|
<Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button>
|
<Button v-if="allowOperation.showLogistics || orderPackage.length > 0" @click="checkLogistics" type="primary">查看物流</Button>
|
<Button @click="orderLog" type="info" ghost>订单日志</Button>
|
<Button @click="printOrder" type="primary" ghost style="float:right;"
|
v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button>
|
</div>
|
</Card>
|
<Card class="mt_10 clearfix">
|
<div style="width: 30%; float: left; margin-left: 20px">
|
<div class="div-item">
|
<div class="div-item-left">订单号：</div>
|
<div class="div-item-right">{{ orderInfo.order.sn }}</div>
|
</div>
|
<div class="div-item">
|
<div class="div-item-left">订单来源：</div>
|
<div class="div-item-right">
|
{{ orderInfo.order.clientType | clientTypeWay }}
|
</div>
|
</div>
|
|
<div class="div-item">
|
<div class="div-item-left">订单状态：</div>
|
<div class="div-item-right">
|
{{ orderInfo.orderStatusValue }}
|
</div>
|
</div>
|
|
<div class="div-item">
|
<div class="div-item-left">下单时间：</div>
|
<div class="div-item-right">
|
{{ orderInfo.order.createTime }}
|
</div>
|
</div>
|
</div>
|
<div style="width: 30%; float: left; margin-left: 20px">
|
<div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
<div class="div-item-left">发票信息：</div>
|
<div class="div-item-right">暂无发票信息</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票抬头：</div>
|
<div class="div-item-right">
|
{{
|
orderInfo.receipt && orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : "暂无"
|
}}
|
</div>
|
</div>
|
|
<div class="div-item"
|
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
|
<div class="div-item-left">发票税号：</div>
|
<div class="div-item-right">
|
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票内容：</div>
|
<div class="div-item-right">
|
{{
|
orderInfo.receipt && orderInfo.receipt.receiptContent
|
? orderInfo.receipt.receiptContent
|
: "暂无"
|
}}
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票金额：</div>
|
<div class="div-item-right">
|
|
<priceColorScheme v-if="orderInfo.receipt && orderInfo.receipt.receiptPrice" :value="orderInfo.receipt.receiptPrice" :color="$mainColor"></priceColorScheme>
|
<span v-else>暂无</span>
|
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">是否开票：</div>
|
<div class="div-item-right">
|
{{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
|
</div>
|
</div>
|
</div>
|
<div style="width: 36%; float: left">
|
<div class="div-item">
|
<div class="div-item-left">收货信息：</div>
|
<div class="div-item-right">
|
{{ orderInfo.order.consigneeName }}
|
{{ orderInfo.order.consigneeMobile }}
|
{{ orderInfo.order.consigneeAddressPath }}
|
{{ orderInfo.order.consigneeDetail }}
|
</div>
|
</div>
|
<div class="div-item">
|
<div class="div-item-left">支付方式：</div>
|
<div class="div-item-right">
|
{{ orderInfo.paymentMethodValue }}
|
</div>
|
</div>
|
|
<div class="div-item">
|
<div class="div-item-left">买家留言：</div>
|
<div class="div-item-right">{{ orderInfo.order.remark }}</div>
|
</div>
|
|
<!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false">
|
<div class="div-item-left">发票信息：</div>
|
<div class="div-item-right">暂无发票信息</div>
|
</div> -->
|
|
<!-- <div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票抬头：</div>
|
<div class="div-item-right">
|
{{
|
orderInfo.receipt && orderInfo.receipt.receiptTitle ? orderInfo.receipt.receiptTitle : "暂无"
|
}}
|
</div>
|
</div>
|
|
<div class="div-item"
|
v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId">
|
<div class="div-item-left">发票税号：</div>
|
<div class="div-item-right">
|
{{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }}
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票内容：</div>
|
<div class="div-item-right">
|
{{
|
orderInfo.receipt && orderInfo.receipt.receiptContent
|
? orderInfo.receipt.receiptContent
|
: "暂无"
|
}}
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">发票金额：</div>
|
<div class="div-item-right">
|
{{
|
orderInfo.receipt && orderInfo.receipt.receiptPrice
|
? orderInfo.receipt.receiptPrice
|
: "暂无" | unitPrice("￥")
|
}}
|
</div>
|
</div>
|
|
<div class="div-item" v-if="orderInfo.order.needReceipt == true">
|
<div class="div-item-left">是否开票：</div>
|
<div class="div-item-right">
|
{{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }}
|
</div>
|
</div> -->
|
|
<div class="div-item" v-if="$route.query.orderType != 'VIRTUAL'">
|
<div class="div-item-left">配送方式：</div>
|
<div class="div-item-right">
|
{{ orderInfo.deliveryMethodValue }}
|
</div>
|
</div>
|
</div>
|
</Card>
|
<Card class="mt_10">
|
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom">
|
<!-- 商品栏目格式化 -->
|
<template slot="goodsSlot" slot-scope="{ row }">
|
<div style="margin-top: 5px; height: 80px; display: flex">
|
<div style="">
|
<img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
|
</div>
|
|
<div style="margin-left: 13px">
|
<div class="div-zoom">
|
<a @click="linkTo(row.goodsId, row.skuId)">{{ row.goodsName }}</a>
|
</div>
|
<span v-for="(item, key) in JSON.parse(row.specs)" :key="key">
|
<span v-show="key != 'images'" style="font-size: 12px; color: #999999">
|
{{ key }} : {{ item }}
|
</span>
|
</span>
|
<Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer>
|
<div slot="content">
|
<vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff"
|
:size="150"></vue-qr>
|
</div>
|
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
|
</Poptip>
|
</div>
|
</div>
|
</template>
|
</Table>
|
<div class="goods-total">
|
<ul>
|
<li>
|
<span class="label">商品总额：</span>
|
<span class="txt">{{
|
orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("￥")
|
}}</span>
|
</li>
|
<li v-if="
|
orderInfo.order.priceDetailDTO.discountPrice &&
|
orderInfo.order.priceDetailDTO.discountPrice > 0
|
">
|
<span class="label">优惠金额：</span>
|
<span class="txt">
|
{{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("￥") }}
|
</span>
|
</li>
|
|
<li v-if="
|
orderInfo.order.priceDetailDTO.couponPrice &&
|
orderInfo.order.priceDetailDTO.couponPrice > 0
|
">
|
<span class="label">优惠券金额：</span>
|
<span class="txt">
|
<priceColorScheme :value="orderInfo.order.priceDetailDTO.couponPrice" :color="$mainColor"></priceColorScheme>
|
|
</span>
|
</li>
|
<li
|
v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
|
<div class="label">
|
<Poptip trigger="hover" placement="left" width="200">
|
<Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice"
|
color="#cc0000" />
|
<template #content>
|
<div class="api" style="text-align:left;">
|
<table>
|
<thead>
|
<tr>
|
<th>优惠详情：</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr v-for="(item, index) in typeList" :key="index">
|
<td>{{ item.promotionName }}：</td>
|
<td>¥{{ item.discountPrice | unitPrice }}</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</template>
|
</Poptip>
|
<span>优惠详情：</span>
|
</div>
|
</li>
|
<!-- <li v-if="showPrices">
|
<span class="label" style="color: #cc0000;font-size: 14px;" v-if="typeList.length > 0" >优惠详情：</span>
|
</li> -->
|
<!-- <li v-if="showPrices" v-for="(item,index) in typeList" :key="index">
|
<span class="label" v-if="index == 1 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
|
<span class="txt" style="border-bottom: 1px dashed;font-size:10px !important;" v-if="index == 1 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
|
<span class="label" v-if="index == 0 && typeList.length > 1" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
|
<span class="txt" style="border-top: 1px dashed;font-size:10px !important;" v-if="index == 0 && typeList.length > 1">¥{{ item.discountPrice | unitPrice }}</span>
|
<span class="label" v-if="typeList.length == 1 && index == 0" style="font-size:10px !important;"><a @click="gotoHomes" style="display: inline-block;border-top: 1px dashed;border-bottom: 1px dashed;color:black;width:80px;">{{item.promotionName}}：</a></span>
|
<span class="txt" v-if="typeList.length == 1 && index == 0" style="border-top: 1px dashed;border-bottom: 1px dashed;font-size:10px !important;">¥{{ item.discountPrice | unitPrice }}</span>
|
</li> -->
|
<li>
|
<span class="label">运费：</span>
|
<span class="txt">{{
|
orderInfo.order.freightPrice | unitPrice("￥")
|
}}</span>
|
</li>
|
<li v-if="orderInfo.order.priceDetailDTO.updatePrice">
|
<span class="label">修改金额：</span>
|
<span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span>
|
</li>
|
<li v-if="orderInfo.order.priceDetailDTO.payPoint != 0">
|
<span class="label">使用积分：</span>
|
<span class="txt flowPrice">{{
|
orderInfo.order.priceDetailDTO.payPoint
|
}}</span>
|
</li>
|
<li>
|
<span class="label">应付金额：</span>
|
<span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span>
|
</li>
|
</ul>
|
</div>
|
</Card>
|
</div>
|
|
<Modal v-model="modal" width="530">
|
<p slot="header">
|
<Icon type="edit"></Icon>
|
<span>修改金额</span>
|
</p>
|
<div>
|
<Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70"
|
:rules="modifyPriceValidate" @submit.native.prevent>
|
<FormItem label="订单金额" prop="price">
|
<InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber>
|
<span class="ml_10">元</span>
|
</FormItem>
|
</Form>
|
</div>
|
<div slot="footer" style="text-align: right">
|
<Button @click="modal = false">关闭</Button>
|
<Button type="primary" @click="modifyPriceSubmit">调整</Button>
|
</div>
|
</Modal>
|
<!-- 查询物流 -->
|
<Modal v-model="logisticsModal" width="40">
|
<p slot="header">
|
<span>查询物流</span>
|
</p>
|
<div class="layui-layer-wrap">
|
<dl>
|
<dt>订单号：</dt>
|
<dd>
|
<div class="text-box">{{ sn }}</div>
|
</dd>
|
</dl>
|
</div>
|
<div v-if="packageTraceList.length > 0" v-for="(packageItem, packageIndex) in packageTraceList" :key="packageIndex">
|
<div class="layui-layer-wrap">
|
<dl>
|
<dt>物流公司：</dt>
|
<dd><div class="text-box">{{ packageItem.logisticsName }}</div></dd>
|
</dl>
|
<dl>
|
<dt>快递单号：</dt>
|
<dd><div nctype="ordersSn" class="text-box">{{ packageItem.logisticsNo }}</div></dd>
|
</dl>
|
<div class="div-express-log">
|
<ul class="express-log express-log-name">
|
<li v-for="(item, index) in packageItem.orderPackageItemList" :key="index">
|
<span class="time" style="width: 50%;"><span>商品名称：</span><span>{{ item.goodsName }}</span></span>
|
<span class="time" style="width: 30%;"><span>发货时间：</span><span>{{ item.logisticsTime }}</span></span>
|
<span class="time" style="width: 20%;"><span>发货数量：</span><span>{{ item.deliverNumber }}</span></span>
|
</li>
|
</ul>
|
</div>
|
<div class="div-express-log">
|
<ul class="express-log" v-if="packageItem.traces && packageItem.traces.traces">
|
<li v-for="(item, index) in packageItem.traces.traces" :key="index">
|
<span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
|
<span class="detail">{{ item.AcceptStation || item.remark }}</span>
|
</li>
|
</ul>
|
<ul class="express-log" v-else><li>暂无物流信息</li></ul>
|
</div>
|
</div>
|
</div>
|
<div v-if = "packageTraceList.length == 0 && logisticsInfo">
|
<div class="layui-layer-wrap">
|
<dl>
|
<dt>物流公司：</dt>
|
<dd><div class="text-box">{{ logisticsInfo.shipper }}</div></dd>
|
</dl>
|
<dl>
|
<dt>快递单号：</dt>
|
<dd><div nctype="ordersSn" class="text-box">{{ logisticsInfo.logisticCode }}</div></dd>
|
</dl>
|
<div class="div-express-log">
|
<ul class="express-log" v-if="logisticsInfo && logisticsInfo.traces">
|
<li v-for="(item, index) in logisticsInfo.traces" :key="index">
|
<span class="time">{{ item.AcceptTime }}</span>
|
<span class="detail">{{ item.AcceptStation }}</span>
|
</li>
|
</ul>
|
<ul class="express-log" v-else><li>暂无物流信息</li></ul>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" style="text-align: right">
|
<Button @click="logisticsModal = false">取消</Button>
|
</div>
|
</Modal>
|
<!-- 订单取消模态框 -->
|
<Modal v-model="orderCancelModal" width="530">
|
<p slot="header">
|
<Icon type="edit"></Icon>
|
<span>订单取消</span>
|
</p>
|
<div>
|
<Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100"
|
:rules="orderCancelValidate">
|
<FormItem label="取消原因" prop="reason">
|
<Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }"
|
placeholder="请输入取消原因"></Input>
|
</FormItem>
|
</Form>
|
</div>
|
<div slot="footer" style="text-align: right">
|
<Button @click="orderCancelModal = false">关闭</Button>
|
<Button type="primary" @click="orderCancelSubmit">确认</Button>
|
</div>
|
</Modal>
|
<!--收件地址弹出框-->
|
<Modal v-model="addressModal" width="530">
|
<p slot="header">
|
<Icon type="edit"></Icon>
|
<span>修改收件信息</span>
|
</p>
|
<div>
|
<Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule">
|
<FormItem label="收件人" prop="consigneeName">
|
<Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input>
|
</FormItem>
|
<FormItem label="联系方式" prop="consigneeMobile">
|
<Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
|
</FormItem>
|
<FormItem label="地址信息" prop="consigneeAddressPath">
|
{{ addr }}
|
<Button type="default" @click="$refs.map.open()">选择</Button>
|
</FormItem>
|
<FormItem label="详细地址" prop="consigneeDetail">
|
<Input v-model="addressForm.consigneeDetail" size="large" ></Input>
|
</FormItem>
|
</Form>
|
</div>
|
<div slot="footer" style="text-align: right">
|
<Button @click="addressModal = false">关闭</Button>
|
<Button type="primary" @click="editAddressSubmit">修改</Button>
|
</div>
|
</Modal>
|
<!-- 订单日志 -->
|
<Modal v-model="orderLogModal" width="60">
|
<p slot="header">
|
<span>订单日志</span>
|
</p>
|
<div class="order-log-div">
|
<Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table"
|
sortable="custom"></Table>
|
</div>
|
|
<div slot="footer" style="text-align: right">
|
<Button @click="handelCancel">取消</Button>
|
</div>
|
</Modal>
|
<Modal v-model="printModal" width="530" @on-cancel="printCancel">
|
<p slot="header" style="line-height:26px;height:26px;">
|
<span style="float: left;">打印发货单</span>
|
<Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;"
|
@click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template
|
v-else>隐藏</template>敏感信息</Button>
|
</p>
|
<div style="max-height:500px;overflow-y:auto;overflow-x:hidden;">
|
<div id="printInfo">
|
<Row v-if="orderInfo.order.remark !== ''">
|
<Col span="24">
|
<p class="lineH30 f14">备注：{{ orderInfo.order.remark }}</p>
|
</Col>
|
</Row>
|
<Row>
|
<Col span="12">
|
<p class="lineH30 f14">收件人：{{ orderInfo.order.consigneeName }}</p>
|
</Col>
|
<Col span="12" v-if="orderInfo.order.consigneeMobile">
|
<p class="lineH30 f14" v-if="printHiddenFlag">手机号：{{
|
orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p>
|
<p class="lineH30 f14" v-else>手机号：{{ orderInfo.order.consigneeMobile }}</p>
|
</Col>
|
</Row>
|
<Row>
|
<Col span="24">
|
<p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
|
</p>
|
</Col>
|
</Row>
|
<Row>
|
<Col span="24">
|
<p class="printgoodtitle">商品信息</p>
|
<div class="printgoodinfo">
|
<div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem">
|
<div class="printgoodname">
|
<p>{{ item.goodsName }}</p>
|
<div class="printgoodguid">
|
<span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild">
|
<span class="printgoodguiditem" v-if="keychild != 'images'">
|
{{ keychild }} : {{ itemchild }}
|
</span>
|
</span>
|
</div>
|
</div>
|
<span class="printgoodnumber">数量：{{ item.num }}</span>
|
</div>
|
</div>
|
</Col>
|
</Row>
|
</div>
|
</div>
|
|
<div slot="footer" style="text-align: right">
|
<Button @click="printModal = false">关闭</Button>
|
<Button type="primary" v-print="printInfoObj">打印发货单</Button>
|
</div>
|
</Modal>
|
|
|
<multipleMap ref="map" @callback="selectedRegion" />
|
</div>
|
</template>
|
|
<script>
|
import * as API_Order from "@/api/order";
|
import * as RegExp from "@/libs/RegExp.js";
|
|
import multipleMap from "@/components/map/multiple-map";
|
import vueQr from "vue-qr";
|
export default {
|
name: "orderList",
|
components: {
|
|
multipleMap,
|
"vue-qr": vueQr,
|
},
|
data () {
|
return {
|
typeList: [],
|
showPrices: false,
|
printHiddenFlag: false,//隐藏信息
|
printInfoObj: {
|
id: "printInfo",//要打印的id名 无#号
|
popTitle: ' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言
|
extraHead: '',//头部文字 默认空
|
},
|
loading: false, //加载表格
|
|
addr: "", //地区
|
|
|
orderLogInfo: [], //订单日志数据
|
orderLogModal: false, //弹出调整价格框
|
checkedLogistics: [], //选中的物流公司集合
|
allowOperation: {}, //订单可才做选项
|
logisticsModal: false, //弹出查询物流框
|
packageTraceList: [],
|
orderPackage: [],
|
logisticsInfo: {
|
shipper: "",
|
}, //物流信息
|
sn: "", //订单编号
|
orderInfo: {
|
order: {
|
priceDetailDTO: {},
|
},
|
},
|
modal: false, //弹出调整价格框
|
searchForm: {
|
pageNumber: 1, // 当前页数
|
pageSize: 100, // 页面大小
|
orderSn: "", //订单sn
|
},
|
//调整价格表单
|
modifyPriceForm: {
|
price: 0,
|
},
|
//订单取消表单
|
orderCancelForm: {
|
reason: "",
|
},
|
//弹出订单取消框
|
orderCancelModal: false,
|
//订单发货
|
orderDeliveryForm: {
|
logisticsNo: "", //发货单号
|
logisticsId: "", //物流公司
|
},
|
//验证要调整的订单金额
|
modifyPriceValidate: {
|
reason: [
|
{ required: true, message: "请输入大于0小于99999的合法金额" },
|
{
|
pattern: /^[1-9]\d{0,3}(\.\d{1,2})?$/,
|
message: "请输入大于0小于9999的合法金额",
|
trigger: "change",
|
},
|
],
|
},
|
|
//验证取消订单原因
|
orderCancelValidate: {
|
reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }],
|
},
|
addressModal: false, //弹出修改收件信息框
|
printModal: false,
|
//收件地址表单
|
addressForm: {
|
consigneeName: "",
|
consigneeMobile: "",
|
consigneeDetail: "",
|
consigneeAddressPath: "",
|
consigneeAddressIdPath: "",
|
},
|
orderDeliverFormValidate: {
|
logisticsNo: [{ required: true, message: "发货单号不能为空", trigger: "change" }],
|
logisticsId: [{ required: true, message: "请选择物流公司", trigger: "blur" }],
|
},
|
addressRule: {
|
consigneeName: [
|
{ required: true, message: "收货人姓名不能为空", trigger: "blur" },
|
],
|
consigneeMobile: [
|
{ required: true, message: "联系方式不能为空", trigger: "blur" },
|
{
|
pattern: RegExp.mobile,
|
trigger: "blur",
|
message: "请输入正确的手机号",
|
},
|
],
|
consigneeDetail: [
|
{ required: true, message: "详细地址不能为空", trigger: "blur" },
|
],
|
},
|
|
columns: [
|
{
|
title: "商品",
|
key: "goodsName",
|
minWidth: 200,
|
slot: "goodsSlot",
|
},
|
{
|
title: "优惠",
|
key: "num",
|
minWidth: 100,
|
render: (h, params) => {
|
let resultText = "";
|
if (params.row.promotionType) {
|
let type = params.row.promotionType.split(",");
|
if (type.indexOf("PINTUAN") != -1) {
|
resultText += "拼团 ";
|
}
|
if (type.indexOf("SECKILL") != -1) {
|
resultText += "秒杀 ";
|
}
|
if (type.indexOf("COUPON") != -1) {
|
resultText += "优惠券 ";
|
}
|
if (type.indexOf("FULL_DISCOUNT") != -1) {
|
resultText += "满减 ";
|
}
|
if (type.indexOf("POINTS_GOODS") != -1) {
|
resultText += "积分商品 ";
|
}
|
}
|
if (resultText === "") {
|
resultText = "暂无未参与任何促销";
|
}
|
return h("div", resultText);
|
},
|
},
|
{
|
title: "单价",
|
key: "goodsPrice",
|
minWidth: 100,
|
render: (h, params) => {
|
if (!params.row.goodsPrice) {
|
return h("div", this.$options.filters.unitPrice(0, "￥"));
|
}
|
return h("div", this.$options.filters.unitPrice(params.row.unitPrice, "￥"));
|
},
|
},
|
|
{
|
title: "数量",
|
key: "num",
|
minWidth: 80,
|
},
|
{
|
title: "退款数量",
|
key: "returnGoodsNumber",
|
minWidth: 80,
|
},
|
{
|
title: "小计",
|
key: "subTotal",
|
minWidth: 100,
|
render: (h, params) => {
|
return h("div", this.$options.filters.unitPrice(params.row.flowPrice, "￥"));
|
},
|
},
|
],
|
data: [], // 表单数据
|
orderLogColumns: [
|
{
|
title: "操作者",
|
key: "operatorName",
|
minWidth: 120,
|
},
|
{
|
title: "操作类型",
|
key: "operatorType",
|
minWidth: 100,
|
},
|
{
|
title: "时间",
|
key: "createTime",
|
width: 180,
|
},
|
{
|
title: "日志",
|
key: "message",
|
tooltip: true,
|
minWidth: 200,
|
},
|
],
|
};
|
},
|
watch: {
|
$route (to, from) {
|
this.$router.go(0);
|
},
|
},
|
methods: {
|
gotoHomes () {
|
return false
|
},
|
getOrderPackage() {
|
API_Order.getPackage(this.sn).then(res => {
|
if (res.success) {
|
this.orderPackage = res.result;
|
console.log('this.orderPackage',this.orderPackage);
|
}
|
})
|
},
|
//查询物流
|
checkLogistics () {
|
this.logisticsModal = true;
|
if (this.orderPackage.length > 0) {
|
this.logisticsList();
|
} else {
|
this.logistics();
|
}
|
},
|
logisticsList () {
|
this.logisticsModal = true;
|
API_Order.getPackage(this.sn).then((res) => {
|
if (res.success && res.result != null) {
|
this.packageTraceList = res.result;
|
}
|
});
|
},
|
logistics () {
|
this.logisticsModal = true;
|
API_Order.getTraces(this.sn).then((res) => {
|
if (res.success && res.result != null) {
|
this.logisticsInfo = res.result;
|
}
|
});
|
},
|
//确认收款
|
confirmPrice () {
|
this.$Modal.confirm({
|
title: "提示",
|
content:
|
"<p>您确定要收款吗？线下收款涉及库存变更，需异步进行，等待约一分钟刷新列表查看</p>",
|
onOk: () => {
|
API_Order.orderPay(this.sn).then((res) => {
|
if (res.success) {
|
this.$Message.success("收款成功");
|
this.getDataList();
|
} else {
|
// this.$Message.error(res.message);
|
}
|
});
|
},
|
});
|
},
|
getOrderPrice () {
|
if (this.showPrices) {
|
this.showPrices = false
|
} else if (!this.showPrices) {
|
this.showPrices = true
|
}
|
},
|
getContentPrice () {
|
for (let i = 0; i < this.typeList.length; i++) {
|
for (let j = i + 1; j < this.typeList.length; j++) {
|
if (this.typeList[i].promotionId === this.typeList[j].promotionId) {
|
this.typeList[i].discountPrice = this.typeList[i].discountPrice + this.typeList[j].discountPrice
|
this.typeList.splice(j, 1)
|
}
|
}
|
}
|
console.log(this.typeList)
|
if (this.typeList.length >= 3) {
|
console.log(123123)
|
this.getContentPrice()
|
}
|
},
|
// 获取订单详情
|
getDataList () {
|
this.loading = true;
|
API_Order.orderDetail(this.sn).then((res) => {
|
this.loading = false;
|
if (res.success) {
|
this.orderInfo = res.result;
|
this.allowOperation = res.result.allowOperationVO;
|
this.data = res.result.orderItems;
|
this.typeList = JSON.parse(JSON.stringify(res.result.order.priceDetailDTO.discountPriceDetail));
|
this.getContentPrice()
|
this.getOrderPrice()
|
}
|
});
|
},
|
modifyPrice () {
|
//默认要修改的金额为订单总金额
|
this.modifyPriceForm.price = this.orderInfo.order.flowPrice;
|
this.modal = true;
|
},
|
//修改订单金额提交
|
modifyPriceSubmit () {
|
this.$refs.modifyPriceForm.validate((valid) => {
|
if (valid) {
|
API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => {
|
if (res.success) {
|
this.$Message.success("修改订单金额成功");
|
this.modal = false;
|
this.getDataList();
|
}
|
});
|
}
|
});
|
},
|
// 选中的地址
|
selectedRegion (val) {
|
if(val.type === 'select'){
|
const paths = val.data.map(item => item.name).join(',')
|
const ids = val.data.map(item => item.id).join(',')
|
this.$set(this,'addr',paths)
|
this.$set(this,'regionId',ids)
|
}
|
else{
|
this.$set(this,'addr',val.data.addr)
|
this.$set(this,'regionId',val.data.addrId)
|
}
|
|
},
|
//订单取消
|
orderCancel () {
|
this.orderCancelModal = true;
|
},
|
//订单取消提交
|
orderCancelSubmit () {
|
this.$refs.orderCancelForm.validate((valid) => {
|
if (valid) {
|
API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => {
|
if (res.success) {
|
this.$Message.success("取消成功");
|
this.getDataList();
|
}
|
this.orderCancelModal = false;
|
});
|
}
|
});
|
},
|
//订单日志
|
orderLog () {
|
this.orderLogModal = true;
|
},
|
//订单日志取消
|
handelCancel () {
|
this.orderLogModal = false;
|
},
|
//打印发货单
|
printOrder () {
|
this.printModal = true;
|
},
|
printHiddenInfo () {
|
this.printHiddenFlag = !this.printHiddenFlag;
|
},
|
printCancel () {
|
// this.printHiddenFlag = false;
|
},
|
//弹出修改收货地址框
|
editAddress () {
|
this.addressModal = true;
|
this.addr = this.orderInfo.order.consigneeAddressPath;
|
this.regionId = this.orderInfo.order.consigneeAddressIdPath;
|
this.addressForm.consigneeName = this.orderInfo.order.consigneeName;
|
this.addressForm.consigneeMobile = this.orderInfo.order.consigneeMobile;
|
this.addressForm.consigneeDetail = this.orderInfo.order.consigneeDetail;
|
this.addressForm.consigneeAddressPath = this.orderInfo.order.consigneeAddressPath;
|
this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath;
|
},
|
//修改收货地址
|
editAddressSubmit () {
|
if (this.regionId == "") {
|
this.$Message.error("请选择地址");
|
return;
|
}
|
this.addressForm.consigneeAddressPath = this.addr;
|
this.addressForm.consigneeAddressIdPath = this.regionId;
|
this.$refs.addressForm.validate((valid) => {
|
if (valid) {
|
API_Order.editOrderConsignee(this.sn, this.addressForm).then((res) => {
|
if (res.success) {
|
this.$Message.success("收货地址修改成功");
|
this.addressModal = false;
|
this.getDataList();
|
}
|
});
|
}
|
});
|
},
|
},
|
mounted () {
|
this.sn = this.$route.query.sn;
|
this.getDataList();
|
this.getOrderPackage();
|
},
|
};
|
</script>
|
<style lang="scss">
|
.lineH30 {
|
line-height: 30px;
|
}
|
|
.order-log-div {
|
line-height: 30px;
|
overflow-y: scroll;
|
}
|
|
.flex-card {
|
display: flex;
|
height: 600px;
|
}
|
|
.card-item {
|
margin: 5px 0;
|
}
|
|
.flex-card-left {
|
flex: 4;
|
//background: #f8f8f8;
|
}
|
|
.flex-card-right {
|
flex: 6;
|
}
|
|
.search {
|
.operation {
|
margin-bottom: 2vh;
|
}
|
|
.select-clear {
|
margin-left: 10px;
|
}
|
|
.div-item {
|
line-height: 35px;
|
display: flex;
|
|
>.div-item-left {
|
width: 80px;
|
}
|
|
>.div-item-right {
|
flex: 1;
|
word-break: break-all;
|
}
|
}
|
|
.div-status-right {
|
margin-top: 20px;
|
margin-left: 30px;
|
font-size: 20px;
|
}
|
|
.page {
|
margin-top: 2vh;
|
}
|
|
button {
|
margin-left: 5px;
|
}
|
|
.goods-total {
|
padding: 20px;
|
height: 220px;
|
width: 100%;
|
|
ul {
|
margin-right: 10px;
|
display: block;
|
float: right;
|
list-style-type: none;
|
|
li {
|
text-align: -webkit-match-parent;
|
}
|
}
|
|
.label {
|
float: left;
|
width: 500px;
|
font-size: 14px;
|
text-align: right;
|
}
|
|
.txt {
|
float: left;
|
font-size: 14px;
|
width: 130px;
|
text-align: right;
|
font-family: verdana;
|
}
|
|
.flowPrice {
|
color: #cc0000;
|
font-size: 22px;
|
}
|
}
|
}
|
.div-express-log {
|
max-height: 300px;
|
border: solid 1px #e7e7e7;
|
background: #fafafa;
|
overflow-y: auto;
|
overflow-x: auto;
|
}
|
.layui-layer-wrap {
|
dl {
|
border-top: solid 1px #f5f5f5;
|
margin-top: -1px;
|
overflow: hidden;
|
|
dt {
|
font-size: 14px;
|
line-height: 28px;
|
display: inline-block;
|
padding: 8px 1% 8px 0;
|
color: #999;
|
}
|
|
dd {
|
font-size: 14px;
|
line-height: 28px;
|
display: inline-block;
|
padding: 8px 0 8px 8px;
|
border-left: solid 1px #f5f5f5;
|
|
.text-box {
|
line-height: 40px;
|
color: #333;
|
word-break: break-all;
|
}
|
}
|
}
|
}
|
.express-log {
|
/*margin: 5px -10px 5px 5px;*/
|
padding: 10px;
|
list-style-type: none;
|
|
.time {
|
width: 30%;
|
display: inline-block;
|
float: left;
|
}
|
|
.detail {
|
width: 60%;
|
margin-left: 30px;
|
display: inline-block;
|
}
|
|
li {
|
line-height: 30px;
|
}
|
}
|
|
.express-log-name {
|
li {
|
display: flex;
|
span {
|
display: flex;
|
}
|
}
|
}
|
.f14 {
|
font-size: 14px;
|
color: #333;
|
}
|
|
.printgoodtitle {
|
font-size: 14px;
|
line-height: 1.5;
|
margin-top: 15px;
|
color: #333;
|
}
|
|
.printgoodinfo {
|
// font-size: 14px;
|
// background: #f2f2f2;
|
// border-bottom:2px solid #333 ;
|
padding: 10px;
|
overflow: hidden;
|
color: #333;
|
|
.printgooditem {
|
border-bottom: 1px solid #e8eaec;
|
display: flex;
|
align-items: flex-start;
|
overflow: hidden;
|
line-height: 30px;
|
margin-bottom: 10px;
|
padding-bottom: 10px;
|
|
.printgoodname {
|
flex: 1;
|
overflow: hidden;
|
|
.printgoodguid {
|
font-size: 12px;
|
color: #999999;
|
line-height: 1.5;
|
|
.printgoodguiditem {
|
margin-right: 10px;
|
}
|
}
|
}
|
|
.printgoodprice {
|
width: 135px;
|
margin-left: 15px;
|
}
|
|
.printgoodnumber {
|
width: 85px;
|
margin-left: 15px;
|
}
|
}
|
}
|
|
@media print {
|
@page {
|
size: auto;
|
margin: 3mm;
|
}
|
|
html,
|
body {
|
height: inherit;
|
}
|
}
|
</style>
|
