280 lines
7.6 KiB
Vue
280 lines
7.6 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
|
||
<div class="searchBox_add">
|
||
<u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="community">
|
||
<div class="community_left">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/test.png" alt="" />
|
||
</div>
|
||
<div class="community_right" @click="changeShow">
|
||
<div class="community_right_text">
|
||
<div class="community_right_text1">世纪名城1号楼1单元101室</div>
|
||
<div class="community_right_text2">衡水市上海公馆6A</div>
|
||
</div>
|
||
<div class="community_right_more">
|
||
<u-icon bold color="#999999" size="30" name="arrow-right" @click="back"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabList">
|
||
<div class="tabItem" :class="active == 0 ? 'active' : ''" @click="changeTab(0)">账单</div>
|
||
<div class="line"></div>
|
||
<div class="tabItem" :class="active == 1 ? 'active' : ''" @click="changeTab(1)">缴费记录</div>
|
||
</div>
|
||
|
||
<div class="homeMoney" v-if="active == 0">
|
||
<div class="homeMoney_box">
|
||
<div class="homeMoney_box_left">
|
||
<div class="homeMoney_box_left1">物业公积金</div>
|
||
<div class="homeMoney_box_left2">可抵扣账户金额</div>
|
||
</div>
|
||
<div class="homeMoney_box_right">
|
||
<div class="homeMoney_box_right1"><span>￥</span>9735.00</div>
|
||
<div class="homeMoney_box_right2">
|
||
查看详情
|
||
<div style="margin-left: 12rpx;">
|
||
<u-icon bold color="#894B11" size="30" name="arrow-right" @click="back"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="payList" v-if="active == 0">
|
||
<div class="payItem" v-for="item in 1">
|
||
<div class="payItem_tit">
|
||
<div class="payItem_left">
|
||
<checkbox value="1"></checkbox>
|
||
<div style="margin-left: 24rpx;">2025年</div>
|
||
</div>
|
||
<div class="payItem_right">
|
||
<span>￥</span>
|
||
4900.00
|
||
<p>未缴</p>
|
||
|
||
<div style="margin-left: 40rpx;">
|
||
<u-icon bold color="#894B11" size="30" name="arrow-down" @click="back"></u-icon>
|
||
<u-icon bold color="#894B11" size="30" name="arrow-up" @click="back" v-if="false"></u-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="payItem_List" v-for="item in 0">
|
||
<checkbox value="1"></checkbox>
|
||
<div class="Item_time">2025年</div>
|
||
<div class="Item_type">车位管理费</div>
|
||
<div class="Item_money">￥4500.00</div>
|
||
<div class="Item_status">未付款</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选择支付类型 -->
|
||
<div class="payTypeList" v-if="active == 0">
|
||
<div class="PayTypeItem">
|
||
<div class="PayTypeItem_left">
|
||
<div class="PayTypeItem_img">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||
</div>
|
||
<div class="PayTypeItem_con">
|
||
<div class="PayTypeItem_con_tit">微信支付</div>
|
||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="PayTypeItem_right">
|
||
<radio></radio>
|
||
</div>
|
||
</div>
|
||
<div class="line3"></div>
|
||
<div class="PayTypeItem">
|
||
<div class="PayTypeItem_left">
|
||
<div class="PayTypeItem_img">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||
</div>
|
||
<div class="PayTypeItem_con">
|
||
<div class="PayTypeItem_con_tit">物业公积金支付</div>
|
||
<div class="PayTypeItem_con_msg">单笔支付限额：￥10000.00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="PayTypeItem_right">
|
||
<radio></radio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bottom" v-if="active == 0">
|
||
<div class="bottom_left">
|
||
<span>合计</span>
|
||
<p>￥</p>
|
||
4900.00
|
||
</div>
|
||
<div class="bottom_right">
|
||
立即支付
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="payHisList" v-if="active == 1">
|
||
<div class="payHisItem" v-for="item in 3">
|
||
<div class="row">
|
||
<div class="row_label">缴费金额</div>
|
||
<div class="row_con1">￥53.1</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="row_label2">刚刚</div>
|
||
<div class="row_con2">2025-06-06 18:10支付</div>
|
||
</div>
|
||
<div class="line4"></div>
|
||
<div class="row">
|
||
<div class="row_label">绑定房源</div>
|
||
<div class="row_con3">
|
||
<div class="row_con3_1">6个账单</div>
|
||
<div class="row_con3_2">明细可从收据查看</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">应缴费金额</div>
|
||
<div class="row_con4">￥4704.00</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">物业费公积金抵扣金额</div>
|
||
<div class="row_con4">-￥4704.00</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="row_label">缴费单号</div>
|
||
<div class="row_con4">25061700200003 </div>
|
||
</div>
|
||
<div class="line4"></div>
|
||
<div class="Receipt">收据</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="boxshadow" v-if="show" @click="changeShow">
|
||
<div class="boxshadowCon">
|
||
<div class="boxshadowCon_Tit">
|
||
选择房源
|
||
<div class="cancel">取消</div>
|
||
</div>
|
||
<div class="lines"></div>
|
||
<div class="communityList">
|
||
<div class="communityItem" v-for="item in 8">
|
||
<div class="communityItem_text">2323世纪名城1号楼1单元101室</div>
|
||
<div class="communityItem_radio">
|
||
<radio></radio>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="boxshadow" v-if="show2" @click="changeShow2">
|
||
<div class="boxshadowCon">
|
||
<div class="boxshadowCon_Tit">
|
||
付款总金额
|
||
<div class="cancel">取消</div>
|
||
</div>
|
||
<div class="boxshadowCon_subTit">
|
||
<span>￥</span>4900.00
|
||
</div>
|
||
<div class="lines"></div>
|
||
|
||
<div class="BanlenceList">
|
||
<div class="banlenceItem">
|
||
<div class="banlenceItem_left">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_wechat.png" alt="" />
|
||
微信支付
|
||
</div>
|
||
<div class="banlenceItem_right">
|
||
<span>￥</span>4900.00
|
||
</div>
|
||
</div>
|
||
<div class="line3"></div>
|
||
<div class="banlenceItem">
|
||
<div class="banlenceItem_left">
|
||
<image mode="aspectFill" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_homeMoney.png" alt="" />
|
||
物业公积金支付
|
||
</div>
|
||
<div class="banlenceItem_right">
|
||
<span>￥</span>4900.00
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="btn">
|
||
物业公积金+微信支付 <span>￥</span>4900.00
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
request,
|
||
picUrl,
|
||
uniqueByField,
|
||
menuButtonInfo,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
import {
|
||
apiArr
|
||
} from '../../../api/community';
|
||
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
top: "",
|
||
localHeight: "",
|
||
active: 1,
|
||
show: false,
|
||
show2: false,
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
const meun = menuButtonInfo();
|
||
this.top = meun.top;
|
||
// this.top = meun.height + meun.top;
|
||
this.localHeight = meun.height;
|
||
},
|
||
|
||
|
||
methods: {
|
||
changeTab(index) {
|
||
this.active = index;
|
||
},
|
||
back() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
changeShow() {
|
||
this.show = !this.show
|
||
},
|
||
changeShow2() {
|
||
this.show2 = !this.show
|
||
},
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |