zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ✨ 集成顺丰平台，发货，查询物流，打印面单

master
chc 2023-03-06 18:00:11 +08:00
parent 4fd419fcfe
commit f7a9bff2ba
5 changed files with 437 additions and 415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
manager/src/views/sys/setting-manage/setting/LOGISTICS_SETTING.vue
View File

@ -5,6 +5,7 @@
<RadioGroup v-model="formValidate.type" type="button">
<Radio label="KDNIAO">快递鸟</Radio>
<Radio label="KUAIDI100">快递100</Radio>
<Radio label="SHUNFENG">顺丰</Radio>
</RadioGroup>
</FormItem>
<FormItem v-if="formValidate.type === 'KDNIAO'" label="快递鸟 商户ID" prop="kdniaoEbusinessID">
@ -20,6 +21,24 @@
<FormItem v-if="formValidate.type === 'KUAIDI100'" label="快递100 Key" prop="kuaidi100Key">
<Input class="label-appkey" v-model="formValidate.kuaidi100Key" />
</FormItem>
<div v-if="formValidate.type === 'SHUNFENG'">
<FormItem label="顾客编码" prop="clientCode">
<Input v-model="formValidate.clientCode" />
</FormItem>
<FormItem label="校验码" prop="checkWord">
<Input v-model="formValidate.checkWord" />
</FormItem>
<FormItem label="请求地址" prop="callUrl">
<Input class="label-appkey" v-model="formValidate.callUrl" />
</FormItem>
<FormItem label="打印模板" prop="templateCode">
<Input class="label-appkey" v-model="formValidate.templateCode" />
</FormItem>
<FormItem label="月结号" prop="monthlyCardNo">
<Input class="label-appkey" v-model="formValidate.monthlyCardNo" />
</FormItem>
</div>
<div class="label-btns">
<Button type="primary" @click="submit('formValidate')">保存</Button>
</div>
@ -38,7 +57,8 @@ export default {
kdniaoEbusinessID: "",
kdniaoAppKey: "",
kuaidi100Customer: "",
kuaidi100Key: "" ,},
kuaidi100Key: "",
},
};
},
props: ["res", 'type'],
@ -83,15 +103,17 @@ export default {
<style lang="scss" scoped>
@import "./style.scss";
.label-item {
display: flex;
}
/deep/ .ivu-input {
width: 300px !important;
margin: 0 10px;
}
.ivu-input-wrapper {
width: 300px;
margin-right: 10px;
}
</style>
}</style>

10
seller/src/api/logistics.js
View File

@ -4,6 +4,7 @@ import {
postRequest,
putRequest,
deleteRequest,
getRequestHasHeader,
importRequest,
getRequestWithNoToken
} from "@/libs/axios";
@ -35,4 +36,13 @@ export const getCheckedOn = params =>{
return getRequest(`/other/logistics/getCheckedFaceSheet`,params);
}
//获取物流设置
export const getLogisticsSetting = () =>{
return getRequest(`/other/logistics/setting`);
}
export const getShunFengFaceSheet = (url,headers) =>{
return getRequestHasHeader(`${url}`,null,headers);
}

5
seller/src/api/order.js
View File

