|
|
@@ -0,0 +1,536 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="账单提醒"
|
|
|
+ class="navbar-box"
|
|
|
+ :isBack="isBack" title-color="#101010" ></u-navbar>
|
|
|
+ <view class="background ">
|
|
|
+ <view class="recharge-details">
|
|
|
+ <view class="details flew-items">
|
|
|
+ <image class="img" src="@/assets/img/tenantList/index1.png" mode=""></image>
|
|
|
+
|
|
|
+ {{detail.name}}
|
|
|
+ </view>
|
|
|
+ <view class="details ">
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 承租方
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{detail.tenantName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-if="false">
|
|
|
+ <view class="item-title">
|
|
|
+ 推送用户
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{detail.employeeName}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 本期账单总金额
|
|
|
+ </view>
|
|
|
+ <view class="item-value billAmount">
|
|
|
+ ￥{{detail.billAmount}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="item" v-if="false" >
|
|
|
+ <view class="item-title">
|
|
|
+ 开票方式
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{detail.invoiced?detail.invoiceTypeName:'不开票'}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="details-title">
|
|
|
+ <span class="name">账单明细</span>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="details-list" v-for="(item,i) in detail.itemList" :key="i">
|
|
|
+ <view class="item-list">
|
|
|
+ <view class="item-title">
|
|
|
+ <view class="item-title-name">{{item.contractItemName}}
|
|
|
+
|
|
|
+ <span class="item-title-remark" v-if="item.num&&item.unit=='月'">({{item.num}}个{{item.unit}})</span>
|
|
|
+ <span class="item-title-remark" v-if="item.remark">({{item.remark}})</span>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="item-title-span">收费标准：{{item.price}}<span >{{item.unit}}</span></view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{item.total}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-remark" v-if="item.timeRanges&&item.timeRanges.length==2&&item.timeRanges[0]&&item.timeRanges[1]">
|
|
|
+ 起止日期{{item.timeRanges[0]}}至{{item.timeRanges[1]}}
|
|
|
+ </view>
|
|
|
+ <!-- <view class="item-remark" v-if="item.remark">
|
|
|
+ 备注：{{item.remark}}
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details " v-if="detail.remark">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 账单备注
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{detail.remark}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="details-title">
|
|
|
+
|
|
|
+ <span class="remark">请在收到账单5日内缴纳上述费用。</span>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <u-divider nonetext="没有找到相关内容" style="margin-top: 20rpx;"
|
|
|
+ border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+ </view>
|
|
|
+ <view class="cashier-btn-row">
|
|
|
+ <view class="cashier-btn-amount">合计
|
|
|
+ <span class="cashier-btn-span">￥{{detail.billAmount}}元</span>
|
|
|
+ </view>
|
|
|
+ <view class="cashier-btn-go" v-if="!detail.payTime" >未支付</view>
|
|
|
+
|
|
|
+ <!-- <view class="cashier-btn-go1"
|
|
|
+ v-if="!detail.payTime&&detail.payStatus==0"
|
|
|
+ >线下支付</view> -->
|
|
|
+ <view class="cashier-btn-go1"
|
|
|
+ v-if="detail.payTime"
|
|
|
+ >已支付</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+ import * as API from '@/apis/pagejs/tenantList.js'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:"",
|
|
|
+ detail:{
|
|
|
+ accountInfo:{},
|
|
|
+ itemList:[]
|
|
|
+ },
|
|
|
+ transferAccountsInfo:{},
|
|
|
+ isBack:false,
|
|
|
+ accountInfoShow:false,
|
|
|
+
|
|
|
+ amountList:[
|
|
|
+
|
|
|
+ ],
|
|
|
+ show: false,
|
|
|
+ showModel: false,
|
|
|
+ qrCodeImg: "",
|
|
|
+ submitType:"0",
|
|
|
+ submitForm:{
|
|
|
+ companyId: '',
|
|
|
+ amount: '',
|
|
|
+ },
|
|
|
+ personInfo:{
|
|
|
+ balance:0,
|
|
|
+ },
|
|
|
+ companyInfo:{
|
|
|
+ paymentMethod:''
|
|
|
+ },
|
|
|
+ selectNum:'100',
|
|
|
+ otherNum:'',
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(op) {
|
|
|
+ if(op.site){
|
|
|
+ this.isBack=true
|
|
|
+ }
|
|
|
+ if(op.id){
|
|
|
+ this.id=op.id
|
|
|
+ this.getDetail()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow(){
|
|
|
+ //this.homePage()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ getDetail(){
|
|
|
+ uni.showLoading({
|
|
|
+ mask:true,title:'加载中...'
|
|
|
+ })
|
|
|
+ API.billDetails({
|
|
|
+ id:this.id
|
|
|
+ }).then((response) => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.detail=response.data;
|
|
|
+ // this.detail.billAmount=800
|
|
|
+ // this.detail.payTime=null;
|
|
|
+ //this.detail.payStatus=1
|
|
|
+ if(this.detail.billAmount>5000){
|
|
|
+ this.submitType="2";
|
|
|
+ //this.$forceUpdate()
|
|
|
+ }else{
|
|
|
+ this.amountList.push(this.detail.billAmount)
|
|
|
+ this.selectNum=this.detail.billAmount;
|
|
|
+ var amountList=[1000,2000,3000,4000,5000]
|
|
|
+ for(var i =0 ;i<amountList.length;i++){
|
|
|
+ var num=amountList[i]
|
|
|
+ if(num>this.detail.billAmount){
|
|
|
+ this.amountList.push(num)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //this.transferAccountsInfo=this.detail.accountInfo;
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ uni.showToast({
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ /deep/.u-navbar{
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .background{
|
|
|
+ padding-bottom: 160rpx;
|
|
|
+ }
|
|
|
+ .cashier-btn-row{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ width: 100%;
|
|
|
+ background: white;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ font-size: 44rpx;
|
|
|
+ .cashier-btn-amount{
|
|
|
+ padding:32rpx ;
|
|
|
+
|
|
|
+ }
|
|
|
+ .cashier-btn-span{
|
|
|
+ color: red;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .cashier-btn-go{
|
|
|
+ padding:32rpx ;
|
|
|
+ background: #4586f7;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .cashier-btn-go1{
|
|
|
+ padding:32rpx ;
|
|
|
+ // background: #4586f7;
|
|
|
+ // color: white;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .flew-items{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding:24rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ .img{
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-box{
|
|
|
+ box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+ .details-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:24rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ // border-bottom: 1px solid #d5d5d5;
|
|
|
+ .name{
|
|
|
+ color: #8b898c;
|
|
|
+ }
|
|
|
+ .remark{
|
|
|
+ color: #F44336;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details,.details-list{
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+ .billAmount{
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ .billAmount1{
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #2196f3;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:24rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ .item-title{
|
|
|
+ width: 240rpx;
|
|
|
+ min-width: 240rpx;
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ .item-value-btn1{
|
|
|
+ margin: 0 20px;
|
|
|
+ color: #4586f7;
|
|
|
+ }
|
|
|
+ .item-value-btn2{
|
|
|
+ color: #4586f7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details-list{
|
|
|
+
|
|
|
+ .item-list,.item-remark{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding:24rpx;
|
|
|
+ font-size: 36rpx;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ // .item-title{
|
|
|
+ // width: 400rpx;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .item-title{
|
|
|
+ font-size: 36rpx;
|
|
|
+ .item-title-name{
|
|
|
+ color: #31b3ff;
|
|
|
+ }
|
|
|
+ .item-title-remark{
|
|
|
+ color: #303133;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-remark,.item-title-span{
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8b898c;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .main {
|
|
|
+ margin: 24rpx 0;
|
|
|
+ padding: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ background: white;
|
|
|
+
|
|
|
+ // 缴费金额
|
|
|
+ .payment-amount {
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-options {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .options-item {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(242, 242, 242, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chosen {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 输入金额
|
|
|
+ .input-amount {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ font-size: 48rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ border-bottom: 1px solid rgba(242,242,242,1);
|
|
|
+ .symbol {
|
|
|
+ margin-right: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 40rpx;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-input-placeholder {
|
|
|
+ color: rgba(204, 204, 204, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 支付方式
|
|
|
+ .payment-way {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .way {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .way-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .way-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+ .text{
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ margin-left: -3rpx;
|
|
|
+ }
|
|
|
+ .img2{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .img3{
|
|
|
+ background-color: #1677FF;
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ border-radius: 999px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-radio-input {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按钮
|
|
|
+ .btn {
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(51, 133, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 对公转账弹窗
|
|
|
+ .modal-content {
|
|
|
+
|
|
|
+ padding: 40rpx 0;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos-group {
|
|
|
+ margin: 40rpx 32rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin
