userInfoCard.vue
2.97 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
<template>
<view class="container">
<view class="topInfoCss">
<view class="flex justify-between">
<view class="flex ">
<u-avatar size="60" shape="square" :src="userInfo.imgSrc" ></u-avatar>
<view class="flex flex-direction margin-left-sm">
<view class="textCss">{{userInfo.name}}</view>
<view class="addressCss">{{userInfo.address}}</view>
</view>
</view>
<view class="flex align-center">
<view class="margin-right-sm">{{userInfo.phone}}</view>
<u-image src="/static/images/appList/otherImg/phone-fill.png" mode="aspectFit" width="32px"
height="32px" @click="handleCallPhone"></u-image>
</view>
</view>
</view>
<view class="flex justify-between margin-top">
<view class="flex flex-direction justify-center align-center " style="width: 50%;" v-for="(item,index) of orderList1" :key="index">
<u-image :src="item.imgSrc" mode="aspectFit" width="51px"
height="60px"></u-image>
<view class="titleCss">{{item.name}}</view>
<view class="numCss">{{item.value}}</view>
</view>
</view>
</view>
</template>
<script>
import orderImg from '@/static/images/appList/otherImg/order.png'
import smokeAlarmImg from '@/static/images/appList/otherImg/smokeAlarm.png'
export default {
name: "userInfoCard",
props:{
userInfo:{
type:Object,
default:{
name:'ce'
}
},
orderList:{
type:Array,
default: []
}
},
data(){
return{
orderList1:[
{
key:'ljpsdd',
imgSrc:orderImg,
name:'累计配送订单',
value:25
}, {
key:'ljpsqp',
imgSrc:smokeAlarmImg,
name:'累计配送气瓶',
value:25
}
]
}
},
onLoad(){
},
mounted(){
console.log('打印tis.orderList',this.orderList);
this.orderList1 = this.orderList;
},
methods:{
handleCallPhone(){
if(this.userInfo.phone){
uni.makePhoneCall({
phoneNumber:this.userInfo.phone,
})
}
},
}
}
</script>
<style lang="scss" scoped>
.container{
//margin: 0 10px;
padding: 10px;
background: #ffffff;
border-radius: 10px;
.topInfoCss{
.textCss{
font-family: '苹方 中等', '苹方', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 52rpx;
}
.addressCss{
font-family: '苹方 中等', '苹方', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 26rpx;
line-height: 60rpx;
color: #666666;
}
}
.titleCss{
font-family: '苹方 中等', '苹方', sans-serif;
font-weight: 400;
font-style: normal;
line-height: 60rpx;
font-size: 26rpx;
color: #999DB0;
}
.numCss{
font-family: '苹方 粗体', '苹方 中等', '苹方', sans-serif;
font-weight: 700;
font-style: normal;
font-size: 34rpx;
color:#333333
}
}
</style>