|
|
@@ -1,32 +1,62 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <view class="bg-img flex align-center" style="background-image: url('/static/ldt/mineBgImg.png');height: 372upx;">
|
|
|
- <view class="flex align-center">
|
|
|
- <view class="avatar">
|
|
|
- <u-avatar src="/static/avatar.png" size="110"></u-avatar>
|
|
|
+ <view class="bg-white">
|
|
|
+ <view class="bg-img flex align-center" style="background-image: url('/static/ldt/mineBgImg.png');height: 372upx;">
|
|
|
+ <view class="flex align-center">
|
|
|
+ <view class="avatar">
|
|
|
+ <u-avatar src="/static/avatar.png" size="110"></u-avatar>
|
|
|
+ </view>
|
|
|
+ <view class="name">赖德福|德芙值得信赖</view>
|
|
|
</view>
|
|
|
- <view class="name">赖德福|德芙值得信赖</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="container">
|
|
|
- <view class="text-center padding-top-sm">
|
|
|
- <tkiBarcode cid="itf14" :loadMake="false" format="itf14" val="1234567890123" ref="itf14" @result="itf14" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="text-bold text-black" style="padding: 0 0 30upx 30upx;">我的账户</view>
|
|
|
- <view class="flex">
|
|
|
- <view>
|
|
|
- <view>2000</view>
|
|
|
- <view>我的积分</view>
|
|
|
+ <view class="container">
|
|
|
+ <view class="text-center padding-top-sm">
|
|
|
+ <tkiBarcode cid="itf14" :loadMake="false" format="itf14" val="1234567890123" ref="itf14" @result="itf14" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <view>+200</view>
|
|
|
- <view>昨日收益</view>
|
|
|
+ <view class="text-bold text-black" style="padding: 0 0 30upx 50upx;">我的账户</view>
|
|
|
+ <view class="flex justify-center text-center padding-bottom">
|
|
|
+ <view style="width: 30%;border-right: #eeeeee 1px solid;">
|
|
|
+ <view style="color: #fd9244;font-size: 34upx;font-weight: bold;">2000</view>
|
|
|
+ <view class="text-sm text-black text-bold">我的积分</view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 30%;">
|
|
|
+ <view style="color: #f90103;font-size: 34upx;font-weight: bold;">+200</view>
|
|
|
+ <view class="text-sm text-black text-bold">昨日收益</view>
|
|
|
+ </view>
|
|
|
+ <view style="width: 30%;">
|
|
|
+ <image src="/static/ldt/swapPoints.png" style="width: 41upx;height: 37upx;"></image>
|
|
|
+ <view class="text-sm text-black text-bold">换积分</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <image src="/static/ldt/swapPoints.png" style="width: 41upx;height: 37upx;"></image>
|
|
|
+ </view>
|
|
|
+ <view class="card padding-bottom">
|
|
|
+ <view class="title">我的明细</view>
|
|
|
+ <view class="flex align-center justify-around">
|
|
|
+ <view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/d10d440c3c9e45cbb30b3a727dc9a50c-pointsDetail.png');width: 280upx;height: 120upx;">
|
|
|
+ <view class="text-sm text-gray padding-top-sm padding-left">积分明细</view>
|
|
|
+ <view class="padding-top-sm padding-left" style="font-size: 34upx;font-weight: bold;">10,000</view>
|
|
|
+ </view>
|
|
|
+ <view class="bg-img" style="background-image: url('https://upload-file-data.obs.cn-south-1.myhuaweicloud.com/3751ceb0e94c4ae0bfa0652e31f5a902-coupon.png');width: 280upx;height: 120upx;">
|
|
|
+ <view class="text-sm text-gray padding-top-sm padding-left">国信信用分</view>
|
|
|
+ <view class="padding-top-sm padding-left" style="font-size: 34upx;font-weight: bold;">749</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="card">
|
|
|
+ <view class="title">其他服务</view>
|
|
|
+ <block v-for="(item, index) in iconList">
|
|
|
+ <view class="flex justify-between align-center padding" @click="navByIcon(item.url)">
|
|
|
+ <view class="flex align-center">
|
|
|
+ <view class="text-black padding-left">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex align-center margin-right" style="width: 38rpx;height: 40rpx;">
|
|
|
+ <image :src="item.icon" :style="{width: item.width, height: item.height}"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="margin-lr" v-if="index != iconList.length - 1"><u-line color="#eeeeee"></u-line></view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -38,7 +68,11 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ iconList: [
|
|
|
+ {name: '我的账单', icon: '/static/ldt/icon-bill.png', width: '35upx', height: '39upx', url: ''},
|
|
|
+ {name: '银行卡', icon: '/static/ldt/icon-card.png', width: '37upx', height: '28upx', url: ''},
|
|
|
+ {name: '我的VIP', icon: '/static/ldt/icon-vip.png', width: '38upx', height: '29upx', url: ''},
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -48,11 +82,16 @@
|
|
|
itf14(v) {
|
|
|
// console.log('itf14:', v)
|
|
|
},
|
|
|
+ navByIcon(url) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: url
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
.avatar {
|
|
|
padding-left: 40upx;
|
|
|
padding-right: 20upx;
|
|
|
@@ -70,4 +109,14 @@
|
|
|
border-radius: 100upx;
|
|
|
box-shadow: 10upx 20upx 60upx #d8d8d8;
|
|
|
}
|
|
|
+ .card {
|
|
|
+ margin: 20upx 30upx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10upx;
|
|
|
+ .title {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ padding: 30upx 20upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|