文件
mashangyoujiu/Application/Retail/View/Express/send_goods.html

783 行
38 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!doctype html>
<html>
<!--[1.7.90]-->
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
<link rel="stylesheet" href="/Public/css/component-serial.css?v=1.0.0">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css" />
<title>发货</title>
<style>
[v-cloak] {
display: none;
}
#app {
padding: 20px;
}
.el-input {
width: 400px;
}
.el-form-item {
line-height: 20px;
}
.list {
display: flex;
line-height: 30px;
font-size: 14px;
color: #606266;
}
.list>div:nth-child(1) {
width: 100px;
text-align: right;
margin-right: 12px;
}
.tips {
font-size: 12px;
color: #999;
}
.el-input__inner[readonly] {
border: none;
}
.el-select .el-input__inner[readonly] {
border: 1px solid #dcdfe6;
}
.el-form-item.el-form-item--mini {
margin-bottom: 0;
}
.goods .el-card .el-table td:not(.is-left) .cell,
.goods .el-card .el-table th {
text-align: center;
}
.goods .el-card .el-table .el-button.selected {
color: #67c23a;
}
.logistics {
margin-top: 20px;
}
.logistics .other,
.logistics .express {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="goods">
<el-card>
<div slot="header">
<span>商品信息</span>
</div>
<div>
<el-table :data="goodsList" border style="width: 100%">
<el-table-column label="序号" width="60">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column prop="goods_name" align="left" label="商品名称"></el-table-column>
<el-table-column prop="sku_name" align="left" label="规格"></el-table-column>
<el-table-column prop="num" label="商品数量" width="200"></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button type="text" size="mini"
:class="{selected:scope.row.selectedNum == scope.row.num}"
@click="selectSerial(scope.$index)" v-if="scope.row.serial_number_state == 1">
{{scope.row.selectedNum == scope.row.num ? '已选择(可重选)' : '选择串码'}}
</el-button>
<span v-else>---</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</div>
<div class="logistics">
<el-card>
<div slot="header">
<span>物流信息</span>
</div>
<div class="select-logistics-type">
<el-select v-model="logisticsType" placeholder="请选择物流方式">
<el-option label="门店配送" :value="1"></el-option>
<el-option label="达达配送" :value="2"></el-option>
<el-option label="UU配送" :value="3"></el-option>
<if condition='make eq true'>
<el-option label="码科配送" :value="5"></el-option>
</if>
<el-option label="快递发货" :value="4"></el-option>
<el-option label="麦芽田配送" :value="6"></el-option>
</el-select>
</div>
<!-- 门店配送:是否发布到骑手端 -->
<div class="store-delivery-rider-sync" v-if="logisticsType == 1" style="margin-top: 10px;">
<el-form label-width="120px">
<el-form-item label="发布到骑手端">
<el-switch v-model="syncToRider" active-text="发布" inactive-text="不发布"></el-switch>
<div style="color:#909399;margin-top:6px;">
开启后,此订单会同步到骑手端进行接单与配送管理。
</div>
</el-form-item>
</el-form>
</div>
<div class="express" v-if="logisticsType == 4">
<el-tabs :stretch="true">
<el-tab-pane label="直接填写快递单号">
<template v-if="kd100State">
<el-form label-width="100px">
<el-form-item label="选择物流">
<el-select v-model="direct_express.kd_name" placeholder="请选择物流公司"
v-load-more="getExpress" clearable filterable remote
:remote-method="searchExpress" @change="changeExpress" size="small">
<el-option v-for="(item,index) in expressList" :label="item.kd_name"
:key="item.kd_com" :value="item"></el-option>
</el-select>
</el-form-item>
<el-form-item label="快递单号">
<el-input size="small" v-model="express_no" placeholder="请填写快递单号(或用扫码枪扫描条码)">
</el-input>
</el-form-item>
</el-form>
<el-button style="margin: 20px 0 0 100px" @click="sureSendGoods" type="primary">确认发货
</el-button>
</template>
<div v-else>系统未开启快递100查询物流功能,敬请期待</div>
</el-tab-pane>
<el-tab-pane label="菜鸟电子面单">
<template v-if="cnLogisticsState">
<template v-if="!authorized">门店未授权菜鸟物流云,请先前往“设置->电子面单”进行授权</template>
<template v-else>
<el-divider content-position="left">收货人信息</el-divider>
<div class="list">
<div>姓名</div>
<div>{{bill.receiving_name}}</div>
</div>
<div class="list">
<div>电话</div>
<div>{{bill.receiving_phone}}</div>
</div>
<div class="list">
<div>收货地址</div>
<div>{{bill.receiving_address}}</div>
</div>
</template>
<template v-if="authorized&&default_sender && default_sender.cp_code">
<el-divider content-position="left">发货信息</el-divider>
<p class="tips">如果发货地址发生变动,请前往“设置->电子面单”重新选择地址</p>
<div>
<el-form label-width="120px" :model="default_sender" :rules="rules"
ref="ruleForm">
<el-form-item label="物流公司">
<el-select v-model="sender_express.kd_name" placeholder="请选择物流公司"
v-load-more="getExpress" clearable filterable remote
:remote-method="searchExpress" @change="changeSenderExpress"
size="small">
<el-option v-for="(item,index) in expressList" :label="item.kd_name"
:key="item.kd_com" :value="item"></el-option>
</el-select>
<div>
<span class="tips">该选项是为了查看物流详情,请选择正确的物流公司</span>
</div>
</el-form-item>
<el-form-item label="物流编码" size="mini" prop="cp_code">
<el-input readonly v-model="default_sender.cp_code" size="small">
</el-input>
</el-form-item>
<el-form-item label="网点Code" size="mini" prop="branch_code">
<el-input readonly v-model="default_sender.branch_code" size="small">
</el-input>
</el-form-item>
<el-form-item label="网点名称" size="mini" prop="branch_name">
<el-input readonly v-model="default_sender.branch_name" size="small">
</el-input>
</el-form-item>
<el-form-item label="省名称" size="mini" prop="province">
<el-input readonly v-model="default_sender.province" size="small">
</el-input>
</el-form-item>
<el-form-item label="市名称" size="mini" prop="city">
<el-input readonly v-model="default_sender.city" size="small">
</el-input>
</el-form-item>
<el-form-item label="区名称" size="mini" prop="district">
<el-input readonly v-model="default_sender.district" size="small">
</el-input>
</el-form-item>
<el-form-item label="街道\镇名称" size="mini" prop="town">
<el-input readonly v-model="default_sender.town" size="small">
</el-input>
</el-form-item>
<el-form-item label="详细地址" size="mini" prop="detail">
<el-input readonly v-model="default_sender.detail" size="small">
</el-input>
</el-form-item>
<el-form-item label="面单模板地址" size="mini" prop="template_url">
<el-input readonly v-model="default_sender.template_url" size="small">
</el-input>
</el-form-item>
<el-form-item label="面单模板类型" size="mini" prop="template_type">
<el-input readonly v-model="default_sender.template_type" size="small">
</el-input>
</el-form-item>
<el-form-item label="发货人姓名" prop="name">
<el-input v-model="default_sender.name" size="small"></el-input>
</el-form-item>
<el-form-item label="发货人手机" prop="mobile">
<el-input v-model="default_sender.mobile" size="small"></el-input>
</el-form-item>
<el-form-item label="固定电话" prop="phone">
<el-input v-model="default_sender.phone" size="small"></el-input>
</el-form-item>
<el-form-item label="物品名称" prop="goods_name">
<el-input v-model="default_sender.goods_name" size="small"></el-input>
</el-form-item>
<el-form-item label="物品数量" prop="goods_count">
<el-input v-model="default_sender.goods_count" size="small"></el-input>
</el-form-item>
<el-form-item label="物品重量(g)" prop="goods_weight">
<el-input v-model="default_sender.goods_weight"
oninput="value=this.value.replace(/^[0]|\D/,'')" size="small">
</el-input>
</el-form-item>
<el-form-item label="物品体积(ml)" prop="goods_volume">
<el-input v-model="default_sender.goods_volume"
oninput="value=this.value.replace(/^[0]|\D/,'')" size="small">
</el-input>
</el-form-item>
</el-form>
<div style="margin-left: 100px">
<div style="margin-top: 10px">
<el-button @click="getExpressCode('ruleForm')" type="primary">电子面单取号
</el-button>
</div>
</div>
</div>
</template>
<template v-else>门店未设置发货信息,请先前往“设置->电子面单”进行设置</template>
</template>
<div v-else>系统未开启菜鸟电子面单功能,敬请期待</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="other" v-else>
<el-button @click="sureSendGoods" type="primary">确认发货</el-button>
</div>
</el-card>
</div>
<component-serial :visible.sync="serialVisible" dialog-type="multiple" :parent-index="serialGoodsIndex"
:parent-data="serialGoodsData" :max-selected="serialMaxSelected" data-process-method="increase"
get-data-type="storeAllowSalesSerial" @serial-change="serialChange">
</component-serial>
</div>
</body>
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/js/common.js"></script>
<script src="/Public/js/component-serial.js?v=1.0.0"></script>
<script>
var app = new Vue({
el: '#app',
data: {
authorized: {$authorized},
cnLogisticsState: {$cnLogisticsState},
kd100State: {$kd100State},
express_no: '',//直接填写快递单号
expressList: [],//快递公司列表
express_page: 0,//快递列表分页
canLoad: true,//是否可以加载
direct_express: {},//直接填写的物流公司
express_keyword: '',//快递公司搜索关键词
bill: {$bill},//bill订单表
default_sender: {$default_sender},//默认发货信息
sender_express: {},//发货快递
goodsList: [], //商品列表
logisticsType: 1, //选择的物流类型
syncToRider: false, //门店配送是否发布到骑手端
confirmBeforeDelivery: false, //发货前是否确认
rules: {
name: [{message: '请输入发货人姓名', required: true, trigger: 'blur'}, {
min: 2,
max: 20,
message: '姓名长度 2 到 20',
}],
mobile: [{message: '请输入发货人手机号', required: false, trigger: 'blur'}, {
validator: function (rule, value, callback) {
if (value && !/^[1]{1}[3|5|6|7|8|9]{1}\d{9}$/.test(value)) {
callback(new Error("请输入正确的手机号"));
} else {
callback();
}
}, trigger: 'blur'
}],
phone: [{message: '请输入发货人固定电话', required: false, trigger: 'blur'}, {
validator: function (rule, value, callback) {
if (value && !/^0\d{2,3}-?\d{7,8}$/.test(value) && !/^[1]{1}[3|5|6|7|8|9]{1}\d{9}$/.test(value)) {
callback(new Error("请输入正确的固定电话"));
} else {
callback();
}
}, trigger: 'blur'
}],
goods_name: [{message: '请输入物品名称', required: true, trigger: 'blur'}, {
min: 2,
max: 20,
message: '长度 2 到 20',
}],
goods_count: [{message: '请输入物品数量', required: true, trigger: 'blur'}, {
min: 1,
max: 5,
message: '长度 2 到 20',
}],
goods_weight: [{message: '请输入物品重量', required: true, trigger: 'blur'}],
goods_volume: [{message: '请输入物品体积', required: true, trigger: 'blur'}],
},
serialVisible: false, //串号录入窗口开关
serialGoodsIndex: 0, //串号录入当前商品索引
serialGoodsData: {}, //串号录入当前商品数据对象
serialMaxSelected: 0 //串号最多选择上限
},
methods: {
//直接填写单号选择快递公司
changeExpress: function (item) {
console.log(item);
this.direct_express = JSON.parse(JSON.stringify(item));
},
//电子面单选择快递公司
changeSenderExpress: function (item) {
console.log(item);
this.sender_express = JSON.parse(JSON.stringify(item));
},
//确认直接填写订单号发货
async sureSendGoods() {
if (!this.confirmBeforeDelivery && !await this._confirmDistributionGoods()) {
return false
}
const logisticsType = this.logisticsType
const orderNo = this.bill.order_no
const orderId = this.bill.id
if (!logisticsType) {
this.$message({
type: "error",
message: "请选择配送方式",
duration: 1000
})
return false
}
if (!orderNo) {
this.$message({
type: "error",
message: "订单号缺失请刷新重试",
duration: 1000
})
return false
}
if (logisticsType == 4 && !orderId) {
this.$message({
type: "error",
message: "订单ID缺失请刷新重试",
duration: 1000
})
return false
}
switch (logisticsType) {
case 1:
case 2:
case 6:
this._deliveryCommon(logisticsType, orderNo)
break
case 3:
this._deliveryUU(logisticsType, orderNo)
break
case 4:
this._deliveryExpress()
break
case 5:
this._deliveryMake(logisticsType, orderNo)
break
}
},
//订单发货前的商品确认(验证)
async _confirmDistributionGoods() {
return new Promise((resolve, reject) => {
for (const goods of this.goodsList) {
if (goods.serial_number_state == 1) {
if (!goods.serial_list || goods.selectedNum != goods.num) {
this.$message.error(`请正确选择【${goods.goods_name}】的串号!`)
resolve(false)
return
}
}
}
this.sendRequest('Retail/Express/confirmDistributionGoods', {
data: {
goods_list: JSON.stringify(this.goodsList)
},
success: (response) => {
if (response.status == 1) {
this.confirmBeforeDelivery = true
resolve(true)
return
} else {
this.$message.error(response.message)
resolve(false)
return
}
}
})
})
},
//发起配送 (1,2直接调用,3,5处理自身逻辑后调用,4自有配送请求)
_deliveryCommon(delivery_type, refund_order_no, total_price = null) {
var that = this;
const loading_delivery = that.$loading({
target: "#loading_delivery",
lock: true,
text: '保存中,请等待',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
// 组合请求参数
let payload = {delivery_type: delivery_type, order_no: refund_order_no, total_price: total_price};
if (delivery_type === 1) {
payload.sync_to_rider = that.syncToRider ? 1 : 0;
}
$.ajax({
url: "{:U('Customer/delivery_agree')}",
type: "post",
data: payload,
success: function (res) {
if (res.status == 1) {
that.$message({
type: "success",
message: res.msg,
duration: 1000,
onClose: function () {
loading_delivery.close();
const index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
})
} else {
that.$message({
type: "error",
message: res.msg,
duration: 1000,
onClose: function () {
loading_delivery.close();
}
})
}
}
})
},
//配送方式(3) - UU配送
_deliveryUU(delivery_type, refund_order_no) {
const that = this
$.ajax({
url: "{:U('Customer/getUuDeliveryPrice')}",
type: "post",
data: {order_no: refund_order_no},
success: function (res) {
if (res.status == 1) {
that.$confirm(res.msg + '是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that._deliveryCommon(delivery_type, refund_order_no);
}).catch(() => {
that.$message({
type: 'info',
message: '已取消配送'
});
});
} else {
that.$message({
type: "error",
message: res.msg,
duration: 1000,
})
}
}
})
},
//配送方式(4) - 快递配送
_deliveryExpress() {
var that = this;
if (!this.direct_express.kd_com) {
that.$message({message: '请选择物流公司', type: 'warning'});
return;
}
if (!this.express_no) {
that.$message({message: '请填写物流单号', type: 'warning'});
return;
}
this.$confirm('您确认填写信息无误吗?确认发货之后用户将会在商城查看该物流信息!', '提示', {
confirmButtonText: '确认发货',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
that.$loading({
lock: true,
text: '发货中,请等待',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
sendRequest({
url: "{:U('directSetOrderNo')}",
data: {
bill_id: that.bill.id,
express_no: that.express_no,
express_name: that.direct_express.kd_name,
express_code: that.direct_express.kd_com,
},
success: function (res) {
if (res.status == 1) {
that.$message({
message: res.msg, type: 'success', duration: 1000, onClose: function () {
that.$loading().close();
const index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
});
} else {
that.$loading().close();
that.$message({message: res.msg, type: 'error'});
}
}
})
}).catch(() => {
});
},
//配送方式(5) - 码科配送
_deliveryMake(delivery_type, refund_order_no) {
const that = this
$.ajax({
url: "{:U('Customer/getMakeDeliveryPrice')}",
type: "post",
data: {order_no: refund_order_no},
success: function (res) {
if (res.status == 1) {
that.$confirm(res.Tips + '是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
that._deliveryCommon(delivery_type, refund_order_no, res.data.total_price);
}).catch(() => {
that.$message({
type: 'info',
message: '已取消配送'
});
});
} else {
that.$message({
type: "error",
message: res.msg,
duration: 1000,
})
}
}
})
},
//搜索快递公司
searchExpress: function (value) {
this.express_page = 0;
this.express_keyword = value;
this.canLoad = true;
this.getExpress();
},
// 获取快递公司列表
getExpress: function () {
if (!this.canLoad) {
return;
}
this.canLoad = false;
var that = this;
var page = this.express_page + 1;
sendRequest({
url: "{:U('getExpress')}",
data: {
page: page,
keyword: that.express_keyword,
},
success: function (res) {
if (res.status == 1) {
if (page != 1) {
that.expressList.push.apply(that.expressList, res.data);
} else {
that.expressList = res.data;
}
that.express_page = page;
that.$nextTick(function () {
if (res.data.length) {
that.canLoad = true;
}
})
}
}
})
},
//电子面单取号
getExpressCode: function (ruleForm) {
var that = this;
this.$refs[ruleForm].validate((valid) => {
if (valid) {
if (!that.sender_express.kd_com) {
that.$message({message: '请选择物流公司', type: 'warning'});
return;
}
if (!that.default_sender.mobile && !that.default_sender.phone) {
that.$message({message: '发货人手机号和固定电话不能同时为空', type: 'warning'});
return;
}
this.$confirm('您确认填写信息无误吗?确认发货之后将会前往菜鸟物流云下单取号!', '提示', {
confirmButtonText: '确认下单',
cancelButtonText: '取消',
type: 'info'
}).then(() => {
that.$loading({
lock: true,
text: '电子面单取号中,请等待',
spinner: 'el-icon-loading',
background: 'rgba(255, 255, 255, 0.7)'
});
// console.log(that.default_sender);
sendRequest({
url: "{:U('getExpressCode')}",
data: {
mobile: that.default_sender.mobile,
phone: that.default_sender.phone,
name: that.default_sender.name,
goods_name: that.default_sender.goods_name,
goods_count: that.default_sender.goods_count,
goods_weight: that.default_sender.goods_weight,
goods_volume: that.default_sender.goods_volume,
bill_id: that.bill.id,
cp_code: that.default_sender.cp_code,
express_code: that.sender_express.kd_com,
express_name: that.sender_express.kd_name,
},
success: function (res) {
if (res.status == 1) {
that.$message({
message: res.msg, type: 'success', onClose: function () {
that.$loading().close();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
}
});
} else {
that.$loading().close();
that.$message({message: res.msg, type: 'error'});
}
}
});
}).catch(() => {
})
}
});
},
//获取商品信息
getGoodsList() {
this.sendRequest('Retail/Express/orderInfo', {
data: {
order_id: this.bill.id
},
success: (response) => {
if (response.status == 1) {
this.goodsList = response.data
} else {
this.$message.error(response.message)
}
}
})
},
/**
* @description: 打开串号选择窗口
* @param {Number} index: 当前商品索引
*/
selectSerial(index) {
this.serialVisible = true
this.serialGoodsIndex = index
this.serialGoodsData = this.goodsList[index]
this.serialMaxSelected = this.goodsList[index].num
},
/**
* @description: 串号子组件通道
* @param {Array} datas: 串号数据
* @param {Number} goodsIndex: 当前采购的商品索引
*/
serialChange(datas, goodsIndex) {
this.confirmBeforeDelivery = false
const serialList = []
datas.forEach(data => {
serialList.push({
id: data.id,
main_serial_number: data.mainSerial,
auxiliary_serial_number_one: data.assistSerial1,
auxiliary_serial_number_two: data.assistSerial2
})
})
this.goodsList[goodsIndex].serial_list = serialList
this.$set(this.goodsList[goodsIndex], 'selectedNum', serialList.length)
}
},
created: function () {
this.getExpress()
this.getGoodsList()
},
watch: {
expressList: {
deep: true, handler: function (n) {
console.log(n);
}
}
}
});
function sendRequest(options) {
$.ajax({
url: options.url,
data: options.data,
type: 'post',
success: function (res) {
options.success(res);
},
error: function () {
var res = {
status: 0,
msg: '请求发生错误',
};
options.success(res);
}
})
}
</script>
</html>