小程序很少很少

31 篇文章 0 订阅
31 篇文章 0 订阅
<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">基本信息</block>
		</cu-custom>

		<view class="footer">
			<view v-for="(item, index) in baseList" :key="item.name">
				<view :style="{'height': index === 0 ? '114rpx' : '','border-bottom': index === 4 ? 'none' : ''}"
					class="footer_top">
					<view class="arrow-left">
						<text class="footer_top_left">{{item.key}}</text>
						<text style="color: #CCCCCC;">{{item.value}}</text>
					</view>
					<u-icon v-if="index === 3 || index  === 4" name="arrow-right" color="#CCCCCC " size="40"></u-icon>
				</view>
			</view>
		</view>

		<view class="footer" style="margin-top: 24rpx;">
			<view v-for="(item, i) in baseLists" :key="item.name">
				<view :style="{'border-bottom': index === 2 ? 'none' : ''}" class="footer_top">
					<view class="arrow-left">
						<text class="footer_top_left">{{item.key}}</text>
						<text v-if="i === 1" style="color: #CCCCCC;">{{item.value | capitalize}}</text>
						<text v-else style="color: #CCCCCC;">{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseList: [{
					key: '姓名',
					name: 'userName',
					value: '王某人'
				}, {
					key: '性别',
					name: 'nex',
					value: '男'
				}, {
					key: '手机号',
					name: 'phoneNumber',
					value: '13243453453'
				}, {
					key: '宠主性质',
					name: 'petCard',
					value: '个人'
				}, {
					key: '居住地址',
					name: 'address',
					value: '湖北省江汉区某街道123号'
				}],
				baseLists: [{
					key: '证件类型',
					name: 'cardType',
					value: '军官证'
				}, {
					key: '证件号',
					name: 'cardNumber',
					value: '63848448444421'
				}, {
					key: '证件有效期',
					name: 'cardTime',
					value: '2036-09-21'
				}]
			};
		},
		filters: {
			capitalize: function(value) {
				if (!value) return '';
				let a
				a = value.charAt(value.length - 1);
				let c 
				c = value.charAt(0);
				let b
				b = value.split('')
				b = b.map(item => item = '*')
				b.splice(b.length - 1, b.length - 1, a)
				b.splice(0, 0, c)
				b = b.join('')
				return b
			}
		}
	}
</script>

<style lang="scss">
	.footer {
		margin-top: 1rpx;
		background-color: #fff;
		width: 100%;
		padding: 0 24rpx;

		.footer_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 96rpx;
			border-bottom: 1px solid #EEEEEE;
			margin-bottom: 2rpx;

			.arrow-left {
				display: flex;
				align-items: center;

				.footer_top_left {
					width: 222rpx;
					font-size: 34rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值