订单管理页面
This commit is contained in:
parent
5a973af47a
commit
2ce6ad9d8a
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="font-bold">附加费</view>
|
||||
<my-button plain shape="circle" :width="160" :height="56">退菜</my-button>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>{{data.name||'餐位费'}}</view>
|
||||
<view>x{{data.number}}</view>
|
||||
<view>￥{{data.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
table:{
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
})
|
||||
|
||||
const statusMap={
|
||||
unpaid:'未支付'
|
||||
}
|
||||
function returnStatus(status){
|
||||
return statusMap[status]||''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<view class="default-box-padding bg-fff border-r-12 u-m-t-20" v-if="data.length">
|
||||
<view class="u-font-32 font-bold">
|
||||
<text>共</text>
|
||||
<text class="color-main font-bold"> {{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>
|
||||
<view class="u-m-t-20 list">
|
||||
<view class="item u-m-b-20" v-for="(item,index) in order.info" :key="index">
|
||||
<view class="u-flex u-col-top">
|
||||
<view>
|
||||
<image class="img" :src="item.coverImg" mode=""></image>
|
||||
</view>
|
||||
<view class="u-p-l-30 u-flex-1">
|
||||
<view class="u-flex u-row-between u-col-top">
|
||||
|
||||
<view class="u-flex">
|
||||
<view class="tui" v-if="item.status=='return'">
|
||||
已退
|
||||
</view>
|
||||
<view :class="{'line-th':item.status=='return'}">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="u-text-right">
|
||||
<view>￥{{item.salePrice}}</view>
|
||||
<view v-if="item.status=='return'" class="line-th color-666 u-font-24">￥{{item.salePrice}}</view>
|
||||
<view class="u-m-t-10 u-font-24">X{{item.number}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-right gap-20 u-m-t-20" 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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-gray u-p-20 u-m-t-20">
|
||||
<view>备注</view>
|
||||
<view class="u-m-t-10">无</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40">
|
||||
<view class="u-flex u-row-between border-bottom u-p-b-20">
|
||||
<view class="tag no-pay">
|
||||
未支付
|
||||
</view>
|
||||
<view>
|
||||
<text>小计￥</text>
|
||||
<text class="font-bold u-font-32">{{allPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view></view>
|
||||
<view>
|
||||
<text>总计￥</text>
|
||||
<text class="font-bold u-font-32">{{seatFee*1+allPrice*1}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-30">
|
||||
<my-button @tap="printOrder" type="cancel" :color="color.ColorMain">重新打印</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed
|
||||
} from 'vue';
|
||||
import color from '@/commons/color.js'
|
||||
const emits=defineEmits(['tuicai'])
|
||||
function tuicai(item,index){
|
||||
emits('tuicai',item,index)
|
||||
}
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seatFee:{
|
||||
type:[String,Number],
|
||||
default:0
|
||||
}
|
||||
})
|
||||
const allPrice = computed(() => {
|
||||
return props.data.reduce((prve, cur) => {
|
||||
const curTotal=cur.info.filter(v=>v.isGift !== "true"&& v.status !== "return").reduce((a,b)=>{
|
||||
return a+b.salePrice * b.number
|
||||
},0)
|
||||
return prve + curTotal
|
||||
}, 0).toFixed(2)
|
||||
})
|
||||
|
||||
const goodsNumber = computed(() => {
|
||||
let result = 0
|
||||
result = props.data.reduce((a, b) => {
|
||||
const bTotal = b.info.reduce((prve, cur) => {
|
||||
return prve + cur.number * 1;
|
||||
}, 0);
|
||||
return a + bTotal
|
||||
}, 0)
|
||||
return result
|
||||
})
|
||||
function printOrder(){
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-color: rgb(240, 240, 240);
|
||||
}
|
||||
.line-th{
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.tag {
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 8rpx;
|
||||
|
||||
&.no-pay {
|
||||
background-color: rgb(170, 170, 170);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.tui{
|
||||
background-color: rgb(239, 239, 239);
|
||||
border-radius: 4rpx;
|
||||
margin-right: 6rpx;
|
||||
color: #666;
|
||||
padding: 0 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
|
||||
<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>订单类型</view>
|
||||
<view>堂食</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>桌位号</view>
|
||||
<view>{{table.name}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>就餐人数</view>
|
||||
<view>{{seatFee.totalNumber}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>支付方式</view>
|
||||
<view></view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>预约时间</view>
|
||||
<view></view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>下单时间</view>
|
||||
<view ><up-text v-if="data.createdAt" mode="date" :text="data.createdAt"></up-text></view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>订单编号</view>
|
||||
<view>{{data.orderNo}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-20">
|
||||
<view>商家备注</view>
|
||||
<my-button plain shape="circle" :width="160" :height="60">编辑</my-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import orderEnum from '@/commons/orderEnum.js'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
table:{
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
seatFee:{
|
||||
type: Object,
|
||||
default: () => {totalNumber:0}
|
||||
}
|
||||
})
|
||||
|
||||
function returnStatus(status){
|
||||
const item=orderEnum.status.find(v=>v.key==status)
|
||||
return item?item.label:''
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
|
||||
<up-steps :dot="true" current="0" direction="column">
|
||||
<up-steps-item title="2024-09-02 09:19" :itemStyle="itemStyle" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
|
||||
</up-steps-item>
|
||||
<up-steps-item title="2024-09-02 09:19" desc="[东风(id:124413)]使用代客下单提交。(未打印预结单)">
|
||||
</up-steps-item>
|
||||
</up-steps>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
import color from '@/commons/color.js'
|
||||
const itemStyle = reactive({
|
||||
color: 'rgb(255,0,0)'
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<my-model title="退菜" ref="model" @close="onModelClose" @open="onModelOpen">
|
||||
<template #desc>
|
||||
<view class="u-p-30 u-text-left">
|
||||
<view>
|
||||
{{data.name}}
|
||||
</view>
|
||||
<view class="u-flex u-m-t-32">
|
||||
<up-number-box :buttonSize="44" :inputWidth="220" v-model="number"></up-number-box>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-font-24">
|
||||
<text class="color-999">退菜理由</text>
|
||||
<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 v-if="item.checked"> </up-tag>
|
||||
<up-tag @click="changeTagSel(item)" borderColor="#E5E5E5" color="#999" :text="item.label" plain v-else> </up-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-24">
|
||||
<up-input placeholder="备注"></up-input>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template #btn>
|
||||
<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>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
</my-model>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
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
|
||||
}
|
||||
watch(() => props.show, (newval) => {
|
||||
modelShow.value = newval
|
||||
})
|
||||
watch(() => modelShow.value, (newval) => {
|
||||
emits('update:show', newval)
|
||||
if (newval) {
|
||||
open()
|
||||
} else {
|
||||
close()
|
||||
}
|
||||
})
|
||||
|
||||
function toggleModelShow(show){
|
||||
modelShow.value=show?true:false
|
||||
}
|
||||
|
||||
function onModelClose() {
|
||||
modelShow.value = false
|
||||
}
|
||||
|
||||
function onModelOpen() {
|
||||
modelShow.value = true
|
||||
}
|
||||
|
||||
function open() {
|
||||
model.value.open()
|
||||
}
|
||||
|
||||
function close() {
|
||||
model.value.close()
|
||||
}
|
||||
function confirm(){
|
||||
emits('confirm')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<view class="u-font-28 default-box-padding u-relative bg-fff border-r-12 u-overflow-hide">
|
||||
<view class="change u-absolute my-bg-main color-fff left-top" >切换</view>
|
||||
<view class="u-flex u-row-between u-m-t-20 border-bottom u-p-b-20">
|
||||
<view class="u-flex">
|
||||
<up-avatar :size="30"></up-avatar>
|
||||
<view class="color-666 u-m-l-30">未绑定手机号</view>
|
||||
</view>
|
||||
<view>
|
||||
<my-button :height="60" plain shape="circle">他的订单</my-button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-20 u-row-between">
|
||||
<view class="">
|
||||
<view class="font-bold">0.00</view>
|
||||
<view class="color-666 u-m-t-10">余额</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-bold">0.00</view>
|
||||
<view class="color-666 u-m-t-10">积分</view>
|
||||
</view>
|
||||
<view class="">
|
||||
<view class="font-bold">0.00</view>
|
||||
<view class="color-666 u-m-t-10">已消费</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.change{
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 0 0 16rpx 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<view class="min-page bg-gray u-font-28 u-p-30">
|
||||
<user-vue></user-vue>
|
||||
<view class="default-box-padding bg-fff border-r-12 u-m-t-20">
|
||||
<text class="color-666">桌位号：</text>
|
||||
<text class="font-bold">{{options.name}}</text>
|
||||
</view>
|
||||
<goods-list :data="orderDetail.goodsList" :seatFee="orderDetail.seatFee.totalAmount"
|
||||
@tuicai="onTuiCai"></goods-list>
|
||||
<extra-vue :data="orderDetail.seatFee"></extra-vue>
|
||||
<order-vue :data="orderDetail.info" :table="options" :seatFee="orderDetail.seatFee"></order-vue>
|
||||
<step-vue></step-vue>
|
||||
<view style="height: 200rpx;"></view>
|
||||
<view class="u-fixed bottom bg-fff ">
|
||||
<view class="u-flex u-abso">
|
||||
<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"
|
||||
shape="circle" plain type="primary">加菜</my-button>
|
||||
</view>
|
||||
<view class="u-flex-1">
|
||||
<my-button @tap="toPay" borderRadius="0 100rpx 100rpx 0" shape="circle"
|
||||
type="primary">结账</my-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tuicai-vue @confirm="tuicaiConfirm" v-model:show="tuicai.show" :data="tuicai.selGoods"></tuicai-vue>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as Api from '@/http/yskApi/Instead.js'
|
||||
import * as orderApi from '@/http/yskApi/order.js'
|
||||
import userVue from './components/user.vue';
|
||||
import orderVue from './components/order.vue';
|
||||
import goodsList from './components/list.vue';
|
||||
import stepVue from './components/step.vue';
|
||||
import extraVue from './components/extra.vue';
|
||||
import tuicaiVue from './components/tuicai.vue';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import {
|
||||
onLoad,
|
||||
onShow,
|
||||
onHide
|
||||
} from '@dcloudio/uni-app';
|
||||
import {
|
||||
reactive
|
||||
} from 'vue';
|
||||
import OrderDetail from './page.js'
|
||||
const tuicai = reactive({
|
||||
show: false,
|
||||
selGoods: {}
|
||||
})
|
||||
|
||||
function onTuiCai(goods, index) {
|
||||
tuicai.show = true
|
||||
tuicai.selGoods = goods
|
||||
}
|
||||
|
||||
async function tuicaiConfirm() {
|
||||
const res=await Api.$returnCart({
|
||||
cartId: tuicai.selGoods.id,
|
||||
tableId:options.tableId,
|
||||
})
|
||||
tuicai.selGoods.status='return'
|
||||
tuicai.show = false
|
||||
}
|
||||
const uiPage = new OrderDetail()
|
||||
setTimeout(() => {
|
||||
uiPage.setVal('user', {
|
||||
name: 1
|
||||
})
|
||||
}, 1500)
|
||||
|
||||
function diancan() {
|
||||
go.to('PAGES_CREATE_ORDER', {
|
||||
tableId: options.tableId,
|
||||
tableName: options.name,
|
||||
type: 'add'
|
||||
})
|
||||
}
|
||||
|
||||
function toPay() {
|
||||
go.to('PAGES_CRESATE_ORDER_PAY', {
|
||||
tableId: options.tableId,
|
||||
tableName: options.name,
|
||||
masterId: options.masterId,
|
||||
orderId: orderDetail.info.id,
|
||||
discount: 1
|
||||
})
|
||||
}
|
||||
|
||||
const orderDetail = reactive({
|
||||
goodsList: [],
|
||||
info: {},
|
||||
seatFee: {
|
||||
totalAmount: 0
|
||||
}
|
||||
})
|
||||
const options = reactive({})
|
||||
async function init() {
|
||||
const res= await orderApi.tbOrderInfoDetail(options.id)
|
||||
const masterId=res.masterId
|
||||
options.masterId = res.masterId
|
||||
if(res.status=='unpaid'){
|
||||
const {
|
||||
records,
|
||||
seatFee
|
||||
} = await Api.getCart({
|
||||
masterId,
|
||||
tableId:res.tableId
|
||||
})
|
||||
orderDetail.goodsList = records
|
||||
orderDetail.seatFee = seatFee
|
||||
}else{
|
||||
orderDetail.goodsList = res.detailList
|
||||
}
|
||||
orderDetail.info = res
|
||||
}
|
||||
|
||||
function watchEmit() {
|
||||
uni.$off('orderDetail:update')
|
||||
uni.$once('orderDetail:update', (newval) => {
|
||||
console.log(newval);
|
||||
init()
|
||||
})
|
||||
}
|
||||
onShow(() => {
|
||||
watchEmit()
|
||||
})
|
||||
onLoad((opt) => {
|
||||
Object.assign(options, opt)
|
||||
console.log(options);
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 68rpx;
|
||||
|
||||
.u-abso {
|
||||
bottom: 84rpx;
|
||||
left: 28rpx;
|
||||
right: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import {
|
||||
reactive, ref
|
||||
} from 'vue';
|
||||
function isSameType(a, b) {
|
||||
return a instanceof b === true || b instanceof a === true;
|
||||
}
|
||||
class OrderDetail {
|
||||
constructor(data) {
|
||||
const user ={}
|
||||
const table = {}
|
||||
const goodsList =[]
|
||||
const orderInfo = {}
|
||||
this.data=reactive({
|
||||
user,table,goodsList,orderInfo
|
||||
})
|
||||
Object.assign(this, data)
|
||||
}
|
||||
setVal(key,val){
|
||||
this.data[key]=val
|
||||
}
|
||||
}
|
||||
|
||||
export default OrderDetail
|
||||
|
|
@ -0,0 +1,194 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="u-flex bg-fff u-p-l-28 u-p-r-28 u-row-between">
|
||||
<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(index)"
|
||||
:class="{active:timeData.sel==index}" v-for="(item,index) in timeData.list" :key="index">
|
||||
{{item.label}}
|
||||
</view>
|
||||
<view class="u-rela time-item tranistion-2" @click="changeTimeDataSel(-1)"
|
||||
:class="{active:timeData.sel==-1}">自定义</view>
|
||||
</view>
|
||||
<view class="u-m-t-2 bg-fff u-col-center u-flex u-p-l-28 u-p-r-28 u-p-t-30 u-row-between">
|
||||
<view class="status-item " @click="changeStatusSel(index)" :class="{active:statusData.sel==index}"
|
||||
v-for="(item,index) in statusData.list" :key="index">
|
||||
{{item.label}}
|
||||
</view>
|
||||
<view class="status-item u-flex" @click="moreShowOpen">
|
||||
<image src="@/pagesOrder/static/image/icon-search.svg" style="width: 38rpx;height: 30rpx;" mode="">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-l-28 u-flex u-p-r-28 u-p-t-10 bg-gray" v-if="time.length">
|
||||
<view class="time-area u-font-24 color-main u-flex">
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="time[0]"></uni-dateformat>
|
||||
<text class="u-p-l-10 u-p-r-10">至</text>
|
||||
<uni-dateformat format="yyyy-MM-dd hh:mm:ss" :date="time[1]"></uni-dateformat>
|
||||
</view>
|
||||
</view>
|
||||
<my-date-pickerview @confirm="datePickerConfirm" ref="datePicker"></my-date-pickerview>
|
||||
<!-- 更多状态选择筛选 -->
|
||||
<up-popup :round="10" :show="statusData.moreShow" :closeable="true" @close="moreShowHide">
|
||||
<view class="u-text-center font-bold u-font-32 u-p-t-30">选择状态</view>
|
||||
<view style="height: 20rpx;"></view>
|
||||
<view class="u-p-30 all-list u-flex u-flex-wrap gap-20">
|
||||
<view class="all-list-item" :class="{active:statusItemIndex==statusData.allListSel}" @click="changeAllListSel(statusItemIndex)" v-for="(statusItem,statusItemIndex) in statusData.allList" :key="statusItemIndex">
|
||||
{{statusItem.label}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-p-t-30 u-p-b-30 u-p-l-20 u-p-r-20 gap-20">
|
||||
<up-button @click="moreShowHide">取消</up-button>
|
||||
<up-button type="primary" @click="moreShowHide">确定</up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import orderEnum from '@/commons/orderEnum.js'
|
||||
import * as $time from '@/commons/utils/dayjs-time.js';
|
||||
import {
|
||||
reactive,
|
||||
ref,
|
||||
watch
|
||||
} from 'vue';
|
||||
const props = defineProps({
|
||||
time: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
status: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
let datePicker = ref(null)
|
||||
const emits = defineEmits(['update:time', 'update:status'])
|
||||
// 示例使用
|
||||
const today = $time.getTodayTimestamps();
|
||||
const yesterday = $time.getYesterdayTimestamps();
|
||||
const thisWeek = $time.getThisWeekTimestamps();
|
||||
const thisMonth = $time.getThisMonthTimestamps();
|
||||
const timeData = reactive({
|
||||
list: [today, yesterday, thisWeek, thisMonth],
|
||||
sel: 0
|
||||
})
|
||||
|
||||
function changeTimeDataSel(i) {
|
||||
timeData.sel = i
|
||||
if (i == -1) {
|
||||
datePicker.value.open()
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => timeData.sel, (newval) => {
|
||||
const data = timeData.list[newval]
|
||||
if (newval != -1) {
|
||||
emits('update:time', [data.start, data.end])
|
||||
}
|
||||
})
|
||||
|
||||
const statusData = reactive({
|
||||
allList: orderEnum.status,
|
||||
moreShow:false,
|
||||
allListSel: -1,
|
||||
list: [{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '待完成',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '待退款',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '未支付',
|
||||
value: 'unpaid'
|
||||
},
|
||||
{
|
||||
label: '已退款',
|
||||
value: ''
|
||||
}
|
||||
],
|
||||
sel: 0
|
||||
})
|
||||
function moreShowHide(){
|
||||
statusData.moreShow=false
|
||||
}
|
||||
function moreShowOpen(){
|
||||
statusData.moreShow=true
|
||||
}
|
||||
function changeStatusSel(i) {
|
||||
statusData.sel = i
|
||||
}
|
||||
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
emits('update:time', [e.start, e.end])
|
||||
}
|
||||
function changeAllListSel(i){
|
||||
statusData.allListSel=i
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.status-item {
|
||||
color: #666;
|
||||
transition: all .2s ease-in-out;
|
||||
padding-bottom: 24rpx;
|
||||
|
||||
&.active {
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
.all-list-item{
|
||||
text-align: center;
|
||||
width: 156rpx;
|
||||
white-space: nowrap;
|
||||
color: #666;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all .2s ease-in-out;
|
||||
border: 1px solid #eee;
|
||||
&.active {
|
||||
color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
}
|
||||
}
|
||||
.time-item {
|
||||
color: #666;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 4rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $my-main-color;
|
||||
// font-size: 32rpx;
|
||||
transform: scale(1.1);
|
||||
transform-origin: center;
|
||||
font-weight: 700;
|
||||
|
||||
&::after {
|
||||
background: #318AFE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-area {
|
||||
background: #E6F0FF;
|
||||
border-radius: 100px;
|
||||
padding: 10rpx 20rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<view class="bg-fff item" @click="toDetail">
|
||||
<view class="u-flex u-p-b-22 border-bottom u-col-bottom u-row-between">
|
||||
<view class="u-flex u-col-bottom">
|
||||
<view class="u-font-40 color-333">{{data.tableName}}</view>
|
||||
<view class="u-m-l-22">{{data.masterId}}</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view>
|
||||
<text :class="[data.status]">{{returnStatus(data.status)}}</text>
|
||||
</view>
|
||||
<view class="color-main u-m-l-24">
|
||||
<text>
|
||||
{{sendTypeFilter(data.sendType)}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-26">
|
||||
<view class="u-flex u-col-bottom u-font-24 color-999">
|
||||
<up-avatar :size="33"></up-avatar>
|
||||
<view class="u-m-l-16">{{formatTime(data.createdAt)}}</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-font-32">1种商品，共1件</view>
|
||||
<view class="border-bottom u-p-b-32">
|
||||
<view class="u-flex u-row-between u-m-t-24" v-for="(item,index) in data.detailList" :key="index">
|
||||
<view>
|
||||
<view class="color-666"> {{item.productName}}</view>
|
||||
<view class="color-999 u-font-24 u-m-t-8">
|
||||
{{item.productSkuName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<view>×1</view>
|
||||
<view class="u-m-l-24">￥15.00</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="u-flex u-row-between border-bottom u-m-t-32 u-p-b-32">
|
||||
<view>订单备注</view>
|
||||
<view>{{data.remark||'无'}}</view>
|
||||
</view>
|
||||
<view class="u-m-t-32">
|
||||
<view class="u-flex u-row-right">
|
||||
<text>小计￥</text>
|
||||
<text class="font-bold u-font-32">{{data.orderAmount}}</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-24">
|
||||
<view class="print">重新打印</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import orderEnum from '@/commons/orderEnum.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
index: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
function formatTime(time){
|
||||
return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
|
||||
}
|
||||
function returnStatus(status) {
|
||||
const item = orderEnum.status.find(v => v.key == status)
|
||||
return item ? item.label : ''
|
||||
}
|
||||
|
||||
function sendTypeFilter(t) {
|
||||
if (t) {
|
||||
return orderEnum.sendType.find(item => item.key == t).label;
|
||||
} else {
|
||||
return t;
|
||||
}
|
||||
}
|
||||
function toDetail(){
|
||||
go.to('PAGES_ORDER_DETAIL',{
|
||||
id:props.data.id
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.border-bottom {
|
||||
border-bottom: 1rpx solid #E5E5E5;
|
||||
}
|
||||
|
||||
.u-font-40 {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 16rpx 24rpx 32rpx 24rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.unpaid {
|
||||
color: #FD7B49;
|
||||
}
|
||||
.print{
|
||||
padding: 6rpx 14rpx 8rpx 18rpx;
|
||||
border:1px solid $my-main-color;
|
||||
color:$my-main-color;
|
||||
font-size: 24rpx;
|
||||
border-radius: 100rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<view class="list">
|
||||
<view v-for="(item,index) in list" :key="index">
|
||||
<order-item :data="item" :index="index"></order-item>
|
||||
</view>
|
||||
<view v-if="hasAjax&&!list.length">
|
||||
<my-img-empty tips="亲，你还没有订单哦~"></my-img-empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import orderItem from './order-item.vue';
|
||||
const props=defineProps({
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
hasAjax:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding: 32rpx 28rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<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>
|
||||
</view>
|
||||
<filter-vue v-model:time="pageData.order.query.createdAt"></filter-vue>
|
||||
</view>
|
||||
<order-list :hasAjax="pageData.order.hasAjax" :list="pageData.order.list"></order-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as Api from '@/http/yskApi/order.js'
|
||||
import filterVue from './compoents/filter.vue';
|
||||
import orderList from './compoents/order-list.vue';
|
||||
import {
|
||||
reactive, watch
|
||||
} from 'vue';
|
||||
const search = reactive({
|
||||
val: '',
|
||||
placeholder: '搜索单号/昵称/姓名/手机号码/商品名称',
|
||||
shape: 'square',
|
||||
inputStyle: {
|
||||
borderRadius: '12rpx'
|
||||
},
|
||||
actionStyle: {
|
||||
textAlign: 'right'
|
||||
}
|
||||
})
|
||||
|
||||
const pageData = reactive({
|
||||
order: {
|
||||
list: [],
|
||||
hasAjax:false,
|
||||
query: {
|
||||
createdAt: [],
|
||||
id: "",
|
||||
orderNo: "",
|
||||
orderType: "0",
|
||||
page: 0,
|
||||
pageSize: 10,
|
||||
payType: "",
|
||||
productName: "",
|
||||
status: ""
|
||||
}
|
||||
}
|
||||
})
|
||||
watch(()=>pageData.order.query.createdAt,(newval)=>{
|
||||
init()
|
||||
})
|
||||
async function init() {
|
||||
const {content}=await Api.tbOrderInfoData(pageData.order.query)
|
||||
pageData.order.hasAjax=true
|
||||
pageData.order.list=content
|
||||
console.log(content);
|
||||
}
|
||||
init()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.top {
|
||||
background-color: #E5E5E5;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="19.091" height="15" viewBox="0 0 19.091 15"><defs><style>.a{fill:#318afe;}</style></defs><path class="a" d="M64.682,160H82.409a.682.682,0,1,1,0,1.364H64.682a.682.682,0,1,1,0-1.364Zm0,13.636H76.955a.682.682,0,0,1,0,1.364H64.682a.682.682,0,0,1,0-1.364ZM80.773,170.5l2.045,3.136a.682.682,0,1,1-1.091.818l-2.045-3.136a10.526,10.526,0,0,1-2.045.273,4.773,4.773,0,1,1,4.773-4.773A5.15,5.15,0,0,1,80.773,170.5Zm-3.136-.273a3.409,3.409,0,1,0-3.409-3.409A3.376,3.376,0,0,0,77.636,170.227Zm-12.955-3.409h5.455a.682.682,0,1,1,0,1.364H64.682a.682.682,0,0,1,0-1.364Z" transform="translate(-64 -160)"/></svg>
|
||||
|
After Width: | Height: | Size: 641 B |
Loading…
Reference in New Issue