fourPayProject/51uni/homePages/EquipmentManagement/paymentList.vue
2025-03-31 10:23:28 +08:00

207 lines
3.9 KiB
Vue

<template>
<view class="content">
<view class="container">
<view class="haers">
<view style="width: 30%; text-align: left; ">
<u-icon name="arrow-left" color="#fff" size="18"></u-icon>
</view>
<view style="width: 30%; text-align: center; font-size: 18px; ">
收款记录
</view>
<view style="width: 30%;text-align: right;" @click="goCust()">
自定义查询
</view>
</view>
<view class="box_" v-for="(item,index) in 7" :key="index">
<view class="box-top">
<view class="">2024-01-09</view>
<view class="box-bs">
<view class="h_size">收款总笔数:1</view>
<view class="h_size">收款总金额:100.00</view>
</view>
<view class="box-bs">
<view class="h_size">收款总笔数:1</view>
<view class="h_size">收款总金额:100.00</view>
</view>
</view>
<view class="box-bottom">
<view class="bottom-bs">
<view class="">订单号</view>
<view class="">7a928e69a9a546d985d0b9c955184bad</view>
</view>
<view class="bottom-bs">
<view class="">交易类型:支付宝扫码</view>
<view style="font-size: 20px;color: #E4612E; ">+100.00</view>
</view>
<view class="bottom-bs">
<view class="">设备SN:GS202300000042</view>
</view>
<view class="bottom-bs">
<view class="">2024-01-09 09:39:34</view>
</view>
</view>
</view>
<u-loadmore :status="status" v-if="show == true" />
</view>
</view>
</template>
<script>
import headers from '../../components/header/headers.vue'
export default {
data() {
return {
titles: "收款记录",
text: '请输入商户名称或SN查询',
msg: "1",
dataList: [],
show: false,
status: 'loading',
}
},
onShow() {
// this.actList = ["1", "1", "1", "1", "1", ]
// this.status = "nomore" 底部刷新结束
},
onPullDownRefresh() {
console.log("刷新");
uni.stopPullDownRefresh()
},
onReachBottom() {
// this.show = true
setTimeout(() => {
console.log("加载执行");
}, 2000)
},
components: {
headers
},
methods: {
goCust() {
uni.navigateTo({
url: '/homePages/EquipmentManagement/CustomQuery'
})
},
goback() {
uni.navigateBack()
}
}
}
</script>
<style scoped lang="scss">
input {
&::-webkit-input-placeholder,
/* WebKit browsers*/
&:-moz-input-placeholder,
/* Mozilla Firefox 4 to 18*/
&::-moz-input-placeholder,
/* Mozilla Firefox 19+*/
&:-ms-input-placeholder
/* Internet Explorer 10+*/
{
color: #fff !important;
}
}
.content {
background: #f4f4f4;
height: 100vh;
}
.container {
width: 100%;
background: #f4f4f4;
box-sizing: border-box;
padding-top: 98px;
}
.haers {
width: 100%;
background: #E4612E;
height: 88px;
box-sizing: border-box;
padding: 0px 15px;
padding-top: 40px;
color: white;
z-index: 99999;
background: #E4612E;
position: fixed;
top: 0px;
display: flex;
align-items: center;
justify-content: space-between;
}
.input-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 65%;
height: 25px;
border-radius: 50px;
border: 1px solid #fff;
color: white;
input {
width: 80%;
}
}
.box_ {
width: 95%;
margin: 0 auto;
margin-bottom: 15px;
background: #fff;
// border-bottom: 1px solid #efefef;
}
.title_ {
font-size: 18px;
margin: 10px 0px;
}
.box-top {
width: 100%;
border-bottom: 1px solid #efefef;
box-sizing: border-box;
padding: 10px;
}
.box-bottom {
width: 100%;
box-sizing: border-box;
padding: 10px;
}
.box-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #979797;
margin: 2px 0px;
}
.bottom-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #000000;
margin-bottom: 5px;
}
</style>