ucard-person-app-front/pages/mine/cog.vue

<template>
    <cwg-page-wrapper>
        <view class="page">
            <view class="group">
                <view class="group-item" @click="router.push('/pages/mine/pay-password')">
                    <cwg-icon color="#000" icon="xgmm" />
                    <text class="item-text">{{ t("language.i2") }}</text>
                    <text class="version item-text"></text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
                <view class="group-item" @click="router.push('/pages/mine/language')">
                    <cwg-icon color="#000" icon="web" />
                    <text class="item-text">{{ t("language.i1") }}</text>
                    <text class="version item-text">{{ t(`language.${lang}`) }}</text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>

            <!-- <view class="group">
                <view class="group-item" @click="router.push('/pages/mine/pay-password')">
                    <cwg-icon color="#000" icon="xxtz" />
                    <text class="item-text">消息通知设置</text>
                    <text class="version item-text"></text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view> -->
            <view class="group">
                <view class="group-item" @click="router.push('/pages/mine/permission')">
                    <cwg-icon color="#000" icon="yszc" />
                    <text class="item-text">{{ t('pages.mine.permission') }}</text>
                    <text class="version item-text"></text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>
            <view class="group">
                <view class="group-item" @click="router.push('/pages/mine/privacy')">
                    <cwg-icon color="#000" icon="ys" />
                    <text class="item-text">{{ t('pages.mine.privacy') }}</text>
                    <text class="version item-text"></text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>
            <view class="group">
                <view class="group-item">
                    <cwg-icon color="#000" icon="qchc" />
                    <text class="item-text">{{ t('pages.mine.clearCache') }}</text>
                    <text class="version item-text" @click="clearCache">{{ b || a }}</text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>

            <view class="group" v-if="appVersion?.currentVersion">
                <view class="group-item">
                    <cwg-icon color="#000" icon="dqbb" />
                    <text class="item-text">{{ t('pages.mine.currentVersion') }} v{{ appVersion.currentVersion }}</text>
                    <text class="version item-text" @click="checkUpdate">{{ isUploadD }}</text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>

            <view class="group">
                <view class="group-item">
                    <cwg-icon color="#000" icon="gy" />
                    <text class="item-text">{{ t('pages.mine.about') }}</text>
                    <text class="version item-text"></text>
                    <cwg-icon color="#817f7f" icon="chevron-right" />
                </view>
            </view>

            <view class="fixed-btn">
                <view class="cwg-button">
                    <u-button type="primary" block :loading="loading" @click="showLogoutPopup = true">{{
                        t("language.i6") }}</u-button>
                </view>
            </view>
            <u-modal class="code-dialog" :show="showLogoutPopup" title="" :show-confirm-button="false"
                :show-cancel-button="false" :close-on-click-overlay="false">
                <view class="modal-class">
                    <view class="p1 title">{{ t('mine.logout') }}</view>
                    <view class="p1">{{ t('mine.p') }}</view>
                    <view class="cwg-button ok-button">
                        <u-button type="primary" block @click="handleLogout('confirm')">{{
                            t("mine.b1")
                        }}</u-button>
                    </view>
                    <view class="cwg-button no-button">
                        <u-button type="primary" block @click="handleLogout">{{
                            t("mine.b2")
                        }}</u-button>
                    </view>
                </view>
            </u-modal>
        </view>
    </cwg-page-wrapper>

</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import useRouter from "@/hooks/useRouter";
import { userApi } from "@/api/user";
import { lang } from "@/composables/config";
import useUserStore from "@/stores/use-user-store";
import { showToast } from "@/utils/toast";
import { useAppUpdate } from '@/hooks/useAppUpdate'
const { checkUpdate } = useAppUpdate()
const { t } = useI18n();
const userStore = useUserStore();
const router = useRouter();
const b = ref('')
const a = computed(() => {
    try {
        const res = uni.getStorageInfoSync();
        const currentSizeMB = (res.currentSize / 1024).toFixed(2);
        return `${currentSizeMB} MB`;
    } catch (e) {
        return 0
    }
});
const appVersion = computed(() => userStore.appVersion);
const isUploadD = computed(() => appVersion.value?.isUpdate ? t('pages.mine.newVersion') : t('pages.mine.hasNewVersion'));
const showLogoutPopup = ref(false);
async function handleLogout(action: string) {
    if (action === "confirm") {
        try {
            const res = await userApi.logout();
            if (res.code === 200) {
                userStore.clearUserInfo();
                router.push("/pages/login/index");
            }
        } catch (error) {
            showToast(error.message || "退出登录失败");
        }
    }
    showLogoutPopup.value = false;
}

const clearCache = () => {
    uni.showModal({
        title: t('pages.mine.clearCache'),
        cancelText: t('common.cancel'),
        confirmText: t('common.confirm'),
        content: t('mine.p19') + a.value,
        success: async (e) => {
            if (e.confirm) {
                b.value = '0 MB';
            } else {
                b.value = '';
            }
        }
    });
};
</script>

<style scoped lang="scss">
@import "@/uni.scss";

:deep(.u-modal__content) {
    padding: px2rpx(24) px2rpx(40);

    .p1 {
        color: #363130;
        font-family: "League Spartan";
        font-size: px2rpx(17);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: px2rpx(32);
    }

    .modal-class {
        width: px2rpx(300);

    }

    .title {
        color: #1a1a1a;
        text-align: center;
        font-family: Roboto;
        font-size: px2rpx(22);
        font-style: normal;
        font-weight: 600;
        line-height: px2rpx(22);
    }

    .no-button {
        width: 100%;
        margin: px2rpx(12) 0;

        .u-button {
            background-color: #ffbdc8 !important;
        }
    }

    .ok-button {
        margin: px2rpx(4) 0;
        /* background-color: #EA002A; */
    }
}

.user-card {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: px2rpx(24);
    padding-bottom: px2rpx(48);

    .avatar {
        width: px2rpx(64);
        height: px2rpx(64);
        border-radius: 50%;
        background: #d8d8d8 url("/static/images/avatars.png") center/cover no-repeat;
        border: 4rpx solid #fff;
    }

    .phone {
        color: #1a1a1a;
        font-family: Roboto;
        font-size: px2rpx(22);
        font-style: normal;
        font-weight: 600;
        line-height: px2rpx(4);
    }
}

.user-info .group {
    background: var(--action-bg);
    border-radius: px2rpx(16);
    margin-top: px2rpx(24);
    overflow: hidden;
}

.group-item {
    display: flex;
    align-items: center;
    padding: px2rpx(16) 0;
    color: #000;
    font-size: px2rpx(16);
    /* border-bottom: 2rpx solid var(--action-bg); */
    position: relative;
}

.group-item:last-child {
    border-bottom: none;
}

svg {
    width: px2rpx(24);
    height: px2rpx(24);
    color: #000;
    font-size: px2rpx(24);
}

.group-item .version {
    margin-left: auto;
    color: #817f7f;
    font-size: px2rpx(16);
}

.item-text {
    margin-left: px2rpx(12);
}

.code-dialog {
    display: flex;
    justify-content: center;
    gap: px2rpx(12);
    padding: px2rpx(16);

    :deep(.u-popup__content) {
        width: 90% !important;
    }

    :deep(.u-modal) {
        width: 100% !important;
    }
}
</style>