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

修改调整页面样式

Browse Source
This commit is contained in:
YeMingfei666
2024-10-18 16:27:51 +08:00
parent 91c716103e
commit f44cf801e8
22 changed files with 543 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
pagesOrder/detail/components/list.vue
View File

@@ -1,20 +1,24 @@
<template>
<view class="default-box-padding bg-fff border-r-24 u-m-t-32" v-if="data.length">
<view class="u-font-32 color-999 border-bottom u-p-b-24">
<view class=" font-bold u-p-b-32 border-bottom">
<text class="">桌号：</text>
<text class="">{{orderInfo.tableName||""}}</text>
</view>
<view class=" u-m-t-24 color-999 border-bottom u-p-b-24">
<text>共</text>
<text class="color-333 "> {{goodsNumber}}</text>
<text>份菜品</text>
</view>
<view class="u-m-b-20 u-m-t-20" v-for="(order,orderIndex) in data" :key="orderIndex">
<view class="u-font-32"> 第{{ order.placeNum }}次下单
<view class="u-m-b-20 u-m-t-24" v-for="(order,orderIndex) in data" :key="orderIndex">
<view class=""> 第{{ order.placeNum }}次下单
</view>
<view class="u-m-t-24 list">
<view class="item u-m-b-20" v-for="(item,index) in order.info" :key="index">
<view class="item u-m-b-32" v-for="(item,index) in order.info" :key="index">
<view class="u-flex u-col-top">
<view>
<view class="u-flex">
<image class="img" :src="item.coverImg||item.productImg" mode=""></image>
</view>
<view class="u-p-l-30 u-flex-1">
<view class="u-p-l-32 u-flex-1">
<view class="u-flex u-row-between u-col-top">
<view class="">
@@ -25,9 +29,12 @@
<view :class="{'line-th':item.status=='return'}">{{item.name||item.productName}}
</view>
</view>
<view class="color-999 u-font-24 u-m-t-10">{{item.productSkuName||''}}</view>
<view class="color-999 u-font-24 u-m-t-8">{{item.productSkuName||''}}</view>
<view class="u-m-t-12 color-666 u-font-24" v-if="item.note">
备注：{{item.note}}
</view>
</view>
<view class="u-text-right">
<view class="u-text-right u-m-t-28">
<template v-if="item.status=='return'">
<view>￥0.00</view>
<view class="line-th color-666 ">￥{{item.salePrice||item.price}}</view>
@@ -35,30 +42,30 @@
<template v-else>
<view>￥{{item.salePrice||item.price}}</view>
</template>
<view class="u-m-t-10 color-999 u-font-24">X{{item.number||item.num}}</view>
<view class="u-m-t-22 color-999 u-font-24">X{{item.number||item.num}}</view>
</view>
</view>
</view>
</view>
<template v-if="orderInfo.status=='unpaid'">
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<view class="u-flex u-row-right gap-20 u-m-t-24" v-if="item.status!='return'">
<!-- <my-button :height="60" color="#333" plain type="cancel" shape="circle">更多操作</my-button> -->
<my-button :width="168" :height="60" plain shape="circle"
@tap="tuicai(item,index)">退菜</my-button>
<my-button :width="128" :height="48" plain shape="circle"
@tap="tuicai(item,index)"><text class="no-wrap">退菜</text></my-button>
</view>
</template>
<template v-if="orderInfo.status=='closed'">
<view class="u-flex u-row-right gap-20 u-m-t-20" v-if="item.status!='return'">
<my-button :width="168" :height="60" plain shape="circle"
@tap="tuikuan(item,index)">退款</my-button>
<my-button :width="128" :height="48" plain shape="circle"
@tap="tuikuan(item,index)"><text class="no-wrap">退款</text> </my-button>
</view>
</template>
</view>
</view>
<view class="bg-gray u-p-20 u-m-t-20" v-if="orderInfo.remark">
<!-- <view class="bg-gray u-p-20 u-m-t-20" v-if="orderInfo.remark">
<view>备注</view>
<view class="u-m-t-10">{{orderInfo.remark}}</view>
</view>
</view> -->
</view>
<view class="u-m-t-32">
@@ -109,7 +116,7 @@
<text class="font-bold u-font-32">{{to2(allPrice*1+seatFeePrice*1) }}</text>
</view>
</view>
<view class="u-m-t-30">
<view class="u-m-t-24">
<my-button @tap="printOrder" type="cancel" :color="color.ColorMain">重新打印</my-button>
</view>
</view>

18
pagesOrder/detail/components/order.vue
View File

@@ -1,38 +1,38 @@
<template>
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
<view class="default-box-padding bg-fff border-r-12 u-m-t-24">
<view class="u-flex u-row-between">
<view>订单状态</view>
<view>{{returnStatus(data.status)}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view class="u-flex u-row-between u-m-t-24">
<view>订单类型</view>
<view>{{returnUseType(data.useType)}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view class="u-flex u-row-between u-m-t-24">
<view>桌位号</view>
<view>{{table.name||data.tableName}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20" v-if="seatFee.number">
<view class="u-flex u-row-between u-m-t-24" v-if="seatFee.number">
<view>就餐人数</view>
<view>{{seatFee.number||''}}</view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view class="u-flex u-row-between u-m-t-24">
<view>支付方式</view>
<view>{{data.payType||''}}</view>
</view>
<!-- <view class="u-flex u-row-between u-m-t-20">
<!-- <view class="u-flex u-row-between u-m-t-24">
<view>预约时间</view>
<view></view>
</view> -->
<view class="u-flex u-row-between u-m-t-20">
<view class="u-flex u-row-between u-m-t-24">
<view>下单时间</view>
<view><up-text v-if="data.createdAt" mode="date" format="yyyy-mm-dd hh:MM:ss" :text="data.createdAt"></up-text></view>
</view>
<view class="u-flex u-row-between u-m-t-20">
<view class="u-flex u-row-between u-m-t-24">
<view>订单编号</view>
<view>{{data.orderNo}}</view>
</view>
<!-- <view class="u-flex u-row-between u-m-t-20">
<!-- <view class="u-flex u-row-between u-m-t-24">
<view>商家备注</view>
<my-button plain shape="circle" :width="160" :height="60">编辑</my-button>
</view> -->

144
pagesOrder/detail/components/tuicai.vue
View File

@@ -6,7 +6,23 @@
{{data.productName}}
</view>
<view class="u-flex u-m-t-32">
<up-number-box :buttonSize="44" :inputWidth="220" v-model="number"></up-number-box>
<up-number-box :min="1" :max="data.num" :buttonSize="44" v-model="number" integer>
<template #minus>
<view class="minus number-box-btn">
</view>
</template>
<template #input>
<view class="u-flex-1 u-row-center u-text-center input">
<up-input @change="parseIntNumber($event,false)" @blur="parseIntNumber($event,true)"
v-model="number" border="none" type="number"></up-input>
</view>
</template>
<template #plus>
<view class="plus number-box-btn">
<up-icon name="plus" color="#999" size="16" bold></up-icon>
</view>
</template>
</up-number-box>
</view>
<view class="u-m-t-32">
<view class="u-font-24">
@@ -14,13 +30,15 @@
<text class="color-red">*</text>
</view>
<view class="u-flex u-flex-wrap u-m-t-24">
<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF" color="#318AFE" v-if="item.checked"> </up-tag>
<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666" :text="item.label" plain v-else> </up-tag>
<view class="u-flex u-m-r-16 u-m-b-16" v-for="(item,index) in tags" :key="index">
<up-tag @click="changeTagSel(item)" :text="item.label" plain borderColor="#E6FOFF"
color="#318AFE" v-if="item.checked"> </up-tag>
<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#666" :text="item.label"
plain v-else> </up-tag>
</view>
</view>
<view class="u-m-t-24">
<up-input placeholder="备注"></up-input>
<up-textarea v-model="form.note" placeholder="备注"></up-textarea>
</view>
</view>
</view>
@@ -29,19 +47,22 @@
<view class="u-p-t-18 u-p-l-30 u-p-r-30 u-p-b-30">
<my-button box-shadow shape="circle" @tap="confirm">确认退菜</my-button>
<view class="u-m-t-10">
<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel" box-shadow>取消</my-button>
<my-button @tap="toggleModelShow" shape="circle" bgColor="#fff" type="cancel"
box-shadow>取消</my-button>
</view>
</view>
</template>
</my-model>
</template>
<script setup>
import {
reactive,
ref,
watch
} from 'vue';
import infoBox from '@/commons/utils/infoBox.js'
const props = defineProps({
data: {
type: Object,
@@ -52,13 +73,48 @@
default: false
}
})
const emits = defineEmits(['update:show','confirm'])
const form = reactive({
note: ''
})
const emits = defineEmits(['update:show', 'confirm'])
let model = ref(null)
let modelShow = ref(props.show)
let number = ref(1)
const tags=ref([{label:"点错",checked:false},{label:"不想要了",checked:false} ,{label:"食材不足",checked:false} ,{label:"等待时间过长",checked:false}])
function changeTagSel(item){
item.checked=!item.checked
const tags = ref([{
label: "点错",
checked: false
}, {
label: "不想要了",
checked: false
}, {
label: "食材不足",
checked: false
}, {
label: "等待时间过长",
checked: false
}])
let timer = null
function parseIntNumber(val, isNow) {
console.log(val);
let newval = parseInt(val)
if (newval > props.data.num) {
newval = props.data.num
}
if (newval < 1) {
newval = 1
}
if (isNow) {
number.value = parseInt(newval)
return
}
timer = setTimeout(() => {
number.value = newval
}, 100)
}
function changeTagSel(item) {
item.checked = !item.checked
}
watch(() => props.show, (newval) => {
modelShow.value = newval
@@ -71,9 +127,9 @@
close()
}
})
function toggleModelShow(show){
modelShow.value=show?true:false
function toggleModelShow(show) {
modelShow.value = show ? true : false
}
function onModelClose() {
@@ -91,13 +147,65 @@
function close() {
model.value.close()
}
function confirm(){
emits('confirm')
function confirm() {
const selTag = tags.value.filter(item => item.checked).map(item => item.label).join(",")
const note = selTag + (form.note.length > 0 ? "," + form.note : "");
console.log({
note,
num: number.value
});
if (!note) {
return infoBox.showToast("请输入退菜原因");
}
emits('confirm', {
note,
num: number.value
})
}
</script>
<style lang="scss" scoped>
::v-deep .u-border{
border-width: 1px!important;
.number-box-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 122rpx;
height: 84rpx;
background: #F7F7FA;
border-radius: 8rpx 0rpx 0rpx 8rpx;
border: 2rpx solid #F9F9F9;
box-sizing: border-box;
}
.input {
border: 2rpx solid #F9F9F9;
}
::v-deep .u-input__content__field-wrapper__field {
height: 84rpx;
}
::v-deep .uni-input-input {
text-align: center;
}
.minus {
&::after {
content: '';
display: block;
width: 28rpx;
height: 0rpx;
border: 1px solid #999999;
}
}
::v-deep .u-border {
border-width: 1px !important;
}
::v-deep .u-number-box {
width: 100%;
}
</style>

14
pagesOrder/detail/components/user.vue
View File

@@ -15,28 +15,30 @@
</view>
</template>
<template v-else>
<view class="u-flex u-row-between u-m-t-20 border-bottom u-p-b-20">
<view class="u-flex u-row-between u-m-t-20 border-bottom u-p-b-24">
<view class="u-flex">
<up-avatar :size="30" :src="user.headImg"></up-avatar>
<view class="color-666 u-m-l-30">{{'服务员下单'}}</view>
</view>
<view>
<my-button @click="toOrder" :height="60" plain shape="circle">他的订单</my-button>
<my-button width="128" height="48" @click="toOrder" :height="60" plain shape="circle">
<text class="u-font-24 no-wrap">他的订单</text>
</my-button>
</view>
</view>
</template>
<view class="u-flex u-m-t-20 u-row-between u-font-28">
<view class="u-flex u-m-t-24 u-row-between u-font-28">
<view class="">
<view class="font-bold ">{{user.amount}}</view>
<view class="color-666 u-m-t-10 u-font-24">余额</view>
<view class="color-666 u-m-t-8 u-font-24">余额</view>
</view>
<view class="">
<view class="font-bold">{{user.totalScore}}</view>
<view class="color-666 u-m-t-10 u-font-24">积分</view>
<view class="color-666 u-m-t-8 u-font-24">积分</view>
</view>
<view class="">
<view class="font-bold">0.00</view>
<view class="color-666 u-m-t-10 u-font-24">已消费</view>
<view class="color-666 u-m-t-8 u-font-24">已消费</view>
</view>
</view>
</view>

23
pagesOrder/detail/detail.vue
View File

@@ -1,10 +1,10 @@
<template>
<view class="min-page bg-gray u-font-28 u-p-30">
<user-vue :orderInfo="orderDetail.info" :user="user"></user-vue>
<view class="default-box-padding bg-fff border-r-12 u-m-t-32">
<!-- <view class="default-box-padding bg-fff border-r-12 u-m-t-32">
<text class="">桌位号：</text>
<text class="">{{orderDetail.info.tableName}}</text>
</view>
</view> -->
<goods-list @printOrder="onPrintOrder" @tuikuan="onTuikuan" :orderInfo="orderDetail.info"
:data="orderDetail.goodsList" :seatFee="orderDetail.seatFee" @tuicai="onTuiCai"></goods-list>
<template v-if="orderDetail.seatFee.totalNumber&&orderDetail.seatFee.totalAmount">
@@ -17,7 +17,7 @@
<view class="u-fixed bottom bg-fff ">
<view class="u-flex u-abso">
<template v-if="orderDetail.info.useType=='takeout'">
<view class="u-flex-1">
<view class="u-flex-1" v-if="orderDetail.info.status=='unpaid'">
<my-button @tap="toPay" borderRadius="100rpx" shape="circle"
type="primary">结账</my-button>
</view>
@@ -25,11 +25,11 @@
<template v-else>
<template v-if="orderDetail.info.status=='unpaid'">
<view class="u-flex-1">
<my-button @tap="diancan" color="#fff" bgColor="rgb(57,53,52)" borderRadius="100rpx 0 0 100rpx" fontWeight="700" fontSize="32"
<my-button @tap="diancan" color="#fff" bgColor="rgb(57,53,52)" borderRadius="100rpx 0 0 100rpx" fontWeight="700"
shape="circle" plain type="primary">加菜</my-button>
</view>
<view class="u-flex-1">
<my-button @tap="toPay" borderRadius="0 100rpx 100rpx 0" shape="circle" fontWeight="700" fontSize="32"
<my-button @tap="toPay" borderRadius="0 100rpx 100rpx 0" shape="circle" fontWeight="700"
type="primary">结账</my-button>
</view>
</template>
@@ -120,9 +120,10 @@
tuicai.show = true
tuicai.selGoods = goods
}
async function tuicaiConfirm() {
async function tuicaiConfirm(e) {
console.log(tuicai.selGoods);
const res = await Api.$returnCart({
...e,
cartId: tuicai.selGoods.hasOwnProperty('cartId') ? tuicai.selGoods.cartId : tuicai.selGoods.id,
tableId: orderDetail.info.tableId,
})
@@ -199,6 +200,7 @@
}, 1500)
function diancan() {
clearEmit()
go.to('PAGES_CREATE_ORDER', {
tableId: options.tableId || orderDetail.info.tableId,
name: options.name || orderDetail.info.tableName,
@@ -208,6 +210,7 @@
function toPay() {
const userId=orderDetail.info.userId||''
clearEmit()
go.to('PAGES_ORDER_PAY', {
tableId: options.tableId|| orderDetail.info.tableId,
tableName: options.name,
@@ -310,7 +313,13 @@
Object.assign(submitPar, par)
return Api.$setUser(submitPar)
}
function clearEmit(){
uni.$off('choose-user')
uni.$off('orderDetail:update')
}
function watchChooseuser() {
uni.$off('choose-user')
uni.$on('choose-user', (data) => {

12
pagesOrder/index/compoents/order-item.vue
View File

@@ -30,15 +30,15 @@
<view class="u-m-t-32">
<view class="u-font-32">{{goosZhonglei}}种商品，共{{goodsNumber}}件</view>
<view class="border-bottom u-p-b-32">
<view class="u-flex u-row-between u-col-top u-m-t-24" v-for="(item,index) in data.detailList"
<view class="u-flex u-row-between u-col-top u-m-t-32" v-for="(item,index) in data.detailList"
:key="index">
<view>
<view class="color-666"> {{item.productName}}</view>
<view class=""> {{item.productName}}</view>
<view class="color-999 u-font-24 u-m-t-8">
{{item.productSkuName}}
</view>
</view>
<view class="u-flex">
<view class="u-flex u-flex-1 u-row-right">
<view>×{{item.num}}</view>
<view class="u-m-l-24 u-text-right" :style="computedPriceStyle()">￥{{item.price}}</view>
</view>
@@ -46,8 +46,8 @@
</view>
</view>
<view class="u-flex u-row-between border-bottom u-m-t-32 u-p-b-32">
<view>订单备注</view>
<view class="u-flex u-row-between border-bottom u-m-t-32 u-p-b-32 u-col-top">
<view class="no-wrap u-m-r-32">订单备注</view>
<view>{{data.remark||'无'}}</view>
</view>
<view class="u-m-t-32">
@@ -99,7 +99,7 @@
return ''
}
return {
width: `${item.price}`.length * priceSize + 'px'
'min-width': `${item.price}`.length * priceSize + 'px'
}
}
// const computedPriceStyle = computed(() => {

30
pagesOrder/index/index.vue
View File

@@ -1,11 +1,14 @@
<template>
<view class="min-page bg-gray u-font-28">
<view class="top">
<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
<up-search v-bind="search" v-model="search.val"></up-search>
<up-sticky offset-top="0">
<view class="top">
<view class="search bg-fff u-p-t-32 u-p-l-28 u-p-r-28 u-p-b-32">
<up-search v-bind="search" v-model="search.val" @search="searchConfirm" @clear="searchConfirm" @custom="searchConfirm"></up-search>
</view>
<filter-vue @clearUser="clearQueryUser" @updateStatus="updateQuery('status',$event)" v-model:time="order.data.query.createdAt" :user="user" :type="option.type"></filter-vue>
</view>
<filter-vue @clearUser="clearQueryUser" @updateStatus="updateQuery('status',$event)" v-model:time="order.data.query.createdAt" :user="user" :type="option.type"></filter-vue>
</view>
</up-sticky>
<order-list @printOrder="onPrintOrder" :hasAjax="order.data.hasAjax" :list="order.data.list"></order-list>
<template v-if="order.data.list.length>0">
<my-pagination @change="pageChange" :totalElements="order.data.total"></my-pagination>
@@ -31,7 +34,7 @@
import {getTodayTimestamps} from '@/commons/utils/dayjs-time.js';
const search = reactive({
val: '',
placeholder: '搜索单号/昵称/姓名/手机号码/商品名称',
placeholder: '搜索单号/商品名称',
shape: 'square',
inputStyle: {
borderRadius: '12rpx'
@@ -49,7 +52,7 @@
id: "",
orderNo: "",
orderType: "0",
page: 1,
page: 0,
pageSize: 10,
payType: "",
productName: "",
@@ -62,10 +65,9 @@
order.setQuery('userId','')
}
function pageChange(e){
order.setVal('page',e)
order.setQuery('page',e)
console.log(e);
console.log(order.data.page);
const newPage=e-1
order.setVal('page',newPage)
order.setQuery('page',newPage)
init()
}
function updateQuery(key,e){
@@ -80,9 +82,13 @@
watch(()=>order.data.query.userId,(newval)=>{
init()
})
function searchConfirm(){
order.setQuery('page',0)
init()
}
async function init() {
console.log(order.data.query);
const {content,totalElements}=await Api.tbOrderInfoData({...order.data.query,page:order.data.query.page-1})
const {content,totalElements}=await Api.tbOrderInfoData({...order.data.query,page:order.data.query.page,searchText:search.val})
uni.stopPullDownRefresh()
order.setVal('list',content)
console.log(order.data.list);

36
pagesOrder/pay-order/pay-order.vue
View File

@@ -113,8 +113,9 @@
} from 'vue';
import {
onLoad,
onBackPress
onBackPress,onShow
} from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import * as Api from '@/http/yskApi/Instead.js'
import {
queryAllShopUser
@@ -132,6 +133,7 @@
let option = {isNowPay:false}
let payFinish=ref(false)
onBackPress(() => {
uni.$emit('orderDetail:update')
console.log('onBackPress');
// uni.$emit('update:createOrderIndex')
// if (option.isNowPay&&!payFinish.value) {
@@ -172,11 +174,11 @@
go.to('PAGES_CHOOSE_USER')
}
//更新选择用户
function setUser(par) {
function setUser(par) {
console.log(option);
const submitPar = {
masterId: option.masterId,
tableId: table.value.tableId,
tableId: option.tableId,
vipUserId: user.value.id ? user.value.id : '',
type: user.value.id ? 0 : 1 //0 设置 1 取消
}
@@ -187,11 +189,17 @@
uni.$off('choose-user')
uni.$on('choose-user', (data) => {
console.log(data);
user.value = data
setUser()
setUser({
vipUserId: data.id ? data.id : '',
type: data.id ? 0 : 1 //0 设置 1 取消
}).then(res=>{
user.value = data
})
})
}
onShow(()=>{
watchChooseuser()
})
watch(() => pays.selIndex, (newval) => {
clearInterval(timer)
@@ -238,10 +246,10 @@
}
function changePayType(i, item) {
if (item.payType == 'vipPay' && user.value.amount * 1 < order.amount * 1) {
return infoBox.showToast('余额不足')
}
pays.payTypes.selIndex = i
if (item.payType == 'vipPay' ) {
chooseUser()
}
}
//支付成功回调
function paySuccess() {
@@ -250,6 +258,7 @@
// uni.$emit('orderDetail:update')
payFinish.value=true
uni.$emit('get:table')
uni.$emit('update:orderDetail')
uni.navigateBack({
delta: 1
})
@@ -266,6 +275,10 @@
}
async function payOrder() {
const payType = pays.payTypes.list[pays.payTypes.selIndex].payType
if (payType == 'vipPay' && user.value.amount * 1 < order.amount * 1) {
infoBox.showToast('余额不足')
return
}
await Api.$payOrder({
tableId: order.tableId,
masterId: order.masterId,
@@ -328,7 +341,9 @@
queryAllShopUser({
id: order.userId
}).then(res => {
user.value = res.content[0] || opt
if(res.content[0]){
user.value =res.content[0]
}
})
}
getPayUrl()
@@ -348,7 +363,6 @@
Object.assign(order, opt)
const payTypeList = await Api.$getPayType()
pays.payTypes.list = payTypeList
init()
})