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) => {