Skip to content

肖康 / H5_2.0

Go to a project
Commit 62f100a4 by LJM
Options

发票

parent 379b97b1
Inline Side-by-side
Showing with 263 additions and 21 deletions
assets/css/mine/invoice.scss
......@@ -147,6 +147,68 @@
}
}
}
}
.page-userAddress-add {
padding: 180rpx 24rpx 100rpx 24rpx;
.tip {
margin-top: 16rpx;
margin-bottom: 16rpx;
padding: 15rpx 0 15rpx 24rpx;
background: #fff8f2;
border-radius: 0px 30rpx 30rpx 30rpx;
.iconfont {
font-size: 32rpx;
font-weight: bold;
color: #f98119;
margin-right: 16rpx;
}
.text {
margin-left: 16rpx;
.t1 {
font-size: 22rpx;
color: #f98119;
}
.t2 {
font-size: 22rpx;
color: #1969f9;
}
}
}
.tab {
position: fixed;
top: 88rpx;
left: 0;
right: 0;
width: 100%;
background: #ffffff;
height: 88rpx;
z-index: 99;
margin-bottom: 16rpx;
.box {
position: relative;
height: 100%;
transition: all 0.4s ease;
font-size: 28rpx;
color: #484b59;
&.curr {
color: #292b33;
font-weight: bold;
&::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 53rpx;
height: 7rpx;
margin: 0 auto;
background: #1969f9;
border-radius: 4rpx;
content: '';
}
}
}
}
.form-box {
margin-bottom: 16rpx;
border-radius: 10rpx;
......@@ -206,6 +268,7 @@
}
}
.setting-default {
margin-top: 16rpx;
padding: 0 24rpx;
height: 88rpx;
background: #ffffff;
......@@ -215,6 +278,105 @@
color: #484b59;
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100rpx;
z-index: 9;
background: #ffffff;
box-shadow: 0px -4rpx 20rpx 0px rgba(198, 199, 204, 0.1);
border-radius: 10rpx 10rpx 0px 0px;
padding: 0 24rpx;
.btn1 {
width: 100%;
height: 68rpx;
background: #1969f9;
border-radius: 10rpx;
.iconfont {
font-size: 44rpx;
color: #ffffff;
}
.text {
margin-left: 12rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
.info-title {
height: 80rpx;
background: #f5f5f7;
.info-title-t1 {
font-size: 24rpx;
color: #919399;
}
.iconfont {
color: #919399;
font-size: 32rpx;
}
}
.invoice-form {
padding: 24rpx;
background: #ffffff;
border-radius: 10rpx;
.label-box {
margin-bottom: 16rpx;
.t1 {
font-size: 24rpx;
color: #484b59;
}
}
.tab-type {
margin-bottom: 28rpx;
.box {
background: #f5f5f7;
border-radius: 6rpx;
width: 319rpx;
height: 72rpx;
font-size: 24rpx;
color: #292b33;
border-radius: 6rpx;
transition: all 0.4s ease;
&.curr {
color: #ffffff;
background: #1969f9;
}
}
}
.input-box {
margin-bottom: 28rpx;
.input-label {
margin-bottom: 16rpx;
.required {
font-size: 24rpx;
color: #1969f9;
}
.tt {
font-size: 24rpx;
color: #484b59;
}
}
.uni-input {
height: 72rpx;
background: #f5f5f7;
border-radius: 10px;
text-indent: 24rpx;
font-size: 24rpx;
border: 1px solid transparent;
transition: all 0.4s ease;
&::-webkit-input-placeholder {
color: #919399;
}
&:focus-within {
background-color: #ffffff;
border: 1px solid #1969f9;
}
}
}
}
}
.no-data {
......
pages/mine/invoice.vue
......@@ -26,7 +26,7 @@
<text class="default-text">设为默认</text>
</view>
<view class="row verCenter">
<navigator class="edit row verCenter" url="/userAddressEdit" hover-class="none">
<navigator class="edit row verCenter" url="/user/invoiceEdit" hover-class="none">
<text class="iconfont icon-bjt"></text>
<text class="tt">编辑</text>
</navigator>
......@@ -53,7 +53,7 @@
<text class="default-text">默认发票</text>
</view>
<view class="row verCenter">
<navigator class="edit row verCenter" url="/userAddressEdit" hover-class="none">
<navigator class="edit row verCenter" url="/user/invoiceEdit" hover-class="none">
<text class="iconfont icon-bjt"></text>
<text class="tt">编辑</text>
</navigator>
......@@ -70,7 +70,7 @@
<text class="tt">暂无发票信息</text>
</view>
<view class="btn row verCenter">
<navigator class="btn1 row rowCenter verCenter" url="/userAddressAdd" hover-class="none">
<navigator class="btn1 row rowCenter verCenter" url="/user/invoiceAdd" hover-class="none">
<text class="iconfont icon-tj"></text>
<text class="text">添加新发票</text>
</navigator>
......
pages/mine/invoiceAdd.vue
<template>
<view class="page-userAddress">
<navElement title="新增地址"></navElement>
<view class="page-userAddress-add">
<navElement title="新增发票"></navElement>
<view class="tab row avarage verCenter">
<view class="box row rowCenter verCenter" @click="tab(index)" :class="{ curr: index == curr }" :key="index" v-for="(item, index) in text_arr">{{ item }}</view>
</view>
<view class="tip row">
<text class="iconfont icon-ts"></text>
<view class="text column">
<text class="t1">1.自营商品的增值税普通发票，将随货一起快递给您；</text>
<text class="t1">2.默认使用收货地址，您也可以自行修改。</text>
</view>
</view>
<view class="invoice-form">
<view class="label-box"><text class="t1">开票信息</text></view>
<view class="tab-type row bothSide verCenter">
<view class="box curr row rowCenter verCenter">公司</view>
<view class="box row rowCenter verCenter">个人</view>
</view>
<view class="input-box">
<view class="input-label">
<text class="required">*</text>
<text class="tt">开票公司名称：</text>
</view>
<view><input type="text" placeholder="请输入开票公司名称" class="uni-input" /></view>
</view>
<view class="input-box" style="margin-bottom: 0;">
<view class="input-label">
<text class="required">*</text>
<text class="tt">税务登记号：</text>
</view>
<view><input type="text" placeholder="请输入税务登记号" class="uni-input" /></view>
</view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认发票</text>
<view><switch checked style="transform:scale(0.7)" /></view>
</view>
<view class="info-title row bothSide verCenter">
<text class="info-title-t1">展开收票信息（非必填）</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="form-box">
<view class="input-box input row verCenter">
<text class="tt">收货人</text>
......@@ -27,12 +66,8 @@
</view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址"></textarea></view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认地址</text>
<view><switch checked style="transform:scale(0.7)" /></view>
</view>
<view class="btn row verCenter">
<view class="btn1 row rowCenter verCenter"><text class="text">保存地址</text></view>
<view class="btn1 row rowCenter verCenter"><text class="text">保存</text></view>
</view>
</view>
</template>
......@@ -51,11 +86,16 @@ export default {
array: ['0086', '00886', '00853', '00852'],
formParams: {
intl_code: '86'
}
},
curr: 0,
text_arr: ['增值税普通发票', '增值税专用发票']
};
},
onLoad() {},
methods: {
tab(index) {
this.curr = index;
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
......@@ -66,5 +106,5 @@ export default {
</script>
<style lang="scss">
@import '@/assets/css/mine/userAddress.scss';
@import '@/assets/css/mine/invoice.scss';
</style>
pages/mine/invoiceEdit.vue
<template>
<view class="page-userAddress">
<navElement title="新增地址"></navElement>
<view class="page-userAddress-add">
<navElement title="编辑发票"></navElement>
<view class="tab row avarage verCenter">
<view class="box row rowCenter verCenter" @click="tab(index)" :class="{ curr: index == curr }" :key="index" v-for="(item, index) in text_arr">{{ item }}</view>
</view>
<view class="tip row">
<text class="iconfont icon-ts"></text>
<view class="text column">
<text class="t1">1.自营商品的增值税普通发票，将随货一起快递给您；</text>
<text class="t1">2.默认使用收货地址，您也可以自行修改。</text>
</view>
</view>
<view class="invoice-form">
<view class="label-box"><text class="t1">开票信息</text></view>
<view class="tab-type row bothSide verCenter">
<view class="box curr row rowCenter verCenter">公司</view>
<view class="box row rowCenter verCenter">个人</view>
</view>
<view class="input-box">
<view class="input-label">
<text class="required">*</text>
<text class="tt">开票公司名称：</text>
</view>
<view><input type="text" placeholder="请输入开票公司名称" class="uni-input" /></view>
</view>
<view class="input-box" style="margin-bottom: 0;">
<view class="input-label">
<text class="required">*</text>
<text class="tt">税务登记号：</text>
</view>
<view><input type="text" placeholder="请输入税务登记号" class="uni-input" /></view>
</view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认发票</text>
<view><switch checked style="transform:scale(0.7)" /></view>
</view>
<view class="info-title row bothSide verCenter">
<text class="info-title-t1">展开收票信息（非必填）</text>
<text class="iconfont icon-arrtop"></text>
</view>
<view class="form-box">
<view class="input-box input row verCenter">
<text class="tt">收货人</text>
......@@ -27,12 +66,8 @@
</view>
<view class="input-box textarea row verCenter"><textarea placeholder="请输入详细街道地址"></textarea></view>
</view>
<view class="setting-default row verCenter bothSide">
<text class="tt">设为默认地址</text>
<view><switch checked style="transform:scale(0.7)" /></view>
</view>
<view class="btn row verCenter">
<view class="btn1 row rowCenter verCenter"><text class="text">保存地址</text></view>
<view class="btn1 row rowCenter verCenter"><text class="text">保存</text></view>
</view>
</view>
</template>
......@@ -51,11 +86,16 @@ export default {
array: ['0086', '00886', '00853', '00852'],
formParams: {
intl_code: '86'
}
},
curr: 0,
text_arr: ['增值税普通发票', '增值税专用发票']
};
},
onLoad() {},
methods: {
tab(index) {
this.curr = index;
},
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
......@@ -66,5 +106,5 @@ export default {
</script>
<style lang="scss">
@import '@/assets/css/mine/userAddress.scss';
@import '@/assets/css/mine/invoice.scss';
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment