ox_zhiNengZhuShou/src/pages/menu/forth.vue

<template>
    <view class="forth-menu">
        <mine-header
            @on:munted="menuPackageLoaded = true"
            :is-login="loginState"
            @click:login="loginBtn"
            :nickname="userInfo.nickname"
            :name="userInfo.actual_name"
            :account="userInfo.mobile || userInfo.username || ''"
            :photo="userInfo.avatar_url"
            @click:update="updateUser"
        ></mine-header>
        <!-- 后端： account-> 如果有手机号就显示手机号  没有的话显示username, 都没有的话就空好了 -->
        <block v-if="menuPackageLoaded">
            <line-tab :icon-num='0'>
                <template slot="default">账号管理</template>
                <template slot="right">
                    <view class="ft-account">
                        <view class="fc-name"  v-if="loginState">{{ extension.brand_name || '-' }}</view>
                        <image class="fc-icon" mode="aspectFit" src="/static/images/icon/arrow_b2.png"></image>
                    </view>
                </template>
            </line-tab>
            <line-tab :icon-num='1' @click="toWebView(deadData.helpCenterLink)">帮助中心</line-tab>
            <block v-if="loginState">
                <line-tab :icon-num='2' @click="toMiniProgram(deadData.assistantCoachAppid)">教练助手</line-tab>
                <line-tab :icon-num='3'>
                    <template slot="default">收银系统</template>
                    <template slot="right">
                        <view class="fm-copy" @click="copyLink(deadData.cashierSystemLink)">(复制网址)</view>
                    </template>
                </line-tab>
                <line-tab :icon-num='4' @click="toWebView(deadData.backstageLink)">
                    <view class="fm-admin">
                        <view class="fa-txt">总后台<text class="ft-txt">({{ deadData.backstageLink }})</text></view><view class="fa-copy" @click.stop="copyLink(deadData.backstageLink)">复制</view>
                    </view>
                </line-tab>
            </block>
            
            
            <line-tab :icon-num='5' @click="toComplaint">投诉建议</line-tab>
            <line-tab :icon-num='6' v-if="loginState" @click="unBindBtn">解绑退出</line-tab>
        </block>
        <bottom-logo></bottom-logo>

        <authorization-login ref="authorizationLogin"></authorization-login>
        <authorization-user ref="authorizationUser"></authorization-user>
    </view>
</template>

<script>
import mineHeader from "@/subpackage/menu/components/mine/header.vue";
import lineTab from "@/subpackage/menu/components/mine/line_tab.vue";
import bottomLogo from "@/subpackage/menu/components/bottom_logo.vue";
import authorizationLogin from "@/subpackage/authorization/components/login.vue";
import authorizationUser from "@/subpackage/authorization/components/user_info/impower.vue";
import { routeTo, debounce, showLoad, hideLoad, showModal, showNone, jsonStr } from "@/utils/util.js";
import { mapGetters } from 'vuex';
import { servers } from '../../js/server';
import { API } from '../../js/api';
export default {
    components:{
        mineHeader,
        lineTab,
        bottomLogo,
        authorizationLogin,
        authorizationUser,
    },
    data(){
        return {
            brand_id: '',
            menuPackageLoaded: false,
            userInfo: {},
            deadData: {
                helpCenterLink: 'https://help.ouxuanzhineng.cn/', // 帮助中心
                cashierSystemLink: 'https://kb.ouxuanzhineng.cn/', // 收银系统
                backstageLink: 'https://admin.ouxuanzhineng.cn/', // 总后台
                assistantCoachAppid: 'wxd71043ec955dfecf', // 教练助手：AppID
            },
        }
    },
    computed: {
        ...mapGetters([ 'loginState' ]),
        extension(){
            return this.userInfo?.extension || {}
        },
    },
    onLoad(options){
        this.brand_id = options?.brand_id ?? '';
        if(this.loginState)this.getUserInfo();
    },
    methods: {
        // 解绑
        unBindBtn: debounce(function(){
            let { userInfo } = this;
            if(!userInfo?.id)return showModal({ content: '用户信息有误' })
            showModal({
                content: '您确定要解绑退出吗？',
                showCancel: true,
                success: mRes=>{
                    if(mRes.confirm)this.unBindReq(userInfo.id);
                }
            })
            
        }, 300, true),
        // 解绑请求
        unBindReq(user_id){
            showLoad();
            return servers.post({
                url: API.mine.unbindAssistant,
                data: { user_id },
                isDefaultGet: false,
            })
            .then(res => {
                hideLoad();
                let _data = res?.data || {};
                if(_data.code === 0){
                    showNone('操作成功！');
                    setTimeout(() => {
                        this.$store.commit('setLoginState', { loginState: false });
                        routeTo(`/pages/login/login`,'rL');
                    }, 1000);
                    console.log('pages menu unBindReq res --->', _data);
                }else{
                    return Promise.reject(_data);
                }
            })
            .catch(err => {
                hideLoad();
                showModal({ content: err?.message || '操作失败！' });
                console.warn('pages menu unBindReq err --->', err);
                // return Promise.reject(err);
            })
        },
        // 更新用户信息
        updateUser(){
            this.$refs?.authorizationUser?.show?.({ success: this.getUserInfo });
        },
        // 跳转小程序
        toMiniProgram(appid){
            uni.navigateToMiniProgram({ appId: appid });
        },
        // 跳转网页
        toWebView(url){
            routeTo(`/pages/web_view/web_view?src=${jsonStr(url)}`, 'nT');
        },
        // 复制链接
        copyLink(url){
            uni.setClipboardData({ data: url });
        },
        // 投诉建议
        toComplaint(){
            let { brand_id } = this;
            routeTo(`/subpackage/message/pages/complaint/list?brand_id=${brand_id}`, 'nT');
        },
        // 登录
        loginBtn(){
            this.$refs?.authorizationLogin?.alert?.({
                success: ()=>{
                    this.getUserInfo();
                },
                fail: err =>{
                    // console.warn('pages index showAuthor authorizationLogin Err ->', err)
                }
            })
        },
        getUserInfo(){
            showLoad();
            return servers.post({
                url: API.mine.userCurrent,
                data: {},
                isDefaultGet: false,
            })
            .then(res => {
                hideLoad();
                let _data = res?.data || {};
                if(_data.code === 0){
                    this.userInfo = _data?.data || {};
                    console.log('pages menu getUserInfo res --->', _data);
                }else{
                    return Promise.reject(_data);
                }
            })
            .catch(err => {
                hideLoad();
                showModal({ content: err?.message || '加载用户失败！' });
                console.warn('pages menu getUserInfo err --->', err);
                // return Promise.reject(err);
            })
        },
    }
}
</script>

<style lang="scss">
    .forth-menu{

    }
    .fm-txt{
        font-size: 28upx;
        .ft-copy{
            color: $mColor;
        }
    }
    .ft-account{
        @include ctf(flex-end);
        .fc-name{
            @include flcw(32upx, 48upx, #9A9A9D);
            @include tHide;
        }
        .fc-icon{
            flex-shrink: 0;
            margin-left: 22upx;
            width: 30upx;
            height: 30upx;
        }
    }
    .fm-copy{
        @include flcw(32upx, 44upx, $mColor);
    }
    .fm-admin{
        @include ctf;
        .fa-txt{
            @include flcw(32upx, 44upx, #9A9A9D);
            @include tHide;
            .ft-txt{
                font-size: 28upx;
            }
        }
        .fa-copy{
            padding: 0upx 10upx;
            flex-shrink: 0;
            @include flcw(28upx, 44upx, $mColor);
        }
    }
</style>