<template>
|
<up-popup :show="showPopup" mode="left" @open="handleOpen" @close="handleClose" closeOnClickOverlay
|
customStyle="background-color: #FAFAFA;">
|
<scroll-view scroll-y class="setting-scroll">
|
<view class="setting-page">
|
<up-cell-group v-for="(group, groupIndex) in cellGroupList" :key="groupIndex" :border="false"
|
:customStyle="cellGroupStyle">
|
<up-cell v-for="(item, index) in group" :key="index" :title="item.title" :url="item.url"
|
:border="false" @click="handleCellClick(item, index)">
|
<template #icon>
|
<up-icon :size="item.btnSize" :name="item.icon" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
</view>
|
</scroll-view>
|
|
<view class="opeartor-view">
|
<up-grid :border="false">
|
<up-grid-item v-for="(item, index) in baseList" :key="index" @click="handleGridClick(item, index)">
|
<up-icon :customStyle="{ paddingTop: '20rpx' }" :name="item.name" :size="30" />
|
<text class="grid-text">{{ item.title }}</text>
|
</up-grid-item>
|
</up-grid>
|
</view>
|
</up-popup>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, ref, watch } from 'vue'
|
|
const props = defineProps<{
|
modelValue: boolean
|
}>()
|
|
const emit = defineEmits(['update:modelValue']); // 修改这里
|
|
const showPopup = ref(props.modelValue);
|
|
const cellGroupStyle = 'background-color: #ffffff; margin-bottom: 20rpx; border-radius: 16rpx;'
|
const btnSize = "22"
|
|
const cellGroupList = [
|
[
|
{ title: "发现好友", icon: "man-add", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize}
|
],
|
[
|
{ title: "创作者中心", icon: "/static/common/light.png", url: "/pages/componentsB/tag/tag",btnSize: btnSize }
|
],
|
[
|
{ title: "我的草稿", icon: "file-text", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize},
|
{ title: "我的评论", icon: "chat", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize},
|
{ title: "浏览记录", icon: "clock", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize}
|
],
|
[
|
{ title: "订单", icon: "order", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize},
|
{ title: "购物车", icon: "shopping-cart", url: "/pages/componentsB/tag/tag" ,btnSize: btnSize},
|
{ title: "钱包", icon: "/static/common/wallet.png", url: "/pages/componentsB/tag/tag" ,btnSize: 15}
|
],
|
[
|
{ title: "小程序", icon: "/static/common/xcx.png", url: "/pages/componentsB/tag/tag",btnSize: 15 }
|
],
|
[
|
{ title: "社区公约", icon: "/static/common/sqgy.png", url: "/pages/componentsB/tag/tag" ,btnSize: 15}
|
]
|
];
|
|
const baseList = [
|
{ name: 'scan', title: '扫一扫',url:'/sub-pages/mine/settings'},
|
{ name: 'kefu-ermai', title: '帮助与客服' ,url:'/sub-pages/mine/settings'},
|
{ name: 'setting', title: '设置',url:'/sub-pages/mine/settings' },
|
]
|
|
const handleGridClick = (item: { name: string; title: string; url?: string }, index: number) => {
|
|
uni.navigateTo({ url: item.url })
|
}
|
const handleCellClick = (item: { title: string; icon: string; url?: string;btnSize:String }, index: number) => {
|
|
uni.navigateTo({ url: item.url })
|
}
|
|
const handleOpen = () => { }
|
|
const handleClose = () => {
|
showPopup.value = false;
|
}
|
watch(
|
() => props.modelValue,
|
(newVal) => {
|
showPopup.value = newVal;
|
}
|
);
|
|
// 监听内部 showPopup 变化，通知外部更新 modelValue
|
watch(showPopup, (val) => {
|
emit('update:modelValue', val);
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.setting-page {
|
width: 400rpx;
|
padding: 20rpx;
|
box-sizing: border-box;
|
overflow-y: auto;
|
height: calc(100vh - 200rpx);
|
}
|
|
.opeartor-view {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
width: 100%;
|
padding: 10rpx;
|
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
z-index: 10;
|
box-sizing: border-box;
|
height: 200rpx;
|
|
.grid-text {
|
font-size: 26rpx;
|
color: #909399;
|
padding: 10rpx 0 20rpx 0;
|
box-sizing: border-box;
|
}
|
}
|
</style>
|
