个人中心账户信息功能开发

pages/user/userdata.vue

@@ -0,0 +1,106 @@
+<template>
+	<view class="content">
+		<view class="content-label">基础资料</view>
+		<view class="content-block">
+			<view class="content-item" @click="onNav('UserDataBase', {})">
+				<view class="title nowrap">基础信息</view>
+				<uni-icons type="right" color="gray"></uni-icons>
+			</view>
+		</view>
+		<view class="content-label">机构资料</view>
+		<view class="content-block" v-if="banks.length > 0">
+			<view class="content-item" v-for="(item, index) in banks" :key="index" @click="onNav('UserDataBank', {id: item.user_bank_id})">
+				<view class="text">
+					<view class="text-title nowrap">{{item.institution.title || '-'}}</view>
+					<view class="text-time nowrap">更新时间{{item.created_at || '-'}}</view>
+				</view>
+				<uni-icons type="right" color="gray"></uni-icons>
+			</view>
+		</view>
+		<view v-else class="content-null">
+			<u-empty
+				mode="data"
+				icon="http://cdn.uviewui.com/uview/empty/data.png"
+				text="暂无机构资料数据"
+			>
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { userInfoBanks } from '@/apis/interfaces/user.js'
+	export default {
+		data() {
+			return {
+				banks: []
+			};
+		},
+		created() {
+			uni.showLoading({
+				title: '加载中...',
+				mask : true
+			})
+			userInfoBanks().then(res => {
+				this.banks = res;
+				uni.hideLoading()
+			}).catch(err => {
+				uni.showToast({
+					title: err.message,
+					icon : 'none'
+				})
+			})
+		},
+		methods: {
+			onNav(name, params){
+				this.$Router.push({
+					name,
+					params
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content-label{
+		padding: 15rpx 30rpx;
+		font-size: 30rpx;
+		color: gray;
+	}
+	.content-block{
+		background: white;
+		.content-item{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			line-height: 40rpx;
+			padding: 30rpx;
+			font-size: 32rpx;
+			.text{
+				width: 80%;
+				.text-title{
+					font-size: 32rpx;
+				}
+				.text-time{
+					font-size: 28rpx;
+					color: gray
+				}
+			}
+			@extend .border-solid;
+			&::after{
+				left: 30rpx;
+			}
+			&:last-child::after{
+				display: none;
+			}
+		}
+	}
+	.content-null{
+		background-color: white;
+		height: 50vh;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>