293 lines
9.6 KiB
Vue
293 lines
9.6 KiB
Vue
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||
<route lang="jsonc" type="home">{
|
||
"layout": "tabbar",
|
||
"style": {
|
||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||
"navigationStyle": "custom",
|
||
"navigationBarTitleText": "首页"
|
||
}
|
||
}</route>
|
||
|
||
<template>
|
||
<view class="home-bg pb-80rpx">
|
||
<view class="home-bg w-[100%] fixed top-0 left-0 z-100">
|
||
<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
|
||
<template #left>
|
||
<view class="flex items-center line-1 w-450rpx" @click="router.navigateTo('/bundle/account/switch')">
|
||
<view class="mr-10rpx font-400 leading-44rpx text-32rpx pl-10rpx line-1">{{ useStore.defaultStore.name || '暂无门店信息' }}</view>
|
||
<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
|
||
</view>
|
||
</template>
|
||
</wd-navbar>
|
||
</view>
|
||
|
||
<view :style="{ paddingTop: navbarHeight + 'px' }">
|
||
<view class="mt-32rpx mx-30rpx relative">
|
||
<wd-img width="690rpx" height="240rpx" :src="`${OSS}images/store/home/image1.png`" mode="aspectFit" />
|
||
|
||
<!-- 本月收入 -->
|
||
<view class=" absolute top-42rpx left-46rpx w-120rpx ">
|
||
<view class="flex flex-col justify-center items-center">
|
||
<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">本月收入</view>
|
||
<view class="mt-42rpx">
|
||
<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.month"></price-format>
|
||
</view>
|
||
</view>
|
||
<view class="absolute top-20rpx left-160rpx">
|
||
<wd-img width="6rpx" height="188rpx" :src="`${OSS}images/store/home/image2.png`" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 下单金额 -->
|
||
<view class="flex flex-col justify-center items-center absolute top-42rpx left-240rpx w-140rpx">
|
||
<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">下单金额</view>
|
||
<view class="mt-26rpx">
|
||
<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.today_price"></price-format>
|
||
</view>
|
||
<view class="font-400 text-24rpx text-[#825F37] leading-34rpx mt-10rpx">昨日￥{{ statistics.yesterday_price }}</view>
|
||
</view>
|
||
|
||
<!-- 核销金额 -->
|
||
<view class="flex flex-col justify-center items-center absolute top-42rpx left-420rpx w-140rpx">
|
||
<view class="font-400 text-26rpx text-[#825F37] leading-36rpx">核销金额</view>
|
||
<view class="mt-26rpx">
|
||
<price-format color="#825F37" :first-size="36" :second-size="36" :subscript-size="24" :price="statistics.yan_price"></price-format>
|
||
</view>
|
||
<view class="font-400 text-24rpx text-[#825F37] leading-34rpx mt-10rpx">昨日￥{{ statistics.yesterday_yan_price }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 菜单栏 -->
|
||
<view class="flex justify-between mt-40rpx">
|
||
<view class="flex flex-col justify-center items-center w-[25%]" @click="showScanMenu = true">
|
||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image3.png`" mode="aspectFit" />
|
||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">扫码验券</view>
|
||
</view>
|
||
|
||
<view class="flex flex-col justify-center items-center w-[25%]" @click="router.navigateTo('/bundle/finance/finance')">
|
||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image4.png`" mode="aspectFit" />
|
||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">财务管理</view>
|
||
</view>
|
||
|
||
<view class="flex flex-col justify-center items-center w-[25%]">
|
||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image5.png`" mode="aspectFit" @click="router.navigateTo('/bundle/setmeal/setmeal')" />
|
||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">套餐管理</view>
|
||
</view>
|
||
|
||
<view class="flex flex-col justify-center items-center w-[25%]" @click="router.navigateTo('/bundle/user/user-list')">
|
||
<wd-img width="90rpx" height="90rpx" :src="`${OSS}images/store/home/image6.png`" mode="aspectFit" />
|
||
<view class="font-400 text-24rpx text-[#303133] leading-34rpx">用户列表</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商家培训 -->
|
||
<view class="bg-white rounded-16rpx px-30rpx py-28rpx mx-30rpx mt-40rpx">
|
||
<view class="flex items-center justify-between">
|
||
<view class="flex items-center">
|
||
<wd-img width="48rpx" height="48rpx" :src="`${OSS}images/store/home/image7.png`" mode="aspectFit" />
|
||
<view class="flex items-center ml-10rpx">
|
||
<view class="text-32rpx text-[#303133] leading-44rpx">商家培训</view>
|
||
<view class="">
|
||
<wd-divider vertical color="#D9D9D9"></wd-divider>
|
||
</view>
|
||
<view class="font-400 text-24rpx text-[#909399] leading-34rpx">商家运营赋能</view>
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<text class="font-400 text-24rpx text-[#909399] leading-34rpx">更多</text>
|
||
<wd-icon name="arrow-right" size="20rpx" color="#C9C9C9" class="ml-4rpx"></wd-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mt-30rpx">
|
||
<view v-for="i in 4" :key="i">
|
||
<view class="flex items-center justify-between">
|
||
<view class="mr-26rpx">
|
||
<view class="font-400 text-26rpx text-[#303133] leading-40rpx w-440rpx line-2">必备课，如何做好门店评价管理。客户为什么给好评？</view>
|
||
<view class="font-400 text-22rpx text-[#909399] leading-32rpx">2025-08-09 17:21</view>
|
||
</view>
|
||
<view>
|
||
<wd-img width="164rpx" height="108rpx" radius="4rpx" :src="`${OSS}images/banner1.png`" mode="aspectFit" />
|
||
</view>
|
||
</view>
|
||
<view class="mt-22rpx mb-30rpx" v-if="i !== 4">
|
||
<wd-gap bg-color="#F6F7F9" height="2rpx"></wd-gap>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 扫码验券弹出框 -->
|
||
<wd-action-sheet v-model="showScanMenu" :actions="scanActions" @select="Index.handleSelectScanMenu" />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { router } from '@/utils/tools'
|
||
import { getStoreList, getStoreDetails, getStoreStatistics, scanVerifyCoupon } from '@/api/store'
|
||
import { useStoreStore } from '@/store'
|
||
import { useToast } from 'wot-design-uni'
|
||
|
||
const OSS = inject('OSS')
|
||
const navbarHeight = inject('navbarHeight')
|
||
const useStore = useStoreStore()
|
||
const toast = useToast()
|
||
|
||
// 扫码验券弹出框
|
||
const showScanMenu = ref<boolean>(false)
|
||
const scanActions = ref([
|
||
{
|
||
name: '扫码验券',
|
||
},
|
||
{
|
||
name: '输入券码',
|
||
},
|
||
{
|
||
name: '验券记录',
|
||
}
|
||
])
|
||
|
||
// 门店列表
|
||
const storeList = ref<Array<any>>([])
|
||
const defaultStore = ref<{ id: number; name: string; index: number }>({
|
||
id: 0,
|
||
name: '',
|
||
index: 0
|
||
})
|
||
const store = ref<any>({})
|
||
const statistics = ref({
|
||
month: 0, // 本月数据
|
||
today_price: 0, // 今日收入
|
||
yan_price: 0, // 验券
|
||
yesterday_price: 0, // 昨日收入
|
||
yesterday_yan_price: 0 // 昨日验券
|
||
})
|
||
|
||
onShow(() => {
|
||
// 初始化页面数据
|
||
Index.handleInit()
|
||
})
|
||
|
||
onLoad(async() => {
|
||
|
||
})
|
||
|
||
const Index = {
|
||
handleInit: async() => {
|
||
await Index.handleGetStoreList()
|
||
await Index.handleGetStoreDetails()
|
||
await Index.handleGetStoreStatistics()
|
||
},
|
||
|
||
/**
|
||
* 获取门店列表
|
||
*/
|
||
handleGetStoreList: async() => {
|
||
const storeLists = await getStoreList()
|
||
// 保证 storeList.value 一定为数组
|
||
storeList.value = Array.isArray(storeLists.list) ? storeLists.list : Object.values(storeLists.list || {})
|
||
if (storeList.value.length > 0) {
|
||
useStore.setStoreList(storeList.value)
|
||
|
||
// 如果没有设置默认门店的话则设置第一个门店为默认门店
|
||
console.log("🚀 ~ useStore.defaultStore:", useStore.defaultStore)
|
||
if (useStore.defaultStore.id == 0) {
|
||
useStore.setDefaultStore({
|
||
id: storeList.value[0].id,
|
||
name: storeList.value[0].name,
|
||
index: 0
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 获取门店详情
|
||
*/
|
||
handleGetStoreDetails: async() => {
|
||
if (!defaultStore.value) return
|
||
const storeDetails = await getStoreDetails(useStore.defaultStore.id)
|
||
store.value = storeDetails.details
|
||
},
|
||
|
||
/**
|
||
* 获取门店统计数据
|
||
*/
|
||
handleGetStoreStatistics: async() => {
|
||
if (!defaultStore.value) return
|
||
const res = await getStoreStatistics(useStore.defaultStore.id)
|
||
statistics.value = res.result
|
||
console.log("🚀 ~ statistics:", statistics)
|
||
},
|
||
|
||
/**
|
||
* 选择扫码验券菜单
|
||
*/
|
||
handleSelectScanMenu: (item: { item: { name: string }}) => {
|
||
if (item.item.name === '扫码验券') {
|
||
Index.handleScanCode()
|
||
} else if (item.item.name === '输入券码') {
|
||
const storeName = '茶址24小时智能茶室(中新店)'
|
||
router.navigateTo(`/bundle/store/verify-code?storeName=${storeName}`)
|
||
} else if (item.item.name === '验券记录') {
|
||
router.navigateTo('/bundle/store/verify-record')
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 扫码验券
|
||
*/
|
||
handleScanCode: () => {
|
||
uni.scanCode({
|
||
success: (res) => {
|
||
toast.loading({
|
||
msg: '验券中...'
|
||
})
|
||
try {
|
||
scanVerifyCoupon(res.result, useStore.defaultStore.id).then((res) => {
|
||
Index.handleGetStoreStatistics()
|
||
toast.close()
|
||
toast.info({
|
||
msg: '验券成功',
|
||
duration: 1500
|
||
})
|
||
}).catch((error) => {
|
||
toast.close()
|
||
return false
|
||
})
|
||
} catch(e) {
|
||
toast.close()
|
||
return false
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log('scanCode err:', err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: $cz-page-background;
|
||
}
|
||
|
||
.home-bg {
|
||
background-color: $cz-page-background;
|
||
background-image: url(#{$OSS}images/home/home_bg.png);
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.rounded {
|
||
border-radius: 20rpx 0rpx 20rpx 0rpx;
|
||
}
|
||
|
||
.ele-center {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
</style>
|