You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
4.7 KiB
245 lines
4.7 KiB
<template>
|
|
<view class="fapiao">
|
|
<view class="order">
|
|
<image src="../../static/images/img/userBg.png" mode=""></image>
|
|
<view class="info">
|
|
<view class="item">
|
|
订单编号：89897989886597989
|
|
</view>
|
|
<view class="subItem">
|
|
<text>开票金额：</text><text style="color:#EB6100;margin-right:17rpx;">￥208.00</text>
|
|
<u-icon name="error-circle" color="#999999" size="13"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="form">
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>发票类型</text>
|
|
<u-icon name="error-circle" color="#999999" size="13"></u-icon>
|
|
</view>
|
|
<view class="content">
|
|
普通发票-纸质
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>抬头类型</text>
|
|
</view>
|
|
<view class="content">
|
|
<u-radio-group
|
|
v-model="form.type"
|
|
placement="row">
|
|
<u-radio activeColor="#EB6100" labelSize="13" labelColor="#222222" label="个人或事业单位"></u-radio>
|
|
<u-radio activeColor="#EB6100" labelSize="13" labelColor="#222222" label="企业" style="margin-left:70rpx;"></u-radio>
|
|
</u-radio-group>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>发票抬头</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
<text>填写需要开具发票的企业</text>
|
|
<u-icon name="arrow-right" color="#999999" size="13"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>税号</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
|
|
<u-input
|
|
placeholder="纳税人识别号"
|
|
border="none"
|
|
v-model="form.num"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>开户银行</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
<u-input
|
|
placeholder="选填"
|
|
border="none"
|
|
v-model="form.back"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>银行账号</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
|
|
<u-input
|
|
placeholder="选填"
|
|
border="none"
|
|
v-model="form.account"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>企业地址</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
|
|
<u-input
|
|
placeholder="选填"
|
|
border="none"
|
|
v-model="form.addr"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
<view class="formItem">
|
|
<view class="title">
|
|
<text>企业电话</text>
|
|
</view>
|
|
<view class="contentPlaceholder">
|
|
|
|
<u-input
|
|
placeholder="选填"
|
|
border="none"
|
|
v-model="form.phone"
|
|
></u-input>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="btn">
|
|
提交
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
|
|
form:{
|
|
type:'个人或事业单位',
|
|
company:null,
|
|
num:null,
|
|
back:null,
|
|
account:null,
|
|
addr:null,
|
|
phone:null,
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.fapiao{
|
|
background-color: #F2F3F4;
|
|
min-height: calc(100vh);
|
|
padding:24rpx;
|
|
.order{
|
|
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
&>image{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #C9D7E4;
|
|
border-radius: 10rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.info{
|
|
margin-left:20rpx;
|
|
flex:1;
|
|
|
|
justify-content: space-around;
|
|
.item{
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
.subItem{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top:21rpx;
|
|
text{
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form{
|
|
margin-top:20rpx;
|
|
padding: 30rpx 20rpx 0 20rpx;
|
|
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
.formItem{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom:43rpx;
|
|
.title{
|
|
display: flex;
|
|
align-items: center;
|
|
text{
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
}
|
|
.content{
|
|
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #222222;
|
|
}
|
|
|
|
}
|
|
.contentPlaceholder{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
align-items: center;
|
|
::v-deep input{
|
|
text-align:right !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
position: fixed;
|
|
bottom:50rpx;
|
|
width:94%;
|
|
left:3%;
|
|
padding:30rpx 0;
|
|
text-align: center;
|
|
background: #EB6100;
|
|
border-radius: 45px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style> |