首页改版，增加全部操作页面，新增店铺装修页面
This commit is contained in:
@@ -5,161 +5,191 @@
|
||||
@date 2022/11/16 11:45
|
||||
-->
|
||||
<template>
|
||||
<!-- 宫格类型 -->
|
||||
<template v-if="props.type == 'grid'">
|
||||
<view class="grid-card-wrapper" :style="{ margin: calcPadding(), '--space-w': space + 'rpx' }">
|
||||
<block v-for="(v, i) in navListComputed" :key="i">
|
||||
<view
|
||||
class="card-main"
|
||||
:style="{ margin: calcMargin(), '--radius-size': radiusSize + 'rpx' }"
|
||||
hover-class="touch-hover"
|
||||
hover-stay-time="150"
|
||||
:class="{ 'card-big-main': navListComputed.length == 4 || navListComputed.length <= 2 }"
|
||||
@tap="clickFunc(v)"
|
||||
>
|
||||
<image :src="v.icon" mode="scaleToFill" />
|
||||
<view class="card-title">{{ v.title }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 宫格类型 -->
|
||||
<template v-if="props.type == 'grid'">
|
||||
<view class="grid-card-wrapper" :style="{ margin: calcPadding(), '--space-w': space + 'rpx' }">
|
||||
<block v-for="(v, i) in navListComputed" :key="i">
|
||||
<view class="card-main" :style="{ margin: calcMargin(), '--radius-size': radiusSize + 'rpx' }"
|
||||
hover-class="touch-hover" hover-stay-time="150"
|
||||
:class="{ 'card-big-main': navListComputed.length == 4 || navListComputed.length <= 2 }"
|
||||
@tap="clickFunc(v)">
|
||||
<image :src="v.icon" mode="scaleToFill" />
|
||||
<view class="card-title">{{ v.title }}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<!-- 列表类型 -->
|
||||
<template v-if="props.type == 'list'">
|
||||
<view class="list-nav-wrapper" :style="{ '--radius-size': radiusSize + 'rpx' }">
|
||||
<block v-for="(v, i) in navListComputed" :key="i">
|
||||
<view class="nav-main" hover-class="touch-hover" hover-stay-time="150" @tap="clickFunc(v)">
|
||||
<image :src="v.icon" mode="scaleToFill" />
|
||||
<view class="nav-text">{{ v.title }}</view>
|
||||
<image class="nav-right" src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
<!-- 列表类型 -->
|
||||
<template v-if="props.type == 'list'">
|
||||
<view class="list-nav-wrapper" :style="{ '--radius-size': radiusSize + 'rpx' }">
|
||||
<block v-for="(v, i) in navListComputed" :key="i">
|
||||
<view class="nav-main" hover-class="touch-hover" hover-stay-time="150" @tap="clickFunc(v)">
|
||||
<image :src="v.icon" mode="scaleToFill" />
|
||||
<view class="nav-text">{{ v.title }}</view>
|
||||
<image class="nav-right" src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, computed } from "vue"
|
||||
import go from "@/commons/utils/go.js"
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js'
|
||||
const menusStore = useMenusStore()
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
computed
|
||||
} from "vue"
|
||||
import go from "@/commons/utils/go.js"
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
// 定义组件参数
|
||||
const props = defineProps({
|
||||
//显示类型： 支持 grid-宫格 list-列表
|
||||
type: { type: String, default: "list" },
|
||||
// 定义组件参数
|
||||
const props = defineProps({
|
||||
//显示类型： 支持 grid-宫格 list-列表
|
||||
type: {
|
||||
type: String,
|
||||
default: "list"
|
||||
},
|
||||
|
||||
// 圆角矩形大小 为0 则 无圆角
|
||||
radiusSize: { type: Number, default: 32 },
|
||||
// 圆角矩形大小 为0 则 无圆角
|
||||
radiusSize: {
|
||||
type: Number,
|
||||
default: 32
|
||||
},
|
||||
|
||||
//间隙类型： 仅grid-宫格时生效， 支持 0 和 25
|
||||
space: { type: Number, default: 25 },
|
||||
//间隙类型： 仅grid-宫格时生效， 支持 0 和 25
|
||||
space: {
|
||||
type: Number,
|
||||
default: 25
|
||||
},
|
||||
|
||||
// 导航列表， 格式：{ icon, title, pageUrl, clickFunc, entId }
|
||||
navList: { type: Array, default: () => [] },
|
||||
})
|
||||
// 导航列表， 格式：{ icon, title, pageUrl, clickFunc, entId }
|
||||
navList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
})
|
||||
|
||||
// 点击事件
|
||||
async function clickFunc(nav) {
|
||||
if(nav.pageUrl=="PAGES_SALES_SUMMARY"){
|
||||
let res =await hasPermission('允许查看经营数据')
|
||||
if(!res) return
|
||||
// 点击事件
|
||||
async function clickFunc(nav) {
|
||||
if (nav.pageUrl == "PAGES_SALES_SUMMARY") {
|
||||
let res = await hasPermission('允许查看经营数据')
|
||||
if (!res) return
|
||||
}
|
||||
// 包含回调事件
|
||||
if (nav.clickFunc) {
|
||||
return nav.clickFunc(nav)
|
||||
}
|
||||
|
||||
// 包含URL
|
||||
if (nav.pageUrl) {
|
||||
return go.to(nav.pageUrl)
|
||||
}
|
||||
}
|
||||
// 包含回调事件
|
||||
if (nav.clickFunc) {
|
||||
return nav.clickFunc(nav)
|
||||
}
|
||||
|
||||
// 包含URL
|
||||
if (nav.pageUrl) {
|
||||
return go.to(nav.pageUrl)
|
||||
}
|
||||
}
|
||||
const calcPadding = () => `${50 - props.space}rpx 35rpx 50rpx ${35 - props.space}rpx`
|
||||
const calcMargin = () => `${props.space}rpx 0 0 ${props.space}rpx`
|
||||
const calcPadding = () => `${50 - props.space}rpx 35rpx 50rpx ${35 - props.space}rpx`
|
||||
const calcMargin = () => `${props.space}rpx 0 0 ${props.space}rpx`
|
||||
|
||||
|
||||
// 计算属性
|
||||
let navListComputed = computed(() => {
|
||||
return props.navList.filter(r => hasEnt(r.entId))
|
||||
})
|
||||
// 计算属性
|
||||
let navListComputed = computed(() => {
|
||||
// return props.navList.filter(r => hasEnt(r.entId))
|
||||
// return props.navList.filter(r => {
|
||||
// if (r.hasOwnProperty('visiable')) {
|
||||
// return r.visiable
|
||||
// } else {
|
||||
// return true
|
||||
// }
|
||||
// })
|
||||
return props.navList.filter(r => {
|
||||
return menusStore.menuList.find(menu=>menu.pageId==r.pageUrl)
|
||||
})
|
||||
})
|
||||
|
||||
function hasEnt(entId){
|
||||
|
||||
// 不包含： 说明无需隐藏
|
||||
if(!entId){
|
||||
return true
|
||||
function hasEnt(entId) {
|
||||
|
||||
// 不包含： 说明无需隐藏
|
||||
if (!entId) {
|
||||
return true
|
||||
}
|
||||
return ent.has(entId)
|
||||
}
|
||||
return ent.has(entId)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid-card-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background-color: $v-color-bgrey;
|
||||
padding-top: 25rpx;
|
||||
.card-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 25rpx 0 0 25rpx;
|
||||
width: calc(33.3% - var(--space-w));
|
||||
height: 210rpx;
|
||||
border-radius: var(--radius-size);
|
||||
background-color: $J-bg-ff;
|
||||
image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
.card-title {
|
||||
margin-top: 22rpx;
|
||||
color: $J-color-t80;
|
||||
font-size: $J-f-size30;
|
||||
}
|
||||
}
|
||||
.card-big-main {
|
||||
width: calc(50% - var(--space-w));
|
||||
}
|
||||
}
|
||||
.grid-card-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.card-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 25rpx 0 0 25rpx;
|
||||
width: calc(33.3% - var(--space-w));
|
||||
height: 210rpx;
|
||||
border-radius: var(--radius-size);
|
||||
background-color: $J-bg-ff;
|
||||
|
||||
.list-nav-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 680rpx;
|
||||
border-radius: var(--radius-size);
|
||||
overflow: hidden;
|
||||
image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
}
|
||||
|
||||
.nav-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
height: 120rpx;
|
||||
background-color: $J-bg-ff;
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 20rpx 0 10rpx;
|
||||
}
|
||||
.nav-text {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.nav-right {
|
||||
margin: 0;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
.nav-setup {
|
||||
margin: 30rpx auto;
|
||||
width: 680rpx;
|
||||
border-radius: $J-b-r32;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.card-title {
|
||||
margin-top: 22rpx;
|
||||
color: $J-color-t80;
|
||||
font-size: $J-f-size30;
|
||||
}
|
||||
}
|
||||
|
||||
.card-big-main {
|
||||
width: calc(50% - var(--space-w));
|
||||
}
|
||||
}
|
||||
|
||||
.list-nav-wrapper {
|
||||
margin: 0 auto;
|
||||
width: 680rpx;
|
||||
border-radius: var(--radius-size);
|
||||
overflow: hidden;
|
||||
|
||||
.nav-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
height: 120rpx;
|
||||
background-color: $J-bg-ff;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 20rpx 0 10rpx;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
flex: 1;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
margin: 0;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-setup {
|
||||
margin: 30rpx auto;
|
||||
width: 680rpx;
|
||||
border-radius: $J-b-r32;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user