|
@@ -3,7 +3,14 @@
|
|
|
<!-- 筛选弹框 -->
|
|
|
<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
|
|
|
<view class="homePage-head">
|
|
|
- <text class="homePage-tit">交易记录</text>
|
|
|
+ <view class="head-con">
|
|
|
+ <text class="homePage-tit">交易记录</text>
|
|
|
+ <view class="total-con">
|
|
|
+ 总计:
|
|
|
+ <text class="goleNum">150</text>
|
|
|
+ <image src="/static/ledou.png" class="ld-icon"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<image class="filter-icon" src="@/static/filter.png" @tap="openScreen=true"></image>
|
|
|
</view>
|
|
|
<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
|
|
@@ -29,20 +36,19 @@
|
|
|
<view class="cell-item-c handle-con">
|
|
|
<view class="cell-item-label">操作</view>
|
|
|
<view class="cell-item-main">
|
|
|
- <u-button type="primary" size="mini" v-if="item.state" class="handle-btn" @click="revokeFun(item)">撤销单据</u-button>
|
|
|
+ <u-button size="mini" v-if="item.state" class="handle-btn" hover-class="none" :custom-style="customBtnStyle" @click="revokeFun(item)">撤销单据</u-button>
|
|
|
<text v-else style="color: #909399;">单据已撤销</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
|
|
|
+ <u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list" :margin-top="300"></u-empty>
|
|
|
<view class="loadmore">
|
|
|
<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
</template>
|
|
|
-
|
|
|
<script>
|
|
|
import searchModal from './searchModal.vue'
|
|
|
export default {
|
|
@@ -67,6 +73,11 @@
|
|
|
endDate: '', // 创建时间默认筛选近7天
|
|
|
account: '' // 支付账户
|
|
|
},
|
|
|
+ customBtnStyle: { // 撤销单据 自定义按钮样式
|
|
|
+ borderColor: '#07c160',
|
|
|
+ backgroundColor: '#07c160',
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onShow() {
|
|
@@ -135,9 +146,10 @@
|
|
|
<style lang="scss">
|
|
|
.homePage-container {
|
|
|
width: 100%;
|
|
|
- padding-top: 84rpx;
|
|
|
+ padding-top: 102rpx;
|
|
|
// 筛选菜单
|
|
|
.homePage-head{
|
|
|
+ font-size: 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
@@ -145,13 +157,39 @@
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 9;
|
|
|
- padding: 20rpx 30rpx;
|
|
|
+ padding: 26rpx 30rpx;
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0rpx 0rpx 14rpx rgba(0,0,0,.05);
|
|
|
width: 100%;
|
|
|
+ border-top: 10rpx solid #f8f8f8;
|
|
|
+ .head-con{
|
|
|
+ flex-grow: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .homePage-tit{
|
|
|
+ color: #040301;
|
|
|
+ }
|
|
|
+ .total-con{
|
|
|
+ color: #040301;
|
|
|
+ .goleNum{
|
|
|
+ color: #eb0000;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .ld-icon{
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin: 0 0 0 10rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.filter-icon{
|
|
|
+ flex-shrink: 0;
|
|
|
width: 36rpx;
|
|
|
height: 36rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
// 列表
|
|
@@ -161,18 +199,19 @@
|
|
|
}
|
|
|
// 列表样式
|
|
|
.cell-item-con{
|
|
|
- padding: 0 30rpx;
|
|
|
margin-top: 10rpx;
|
|
|
.cell-item{
|
|
|
background-color: #fff;
|
|
|
color: #606266;
|
|
|
- padding: 20rpx 30rpx 14rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
border-radius: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
.cell-item-c{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- padding: 10rpx 0;
|
|
|
+ padding: 18rpx 0;
|
|
|
+ border-bottom: 1rpx solid #f2f2f2;
|
|
|
.cell-item-label{
|
|
|
flex-shrink: 0;
|
|
|
width: 200rpx;
|
|
@@ -195,12 +234,15 @@
|
|
|
.red {
|
|
|
color: red;
|
|
|
}
|
|
|
+ &:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
}
|
|
|
.handle-con{
|
|
|
align-items: center;
|
|
|
- border-top: 1rpx solid #f8f8f8;
|
|
|
- margin-top: 10rpx;
|
|
|
- padding-top: 18rpx;
|
|
|
+ // margin-top: 10rpx;
|
|
|
+ // padding-top: 18rpx;
|
|
|
+ // padding: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|