<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 :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="发现好友" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="man-add" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="创作者中心" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="/static/common/light.png" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="我的草稿" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="file-text" />
|
</template>
|
</up-cell>
|
<up-cell title="我的评论" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="chat" />
|
</template>
|
</up-cell>
|
<up-cell title="浏览记录" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="clock" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="订单" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="order" />
|
</template>
|
</up-cell>
|
<up-cell title="购物车" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="shopping-cart" />
|
</template>
|
</up-cell>
|
<up-cell title="钱包" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="/static/common/wallet.png" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="小程序" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="/static/common/xcx.png" />
|
</template>
|
</up-cell>
|
</up-cell-group>
|
|
<up-cell-group :border="false" :customStyle="cellGroupStyle">
|
<up-cell title="社区公约" url="/pages/componentsB/tag/tag" :border="false">
|
<template #icon>
|
<up-icon :size="btnSize" name="/static/common/sqgy.png" />
|
</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 = "50rpx"
|
|
const baseList = [
|
{ name: 'scan', title: '扫一扫' },
|
{ name: 'kefu-ermai', title: '帮助与客服' },
|
{ name: 'setting', title: '设置' },
|
]
|
|
const handleGridClick = (item: { name: string; title: string; url?: string }, index: number) => {
|
console.log('点击了：', item, '索引为：', index)
|
|
if (item.title === '订单') {
|
uni.navigateTo({ url: '/pages/order/index' })
|
} else if (item.title === '购物车') {
|
uni.navigateTo({ url: '/pages/cart/index' })
|
} else if (item.title === '设置') {
|
uni.navigateTo({ url: '/sub-pages/mine/settings' })
|
} else {
|
uni.navigateTo({ url: item.url || '/pages/default/index' })
|
}
|
}
|
|
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>
|
