首页改版，增加全部操作页面，新增店铺装修页面
This commit is contained in:
parent
6cc53db443
commit
bb84b49ddc
8
App.vue
8
App.vue
|
|
@ -17,10 +17,10 @@ App.vue本身不是页面，这里不能编写视图元素，也就是没有<tem
|
|||
});
|
||||
onLaunch(() => {
|
||||
// 非开发工具移除 console.log console.info
|
||||
if (uni.getSystemInfoSync().platform !== "devtools") {
|
||||
console.log = () => {};
|
||||
console.info = () => {};
|
||||
}
|
||||
// if (uni.getSystemInfoSync().platform !== "devtools") {
|
||||
// console.log = () => {};
|
||||
// console.info = () => {};
|
||||
// }
|
||||
let that = this
|
||||
uni.hideTabBar()
|
||||
// #ifdef MP-WEIXIN
|
||||
|
|
|
|||
|
|
@ -308,6 +308,9 @@ text {
|
|||
.border-r-12{
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.border-r-16{
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.border-r-18{
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const model = {
|
|||
|
||||
setLogin(res){
|
||||
uni.setStorageSync('shopInfo',res.shopInfo)
|
||||
uni.setStorageSync('shopStaff',res.shopStaff)
|
||||
uni.setStorageSync('loginType',res.loginType)
|
||||
if(res.loginType=='1'){
|
||||
// uni.setStorageSync('merchantName',user.createBy||user.updateBy)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import http from '@/http/http.js'
|
||||
const request = http.request
|
||||
const prveUrl='account'
|
||||
export function getMenus() {
|
||||
return request({
|
||||
url: `${prveUrl}/admin/menus`,
|
||||
method: "GET",
|
||||
})
|
||||
}
|
||||
5
main.js
5
main.js
|
|
@ -6,7 +6,7 @@ import storageManage from '@/commons/utils/storageManage.js'
|
|||
import dict from '@/commons/utils/dict.js'
|
||||
import {utils} from '@/commons/utils/index.js'
|
||||
import uviewPlus from 'uview-plus'
|
||||
|
||||
import * as Pinia from 'pinia';
|
||||
// 设置node环境
|
||||
envConfig.changeEnv(storageManage.env())
|
||||
|
||||
|
|
@ -34,6 +34,7 @@ export function createApp() {
|
|||
const app = createSSRApp(App)
|
||||
|
||||
app.use(uviewPlus)
|
||||
app.use(Pinia.createPinia());
|
||||
app.config.globalProperties.$appName = appConfig.appName
|
||||
uni.$appName = appConfig.appName
|
||||
app.config.globalProperties.$utils = utils
|
||||
|
|
@ -42,7 +43,7 @@ export function createApp() {
|
|||
uni.$dict = dict
|
||||
|
||||
return {
|
||||
app
|
||||
app,Pinia
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -5,8 +5,10 @@
|
|||
"gm-crypto": "^0.1.8",
|
||||
"immutable": "^4.3.7",
|
||||
"js-base64": "^3.7.2",
|
||||
"jsbn": "^1.1.0",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"lodash": "^4.17.21",
|
||||
"to-arraybuffer": "^1.0.1",
|
||||
"uview-plus": "^3.3.32"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -23,7 +23,8 @@
|
|||
</template>
|
||||
</uni-easyinput>
|
||||
<view class="u-m-l-4">
|
||||
<button class="" type="text" @click="searchConfirm"><text class="color-333">搜索</text></button>
|
||||
<!-- <button class="" type="text" @click="searchConfirm"><text class="color-333">搜索</text></button> -->
|
||||
<button class="" type="text" ><text class="color-main font-bold">清台设置</text></button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ export default [{
|
|||
{
|
||||
label: "点餐中",
|
||||
type: "ordering",
|
||||
color: "#46AEA4",
|
||||
color: "#63ACA4",
|
||||
},
|
||||
{
|
||||
label: "未结账",
|
||||
type: "unsettled",
|
||||
color: "#DD3F41",
|
||||
color: "#CC4C48",
|
||||
},
|
||||
{
|
||||
label: "支付中",
|
||||
|
|
@ -26,7 +26,7 @@ export default [{
|
|||
{
|
||||
label: "待清台",
|
||||
type: "settled ",
|
||||
color: "#FF9500",
|
||||
color: "#F19A37",
|
||||
},
|
||||
{
|
||||
label: "关台",
|
||||
|
|
@ -36,6 +36,6 @@ export default [{
|
|||
{
|
||||
label: "预定",
|
||||
type: "subscribe",
|
||||
color: "#58B22C",
|
||||
color: "#6FB043",
|
||||
},
|
||||
];
|
||||
30
pages.json
30
pages.json
|
|
@ -62,6 +62,36 @@
|
|||
"style": {
|
||||
"navigationBarTitleText": "选择门店"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/permission/permission",
|
||||
"pageId": "PAGES_PERSSION",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "全部操作"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/shopSetUp/decoration",
|
||||
"pageId": "PAGES_DECORATION",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "店铺装修"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/appliccation/list",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "列表管理"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/appliccation/marketing",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : "营销中心"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,69 +1,149 @@
|
|||
<template>
|
||||
<view class="statistics">
|
||||
<view class="title">
|
||||
<text>数据统计</text>
|
||||
</view>
|
||||
<view class="statisticsBox">
|
||||
<view class="time-wrapper">
|
||||
<view class="time-wrapper u-m-l-10 u-m-r-10">
|
||||
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
|
||||
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
|
||||
<view class="time-item" @tap="changeTime(v.value,i)" :class="{ 'time-selected':v.value==selected }">
|
||||
{{v.label}}
|
||||
</view>
|
||||
<view class="xian" v-if="v.value==selected "> </view>
|
||||
<!-- <view class="xian" v-if="v.value==selected "> </view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="time_bootom_line">
|
||||
<view class="block" :style="{
|
||||
transform:'translateX('+comBlockX+'rpx) rotate(45deg) '
|
||||
}"></view>
|
||||
</view>
|
||||
<view class="bottom"></view>
|
||||
<div class="u-flex u-row-between u-font-28 color-333">
|
||||
<div class=" u-flex-1 ">
|
||||
|
||||
<view class="payList">
|
||||
<view class="li" v-for="(item,index) in list" :key="index">
|
||||
<view style="text-align: center;">
|
||||
{{item.payType}}
|
||||
<view>
|
||||
<view class="">营业额</view>
|
||||
<view class="u-m-t-16">
|
||||
<up-text bold color="#318AFE" size="20" mode="price" :text="yingyeE"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;" class="u-m-t-6">
|
||||
{{item.payAmount}}
|
||||
<view class="u-m-t-32">
|
||||
<view class="">退款</view>
|
||||
<view class="u-m-t-14">
|
||||
<up-text color="#333" size="14" bold mode="price" :text="refundCount"></up-text>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
<view class="line"></view>
|
||||
<view class="payList u-flex-1 u-p-l-40">
|
||||
<view class="li w-full u-flex u-row-between u-font-24 color-333" v-for="(item,index) in list"
|
||||
:key="index">
|
||||
<view class="u-flex">
|
||||
<view :style="returnColorStyle(item,index)" class="circle"></view>
|
||||
<view class="u-m-l-8">
|
||||
{{item.payType}}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="text-align: center;" class="u-m-t-6">
|
||||
{{item.payAmount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
|
||||
|
||||
<!-- <view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
|
||||
<view class="u-flex" @click="toggleShowAll">
|
||||
<view>{{!showAll?'展开全部':'收起全部' }}</view>
|
||||
<view class="u-flex u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
|
||||
<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<datePickerview @confirm="datePickerConfirm" ref="datePicker" style="z-index: 999;"></datePickerview>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { onShow } from '@dcloudio/uni-app';
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
|
||||
import dayjs from 'dayjs' //时间格式库
|
||||
import datePickerview from './my-date-pickerview.vue'
|
||||
|
||||
import { getTrade } from '@/http/api/summary.js'
|
||||
|
||||
|
||||
import {
|
||||
getTrade
|
||||
} from '@/http/api/summary.js'
|
||||
|
||||
let selected = ref('today')
|
||||
let showAll = ref(false);
|
||||
let list = ref()
|
||||
const pageData = reactive({
|
||||
list: [
|
||||
{payType: '微信小程序', key:'wechatPayAmount', payAmount: 0},
|
||||
{payType: '支付宝小程序', key:'aliPayAmount', payAmount: 0},
|
||||
{payType: '主扫收款', key:'scanPayAmount', payAmount: 0},
|
||||
{payType: '收款码收款', key:'', payAmount: 0},
|
||||
{payType: '现金收款', key:'cashPayAmount', payAmount: 0},
|
||||
{payType: '充值收款', key:'rechargeAmount', payAmount: 0},
|
||||
list: [{
|
||||
payType: '微信小程序',
|
||||
key: 'wechatPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#5AA25F'
|
||||
},
|
||||
{
|
||||
payType: '支付宝小程序',
|
||||
key: 'aliPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#31ACFE'
|
||||
},
|
||||
{
|
||||
payType: '主扫收款',
|
||||
key: 'scanPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#FF5C6D'
|
||||
},
|
||||
{
|
||||
payType: '现金',
|
||||
key: 'cashPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#FC843F'
|
||||
},
|
||||
{
|
||||
payType: '充值',
|
||||
key: 'rechargeAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#9090FF'
|
||||
},
|
||||
{
|
||||
payType: '挂账',
|
||||
key: 'creditPayAmount',
|
||||
payAmount: 0,
|
||||
bgcolor: '#7BA7A4'
|
||||
},
|
||||
// {payType: '收款码收款', key:'', payAmount: 0,bgcolor:'#5AA25F'},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
function returnColorStyle(item) {
|
||||
return {
|
||||
backgroundColor: item.bgcolor
|
||||
}
|
||||
}
|
||||
|
||||
function toggleShowAll() {
|
||||
showAll.value = !showAll.value
|
||||
setList()
|
||||
}
|
||||
|
||||
function setList() {
|
||||
list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
|
||||
// list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
|
||||
list.value = pageData.list
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits(['totalRevenue'])
|
||||
const timeList = [{
|
||||
label: '今天',
|
||||
|
|
@ -96,7 +176,9 @@
|
|||
})
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const yingyeE = ref(0)
|
||||
const refundCount = ref(0)
|
||||
/**
|
||||
* 获取统计数据
|
||||
* @param {Object} start
|
||||
|
|
@ -134,22 +216,26 @@
|
|||
beginDate: startTime,
|
||||
endDate: endTime,
|
||||
}).then((res) => {
|
||||
refundCount.value = res.refundCount
|
||||
for (var key in res) {
|
||||
pageData.list.map(item=>{
|
||||
if(item.key == key) {
|
||||
pageData.list.map(item => {
|
||||
if (item.key == key) {
|
||||
item.payAmount = res[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
setList()
|
||||
let incomeAmountAll = 0;
|
||||
pageData.list.map(item=>{
|
||||
incomeAmountAll += (item.payAmount||0)
|
||||
pageData.list.map(item => {
|
||||
incomeAmountAll += (item.payAmount || 0)
|
||||
})
|
||||
|
||||
yingyeE.value = incomeAmountAll
|
||||
emit('totalRevenue', incomeAmountAll)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 日期筛选确认
|
||||
* @param {Object} e
|
||||
|
|
@ -157,7 +243,7 @@
|
|||
function datePickerConfirm(e) {
|
||||
getlist(e.start, e.end)
|
||||
}
|
||||
|
||||
|
||||
// 获取当前时间
|
||||
function getdate() {
|
||||
const dt = new Date();
|
||||
|
|
@ -169,7 +255,7 @@
|
|||
const ss = (dt.getSeconds() + "").padStart(2, "0");
|
||||
return `${y}-${m}-${d}`;
|
||||
}
|
||||
|
||||
|
||||
// 获取昨天时间
|
||||
const formatTime = () => {
|
||||
let strDate = getdate()
|
||||
|
|
@ -182,14 +268,22 @@
|
|||
return `${y}-${m}-${d}`
|
||||
}
|
||||
|
||||
function changeTime(e) {
|
||||
const timeSleIndex = ref(0)
|
||||
|
||||
function changeTime(e, index) {
|
||||
selected.value = e
|
||||
timeSleIndex.value = index
|
||||
if (e == 'custom') {
|
||||
datePicker.value.toggle()
|
||||
} else {
|
||||
getlist()
|
||||
}
|
||||
}
|
||||
|
||||
const xArr=[0,134,262,390,532]
|
||||
const comBlockX = computed(() => {
|
||||
return xArr[ timeSleIndex.value]
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
ul,
|
||||
|
|
@ -204,19 +298,37 @@
|
|||
|
||||
.statistics {
|
||||
padding: 0 28rpx;
|
||||
margin-top: 50rpx;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
width: 170rpx;
|
||||
left: 18rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-weight: 700;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
background: linear-gradient(109deg, #70B9FF 0%, #629FFA 100%);
|
||||
border-radius: 12rpx 12rpx 12rpx 0rpx;
|
||||
top: -16px;
|
||||
}
|
||||
|
||||
.statisticsBox {
|
||||
width: 694rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 22rpx;
|
||||
padding: 48rpx 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 54rpx;
|
||||
|
||||
.bottom {}
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
|
||||
.timelistbox {
|
||||
position: relative;
|
||||
|
|
@ -247,20 +359,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 0rpx;
|
||||
height: 170rpx;
|
||||
border: 2rpx solid #EEE8E8;
|
||||
}
|
||||
|
||||
.payList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.li {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 25%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 12rpx;
|
||||
|
||||
>view {
|
||||
text-align: center;
|
||||
|
|
@ -269,4 +385,32 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle {
|
||||
width: 8rpx;
|
||||
height: 8rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.time_bootom_line {
|
||||
height: 16rpx;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #629FFA;
|
||||
|
||||
.block {
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: absolute;
|
||||
border-top: 0.5rpx solid #629FFA;
|
||||
border-left: 0.5rpx solid #629FFA;
|
||||
z-index: 1;
|
||||
left: 30rpx;
|
||||
top: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: center;
|
||||
transition: all .2s linear;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,19 +4,43 @@
|
|||
<!-- 背景图片view -->
|
||||
<view class="bg-img-view">
|
||||
<!-- 背景颜色view -->
|
||||
<view class="bg-color-view" style="position: absolute; top: 0; left: 0; right: 0; height: 550rpx; border-radius: 0 0 32rpx 32rpx; background-color: #318afe !important">
|
||||
<view class="bg-color-view">
|
||||
<view class="bgbottomStyle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 解决定位层级问题 -->
|
||||
<view class="bg-main">
|
||||
<!-- 导航条 -->
|
||||
<up-navbar title="首页" bg-color="#318AFE" titleStyle="color:#fff;font-size:16px;" @leftClick="toSetting">
|
||||
<!-- <up-navbar title="首页" bg-color="#318AFE" titleStyle="color:#fff;font-size:16px;" @leftClick="toSetting">
|
||||
<template #left>
|
||||
<up-icon name="/static/indexImg/icon-menu.svg" color="#fff" :size="16"></up-icon>
|
||||
</template>
|
||||
</up-navbar>
|
||||
<view class="income">
|
||||
</up-navbar> -->
|
||||
|
||||
<view class="income u-p-30">
|
||||
<view class="u-flex">
|
||||
<up-avatar :src="shopInfo.logo" size="88rpx"></up-avatar>
|
||||
<view class="u-flex-1 u-p-l-30 u-text-left">
|
||||
<view class="u-flex">
|
||||
<view class="u-line-1 u-font-36 font-bold" style="width: 80%;">{{shopInfo.shopName}}</view>
|
||||
<view class="u-font-28 color-fff change-shop u-flex u-row-center">
|
||||
<image src="/static/change.png" class="u-m-t-2" style="width: 20rpx;height: 20rpx;"
|
||||
mode=""></image>
|
||||
<text class="u-m-l-6">切换店铺</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<view style="color: rgba(255,255,255,0.83);" v-if="shopStaff">
|
||||
<text>{{shopStaff.name}}</text>
|
||||
<text>：</text>
|
||||
<text>{{shopStaff.code}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="income">
|
||||
<view class="u-flex u-row-center u-relative">
|
||||
<view class="u-flex u-col-center">
|
||||
<view class="u-m-r-12">总收入</view>
|
||||
|
|
@ -31,354 +55,415 @@
|
|||
<view class="">￥{{ ((totalRevenuedata || 0) * 1).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view>{{ shopName || '' }}</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 统计 or 快捷扫码 -->
|
||||
<!-- <Stats ref="statsRef" /> -->
|
||||
<statistics @totalRevenue="totalRevenue"></statistics>
|
||||
<!-- 导航栅格 -->
|
||||
<JeepayNavigation :navList="navList" type="grid" />
|
||||
<!-- <JeepayNavigation :navList="navList" type="grid" /> -->
|
||||
<view class=" border-r-16 bg-fff u-m-t-32 u-m-l-28 u-m-r-28" style="padding: 32rpx 28rpx 0 28rpx;">
|
||||
<view class="u-flex u-font-28">
|
||||
<view class="title-line"></view>
|
||||
<view class="font-bold u-m-l-6">我的权限</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<up-grid :border="false" col="3">
|
||||
<up-grid-item @click="clickFunc(listItem)" v-for="(listItem,listIndex) in computedMenus" :key="listIndex">
|
||||
<image style="width: 72rpx;height: 72rpx;" :src="listItem.icon" mode="scaleToFill" />
|
||||
<text class="u-m-t-16 color-333 u-font-28 u-p-b-32">{{listItem.title}}</text>
|
||||
</up-grid-item>
|
||||
</up-grid>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="logoout u-m-t-32">
|
||||
<my-button @click="logoout">退出登录</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue';
|
||||
import { onPullDownRefresh, onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
onMounted,
|
||||
nextTick,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onPullDownRefresh,
|
||||
onLoad,
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js'
|
||||
import go from '@/commons/utils/go.js';
|
||||
import Stats from './components/Stats.vue';
|
||||
import statistics from './components/statistics.vue';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import {
|
||||
hasPermission
|
||||
} from '@/commons/utils/hasPermission.js';
|
||||
|
||||
import go from '@/commons/utils/go.js';
|
||||
import Stats from './components/Stats.vue';
|
||||
import statistics from './components/statistics.vue';
|
||||
import storageManage from '@/commons/utils/storageManage.js';
|
||||
import { hasPermission } from '@/commons/utils/hasPermission.js';
|
||||
uni.hideTabBar();
|
||||
let shopName = ref();
|
||||
let totalRevenuedata = ref();
|
||||
let totalRevenue = (d) => {
|
||||
totalRevenuedata.value = d;
|
||||
};
|
||||
|
||||
uni.hideTabBar();
|
||||
let shopName = ref();
|
||||
let totalRevenuedata = ref();
|
||||
let totalRevenue = (d) => {
|
||||
totalRevenuedata.value = d;
|
||||
};
|
||||
let showTips = ref(false);
|
||||
|
||||
let showTips = ref(false);
|
||||
function toggleTips() {
|
||||
showTips.value = !showTips.value;
|
||||
}
|
||||
function toggleTips() {
|
||||
showTips.value = !showTips.value;
|
||||
}
|
||||
|
||||
function toSetting() {
|
||||
go.to('PAGES_SHOP_SETUP');
|
||||
}
|
||||
// 导航列表
|
||||
const navList = [
|
||||
{
|
||||
title: '销售汇总',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_SUMMARY'
|
||||
},
|
||||
{
|
||||
title: '代客下单',
|
||||
icon: '/static/indexImg/icon-substitute-ordering.svg',
|
||||
pageUrl: 'PAGES_CREATE_ORDER',
|
||||
clickFunc: () => {
|
||||
hasPermission('允许下单').then((res) => {
|
||||
if (res) {
|
||||
go.to('PAGES_CREATE_ORDER');
|
||||
}
|
||||
});
|
||||
function toSetting() {
|
||||
go.to('PAGES_SHOP_SETUP');
|
||||
}
|
||||
|
||||
// 点击事件
|
||||
async function clickFunc(nav) {
|
||||
if (nav.pageUrl == "PAGES_SALES_SUMMARY") {
|
||||
let res = await hasPermission('允许查看经营数据')
|
||||
if (!res) return
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '桌台',
|
||||
icon: '/static/indexImg/icon-table.svg',
|
||||
pageUrl: 'PAGES_TABLE'
|
||||
},
|
||||
{
|
||||
title: '商品管理',
|
||||
icon: '/static/indexImg/icon-product-control.svg',
|
||||
pageUrl: 'PAGES_PRODUCT'
|
||||
},
|
||||
{
|
||||
title: '分组管理',
|
||||
icon: '/static/indexImg/goods-group.svg',
|
||||
pageUrl: 'PAGES_GOODS_GROUP'
|
||||
},
|
||||
{
|
||||
title: '分类管理',
|
||||
icon: '/static/indexImg/icon-category.svg',
|
||||
pageUrl: 'PAGES_CATEGORY'
|
||||
},
|
||||
{
|
||||
title: '会员管理',
|
||||
icon: '/static/indexImg/icon-user.svg',
|
||||
pageUrl: 'PAGES_USER_CONTROL'
|
||||
},
|
||||
{
|
||||
title: '员工管理',
|
||||
icon: '/static/indexImg/icon-staff.svg',
|
||||
pageUrl: 'PAGES_STAFF'
|
||||
},
|
||||
{
|
||||
title: '耗材管理',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_CONSUMABLES'
|
||||
},
|
||||
{
|
||||
title: '订单管理',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '设备管理',
|
||||
icon: '/static/indexImg/icon-printer.svg',
|
||||
pageUrl: 'PAGES_PRINTER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '交班',
|
||||
icon: '/static/indexImg/icon-work.svg',
|
||||
pageUrl: 'PAGES_WORK_INDEX'
|
||||
},
|
||||
{
|
||||
title: '排队',
|
||||
icon: '/static/indexImg/icon-line-up.svg',
|
||||
pageUrl: 'PAGES_LINE_UP'
|
||||
},
|
||||
{
|
||||
title: '霸王餐',
|
||||
icon: '/static/indexImg/icon-bwc.svg',
|
||||
pageUrl: 'PAGES_BWC'
|
||||
},
|
||||
{
|
||||
title: '优惠券',
|
||||
icon: '/static/coupon/icon_coupon.svg',
|
||||
pageUrl: 'PAGES_COUPON_INDEX'
|
||||
},
|
||||
{
|
||||
title: '订阅通知',
|
||||
icon: '/static/indexImg/icon-notification.svg',
|
||||
pageUrl: 'PAGES_NOTIFICATION_INDEX'
|
||||
},
|
||||
{
|
||||
title: '挂账管理',
|
||||
icon: '/static/indexImg/icon_credit.svg',
|
||||
pageUrl: 'PAGES_CREDIT_BUYER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '核销管理',
|
||||
icon: '/static/indexImg/pagewriteoff.svg',
|
||||
pageUrl: 'PAGES_WEITEOFF'
|
||||
},
|
||||
{
|
||||
title: '退出登录',
|
||||
icon: '/static/indexImg/icon-login-out.svg',
|
||||
pageUrl: 'PAGES_LOGIN',
|
||||
clickFunc: () => {
|
||||
storageManage.cleanByLogout();
|
||||
go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
// 包含回调事件
|
||||
if (nav.clickFunc) {
|
||||
return nav.clickFunc(nav)
|
||||
}
|
||||
|
||||
// 包含URL
|
||||
if (nav.pageUrl) {
|
||||
return go.to(nav.pageUrl)
|
||||
}
|
||||
}
|
||||
// {
|
||||
// title: '成员管理',
|
||||
// icon: '/static/indexImg/icon-staff.svg',
|
||||
// pageUrl: 'PAGES_USER'
|
||||
// },
|
||||
// {
|
||||
// title: '订阅通知',
|
||||
// icon: '/static/indexImg/icon-notification.svg',
|
||||
// pageUrl: 'PAGES_NOTIFICATION_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '进销存',
|
||||
// icon: '/static/indexImg/icon-invoicing.svg',
|
||||
// pageUrl: 'PAGES_INVOICING_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '预定座位',
|
||||
// icon: '/static/indexImg/icon-yuyue-zuo.svg',
|
||||
// pageUrl: 'PAGES_RESERVE_SEAT_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '预约管理',
|
||||
// icon: '/static/indexImg/icon-yuyue.svg',
|
||||
// pageUrl: 'PAGES_BOOKING_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '充值管理',
|
||||
// icon: '/static/indexImg/icon-recharge.svg',
|
||||
// pageUrl: 'PAGES_RECHARGE_INDEX',
|
||||
// },
|
||||
// {
|
||||
// title: '进件管理',
|
||||
// icon: '/static/indexImg/icon-passage.svg',
|
||||
// pageUrl: 'PAGES_APPLYMENT',
|
||||
// entId: 'ENT_MCH_APPLYMENT_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '商户管理',
|
||||
// icon: '/static/indexImg/business.svg',
|
||||
// pageUrl: 'PAGES_APPLYMENT_BUSINESS',
|
||||
// entId: 'ENT_MCH_APPLYMENT_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '门店管理',
|
||||
// icon: '/static/indexImg/icon-store.svg',
|
||||
// pageUrl: 'PAGES_STORE',
|
||||
// entId: 'ENT_MCH_STORE'
|
||||
// },
|
||||
// {
|
||||
// title: '设备管理',
|
||||
// icon: '/static/indexImg/icon-calc.svg',
|
||||
// pageUrl: 'PAGES_DEVICE_MAIN',
|
||||
// entId: 'ENT_DEVICE'
|
||||
// },
|
||||
// 导航列表
|
||||
const navList = [
|
||||
// {
|
||||
// title: '销售汇总',
|
||||
// icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
// pageUrl: 'PAGES_SALES_SUMMARY',
|
||||
// },
|
||||
{
|
||||
title: '代客下单',
|
||||
icon: '/static/indexImg/icon-substitute-ordering.svg',
|
||||
pageUrl: 'PAGES_CREATE_ORDER',
|
||||
clickFunc: () => {
|
||||
hasPermission('允许下单').then((res) => {
|
||||
if (res) {
|
||||
go.to('PAGES_CREATE_ORDER');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '台桌管理',
|
||||
icon: '/static/indexImg/icon-table.svg',
|
||||
pageUrl: 'PAGES_TABLE'
|
||||
},
|
||||
{
|
||||
title: '商品分组',
|
||||
icon: '/static/indexImg/goods-group.svg',
|
||||
pageUrl: 'PAGES_GOODS_GROUP'
|
||||
},
|
||||
|
||||
// {
|
||||
// title: '数据中心',
|
||||
// icon: '/static/indexImg/icon-pro.svg',
|
||||
// pageUrl: 'PAGES_STAT',
|
||||
// entId: 'ENT_ORDER_STATISTIC'
|
||||
// },
|
||||
// {
|
||||
// title: '商户应用',
|
||||
// icon: '/static/indexImg/icon-app.svg',
|
||||
// pageUrl: 'PAGES_APP',
|
||||
// entId: 'ENT_MCH_APP_LIST'
|
||||
// },
|
||||
// {
|
||||
// title: '会员中心',
|
||||
// icon: '/static/indexImg/icon-member.svg',
|
||||
// pageUrl: 'PAGES_MEMBER_CENTER',
|
||||
// entId: 'ENT_MCH_MEMBER'
|
||||
// },
|
||||
// {
|
||||
// title: '广告管理',
|
||||
// icon: '/static/indexImg/icon-ad.svg',
|
||||
// pageUrl: 'PAGES_AD_LIST',
|
||||
// entId: 'ENT_ADVERT_CONTROL'
|
||||
// },
|
||||
];
|
||||
{
|
||||
title: '商品管理',
|
||||
icon: '/static/indexImg/icon-product-control.svg',
|
||||
pageUrl: 'PAGES_PRODUCT'
|
||||
},
|
||||
{
|
||||
title: '商品分类',
|
||||
icon: '/static/indexImg/icon-category.svg',
|
||||
pageUrl: 'PAGES_CATEGORY'
|
||||
},
|
||||
{
|
||||
title: '耗材管理',
|
||||
icon: '/static/indexImg/PAGE_SALES_SUMMARY.svg',
|
||||
pageUrl: 'PAGES_SALES_CONSUMABLES'
|
||||
},
|
||||
{
|
||||
title: '订单管理',
|
||||
icon: '/static/indexImg/icon-order.svg',
|
||||
pageUrl: 'PAGES_ORDER_INDEX'
|
||||
},
|
||||
{
|
||||
title: '用户管理',
|
||||
icon: '/static/indexImg/icon-user.svg',
|
||||
pageUrl: 'PAGES_USER_CONTROL'
|
||||
},
|
||||
{
|
||||
title: '全部',
|
||||
icon: '/static/indexImg/all.svg',
|
||||
type:'all',
|
||||
pageUrl: 'PAGES_PERSSION'
|
||||
},
|
||||
|
||||
const vdata = reactive({
|
||||
noticeList: [], // 公告列表
|
||||
adList: [],
|
||||
shareImgUrl: '' //分享图片
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
shopName.value = uni.getStorageSync('shopInfo').shopName;
|
||||
});
|
||||
// {
|
||||
// title: '员工管理',
|
||||
// icon: '/static/indexImg/icon-staff.svg',
|
||||
// pageUrl: 'PAGES_STAFF'
|
||||
// },
|
||||
|
||||
// 启动加载
|
||||
onMounted(() => {
|
||||
// refData();
|
||||
});
|
||||
|
||||
// 如果不是超管 删除 刷脸广告菜单
|
||||
if (storageManage.userInfo().userType != 1) {
|
||||
const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
|
||||
if (index != -1) {
|
||||
navList.splice(index, 1);
|
||||
// {
|
||||
// title: '设备管理',
|
||||
// icon: '/static/indexImg/icon-printer.svg',
|
||||
// pageUrl: 'PAGES_PRINTER_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '交班',
|
||||
// icon: '/static/indexImg/icon-work.svg',
|
||||
// pageUrl: 'PAGES_WORK_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '排队',
|
||||
// icon: '/static/indexImg/icon-line-up.svg',
|
||||
// pageUrl: 'PAGES_LINE_UP'
|
||||
// },
|
||||
// {
|
||||
// title: '霸王餐',
|
||||
// icon: '/static/indexImg/icon-bwc.svg',
|
||||
// pageUrl: 'PAGES_BWC'
|
||||
// },
|
||||
// {
|
||||
// title: '优惠券',
|
||||
// icon: '/static/coupon/icon_coupon.svg',
|
||||
// pageUrl: 'PAGES_COUPON_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '订阅通知',
|
||||
// icon: '/static/indexImg/icon-notification.svg',
|
||||
// pageUrl: 'PAGES_NOTIFICATION_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '挂账管理',
|
||||
// icon: '/static/indexImg/icon_credit.svg',
|
||||
// pageUrl: 'PAGES_CREDIT_BUYER_INDEX'
|
||||
// },
|
||||
// {
|
||||
// title: '核销管理',
|
||||
// icon: '/static/indexImg/pagewriteoff.svg',
|
||||
// pageUrl: 'PAGES_WEITEOFF'
|
||||
// },
|
||||
|
||||
|
||||
// {
|
||||
// title: '退出登录',
|
||||
// icon: '/static/indexImg/icon-login-out.svg',
|
||||
// pageUrl: 'PAGES_LOGIN',
|
||||
// clickFunc: () => {
|
||||
// storageManage.cleanByLogout();
|
||||
// go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
// }
|
||||
// }
|
||||
];
|
||||
const menuStore = useMenusStore()
|
||||
const computedMenus=computed(()=>{
|
||||
return navList.filter(r => {
|
||||
if(r.type=='all'){
|
||||
return true
|
||||
}
|
||||
return menuStore.menuList.find(menu=>menu.pageId==r.pageUrl)
|
||||
})
|
||||
})
|
||||
|
||||
function logoout() {
|
||||
storageManage.cleanByLogout();
|
||||
go.to('PAGES_LOGIN', {}, 'redirect');
|
||||
}
|
||||
}
|
||||
|
||||
async function refData() {
|
||||
// 调用子组件方法 , 避免组件没有加载完成。
|
||||
const vdata = reactive({
|
||||
noticeList: [], // 公告列表
|
||||
adList: [],
|
||||
shareImgUrl: '' //分享图片
|
||||
});
|
||||
const shopInfo = ref({})
|
||||
const shopStaff = ref('')
|
||||
onLoad((options) => {
|
||||
const data = uni.getStorageSync('shopInfo')
|
||||
const shopStaffData = uni.getStorageSync('shopStaff')
|
||||
if(shopStaffData){
|
||||
shopStaff.value=shopStaffData
|
||||
}
|
||||
|
||||
shopName.value = shopInfo.shopName;
|
||||
console.log(data);
|
||||
if (data) {
|
||||
shopInfo.value = data
|
||||
}
|
||||
});
|
||||
|
||||
// nextTick(() => statsRef.value.refData());
|
||||
// 停止刷新
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
// 启动加载
|
||||
onMounted(() => {
|
||||
// refData();
|
||||
});
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage((res) => {
|
||||
if (res.from == 'menu')
|
||||
// 如果不是超管 删除 刷脸广告菜单
|
||||
if (storageManage.userInfo().userType != 1) {
|
||||
const index = navList.findIndex((v) => v.entId == 'ENT_ADVERT_CONTROL');
|
||||
if (index != -1) {
|
||||
navList.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
async function refData() {
|
||||
// 调用子组件方法 , 避免组件没有加载完成。
|
||||
|
||||
// nextTick(() => statsRef.value.refData());
|
||||
// 停止刷新
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信分享
|
||||
*/
|
||||
onShareAppMessage((res) => {
|
||||
if (res.from == 'menu')
|
||||
return {
|
||||
title: uni.$appName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: uni.$appName,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
});
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
refData();
|
||||
});
|
||||
|
||||
/**
|
||||
* 分享到朋友圈
|
||||
*/
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
title: uni.$appName,
|
||||
imageUrl: vdata.shareImgUrl
|
||||
};
|
||||
});
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
refData();
|
||||
});
|
||||
onShow(() => {
|
||||
menuStore.getMenus()
|
||||
})
|
||||
const navBack = uni.navigateTo
|
||||
|
||||
|
||||
// uni.navigateTo = (e) => {
|
||||
// console.log(e);
|
||||
// if (menuStore.menuList.find(v => v.allPath == e.url.replace(/^\/+|\/+$/g, ''))) {
|
||||
// navBack(e)
|
||||
// } else {
|
||||
// uni.showToast({
|
||||
// title: '你没有该权限',
|
||||
// icon: 'error'
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bg-main {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
.bgbottomStyle {
|
||||
position: absolute;
|
||||
bottom: -2rpx;
|
||||
left: 0;
|
||||
|
||||
width: 750rpx;
|
||||
height: 74rpx;
|
||||
background: linear-gradient(180deg, rgba(195, 215, 235, 0) 0%, #f9f9f9 100%);
|
||||
}
|
||||
.income {
|
||||
/* #ifdef H5 */
|
||||
padding-top: calc(84rpx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: calc(84rpx + 44px);
|
||||
|
||||
/* #endif */
|
||||
> view {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
.logoout {
|
||||
padding: 0 120rpx;
|
||||
}
|
||||
|
||||
> view:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 84rpx;
|
||||
.bg-main {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
> view:nth-child(2) {
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
> view:nth-child(3) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
opacity: 0;
|
||||
right: 28rpx;
|
||||
transition: opacity 0.3s;
|
||||
background: #ffffff;
|
||||
padding: 20rpx 14rpx;
|
||||
width: 211rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
&.showTips {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sanjiao {
|
||||
.bgbottomStyle {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateX(10rpx) translateY(-50%);
|
||||
bottom: -2rpx;
|
||||
left: 0;
|
||||
|
||||
width: 750rpx;
|
||||
height: 74rpx;
|
||||
|
||||
height: 112rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F6F6F6 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.income {
|
||||
/* #ifdef H5 */
|
||||
padding-top: calc(84rpx);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: calc(84rpx + 44px);
|
||||
|
||||
/* #endif */
|
||||
>view {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
}
|
||||
|
||||
>view:nth-child(1) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 84rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(2) {
|
||||
margin-top: 20rpx;
|
||||
font-weight: 500;
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
>view:nth-child(3) {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
opacity: 0;
|
||||
right: 28rpx;
|
||||
transition: opacity 0.3s;
|
||||
background: #ffffff;
|
||||
padding: 20rpx 14rpx;
|
||||
width: 211rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
|
||||
&.showTips {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sanjiao {
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateX(10rpx) translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.change-shop {
|
||||
white-space: nowrap;
|
||||
width: 182rpx;
|
||||
height: 48rpx;
|
||||
background: rgba(255, 255, 255, .26);
|
||||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||||
}
|
||||
|
||||
.bg-color-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 489rpx;
|
||||
background: linear-gradient(90deg, #6197FF 0%, #62D8CC 100%);
|
||||
}
|
||||
.title-line{
|
||||
width: 4rpx;
|
||||
height: 22rpx;
|
||||
background-color: $my-main-color;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,323 @@
|
|||
<template>
|
||||
<view class="u-wrap">
|
||||
<!-- <view class="u-search-box">
|
||||
<view class="u-search-inner">
|
||||
<up-icon name="search" color="#909399" :size="28"></up-icon>
|
||||
<text class="u-search-text">搜索</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="u-menu-wrap">
|
||||
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
||||
:scroll-into-view="itemId">
|
||||
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
|
||||
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
||||
<text class="u-line-1">{{item.title}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
|
||||
@scroll="rightScroll">
|
||||
<view class="page-view">
|
||||
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
|
||||
<view class="item-title color-main">
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
<view class="item-container u-m-t-32">
|
||||
<view class="thumb-box" @click="toPage(item1, index1)"
|
||||
v-for="(item1, index1) in item.children" :key="index1">
|
||||
<image class="item-menu-image" :src="item1.miniIcon" mode=""></image>
|
||||
<view class="item-menu-name u-m-t-16">{{item1.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
useMenusStore
|
||||
} from '@/store/menus.js';
|
||||
const menusStore = useMenusStore()
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0, //tab标题的滚动条位置
|
||||
oldScrollTop: 0,
|
||||
current: 0, // 预设当前项的值
|
||||
menuHeight: 0, // 左边菜单的高度
|
||||
menuItemHeight: 0, // 左边菜单item的高度
|
||||
itemId: '', // 栏目右边scroll-view用于滚动的id
|
||||
tabbar: [],
|
||||
menuItemPos: [],
|
||||
arr: [],
|
||||
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
||||
timer: null, // 定时器
|
||||
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.init()
|
||||
},
|
||||
onReady() {
|
||||
this.getMenuItemTop()
|
||||
},
|
||||
methods: {
|
||||
toPage(item, index) {
|
||||
console.log(item);
|
||||
uni.navigateTo({
|
||||
url: '/' + item.miniPath.replace(/^\/+|\/+$/g, ''),
|
||||
fail(err) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '无该页面路径或无权限访问该页面'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
async init() {
|
||||
const res = await menusStore.getMenus()
|
||||
this.tabbar = res.filter(v => v.type == 0 && v.children.length && !v.hidden).map(v => {
|
||||
return {
|
||||
...v,
|
||||
children: v.children.filter(child => child.type == 0 && !child.hidden)
|
||||
}
|
||||
})
|
||||
console.log(this.tabbar);
|
||||
},
|
||||
// 点击左边的栏目切换
|
||||
async swichMenu(index) {
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (index == this.current) return;
|
||||
this.scrollRightTop = this.oldScrollTop;
|
||||
this.$nextTick(function() {
|
||||
this.scrollRightTop = this.arr[index];
|
||||
this.current = index;
|
||||
this.leftMenuStatus(index);
|
||||
})
|
||||
},
|
||||
// 获取一个目标元素的高度
|
||||
getElRect(elClass, dataVal) {
|
||||
new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query.select('.' + elClass).fields({
|
||||
size: true
|
||||
}, res => {
|
||||
// 如果节点尚未生成，res值为null，循环调用执行
|
||||
if (!res) {
|
||||
setTimeout(() => {
|
||||
this.getElRect(elClass);
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
this[dataVal] = res.height;
|
||||
resolve();
|
||||
}).exec();
|
||||
})
|
||||
},
|
||||
// 观测元素相交状态
|
||||
async observer() {
|
||||
this.tabbar.map((val, index) => {
|
||||
let observer = uni.createIntersectionObserver(this);
|
||||
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
||||
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
||||
observer.relativeTo('.right-box', {
|
||||
top: 0
|
||||
}).observe('#item' + index, res => {
|
||||
if (res.intersectionRatio > 0) {
|
||||
let id = res.id.substring(4);
|
||||
this.leftMenuStatus(id);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置左边菜单的滚动状态
|
||||
async leftMenuStatus(index) {
|
||||
this.current = index;
|
||||
// 如果为0，意味着尚未初始化
|
||||
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
await this.getElRect('u-tab-item', 'menuItemHeight');
|
||||
}
|
||||
// 将菜单活动item垂直居中
|
||||
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
||||
},
|
||||
// 获取右边菜单每个item到顶部的距离
|
||||
getMenuItemTop() {
|
||||
new Promise(resolve => {
|
||||
let selectorQuery = uni.createSelectorQuery();
|
||||
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
||||
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
||||
if (!rects.length) {
|
||||
setTimeout(() => {
|
||||
this.getMenuItemTop();
|
||||
}, 10);
|
||||
return;
|
||||
}
|
||||
rects.forEach((rect) => {
|
||||
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
||||
this.arr.push(rect.top - rects[0].top);
|
||||
resolve();
|
||||
})
|
||||
}).exec()
|
||||
})
|
||||
},
|
||||
// 右边菜单滚动
|
||||
async rightScroll(e) {
|
||||
this.oldScrollTop = e.detail.scrollTop;
|
||||
if (this.arr.length == 0) {
|
||||
await this.getMenuItemTop();
|
||||
}
|
||||
if (this.timer) return;
|
||||
if (!this.menuHeight) {
|
||||
await this.getElRect('menu-scroll-view', 'menuHeight');
|
||||
}
|
||||
setTimeout(() => { // 节流
|
||||
this.timer = null;
|
||||
// scrollHeight为右边菜单垂直中点位置
|
||||
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
||||
for (let i = 0; i < this.arr.length; i++) {
|
||||
let height1 = this.arr[i];
|
||||
let height2 = this.arr[i + 1];
|
||||
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
||||
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
||||
this.leftMenuStatus(i);
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-wrap {
|
||||
height: calc(100vh);
|
||||
/* #ifdef H5 */
|
||||
height: calc(100vh - var(--window-top));
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.u-search-box {
|
||||
padding: 18rpx 30rpx;
|
||||
}
|
||||
|
||||
.u-menu-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-search-inner {
|
||||
background-color: rgb(234, 234, 234);
|
||||
border-radius: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.u-search-text {
|
||||
font-size: 26rpx;
|
||||
color: $u-tips-color;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
width: 200rpx;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.u-tab-item {
|
||||
height: 110rpx;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
color: #444;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.u-tab-item-active {
|
||||
position: relative;
|
||||
color: $my-main-color;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.u-tab-item-active::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 4px solid $u-primary;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.u-tab-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right-box {
|
||||
// background-color: rgb(250, 250, 250);
|
||||
}
|
||||
|
||||
.page-view {
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.class-item {
|
||||
margin-bottom: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.class-item:last-child {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-menu-name {
|
||||
font-weight: normal;
|
||||
font-size: 20rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.thumb-box {
|
||||
width: 158rpx;
|
||||
height: 170rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 4rpx 6rpx 2rpx rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 20rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.item-menu-image {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,566 @@
|
|||
<template>
|
||||
<view class="page-wrapper">
|
||||
<view class="page-cell column">
|
||||
<view class="extendList">
|
||||
<view class="extendTab">
|
||||
<view class="extendTab_item" v-for="(item, index) in vdata.extendList" :key="index"
|
||||
:class="{ active: vdata.extendIndex == index }" @click="extendTabClick(item, index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="extend_content">
|
||||
<view class="extend_img">
|
||||
<view class="u-flex">
|
||||
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景图片：</view> -->
|
||||
<view class="extend_title">当前背景图片：</view>
|
||||
<view class=" color-main u-font-28" @click="chooseAndUploadAvatar('extendUp')">更换</view>
|
||||
</view>
|
||||
<view class="fileUp u-m-t-24">
|
||||
<up-image width="148rpx" height="148rpx" :src="vdata.extendInfo.value"></up-image>
|
||||
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-m-b-24">
|
||||
<!-- <view class="extend_title">{{ vdata.extendInfo.name }}背景效果：</view> -->
|
||||
<view class="extend_title">当前背景效果：</view>
|
||||
</view>
|
||||
<view class="u-flex " :class="['bg-'+vdata.extendIndex]" :style="{
|
||||
backgroundImage:'url('+vdata.extendInfo.value+')'
|
||||
}">
|
||||
<image style="width: 100%;" :src="imgUrl" mode="widthFix"></image>
|
||||
<image class="logo" v-if="vdata.extendIndex==4" :src="vdata.extendInfo.value" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import {
|
||||
uploadFile
|
||||
} from '@/http/api/index.js';
|
||||
import {
|
||||
getShopInfo,
|
||||
editShopInfo,
|
||||
getShopExtend,
|
||||
editShopExtend
|
||||
} from '@/http/api/shop.js';
|
||||
|
||||
|
||||
const vdata = reactive({
|
||||
shopInfo: {
|
||||
status: 2,
|
||||
isAccountPay: 0,
|
||||
isMemberPrice: 0
|
||||
},
|
||||
extendList: [],
|
||||
registerTypeList: [{
|
||||
name: '先付费',
|
||||
value: 'before'
|
||||
},
|
||||
{
|
||||
name: '后付费',
|
||||
value: 'after'
|
||||
}
|
||||
],
|
||||
extendIndex: 0,
|
||||
extendInfo: {},
|
||||
dineIn: false,
|
||||
takeout: false,
|
||||
isTableFee: false,
|
||||
label: '',
|
||||
type: '',
|
||||
inputValue: ''
|
||||
});
|
||||
onMounted(() => {
|
||||
shopExtend();
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
shopInfo();
|
||||
uni.$on('refreshPreviousPage', (params) => {
|
||||
// 这里执行刷新数据的操作，例如重新调用API获取数据
|
||||
refreshData(params);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 输入内容修改
|
||||
*/
|
||||
let refreshData = (e) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id
|
||||
};
|
||||
params[e.name] = e.value;
|
||||
vdata.type = e.name;
|
||||
vdata.inputValue = e.value;
|
||||
updateShopInfo(params, 'input');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取店铺信息
|
||||
*/
|
||||
const shopInfo = () => {
|
||||
getShopInfo({
|
||||
id: uni.getStorageSync('shopInfo').id
|
||||
}).then((res) => {
|
||||
vdata.isTableFee = res.isTableFee == 1 ? true : false;
|
||||
if (res.eatModel.split(',').indexOf('dine-in') != -1) {
|
||||
vdata.dineIn = true;
|
||||
}
|
||||
if (res.eatModel.split(',').indexOf('take-out') != -1) {
|
||||
vdata.takeout = true;
|
||||
}
|
||||
vdata.shopInfo = res;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取店铺图片
|
||||
*/
|
||||
let shopExtend = () => {
|
||||
getShopExtend().then((res) => {
|
||||
if (res && res.length > 0) {
|
||||
vdata.extendList = res;
|
||||
vdata.extendIndex = 0;
|
||||
vdata.extendInfo = res[0];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 台桌清理模式修改
|
||||
function tableClearChange(n) {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
tableClearType: n
|
||||
};
|
||||
updateShopInfo(params);
|
||||
}
|
||||
|
||||
/**
|
||||
* 付费模式修改
|
||||
*/
|
||||
let radioChange = (n) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
registerType: n
|
||||
};
|
||||
updateShopInfo(params);
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
let updateShopInfo = (params, type) => {
|
||||
editShopInfo(params).then((res) => {
|
||||
if (type && type == 'input') {
|
||||
vdata.shopInfo[vdata.type] = vdata.inputValue;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 修改店铺图片
|
||||
*/
|
||||
let updateShopExtend = () => {
|
||||
editShopExtend({
|
||||
autokey: vdata.extendInfo.autoKey,
|
||||
value: vdata.extendInfo.value
|
||||
}).then((res) => {});
|
||||
};
|
||||
|
||||
/**
|
||||
* 上传头像
|
||||
*/
|
||||
let chooseAndUploadAvatar = (type) => {
|
||||
// 选择图片
|
||||
uni.chooseImage({
|
||||
count: 1, // 默认为1，只选择一张图片
|
||||
sizeType: ['original', 'compressed'], // 图片质量，原图或压缩
|
||||
sourceType: ['album', 'camera'], // 图片来源，相册或相机
|
||||
success: (res) => {
|
||||
let file = res.tempFiles[0];
|
||||
uploadFile(file)
|
||||
.then((res) => {
|
||||
if (type == 'coverImg') {
|
||||
vdata.shopInfo.coverImg = res;
|
||||
let params = {
|
||||
id: vdata.shopInfo.id,
|
||||
coverImg: vdata.shopInfo.coverImg
|
||||
};
|
||||
updateShopInfo(params);
|
||||
}
|
||||
if (type == 'extendUp') {
|
||||
vdata.extendInfo.value = res;
|
||||
updateShopExtend();
|
||||
}
|
||||
})
|
||||
.catch((res) => {
|
||||
if (res.errMsg) {
|
||||
uni.showToast({
|
||||
title: '图片大小超出限制',
|
||||
icon: 'error'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (chooseImageError) => {
|
||||
// 选择图片失败处理逻辑
|
||||
console.log('choose image fail:', chooseImageError);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 店铺图片TAB切换
|
||||
*/
|
||||
let extendTabClick = (item, index) => {
|
||||
vdata.extendInfo = item;
|
||||
vdata.extendIndex = index;
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 修改
|
||||
*/
|
||||
let switchChange = (type) => {
|
||||
let params = {
|
||||
id: vdata.shopInfo.id
|
||||
};
|
||||
switch (type) {
|
||||
case 'address':
|
||||
params.lng = vdata.shopInfo.lng;
|
||||
params.lat = vdata.shopInfo.lat;
|
||||
params.address = vdata.shopInfo.address;
|
||||
break;
|
||||
case 'status':
|
||||
params.status = vdata.shopInfo.status;
|
||||
break;
|
||||
case 'eatModel':
|
||||
params.eatModel = [];
|
||||
if (vdata.dineIn) {
|
||||
params.eatModel.push('dine-in');
|
||||
}
|
||||
if (vdata.takeout) {
|
||||
params.eatModel.push('take-out');
|
||||
}
|
||||
params.eatModel = params.eatModel.join(',');
|
||||
break;
|
||||
case 'isAccountPay':
|
||||
params.isAccountPay = vdata.shopInfo.isAccountPay;
|
||||
break;
|
||||
case 'isMemberPrice':
|
||||
params.isMemberPrice = vdata.shopInfo.isMemberPrice;
|
||||
break;
|
||||
case 'isTableFee':
|
||||
if (vdata.isTableFee) {
|
||||
params.isTableFee = 1;
|
||||
} else {
|
||||
params.isTableFee = 0;
|
||||
}
|
||||
break;
|
||||
}
|
||||
updateShopInfo(params);
|
||||
};
|
||||
|
||||
const imgUrl = computed(() => {
|
||||
if(vdata.extendIndex==2){
|
||||
return '/static/member_bg.png'
|
||||
}
|
||||
return 'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo
|
||||
.autoKey + '.png'
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
background-color: #f8f8f8;
|
||||
padding-bottom: 32rpx;
|
||||
|
||||
.page-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.tableFee {
|
||||
width: 186rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
text-align: left;
|
||||
padding: 0 18rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.extendList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.extendTab {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx;
|
||||
|
||||
.extendTab_item {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 4rpx;
|
||||
border: 2rpx solid #e5e5e5;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #318afe;
|
||||
border: 2rpx solid #318afe;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.extend_content {
|
||||
margin-top: 32rpx;
|
||||
margin: 32rpx 28rpx;
|
||||
padding: 32rpx 28rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
|
||||
.preview {
|
||||
min-width: 146rpx;
|
||||
height: 342rpx;
|
||||
position: relative;
|
||||
margin-right: 32rpx;
|
||||
background-color: #f7f7f7;
|
||||
|
||||
::v-deep .bg,
|
||||
::v-deep .bg .u-image,
|
||||
::v-deep .bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 342rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .index_bg .u-image,
|
||||
::v-deep .index_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 242rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .my_bg .u-image,
|
||||
::v-deep .my_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 90rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .member_bg .u-image,
|
||||
::v-deep .member_bg .u-image__image {
|
||||
width: 34rpx !important;
|
||||
height: 63rpx !important;
|
||||
position: absolute;
|
||||
top: 22rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
border-radius: 5rpx !important;
|
||||
}
|
||||
|
||||
::v-deep .shopinfo_bg .u-image,
|
||||
::v-deep .shopinfo_bg .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 50rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .bg.ticket_logo,
|
||||
::v-deep .bg.ticket_logo .u-image,
|
||||
::v-deep .bg.ticket_logo .u-image__image {
|
||||
width: 359rpx !important;
|
||||
height: 232rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
::v-deep .ticket_logo.img .u-image,
|
||||
::v-deep .ticket_logo.img .u-image__image {
|
||||
width: 146rpx !important;
|
||||
height: 50rpx !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.shopinfo_bg_f {
|
||||
width: 146rpx;
|
||||
height: 290rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.extend_img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.extend_title {
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.fileUp {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
position: relative;
|
||||
|
||||
.file {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .u-image,
|
||||
::v-deep .u-image__image {
|
||||
width: 148rpx !important;
|
||||
height: 148rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
flex-direction: column;
|
||||
|
||||
.label {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.m {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.cutShop {
|
||||
width: 530rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
background: #318afe;
|
||||
border-radius: 56rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
margin: 48rpx auto 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
position: relative;
|
||||
|
||||
.file {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
line-height: 112rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.fileImg {
|
||||
width: 112rpx !important;
|
||||
height: 112rpx !important;
|
||||
|
||||
::v-deep .u-avatar__image {
|
||||
width: 112rpx !important;
|
||||
height: 112rpx !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-cover {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.bg-0 {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-1 {
|
||||
background-repeat: no-repeat;
|
||||
background-position: top;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.bg-2 {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bg-3{
|
||||
background-repeat: no-repeat;
|
||||
background-position: top ;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.bg-4{
|
||||
background-repeat: no-repeat;
|
||||
background-position: top ;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
.logo{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -125,53 +125,7 @@
|
|||
<view class="label">店铺收款码</view>
|
||||
<view class="right"><up-icon name="arrow-right" color="#999999" size="15"></up-icon></view>
|
||||
</view>
|
||||
<view class="page-cell column">
|
||||
<view class="label">店铺图片</view>
|
||||
<view class="extendList">
|
||||
<view class="extendTab">
|
||||
<view
|
||||
class="extendTab_item"
|
||||
v-for="(item, index) in vdata.extendList"
|
||||
:key="index"
|
||||
:class="{ active: vdata.extendIndex == index }"
|
||||
@click="extendTabClick(item, index)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="extend_content">
|
||||
<view class="preview" v-if="vdata.extendInfo.autoKey != 'ticket_logo'">
|
||||
<view class="index_bg"><up-image v-if="'index_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="my_bg"><up-image v-if="'my_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="bg">
|
||||
<up-image
|
||||
v-if="'member_bg' == vdata.extendInfo.autoKey"
|
||||
:src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"
|
||||
></up-image>
|
||||
</view>
|
||||
<view class="member_bg"><up-image v-if="'member_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg"><up-image v-if="'shopinfo_bg' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
<view class="shopinfo_bg_f" v-if="'shopinfo_bg' == vdata.extendInfo.autoKey"></view>
|
||||
<view class="bg" v-if="vdata.extendInfo.autoKey">
|
||||
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="preview" v-else style="width: 359rpx; height: 232rpx">
|
||||
<view class="bg ticket_logo" v-if="vdata.extendInfo.autoKey == 'ticket_logo'">
|
||||
<up-image :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/cashier_admin_app_shopSet/' + vdata.extendInfo.autoKey + '.png'"></up-image>
|
||||
</view>
|
||||
<view class="ticket_logo img"><up-image v-if="'ticket_logo' == vdata.extendInfo.autoKey" :src="vdata.extendInfo.value"></up-image></view>
|
||||
</view>
|
||||
<view class="extend_img">
|
||||
<view class="extend_title">{{ vdata.extendInfo.name }}背景图片</view>
|
||||
<view class="fileUp">
|
||||
<up-image :src="vdata.extendInfo.value"></up-image>
|
||||
<view class="file" @tap="chooseAndUploadAvatar('extendUp')"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- <view class="cutShop" @tap="go.to('PAGES_SHOP_LIST')">切换门店</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><defs><style>.a{fill:#80bcff;}.b{clip-path:url(#a);}.c{fill:#4c99fe;}.d{fill:#197dff;}</style><clipPath id="a"><rect class="a" width="32" height="32"/></clipPath></defs><g class="b"><g transform="translate(1.152 1.235)"><path class="c" d="M102.775,113.489H97.191a4.11,4.11,0,0,1-4.11-4.11V103.8a4.11,4.11,0,0,1,4.11-4.11h5.584a4.11,4.11,0,0,1,4.11,4.11v5.584a4.109,4.109,0,0,1-4.11,4.11Zm0,15.727H97.191a4.11,4.11,0,0,1-4.11-4.11v-5.584a4.11,4.11,0,0,1,4.11-4.11h5.584a4.11,4.11,0,0,1,4.11,4.11v5.584a4.11,4.11,0,0,1-4.11,4.11Z" transform="translate(-93.081 -99.686)"/><path class="d" d="M546.065,552.171h-5.584a4.11,4.11,0,0,1-4.11-4.11v-5.584a4.11,4.11,0,0,1,4.11-4.11h5.584a4.11,4.11,0,0,1,4.11,4.11v5.584A4.111,4.111,0,0,1,546.065,552.171Z" transform="translate(-520.479 -522.641)"/><path class="c" d="M546.065,113.489h-5.584a4.11,4.11,0,0,1-4.11-4.11V103.8a4.11,4.11,0,0,1,4.11-4.11h5.584a4.11,4.11,0,0,1,4.11,4.11v5.584A4.11,4.11,0,0,1,546.065,113.489Z" transform="translate(-520.479 -99.686)"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -0,0 +1,63 @@
|
|||
// stores/counter.js
|
||||
import {
|
||||
defineStore
|
||||
} from 'pinia';
|
||||
import * as menusApi from '@/http/api/menu.js'
|
||||
import pagesJSON from '@/pages.json'
|
||||
const allPages = pagesJSON.pages.concat(pagesJSON.subPackages.reduce((prve, cur) => {
|
||||
const childPages = cur.pages.map(v => {
|
||||
return {
|
||||
...v,
|
||||
allPath: cur.root + '/' + v.path
|
||||
}
|
||||
})
|
||||
prve.push(...childPages)
|
||||
return prve
|
||||
}, []))
|
||||
|
||||
function flattenNestedChildren(data) {
|
||||
const result = [];
|
||||
|
||||
function traverse(nodeArray) {
|
||||
if (!Array.isArray(nodeArray)) return;
|
||||
|
||||
for (const node of nodeArray) {
|
||||
// 复制当前节点（不含children）
|
||||
const flatNode = {
|
||||
...node
|
||||
};
|
||||
delete flatNode.children;
|
||||
result.push(flatNode);
|
||||
|
||||
// 递归处理子节点
|
||||
traverse(node.children);
|
||||
}
|
||||
}
|
||||
|
||||
traverse(data);
|
||||
return result;
|
||||
}
|
||||
|
||||
export const useMenusStore = defineStore('menus', {
|
||||
state: () => {
|
||||
return {
|
||||
originMenus: [],
|
||||
menuList: [],
|
||||
allPages: allPages
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
async getMenus() {
|
||||
const data = await menusApi.getMenus()
|
||||
this.originMenus = data;
|
||||
const arr = flattenNestedChildren(data).filter(v => v.miniPath)
|
||||
this.menuList = this.allPages.filter(v => {
|
||||
const findItem = arr.find(item => item.miniPath == v.pageId || item.miniPath
|
||||
.replace(/^\/+|\/+$/g, '') == v.allPath)
|
||||
return findItem
|
||||
})
|
||||
return this.originMenus
|
||||
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
@ -8,8 +8,8 @@ export default defineConfig({
|
|||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://cashier.sxczgkj.com', // 目标服务器地址
|
||||
// target: 'http://192.168.1.31/\', // 目标服务器地址
|
||||
// target: 'https://cashier.sxczgkj.com', // 目标服务器地址
|
||||
target: 'http://192.168.1.31/', // 目标服务器地址
|
||||
changeOrigin: true, // 是否更改请求源
|
||||
rewrite: path => path.replace(/^\/api/, '')
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue