Commit e2c43b61 authored by qipeng's avatar qipeng

开发票 搜索

parent 9b05a6c1
......@@ -337,6 +337,23 @@
"navigationBarBackgroundColor": "#F7F8FA",
"navigationBarTextStyle": "black"
}
},
{
"path" : "electronicInvoice/orderInquiry/orderInquiry",
"style" :
{
"navigationBarTitleText" : "查询订单",
"navigationStyle": "custom"
}
},
{
"path" : "electronicInvoice/billingList/billingList",
"style" :
{
"navigationBarTitleText" : "开票列表",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}
]
},
......
<template>
<view class="productBigBox">
<!--开票按钮-->
<view class="billing-invoice">
<image class="invoice-img" src="/pages/my/static/electronicInvoice/invoiceBtn.png"></image>
<view class="invoice-text">开票记录</view>
</view>
<!--脚部-->
<view class="billing-bottom">
<view class="bottom-check" :class="allChecked==true?'bottom-checkAct':''">
<checkbox class="round" :checked="allChecked" shape="circle"></checkbox>
<view class="bottom-allName">全部</view>
</view>
<view class="bottom-orderBox">
<view class="orderBox-money"><text>¥</text>30.00</view>
<view class="orderBox-num">共2个订单</view>
</view>
<view class="bottom-btn">去开票</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
tableDate:[],//列表内容
pageIndex:1,//当前页
pageTotal:0,//总条数
allChecked:true,//全选
}
},
onLoad(option) {
},
methods: {
getData(){//列表加载
console.log('加载了')
},
},
onReachBottom(){//上拉加载
this.pageIndex++
this.getData()
},
}
</script>
<style scoped="scoped" lang="scss">
.productBigBox{
background: #F7F8FA;
min-height: 100vh;
position: relative;
padding-bottom: 128rpx;
}
.billing-invoice{
width: 132rpx;
height: 132rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(207,207,207,0.5);
border-radius: 16rpx;
position: fixed;
right: 40rpx;
bottom: 200rpx;
z-index: 20;
.invoice-img{
display: block;
width: 48rpx;
height: 48rpx;
margin: 24rpx auto 12rpx auto;
}
.invoice-text{
width: 100%;
font-weight: 500;
font-size: 24rpx;
color: #333333;
line-height: 24rpx;
text-align: center;
}
}
.billing-bottom{
width: 750rpx;
height: 128rpx;
display: flex;
justify-content: space-between;
background: #FFFFFF;
border-top: solid 2px #DCDFE6;
padding: 18rpx 24rpx 0 24rpx;
position: fixed;
bottom: 0;
left: 0;
z-index: 20;
.bottom-check{
display: flex;
::v-deep .wx-checkbox-input,
::v-deep .uni-checkbox-input{
box-sizing: border-box;
width: 36rpx !important;
height: 36rpx !important;
margin: 26rpx 0 0 0;
}
.bottom-allName{
font-weight: 400;
font-size: 28rpx;
color: #333333;
line-height: 88rpx;
margin: 0 0 0 20rpx;
}
}
.bottom-checkAct{
::v-deep .wx-checkbox-input,
::v-deep .uni-checkbox-input{
background-color: #FE6600 !important;
border-color: #FE6600 !important;
color: #ffffff !important;
}
}
.bottom-orderBox{
.orderBox-money{
font-weight: 600;
font-size: 44rpx;
color: #333333;
line-height: 34rpx;
text{
font-weight: 400;
font-size: 24rpx;
}
}
.orderBox-num{
font-weight: 400;
font-size: 24rpx;
color: #666666;
line-height: 34rpx;
}
}
.bottom-btn{
width: 240rpx;
height: 88rpx;
background: #FE6600;
border-radius: 44rpx;
margin-top: 2rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
line-height: 88rpx;
text-align: center;
}
}
</style>
<template>
<view class="page-box">
<view class="inquiry-box">
<image class="inquiry-logo" src="/pages/my/static/electronicInvoice/logoLvYou.png"></image>
<view class="inquiry-searchIn" :class="borderNum==1?'inquiry-searchInAct':''">
<u-icon name="search"></u-icon>
<input @focus="searchInMessageFun()" @blur="searchOutMessageFun()" class="uni-input searchIn-Input" placeholder="填写待开票订单号/手机号" v-model="search" />
<image @click="searchClearFun()" v-if="search!=''" class="searchIn-imgClose" src="/pages/my/static/electronicInvoice/iconClose.png"></image>
<view class="searchIn-btn">搜索</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
search:'',
borderNum:0,
}
},
onLoad(option) {
},
methods: {
searchInMessageFun(){//获得焦点
this.borderNum = 1
},
searchOutMessageFun(){//失去焦点
this.borderNum = 0
},
searchClearFun(){//清除输入内容
this.search = ''
},
},
}
</script>
<style scoped="scoped" lang="scss">
.page-box{
background-color: #ffffff;
height: 100vh;
}
.inquiry-box{
width: 670rpx;
height: 240rpx;
margin: auto;
position: fixed;
top: 496rpx;
right: 0;
left: 0;
}
.inquiry-logo{
display: block;
width: 292rpx;
height: 72rpx;
margin: 0 auto 60rpx auto;
}
.inquiry-searchIn{
display: flex;
width: 670rpx;
height: 108rpx;
border: 4rpx solid #333333;
line-height: 100rpx;
border-radius: 54rpx;
background: #FFFFFF;
padding: 0 16rpx 0 34rpx;
position: relative;
::v-deep .u-icon__icon{
font-size: 50rpx !important;
color: #999999 !important;
font-weight: bold !important;
}
.searchIn-Input{
flex: 1;
height: 100rpx;
font-weight: 600;
font-size: 32rpx;
color: #333333;
line-height: 100rpx;
margin-left: 20rpx;
}
.searchIn-imgClose{
display: block;
width: 36rpx;
height: 36rpx;
position: absolute;
top: 34rpx;
right: 174rpx;
z-index: 10;
}
.searchIn-btn{
width: 132rpx;
height: 68rpx;
background: #FE6600;
border-radius: 34rpx;
margin-left: 26rpx;
font-weight: 600;
font-size: 32rpx;
color: #FFFFFF;
line-height: 68rpx;
text-align: center;
margin-top: 16rpx;
}
}
.inquiry-searchInAct{
border: 4rpx solid #FE6600;
}
</style>
<template>
</template>
<script>
</script>
<style>
</style>
\ No newline at end of file
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 to comment