|
@@ -22,6 +22,10 @@
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/reset_pc.css?v={{Msg "seo" "version"}}">
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/reset_pc.css?v={{Msg "seo" "version"}}">
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/city-picker.css?v={{Msg "seo" "version"}}">
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/city-picker.css?v={{Msg "seo" "version"}}">
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/invoice.css?v={{Msg "seo" "version"}}">
|
|
<link rel="stylesheet" href="{{Msg "seo" "cdn"}}/electronic_invoice/css/invoice.css?v={{Msg "seo" "version"}}">
|
|
|
|
+ <link href="//cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/theme-chalk/index.css" rel="stylesheet" />
|
|
|
|
+ <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
|
+ <script src=//cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/index.js></script>
|
|
|
|
+ <script type="text/javascript" src="{{Msg "seo" "cdn"}}/big-member/js/utils.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn-common.jianyu360.com/cdn/lib/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://cdn-common.jianyu360.com/cdn/lib/html5shiv/3.7.3/html5shiv.min.js"></script>
|
|
<script src="https://cdn-common.jianyu360.com/cdn/lib/respond-js/1.4.2/respond.min.js"></script>
|
|
<script src="https://cdn-common.jianyu360.com/cdn/lib/respond-js/1.4.2/respond.min.js"></script>
|
|
@@ -43,8 +47,25 @@
|
|
input:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
input:-ms-input-placeholder { /* Internet Explorer 10+ */
|
|
color: #999999;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
+ .custom-toast {
|
|
|
|
+ /* display: none; */
|
|
|
|
+ }
|
|
|
|
+ .custom-toast .toast-container{
|
|
|
|
+ /* display: none; */
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 50%;
|
|
|
|
+ left: 50%;
|
|
|
|
+ width: auto;
|
|
|
|
+ padding: 16px 32px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.65);
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ transform: translateX(-50%) translateY(-50%);
|
|
|
|
+ z-index: 99;
|
|
|
|
+ }
|
|
</style>
|
|
</style>
|
|
-<body class="hidden">
|
|
|
|
|
|
+<body>
|
|
<!-- header -->
|
|
<!-- header -->
|
|
{{include "/common/pchead.html"}}
|
|
{{include "/common/pchead.html"}}
|
|
<!-- main START -->
|
|
<!-- main START -->
|
|
@@ -56,73 +77,76 @@
|
|
<div class="w invoice_main">
|
|
<div class="w invoice_main">
|
|
<div class="i_m_head">开发票<a style="float: right;color: #2CB7CA;" data-toggle="modal" data-target="#ruleModal">开票规则</a></div>
|
|
<div class="i_m_head">开发票<a style="float: right;color: #2CB7CA;" data-toggle="modal" data-target="#ruleModal">开票规则</a></div>
|
|
<div class="i_m_body">
|
|
<div class="i_m_body">
|
|
- <div class="invariability">
|
|
|
|
- <div class="clearfix invoice_control">
|
|
|
|
- <div class="fl invoice_control_label">订单编号:</div>
|
|
|
|
- <div class="fl order_code"></div>
|
|
|
|
- </div>
|
|
|
|
- <div class="clearfix invoice_control">
|
|
|
|
- <div class="fl invoice_control_label">发票类型:</div>
|
|
|
|
- <div class="fl">普通发票(电子发票)</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="clearfix invoice_control">
|
|
|
|
- <div class="fl invoice_control_label">发票内容:</div>
|
|
|
|
- <div class="fl">明细</div>
|
|
|
|
- </div>
|
|
|
|
- <div class="clearfix invoice_control">
|
|
|
|
- <div class="fl invoice_control_label">发票抬头:</div>
|
|
|
|
- <div class="fl invoice_control_select" id="invoice_title"></div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
|
|
|
|
+ <el-form-item label="订单编号:" >
|
|
|
|
+ <div>${ruleForm.order_code}</div>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="发票类型:">
|
|
|
|
+ <el-radio-group v-model="ruleForm.invoice_variety">
|
|
|
|
+ <el-radio label="电子普通发票">电子普通发票</el-radio>
|
|
|
|
+ <el-radio label="电子专用发票">电子专用发票</el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="发票内容:" class="invoice_select">
|
|
|
|
+ <el-select popper-class="invoice_select_option" v-model="ruleForm.invoice_content">
|
|
|
|
+ <el-option v-for="(item, index) in invoiceContentList" :label="item.label" :key="index" :value="item.label"></el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="发票抬头:">
|
|
|
|
+ <el-radio-group v-model="ruleForm.invoice_type">
|
|
|
|
+ <el-radio v-if="ruleForm.invoice_variety != '电子专用发票'" label="个人"></el-radio>
|
|
|
|
+ <el-radio label="单位"></el-radio>
|
|
|
|
+ </el-radio-group>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <div class="invoice_unit" v-if="ruleForm.invoice_type == '单位'">
|
|
|
|
+ <el-form-item label="公司名称:" class="invoice_unit_name" prop="company_name">
|
|
|
|
+ <el-input @blur="handleBlur" @input="handleInput" placeholder="请输入公司名称" v-model="ruleForm.company_name"></el-input>
|
|
|
|
+ <el-card class="box-card" v-if="companyList.length">
|
|
|
|
+ <div @click="handleClick(item)" v-html="setHighLight(item)" v-for="(item, index) in companyList" :key="index" class="list-item"></div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="单位税号:" prop="taxpayer_identnum">
|
|
|
|
+ <el-input @blur="validateForm" placeholder="请输入单位税号" v-model="ruleForm.taxpayer_identnum"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="min-height: 36px;height: auto;" label="单位地址:" :rules="[{ required: ruleForm.invoice_variety == '电子专用发票', message: '请输入单位地址', trigger: 'blur' }]" prop="company_address">
|
|
|
|
+ <el-input ref="company_address" :style="{height: addressHeight + 'px'}" type="textarea" :rows="1" placeholder="请输入单位地址" v-model="ruleForm.company_address"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="电话号码:">
|
|
|
|
+ <el-input maxlength="11" placeholder="请输入电话号码" v-model="ruleForm.company_phone"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="开户银行:">
|
|
|
|
+ <el-input placeholder="请输入开户银行" v-model="ruleForm.bank_name"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="银行账号:">
|
|
|
|
+ <el-input placeholder="请输入银行账号" v-model="ruleForm.bank_account"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="min-height: 36px;height: auto;" class="invoice_desc" label="开票备注:">
|
|
|
|
+ <el-input ref="remark" :style="{height: remarkHeight + 'px'}" :rows="1" placeholder="非必填,此部分内容会展示在发票“备注”上,请按照贵司财务要求进行填写" type="textarea" v-model="ruleForm.remark"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <el-form-item label="联系电话:" prop="phone">
|
|
|
|
+ <el-input maxlength="11" @blur="validateForm" placeholder="请输入手机号" v-model="ruleForm.phone"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="电子邮箱:" prop="mail">
|
|
|
|
+ <el-input @blur="validateForm" placeholder="邮箱用于接收电子发票" v-model="ruleForm.mail"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="min-height: 36px;height: auto;" v-if="ruleForm.invoice_type == '个人'" label="开票备注:">
|
|
|
|
+ <el-input ref="remark" :style="{height: remarkHeight + 'px'}" :rows="1" placeholder="非必填,此部分内容会展示在发票“备注”上,请按照贵司财务要求进行填写" type="textarea" v-model="ruleForm.remark"></el-input>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item style="margin-top: 32px;">
|
|
|
|
+ <el-button :disabled="!isFormValid" type="primary" @click="submitForm('ruleForm')">提交</el-button>
|
|
|
|
+ <el-button @click="resetForm('ruleForm')">取消</el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
<!-- 单位发票信息 -->
|
|
<!-- 单位发票信息 -->
|
|
- <div class="unit_invoice">
|
|
|
|
- <div class="clearfix invoice_control" id="unitName">
|
|
|
|
- <div class="fl invoice_control_label">公司名称:</div>
|
|
|
|
- <div class="fl invoice_control_input" name="" id="">
|
|
|
|
- <input type="text" placeholder="请输入公司名称" class="unit_name">
|
|
|
|
- </div>
|
|
|
|
- <span class="error"><i class="iconfont icon-cuowutishi"></i>开票单位名称格式不正确</span>
|
|
|
|
- <span class="success"><i class="iconfont icon-zhengquetishi"></i></span>
|
|
|
|
- </div>
|
|
|
|
- <div class="clearfix invoice_control" id="txtNumber">
|
|
|
|
- <div class="fl invoice_control_label">纳税人识别号:</div>
|
|
|
|
- <div class="fl invoice_control_input" name="" id="">
|
|
|
|
- <input type="text" placeholder="请输入纳税人识别号" maxlength="18" class="taxpayer_number">
|
|
|
|
- </div>
|
|
|
|
- <span class="error"><i class="iconfont icon-cuowutishi"></i>纳税人识别号格式不正确</span>
|
|
|
|
- <span class="success"><i class="iconfont icon-zhengquetishi"></i></span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="common_invoice">
|
|
|
|
- <div class="clearfix invoice_control" id="telBox">
|
|
|
|
- <div class="fl invoice_control_label">手机号:</div>
|
|
|
|
- <div class="fl invoice_control_input" name="" id="">
|
|
|
|
- <input type="text" placeholder="请输入手机号" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" class="tel">
|
|
|
|
- </div>
|
|
|
|
- <span class="error"><i class="iconfont icon-cuowutishi"></i>手机号格式不正确</span>
|
|
|
|
- <span class="success"><i class="iconfont icon-zhengquetishi"></i></span>
|
|
|
|
- </div>
|
|
|
|
- <div class="clearfix invoice_control" id="emailBox">
|
|
|
|
- <div class="fl invoice_control_label">电子邮箱:</div>
|
|
|
|
- <div class="fl invoice_control_input" name="" id="">
|
|
|
|
- <input type="text" placeholder="邮箱用于接收电子发票" class="email">
|
|
|
|
- </div>
|
|
|
|
- <span class="error"><i class="iconfont icon-cuowutishi"></i>邮箱格式不正确</span>
|
|
|
|
- <span class="success"><i class="iconfont icon-zhengquetishi"></i></span>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="invoice_btn">
|
|
|
|
- <button class="submit_btn save-btn" disabled>提交</button>
|
|
|
|
- <button class="cancel_btn">取消</button>
|
|
|
|
- </div>
|
|
|
|
<p style="text-align: justify;font-size: 14px;color: #686868;padding: 12px 0 12px 100px;">您申请的发票将在3个工作日内由平台开具并发送至您的邮箱,请注意查收。</p>
|
|
<p style="text-align: justify;font-size: 14px;color: #686868;padding: 12px 0 12px 100px;">您申请的发票将在3个工作日内由平台开具并发送至您的邮箱,请注意查收。</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- toast提示框 -->
|
|
<!-- toast提示框 -->
|
|
- <div class="toast">
|
|
|
|
|
|
+ <!-- <div class="toast" v-if="toastStatus.toastShow">
|
|
<i class="iconfont icon-zhifuwancheng"></i>
|
|
<i class="iconfont icon-zhifuwancheng"></i>
|
|
- <span>提交成功</span>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <span>${toastStatus.text}</span>
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="ruleModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal fade" id="ruleModal" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-dialog">
|
|
@@ -132,11 +156,9 @@
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-body">
|
|
<div class="text">
|
|
<div class="text">
|
|
- 1.平台提供电子普通发票,您可点击“我的订单-开发票”,开票内容统一为“信息技术服务”。<br>
|
|
|
|
- 2.您申请的发票将在3个工作日内由平台开具并发送至您的邮箱,请注意查收。<br>
|
|
|
|
- 3.购买线上产品服务,请在订单完成90天内,申请开票,逾期请联系客服,开具纸质发票。<br>
|
|
|
|
- 4.如需开具增值税专用发票,请联系客服,开票金额<200元发票邮寄费用自行承担。 <br>
|
|
|
|
- 客服电话:400-108-6670
|
|
|
|
|
|
+ 1.平台提供电子普通发票、电子专用发票,发票内容为可选“信息技术服务-技术服务费”、“信息技术服务-会员费”、“信息技术服务-招投标数据服务”;<br>
|
|
|
|
+ 2.您申请的电子发票将在3个工作日内由平台开具并发送至您的邮箱,请注意查收;<br>
|
|
|
|
+ 3.如有问题可联系客服,客服电话:400-108-6670。<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="modal-footer">
|
|
@@ -171,85 +193,9 @@
|
|
<script src="{{Msg "seo" "cdn"}}/electronic_invoice/js/invoice.js?v={{Msg "seo" "version"}}"></script>
|
|
<script src="{{Msg "seo" "cdn"}}/electronic_invoice/js/invoice.js?v={{Msg "seo" "version"}}"></script>
|
|
<script>
|
|
<script>
|
|
$(function(){
|
|
$(function(){
|
|
- var orderCode = {{.T.order_code}};
|
|
|
|
- // 查询是否可以开发票
|
|
|
|
- $.ajax({
|
|
|
|
- url: '/jypay/invoice/switch',
|
|
|
|
- type: "GET",
|
|
|
|
- success: function(res) {
|
|
|
|
- if (res.code === '1001') {
|
|
|
|
- $('body').removeClass('hidden')
|
|
|
|
- // 不能开票
|
|
|
|
- $('#switchModal').modal('show').find('.text').text(res.messge)
|
|
|
|
- return
|
|
|
|
- } else{
|
|
|
|
- $.post("/jypay/invoice/available",{order_code:orderCode},function(rr){
|
|
|
|
- if(rr.status==0){
|
|
|
|
- window.location.replace("/front/order/invoicetimeOut?f=upgrade")
|
|
|
|
- }else{
|
|
|
|
- $("body").removeClass("hidden");
|
|
|
|
- var order_mail = {{.T.mail}};
|
|
|
|
- var order_phone = {{.T.phone}};
|
|
|
|
- if(order_mail!==""&&order_mail!==null&&order_mail!==undefined){
|
|
|
|
- $(".email").val(order_mail)
|
|
|
|
- $(".email").parent().siblings('.success').show();
|
|
|
|
- }
|
|
|
|
- if(order_phone!==""&&order_phone!==null&&order_phone!==undefined){
|
|
|
|
- $(".tel").val(order_phone)
|
|
|
|
- $(".tel").parent().siblings('.success').show();
|
|
|
|
- }
|
|
|
|
- var isSys = getParam("isSys");
|
|
|
|
- if(isSys === "true"){
|
|
|
|
- $.ajax({
|
|
|
|
- type: 'POST',
|
|
|
|
- url: '/jypay/invoice/show',
|
|
|
|
- data: {"order_code":orderCode},
|
|
|
|
- success: function(r){
|
|
|
|
- if(r.status === "processing"){
|
|
|
|
- if(r.data.invoice_type === "个人"){
|
|
|
|
- $(".email").val(r.data.mail);
|
|
|
|
- $(".tel").val(r.data.phone);
|
|
|
|
- $(".email").parent().siblings('.success').show();
|
|
|
|
- $(".tel").parent().siblings('.success').show();
|
|
|
|
- }else{
|
|
|
|
- $(".email").val(r.data.mail);
|
|
|
|
- $(".tel").val(r.data.phone);
|
|
|
|
- $(".unit_name").val(r.data.company_name);
|
|
|
|
- $(".taxpayer_number").val(r.data.taxpayer_identnum);
|
|
|
|
- $(".email").parent().siblings('.success').show();
|
|
|
|
- $(".tel").parent().siblings('.success').show();
|
|
|
|
- $(".unit_name").parent().siblings('.success').show();
|
|
|
|
- $(".taxpayer_number").parent().siblings('.success').show();
|
|
|
|
- $("#invoice_title > button").text("单位")
|
|
|
|
- $(".unit_invoice").show();
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- checkForm();
|
|
|
|
- var order_code = {{.T.order_code}};
|
|
|
|
- $(".order_code").text(order_code);
|
|
|
|
- $(".cancel_btn").on("click",function(){
|
|
|
|
- window.history.go(-1);
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- $('#ruleModal').on('show.bs.modal', function () {
|
|
|
|
- var $this = $(this);
|
|
|
|
- var $modal_dialog = $this.find('.modal-dialog');
|
|
|
|
- $this.css('display', 'block');
|
|
|
|
- $modal_dialog.css({
|
|
|
|
- 'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2)
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- $("#public-nav").css("background","#fff");
|
|
|
|
- $(".public-nav").css("border-bottom", "1px solid #e0e0e0");
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
|
|
+ var order_code = {{.T.order_code}};
|
|
|
|
+ var order_mail = {{.T.mail}};
|
|
|
|
+ var order_phone = {{.T.phone}};
|
|
haslogin({{.T.logid}});
|
|
haslogin({{.T.logid}});
|
|
$('#i-know-btn').on('click', function () {
|
|
$('#i-know-btn').on('click', function () {
|
|
// 新窗口打开
|
|
// 新窗口打开
|
|
@@ -263,6 +209,351 @@
|
|
history.back()
|
|
history.back()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
+ var invoiceNode = new Vue({
|
|
|
|
+ el: '#invoice',
|
|
|
|
+ delimiters: ['${', '}'],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ ruleForm: {
|
|
|
|
+ order_code: '',
|
|
|
|
+ invoice_content: '信息技术服务-技术服务费',
|
|
|
|
+ invoice_type: '单位',
|
|
|
|
+ invoice_variety: '电子普通发票',
|
|
|
|
+ mail: '',
|
|
|
|
+ phone: '',
|
|
|
|
+ remark: '',
|
|
|
|
+ company_name: '',
|
|
|
|
+ taxpayer_identnum: '',
|
|
|
|
+ company_address: '',
|
|
|
|
+ company_phone: '',
|
|
|
|
+ bank_name: '',
|
|
|
|
+ bank_account: ''
|
|
|
|
+ },
|
|
|
|
+ invoiceContentList: [
|
|
|
|
+ {
|
|
|
|
+ label: '信息技术服务-技术服务费',
|
|
|
|
+ value: '信息技术服务-技术服务费'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '信息技术服务-会员费',
|
|
|
|
+ value: '信息技术服务-会员费'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ label: '信息技术服务-招投标数据服务',
|
|
|
|
+ value: '信息技术服务-招投标数据服务'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ rules: {
|
|
|
|
+ phone: [
|
|
|
|
+ { required: true, message: '请输入手机号', trigger: 'blur' },
|
|
|
|
+ { min: 11, max: 11, message: '手机号长度为11位', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ mail: [
|
|
|
|
+ { required: true, message: '请输入邮箱地址', trigger: 'blur' },
|
|
|
|
+ { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ company_name: [
|
|
|
|
+ { required: true, message: '请输入单位名称', trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ taxpayer_identnum: [
|
|
|
|
+ { required: true, message: '请输入纳税人识别号', trigger: 'blur' },
|
|
|
|
+ { validator: this.validateCode, trigger: 'blur' }
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ company_address: [
|
|
|
|
+ { required: true, message: '请输入单位地址', trigger: 'blur' }
|
|
|
|
+ ]
|
|
|
|
+ },
|
|
|
|
+ companyList: [],
|
|
|
|
+ urlParams: {
|
|
|
|
+ type: '',
|
|
|
|
+ invoiceid: '',
|
|
|
|
+ only_Identifying: ''
|
|
|
|
+ },
|
|
|
|
+ addressHeight: 36,
|
|
|
|
+ remarkHeight: 36,
|
|
|
|
+ isFormValid: false // 表单是否通过校验
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created () {
|
|
|
|
+ this.ruleForm.order_code = order_code
|
|
|
|
+ this.ruleForm.mail = order_mail
|
|
|
|
+ this.ruleForm.phone = order_phone
|
|
|
|
+ const type = utils.getParam('type')
|
|
|
|
+ const invoiceid = utils.getParam('invoiceid')
|
|
|
|
+ this.urlParams.type = type
|
|
|
|
+ this.urlParams.invoiceid = invoiceid
|
|
|
|
+ this.setPageOver()
|
|
|
|
+ this.invouceInfoEcho()
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.validateForm()
|
|
|
|
+ }, 200)
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ 'ruleForm.invoice_variety': {
|
|
|
|
+ handler (val) {
|
|
|
|
+ if (val === '电子专用发票') {
|
|
|
|
+ this.ruleForm.invoice_type = '单位'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'ruleForm.company_address': {
|
|
|
|
+ handler() {
|
|
|
|
+ this.addressHeight = this.getTextareaHeight(this.$refs.company_address.$el);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'ruleForm.remark': {
|
|
|
|
+ handler() {
|
|
|
|
+ this.remarkHeight = this.getTextareaHeight(this.$refs.remark.$el);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'ruleForm.invoice_type': {
|
|
|
|
+ handler(val) {
|
|
|
|
+ // 清空校验
|
|
|
|
+ this.$refs['ruleForm'].clearValidate();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 查询是否可以开发票
|
|
|
|
+ setPageOver () {
|
|
|
|
+ const switchUrl = '/jypay/invoice/switch'
|
|
|
|
+ const url = '/jypay/invoice/available'
|
|
|
|
+ const params = {
|
|
|
|
+ order_code: this.ruleForm.order_code
|
|
|
|
+ }
|
|
|
|
+ this.ajaxComponent(switchUrl).then(r => {
|
|
|
|
+ if (r.code === '1001') {
|
|
|
|
+ // 不能开票
|
|
|
|
+ $('#switchModal').modal('show').find('.text').text(r.messge)
|
|
|
|
+ return
|
|
|
|
+ } else {
|
|
|
|
+ this.ajaxComponent(url, params).then(res => {
|
|
|
|
+ if(res) {
|
|
|
|
+ if(res.status !== 1) {
|
|
|
|
+ window.location.replace("/front/order/invoicetimeOut?f=upgrade")
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ validateForm() {
|
|
|
|
+ this.$refs.ruleForm.validate(valid => {
|
|
|
|
+ // this.$refs.ruleForm.clearValidate();
|
|
|
|
+ this.isFormValid = valid
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getTextareaHeight(textareaEl) {
|
|
|
|
+ textareaEl = textareaEl.querySelector('textarea');
|
|
|
|
+ textareaEl.style.height = 'auto';
|
|
|
|
+ textareaEl.style.height = `${textareaEl.scrollHeight}px`;
|
|
|
|
+ console.info(textareaEl.clientHeight, 'textareaEl')
|
|
|
|
+ return textareaEl.clientHeight;
|
|
|
|
+ },
|
|
|
|
+ // 发票信息回显
|
|
|
|
+ invouceInfoEcho () {
|
|
|
|
+ const url = '/jypay/invoice/newShow'
|
|
|
|
+ const params = {
|
|
|
|
+ stype: 2,
|
|
|
|
+ code: this.urlParams.invoiceid
|
|
|
|
+ }
|
|
|
|
+ this.ajaxComponent(url, params).then((res) => {
|
|
|
|
+ if(res) {
|
|
|
|
+ this.echoFun(res.data.invoice)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ echoFun(data) {
|
|
|
|
+ const { only_Identifying, invoice_type, invoice_variety, invoice_content, mail, phone, remark, company_name, taxpayer_identnum, company_address, company_phone, bank_name, bank_account } = data
|
|
|
|
+ this.ruleForm.invoice_type = invoice_type
|
|
|
|
+ this.ruleForm.invoice_variety = invoice_variety
|
|
|
|
+ this.ruleForm.invoice_content = invoice_content
|
|
|
|
+ this.ruleForm.mail = mail
|
|
|
|
+ this.ruleForm.phone = phone
|
|
|
|
+ this.ruleForm.remark = remark
|
|
|
|
+ this.ruleForm.company_name = company_name
|
|
|
|
+ this.ruleForm.taxpayer_identnum = taxpayer_identnum
|
|
|
|
+ this.ruleForm.company_address = company_address
|
|
|
|
+ this.ruleForm.company_phone = company_phone
|
|
|
|
+ this.ruleForm.bank_name = bank_name
|
|
|
|
+ this.ruleForm.bank_account = bank_account
|
|
|
|
+ this.urlParams.only_Identifying = only_Identifying
|
|
|
|
+ },
|
|
|
|
+ validateCode: (rule, value, callback) => {
|
|
|
|
+ if (!value) {
|
|
|
|
+ return callback(new Error('请输入纳税人识别号'))
|
|
|
|
+ } else {
|
|
|
|
+ if (
|
|
|
|
+ value.trim().length === 18 ||
|
|
|
|
+ value.trim().length === 15 ||
|
|
|
|
+ value.trim().length === 20
|
|
|
|
+ ) {
|
|
|
|
+ return callback()
|
|
|
|
+ }
|
|
|
|
+ return callback(new Error('请输入正确的纳税人识别号'))
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ setHighLight(item) {
|
|
|
|
+ const keyword = utils.replaceKeyword(item.name, this.ruleForm.company_name, '<span class="highlight-text">' + this.ruleForm.company_name + '</span>')
|
|
|
|
+ return keyword
|
|
|
|
+ },
|
|
|
|
+ submitForm(formName) {
|
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ const { order_code, invoice_content, invoice_type, invoice_variety, mail, phone, remark, company_name, taxpayer_identnum, company_address, company_phone, bank_name, bank_account } = this.ruleForm
|
|
|
|
+ let params = {
|
|
|
|
+ order_code: order_code, // 唯一标识
|
|
|
|
+ invoice_variety: invoice_variety, // 发票类型
|
|
|
|
+ invoiceContent: invoice_content, // 发票内容
|
|
|
|
+ invoice_type: invoice_type, // 发票抬头
|
|
|
|
+ phone: phone, // 手机号
|
|
|
|
+ mail: mail, // 邮箱
|
|
|
|
+ remark: remark, // 备注
|
|
|
|
+ source: 0 // 来源
|
|
|
|
+ }
|
|
|
|
+ if (invoice_type === '单位') {
|
|
|
|
+ params = {
|
|
|
|
+ order_code: order_code, // 唯一标识
|
|
|
|
+ invoice_variety: invoice_variety, // 发票类型
|
|
|
|
+ invoiceContent: invoice_content, // 发票内容
|
|
|
|
+ invoice_type: invoice_type, // 发票抬头
|
|
|
|
+ company_name: company_name, // 公司名称
|
|
|
|
+ taxpayer_identnum: taxpayer_identnum, // 单位税号
|
|
|
|
+ company_address: company_address, // 单位地址
|
|
|
|
+ company_phone: company_phone, // 电话号码
|
|
|
|
+ bank_name: bank_name, // 开户银行
|
|
|
|
+ bank_account: bank_account, // 银行账号
|
|
|
|
+ phone: phone, // 手机号
|
|
|
|
+ mail: mail, // 邮箱
|
|
|
|
+ remark: remark, // 备注
|
|
|
|
+ source: 0 // 来源
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let url = '/jypay/invoice/submit'
|
|
|
|
+ if(this.urlParams.type === 'replace') {
|
|
|
|
+ // 换开发票接口
|
|
|
|
+ url = '/jypay/invoice/newReplace'
|
|
|
|
+ params.sid = this.urlParams.invoiceid
|
|
|
|
+ } else if(this.urlParams.type === 'again') {
|
|
|
|
+ // 开票失败,再次开票
|
|
|
|
+ params.only_Identifying = this.urlParams.only_Identifying
|
|
|
|
+ }
|
|
|
|
+ this.onConfirm(url, params)
|
|
|
|
+ } else {
|
|
|
|
+ console.log('error submit!!');
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ onConfirm(url, params) {
|
|
|
|
+ this.ajaxComponent(url, params).then((res) => {
|
|
|
|
+ if(res && res.error_code === 0) {
|
|
|
|
+ this.toastFn('提交成功', 2000)
|
|
|
|
+ } else {
|
|
|
|
+ this.toastFn(res.error_msg || res.invoice_msg, 2000)
|
|
|
|
+ }
|
|
|
|
+ }).catch(err => {
|
|
|
|
+ this.toastFn('提交失败', 2000)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ resetForm(formName) {
|
|
|
|
+ this.ruleForm = {
|
|
|
|
+ order_code: '',
|
|
|
|
+ invoice_content: '信息技术服务-技术服务费',
|
|
|
|
+ invoice_type: '单位',
|
|
|
|
+ invoice_variety: '电子普通发票',
|
|
|
|
+ mail: '',
|
|
|
|
+ phone: '',
|
|
|
|
+ remark: '',
|
|
|
|
+ company_name: '',
|
|
|
|
+ taxpayer_identnum: '',
|
|
|
|
+ company_address: '',
|
|
|
|
+ company_phone: '',
|
|
|
|
+ bank_name: '',
|
|
|
|
+ bank_account: ''
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handleInput(value) {
|
|
|
|
+ utils.debounce(this.getCompanyList(value), 300)
|
|
|
|
+ },
|
|
|
|
+ handleBlur() {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.companyList = []
|
|
|
|
+ }, 200);
|
|
|
|
+ this.validateForm()
|
|
|
|
+ },
|
|
|
|
+ handleClick(item) {
|
|
|
|
+ const { name, taxCode } = item
|
|
|
|
+ this.ruleForm.company_name = name
|
|
|
|
+ this.ruleForm.taxpayer_identnum = taxCode
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.companyList = []
|
|
|
|
+ }, 200);
|
|
|
|
+ },
|
|
|
|
+ getCompanyList(key) {
|
|
|
|
+ if(!key) return
|
|
|
|
+ const url = '/bigmember/search/ent/association'
|
|
|
|
+ const params = {
|
|
|
|
+ name: key,
|
|
|
|
+ type: "ent",
|
|
|
|
+ num: "5"
|
|
|
|
+ }
|
|
|
|
+ this.ajaxComponent(url, params).then((res) => {
|
|
|
|
+ if(res && res.error_code === 0) {
|
|
|
|
+ if(res.data.list) {
|
|
|
|
+ this.companyList = res.data.list
|
|
|
|
+ } else {
|
|
|
|
+ this.companyList = []
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // debounce(fn, delay) {
|
|
|
|
+ // let timeoutId;
|
|
|
|
+ // return function(...args) {
|
|
|
|
+ // if (timeoutId) {
|
|
|
|
+ // clearTimeout(timeoutId);
|
|
|
|
+ // }
|
|
|
|
+ // timeoutId = setTimeout(() => {
|
|
|
|
+ // fn.apply(this, args);
|
|
|
|
+ // timeoutId = null;
|
|
|
|
+ // }, delay);
|
|
|
|
+ // };
|
|
|
|
+ // },
|
|
|
|
+ // 封装公共ajax
|
|
|
|
+ ajaxComponent(url, params, contentType) {
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ $.ajax({
|
|
|
|
+ type: "POST",
|
|
|
|
+ url: url,
|
|
|
|
+ contentType: contentType || 'application/x-www-form-urlencoded',
|
|
|
|
+ data: contentType ? JSON.stringify(params) : params || {},
|
|
|
|
+ success: function (res) {
|
|
|
|
+ resolve(res)
|
|
|
|
+ }.bind(this),
|
|
|
|
+ error: function (err) {
|
|
|
|
+ reject(err)
|
|
|
|
+ }.bind(this)
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ toastFn: function (text, duration) {
|
|
|
|
+ if (!duration) {
|
|
|
|
+ duration = 1000
|
|
|
|
+ }
|
|
|
|
+ var _html = ""
|
|
|
|
+ _html+='<div class="custom-toast"><div class="mask" style="background-color: transparent;"></div><div class="toast-container">'
|
|
|
|
+ _html+='<span>' + text + '</span></div></div>'
|
|
|
|
+ $('body').append(_html)
|
|
|
|
+ setTimeout(function(){
|
|
|
|
+ $(".custom-toast").fadeOut().remove();
|
|
|
|
+ },duration)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
</body>
|
|
</body>
|