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

234
pages/index/components/statistics.vue
View File

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