app-govern/pages/index/mine.vue

<template>
    <view :loading="loading">
        <view class="mine">
            <view class="mine-header" @click="jump('basic')">
                <image mode="aspectFill" class="mine-header-head" :src="userInfo.avatar" v-if="userInfo.avatar"/>
                <image mode="aspectFill" class="mine-header-head" src="/static/head.png" v-else/>
                <view class="mine-header-name hide-txt">
                    <view>{{ userInfo.nickname }}</view>
                    <view></view>
                    <view class="tag">{{ roleName }}</view>
                </view>
                <image
                    src="/static/erweima.png"
                    style="height: 50rpx; width: 50rpx; border-radius: 12rpx"
                    mode="scaleToFill"
                />
                <uni-icons type="forward" color="#aaa" size="16"></uni-icons>
            </view>
            <view class="mine-nav" v-if="userInfo.authorities === 'tourist'" @click="jump('upgrade')">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/server.png"/>
                <view class="mine-nav-label">角色升级</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <!-- <view class="mine-nav" @click="jump('audit')" v-if="userInfo.authorities === 'app_vip_user'">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/server.png" />
                <view class="mine-nav-label">角色审核</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view> -->

            <!-- <view class="mine-nav" @click="jump('user')" v-if="userInfo.authorities === 'app_vip_user'">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
                <view class="mine-nav-label">子用户列表</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view> -->
            <view
                class="mine-nav"
                @click="jump('scan')"
                v-if="userInfo.authorities === 'app_vip_user' || userInfo.authorities === 'engineering_user'"
            >
                <image mode="aspectFill" class="mine-nav-icon" src="/static/scan.png"/>
                <view class="mine-nav-label">扫一扫</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <view class="mine-nav" @click="jump('engineering')">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/project.png"/>
                <view class="mine-nav-label">工程列表</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <view
                class="mine-nav"
                @click="jump('engineering/setting')"
                v-if="userInfo.authorities === 'engineering_user'"
            >
                <image mode="aspectFill" class="mine-nav-icon" src="/static/like.png"/>
                <view class="mine-nav-label">关注工程配置</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <view class="mine-nav" @click="jump('project')">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/project.png"/>
                <view class="mine-nav-label">项目列表</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <!-- <view
                class="mine-nav"
                @click="jump('gateway')"
                style="border-bottom: none; box-shadow: 0 4rpx 8rpx #e7e7e74c"
            >
                <image mode="aspectFill" class="mine-nav-icon" src="/static/gateway.png" />
                <view class="mine-nav-label">网关列表</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view> -->
            <view class="mine-nav" @click="jump('setupMessage')">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/message4.png"/>
                <view class="mine-nav-label">消息配置</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <view class="mine-nav" @click="jump('setup')" style="border-bottom: none">
                <image mode="aspectFill" class="mine-nav-icon" src="/static/setup.png"/>
                <view class="mine-nav-label">设置</view>
                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
            </view>
            <uni-popup ref="inputDialog" type="dialog">
                <uni-popup-dialog
                    ref="inputClose"
                    mode="input"
                    title="角色升级"
                    placeholder="请输入六位邀请码"
                    @confirm="upgrade"
                ></uni-popup-dialog>
            </uni-popup>
        </view>
    </view>
</template>

<script>
import {roleUpdate, autoLogin} from '@/common/api/user'
import {transferDevice,shareDevice} from '@/common/api/device'

