小小儁爺
2024-10-22 162eddd7467adfe5de7a1a468e54ea00b2febce3
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<template>
    <view>
        <!-- :style="{height:($DeviceInformation.screenHeight/12)+'rpx'}" -->
        <view class="headClass">新凯迪云制造</view>
        <u-navbar :title="title" :fixed='false' :safeAreaInsetTop="false" titleStyle='color:#fff;letter-spacing: 2rpx;'
            bgColor='#0066FF  '>
            <view class="u-nav-slot" slot="left">
                <u-icon name="arrow-left" @click="leftClick" size="20" color='#fff !important'></u-icon>
            </view>
 
            <view class="u-nav-slot" slot="right" @click="dotClick" style="display: flex;margin-right: 10rpx;">
                <u-icon name="list-dot" size="22" color='#fff'></u-icon>
                <view class="box" style="position: absolute;margin-left:  20rpx;z-index: 2;margin-top: -10rpx;">
                    <u-badge max="9" :value="topRightMessageCount"></u-badge>
                </view>
            </view>
        </u-navbar>
 
 
        <!-- :style="{marginTop:rightTopShowMarginTopValue+'rpx'}" -->
        <view class="rightFlex" v-show="rightTopShow">
            <view class="triangle"></view>
            <!--             <view class="rightFlexItem" v-show='isShowMessageMenu' @click="goToMessageList">
                <view>
                    <u-icon name="chat" size="44"></u-icon>
                    <view class="box" style="position: absolute;margin-left:  22rpx;z-index: 2;margin-top: -52rpx;">
                        <u-badge max="9" :value="topRightMessageCount"></u-badge>
                    </view>
                </view>
                <view class="rightFlexItemTitle">我的消息</view>
            </view>
            <view class="rightFlexItem">
                <view>
                    <u-icon name="file-text" size="44"></u-icon>
                </view>
                <view class="rightFlexItemTitle">操作指导书</view>
            </view>
            <view class="rightFlexItem">
                <view>
                    <u-icon name="tags" size="44"></u-icon>
                </view>
                <view class="rightFlexItemTitle">成品追溯</view>
            </view> -->
            <view class="rightFlexItem" @click="goBackToLogin" style="border-bottom:0;">
                <view>
                    <u-icon name="play-left" size="22"></u-icon>
                </view>
                <view class="rightFlexItemTitle">退出登录</view>
            </view>
 
        </view>
 
        <!-- <u-gap height="10" bgColor="#fff"></u-gap> -->
 
        <u-overlay :show="show" @click="overlayClick" zIndex='11' opacity='0.2'></u-overlay>
 
    </view>
</template>
 
