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

同步代码

Browse Source
This commit is contained in:
GaoHao
2025-02-07 14:49:20 +08:00
commit 0740c3f349
1141 changed files with 167372 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

462
pageSalesSummary/index.vue Normal file
View File

@@ -0,0 +1,462 @@
<template>
<view class="time-wrapper">
<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 }">
{{v.label}}
</view>
<view class="xian" v-if="v.value==selected "> </view>
</view>
</view>
<view class="pageSalesSummaryContent">
<view class="">
<view class="">
实收金额(元)
</view>
<view class="">
{{list.sale?list.sale.incomeAmountAll:0}}
</view>
</view>
<view class="">
<view class="">
优惠金额(元)
</view>
<view class="">
{{list.count?list.count.saveAmount:0}}
</view>
</view>
<view class="">
<view class="">
客单价(元)
</view>
<view class="">
{{list.count?list.count.unitPrice:0}}
</view>
</view>
<view class="">
<view class="">
会员消费(元)
</view>
<view class="">
{{list.vip?list.vip.useAmount:0}}
</view>
</view>
<view class="">
<view class="">
新增会员(人)
</view>
<view class="">
{{list.vip?list.vip.newFlow:0}}
</view>
</view>
<view class="">
<view class="">
翻台率(%)
</view>
<view class="">
{{list.count?list.count.turnoverRate:0}}
</view>
</view>
</view>
<view class="table-scroll">
<!-- <table class="table" cellspacing="0">
<thead class="thead">
<tr style="background-color: #aebad2;color: #fff;" height='41'>
<th style="width: 540rpx;">商品名称</th>
<th style="width: 215rpx;">总数量</th>
<th>金额</th>
</tr>
</thead>
<tbody class="tbody">
<tr v-for="(item,index) in tableList" :key="item.productId">
<td style="width: 500rpx;padding-left: 16rpx;">
<image v-if="index==0" src="../pageTable/index/images/1.png" style="width: 22rpx;height: 30rpx;"
mode=""></image>
<image v-else-if="index==1" src="../pageTable/index/images/2.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<image v-else-if="index==2" src="../pageTable/index/images/3.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<span v-else>{{index}}</span>
&nbsp;&nbsp;{{item.productName}}
</td>
<td style="padding-left: 16rpx;">{{item.num}}</td>
<td style="padding-left: 16rpx;">{{item.salesAmount}}</td>
</tr>
</tbody>
</table>
-->
<template>
<view class="color-333 u-font-28 bg-gray default-box-padding" style="padding-top:80px;">
<scroll-view :scroll-x="true" class="bg-fff table u-text-center">
<view class="bg-fff border-r-12 u-flex no-wrap u-col-top">
<view class="constantbox">
<view class="constantboxitem">
<view class="head">商品名称</view>
<view class="head">总数量</view>
<view class="head">金额</view>
</view>
<view class="constantboxitem" v-for="(item,index) in tableList" :key="index"
@click="toDetail(item)">
<view class="head" style="padding-left: 16rpx;">
<image v-if="index==0" src="../pageTable/index/images/1.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<image v-else-if="index==1" src="../pageTable/index/images/2.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
<image v-else-if="index==2" src="../pageTable/index/images/3.png"
style="width: 22rpx;height: 30rpx;" mode=""></image>
&nbsp;&nbsp;{{item.productName}}
</view>
<view class="head">{{item.num}}</view>
<view class="head">{{item.salesAmount || '无'}}</view>
</view>
</view>
</view>
</scroll-view>
<!-- <view style="height: 100px;"></view> -->
</view>
</template>
</view>
<view class="bottombtn" @tap="toUrl">
更多 <uni-icons type="right" size="16"></uni-icons>
</view>
<datePickerview @confirm="datePickerConfirm" ref="datePicker"></datePickerview>
</template>
<script setup>
import datePickerview from './components/my-date-pickerview.vue'
import {
summaryTrade,
dateProduct
} from '@/http/yskApi/requestAll.js';
import {
onMounted,
getCurrentInstance,
ref
} from 'vue';
import dayjs from 'dayjs' //时间格式库
import go from '@/commons/utils/go.js'
const timeList = [{
label: '今天',
value: 'today'
},
{
label: '昨天',
value: 'yesterday'
},
{
label: '本周',
value: 'circumference'
}, {
label: '本月',
value: 'moon'
},
{
label: '自定义',
value: 'custom'
}
]
let selected = ref('today')
let list = ref([])
const currentInstance = getCurrentInstance()
let tableList = ref([])
let day = ref(1)
function toUrl() {
go.to('PAGES_PRODUCT_SALES_RANKING', {
day: day.value
})
}
function getlist(start, end) {
let startTime, endTime;
if (selected.value == 'today') {
startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
} else if (selected.value == 'yesterday') {
startTime = formatTime() + ' 00:00:00'
endTime = formatTime() + ' 23:59:59'
} else if (selected.value == 'circumference') {
var now = new Date();
var nowTime = now.getTime();
var day = now.getDay();
var oneDayTime = 24 * 60 * 60 * 1000;
//显示周一
var MondayTime = nowTime - (day - 1) * oneDayTime;
//显示周日
var SundayTime = nowTime + (7 - day) * oneDayTime;
startTime = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
endTime = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
} else if (selected.value == 'moon') {
startTime = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
endTime = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
} else if (selected.value == 'custom') {
let s = start.substring(0, start.indexOf(' '))
let e = end.substring(0, end.indexOf(' '))
startTime = s + ' 00:00:00'
endTime = e + ' 23:59:59'
}
summaryTrade({
shopId: uni.getStorageSync('shopId'),
startTime,
endTime,
}).then((res) => {
list.value = res
})
}
onMounted(() => {
getlist()
gettableData()
})
function datePickerConfirm(e) {
getlist(e.start, e.end)
// gettableData() day如日期不能是1 7 30 就回报错
}
function changeTime(e) {
selected.value = e
if (e == 'custom') {
currentInstance.ctx.$refs.datePicker.toggle()
} else {
getlist()
gettableData()
}
}
// 获取表格数据
function gettableData() {
if (selected.value == 'today') {
day.value = 1
} else if (selected.value == 'yesterday') {
day.value = 1
} else if (selected.value == 'circumference') {
day.value = 7
} else if (selected.value == 'moon') {
day.value = 30
} else if (selected.value == 'custom') {
day.value = 30
}
dateProduct({
shopId: uni.getStorageSync('shopId'),
day: day.value,
page: 0,
size: 5
}).then((res) => {
tableList.value = res.productList.content
})
}
// 获取当前时间
function getdate() {
const dt = new Date();
const y = dt.getFullYear();
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
const d = (dt.getDate() + "").padStart(2, "0");
const hh = (dt.getHours() + "").padStart(2, "0");
const mm = (dt.getMinutes() + "").padStart(2, "0");
const ss = (dt.getSeconds() + "").padStart(2, "0");
return `${y}-${m}-${d}`;
}
// 获取昨天时间
const formatTime = () => {
let strDate = getdate()
let dateFormat = new Date(strDate);
dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
dateFormat = new Date(dateFormat);
let y = dateFormat.getFullYear()
let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
let d = dateFormat.getDate().toString().padStart(2, '0')
return `${y}-${m}-${d}`
}
</script>
<style>
page {
background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.fixed-top {
padding: 32rpx 28rpx;
z-index: 100;
}
.bottom {
background-color: transparent;
bottom: 84rpx;
left: 28rpx;
right: 28rpx;
}
.table {
border-radius: 12rpx 12rpx 0rpx 0rpx;
overflow: hidden;
font-size: 24rpx;
.constantbox {
.constantboxitem {
display: flex;
.head {
width: 220rpx;
padding: 32rpx 24rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #333333;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.head:nth-child(4) {
width: 300rpx;
}
.head:nth-child(5) {
width: 300rpx;
}
}
.constantboxitem:nth-child(even) {
background: #fff;
}
.constantboxitem:nth-child(odd) {
background: #F7F6FB;
}
.constantboxitem:nth-child(1) {
background: #AEBAD2;
color: #fff;
font-size: 24rpx;
}
}
.item:nth-of-type(2n+1) {
background-color: rgb(249, 249, 249);
}
}
</style>
<style scoped lang="less">
.time-wrapper {
display: flex;
justify-content: space-around;
padding-bottom: 16rpx;
padding-top: 16rpx;
background-color: #fff;
.timelistbox {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.time-item {
font-size: 28rpx;
text-align: center;
padding-bottom: 10rpx;
}
.xian {
width: 40rpx;
height: 3rpx;
background-color: #318AFE;
// position: absolute;
// left: 16rpx;
// bottom: 0;
}
}
.time-selected {
color: #318afe;
font-size: 32rpx !important;
}
}
.pageSalesSummaryContent {
height: 320rpx;
margin: 20rpx 28rpx;
background-image: url('./svg/bgimg.svg');
background-size: 694rpx 320rpx;
padding: 48rpx 28rpx;
.df;
justify-content: space-between;
flex-wrap: wrap;
>view {
padding-right: 52rpx;
color: #fff;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 28rpx;
}
}
// 表格
.table-scroll {
// width: calc(100% - 5px);
overflow-x: scroll;
white-space: nowrap;
margin: 32rpx 28rpx;
margin-right: 30rpx;
border-radius: 30rpx 30rpx 0 0;
}
.table-scroll .table {
table-layout: fixed;
// width: calc(100% - 10rpx);
}
.table-scroll .thead {
display: table-row;
background-color: bisque;
font-size: 24rpx;
}
.table-scroll .tbody {
overflow-y: scroll;
overflow-x: hidden;
display: block;
// width: 1040rpx;
width: 100%;
// width: calc(100% );
}
// .table-scroll th,
// td {
// height: 82rpx;
// overflow: hidden;
// text-overflow: ellipsis;
// width: 250rpx;
// // border: 0.7rpx solid red;
// border: 0.7rpx solid rgba(126, 155, 212, 0.27);
// }
.bottombtn {
width: 694rpx;
height: 56rpx;
line-height: 56rpx;
text-align: center;
margin: 0rpx auto;
background: #F1F1F1;
font-size: 24rpx;
border-radius: 0rpx 0rpx 28rpx 28rpx;
}
.df() {
display: flex;
align-items: center;
}
</style>
<style>
.min-page{
height: 20vh;
}
</style>