czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页改版，增加全部操作页面，新增店铺装修页面

Browse Source
This commit is contained in:
YeMingfei666
2025-05-28 17:00:29 +08:00
parent 6cc53db443
commit bb84b49ddc
23 changed files with 1817 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

717
pages/index/index.vue
View File

@@ -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>