index.vue
2.94 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
<template>
<view class="container">
<Navbar bgColor="#ff630c" title="配送工主页" :textColor="'#ffffff'" :canBack="true"></Navbar>
<view class="topContentCss"></view>
<view class="cardAreaCss" >
<!-- 员工信息 -->
<userInfoCard :userInfo="userInfoData" :orderList="orderInfoList"></userInfoCard>
<!-- 头部气瓶背景文字 -->
<!-- 消息轮播 -->
<u-notice-bar class="margin-top" :text="text" direction="column" color="#EB5C11" bgColor="#F1E4DB" speed="50"
url="/pages/componentsB/tag/tag"></u-notice-bar>
<functionCard ></functionCard>
</view>
</view>
</template>
<script>
import orderImg from '@/static/images/appList/otherImg/order.png'
import smokeAlarmImg from '@/static/images/appList/otherImg/smokeAlarm.png'
import userInfoImg from '@/static/images/mine/userInfo.png'
import userInfoCard from "./components/userInfoCard";
import functionCard from "./components/functionCard"
export default {
components:{
userInfoCard,
functionCard
},
onLoad(data){
if(data.ygbh){
this.getDetailData(data.ygbh);
}
console.log('打印data',data);
},
mounted(){},
data(){
return {
orderInfoList:[
{
key:'ljpsdd',
imgSrc:orderImg,
name:'累计配送订单',
value:25
},
{
key:'ljpsqp',
imgSrc:smokeAlarmImg,
name:'累计配送气瓶',
value:25
}
],
text: [
'为了您和家人的安全,请不要使用过期的石油气钢瓶',
'温馨提示'
],
userInfoData:{
imgSrc:userInfoImg,
name:'任巧生',
address:'孝感城南液化石油气',
phone:'181****4021'
}
}
},
methods:{
async getDetailData(ygbhCode){
const result = await this.$api.gasApi.userDetailInfoPort({code:ygbhCode});
const { value } = result;
this.userInfoData.phone = value.ffzrlxfs;
this.userInfoData.name = value.fxm;
this.userInfoData.address = value.fssczmc;
this.orderInfoList = await this.$assignValues(value,this.orderInfoList);
this.$forceUpdate();
console.log('打印获取员工详细信息的result===>',result);
}
},
}
</script>
<style lang="scss" scoped>
.container{
::v-deep.u-icon__icon{
color: #ffffff!important;
}
.topContentCss {
position: relative;
width: 100%;
height: 200px;
//background: #EA5504;
background: linear-gradient(180deg, rgba(255, 99, 12, 1) 0%, rgba(242, 244, 243, 1) 100%);
border-radius: 0 0 30px 30px;
color: #fff;
.topBarCss {
height: 65px;
}
.authCss {
border-radius: 30px 0 0 30px;
background: #fff;
// width: 0px;
padding: 5px;
}
.chatCss {
// position: absolute;
// margin: -10px 0 0 -10px;
}
}
.cardAreaCss {
position: relative;
top: -150px;
margin: 0px 10px;
color: #000;
}
}
</style>