zhc4dev
parent
34d830c335
commit
89eb3e4aac
4 changed files with 574 additions and 7 deletions
@ -0,0 +1,156 @@ |
||||
<template> |
||||
<div style="background: #F6F6F6;"> |
||||
<div class="bg"> |
||||
<Header></Header> |
||||
<h1 class="c_fff">发票详情</h1> |
||||
</div> |
||||
<div class="billDetail"> |
||||
<div class="table" cellspacing="0" cellpadding="0"> |
||||
<tr> |
||||
<td class="title">订单编号</td> |
||||
<td class="cont">257677098401</td> |
||||
<td class="title">发票状态</td> |
||||
<td class="cont">已开票</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="title">下单时间</td> |
||||
<td class="cont">2022-12-06 18:19:44</td> |
||||
<td class="title">发票内容</td> |
||||
<td class="cont">商品明细</td> |
||||
</tr> |
||||
<tr> |
||||
<td class="title">发票类型</td> |
||||
<td class="cont">电子普通发票</td> |
||||
<td class="title">发票抬头</td> |
||||
<td class="cont">个人</td> |
||||
</tr> |
||||
</div> |
||||
<div class="table table1" cellspacing="0" cellpadding="0"> |
||||
<tr class="title"> |
||||
<th>发票代码</th> |
||||
<th>发票号码</th> |
||||
<th>微信扫码获取电子普通发票</th> |
||||
<th>下载电子增值税普通发票</th> |
||||
</tr> |
||||
<tr> |
||||
<td>041002200111</td> |
||||
<td>40821456</td> |
||||
<td class="erweima"> |
||||
<img src="../assets/erweima.png" /> |
||||
</td> |
||||
<td><span class="download" @click="downLoad"><i class="el-icon-download"></i>查看发票</span></td> |
||||
</tr> |
||||
</div> |
||||
<div class="btnList d-flex"> |
||||
<div class="btn" @click="handleBack">返回</div> |
||||
<div class="btn">发送邮箱</div> |
||||
<div class="btn">申请换开</div> |
||||
</div> |
||||
</div> |
||||
<Footer></Footer> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import Header from "./Header/HeaderView"; |
||||
import Footer from "./Footer/FooterView" |
||||
export default { |
||||
name: "billDetail", |
||||
components: { Header,Footer }, |
||||
data() { |
||||
return { |
||||
}; |
||||
}, |
||||
methods: { |
||||
downLoad(){ |
||||
|
||||
}, |
||||
handleBack(){ |
||||
this.$router.go(-1) |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
@import '../assets/common.css'; |
||||
.bg{ |
||||
background-image: url("../assets/bg06.png"); |
||||
height: 352px; |
||||
line-height: 400px; |
||||
text-align: center; |
||||
h1{ |
||||
font-size: 40px; |
||||
} |
||||
} |
||||
.table tr th, .table tr td { border:1px solid #F2F2F2;padding: 10px;} |
||||
.table { border-collapse: collapse;} |
||||
.billDetail{ |
||||
width: 1120px; |
||||
height: 500px; |
||||
margin: 30px auto; |
||||
background: #FFFFFF; |
||||
padding: 100px 150px; |
||||
.table{ |
||||
width: 820px; |
||||
tr{ |
||||
width: 820px; |
||||
th{ |
||||
font-size: 12px; |
||||
} |
||||
td{ |
||||
i{ |
||||
margin-right: 2px; |
||||
} |
||||
} |
||||
} |
||||
.title{ |
||||
width: 150px; |
||||
text-align: center; |
||||
} |
||||
.cont{ |
||||
width: 260px; |
||||
} |
||||
margin-bottom: 40px; |
||||
} |
||||
.table1{ |
||||
.title{ |
||||
background: #EEE6D9; |
||||
} |
||||
td{ |
||||
width: 205px; |
||||
text-align: center; |
||||
} |
||||
.erweima{ |
||||
img{ |
||||
width: 70px; |
||||
height: 70px; |
||||
} |
||||
} |
||||
.download{ |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.btnList{ |
||||
justify-content: center; |
||||
.btn{ |
||||
margin-right: 33px; |
||||
width: 150px; |
||||
height: 42px; |
||||
border-radius: 3px 3px 3px 3px; |
||||
opacity: 1; |
||||
border: 1px solid #E4393C; |
||||
text-align: center; |
||||
font-size: 14px; |
||||
color: #E4393C; |
||||
line-height: 42px; |
||||
transition: all 0.2s; |
||||
cursor: pointer; |
||||
&:hover{ |
||||
background-color: #E4393C; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,394 @@ |
||||
<template> |
||||
<div class="billTitle"> |
||||
<div class="weizhuce d-flex" v-if="billTitle.length == 0"> |
||||
<p class="c_1B f_30"> 您还没有抬头。</p> |
||||
</div> |
||||
<div class="d-flex btnDiv"> |
||||
<div type="primary" class="dialogButton primary f_12" @click="addAddr">创建新抬头</div> |
||||
</div> |
||||
<div class="addrList" v-if="billTitle.length != 0"> |
||||
<div class="item" v-for="(item,index) in billTitle" :key="index"> |
||||
<p class="default" v-if="item.flag"><span class="f_12">默认抬头</span></p> |
||||
<div class="d-flex"> |
||||
<div><span v-if="item.type == 1">专用发票抬头</span><span v-if="item.type == 2">普通发票抬头</span></div> |
||||
<div class="btnDiv"> |
||||
<span class="btn" @click="handleEdit(item)">编辑</span> |
||||
<a-popconfirm |
||||
title="确定删除吗?" |
||||
ok-text="Yes" |
||||
cancel-text="No" |
||||
@confirm="confirm1(item.id)" |
||||
@cancel="cancel" |
||||
><span class="btn">删除</span></a-popconfirm> |
||||
<a-popconfirm |
||||
title="确定将其设置为默认抬头吗?" |
||||
ok-text="Yes" |
||||
cancel-text="No" |
||||
@confirm="confirm2(item.id)" |
||||
@cancel="cancel" |
||||
v-if="!item.flag" |
||||
><span class="btn">将其设置为默认抬头</span></a-popconfirm> |
||||
<!-- <span class="btn" v-if="!item.flag" @click="handleDefault(item.id)">将其设置为默认抬头</span>--> |
||||
</div> |
||||
</div> |
||||
<p> |
||||
{{item.name}} |
||||
</p> |
||||
<p>{{item.dutyNum}}</p> |
||||
</div> |
||||
</div> |
||||
<a-modal |
||||
title="发票抬头操作" |
||||
:visible="visible" |
||||
:width="800" |
||||
> |
||||
<template slot="footer"> |
||||
<a-button key="back" @click="handleCancel"> |
||||
取消 |
||||
</a-button> |
||||
<a-button key="submit" type="primary" @click="handleOk"> |
||||
确定 |
||||
</a-button> |
||||
</template> |
||||
|
||||
<template> |
||||
<a-form-model |
||||
ref="ruleForm" |
||||
:model="form" |
||||
:rules="rules" |
||||
:label-col="labelCol" :wrapper-col="wrapperCol" |
||||
class="modelForm" |
||||
> |
||||
<a-form-model-item label="发票类型" > |
||||
<a-select v-model="form.type" placeholder="请选择发票类型"> |
||||
<a-select-option value="1"> |
||||
专用发票 |
||||
</a-select-option> |
||||
<a-select-option value="2"> |
||||
普通发票 |
||||
</a-select-option> |
||||
</a-select> |
||||
</a-form-model-item> |
||||
<a-form-model-item |
||||
label="发票抬头" |
||||
prop="name" |
||||
> |
||||
<a-input placeholder="请输入发票抬头" v-model="form.name" /> |
||||
</a-form-model-item> |
||||
<a-form-model-item |
||||
label="税号" |
||||
prop="dutyNum" |
||||
> |
||||
<a-input placeholder="请输入税号" v-model="form.dutyNum" /> |
||||
</a-form-model-item> |
||||
<a-form-model-item |
||||
label="公司注册电话" |
||||
prop="phone" |
||||
> |
||||
<a-input placeholder="请输入公司注册电话" v-model="form.phone"> |
||||
<template slot="addonBefore"> |
||||
<span>+86 中国大陆地区</span> |
||||
</template> |
||||
</a-input> |
||||
</a-form-model-item> |
||||
<a-form-model-item |
||||
label="银行账户" |
||||
prop="card" |
||||
> |
||||
<a-input placeholder="请输入银行账户" v-model="form.card"> |
||||
</a-input> |
||||
</a-form-model-item> |
||||
<a-form-model-item label="公司注册地址" prop="detailed"> |
||||
<a-input v-model="form.detailed" type="textarea" /> |
||||
</a-form-model-item> |
||||
<a-form-model-item> |
||||
<a-checkbox @change="onChange" :checked="form.flag"> |
||||
设置为默认抬头 |
||||
</a-checkbox> |
||||
</a-form-model-item> |
||||
</a-form-model> |
||||
</template> |
||||
</a-modal> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
name: "billTitle", |
||||
components: { }, |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
flag:'',//当前操作是添加还是编辑，若为add是添加，为edit是编辑 |
||||
copyItem:{},//备份当行数据 |
||||
labelCol: { span: 5 }, |
||||
wrapperCol: { span: 19 }, |
||||
billTitle:[ |
||||
{ |
||||
id:1, |
||||
type:'1',//发票类型1为专用2为普通 |
||||
name:'易创网络科技有限公司', |
||||
flag:true,//是否默认抬头 |
||||
dutyNum:'6974980492840298590',//税号 |
||||
phone:'17888889999',//公司注册电话 |
||||
account:'6212261717000030000',//公司账户 |
||||
addr:'河南省驻马店市驿城区黄淮学院北区' |
||||
}, |
||||
{ |
||||
id:2, |
||||
type:'1',//发票类型1为专用2为普通 |
||||
name:'易创网络科技有限公司', |
||||
flag:false,//是否默认抬头 |
||||
dutyNum:'6974980492840298590',//税号 |
||||
phone:'17888889999',//公司注册电话 |
||||
account:'6212261717000030000',//公司账户 |
||||
addr:'河南省驻马店市驿城区黄淮学院北区' |
||||
}, |
||||
{ |
||||
id:3, |
||||
type:'1',//发票类型1为专用2为普通 |
||||
name:'易创网络科技有限公司', |
||||
flag:false,//是否默认抬头 |
||||
dutyNum:'6974980492840298590',//税号 |
||||
phone:'17888889999',//公司注册电话 |
||||
account:'6212261717000030000',//公司账户 |
||||
addr:'河南省驻马店市驿城区黄淮学院北区' |
||||
} |
||||
],//发票抬头列表 |
||||
addrList:[ |
||||
{ |
||||
id:1, |
||||
name:'吴一', |
||||
sex:'1', |
||||
phone:'17777777777', |
||||
addr:'210521', |
||||
detailed:'黄淮学院北区', |
||||
flag:true,//是否是默认地址 |
||||
},//地址一 |
||||
{ |
||||
id:2, |
||||
name:'吴二', |
||||
sex:'2', |
||||
phone:'17777777777', |
||||
addr:'210521', |
||||
detailed:'黄淮学院北区', |
||||
flag:false,//是否是默认地址 |
||||
},//地址二 |
||||
{ |
||||
id:3, |
||||
name:'吴三', |
||||
sex:'1', |
||||
phone:'17777777777', |
||||
addr:'210521', |
||||
detailed:'黄淮学院北区', |
||||
flag:false,//是否是默认地址 |
||||
},//地址三 |
||||
],//地址列表 |
||||
addr1:'210521', |
||||
//弹窗数据 |
||||
form: { |
||||
id:'', |
||||
type: undefined, |
||||
name: '', |
||||
addr: '', |
||||
dutyNum: '', |
||||
account: '', |
||||
phone: '', |
||||
flag:false//是否默认地址 |
||||
}, |
||||
rules: { |
||||
name: [{ required: true, message: '请输入发票抬头', trigger: 'blur' },], |
||||
dutyNum: [{ required: true, message: '请输入税号', trigger: 'blur' },], |
||||
visit: [ |
||||
{ required: true, message: '请选择您的配送方式', trigger: 'change' }, |
||||
], |
||||
addr: [{ required: true, message: '请选择地址', trigger: 'blur' }], |
||||
detailed: [{ required: true, message: '请输入公司注册地址', trigger: 'blur' }], |
||||
phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' },], |
||||
card: [{ required: true, message: '请输入银行账户', trigger: 'blur' },], |
||||
}, |
||||
}; |
||||
}, |
||||
methods: { |
||||
addAddr(){ |
||||
this.visible = true |
||||
this.flag = 'add' |
||||
}, |
||||
changeDefault(){ |
||||
this.billTitle.forEach(obj =>{ |
||||
if(obj.flag){ |
||||
obj.flag = !obj.flag |
||||
} |
||||
}) |
||||
}, |
||||
clearForm(){ |
||||
this.form = { |
||||
id:'', |
||||
type: undefined, |
||||
name: '', |
||||
addr: '', |
||||
dutyNum: '', |
||||
account: '', |
||||
phone: '', |
||||
flag:false//是否默认抬头 |
||||
} |
||||
}, |
||||
handleOk(e) { |
||||
//判断是添加抬头还是修改抬头 |
||||
let that = this |
||||
this.$refs.ruleForm.validate(valid => { |
||||
if (valid) {//验证通过 |
||||
if(this.flag == 'add') {//如果是新增抬头 |
||||
if(this.form.flag){//修改为默认抬头 |
||||
this.changeDefault() |
||||
this.billTitle.unshift(this.form) |
||||
}else{//不修改为默认抬头 |
||||
this.billTitle.push(this.form) |
||||
} |
||||
}else if(this.flag == 'edit'){//如果是修改抬头 |
||||
//查找当前索引 |
||||
let itemIndex3 = this.billTitle.findIndex(item =>item.id == this.form.id) |
||||
if(this.form.flag){//如果需要修改为默认抬头 |
||||
this.changeDefault() |
||||
this.form.flag = true |
||||
this.billTitle[itemIndex3] = this.form |
||||
console.log("this.billTitle") |
||||
console.log(this.billTitle) |
||||
}else{ |
||||
this.billTitle[itemIndex3] = this.form |
||||
} |
||||
} |
||||
//清空表单 |
||||
this.clearForm() |
||||
this.flag = '' |
||||
this.visible = false; |
||||
} else {} |
||||
}); |
||||
}, |
||||
handleCancel() { |
||||
this.visible = false; |
||||
if(this.flag == 'edit'){ |
||||
let itemIndex4 = this.billTitle.findIndex(item =>item.id == this.form.id) |
||||
this.billTitle[itemIndex4] = this.copyItem |
||||
} |
||||
this.flag = '' |
||||
this.$refs['ruleForm'].resetFields() |
||||
}, |
||||
onChange(e) { |
||||
this.form.flag = e.target.checked |
||||
}, |
||||
handleEdit(item){ |
||||
this.copyItem = JSON.parse(JSON.stringify(item)); |
||||
this.visible = true |
||||
this.flag = 'edit' |
||||
this.form = item |
||||
}, |
||||
confirm1(id) { |
||||
let itemIndex = this.billTitle.findIndex(item =>item.id == id) |
||||
this.billTitle.splice(itemIndex,1) |
||||
}, |
||||
confirm2(id) { |
||||
this.changeDefault() |
||||
let itemIndex2 = this.billTitle.findIndex(item =>item.id == id) |
||||
this.billTitle[itemIndex2].flag = true |
||||
}, |
||||
cancel(e) { |
||||
this.$message.warning('已取消'); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
@import '../assets/common.css'; |
||||
.modelForm{ |
||||
padding:20px 100px; |
||||
} |
||||
.addrList .j-area-linkage /deep/ .area-select{ |
||||
background-color: #fff; |
||||
border: none; |
||||
span{ |
||||
padding-left: 0; |
||||
font-size: 12px; |
||||
color:#313131; |
||||
cursor:auto; |
||||
font-weight: 500; |
||||
} |
||||
i{ |
||||
display: none; |
||||
} |
||||
} |
||||
.btnDiv{ |
||||
justify-content: center; |
||||
.dialogButton { |
||||
width: 300px; |
||||
height: 42px; |
||||
text-align: center; |
||||
line-height: 42px; |
||||
transition: all 0.2s; |
||||
} |
||||
.primary { |
||||
background: #1b1b1b; |
||||
border: 2px solid #1b1b1b; |
||||
color: #e5dfd9; |
||||
&:hover { |
||||
opacity: 0.8; |
||||
} |
||||
} |
||||
} |
||||
.billTitle{ |
||||
width: 1114px; |
||||
margin:0 auto; |
||||
padding-top: 50px; |
||||
.weizhuce{ |
||||
text-align: center; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
p{ |
||||
width: 300px; |
||||
} |
||||
} |
||||
.addrList{ |
||||
width: 800px; |
||||
margin: 0 auto; |
||||
.item{ |
||||
padding-top: 40px; |
||||
border-bottom: 1px solid #DADADA; |
||||
color: #1A1919; |
||||
p{ |
||||
font-size: 12px; |
||||
} |
||||
.default{ |
||||
span{ |
||||
display: inline-block; |
||||
padding: 4px 12px; |
||||
box-sizing: content-box; |
||||
background: #F8F8F8; |
||||
width: 72px; |
||||
height: 21px; |
||||
text-align: center; |
||||
line-height: 21px; |
||||
} |
||||
|
||||
} |
||||
.d-flex{ |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
.btnDiv{ |
||||
.btn{ |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.btn{ |
||||
text-decoration: underline; |
||||
margin-right: 20px; |
||||
} |
||||
div:first-child{ |
||||
margin-bottom: 12px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue