[抖火客户端]

pages/user/manageIns.vue

@@ -0,0 +1,142 @@
+<template>
+	<view class="content">
+		<view class="list" v-if="insArr.length > 0">
+			<view class="label" v-for="(items, index) in insArr" :key="index" @click="$Router.push({name: 'userBank', params: {id: items.user_bank_id}})">
+				<view class="label-top">
+					<image class="label-logo" :src="items.institution.cover ? items.institution.cover : '/static/imgs/default_myBank.png'" mode="aspectFill"></image>
+					<view class="label-name">
+						{{items.institution.title}}
+					</view>
+				</view>
+				<view class="label-number">
+					<block v-if="items.card_no">尾号{{items.card_no.substr(-4)}}</block>
+					<block v-else>网贷信贷协商业务</block>
+				</view>
+				<view class="label-cont">
+					<view class="label-see">
+						<view class="label-see-text">
+							过期天数(天)
+						</view>
+						<view class="label-see-number">
+							{{items.overdue_time ? items.overdue_time : '--'}}
+						</view>
+					</view>
+					<view class="label-see">
+						<view class="label-see-text">
+							待还金额(元)
+						</view>
+						<view class="label-see-number label-see-red">
+							￥{{items.price ? items.price : '--'}}
+						</view>
+						<!-- <view class="label-see-write" v-if="items.canDo.bank">
+							需完善
+						</view> -->
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="pack-center pages-hint" v-else>
+		    <image src="/static/imgs/Noevaluate.png"></image>
+		    <view>暂无数据</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { BankList } from '@/apis/interfaces/user'
+	export default {
+		data() {
+			return {
+				insArr: [] // 机构列表
+			}
+		},
+		onShow() {
+			// 获取机构列表
+			this.insInfo();
+		},
+		methods: {
+			// 机构列表
+			insInfo() {
+				BankList().then(res => {
+					this.insArr = res
+				}).catch( err => {
+					uni.showToast({
+						title: err.message,
+						icon: "none"
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background-color: #f7f9fa;
+		height: 100vh;
+		overflow-y: scroll;
+	}
+	
+	.list {
+		padding: $padding;
+		box-sizing: border-box;
+		.label {
+			background-color: #ffffff;
+			border-radius: $radius;
+			margin-bottom: $margin;
+			.label-top {
+				display: flex;
+				line-height: 54rpx;
+				border-bottom: 2rpx solid #F6F6F6;
+				padding: $padding - 10 $padding;
+				box-sizing: border-box;
+				.label-logo {
+					width: 54rpx;
+					height: 54rpx;
+					border-radius: 50%;
+					border: 2rpx solid #ededed;
+				}
+				.label-name {
+					margin-left: 20rpx;
+					color: #858585;
+					font-size: $title-size-lg;
+				}
+			}
+			.label-number {
+				font-weight: 600;
+				padding: $padding $padding $padding $padding + 64rpx;
+				box-sizing: border-box;
+			}
+			.label-cont {
+				padding: 0 $padding $padding $padding + 64rpx;
+				box-sizing: border-box;
+				display: flex;
+				.label-see {
+					flex: 2;
+					.label-see-text {
+						font-size: $title-size-sm - 2;
+						color: #858585;
+						margin-bottom: 20rpx;
+					}
+					.label-see-number {
+						font-size: $title-size + 2;
+						font-weight: 600;
+						&.label-see-red {
+							color: $mian-color;
+						}
+					}
+					.label-see-write {
+						font-size: $title-size-sm - 2;
+						background-color: #ffede3;
+						color: #e39b7f;
+						display: inline-block;
+						border-radius: $radius-m;
+						padding: 0 15rpx;
+						line-height: 42rpx;
+						margin-top: 10rpx;
+					}
+				}
+			}
+		}
+	}
+</style>