<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>
小程序很少很少
于 2022-08-06 15:06:31 首次发布