@ -81,6 +81,11 @@ export const orderDelivery = (sn, params) => {
return postRequest(`/order/order/${sn}/delivery`, params);
};
// 订单发货
export const orderShunFengDelivery = (sn) => {
return postRequest(`/order/order/${sn}/shunfeng/delivery`);
};
// 获取商家选中的物流公司
export const getLogisticsChecked = () => {
return getRequest(`/other/logistics/getChecked`);

32
seller/src/libs/axios.js
View File

@ -188,6 +188,38 @@ export const getRequest = (url, params, resBlob) => {
return service(data);
};
export const getRequestHasHeader = (url, params, headers) => {
let accessToken = getStore("accessToken");
let data = {
method: "get",
url: `${url}`,
params: params,
transformRequest: headers
? undefined
: [
function(data) {
let ret = "";
for (let it in data) {
ret +=
encodeURIComponent(it) +
"=" +
encodeURIComponent(data[it]) +
"&";
}
ret = ret.substring(0, ret.length - 1);
return ret;
}
],
headers: {
"Content-Type": "application/x-www-form-urlencoded",
accessToken: accessToken,
...headers
},
responseType: "blob"
};
return service(data);
};
export const postRequest = (url, params, headers) => {
let accessToken = getStore("accessToken");
return service({

317
seller/src/views/order/order/orderDetail.vue
View File

@ -2,33 +2,18 @@
<div class="search">
<Card style="height: 60px">
<div>
<Button
v-if="allowOperation.editPrice"
@click="modifyPrice"
type="primary"
>调整价格</Button
>
<Button
v-if="allowOperation.editConsignee"
@click="editAddress"
type="primary"
>修改收货地址</Button
>
<Button
v-if="allowOperation.showLogistics"
@click="logistics"
type="primary"
>查看物流</Button
>
<Button v-if="allowOperation.editPrice" @click="modifyPrice" type="primary">调整价格</Button>
<Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary">修改收货地址</Button>
<Button v-if="allowOperation.showLogistics" @click="logistics" type="primary">查看物流</Button>
<Button @click="orderLogModal = true" type="primary">订单日志</Button>
<Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button>
<Button v-if="allowOperation.take" @click="orderTake" type="primary"
>订单核销</Button
>
<Button v-if="allowOperation.ship" @click="orderDeliver" type="primary"
>发货</Button
>
<Button @click="Toprint" type="primary" ghost v-if="allowOperation.ship">打印电子面单</Button>
<Button v-if="allowOperation.take" @click="orderTake" type="primary">订单核销</Button>
<Button v-if="allowOperation.ship" @click="orderDeliver" type="primary">发货</Button>
<Button @click="sfPrint" type="primary" ghost
v-if="allowOperation.showLogistics && logisticsType == 'SHUNFENG'">下载面单</Button>
<Button @click="Toprint" type="primary" ghost
v-if="allowOperation.ship && logisticsType != 'SHUNFENG'">打印电子面单</Button>
</div>
</Card>
@ -99,8 +84,7 @@
<div class="div-item">
<div class="div-item-left">发票金额：</div>
<div class="div-item-right">
<span v-if="orderInfo.receipt.receiptPrice">￥</span
>{{
<span v-if="orderInfo.receipt.receiptPrice">￥</span>{{
orderInfo.receipt.receiptPrice
? orderInfo.receipt.receiptPrice
: "暂无" | unitPrice
@ -160,21 +144,12 @@
</Card>
<Card class="mt_10">
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
>
<Table :loading="loading" border :columns="columns" :data="data" ref="table">
<!-- 商品栏目格式化 -->
<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"
/>
<img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" />
</div>
<div style="margin-left: 13px">
@ -184,35 +159,16 @@
}}</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"
>
<span v-show="key != 'images'" style="font-size: 12px; color: #999999">
{{ key }} : {{ item }}
</span>
</span>
<Poptip
trigger="hover"
style="display: block"
title="扫码在手机中查看"
transfer
>
<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>
<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=""
/>
<img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" />
</Poptip>
</div>
</div>
@ -235,10 +191,12 @@
<span class="label">优惠券金额：</span>
<span class="txt"> {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice('￥') }} </span>
</li>
<li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
<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"/>
<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>
@ -287,9 +245,7 @@
</li>
<li>
<span class="label">应付金额：</span>
<span class="txt flowPrice"
>¥{{ orderInfo.order.flowPrice | unitPrice }}</span
>
<span class="txt flowPrice">¥{{ orderInfo.order.flowPrice | unitPrice }}</span>
<!-- <template v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">
<Space style="height:20px;float: right;text-align: center;margin-left:30px;margin-right:53px;">
<Button type="primary" ghost size="small" @click="getOrderPrice()">优惠详情</Button>
@ -305,22 +261,12 @@
<span>修改金额</span>
</p>
<div>
<Form
ref="modifyPriceForm"
:model="modifyPriceForm"
label-position="left"
:label-width="100"
:rules="modifyPriceValidate"
>
<Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="100"
:rules="modifyPriceValidate">
<FormItem label="订单金额" prop="orderPrice">
<InputNumber
style="width: 100%"
v-model="modifyPriceForm.orderPrice"
size="large"
:min="0.01"
:max="99999"
><span slot="append">元</span></InputNumber
>
<InputNumber style="width: 100%" v-model="modifyPriceForm.orderPrice" size="large" :min="0.01" :max="99999">
<span slot="append">元</span>
</InputNumber>
</FormItem>
</Form>
</div>
@ -336,55 +282,22 @@
<span>修改收件信息</span>
</p>
<div>
<Form
ref="addressForm"
:model="addressForm"
label-position="left"
:label-width="100"
:rules="addressRule"
>
<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>
<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>
<Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input>
</FormItem>
<FormItem label="地址信息" prop="consigneeAddressPath">
<Input
v-model="addressForm.consigneeAddressPath"
disabled
style="width: 325px"
v-if="showRegion == false"
/>
<Button
v-if="showRegion == false"
size="small"
@click="regionClick"
:loading="submitLoading"
type="primary"
style="margin-left: 8px"
>修改
<Input v-model="addressForm.consigneeAddressPath" disabled style="width: 325px" v-if="showRegion == false" />
<Button v-if="showRegion == false" size="small" @click="regionClick" :loading="submitLoading" type="primary"
style="margin-left: 8px">修改
</Button>
<region
style="width: 400px"
@selected="selectedRegion"
v-if="showRegion == true"
/>
<region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" />
</FormItem>
<FormItem label="详细地址" prop="consigneeDetail">
<Input
v-model="addressForm.consigneeDetail"
size="large"
maxlength="11"
></Input>
<Input v-model="addressForm.consigneeDetail" size="large" maxlength="11"></Input>
</FormItem>
</Form>
</div>
@ -400,19 +313,10 @@
<span>订单核销</span>
</p>
<div>
<Form
ref="orderTakeForm"
:model="orderTakeForm"
label-position="left"
:label-width="100"
:rules="orderTakeValidate"
>
<Form ref="orderTakeForm" :model="orderTakeForm" label-position="left" :label-width="100"
:rules="orderTakeValidate">
<FormItem label="核销码" prop="qrCode">
<Input
v-model="orderTakeForm.qrCode"
size="large"
maxlength="10"
></Input>
<Input v-model="orderTakeForm.qrCode" size="large" maxlength="10"></Input>
</FormItem>
</Form>
</div>
@ -427,13 +331,7 @@
<span>订单日志</span>
</p>
<div class="order-log-div">
<Table
:loading="loading"
border
:columns="orderLogColumns"
:data="orderLogData"
ref="table"
></Table>
<Table :loading="loading" border :columns="orderLogColumns" :data="orderLogData" ref="table"></Table>
</div>
<div slot="footer" style="text-align: right">
@ -469,8 +367,8 @@
<div class="div-express-log">
<ul class="express-log">
<li v-for="(item, index) in logisticsInfo.traces" :key="index">
<span class="time">{{ item.AcceptTime }}</span>
<span class="detail">{{ item.AcceptStation }}</span>
<span class="time">{{ item.AcceptTime || item.acceptTime }}</span>
<span class="detail">{{ item.AcceptStation || item.remark }}</span>
</li>
</ul>
</div>
@ -488,49 +386,23 @@
<div>
<Form :model="faceSheetForm" ref="faceSheetForm" v-if="facesheetFlag" :rules="faceSheetFormValidate">
<FormItem label="物流公司" prop="logisticsId" style="position: relative" :label-width="90">
<Select
v-model="faceSheetForm.logisticsId"
placeholder="请选择"
style="width: 250px"
>
<Option
v-for="(item, i) in checkedLogistics"
:key="i"
:value="item.logisticsId"
>{{ item.name }}
<Select v-model="faceSheetForm.logisticsId" placeholder="请选择" style="width: 250px">
<Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
</Option>
</Select>
</FormItem>
</Form>
<Form
v-else
ref="orderDeliveryForm"
:model="orderDeliveryForm"
:label-width="90"
:rules="orderDeliverFormValidate"
style="position: relative"
>
<Form v-else ref="orderDeliveryForm" :model="orderDeliveryForm" :label-width="90"
:rules="orderDeliverFormValidate" style="position: relative">
<FormItem label="物流公司" prop="logisticsId">
<Select
v-model="orderDeliveryForm.logisticsId"
placeholder="请选择"
style="width: 250px"
>
<Option
v-for="(item, i) in checkedLogistics"
:key="i"
:value="item.logisticsId"
>{{ item.name }}
<Select v-model="orderDeliveryForm.logisticsId" placeholder="请选择" style="width: 250px">
<Option v-for="(item, i) in checkedLogistics" :key="i" :value="item.logisticsId">{{ item.name }}
</Option>
</Select>
</FormItem>
<!-- v-if="showOrder" -->
<FormItem label="物流单号" prop="logisticsNo">
<Input
v-model="orderDeliveryForm.logisticsNo"
style="width: 250px"
/>
<Input v-model="orderDeliveryForm.logisticsNo" style="width: 250px" />
</FormItem>
</Form>
</div>
@ -544,7 +416,9 @@
<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>
<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">
@ -558,13 +432,15 @@
<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-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>
<p class="lineH30 f14">收货地址：{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}
</p>
</Col>
</Row>
<Row>
@ -624,6 +500,7 @@ export default {
submitLoading: false, // 添加或编辑提交状态
region: [], //地区
regionId: [], //地区id
logisticsType: 'KUAIDINIAO', //物流类型
showRegion: false,
someJSONdata: '',
faceSheetForm: {
@ -937,12 +814,60 @@ export default {
//订单发货
orderDeliver() {
this.facesheetFlag = false
if (this.logisticsType == 'SHUNFENG') {
this.$Modal.confirm({
title: "确认发货",
content: "您确认使用顺丰发货 " + this.sn + " 订单?",
loading: true,
onOk: () => {
API_Order.orderShunFengDelivery(this.sn).then((res) => {
if (res.success) {
this.$Modal.remove();
this.$Message.success("订单发货成功");
this.getDataDetail()
}
})
}
})
} else {
API_Order.getLogisticsChecked().then((res) => {
if (res.success) {
this.checkedLogistics = res.result;
this.orderDeliverModal = true;
}
});
}
},
//顺丰打印面单
sfPrint() {
API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
if (res.success) {
let headers = {
'X-Auth-token': res.result.token
}
API_Logistics.getShunFengFaceSheet(res.result.url, headers).then(res => {
const blob = new Blob([res], {
type: "application/pdf;charset=utf-8",
});
console.log("出发blob");
//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ("download" in document.createElement("a")) {
//支持a标签download的浏览器
const link = document.createElement("a"); //创建a标签
link.download = this.orderInfo.order.sn + ".pdf"; //a标签添加属性
link.style.display = "none";
link.href = URL.createObjectURL(blob);
document.body.appendChild(link);
link.click(); //执行下载
URL.revokeObjectURL(link.href); //释放url
document.body.removeChild(link); //释放标签
} else {
navigator.msSaveBlob(blob, fileName);
}
})
}
})
},
Toprints() {
if (this.form.logisticsId != null && this.form.logisticsId != '') {
@ -956,7 +881,7 @@ export default {
if (valid) {
API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => {
if (res.success) {
this.someJSONdata = res.result;
this.someJSONdata = res.result.printTemplate;
this.Toprints();
}
})
@ -1014,10 +939,20 @@ export default {
}
});
},
getLogisticsSetting() {
API_Logistics.getLogisticsSetting().then(res => {
if (res.success) {
this.logisticsType = res.result;
}
})
},
},
mounted() {
this.sn = this.$route.query.sn;
this.getDataDetail();
this.getLogisticsSetting();
},
// 如果是从详情页返回列表页，修改列表页keepAlive为true，确保不刷新页面
beforeRouteLeave(to, from, next) {
@ -1034,6 +969,7 @@ export default {
.lineH30 {
line-height: 30px;
}
.order-log-div {
line-height: 30px;
height: 500px;
@ -1044,6 +980,7 @@ dl dt {
width: 100px;
text-align: right;
}
.div-express-log {
max-height: 300px;
border: solid 1px #e7e7e7;
@ -1057,16 +994,19 @@ dl dt {
margin: 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;
}
@ -1159,19 +1099,23 @@ dl dt {
}
}
}
.theme_color {
color: $theme_color;
}
.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;
@ -1179,6 +1123,7 @@ dl dt {
padding: 10px;
overflow: hidden;
color: #333;
.printgooditem {
border-bottom: 1px solid #e8eaec;
display: flex;
@ -1187,34 +1132,42 @@ dl dt {
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{
html,
body {
height: inherit;
}
}