first commit
This commit is contained in:
zhouyanli
387
property-uniapp-project/pages/payment-list/paymentIndex.vue
Normal file
387
property-uniapp-project/pages/payment-list/paymentIndex.vue
Normal file
@@ -0,0 +1,387 @@
|
||||
<template>
|
||||
<view class="contentStyle" style="">
|
||||
<view :style="{height:statusBarHeight+'px'}"></view>
|
||||
|
||||
<uni-nav-bar title="生活缴费" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
|
||||
</uni-nav-bar>
|
||||
<view class="topbox">
|
||||
<image class="titleImg" src="/static/propertyImgs/payTitle.png"></image>
|
||||
<image class="payImg" src="/static/propertyImgs/payImg.png"></image>
|
||||
</view>
|
||||
<scroll-view class="page" scroll-y="true">
|
||||
<view class="container">
|
||||
<!-- 已缴费/欠费列表 -->
|
||||
<view class="bill-list">
|
||||
<view class="bill-item" @click="goToBill(item)" v-for="item,index in paymentList" :key="index">
|
||||
<image class="billIcon" :src="item.icon"></image>
|
||||
<view class="bill-info">
|
||||
<view class="bill-title">{{item.name}}
|
||||
<view class="bill-status debt" v-if="item.status=='已欠费'">已欠费</view>
|
||||
</view>
|
||||
<view class="bill-desc">{{item.address}}</view>
|
||||
</view>
|
||||
|
||||
<view class="arrow"></view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 新增缴费区域 -->
|
||||
<view class="add-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">新增缴费</text>
|
||||
<text class="record-link" @click="goToRecord">缴费记录</text>
|
||||
</view>
|
||||
|
||||
<view class="grid-list">
|
||||
<view class="grid-item" v-for="(item, index) in addList" :key="index" @click="goToAdd(item)">
|
||||
<view class="icon-box" :class="item.iconClass">
|
||||
<image class="iconStyle" :src="item.icon"></image>
|
||||
</view>
|
||||
<text class="item-name">{{ item.name +'费'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
onReady: function(e) {
|
||||
// console.log('onReady')
|
||||
},
|
||||
components: {
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
/* 设定状态栏默认高度 */
|
||||
statusBarHeight: 20,
|
||||
paymentList: [{
|
||||
id: 1,
|
||||
name: '物业费',
|
||||
status: '已欠费',
|
||||
address: '桂花园（别墅）2号楼2层',
|
||||
icon: "/static/propertyImgs/property.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '暖气费',
|
||||
status: '',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "/static/propertyImgs/heating.png",
|
||||
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '电费',
|
||||
status: '已欠费',
|
||||
address: '山东省日照市东港区桂花园（别墅）2号楼2层',
|
||||
icon: "/static/propertyImgs/electric.png",
|
||||
|
||||
}
|
||||
],
|
||||
// 新增缴费列表数据
|
||||
addList: [{
|
||||
name: "燃气",
|
||||
type: "gas",
|
||||
icon: "/static/propertyImgs/gas.png",
|
||||
iconClass: "gas"
|
||||
},
|
||||
{
|
||||
name: "水",
|
||||
type: "water",
|
||||
icon: "/static/propertyImgs/water.png",
|
||||
iconClass: "water"
|
||||
},
|
||||
{
|
||||
name: "物业",
|
||||
type: "property",
|
||||
icon: "/static/propertyImgs/property.png",
|
||||
iconClass: "property"
|
||||
},
|
||||
{
|
||||
name: "电",
|
||||
type: "electric",
|
||||
icon: "/static/propertyImgs/electric.png",
|
||||
iconClass: "electric"
|
||||
},
|
||||
{
|
||||
name: "暖气",
|
||||
type: "heating",
|
||||
icon: "/static/propertyImgs/heating.png",
|
||||
iconClass: "heating"
|
||||
},
|
||||
{
|
||||
name: "车位",
|
||||
type: "parking",
|
||||
icon: "/static/propertyImgs/parkingIcon.png",
|
||||
iconClass: "parking"
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
// 跳转到缴费
|
||||
goToBill(item) {
|
||||
uni.setStorageSync('arrearsPayment', item.name)
|
||||
if (item.status == '已欠费') {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/arrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/noArrearsPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
},
|
||||
// 跳转到缴费记录
|
||||
goToRecord() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/paymentRecord',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
// 跳转到新增缴费
|
||||
goToAdd(type) {
|
||||
uni.setStorageSync('addPaymentType', type.name)
|
||||
uni.redirectTo({
|
||||
url: '/pages/payment-list/addPayment',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
},
|
||||
goBack() {
|
||||
uni.switchTab({
|
||||
url: '/pages/serviceIndex/serviceIndex',
|
||||
success: res => {},
|
||||
fail: () => {},
|
||||
complete: () => {}
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.contentStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
/* 关键：占满屏幕高度 */
|
||||
background: linear-gradient(180deg, #dfedfd, #F6FAFF);
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0px 20px;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #fff; */
|
||||
}
|
||||
|
||||
.topbox {
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.titleImg {
|
||||
width: 131px;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
.payImg {
|
||||
width: 250px;
|
||||
height: 230px;
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
bottom: -100px;
|
||||
}
|
||||
|
||||
.container {
|
||||
/* padding: 15px; */
|
||||
}
|
||||
|
||||
/* ===================== 欠费列表 ===================== */
|
||||
.bill-list {
|
||||
margin-bottom: 40rpx;
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.bill-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 10px 10px 10px 0px;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.bill-info {
|
||||
width: calc(90% - 50px);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.billIcon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.bill-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bill-desc {
|
||||
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 已欠费标签 */
|
||||
.bill-status {
|
||||
padding: 1px 8px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
background-color: #E34D59;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* 右侧箭头 */
|
||||
.arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-right: 4rpx solid #ccc;
|
||||
border-bottom: 4rpx solid #ccc;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* ===================== 新增缴费区域 ===================== */
|
||||
.add-section {
|
||||
background-color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.record-link {
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
/* 网格列表 */
|
||||
.grid-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
gap: 13px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: calc(25% - 30px);
|
||||
background-color: #F6F9FE;
|
||||
border-radius: 12rpx;
|
||||
padding: 10px;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 图标容器 */
|
||||
.icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #e6f0ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* margin-right: 24rpx; */
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.iconStyle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user