572 行
27 KiB
HTML
可执行文件
572 行
27 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
#expressApp > div {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
#expressApp .cell {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#expressApp .el-col {
|
|
margin: 10px;
|
|
width: 350px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#expressApp .el-divider__text {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.template-list {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin: 5px 30px;
|
|
}
|
|
|
|
.template-list > span:nth-child(1) {
|
|
display: block;
|
|
color: #666;
|
|
width: 100px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.template-list > span:nth-child(2) {
|
|
color: #333;
|
|
display: block;
|
|
flex: 1;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
#defaultInfo input[readonly], #defaultInfo textarea[readonly] {
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.template-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.auth-con-list {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 4px;
|
|
margin: 50px 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.auth-con-list > span {
|
|
margin-bottom: 10px;
|
|
}
|
|
</style>
|
|
<div id="expressApp">
|
|
<div v-if="!authorized" class="template-box">
|
|
<div class="auth-con-list" @click="toAuth">
|
|
<span>该功能需要菜鸟商户授权本系统的菜鸟物流云服务商，请您进行授权</span>
|
|
<el-button size="small" type="primary">点击发起授权</el-button>
|
|
</div>
|
|
<div class="auth-con-list" @click="setToken">
|
|
<span>已经授权过？</span>
|
|
<el-button size="small">直接填写token</el-button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="template-box">
|
|
<el-button size="small" type="text" @click="toAuth">重新授权</el-button>
|
|
<el-button size="small" type="text" @click="setToken">重新填写token</el-button>
|
|
</div>
|
|
|
|
<!--已授权给菜鸟物流云-->
|
|
<template v-if="authorized">
|
|
<div>
|
|
<el-input size="small" v-model="cp_code" style="width: 190px" placeholder="请输入指定的物流公司编码"></el-input>
|
|
<el-button size="small" @click="getMerInfo">查询发货地址</el-button>
|
|
<el-link type="primary" target="_blank"
|
|
href="https://open.taobao.com/doc.htm?spm=a219a.7386797.0.0.5bbb669adqOV1U&source=search&docId=105085&docType=1">
|
|
请参考菜鸟物流编码
|
|
</el-link>
|
|
<el-divider content-position="left">发货地址列表</el-divider>
|
|
<el-table :data="merInfoList" border align="center" header-align="center" :span-method="arraySpanMethod">
|
|
<el-table-column prop="cpCode" label="物流编码"></el-table-column>
|
|
<el-table-column prop="cpType" label="类型"></el-table-column>
|
|
|
|
<el-table-column prop="allocatedQuantity" label="已用面单数量"></el-table-column>
|
|
<el-table-column prop="branchCode" label="网点Code"></el-table-column>
|
|
<el-table-column prop="branchName" label="网点名称"></el-table-column>
|
|
<el-table-column prop="cancelQuantity" label="取消的面单总数"></el-table-column>
|
|
<el-table-column prop="printQuantity" label="已经打印的面单总数"></el-table-column>
|
|
<el-table-column prop="quantity" label="电子面单余额数量"></el-table-column>
|
|
|
|
<el-table-column prop="province" label="省名称"></el-table-column>
|
|
<el-table-column prop="city" label="市名称"></el-table-column>
|
|
<el-table-column prop="district" label="区名称"></el-table-column>
|
|
<el-table-column prop="town" label="街道\镇名称"></el-table-column>
|
|
<el-table-column prop="detail" label="详细地址" min-width="150px"></el-table-column>
|
|
|
|
<el-table-column fixed="right" label="操作" width="80px">
|
|
<template slot-scope="scope">
|
|
<el-button v-if="choose_address_index==scope.$index" type="success" circle size="small">已选
|
|
</el-button>
|
|
<el-button v-else @click.native.prevent="chooseAddress(scope.row,scope.$index)" circle
|
|
size="small">
|
|
选择
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div>
|
|
<el-divider v-if="templateList.length" content-position="left">{{defaultInfo.cp_code}}云打印标准面单</el-divider>
|
|
<el-row>
|
|
<el-col v-for="(item,index) in templateList" :key="index" :span="8" :offset="2">
|
|
<el-card :body-style="{ padding: '20px 0px' }">
|
|
<div class="template-list">
|
|
<span>名称</span>
|
|
<span>{{item.standardTemplateName}}</span>
|
|
</div>
|
|
<div class="template-list">
|
|
<span>类型</span>
|
|
<span v-if="item.standardWaybillType==1">快递标准面单</span>
|
|
<span v-if="item.standardWaybillType==2">快递三联面单</span>
|
|
<span v-if="item.standardWaybillType==3">快递便携式三联单</span>
|
|
<span v-if="item.standardWaybillType==4">快运标准面单</span>
|
|
<span v-if="item.standardWaybillType==5">快运三联面单</span>
|
|
<span v-if="item.standardWaybillType==6">快递一联单</span>
|
|
<span v-if="item.standardWaybillType==7">蓝牙版标准模板</span>
|
|
<span v-if="item.standardWaybillType==8">蓝牙版标准一联模板</span>
|
|
</div>
|
|
<!--1 快递标准面单 ,2 快递三联面单, 3 快递便携式三联单, 4 快运标准面单, 5 快运三联面单, 6 快递一联单, 7 蓝牙版标准模板 ，8蓝牙版标准一联模板-->
|
|
<div class="template-list">
|
|
<span>模板url</span>
|
|
<span>{{item.standardTemplateUrl}}</span>
|
|
</div>
|
|
<div class="template-list">
|
|
<el-button v-if="choose_temp_index==index" type="success" circle size="small">已选</el-button>
|
|
<el-button v-else @click="chooseTemplate(item,index)" circle size="small">选择</el-button>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
<el-divider content-position="left">默认发货信息</el-divider>
|
|
<div>
|
|
<el-form label-width="120px" id="defaultInfo" :model="defaultInfo" :rules="rules" ref="ruleForm" size="mini">
|
|
<el-form-item label="物流编码" prop="cp_code">
|
|
<el-input readonly v-model="defaultInfo.cp_code" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网点Code" prop="branch_code">
|
|
<el-input readonly v-model="defaultInfo.branch_code" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="网点名称" prop="branch_name">
|
|
<el-input readonly v-model="defaultInfo.branch_name" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="省名称" prop="province">
|
|
<el-input readonly v-model="defaultInfo.province" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="市名称" prop="city">
|
|
<el-input readonly v-model="defaultInfo.city" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="区名称" prop="district">
|
|
<el-input readonly v-model="defaultInfo.district" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="街道\镇名称" prop="town">
|
|
<el-input readonly v-model="defaultInfo.town" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="详细地址" prop="detail">
|
|
<el-input readonly v-model="defaultInfo.detail" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="面单模板地址" prop="template_url">
|
|
<el-input readonly v-model="defaultInfo.template_url" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="面单模板类型" prop="template_type">
|
|
<el-input readonly v-model="defaultInfo.template_type" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="发货人姓名" prop="name">
|
|
<el-input v-model="defaultInfo.name" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="发货人手机" prop="mobile">
|
|
<el-input v-model="defaultInfo.mobile" size="small"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="固定电话" prop="phone">
|
|
<el-input v-model="defaultInfo.phone" size="small"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div style="margin: 10px 120px">
|
|
<el-button v-if="!isSave" size="small" type="primary" @click="saveDefault('ruleForm')">保存默认发货信息
|
|
</el-button>
|
|
<el-button v-else size="small" disabled type="primary" icon="el-icon-loading">保存默认发货信息</el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<el-dialog title="菜鸟物流云扫码授权" :modal-append-to-body="false" :visible.sync="showAuthCode" :width="'600px'" :close-on-click-modal="false">
|
|
<div class="menu-index-code-big-box">
|
|
<div style="margin-bottom: 20px">
|
|
<el-alert title="1.打开任意浏览器（微信浏览器除外）扫该二维码登录菜鸟物流云平台进行授权" type="info"
|
|
:closable="false"></el-alert>
|
|
<el-alert title="2.该二维码有效时间为5分钟，请您尽快完成此操作" type="info"
|
|
:closable="false"></el-alert>
|
|
</div>
|
|
<div class="menu-index-code-box-con">
|
|
<div class="menu-index-code-box" style="width: 230px" v-express-qr-code="{'value':auth_code}"></div>
|
|
</div>
|
|
<div style="text-align: center;margin-top: 10px;">
|
|
<el-link type="primary" target="_blank" :href="auth_code">或点击此链接在当前浏览器进行授权</el-link>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button size="small" @click="showAuthCode = false">取 消</el-button>
|
|
<el-button size="small" type="primary" @click="refresh">授权完成并刷新页面</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!--<div>
|
|
<el-button size="small" @click="getExpressCode">电子面单取号</el-button>
|
|
</div>
|
|
<div>
|
|
<el-input v-model="order_code" size="small" placeholder="请输入要取消的面单单号"></el-input>
|
|
<el-button size="small" @click="cancelExpress">电子面单取消</el-button>
|
|
</div>-->
|
|
</div>
|
|
<script>
|
|
Vue.directive('express-qr-code', function (el, binding) {
|
|
el.innerHTML = "";
|
|
var text = binding.value.value;
|
|
if (text) {
|
|
new QRCode(el, {
|
|
text: text,
|
|
width: 230,
|
|
height: 230,
|
|
colorDark: "#000000",
|
|
colorLight: "#ffffff",
|
|
correctLevel: QRCode.CorrectLevel.H
|
|
});
|
|
}
|
|
});
|
|
var expressApp = new Vue({
|
|
el: '#expressApp',
|
|
data: {
|
|
authorized: {$authorized},
|
|
order_code: '',
|
|
cp_code: '',
|
|
merInfoList: [],//商家信息
|
|
checkMergeArr: [],//存储验证单元格合并数组
|
|
choose_address_index: -1,//已选发货地址下标
|
|
templateList: [],//打印模板列表
|
|
choose_temp_index: -1,//已选打印的面单下标
|
|
isSave: false,
|
|
showAuthCode: false,//是否显示扫码授权二维码
|
|
auth_code: '',//授权code
|
|
defaultInfo: {$defaultInfo},
|
|
rules: {
|
|
cp_code: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
branch_code: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
branch_name: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
province: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
city: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
district: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
town: [{message: '请选择发货地址', required: false, trigger: 'change'}],
|
|
detail: [{message: '请选择发货地址', required: true, trigger: 'change'}],
|
|
template_url: [{message: '请选择打印模板', required: true, trigger: 'change'}],
|
|
template_type: [{message: '请选择打印模板', required: true, trigger: 'change'}],
|
|
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'
|
|
}],
|
|
},
|
|
},
|
|
methods: {
|
|
//刷新页面
|
|
refresh: function () {
|
|
this.showAuthCode = false;
|
|
MenuApp.refreshWindow();
|
|
},
|
|
//生成二维码进行扫码授权
|
|
toAuth: function () {
|
|
var that = this;
|
|
sendRequest({
|
|
url: "{:U('getAuthCode')}",
|
|
data: {},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.auth_code = res.auth_url;
|
|
that.showAuthCode = true;
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//直接填写token
|
|
setToken: function () {
|
|
var that = this;
|
|
that.$prompt('请在菜鸟物流云授权列表里找到token填写在此处', '填写授权Token', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
inputPattern: /(?=.{50,255})(?=.*\d)(?=.*[a-zA-Z])[\x20-\x7f]*/i,
|
|
inputErrorMessage: 'token值有误',
|
|
closeOnClickModal: false
|
|
}).then(({value}) => {
|
|
sendRequest({
|
|
url: "{:U('setToken')}",
|
|
data: {
|
|
token: value,
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1000,
|
|
onClose: function () {
|
|
MenuApp.refreshWindow();
|
|
}
|
|
});
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
}
|
|
})
|
|
}).catch(() => {
|
|
|
|
});
|
|
},
|
|
//保存默认发货地址
|
|
saveDefault: function (ruleForm) {
|
|
var that = this;
|
|
this.$refs[ruleForm].validate((valid) => {
|
|
if (valid) {
|
|
that.isSave = true;
|
|
if (!that.defaultInfo.mobile && !that.defaultInfo.phone) {
|
|
that.$message({message: '发货人手机号和固定电话不能同时为空', type: 'warning'});
|
|
return;
|
|
}
|
|
console.log(that.defaultInfo);
|
|
sendRequest({
|
|
url: "{:U('saveDefault')}",
|
|
data: that.defaultInfo,
|
|
success: function (res) {
|
|
that.isSave = false;
|
|
if (res.status == 1) {
|
|
that.$message({message: res.msg, type: 'success'});
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
//选择发货地址
|
|
chooseAddress: function (item, index) {
|
|
this.choose_address_index = index;
|
|
this.choose_temp_index = -1;
|
|
let obj = {
|
|
cp_code: item.cpCode,
|
|
branch_code: item.branchCode,
|
|
branch_name: item.branchName,
|
|
province: item.province,
|
|
city: item.city,
|
|
district: item.district,
|
|
town: item.town,
|
|
detail: item.detail,
|
|
};
|
|
if (item.cpCode != this.defaultInfo.cp_code) {
|
|
obj.template_url = '';
|
|
obj.template_type = '';
|
|
}
|
|
Object.assign(this.defaultInfo, obj);
|
|
this.getTemplates();
|
|
},
|
|
//选择面单模板
|
|
chooseTemplate: function (item, index) {
|
|
let obj = {
|
|
template_url: item.standardTemplateUrl,
|
|
template_type: item.standardWaybillType,
|
|
};
|
|
switch (item.standardWaybillType) {
|
|
case '1':
|
|
obj.template_type = '快递标准面单';
|
|
break;
|
|
case '2':
|
|
obj.template_type = '快递三联面单';
|
|
break;
|
|
case '3':
|
|
obj.template_type = '快递便携式三联单';
|
|
break;
|
|
case '4':
|
|
obj.template_type = '快运标准面单';
|
|
break;
|
|
case '5':
|
|
obj.template_type = '快运三联面单';
|
|
break;
|
|
case '6':
|
|
obj.template_type = '快递一联单';
|
|
break;
|
|
case '7':
|
|
obj.template_type = '蓝牙版标准模板';
|
|
break;
|
|
case '8':
|
|
obj.template_type = '蓝牙版标准一联模板';
|
|
break;
|
|
}
|
|
Object.assign(this.defaultInfo, obj);
|
|
this.choose_temp_index = index;
|
|
},
|
|
//获取发货地，CP开通状态，账户的使用情况
|
|
getMerInfo: function () {
|
|
var that = this;
|
|
sendRequest({
|
|
url: "{:U('getMerInfo')}",
|
|
data: {
|
|
cp_code: this.cp_code,
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.getIndex(res.waybillApplySubscriptionCols);
|
|
that.choose_address_index = -1;
|
|
that.choose_temp_index = -1;
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//处理数据
|
|
getIndex(table) {
|
|
let checkMergeArr = [];
|
|
let getTable = [];
|
|
table.forEach((item, i, data) => {
|
|
let count = 0;//物流可合并的列数
|
|
let row = getTable.length;
|
|
item.branchAccountCols.forEach((subItem, j, subData) => {
|
|
count += subItem.shippAddressCols.length;//累加为发货地址数量
|
|
subItem.shippAddressCols.forEach((sSubItem, k, sSubData) => {
|
|
if ((item.branchAccountCols.length > 1 || subItem.shippAddressCols.length > 1) && (j != 0 && k != 0 || j == 0 && k != 0 || subItem.shippAddressCols.length == 1)) {
|
|
//含有网点数量大于1或发货地址数量大于1，物流公司需要合并
|
|
checkMergeArr.push({
|
|
row: getTable.length,
|
|
column: [0, 1],
|
|
count: 0,
|
|
});
|
|
}
|
|
if (subItem.shippAddressCols.length > 1) {
|
|
//含有发货地址数量大于1，则网点需要合并
|
|
checkMergeArr.push({
|
|
row: getTable.length,
|
|
column: [2, 3, 4, 5, 6, 7],
|
|
count: k == 0 ? subItem.shippAddressCols.length : 0,
|
|
});
|
|
}
|
|
getTable.push({
|
|
cpCode: item.cpCode,
|
|
cpType: item.cpType == 1 ? '直营' : '加盟',
|
|
allocatedQuantity: subItem.allocatedQuantity,
|
|
branchCode: subItem.branchCode,
|
|
branchName: subItem.branchName,
|
|
cancelQuantity: subItem.cancelQuantity,
|
|
printQuantity: subItem.printQuantity,
|
|
quantity: subItem.quantity,
|
|
province: sSubItem.province,
|
|
city: sSubItem.city,
|
|
district: sSubItem.district,
|
|
town: sSubItem.town,
|
|
detail: sSubItem.detail,
|
|
});
|
|
})
|
|
})
|
|
if (count > 1) {
|
|
checkMergeArr.push({
|
|
row: row,
|
|
column: [0, 1],
|
|
count: count,
|
|
});
|
|
}
|
|
});
|
|
this.checkMergeArr = checkMergeArr;
|
|
console.log(JSON.parse(JSON.stringify(checkMergeArr)));
|
|
console.log(JSON.parse(JSON.stringify(getTable)));
|
|
this.merInfoList = getTable;
|
|
},
|
|
//合并表格方法
|
|
arraySpanMethod({row, column, rowIndex, columnIndex}) {
|
|
if (columnIndex < 8) {
|
|
let obj = [];
|
|
for (let v of this.checkMergeArr) {
|
|
if (rowIndex === v.row && v.column.indexOf(columnIndex) != -1) {
|
|
obj = [v.count, 1];
|
|
break;
|
|
}
|
|
}
|
|
if (obj.length > 0) {
|
|
return obj;
|
|
}
|
|
}
|
|
},
|
|
//获取打印模板
|
|
getTemplates: function () {
|
|
var that = this;
|
|
sendRequest({
|
|
url: "{:U('getTemplates')}",
|
|
data: {
|
|
cp_code: this.defaultInfo.cp_code,
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.templateList = res.data;
|
|
that.choose_temp_index = -1;
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
}
|
|
});
|
|
|
|
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> |