<script>
    import {
        LoginOut
    } from '../../config/api.js';
 
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            topRightMessageCount: {
                type: Number,
                default: 0
            }
 
        },
        data() {
            return {
                // DeviceInformation: JSON.parse(uni.getStorageSync('DeviceInformation')), //设备信息
                image: '',
                indexList: [],
                // rightTopShowMarginTopValue: 0,
                rightTopShow: false, //右上角是否显示出来
                show: false,
                isShowMessageMenu: getCurrentPages()[getCurrentPages().length - 1].$page.fullPath !== "/pages/other/xxlb"
            }
        },
        onLoad() {},
        created() {
 
        },
        onResize() {
 
        },
        mounted() {},
        methods: {
            // 跳转到消息列表
            goToMessageList() {
                uni.navigateTo({
                    url: '../other/xxlb'
                })
            },
            // 点击遮罩层
            overlayClick() {
                this.show = false
                this.rightTopShow = false
            },
            // 右上角三条横线处点击
            dotClick() {
                this.rightTopShow = true
                this.show = true
            },
            // 左上角左箭头点击事件
            leftClick() {
                uni.navigateBack()
 
 
                //如果是入厂检验的第一个页面 不能采用uni.navigateBack()  需要采用 uni.navigateTo({})
                // let url = getCurrentPages()[getCurrentPages().length - 1].$page.fullPath
                // if (url.split('?')[0] === '/pages/zlgl/rcjy') {
                //     uni.navigateTo({
                //         url: '/pages/xtsy/index'
                //     })
                // } else {
                //     uni.navigateBack()
                // }
 
 
                //获取上一页的页面路由
                // let flag = getCurrentPages()[getCurrentPages().length - 2].$page.fullPath === "/pages/xtsy/index" 
                // console.log(flag, 6)
                // if (flag) { //如果是返回到工作台页面
                //     uni.navigateTo({
                //         url: getCurrentPages()[getCurrentPages().length - 2].$page.fullPath + '?isGetList=true'
                //     })
                // } else {
                //     uni.navigateBack()
                // uni.navigateTo({
                //     // 方式一:此方式传参,刷新页面参数不丢失,参数在url上显示
                //     // 如果是对象或者数组参数可使用 JSON.stringfy(),将参数转化成字符串,然后获取时,通过 JSON.parse() 转化成对象
                //     url: getCurrentPages()[getCurrentPages().length - 2].$page.fullPath,
                //     // url: '/pages/page1/page1?id=1&name=橙子', 
 
                //     // 方式二:通过eventChannel向被打开页面传送数据,此方式传参,刷新页面参数会丢失
                //     // 此方式只是适合 uni.navigateTo() 方法
                //     // success: function(res) {
                //     //     res.eventChannel.emit('argParams', {
                //     //         id: '100',
                //     //         name: '菠萝'
                //     //     })
                //     // }
                // })
                // }
 
 
            },
            // 点击退出登录按钮按钮返回登录页
            goBackToLogin() {
                uni.showModal({
                    title: '提示',
                    content: '是否确定退出!',
                    success: function(res) {
                        if (res.confirm) {
                            LoginOut().then(res2 => {
                                if (res2.code === '200') {
                                    this.show = false
                                    this.rightTopShow = false
                                    // uni.setStorageSync('topRightMessageCount', 0)
                                }
                            })
 
                            uni.redirectTo({
                                //关闭当前页面,跳转到应用内的某个页面。
                                url: '../login/index'
                            });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                            this.show = false
                            this.rightTopShow = false
                        }
                    }
                });
            }
        }
    }
</script>
 
<style lang="scss" scoped>
    .headClass {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        height: 120rpx;
        // line-height: 100rpx;
        color: #fff;
        font-weight: bolder;
        letter-spacing: 2rpx;
        font-family: serif;
        padding: 20rpx 0;
        background-color: #0659ff;
    }
 
    .rightFlex {
        width: 220rpx;
        background-color: #DDDDDD;
        right: 20rpx;
        position: absolute;
        z-index: 12;
        border-radius: 20rpx;
 
        .triangle {
            width: 0px;
            height: 0px;
            border: 10rpx solid transparent;
            /*以下四个样式对应四种三角形,任选其一即可实现*/
            /* border-top-color:lightseagreen; */
            /* border-left-color:lightseagreen; */
            /* border-right-color:lightseagreen; */
            border-bottom-color: #DDDDDD;
            // border-bottom-color: #fff;
            position: absolute;
            right: 28rpx;
            top: -18rpx;
        }
 
        .rightFlexItem {
            // width: 100%;
            height: 78rpx;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            padding-left: 10rpx;
            border-bottom: 1rpx solid #eee;
        }
 
        .rightFlexItemTitle {
            margin-left: 10rpx;
            font-size: 30rpx
        }
 
        ::v-deep .u-icon__icon {
            color: #444444 !important;
        }
 
        .u-button--info {
            border: none;
            display: flex;
            justify-content: flex-start;
            background-color: #eee;
            color: #444444 !important;
        }
 
        ::v-deep .u-icon__icon--info {
            font-size: 28rpx !important;
        }
    }
 
    ::v-deep .uicon-arrow-left>span {
        display: none;
    }
</style>