my.vue
3.9 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<template>
<view>
<!-- nav+背景 -->
<common-top-nav navBg="/static/my-nav-bg.png" />
<!-- 用户信息 -->
<user-info :infoList="infoList"/>
<view class="main-wrap">
<!-- 我的状态 -->
<function-card title="我的状态">
<view class="entry-item" :style="{'margin-left':index==1?'14rpx':''}" v-for="(item,index) in entryList"
:key="index" @click="selectStatus(item.status)">
<image :src="item.icon" mode=""></image>
<image v-if="status === item.status" class="select-bg" :src="item.selectBg" mode=""></image>
</view>
</function-card>
<!-- 联系客服 -->
<view class="concat-server">
联系客服<u-icon name="arrow-right" size="13"></u-icon>
<button class="contact-btn" open-type='contact'>联系客服</button>
</view>
<!-- 退出登录 -->
<view class="outLogin" @click="outLogin">
退出登录
</view>
</view>
</view>
</template>
<script>
import commonTopNav from '@/components/common-top-nav.vue'
import functionCard from '@/pages/index/c-cpns/function-card.vue'
import userInfo from './user-info.vue'
import { getEditStatus,getOutlogin,getInfo } from '@/services/modules/my.js'
let that;
export default {
data() {
return {
status: 1, // 1=上班 2=休息
entryList: [
{ icon: '/static/off.png', selectBg: '/static/off-frame.png', status: 2 },
{ icon: '/static/work.png', selectBg: '/static/work-icon.png', status: 1 },
],
infoList:{} //个人信息
};
},
components: {
functionCard,
userInfo,
commonTopNav
},
onShow() {
that = this
this.getInfo()
},
methods: {
// 退出登录
outLogin() {
uni.showModal({
title: '提示',
content: '确认退出登录吗',
success: function (res) {
if (res.confirm) {
that.getOutlogin()
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
// 获取配送员信息
async getInfo() {
const res = await getInfo()
this.infoList = res
this.status = res.status
console.log(res,'个人谢谢')
},
// 退出登录
async getOutlogin() {
const res = await getOutlogin()
uni.clearStorageSync()
uni.reLaunch({url:'/pages/login/login'})
},
// 修改上下班状态
async fetchEditStatus(status) {
const res = await getEditStatus(status)
console.log(res, '修改上下班状态 ');
},
// 切换上下班 1=上班 2=休息
selectStatus(status) {
uni.showModal({
title: '提示',
content: status === 2 ? '您确定要休息吗?' : '您确定要上班吗?',
success: (res) => {
if (res.confirm) this.fetchEditStatus(status) // TODO
status === 2 ? this.status = 2 : this.status = 1
}
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #F5F5F5;
}
.main-wrap {
@include wrap();
margin-top: 166rpx;
}
.entry-item {
@include flexColumn();
margin-top: 24rpx;
position: relative;
image {
width: 304rpx;
height: 138rpx;
}
.select-bg {
position: absolute;
top: 0;
left: 0;
}
}
.concat-server {
@include flexCj();
@include wrapPadding(686rpx, 28rpx, 32rpx, 28rpx, 32rpx);
position: relative;
color: #000000e6;
font-size: 28rpx;
margin-top: 24rpx;
height: 96rpx;
border-radius: 16rpx;
background: #ffffffff;
.contact-btn {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.outLogin {
display: flex;
justify-content: center;
align-items: center;
border-radius: 12rpx;
font-size: 28rpx;
width: 300rpx;
height: 90rpx;
color: #000000e6;
background: #fff;
margin: 20rpx auto;
}
</style>