smartmeter-app/page_user/skzh.vue

<template>
	<view>
		<u-navbar title="收款账户" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
			<view class="cont" v-if="stause">
				<view class="card" @click="tobd(0)" v-if="hasBankCard==false &&stause"  >
					<view class="tit">
						个人用户
					</view>
					<view class="txt">
						拥有个人银行卡
					</view>
				</view>
				<view class="card" v-if="hasBankCard==true&&stause" v-for="(item,idnex) in infoList.BANK_CARD" :key="index">
					<view class="tit">
					<image :src="'http://bkaear.market.alicloudapi.com/banklogo/' + item.cardInfo.Icon" mode=""></image>{{item.name}}
					</view>
					<view class="txts" style="text-align: right;">
						{{item.accountNo}}
					</view>
				</view>
				
				<view class="card" style="background-color: #00BA88 ;">
					<view class="tit">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uXQRpObfAZgNgamWSgk8" mode=""></image>
					</view>
					<view class="txt">
						使用当前微信收款
					</view>
				</view>
				<view class="card" style="background-color: #4C97E7 ;" @click="tobd(1)" v-if="infoList.ALIPAY.length<1&&stause" > 
					<view class="tit">
						支付宝账号
					</view>
					<view class="txt">
						需绑定支付宝账号
					</view>
				</view>
				<view class="card" style="background-color: #4C97E7 ;" v-if="infoList.ALIPAY.length>0&&stause"  v-for="(item,index) in infoList.ALIPAY" :key="index" >
					<view class="tit">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uJAkoJK3FJ0tbkgRd1vb" mode="" style="border-radius: 0;"></image>{{item.name}}
					</view>
					<view class="txts">
						{{item.accountNo}}
					</view>
				</view>
				<view class="tip">注意：缴费收入将直接结算至收款账户，请谨慎填写 </view>
				<view class="btn">
					确认收款方式
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				infoList:[],
				stause:false
			}
		},
		onShow() {
			this.getinfo()
			this.getstause()
		},
		computed: {
			hasBankCard() {
			return this.infoList.BANK_CARD.length > 0;
			}
		},
		methods: {
			tobd(num){
				if(num==0){
					uni.navigateTo({
						url:'/page_user/bdcard'
					})
				}else if (num==1){
					uni.navigateTo({
						url:'/page_user/bdAlipay'
					})
				}
				
			},
			getstause(){
				
				this.$u.get('/app/config/wa' ).then((res) => {
					if (res.code == 200) {
						console.log(res)
						this.stause=res.data
					}
				})
			},
			getinfo(){
				this.$u.get('/app/account' ).then((res) => {
					if (res.code == 200) {
						console.log(res)
						this.infoList=res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.cont{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
	.card{
		display: flex;
		flex-wrap: wrap;
		margin-top: 26rpx;
		width: 636rpx;
		height: 188rpx;
		background: #8EA9E4;
		box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
		border-radius: 20rpx;
		.tit{
			display: flex;
			align-items: center;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			width: 80%;
			margin-top: 38rpx;
			margin-left: 48rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 40rpx;
			color: #FFFFFF;
			line-height: 40rpx;
		}
		.txt{
			// margin-top: 20rpx;
			margin-left: 48rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.txts{
			width: 100%;
			text-align: right;
			margin-right: 48rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
	.tip{
		margin-top: 62rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF8D1A;
		line-height: 36rpx;
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 218rpx;
		width: 590rpx;
		height: 84rpx;
		background: #2A82E4;
		border-radius: 40rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		
	}
}
</style>