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.
186 lines
3.5 KiB
186 lines
3.5 KiB
<template>
|
|
<view class="invoice">
|
|
<view class="invoice-bd">
|
|
<view class="item" :class="tabIndex == i?'item-on':''" v-for="i in 5" :key="i" @click="toDetail(i)">
|
|
<view class="hd">
|
|
<view class="l">
|
|
<view class="a">
|
|
<text>单位</text>我是单位名称
|
|
</view>
|
|
<view class="b">
|
|
<text>税号</text>23122-33890099
|
|
</view>
|
|
</view>
|
|
<view class="r">使用</view>
|
|
</view>
|
|
<view class="bd">
|
|
<view class="c" @click="selectItem(i)">
|
|
<image v-if="tabIndex == i" src="/static/invoice/select-on.png"></image>
|
|
<image v-else src="/static/invoice/select.png"></image>
|
|
{{tabIndex == i?'已设为默认':'设为默认'}}
|
|
</view>
|
|
<view class="d">
|
|
<text>编辑</text>
|
|
<text>删除</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="invoice-fd">
|
|
<text>+</text>添加发脾抬头
|
|
</view>
|
|
<empty v-if="isShow" :isLoading="isLoading" tips="暂无相关信息" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Empty from '@/components/empty'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
tabIndex: 1,
|
|
isShow: true
|
|
};
|
|
},
|
|
components: {
|
|
Empty
|
|
},
|
|
methods: {
|
|
selectItem(i){
|
|
this.tabIndex = i
|
|
},
|
|
toDetail(i){
|
|
uni.navigateTo({
|
|
url: "/pages/invoice/detail"
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.invoice{
|
|
padding: 0 0 30rpx;
|
|
overflow: hidden;
|
|
&-bd{
|
|
overflow: hidden;
|
|
.item{
|
|
padding: 10rpx 14rpx 10rpx 60rpx;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
margin-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.hd{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
border-bottom: 1px solid #F3F3F3;
|
|
.a{
|
|
padding-top: 15rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #262626;
|
|
text{
|
|
width: 98rpx;
|
|
height: 44rpx;
|
|
background: #FDF4F4;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
display: block;
|
|
margin-right: 30rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #E02E24;
|
|
line-height: 44rpx;
|
|
}
|
|
}
|
|
.b{
|
|
padding: 20rpx 0;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #838383;
|
|
text{
|
|
color: #262626;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
.r{
|
|
width: 104rpx;
|
|
height: 60rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 4rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
border: 1px solid #CACACA;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #555555;
|
|
}
|
|
}
|
|
.bd{
|
|
padding: 20rpx 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.c{
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #A2A2A2;
|
|
image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
.d{
|
|
width: 200rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #B8B8B8;
|
|
text{
|
|
margin-left: 30rpx;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
&-on{
|
|
.bd .c{
|
|
color: #E02E24;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
&-fd{
|
|
width: 664rpx;
|
|
height: 104rpx;
|
|
background: #F55349;
|
|
border-radius: 8rpx;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-top: 30rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text{
|
|
font-size: 60rpx;
|
|
margin-right: 14rpx;
|
|
margin-top: -5px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|