userRecord.vue
8.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<template>
<v-layout id="UserRecord" column justify-center align-center>
<v-flex>
<v-card flat class="userInfoBlock">
<div class="avatar">
<svg v-if="!userInfo.headimgurl" width="3.1rem" height="3.1rem" viewBox="0 0 183 183" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="个人中心" transform="translate(-284.000000, -149.000000)">
<image id="e3f6ced22ab588cfcaf329d7cbc51b98-copy" x="284" y="149" width="183" height="183" xlink:href="data:image/png;base64,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"></image>
</g>
</g>
</svg>
<img class="avatarImg" v-if="userInfo.headimgurl" :src="userInfo.headimgurl" alt="" />
</div>
<div class="UserInfoTexts">
<div class="username">{{userInfo.name}}<div class="tag">基础</div></div>
<div class="phone">{{userInfo.phone}}</div>
</div>
</v-card>
<div class="borrowRecord">
<h3 class="borrowRecordTitle">借款记录</h3>
<v-btn depressed id="ReportBtn">详版报告</v-btn>
</div>
<BorrowRecordList :borrow="borrowInfo" :credit="creditInfo"/>
<div class="borrowRecord">
<h3 class="borrowRecordTitle">逾期记录</h3>
</div>
<OverdueRecordList />
</v-flex>
</v-layout>
</template>
<script>
import BorrowRecordList from '@/components/BorrowRecordList'
import OverdueRecordList from '@/components/OverdueRecordList'
import {wechatShareSetting} from '@/helper'
export default {
async asyncData({store, query, app, redirect}) {
let {data} = await app.$axios.get(`/friend?userId=${store.state.user.id}&id=${query.id}`)
if (data.success) {
return {userInfo: data.user, borrowInfo: data.borrowInfo, creditInfo: data.creditInfo}
} else {
store.dispatch('displayMessage', data.msg)
return {userInfo: {}, borrowInfo: {}, creditInfo: {}}
}
},
data: () => ({
userInfo: {}
}),
components: {
BorrowRecordList,
OverdueRecordList
},
mounted() {
wechatShareSetting(this.$axios, this.$store)
},
}
</script>
<style lang="scss" scoped>
#UserRecord {
.userInfoBlock {
width: 100vw;
height: 3.1rem;
padding: 2rem;
display: flex;
background-color: transparent;
.avatar {
width: 3.1rem;
height: 3.1rem;
border-radius: 1.6rem;
overflow: hidden;
.avatarImg {
width: 100%;
height: 100%;
vertical-align: bottom;
}
svg {
background-color: $avatar-grey;
}
}
.UserInfoTexts {
margin-left: 1.7rem;
color: $light-gold;
font-size: 1.1rem;
font-weight: bold;
height: 3rem;
div {
height: 1.5rem;
}
.tag {
width: 2.7rem;
height: 1.2rem;
background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
border-radius: 4px;
font-size: 0.75rem;
color: #000;
line-height: 1.2rem;
text-align: center;
display: inline-block;
margin-left: 0.6rem;
margin-bottom: 0.1rem;
}
}
}
.borrowRecord {
width: 90vw;
margin: auto;
position: relative;
.borrowRecordTitle {
font-size: 18px;
display: inline-block;
color: $light-gold;
border-left: 0.25rem solid $light-gold;
padding-left: 0.75rem;
margin-left: 0.8rem;
margin-right: 0;
}
#ReportBtn {
background-image: linear-gradient(-229deg, #DAB269 37%, #E7C78C 87%);
border-radius: 0.25rem;
font-size: 0.9rem;
color: #000;
height: 1.5rem;
width: 5.3rem;
line-height: 1.5rem;
margin: 0;
float: right;
position: relative;
right: 0;
top: 0;
font-weight: normal;
}
}
}
</style>