477 lines
11 KiB
Vue
477 lines
11 KiB
Vue
<!-- 首页 -->
|
||
<template>
|
||
<view class="page-wrapper" style="overflow: visible; height: auto">
|
||
<!-- 背景图片view -->
|
||
<view class="bg-img-view">
|
||
<!-- 背景颜色view -->
|
||
<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">
|
||
<template #left>
|
||
<up-icon name="/static/indexImg/icon-menu.svg" color="#fff" :size="16"></up-icon>
|
||
</template>
|
||
</up-navbar> -->
|
||
|
||
<view class="income ">
|
||
<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" @click="changeShop">
|
||
<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>
|
||
<up-icon name="/static/indexImg/icon-help.svg" color="#fff" :size="12" @click="toggleTips"></up-icon>
|
||
</view>
|
||
<view class="tips u-absolute color-666 u-font-20 u-text-left" :class="{ showTips: showTips }">
|
||
<view class="sanjiao u-flex"><up-icon name="play-left-fill" size="12" color="#fff"></up-icon></view>
|
||
总收入为除会员余额 支付外所有收入
|
||
</view>
|
||
</view>
|
||
<view class="u-flex u-row-center">
|
||
<view class="">￥{{ ((totalRevenuedata || 0) * 1).toFixed(2) }}</view>
|
||
</view>
|
||
<view>{{ shopName || '' }}</view>
|
||
</view> -->
|
||
|
||
<!-- 统计 or 快捷扫码 -->
|
||
<!-- <Stats ref="statsRef" /> -->
|
||
<statistics @totalRevenue="totalRevenue"></statistics>
|
||
<!-- 导航栅格 -->
|
||
<!-- <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,
|
||
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';
|
||
|
||
uni.hideTabBar();
|
||
let shopName = ref();
|
||
let totalRevenuedata = ref();
|
||
let totalRevenue = (d) => {
|
||
totalRevenuedata.value = d;
|
||
};
|
||
|
||
let showTips = ref(false);
|
||
|
||
function toggleTips() {
|
||
showTips.value = !showTips.value;
|
||
}
|
||
|
||
function toSetting() {
|
||
go.to('PAGES_SHOP_SETUP');
|
||
}
|
||
//切换店铺
|
||
function changeShop(){
|
||
uni.showToast({
|
||
title:'待开放，敬请期待！',
|
||
icon:'none'
|
||
})
|
||
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)
|
||
}
|
||
}
|
||
// 导航列表
|
||
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-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'
|
||
},
|
||
|
||
|
||
// {
|
||
// title: '员工管理',
|
||
// icon: '/static/indexImg/icon-staff.svg',
|
||
// pageUrl: 'PAGES_STAFF'
|
||
// },
|
||
|
||
|
||
// {
|
||
// 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');
|
||
}
|
||
|
||
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
|
||
}
|
||
});
|
||
|
||
// 启动加载
|
||
onMounted(() => {
|
||
// refData();
|
||
});
|
||
|
||
// 如果不是超管 删除 刷脸广告菜单
|
||
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,
|
||
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>
|
||
.logoout {
|
||
padding: 0 120rpx;
|
||
}
|
||
|
||
.bg-main {
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.bgbottomStyle {
|
||
position: absolute;
|
||
bottom: -2rpx;
|
||
left: 0;
|
||
|
||
width: 750rpx;
|
||
height: 74rpx;
|
||
|
||
height: 112rpx;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F6F6F6 100%);
|
||
}
|
||
|
||
.income {
|
||
padding: 30rpx;
|
||
/* #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> |