export default {
    data() {
        return {
            loading: true,
            userInfo: {},
        }
    },
    computed: {
        roleName() {
            let roleName = ''
            switch (this.userInfo.authorities) {
                case 'tourist':
                    roleName = '游客'
                    break
                case 'engineering_user':
                    roleName = '工程用户'
                    break
                case 'app_vip_user':
                    roleName = 'VIP用户'
                    break
                case 'market_user':
                    roleName = '营销用户'
                    break
                case 'operation_manager':
                    roleName = '运维管理员'
                    break
            }
            return roleName
        },
    },
    onLoad(options) {
        this.init()
    },
    methods: {
        init() {
        },
        upgrade(code) {
            console.log(code)
            roleUpdate({
                referralCode: code,
                userId: this.userInfo.userIndex,
            }).then((res) => {
                uni.showToast({
                    title: '升级成功',
                    icon: 'none',
                })
                uni.removeStorageSync('access_token')
                // 直接登录
                autoLogin(this.userInfo.user_name).then((res) => {
                    this.$util.loginSuccess(res.data).then((userInfo) => {
                        this.userInfo = userInfo
                    })
                })
            })
        },
        jump(type) {
            switch (type) {
                case 'scan':
                    uni.scanCode({
                        success: (res) => {
                            console.log('条码类型：' + res.scanType)
                            console.log('条码内容：' + res.result)
                            let content = JSON.parse(res.result)
                            switch (content.type) {
                                case 'transferDevice':
                                    this.transferDevice(content.id.split(','))
                                    break
                                case 'shareDevice':
                                    this.shareDevice(content.id.split(','))
                                    break
                                default:
                                    this.$util.toast('无效二维码')
                                    break
                            }
                        },
                    })
                    break
                case 'login':
                    uni.navigateTo({
                        url: `/pages/user/login`,
                    })
                    break
                case 'gateway':
                    uni.navigateTo({
                        url: `/pages/gateway/list`,
                    })
                    break
                case 'upgrade':
                    this.$refs.inputDialog.open()
                    break
                case 'basic':
                    uni.navigateTo({
                        url: `/pages/user/basic`,
                    })
                    break
                case 'project':
                    uni.navigateTo({
                        url: `/pages/project/list`,
                    })
                    break
                case 'engineering':
                    uni.navigateTo({
                        url: `/pages/engineering/list`,
                    })
                    break
                case 'engineering/setting':
                    uni.navigateTo({
                        url: `/pages/engineering/setting`,
                    })
                    break
                default:
                    uni.navigateTo({
                        url: `/pages/mine/${type}`,
                    })
                    break
            }
        },
        transferDevice(id) {
            transferDevice(id).then((res) => {
                uni.navigateTo({url: '/pages/mine/result?type=transferDevice&id=' + id})
            })
        },
        shareDevice(id) {
            shareDevice(id).then((res) => {
                uni.navigateTo({url: '/pages/mine/result?type=shareDevice&id=' + id})
            })
        },
    },
    onShow() {
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        this.loading = false
    },
}
</script>

<style lang="scss">
.mine {
    .mine-header {
        padding: 200rpx 34rpx 34rpx;
        display: flex;
        align-items: center;
        background: $uni-theme-white;
        margin-bottom: 20rpx;
        box-shadow: 0 4rpx 8rpx #e7e7e74c;

        .mine-header-head {
            margin-right: 30rpx;
            height: 128rpx;
            width: 128rpx;
            border-radius: $uni-theme-radius;
            overflow: hidden;
        }

        .mine-header-name {
            margin-right: 30rpx;
            flex: 1;
            font-size: 36rpx;
            color: #111;
            font-weight: 700;

            .tag {
                display: flex;
                align-items: center;
                margin-top: 10rpx;
                font-size: 24rpx;
                color: #aaa;

                .engineering-button {
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    padding: 5rpx 12rpx;
                    color: #fff;
                    font-weight: 400;
                    border-radius: 16rpx;
                    background: $uni-theme-color;
                }
            }
        }
    }

    .mine-nav {
        padding: 34rpx;
        display: flex;
        align-items: center;
        background: $uni-theme-white;
        border-bottom: 1rpx solid #e8e8e8;

        &-icon {
            margin-right: 30rpx;
            height: 44rpx;
            width: 44rpx;
            border-radius: $uni-theme-radius;
            overflow: hidden;
        }

        &-label {
            margin-right: 30rpx;
            flex: 1;
            font-size: 28rpx;
            color: #111;
        }
    }
}
</style>