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

<template>
    <cwg-page-wrapper class="permission-page">
        <view class="content">
            <view class="permission-list">
                <view v-for="item in permissionList" :key="item.key" class="permission-item"
                    @click="onPermissionClick(item)">
                    <view class="item-left">
                        <view class="item-info">
                            <view class="item-title">{{ item.title }}</view>
                            <view class="item-desc">{{ item.desc }}
                                <text class="item-description" v-if="item.description"
                                    @click.stop="goDetail(item)">《{{ item.description }}》</text>
                            </view>
                        </view>
                    </view>

                    <view class="item-right">
                        <view :class="['status', item.status]">
                            {{ item.status }}
                        </view>
                        <cwg-icon color="#817f7f" icon="chevron-right" />
                    </view>
                </view>
            </view>

            <view class="tips">
                <text class="tips-text">
                    {{ t('mine.p14') }}
                </text>
            </view>
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { permission } from '@/js_sdk/wa-permission/permission.js'
import { onLoad } from '@dcloudio/uni-app'
import useRouter from "@/hooks/useRouter";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
// #ifdef APP-PLUS
let isIos = false
try {
    isIos = (plus.os.name === "iOS")
} catch (e) {
    console.error('检测平台失败:', e)
}
// #endif

/* =======================
 * 权限列表配置（核心）
 * ======================= */
const permissionList = ref([
    // {
    //     key: 'location',
    //     title: t('mine.p1'),
    //     desc: t('mine.p2'),
    //     icon: 'location',
    //     iconBg: 'location',
    //     iosPermission: 'location',
    //     androidPermission: 'android.permission.ACCESS_FINE_LOCATION',
    //     status: t('mine.p13'),
    //     type: 4,
    //     description: t('mine.p3')
    // },
    {
        key: 'camera',
        title: t('mine.p4'),
        desc: t('mine.p5'),
        icon: 'camera',
        iconBg: 'camera',
        iosPermission: 'camera',
        androidPermission: 'android.permission.CAMERA',
        status: t('mine.p13'),
        type: 2,
        description: t('mine.p6')
    },
    // {
    //     key: 'microphone',
    //     title: '麦克风',
    //     desc: '录制音频',
    //     icon: 'sound',
    //     iconBg: 'microphone',
    //     iosPermission: 'record',
    //     androidPermission: 'android.permission.RECORD_AUDIO',
    //     status: t('mine.p13')
    // },
    {
        key: 'album',
        title: t('mine.p7'),
        desc: t('mine.p8'),
        icon: 'image',
        iconBg: 'album',
        iosPermission: 'photoLibrary',
        androidPermission: 'android.permission.READ_EXTERNAL_STORAGE',
        status: t('mine.p13'),
        type: 3,
        description: t('mine.p9')
    },
    {
        key: 'clipboard',
        title: t('mine.p10'),
        desc: t('mine.p11'),
        icon: 'list',
        iconBg: 'clipboard',
        iosPermission: null,
        androidPermission: null,
        status: t('mine.p12'),
    }
])

const goDetail = (item: any) => {
    let type = item.type;
    //  console.log(item, 111111);

    router.push({
        path: "/pages/mine/privacy",
        query: {
            type
        },
    });
}

/* =======================
 * 点击入口 - 检查权限并引导授权
 * ======================= */
const onPermissionClick = async (item: any) => {
    // 粘贴板无需授权，直接提示
    if (!item.iosPermission && !item.androidPermission) {
        uni.showToast({
            title: '该权限无需授权',
            icon: 'success'
        })
        return
    }

    // #ifdef APP-PLUS
    permission.gotoAppPermissionSetting()
    // #endif

    // #ifndef APP-PLUS
    uni.showToast({
        title: '当前平台无需授权',
        icon: 'success'
    })
    // #endif
}

/* =======================
 * 初始化检查权限 - 遍历所有权限进行检查
 * ======================= */
const checkAllPermissions = async () => {
    // #ifdef APP-PLUS
    try {
        for (const item of permissionList.value) {
            // 粘贴板无需检查
            if (!item.iosPermission && !item.androidPermission) {
                item.status = t('mine.p12')
                continue
            }

            if (isIos) {
                // iOS 权限检查
                const hasPermission = permission.judgeIosPermission(item.iosPermission)
                item.status = hasPermission ? t('mine.p12') : t('mine.p13')
                //  console.log(`${item.title} iOS 初始状态:`, item.status)
            } else {
                // Android 权限请求
                const result = await permission.checkAndroidPermission(item.androidPermission)
                //  console.log(`${item.title} Android 权限结果:`, result)

                if (result === 1) {
                    item.status = t('mine.p12')
                } else if (result === -1) {
                    item.status = t('mine.p13')
                } else {
                    item.status = t('mine.p13')
                }
            }
        }
    } catch (error) {
        console.error('检查权限失败:', error)
    }
    // #endif

    // #ifndef APP-PLUS
    // 非 APP 平台全部标记为已授权
    permissionList.value.forEach(item => {
        item.status = t('mine.p12')
    })
    // #endif
}
onMounted(() => {
    checkAllPermissions()
})
</script>

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

.permission-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: px2rpx(12) !important;

    .content {
        .permission-list {
            background-color: #fff;
            border-radius: px2rpx(16);
            overflow: hidden;

            .permission-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: px2rpx(32) px2rpx(12);
                border-bottom: 1px solid #f0f0f0;

                &:last-child {
                    border-bottom: none;
                }

                &:active {
                    background-color: #f8f8f8;
                }

                .item-left {
                    display: flex;
                    align-items: center;
                    flex: 1;

                    .icon-wrapper {
                        width: px2rpx(44);
                        height: px2rpx(44);
                        border-radius: px2rpx(8);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-right: px2rpx(24);

                        &.location {
                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                        }

                        &.camera {
                            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                        }

                        &.microphone {
                            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
                        }

                        &.album {
                            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
                        }

                        &.clipboard {
                            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
                        }
                    }

                    .item-info {
                        flex: 1;

                        .item-title {
                            font-size: px2rpx(18);
                            font-weight: 500;
                            color: #333;
                            display: block;
                            margin-bottom: px2rpx(8);
                        }

                        .item-desc {
                            font-size: px2rpx(16);
                            color: #999;
                            display: block;
                        }

                        .item-description {
                            font-size: px2rpx(14);
                            color: var(--main-yellow);
                        }
                    }
                }

                .item-right {
                    display: flex;
                    align-items: center;
                    gap: px2rpx(4);

                    .status {
                        font-size: px2rpx(16);
                        padding: px2rpx(8) px2rpx(12);
                        border-radius: px2rpx(4);

                        &.未授权 {
                            color: #999;
                            background-color: #f5f5f5;
                        }

                        &.已授权 {
                            color: #52c41a;
                            background-color: #f6ffed;
                        }

                        &.已拒绝 {
                            color: #ff4d4f;
                            background-color: #fff1f0;
                        }
                    }
                }
            }
        }

        .tips {
            margin-top: px2rpx(24);
            padding: px2rpx(24);
            background-color: #fffbe6;
            border-radius: px2rpx(16);
            border: 1px solid #ffe58f;

            .tips-text {
                font-size: px2rpx(12);
                color: #d48806;
                line-height: 1.6;
            }
        }
    }
}
</style>