115 lines
2.9 KiB
Vue
115 lines
2.9 KiB
Vue
|
<!-- 全局 - 快捷入口 -->
|
||
|
|
<template>
|
||
|
|
<uni-popup
|
||
|
|
ref="popupRef"
|
||
|
|
type="top"
|
||
|
|
borderRadius="0 0 20px 20px"
|
||
|
|
backgroundColor="#F0F0F0"
|
||
|
|
@close="closeMenuTools"
|
||
|
|
@maskClick="closeMenuTools"
|
||
|
|
>
|
||
|
|
<pb-status-bar />
|
||
|
|
<view class="tools-wrap ss-m-x-30 ss-m-b-16">
|
||
|
|
<view class="title ss-m-b-34 ss-p-t-20">快捷菜单</view>
|
||
|
|
<view class="container-list ss-flex ss-flex-wrap">
|
||
|
|
<view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
|
||
|
|
<view class="ss-flex-col ss-col-center">
|
||
|
|
<button
|
||
|
|
class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
|
||
|
|
@tap="onClick(item)"
|
||
|
|
>
|
||
|
|
<image v-if="show" :src="peach.$url.static(item.icon, 'local')" class="list-icon" />
|
||
|
|
</button>
|
||
|
|
<view class="list-title ss-m-t-20">{{ item.title }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, watch, computed } from 'vue'
|
||
|
|
import peach from '@/peach'
|
||
|
|
import { closeMenuTools } from '@/peach/hooks/useModal'
|
||
|
|
|
||
|
|
const popupRef = ref()
|
||
|
|
const show = computed(() => peach.$store('modal').menu)
|
||
|
|
|
||
|
|
watch(show, (newVal) => {
|
||
|
|
if (newVal) {
|
||
|
|
popupRef.value.open()
|
||
|
|
} else {
|
||
|
|
popupRef.value.close()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
function onClick(item) {
|
||
|
|
closeMenuTools()
|
||
|
|
if (item.url) peach.$router.redirect(item.url)
|
||
|
|
}
|
||
|
|
|
||
|
|
const list = [
|
||
|
|
{
|
||
|
|
url: '/pages/user/point/share',
|
||
|
|
icon: '/static/dispensecent.png',
|
||
|
|
title: '分发积分',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/pages/user/point/buy',
|
||
|
|
icon: '/static/buycent.png',
|
||
|
|
title: '购买积分',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
url: '/pages/user/wallet/withdraw',
|
||
|
|
icon: '/static/withdraw.png',
|
||
|
|
title: '余额提现',
|
||
|
|
},
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.tools-wrap {
|
||
|
|
// background: #F0F0F0;
|
||
|
|
// box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
|
||
|
|
// opacity: 0.98;
|
||
|
|
// border-radius: 0 0 20rpx 20rpx;
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 36rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
width: calc(25vw - 20rpx);
|
||
|
|
|
||
|
|
.list-image {
|
||
|
|
width: 104rpx;
|
||
|
|
height: 104rpx;
|
||
|
|
border-radius: 52rpx;
|
||
|
|
background: var(--ui-BG);
|
||
|
|
|
||
|
|
.list-icon {
|
||
|
|
width: 54rpx;
|
||
|
|
height: 54rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-title {
|
||
|
|
font-size: 26rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.uni-popup {
|
||
|
|
top: 0 !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.button-hover) {
|
||
|
|
background: #fafafa !important;
|
||
|
|
}
|
||
|
|
</style>
|