This commit is contained in:
parent
2284f6d9e6
commit
b01e4703ce
|
@ -64,6 +64,13 @@ export function orderListApi(id, data) {
|
||||||
return request.get(`admin/${id}/order_list`, { params: data })
|
return request.get(`admin/${id}/order_list`, { params: data })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 核销订单列表
|
||||||
|
*/
|
||||||
|
export function verifierOrderListApi(id, code) {
|
||||||
|
return request.get(`verifier/${id}/order/${code}`)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 未支付订单列表
|
* @description 未支付订单列表
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, nextTick, computed } from "vue";
|
import { ref, watch, nextTick, computed, onMounted, onUnmounted } from "vue";
|
||||||
import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
|
import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { audioplay } from "@/utils/audio.js";
|
import { audioplay } from "@/utils/audio.js";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const drawer = ref(false);
|
const drawer = ref(false);
|
||||||
const active = ref(1);
|
const active = ref(1);
|
||||||
|
@ -20,7 +21,7 @@ const open = () => {
|
||||||
input.value = "";
|
input.value = "";
|
||||||
reLoad.value = true;
|
reLoad.value = true;
|
||||||
codeRef.value?.focus();
|
codeRef.value?.focus();
|
||||||
changeActive(active.value)
|
changeActive(active.value);
|
||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -29,8 +30,14 @@ const changeActive = (e) => {
|
||||||
active.value = e;
|
active.value = e;
|
||||||
if (active.value == 2) {
|
if (active.value == 2) {
|
||||||
// 添加键盘事件监听器
|
// 添加键盘事件监听器
|
||||||
document.addEventListener("keydown", keyboard);
|
window.addEventListener("keydown", keyboard);
|
||||||
} else document.removeEventListener("keydown", keyboard);
|
} else{
|
||||||
|
window.removeEventListener("keydown", keyboard);
|
||||||
|
nextTick(()=>{
|
||||||
|
input.value = "";
|
||||||
|
codeRef.value?.focus();
|
||||||
|
})
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const form = ref({});
|
const form = ref({});
|
||||||
|
@ -66,29 +73,42 @@ const numList = ref([
|
||||||
|
|
||||||
let timecount = 0; //刷新间隔
|
let timecount = 0; //刷新间隔
|
||||||
|
|
||||||
|
const regexWechat = /^(10|11|12|13|14|15)\d{16}$/; //微信条码正则 10-15开头18位
|
||||||
|
const regexPay = /^(25|26|27|28|29|30)\d{14,22}$/; //支付宝条码正则 25-30开头16-24位
|
||||||
|
|
||||||
const order_id = ref("");
|
const order_id = ref("");
|
||||||
// 支付
|
// 支付
|
||||||
const handleEnter = () => {
|
const handleEnter = () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
codeRef.value.blur();
|
codeRef.value.blur();
|
||||||
|
|
||||||
if (order_id.value) orderPay(order_id.value);
|
if (order_id.value) orderPay(order_id.value);
|
||||||
else
|
else {
|
||||||
|
let pay_type;
|
||||||
|
if (regexWechat.test(input.value)) pay_type = "micropay";
|
||||||
|
else if (regexPay.test(input.value)) pay_type = "alipayBar";
|
||||||
|
else {
|
||||||
|
loading.value = false;
|
||||||
|
input.value = "";
|
||||||
|
codeRef.value.focus();
|
||||||
|
return ElMessage.error("请输入正确的支付码");
|
||||||
|
}
|
||||||
orderCreateApi({
|
orderCreateApi({
|
||||||
address_id: "",
|
address_id: "",
|
||||||
key: form.value.key,
|
key: form.value.key,
|
||||||
cart_id: cart_id.value,
|
cart_id: cart_id.value,
|
||||||
pay_type: "micropay",
|
pay_type: pay_type,
|
||||||
auth_code: input.value,
|
auth_code: input.value,
|
||||||
source: 300,
|
source: 300,
|
||||||
})
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status == 200 && res.message == "支付成功") {
|
if (res.status == 200 && (res.message == "支付成功" || res.message == "success")) {
|
||||||
drawer.value = false;
|
drawer.value = false;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: res.message,
|
message: res.message=='success'?'支付成功':res.message,
|
||||||
type: "success",
|
type: "success",
|
||||||
});
|
});
|
||||||
audioplay(res.data.message);
|
audioplay(res.data.message||res.data.result.message);
|
||||||
beforeClose();
|
beforeClose();
|
||||||
} else {
|
} else {
|
||||||
if (!res.data.group_order_sn) {
|
if (!res.data.group_order_sn) {
|
||||||
|
@ -112,27 +132,38 @@ const handleEnter = () => {
|
||||||
codeRef.value?.focus();
|
codeRef.value?.focus();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const orderPay = (id) => {
|
const orderPay = (id) => {
|
||||||
let query;
|
let query;
|
||||||
if(active.value == 1){
|
if (active.value == 1) {
|
||||||
query = {
|
let pay_type;
|
||||||
type: "micropay",
|
if (regexWechat.test(input.value)) pay_type = "micropay";
|
||||||
auth_code: input.value,
|
else if (regexPay.test(input.value)) pay_type = "alipayBar";
|
||||||
|
else {
|
||||||
|
loading.value = false;
|
||||||
|
input.value = "";
|
||||||
|
codeRef.value.focus();
|
||||||
|
return ElMessage.error("请输入正确的支付码");
|
||||||
}
|
}
|
||||||
} else query = {
|
query = {
|
||||||
type: "cash_payment"
|
type: pay_type,
|
||||||
}
|
auth_code: input.value,
|
||||||
|
};
|
||||||
|
} else
|
||||||
|
query = {
|
||||||
|
type: "cash_payment",
|
||||||
|
};
|
||||||
orderPayApi(id, query)
|
orderPayApi(id, query)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.status == 200 && res.message == "支付成功") {
|
if (res.status == 200 && (res.message == "支付成功" || res.message == "success")) {
|
||||||
drawer.value = false;
|
drawer.value = false;
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: res.message,
|
message: res.message=='success'?'支付成功':res.message,
|
||||||
type: "success",
|
type: "success",
|
||||||
});
|
});
|
||||||
audioplay(res.data.message);
|
audioplay(res.data.message||res.data.result.message);
|
||||||
beforeClose();
|
beforeClose();
|
||||||
} else {
|
} else {
|
||||||
order_id.value = res.data.group_order_id;
|
order_id.value = res.data.group_order_id;
|
||||||
|
@ -152,7 +183,7 @@ const orderPay = (id) => {
|
||||||
|
|
||||||
const count = ref(0); // 累计请求3次, 如果3次都失败, 则只能重新支付
|
const count = ref(0); // 累计请求3次, 如果3次都失败, 则只能重新支付
|
||||||
const getOrderStatus = (id) => {
|
const getOrderStatus = (id) => {
|
||||||
if(!id) return;
|
if (!id) return;
|
||||||
count.value++;
|
count.value++;
|
||||||
timecount += 5000;
|
timecount += 5000;
|
||||||
orderStatusApi({
|
orderStatusApi({
|
||||||
|
@ -197,13 +228,13 @@ const getOrderStatus = (id) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const beforeClose = () => {
|
const beforeClose = () => {
|
||||||
|
window.removeEventListener("keydown", keyboard);
|
||||||
reLoad.value = false;
|
reLoad.value = false;
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
input.value = "";
|
input.value = "";
|
||||||
collection.value = "";
|
collection.value = "";
|
||||||
collectionArray.value = [];
|
collectionArray.value = [];
|
||||||
codeRef.value?.blur();
|
codeRef.value?.blur();
|
||||||
document.removeEventListener("keydown", keyboard);
|
|
||||||
emit("paySuccess");
|
emit("paySuccess");
|
||||||
drawer.value = false;
|
drawer.value = false;
|
||||||
};
|
};
|
||||||
|
@ -214,6 +245,7 @@ defineExpose({
|
||||||
drawer,
|
drawer,
|
||||||
setForm,
|
setForm,
|
||||||
setRePay,
|
setRePay,
|
||||||
|
beforeClose
|
||||||
});
|
});
|
||||||
|
|
||||||
const collectionArray = ref([]);
|
const collectionArray = ref([]);
|
||||||
|
@ -259,55 +291,62 @@ const numTap = (item) => {
|
||||||
};
|
};
|
||||||
// 现金结算
|
// 现金结算
|
||||||
const cashBnt = () => {
|
const cashBnt = () => {
|
||||||
if(changePrice.value===''||changePrice.value===null||changePrice.value===undefined) return ;
|
if (
|
||||||
|
changePrice.value === "" ||
|
||||||
|
changePrice.value === null ||
|
||||||
|
changePrice.value === undefined
|
||||||
|
)
|
||||||
|
return;
|
||||||
if (order_id.value) orderPay(order_id.value);
|
if (order_id.value) orderPay(order_id.value);
|
||||||
else orderCreateApi({
|
else
|
||||||
address_id: "",
|
orderCreateApi({
|
||||||
key: form.value.key,
|
address_id: "",
|
||||||
cart_id: cart_id.value,
|
key: form.value.key,
|
||||||
pay_type: "cash_payment",
|
cart_id: cart_id.value,
|
||||||
source: 300,
|
pay_type: "cash_payment",
|
||||||
})
|
source: 300,
|
||||||
.then((res) => {
|
|
||||||
if (res.status == 200 && res.message == "支付成功") {
|
|
||||||
drawer.value = false;
|
|
||||||
ElMessage({
|
|
||||||
message: res.message,
|
|
||||||
type: "success",
|
|
||||||
});
|
|
||||||
audioplay(res.data.message);
|
|
||||||
beforeClose();
|
|
||||||
} else {
|
|
||||||
if (!res.data.group_order_sn) {
|
|
||||||
order_id.value = res.data.result.order_id;
|
|
||||||
collection.value = "";
|
|
||||||
collectionArray.value = [];
|
|
||||||
loading.value = false;
|
|
||||||
return ElMessage({
|
|
||||||
message: res.message,
|
|
||||||
type: "error",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
order_id.value = res.data.group_order_id;
|
|
||||||
count.value = 0;
|
|
||||||
timecount = 0;
|
|
||||||
getOrderStatus(res.data.group_order_sn);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.then((res) => {
|
||||||
loading.value = false;
|
if (res.status == 200 && res.message == "支付成功") {
|
||||||
});
|
drawer.value = false;
|
||||||
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
audioplay(res.data.message);
|
||||||
|
beforeClose();
|
||||||
|
} else {
|
||||||
|
if (!res.data.group_order_sn) {
|
||||||
|
order_id.value = res.data.result.order_id;
|
||||||
|
collection.value = "";
|
||||||
|
collectionArray.value = [];
|
||||||
|
loading.value = false;
|
||||||
|
return ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
order_id.value = res.data.group_order_id;
|
||||||
|
count.value = 0;
|
||||||
|
timecount = 0;
|
||||||
|
getOrderStatus(res.data.group_order_sn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 监听键盘函数
|
// 监听键盘函数
|
||||||
const keyboard = (event) => {
|
const keyboard = (event) => {
|
||||||
let e = event || window.event;
|
let e = event || window.event;
|
||||||
let key = e.keyCode;
|
let key = e.keyCode;
|
||||||
if (true) {
|
if(key == 37)return changeActive(2);
|
||||||
event.stopPropagation(); // 阻止事件冒泡传递
|
if(key == 120)return mitt.emit('F9');
|
||||||
event.preventDefault(); //阻止默认事件原有功能
|
if(key == 27)return beforeClose();
|
||||||
}
|
event.stopPropagation(); // 阻止事件冒泡传递
|
||||||
|
event.preventDefault(); // 阻止默认事件原有功能
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 96:
|
case 96:
|
||||||
case 48:
|
case 48:
|
||||||
|
@ -363,6 +402,27 @@ const keyboard = (event) => {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const aleft = () => {
|
||||||
|
if(!drawer.value) return;
|
||||||
|
if(active.value==2) return changeActive(1);
|
||||||
|
};
|
||||||
|
const aright = () => {
|
||||||
|
if(!drawer.value) return;
|
||||||
|
if(active.value==1) return changeActive(2);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("left", aleft);
|
||||||
|
mitt.on("right", aright);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("left", aleft);
|
||||||
|
mitt.off("right", aright);
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -384,7 +444,7 @@ const keyboard = (event) => {
|
||||||
:class="{ active: active == 1 }"
|
:class="{ active: active == 1 }"
|
||||||
@click="changeActive(1)"
|
@click="changeActive(1)"
|
||||||
>
|
>
|
||||||
微信
|
微信/支付宝
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="right"
|
class="right"
|
||||||
|
@ -526,12 +586,13 @@ const keyboard = (event) => {
|
||||||
.received {
|
.received {
|
||||||
height: 58px;
|
height: 58px;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
border: 1px solid #eeeeee;
|
border: 1px solid #1890ff;
|
||||||
|
box-shadow: 0 0 3px #1890ff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
line-height: 58px;
|
line-height: 58px;
|
||||||
color: #303133;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance {
|
.balance {
|
||||||
|
|
|
@ -1,6 +1,34 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import myHeader from "./myHeader.vue";
|
import myHeader from "./myHeader.vue";
|
||||||
import myAside from "./myAside.vue";
|
import myAside from "./myAside.vue";
|
||||||
|
import { ref, nextTick, onMounted, onUnmounted } from "vue";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const KeyboardEvent = (e)=>{
|
||||||
|
console.log('按下', e.keyCode);
|
||||||
|
if(e.keyCode == 16) mitt.emit('shift');
|
||||||
|
if(e.keyCode == 120) mitt.emit('F9');
|
||||||
|
if(e.keyCode == 13) mitt.emit('enter');
|
||||||
|
if(e.keyCode == 37) mitt.emit('left');
|
||||||
|
if(e.keyCode == 39) mitt.emit('right');
|
||||||
|
if(e.keyCode == 38) mitt.emit('up');
|
||||||
|
if(e.keyCode == 40) mitt.emit('down');
|
||||||
|
if(e.keyCode == 46) mitt.emit('delete');
|
||||||
|
if(e.keyCode == 45) mitt.emit('insert');
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(()=>{
|
||||||
|
window.addEventListener('keydown', KeyboardEvent);
|
||||||
|
console.log('开启键盘监听');
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(()=>{
|
||||||
|
window.removeEventListener('keydown', KeyboardEvent);
|
||||||
|
console.log('关闭键盘监听');
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -15,7 +43,7 @@ import myAside from "./myAside.vue";
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<el-main>
|
<el-main>
|
||||||
<router-view v-slot="{ Component }" class="my-main">
|
<router-view v-slot="{ Component }" class="my-main">
|
||||||
<transition name="el-fade-in-linear">
|
<transition name="el-zoom-in-top">
|
||||||
<component :is="Component"></component>
|
<component :is="Component"></component>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
@ -7,6 +9,24 @@ const route = useRoute()
|
||||||
const navTo = (name) => {
|
const navTo = (name) => {
|
||||||
router.push({ name })
|
router.push({ name })
|
||||||
}
|
}
|
||||||
|
const list = ref(['home', 'order', 'convert', 'shop']);
|
||||||
|
const aup = ()=>{
|
||||||
|
let index = list.value.indexOf(route.name);
|
||||||
|
if(index>0) navTo(list.value[index-1]);
|
||||||
|
}
|
||||||
|
const adown = ()=>{
|
||||||
|
let index = list.value.indexOf(route.name);
|
||||||
|
if(index<list.value.length-1) navTo(list.value[index+1]);
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("up", aup);
|
||||||
|
mitt.on("down", adown);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("aup", aup);
|
||||||
|
mitt.off("adown", adown);
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -21,6 +41,10 @@ const navTo = (name) => {
|
||||||
<el-icon size="30"><DataLine /></el-icon>
|
<el-icon size="30"><DataLine /></el-icon>
|
||||||
<div>订单</div>
|
<div>订单</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="list-item" :class="{'active': route.name=='convert'}" @click="navTo('convert')">
|
||||||
|
<el-icon size="30"><FullScreen /></el-icon>
|
||||||
|
<div>核销</div>
|
||||||
|
</div>
|
||||||
<div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
|
<div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
|
||||||
<el-icon size="30"><ShoppingBag /></el-icon>
|
<el-icon size="30"><ShoppingBag /></el-icon>
|
||||||
<div>商品</div>
|
<div>商品</div>
|
||||||
|
|
|
@ -10,26 +10,31 @@ const routes = [
|
||||||
component: layout,
|
component: layout,
|
||||||
redirect: '/home',
|
redirect: '/home',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/home',
|
path: '/home',
|
||||||
name: 'home',
|
name: 'home',
|
||||||
component: () => import('@/views/home/index.vue'),
|
component: () => import('@/views/home/index.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/order',
|
path: '/order',
|
||||||
name: 'order',
|
name: 'order',
|
||||||
component: () => import('@/views/order/index.vue'),
|
component: () => import('@/views/order/index.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/orderList',
|
path: '/orderList',
|
||||||
name: 'orderList',
|
name: 'orderList',
|
||||||
component: () => import('@/views/order/indexList.vue'),
|
component: () => import('@/views/order/indexList.vue'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/shop',
|
path: '/shop',
|
||||||
name: 'shop',
|
name: 'shop',
|
||||||
component: () => import('@/views/shop/index.vue'),
|
component: () => import('@/views/shop/index.vue'),
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/convert',
|
||||||
|
name: 'convert',
|
||||||
|
component: () => import('@/views/convert/index.vue'),
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
|
|
||||||
export const audioplay = (text) => {
|
export const audioplay = (text) => {
|
||||||
|
if(!text) return;
|
||||||
let ssu = new window.SpeechSynthesisUtterance(text);
|
let ssu = new window.SpeechSynthesisUtterance(text);
|
||||||
window.speechSynthesis.speak(ssu);
|
window.speechSynthesis.speak(ssu);
|
||||||
}
|
}
|
|
@ -0,0 +1,359 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref } from "vue";
|
||||||
|
import {
|
||||||
|
orderListApi,
|
||||||
|
orderStatusApi,
|
||||||
|
orderLadingApi,
|
||||||
|
cartListApi,
|
||||||
|
} from "@/api/store.js";
|
||||||
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
import pay from "@/components/pay.vue";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const formData = ref({});
|
||||||
|
mitt.on("set-order-detail", (res) => {
|
||||||
|
formData.value = res;
|
||||||
|
});
|
||||||
|
|
||||||
|
const list = ref([]);
|
||||||
|
|
||||||
|
const payRef = ref(null);
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const total = ref(0);
|
||||||
|
const activeStore = ref(0);
|
||||||
|
const activeStoreList = ref(["商品信息", "订单详情"]);
|
||||||
|
|
||||||
|
const orderLadingSn = ref("");
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const orderLadingComfirm = (order_sn) => {
|
||||||
|
orderLadingSn.value = order_sn;
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
const orderLading = () => {
|
||||||
|
dialogVisible.value = false;
|
||||||
|
orderLadingApi({
|
||||||
|
order_sn: orderLadingSn.value,
|
||||||
|
}).then((res) => {
|
||||||
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
router.push({
|
||||||
|
name: "home",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const rePay = (row) => {
|
||||||
|
payRef.value.setRePay({
|
||||||
|
price: row.pay_price,
|
||||||
|
order_id: row.group_order_id,
|
||||||
|
});
|
||||||
|
payRef.value.drawer = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getOrderStatus = (id) => {
|
||||||
|
orderStatusApi({
|
||||||
|
order_sn: id,
|
||||||
|
})
|
||||||
|
.then((res) => {
|
||||||
|
if (res.data.paid == 1 || res.message == "支付成功") {
|
||||||
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "success",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
ElMessage({
|
||||||
|
message: res.message,
|
||||||
|
type: "error",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-order">
|
||||||
|
<div class="header-nav">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in activeStoreList"
|
||||||
|
:key="index"
|
||||||
|
class="nav-item"
|
||||||
|
:class="{
|
||||||
|
'nav-item-active': activeStore == index,
|
||||||
|
'nav-item-radius1': activeStore == index + 1,
|
||||||
|
'nav-item-radius2': activeStore == index - 1,
|
||||||
|
}"
|
||||||
|
@click="activeStore = index"
|
||||||
|
>
|
||||||
|
{{ item }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="nav-item"
|
||||||
|
:class="{
|
||||||
|
'nav-item-radius2': activeStore == activeStoreList.length - 1,
|
||||||
|
}"
|
||||||
|
style="flex: 1"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="detail" v-loading="loading">
|
||||||
|
<div class="table" v-if="formData.orderProduct && activeStore == 0">
|
||||||
|
<div style="font-size: 0.9rem">
|
||||||
|
共计
|
||||||
|
<span style="color: #ff4a00">{{ formData.total_num }}</span> 件商品
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
style="height: calc(100vh - 100px - 14rem)"
|
||||||
|
:data="formData.orderProduct"
|
||||||
|
>
|
||||||
|
<el-table-column prop="cart_info.product.store_name" label="商品信息">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div style="display: flex; align-items: center">
|
||||||
|
<el-image
|
||||||
|
style="height: 3rem; width: 3rem"
|
||||||
|
:src="
|
||||||
|
row.cart_info.productAttr.image ||
|
||||||
|
row.cart_info.product.image
|
||||||
|
"
|
||||||
|
></el-image>
|
||||||
|
<span style="margin-left: 0.5rem">{{
|
||||||
|
row.cart_info.product.store_name
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="cart_info.productAttr.price"
|
||||||
|
label="单价"
|
||||||
|
width="150"
|
||||||
|
/>
|
||||||
|
<el-table-column prop="product_num" label="数量" width="150" />
|
||||||
|
<el-table-column prop="total_price" label="总价" width="150" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="table" v-if="formData.orderProduct && activeStore == 1">
|
||||||
|
<div class="table-title">订单信息</div>
|
||||||
|
<div class="table-info">
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">创建时间:</div>
|
||||||
|
<div class="info-item-info">{{ formData.create_time }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">商品总数:</div>
|
||||||
|
<div class="info-item-info">{{ formData.total_num }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">商品总价:</div>
|
||||||
|
<div class="info-item-info">¥{{ formData.total_price }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">支付时间:</div>
|
||||||
|
<div class="info-item-info">{{ formData.pay_time }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">优惠抵扣:</div>
|
||||||
|
<div class="info-item-info">¥{{ formData.deduction_price }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">实际支付:</div>
|
||||||
|
<div class="info-item-info">¥{{ formData.pay_price }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">支付方式:</div>
|
||||||
|
<div class="info-item-info">
|
||||||
|
<span v-if="formData.pay_type == 11">微信收款</span>
|
||||||
|
<span v-if="formData.pay_type == 12">现金支付</span>
|
||||||
|
<span v-if="formData.pay_type == 0">余额支付</span>
|
||||||
|
<span v-if="formData.pay_type == 1">微信支付</span>
|
||||||
|
<span v-if="formData.pay_type == 9">商户余额支付</span>
|
||||||
|
<span v-if="formData.pay_type == 10">对公转账</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="table-title" v-if="formData.service_info">收银员信息</div>
|
||||||
|
<div
|
||||||
|
class="table-info"
|
||||||
|
v-if="formData.service_info"
|
||||||
|
style="flex-direction: column"
|
||||||
|
>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">头像:</div>
|
||||||
|
<div class="info-item-info">
|
||||||
|
<el-image
|
||||||
|
style="height: 4rem; width: 4rem; border-radius: 50%"
|
||||||
|
:src="formData.service_info.avatar"
|
||||||
|
></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">昵称:</div>
|
||||||
|
<div class="info-item-info">
|
||||||
|
{{ formData.service_info.nickname }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<div class="info-item-title">账号:</div>
|
||||||
|
<div class="info-item-info">
|
||||||
|
{{ formData.service_info.account }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="info">
|
||||||
|
<!-- <div class="ser">收银员: {{ formData.service_info.nickname }}</div> -->
|
||||||
|
<div class="price">
|
||||||
|
实付: <span>¥{{ formData.pay_price }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="handle" v-if="formData.verify_status==0">
|
||||||
|
<el-button class="btn" type="warning" @click="rePay(formData)"
|
||||||
|
>核销</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="handle" v-else>已支付</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pay ref="payRef" />
|
||||||
|
<el-dialog v-model="dialogVisible" title="提示" width="500">
|
||||||
|
<span
|
||||||
|
>提单前请清空购物车, 避免提单的商品与购物车商品混合,
|
||||||
|
请确保购物车内无数据后再进行提单</span
|
||||||
|
>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button v-if="cartCount > 0" @click="goHome">
|
||||||
|
前去清空购物车
|
||||||
|
</el-button>
|
||||||
|
<el-button v-else type="primary" @click="orderLading">
|
||||||
|
确认提单
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.my-order {
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
height: 100%;
|
||||||
|
flex: 1;
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
display: flex;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
#f5f5f5 50%,
|
||||||
|
#fff 50%
|
||||||
|
); /* 创建渐变背景 */
|
||||||
|
.nav-item {
|
||||||
|
height: 4rem;
|
||||||
|
width: 8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border-radius: 1rem 1rem 0 0;
|
||||||
|
}
|
||||||
|
.nav-item-active {
|
||||||
|
background-color: #fff;
|
||||||
|
position: relative;
|
||||||
|
transition: 300ms;
|
||||||
|
}
|
||||||
|
.nav-item-radius1 {
|
||||||
|
border-radius: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
.nav-item-radius2 {
|
||||||
|
border-radius: 0 0 0 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.detail {
|
||||||
|
height: calc(100vh - 100px - 4rem);
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.table {
|
||||||
|
padding: 1rem;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
|
||||||
|
.table-title {
|
||||||
|
font-weight: bold;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
.table-info {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
color: #777;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 33%;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 1rem;
|
||||||
|
.info-item-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
height: 6rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 -1px 10px #eee;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
.ser {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.price {
|
||||||
|
margin-right: 1rem;
|
||||||
|
span {
|
||||||
|
color: #ff4a00;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.handle {
|
||||||
|
.btn {
|
||||||
|
border-radius: 4rem;
|
||||||
|
padding: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,290 @@
|
||||||
|
<script setup>
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import {
|
||||||
|
verifierOrderListApi,
|
||||||
|
orderStatusApi,
|
||||||
|
orderLadingApi,
|
||||||
|
cartListApi,
|
||||||
|
} from "@/api/store.js";
|
||||||
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useRouter } from "vue-router";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const list = ref([]);
|
||||||
|
|
||||||
|
const tabPosition = ref(1); // 1-全部, 2-未支付
|
||||||
|
const changeTabPosition = (e) => {
|
||||||
|
where.value.page = 1;
|
||||||
|
loadEnd.value = false;
|
||||||
|
loading.value = false;
|
||||||
|
orderList.value = [];
|
||||||
|
getOrderList(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const payRef = ref(null);
|
||||||
|
|
||||||
|
const where = ref({
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
search_info: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const total = ref(0);
|
||||||
|
const activeStore = ref(0);
|
||||||
|
|
||||||
|
const loadEnd = ref(false);
|
||||||
|
const orderList = ref([]);
|
||||||
|
const getOrderList = (reload=false) => {
|
||||||
|
if(!where.value.search_info) return ElMessage.error("请输入订单编号");
|
||||||
|
if(reload) where.value.page = 1;
|
||||||
|
else if(loadEnd.value || loading.value) return;
|
||||||
|
loading.value = true;
|
||||||
|
if (tabPosition.value == 1) where.value.paid = null;
|
||||||
|
if (tabPosition.value == 2) where.value.paid = 0;
|
||||||
|
orderList.value = [];
|
||||||
|
mitt.emit("set-order-detail", {});
|
||||||
|
verifierOrderListApi(userStore.userInfo.service.mer_id, where.value.search_info).then((res) => {
|
||||||
|
orderList.value = [res.data];
|
||||||
|
mitt.emit("set-order-detail", orderList.value[0]);
|
||||||
|
// if(reload) orderList.value = res.data.list;
|
||||||
|
// else orderList.value = [...orderList.value, ...res.data.list];
|
||||||
|
// if(res.data.list.length < where.value.limit) loadEnd.value = true;
|
||||||
|
// else where.value.page++;
|
||||||
|
// activeStore.value = 0;
|
||||||
|
// mitt.emit("set-order-detail", orderList.value[0]);
|
||||||
|
// total.value = res.data.count;
|
||||||
|
loading.value = false;
|
||||||
|
}).catch(err=>{
|
||||||
|
loadEnd.value = true;
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const setForm = (item, index) => {
|
||||||
|
activeStore.value = index;
|
||||||
|
mitt.emit("set-order-detail", item);
|
||||||
|
}
|
||||||
|
|
||||||
|
const setCode = (code)=>{
|
||||||
|
where.value.search_info = code;
|
||||||
|
getOrderList(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
setCode,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-order">
|
||||||
|
<div class="header-nav">
|
||||||
|
<div class="nav-item">核销订单</div>
|
||||||
|
<div class="nav-item-clear">
|
||||||
|
<el-button type="primary" size="small">返回上一页</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-input">
|
||||||
|
<el-input v-model="where.search_info" placeholder="请输入订单编号" @keydown.enter="getOrderList(true)" clearable>
|
||||||
|
<template #append>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
style="
|
||||||
|
background-color: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 0 5px 5px 0;
|
||||||
|
"
|
||||||
|
@click="getOrderList(true)"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="order-list" v-loading="loading" v-infinite-scroll="getOrderList"
|
||||||
|
infinite-scroll-distance="300"
|
||||||
|
infinite-scroll-delay="500"
|
||||||
|
infinite-scroll-immediate="false"
|
||||||
|
style="overflow: auto">
|
||||||
|
<div class="item" :class="{'item-active': activeStore == index}" v-for="(item, index) in orderList" :key="index" @click="setForm(item, index)">
|
||||||
|
<div class="top">
|
||||||
|
<div class="sn" :class="item.pay_type===11 || item.pay_type===12 ? 'cahier' : 'cahier2'">单号: {{ item.order_sn }}</div>
|
||||||
|
<div class="create-time">{{ item.create_time }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="shop">
|
||||||
|
<div class="left" v-if="item.orderProduct">
|
||||||
|
<el-image
|
||||||
|
v-for="(shop, imgkey) in item.orderProduct.slice(0, 5)"
|
||||||
|
:key="imgkey"
|
||||||
|
:src="
|
||||||
|
shop.cart_info.productAttr.image || shop.cart_info.product.image
|
||||||
|
"
|
||||||
|
class="shop-img"
|
||||||
|
></el-image>
|
||||||
|
<div v-if="item.orderProduct.length == 1" class="shop-name">
|
||||||
|
{{ item.orderProduct[0].cart_info.product.store_name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="money">¥{{ item.pay_price }}</div>
|
||||||
|
<div class="count">共{{ item.total_num }}件商品</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="pay">
|
||||||
|
<div v-if="item.paid">
|
||||||
|
已支付
|
||||||
|
<span v-if="item.pay_type == 12">(现金支付)</span>
|
||||||
|
<span v-if="item.pay_type == 11">(微信支付)</span>
|
||||||
|
<span v-if="item.pay_type == 0">(余额支付)</span>
|
||||||
|
<span v-if="item.pay_type == 1">(微信支付)</span>
|
||||||
|
<span v-if="item.pay_type == 9">(商户余额支付)</span>
|
||||||
|
<span v-if="item.pay_type == 10">(对公转账)</span>
|
||||||
|
</div>
|
||||||
|
<div v-else style="color: #ff4a00;">未支付</div>
|
||||||
|
</div>
|
||||||
|
<div class="cashier" v-if="item.service_info">收银员: {{ item.service_info.nickname }}</div>
|
||||||
|
<div class="cashier" v-else>平台订单</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="loadEnd" class="load-end">没有更多了</div>
|
||||||
|
<div v-if="loading" class="load-end">加载中...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.my-order {
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 30rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.header-nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 1rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #ff4a00;
|
||||||
|
}
|
||||||
|
.nav-item-clear {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-input {
|
||||||
|
padding: 1rem;
|
||||||
|
padding-top: 0;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.order-list {
|
||||||
|
height: calc(100vh - 100px - 8.2rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
.item {
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
.sn {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.cahier{
|
||||||
|
&::before {
|
||||||
|
content: "收银";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.1rem 0.1rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
border: 1px solid #2ec479;
|
||||||
|
color: #2ec479;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cahier2{
|
||||||
|
&::before {
|
||||||
|
content: "平台";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.1rem 0.1rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
border: 1px solid #ff4a00;
|
||||||
|
color: #ff4a00;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.create-time {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.shop {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.right {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.money {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: #ff4a00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.count {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
height: 4.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.shop-img {
|
||||||
|
width: 3.5rem;
|
||||||
|
height: 3.5rem;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
}
|
||||||
|
.shop-name {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #333;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
/* 将文本限制为三行 */
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-active{
|
||||||
|
background-color: #efefef;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.load-end{
|
||||||
|
text-align: center;
|
||||||
|
padding: 1rem;
|
||||||
|
color: #333;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>, watch
|
|
@ -0,0 +1,115 @@
|
||||||
|
<script setup>
|
||||||
|
import order from "./component/order.vue";
|
||||||
|
import detail from "./component/detail.vue";
|
||||||
|
import padding from "@/components/padding.vue";
|
||||||
|
import { ref, nextTick, onMounted } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
|
||||||
|
const type = ref(1);
|
||||||
|
const code = ref("1372640275688400");
|
||||||
|
const inputRef = ref(null);
|
||||||
|
const orderRef = ref(null);
|
||||||
|
|
||||||
|
const handleEnterKey = () => {
|
||||||
|
if(code.value == "") return ElMessage.error("请输入订单编号");
|
||||||
|
type.value = 2;
|
||||||
|
nextTick(() => {
|
||||||
|
orderRef.value.setCode(code.value);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
inputRef.value.focus();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="my-card">
|
||||||
|
<div class="my-code" v-show="type == 1">
|
||||||
|
<h2>订单核销</h2>
|
||||||
|
<div class="box">
|
||||||
|
<input
|
||||||
|
ref="inputRef"
|
||||||
|
v-model="code"
|
||||||
|
placeholder=""
|
||||||
|
class="input"
|
||||||
|
@keyup.enter="handleEnterKey"
|
||||||
|
/>
|
||||||
|
<div class="btn" @click="handleEnterKey">查询</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<order v-show="type == 2" style="flex-shrink: 0" ref="orderRef" />
|
||||||
|
<padding v-show="type == 2" />
|
||||||
|
<detail v-show="type == 2" ref="detailRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.my-card {
|
||||||
|
display: flex;
|
||||||
|
.my-code {
|
||||||
|
height: 70%;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.box {
|
||||||
|
width: 38rem;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 4rem;
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
padding: 0 1rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 5px #1890ff; /* 可选:添加阴影效果以突出显示聚焦状态 */
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 5rem;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 0 4rem 4rem 0;
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 修改滚动条的样式 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px; /* 设置滚动条的宽度 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置滚动条的轨道样式 */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||||
|
/* margin: 20px 0; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置滚动条的滑块样式 */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #ccc; /* 设置滑块的背景色 */
|
||||||
|
border-radius: 5px; /* 设置滑块的圆角 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,10 +1,12 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from "vue";
|
import { ref, onMounted, onUnmounted } from "vue";
|
||||||
import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
|
import { cartListApi, cartDeleteApi, cartChangeApi } from "@/api/store.js";
|
||||||
import price from "./price.vue";
|
import price from "./price.vue";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const list = ref([]);
|
const list = ref([]);
|
||||||
const allPrice = ref(0); //商品总价
|
const allPrice = ref(0); //商品总价
|
||||||
|
const costPrice = ref(0); //商品原价
|
||||||
const discounts = ref(0); //优惠金额
|
const discounts = ref(0); //优惠金额
|
||||||
|
|
||||||
const clearAll = () => {
|
const clearAll = () => {
|
||||||
|
@ -32,6 +34,7 @@ const deleteShop = (arr) => {
|
||||||
|
|
||||||
const getList = () => {
|
const getList = () => {
|
||||||
allPrice.value = 0;
|
allPrice.value = 0;
|
||||||
|
costPrice.value = 0;
|
||||||
discounts.value = 0;
|
discounts.value = 0;
|
||||||
cartListApi({
|
cartListApi({
|
||||||
source: 300,
|
source: 300,
|
||||||
|
@ -41,6 +44,7 @@ const getList = () => {
|
||||||
list.value.forEach((item) => {
|
list.value.forEach((item) => {
|
||||||
allPrice.value += item.productAttr.price * item.cart_num;
|
allPrice.value += item.productAttr.price * item.cart_num;
|
||||||
});
|
});
|
||||||
|
costPrice.value = allPrice.value;
|
||||||
} else list.value = [];
|
} else list.value = [];
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -60,6 +64,7 @@ const changeCartNum = (val, old) => {
|
||||||
list.value.forEach((item) => {
|
list.value.forEach((item) => {
|
||||||
allPrice.value += item.productAttr.price * item.cart_num;
|
allPrice.value += item.productAttr.price * item.cart_num;
|
||||||
});
|
});
|
||||||
|
costPrice.value = allPrice.value;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -74,14 +79,14 @@ const editItem = (id, data)=>{
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeAllPrice = (price)=>{
|
const changeAllPrice = (price)=>{
|
||||||
discounts.value = allPrice.value - price;
|
discounts.value = costPrice.value - price;
|
||||||
allPrice.value = +price;
|
allPrice.value = +price;
|
||||||
}
|
}
|
||||||
|
|
||||||
const nowPrice = ref(0);
|
const nowPrice = ref(0);
|
||||||
const priceRef = ref(null);
|
const priceRef = ref(null);
|
||||||
const showPrice = ()=>{
|
const showPrice = ()=>{
|
||||||
priceRef.value.show(true, allPrice.value);
|
priceRef.value.show(true, costPrice.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
@ -91,6 +96,21 @@ defineExpose({
|
||||||
discounts,
|
discounts,
|
||||||
allPrice
|
allPrice
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const ainsert = () => {
|
||||||
|
if(priceRef.value.dialogVisible) priceRef.value.dialogVisible = false;
|
||||||
|
else showPrice();
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("insert", ainsert);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("insert", ainsert);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,13 +1,22 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, nextTick, onMounted, onUnmounted } from 'vue'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
|
||||||
|
const priceRef = ref(null)
|
||||||
const allPrice = ref(0)
|
const allPrice = ref(0)
|
||||||
const show = (e, p = 0)=>{
|
const show = (e, p = 0)=>{
|
||||||
|
priceInfo.value.nowPrice = "";
|
||||||
|
priceInfo.value.percentage = "";
|
||||||
dialogVisible.value = e;
|
dialogVisible.value = e;
|
||||||
allPrice.value = p;
|
allPrice.value = p;
|
||||||
|
nextTick(()=>{
|
||||||
|
setTimeout(()=>{
|
||||||
|
priceRef.value?.focus()
|
||||||
|
},150)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const priceInfo = ref({
|
const priceInfo = ref({
|
||||||
|
@ -24,14 +33,33 @@ const inputPercentage = (e)=>{
|
||||||
|
|
||||||
const emit = defineEmits(['submit'])
|
const emit = defineEmits(['submit'])
|
||||||
const submit = ()=>{
|
const submit = ()=>{
|
||||||
|
if(priceInfo.value.nowPrice<=0){
|
||||||
|
priceInfo.value.nowPrice = "";
|
||||||
|
priceInfo.value.percentage = "";
|
||||||
|
return ElMessage.error("金额不能小于0");
|
||||||
|
}
|
||||||
emit('submit', priceInfo.value.nowPrice);
|
emit('submit', priceInfo.value.nowPrice);
|
||||||
dialogVisible.value = false;
|
dialogVisible.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
show
|
show,
|
||||||
|
dialogVisible
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const aenter = () => {
|
||||||
|
if(!dialogVisible.value) return;
|
||||||
|
else submit();
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("enter", aenter);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("enter", aenter);
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -42,10 +70,10 @@ defineExpose({
|
||||||
>
|
>
|
||||||
<div class="price">
|
<div class="price">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<el-input style="flex: 3;margin: 10px;height: 2.5rem;" v-model="priceInfo.nowPrice" placeholder="请输入改价后的价格" @input="inputPrice">
|
<el-input ref="priceRef" style="flex: 3;margin: 10px;height: 2.5rem;" v-model="priceInfo.nowPrice" :min="0.01" type="number" placeholder="请输入改价后的价格" @input="inputPrice">
|
||||||
<template #suffix>元</template>
|
<template #suffix>元</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
<el-input style="flex: 2;margin: 10px;height: 2.5rem;" v-model="priceInfo.percentage" placeholder="请输入比例" @input="inputPercentage">
|
<el-input style="flex: 2;margin: 10px;height: 2.5rem;" v-model="priceInfo.percentage" :min="0.01" type="number" placeholder="请输入比例" @input="inputPercentage">
|
||||||
<template #suffix>%</template>
|
<template #suffix>%</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</div>
|
</div>
|
||||||
|
@ -76,4 +104,4 @@ defineExpose({
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>nextTick,
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import { getAttrValue } from "@/api/shop.js"
|
import { getAttrValue } from "@/api/shop.js"
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
|
||||||
|
@ -55,6 +56,36 @@ defineExpose({
|
||||||
setForm
|
setForm
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const aleft = () => {
|
||||||
|
if(!dialogVisible.value) return;
|
||||||
|
let index = form.value.attr.indexOf(active.value);
|
||||||
|
if(index>0) return changeActive(form.value.attr[index-1]);
|
||||||
|
};
|
||||||
|
const aright = () => {
|
||||||
|
if(!dialogVisible.value) return;
|
||||||
|
let index = form.value.attr.indexOf(active.value);
|
||||||
|
if(index<form.value.attr.length-1) return changeActive(form.value.attr[index+1]);
|
||||||
|
};
|
||||||
|
const aenter = ()=>{
|
||||||
|
if(!dialogVisible.value) return;
|
||||||
|
changeItem();
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("left", aleft);
|
||||||
|
mitt.on("right", aright);
|
||||||
|
mitt.on("enter", aenter);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("left", aleft);
|
||||||
|
mitt.off("right", aright);
|
||||||
|
mitt.off("enter", aenter);
|
||||||
|
});
|
||||||
|
|
||||||
|
const close = ()=>{
|
||||||
|
console.log('sss');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
storeList: {
|
storeList: {
|
||||||
|
@ -8,6 +9,8 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const codeRef = ref(null);
|
||||||
|
|
||||||
const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);
|
const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);
|
||||||
|
|
||||||
const bar_code = ref("");
|
const bar_code = ref("");
|
||||||
|
@ -29,20 +32,46 @@ const handleEnter = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
bar_code
|
bar_code,
|
||||||
})
|
});
|
||||||
|
|
||||||
|
const isfocus = ref(false);
|
||||||
|
const focus = () => {
|
||||||
|
isfocus.value = true;
|
||||||
|
};
|
||||||
|
const blur = () => {
|
||||||
|
isfocus.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const ashift = () => {
|
||||||
|
codeRef.value?.focus();
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
nextTick(() => {
|
||||||
|
codeRef.value?.focus();
|
||||||
|
focus();
|
||||||
|
});
|
||||||
|
mitt.on("shift", ashift);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("shift", ashift);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="my-order">
|
<div class="my-order">
|
||||||
<div class="header-nav">
|
<div class="header-nav" :class="{ 'input-focus': isfocus }">
|
||||||
<div class="nav-item-label">搜索</div>
|
<div class="nav-item-label">搜索</div>
|
||||||
<div class="nav-item-input">
|
<div class="nav-item-input">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="bar_code"
|
v-model="bar_code"
|
||||||
placeholder="搜索商品名称/ID/唯一码或点击聚焦扫码"
|
placeholder="搜索商品名称/ID/唯一码或点击聚焦扫码"
|
||||||
clearable
|
clearable
|
||||||
|
ref="codeRef"
|
||||||
|
@focus="focus"
|
||||||
|
@blur="blur"
|
||||||
@keyup.enter="handleEnter"
|
@keyup.enter="handleEnter"
|
||||||
@clear="handleEnter"
|
@clear="handleEnter"
|
||||||
/>
|
/>
|
||||||
|
@ -72,7 +101,7 @@ defineExpose({
|
||||||
<div class="shop-price">
|
<div class="shop-price">
|
||||||
¥<span>{{ item.price }}</span>
|
¥<span>{{ item.price }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="no-stock" v-if="item.stock==0">
|
<div class="no-stock" v-if="item.stock == 0">
|
||||||
<div>
|
<div>
|
||||||
<span>暂无</span>
|
<span>暂无</span>
|
||||||
<span>库存</span>
|
<span>库存</span>
|
||||||
|
@ -98,6 +127,7 @@ defineExpose({
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
border: 1px solid rgba($color: #000000, $alpha: 0);
|
||||||
|
|
||||||
.nav-item-label {
|
.nav-item-label {
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
|
@ -129,8 +159,12 @@ defineExpose({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-focus {
|
||||||
|
border: 1px solid #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
.shop-list {
|
.shop-list {
|
||||||
height: calc(100vh - 100px - 3rem);
|
height: calc(100vh - 100px - 3.1rem);
|
||||||
width: auto;
|
width: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -190,7 +224,7 @@ defineExpose({
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
div{
|
div {
|
||||||
background-color: #4e4e4e;
|
background-color: #4e4e4e;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
@ -206,3 +240,4 @@ defineExpose({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
, nextTick
|
||||||
|
|
|
@ -4,10 +4,12 @@ import shop from "./component/shop.vue";
|
||||||
import padding from "@/components/padding.vue";
|
import padding from "@/components/padding.vue";
|
||||||
import pupop from "./component/pupop.vue";
|
import pupop from "./component/pupop.vue";
|
||||||
import pay from "@/components/pay.vue";
|
import pay from "@/components/pay.vue";
|
||||||
import { ref, nextTick } from "vue";
|
import { ref, nextTick, onMounted, onUnmounted } from "vue";
|
||||||
import { cartCreateApi, orderCheckApi } from "@/api/store.js";
|
import { cartCreateApi, orderCheckApi } from "@/api/store.js";
|
||||||
import { storeListApi } from "@/api/shop.js";
|
import { storeListApi } from "@/api/shop.js";
|
||||||
import { useUserStore } from "@/store/user.js";
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import mitt from "@/utils/mitt.js";
|
||||||
|
|
||||||
const pupopRef = ref(null);
|
const pupopRef = ref(null);
|
||||||
const orderRef = ref(null);
|
const orderRef = ref(null);
|
||||||
|
@ -17,6 +19,7 @@ const payRef = ref(null);
|
||||||
const storeList = ref([]);
|
const storeList = ref([]);
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
const where = ref({
|
const where = ref({
|
||||||
page: 0,
|
page: 0,
|
||||||
|
@ -28,30 +31,34 @@ const getStoreList = (data) => {
|
||||||
...where.value,
|
...where.value,
|
||||||
...data,
|
...data,
|
||||||
};
|
};
|
||||||
if (data.bar_code && isAllDigits(data.bar_code)) {
|
if (data.bar_code) {
|
||||||
storeList.value = [];
|
storeList.value = [];
|
||||||
where.value.page = 1;
|
where.value.page = 1;
|
||||||
}
|
}
|
||||||
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
||||||
if(res.data?.list?.length < where.value.limit) loadEnd.value = true;
|
if (res.data?.list?.length < where.value.limit) loadEnd.value = true;
|
||||||
let list = res.data.list.map((item) => {
|
let list = res.data.list.map((item) => {
|
||||||
item.attr = Object.keys(item.sku);
|
item.attr = Object.keys(item.sku);
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
storeList.value = storeList.value.concat(list);
|
storeList.value = storeList.value.concat(list);
|
||||||
if (data.bar_code && storeList.value.length == 1 && isAllDigits(data.bar_code)) {
|
if (
|
||||||
shopRef.value.bar_code = ''
|
data.bar_code &&
|
||||||
cartAddInfo(storeList.value[0], storeList.value[0].attr[0]);
|
storeList.value.length == 1 &&
|
||||||
|
isAllDigits(data.bar_code)
|
||||||
|
) {
|
||||||
|
shopRef.value.bar_code = "";
|
||||||
|
changeItem(storeList.value[0], storeList.value[0].attr[0]);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadEnd = ref(false);
|
const loadEnd = ref(false);
|
||||||
const loadMore = (data)=>{
|
const loadMore = (data) => {
|
||||||
if(loadEnd.value) return;
|
if (loadEnd.value) return;
|
||||||
where.value.page++;
|
where.value.page++;
|
||||||
getStoreList(data);
|
getStoreList(data);
|
||||||
}
|
};
|
||||||
|
|
||||||
function isAllDigits(str) {
|
function isAllDigits(str) {
|
||||||
return /^\d+$/.test(str);
|
return /^\d+$/.test(str);
|
||||||
|
@ -76,22 +83,23 @@ const cartAddInfo = (item, change = "") => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeItem = (item, change) => {
|
const changeItem = (item, change) => {
|
||||||
if(!item.attr || item.attr.length == 0 || item.attr.length==1) return cartAddInfo(item, item.attr[0] ? item.attr[0] : '');
|
if (!item.attr || item.attr.length == 0 || item.attr.length == 1)
|
||||||
else if(change) return cartAddInfo(item, change);
|
return cartAddInfo(item, item.attr[0] ? item.attr[0] : "");
|
||||||
|
else if (change) return cartAddInfo(item, change);
|
||||||
else {
|
else {
|
||||||
pupopRef.value.setForm(item, 'add');
|
pupopRef.value.setForm(item, "add");
|
||||||
pupopRef.value.show(true);
|
pupopRef.value.show(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const editItem = (id, data) => {
|
const editItem = (id, data) => {
|
||||||
orderRef.value.editItem(id, data);
|
orderRef.value.editItem(id, data);
|
||||||
}
|
};
|
||||||
|
|
||||||
const editPupop = (item) => {
|
const editPupop = (item) => {
|
||||||
pupopRef.value.setForm(item, 'edit');
|
pupopRef.value.setForm(item, "edit");
|
||||||
pupopRef.value.show(true);
|
pupopRef.value.show(true);
|
||||||
}
|
};
|
||||||
|
|
||||||
// 结算
|
// 结算
|
||||||
const checkOut = () => {
|
const checkOut = () => {
|
||||||
|
@ -101,8 +109,8 @@ const checkOut = () => {
|
||||||
use_coupon: {},
|
use_coupon: {},
|
||||||
use_integral: false,
|
use_integral: false,
|
||||||
cart_id: cart_id,
|
cart_id: cart_id,
|
||||||
}
|
};
|
||||||
if(orderRef.value.discounts>0){
|
if (orderRef.value.discounts > 0) {
|
||||||
query.deduction_price = orderRef.value.discounts.toFixed(2);
|
query.deduction_price = orderRef.value.discounts.toFixed(2);
|
||||||
query.pay_type = "micropay";
|
query.pay_type = "micropay";
|
||||||
}
|
}
|
||||||
|
@ -121,15 +129,29 @@ const goPay = () => {
|
||||||
payRef.value.drawer = true;
|
payRef.value.drawer = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
const paySuccess = ()=>{
|
const paySuccess = () => {
|
||||||
orderRef.value.getList();
|
orderRef.value.getList();
|
||||||
}
|
};
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const aF9 = () => {
|
||||||
|
console.log("F9");
|
||||||
|
if (route.name != "home") return;
|
||||||
|
if (!payRef.value.drawer && orderRef.value.list.length > 0) goPay();
|
||||||
|
else payRef.value.beforeClose();
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
mitt.on("F9", aF9);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
mitt.off("F9", aF9);
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop"/>
|
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop" />
|
||||||
<padding />
|
<padding />
|
||||||
<shop
|
<shop
|
||||||
ref="shopRef"
|
ref="shopRef"
|
||||||
|
@ -139,8 +161,8 @@ const paySuccess = ()=>{
|
||||||
@changeItem="changeItem"
|
@changeItem="changeItem"
|
||||||
@loadMore="loadMore"
|
@loadMore="loadMore"
|
||||||
/>
|
/>
|
||||||
<pupop ref="pupopRef" @changeItem="changeItem" @editItem="editItem"/>
|
<pupop ref="pupopRef" @changeItem="changeItem" @editItem="editItem" />
|
||||||
<pay ref="payRef" @paySuccess="paySuccess"/>
|
<pay ref="payRef" @paySuccess="paySuccess" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -170,3 +192,4 @@ const paySuccess = ()=>{
|
||||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
, onMounted, onUnmounted
|
||||||
|
|
|
@ -103,7 +103,7 @@ const setForm = (item, index) => {
|
||||||
style="overflow: auto">
|
style="overflow: auto">
|
||||||
<div class="item" :class="{'item-active': activeStore == index}" v-for="(item, index) in orderList" :key="index" @click="setForm(item, index)">
|
<div class="item" :class="{'item-active': activeStore == index}" v-for="(item, index) in orderList" :key="index" @click="setForm(item, index)">
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="sn" :class="{'cahier': item.pay_type==11 || item.pay_type==12}">单号: {{ item.order_sn }}</div>
|
<div class="sn" :class="item.pay_type===11 || item.pay_type===12 ? 'cahier' : 'cahier2'">单号: {{ item.order_sn }}</div>
|
||||||
<div class="create-time">{{ item.create_time }}</div>
|
<div class="create-time">{{ item.create_time }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop">
|
<div class="shop">
|
||||||
|
@ -205,6 +205,18 @@ const setForm = (item, index) => {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.cahier2{
|
||||||
|
&::before {
|
||||||
|
content: "平台";
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.1rem 0.1rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
border: 1px solid #ff4a00;
|
||||||
|
color: #ff4a00;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.create-time {
|
.create-time {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue