wayne
/
evshop_admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

寫入讀卡機

Browse Source
dev
Wayne 3 years ago
parent df1b5e94f3
commit 3c7546e002
9 changed files with 1017 additions and 95 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape View File

@ -1,3 +1,5 @@
VITE_APP_BASE_URL = 'https://shop.h888.fun/'
VITE_APP_IMG_URL = 'https://shop.h888.fun/' VITE_APP_IMG_URL = 'https://shop.h888.fun/'
VITE_APP_API_URL = 'https://shop.h888.fun/adminapi/v1' VITE_APP_API_URL = 'https://shop.h888.fun/adminapi/v1'

2
.env.h888
Unescape View File

@ -1,3 +1,5 @@
VITE_APP_BASE_URL = 'https://shop.h888.fun/'
VITE_APP_IMG_URL = 'https://shop.h888.fun/' VITE_APP_IMG_URL = 'https://shop.h888.fun/'
VITE_APP_API_URL = 'https://shop.h888.fun/adminapi/v1' VITE_APP_API_URL = 'https://shop.h888.fun/adminapi/v1'

2
.env.production
Unescape View File

@ -1,3 +1,5 @@
VITE_APP_BASE_URL = 'https://shop.slash1000.com/'
VITE_APP_IMG_URL = 'https://shop.slash1000.com/' VITE_APP_IMG_URL = 'https://shop.slash1000.com/'
VITE_APP_API_URL = 'https://shop.slash1000.com/adminapi/v1' VITE_APP_API_URL = 'https://shop.slash1000.com/adminapi/v1'

2
.env.slash
Unescape View File

@ -1,3 +1,5 @@
VITE_APP_BASE_URL = 'https://shop.slash1000.com/'
VITE_APP_IMG_URL = 'https://shop.slash1000.com/' VITE_APP_IMG_URL = 'https://shop.slash1000.com/'
VITE_APP_API_URL = 'https://shop.slash1000.com/adminapi/v1' VITE_APP_API_URL = 'https://shop.slash1000.com/adminapi/v1'

814
src/pages/order/Add/index.vue
Unescape View File

@ -0,0 +1,814 @@
<template>
<div class="main">
<!-- Breadcrumb: Start -->
<div class="breadcrumb-section">
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">電商管理中心</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">新增訂單</a></el-breadcrumb-item>
</el-breadcrumb>
</div>
<div>
<el-button type="danger" size="small" @click="$router.push('/list')">訂單列表</el-button>
</div>
</div>
<!-- Breadcrumb: End -->
<hr />
<el-card class="box-card">
<template #header>
<div class="card-header goods-block">
<div>商品信息</div>
<div><el-button type="primary" @click="handleShowDrawer">添加商品</el-button></div>
</div>
</template>
<div class="card-body">
<el-table :data="orderInfo.goods_item" :summary-method="getSummaries" show-summary style="width: 100%">
<el-table-column prop="goods_name" label="商品名稱" />
<el-table-column prop="goods_sn" label="商品編號" />
<el-table-column prop="product_sn" label="貨品號" />
<el-table-column prop="goods_price" label="商品價格" />
<el-table-column prop="goods_number" label="購買數量" />
<el-table-column prop="goods_attr" label="屬性" />
<el-table-column prop="storage" label="庫存" />
<el-table-column prop="subtotal" label="小計" />
</el-table>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>基本信息</span>
<!-- <el-button class="button" text>編輯</el-button> -->
</div>
</template>
<div class="card-body">
<table>
<tr>
<td width="15%">
<div align="right"><strong>購貨人：</strong></div>
</td>
<td width="35%">
<el-input></el-input>
</td>
<td width="15%">
<div align="right"><strong>下單時間：</strong></div>
</td>
<td width="35%">
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div align="right"><strong>支付方式：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
<td>
<div align="right"><strong>付款時間：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div align="right"><strong>配送方式：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
<td>
<div align="right"><strong>發貨時間：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div align="right"><strong>發貨單號：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
<!-- <td>
<div align="right"><strong>訂單來源：</strong></div>
</td>
<td></td> -->
</tr>
</table>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>收貨人信息</span>
<!-- <el-button class="button" text>編輯</el-button> -->
</div>
</template>
<div class="card-body">
<template v-if="orderInfo.shipping_id === 2">
<table>
<tr>
<td width="15%">
<div align="right"><strong>超商類型：</strong></div>
</td>
<td colspan="3">{{ logisticType[orderInfo.address.type] }}</td>
</tr>
<tr>
<td width="15%">
<div align="right"><strong>超商名稱：</strong></div>
</td>
<td width="35%">{{ orderInfo.address.store_name }}</td>
<td width="15%">
<div align="right"><strong>超商代碼：</strong></div>
</td>
<td width="35%">{{ orderInfo.address.store_id }}</td>
</tr>
<tr>
<td width="15%">
<div align="right"><strong>超商電話：</strong></div>
</td>
<td width="35%">{{ orderInfo.address.store_tel }}</td>
<td width="15%">
<div align="right"><strong>超商地址：</strong></div>
</td>
<td width="35%">{{ orderInfo.address.store_address }}</td>
</tr>
<tr>
<td>
<div align="right"><strong>收貨人姓名：</strong></div>
</td>
<td>
{{ orderInfo.consignee }}
</td>
<td>
<div align="right"><strong>手機：</strong></div>
</td>
<td>
{{ orderInfo.mobile }}
</td>
</tr>
</table>
</template>
<template v-else>
<table>
<tr>
<td width="15%">
<div align="right"><strong>收貨人：</strong></div>
</td>
<td width="35%">
<el-input></el-input>
</td>
<td width="15%">
<div align="right"><strong>電子郵件：</strong></div>
</td>
<td width="35%">
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div align="right"><strong>地址：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
<td>
<div align="right"><strong>電話：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
<!-- <tr>
<td>
<div align="right"><strong>標誌性建築：</strong></div>
</td>
<td></td>
<td>
<div align="right"><strong>最佳送貨時間：</strong></div>
</td>
<td></td>
</tr> -->
</table>
</template>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>其他信息</span>
<!-- <el-button class="button" text>編輯</el-button> -->
</div>
</template>
<div class="card-body">
<table>
<!-- <tr>
<td width="15%">
<div align="right"><strong>發票類型：</strong></div>
</td>
<td width="35%"></td>
<td width="15%">&nbsp;</td>
<td width="35%">&nbsp;</td>
</tr> -->
<!-- <tr>
<td>
<div align="right"><strong>發票抬頭：</strong></div>
</td>
<td></td>
<td>
<div align="right"><strong>發票內容：</strong></div>
</td>
<td></td>
</tr> -->
<tr>
<td>
<div><strong>客戶給商家的留言：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div><strong>缺貨處理：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
<tr>
<td>
<div><strong>商家給客戶的留言：</strong></div>
</td>
<td>
<el-input></el-input>
</td>
</tr>
</table>
</div>
</el-card>
<el-card class="box-card">
<template #header>
<div class="card-header">
<span>費用信息</span>
<!-- <el-button class="button" text>編輯</el-button> -->
</div>
</template>
<div class="card-body">
<table>
<tr>
<td>
<div align="right">
<strong>
商品總金額：NT${{ orderInfo.goods_amount }} - 折扣：NT${{
orderInfo.discount
}}
+ 配送費用：NT${{ orderInfo.shipping_fee }} + 支付費用：NT${{
orderInfo.pay_fee
}}
</strong>
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
<strong>
= 訂單總金額：NT${{
parseInt(orderInfo.goods_amount) -
parseInt(orderInfo.discount) +
parseInt(orderInfo.shipping_fee) +
parseInt(orderInfo.pay_fee)
}}
</strong>
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
<strong>
- 已付款金額：NT$0 - 使用餘額： NT$0 - 使用積分： NT$0 -
使用紅包： NT$0
</strong>
</div>
</td>
</tr>
<tr>
<td>
<div align="right">
<strong>
= 應付款金額：NT${{
parseInt(orderInfo.goods_amount) -
parseInt(orderInfo.discount) +
parseInt(orderInfo.shipping_fee) +
parseInt(orderInfo.pay_fee)
}}
</strong>
</div>
</td>
</tr>
</table>
</div>
</el-card>
<el-card class="box-card">
<div class="card-body">
<div class="action">
<el-button type="primary">送出</el-button>
<el-button type="primary">返回</el-button>
</div>
</div>
</el-card>
</div>
<GoodsSelecter
v-model:visible="showDraw"
/>
</template>
<script setup>
import useClipboard from "vue-clipboard3";
import QrcodeVue from "qrcode.vue";
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import GoodsSelecter from '../components/GoodsSelecter.vue';
import defaultImg from "@/assets/images/logo.png";
const route = useRoute();
const router = useRouter();
const order_id = route.query.order_id;
const showDraw = ref(false)
const logisticType = {
1: "711",
2: "全家",
3: "萊爾富",
4: "OK",
}
const orderInfo = ref({
address: {},
});
onMounted(async () => {
});
const handleShowDrawer = () => {
showDraw.value = true
}
const cardImg = computed(() => {
return orderInfo.value.card_image || defaultImg;
});
const handleGetOrder = (order_id) => {
};
const handlePrint = () => {
};
const getSummaries = (param) => {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "合計";
return;
}
//index 在 1-6之間 不顯示
if (index > 0 && index < 7) {
sums[index] = "";
return;
}
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => Number.isNaN(value))) {
sums[index] = `$ ${values.reduce((prev, curr) => {
const value = Number(curr);
if (!Number.isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0)}`;
} else {
sums[index] = "N/A";
}
});
return sums;
};
const dialogPrintCardVisible = ref(false);
const dialogPrintVisible = ref(false);
const dialogPrintAddrVisible = ref(false);
const handleOp = async (op) => {
if (op === "prepare") {
// if (op === "prepare") {
// router.push({ path: "/printcard", query: { order_sn: orderInfo.value.order_sn } });
// openPrintCard(orderInfo.value.order_sn);
dialogPrintCardVisible.value = true;
// }
let res = await updateOrderAction({
op,
order_id: orderInfo.value.order_id,
action_note: orderInfo.value.action_note,
});
if (res.code == 200) {
if (op === "remove") {
router.push({ path: "/list" });
} else {
getOrder(order_id);
}
}
} else {
console.log('op', op)
ElMessageBox.confirm("確認" + opName[op] + "?", "訂單操作", {})
.then(async () => {
let res = await updateOrderAction({
op,
order_id: orderInfo.value.order_id,
action_note: orderInfo.value.action_note,
});
if (res.code == 200) {
if (op === "remove") {
router.push({ path: "/list" });
} else {
getOrder(order_id);
}
}
})
.catch(() => {
return;
});
}
return;
};
const showCardType = ref(0);
const activeName = ref("front");
const cardInfo = ref({
cname: "",
ename: "",
images: "",
user_id: "",
});
const size = ref(300);
const handleOpenPrintCard = async () => {
changePrintPage("1022px 652px");
let res = await getCardInfo(orderInfo.value.order_sn);
if (res.code === 200) {
cardInfo.value = res.data;
}
};
const handleClick = (tab, event) => {
if (tab.props.name === "front") {
showCardType.value = 0;
} else {
showCardType.value = 1;
}
};
const printObj = ref({
id: "printMe",
popTitle: "card print",
beforeOpenCallback(vue) { },
clickMounted() {
size.value = 300;
},
openCallback(vue) {
// vue.printLoading = false;
size.value = 300;
},
closeCallback(vue) {
// size.value = 100;
},
});
const handleFinish = async () => {
let res = await updateOrderAction({
op: "printcard",
order_id: orderInfo.value.order_id,
action_note: '完成配貨',
});
if (res.code === 200) {
dialogPrintCardVisible.value = false;
getOrder(order_id);
}
};
//印標籤
const printUrl = ref("");
const printIframe = ref(null);
const printLabel = async () => {
switch (orderInfo.value.shipping_id) {
case 1:
changePrintPage("10cm 15cm landscape");
//列印住址標籤
dialogPrintAddrVisible.value = true;
break;
case 2:
if (orderInfo.value.address.type !== "2") {
let iWidth = 800; //視窗的寬度;
let iHeight = 600; //視窗的高度;
let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //視窗的垂直位置;
let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //視窗的水平位置;
window.open(
`https://shop.slash1000.com/adminapi/v1/order/printlabel?order_id=${order_id}`,
"Print Label",
"height=" +
iHeight +
",,innerHeight=" +
iHeight +
",width=" +
iWidth +
",innerWidth=" +
iWidth +
",top=" +
iTop +
",left=" +
iLeft +
",status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no"
);
} else {
changePrintPage("10cm 15cm");
//列印超商標籤
dialogPrintVisible.value = true;
printUrl.value = `https://shop.slash1000.com/adminapi/v1/order/printlabel?order_id=${order_id}`;
}
break;
}
return;
};
const handleClosePrint = () => {
changePrintPage("1022px 652px");
dialogPrintVisible.value = false;
};
const handleClosePrintAddr = () => {
changePrintPage("1022px 652px");
dialogPrintAddrVisible.value = false;
};
const changePrintPage = (page) => {
console.log("change pagesize");
var css = (css = `@page { size: ${page}; margin: 0; }`);
var head = document.head || document.getElementsByTagName("head")[0],
style = document.createElement("style");
style.media = "print";
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
};
const handleNfcCard = async () => {
const { toClipboard } = useClipboard();
try {
await toClipboard(cardInfo.value.nfcurl);
return ElMessage.success("複製成功");
} catch (e) {
return ElMessage.error("複製失敗");
}
};
</script>
<style lang="less" scoped>
.top-action {
text-align: center;
}
.box-card {
margin-bottom: 10px;
}
.el-card {}
table {
width: 100%;
}
.nav {
display: flex;
.nav-item {
margin-right: 10px;
// border: 1px solid #666;
}
}
.goods-block {
display: flex;
justify-content: space-between;
height: 30px;
div:nth-child(n) {
line-height: 30px;
}
}
.card-preview {
width: 345px;
height: 220px;
// border: 1px solid #000;
margin: 0px;
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.front {
width: 100%;
height: 100%;
position: absolute;
.front-logo {
position: absolute;
width: 100px;
height: 100px;
top: 60px;
left: 20px;
}
.front-cname {
position: absolute;
top: 70px;
left: 180px;
font-size: 20px;
letter-spacing: 5px;
}
.front-ename {
position: absolute;
top: 110px;
left: 180px;
font-size: 12px;
letter-spacing: 5px;
}
}
.back {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
.nfcimg {
width: 100px;
height: 100px;
canvas {
width: 100px !important;
height: 100px !important;
}
}
}
}
#printAddr {
width: 600px;
height: 400px;
.addr {
.address {
font-size: 20px;
font-weight: bold;
line-height: 100px;
}
.name {
font-size: 20px;
font-weight: bold;
line-height: 100px;
padding-left: 100px;
}
.sender {
text-align: right;
font-size: 20px;
line-height: 100px;
}
}
}
@media print {
#printMe {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
}
.card-preview {
width: 1021px;
height: 651px;
// border: 1px solid #000;
margin: 0px;
position: relative;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.front {
width: 100%;
height: 100%;
position: absolute;
.front-logo {
position: absolute;
width: 300px;
height: 300px;
top: 150px;
left: 80px;
}
.front-cname {
position: absolute;
top: 210px;
left: 530px;
font-size: 72px;
letter-spacing: 5px;
}
.front-ename {
position: absolute;
top: 320px;
left: 530px;
font-size: 40px;
letter-spacing: 7px;
}
}
.back {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
.nfcimg {
width: 300px;
height: 300px;
}
}
}
#printIframe {}
#printAddr {
width: 1020px;
height: 649px;
}
}
.action {
margin-top: 10px;
text-align: center;
}
.el-drawer__header {
margin-bottom: 0 !important;
}</style>

206
src/pages/order/Info/index.vue
Unescape View File

@ -4,41 +4,22 @@
<div class="breadcrumb-section"> <div class="breadcrumb-section">
<div> <div>
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }" <el-breadcrumb-item :to="{ path: '/' }">電商管理中心</el-breadcrumb-item>
>電商管理中心</el-breadcrumb-item
>
<el-breadcrumb-item><a href="/">訂單信息</a></el-breadcrumb-item> <el-breadcrumb-item><a href="/">訂單信息</a></el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
</div> </div>
<div> <div>
<el-button type="danger" size="small" @click="$router.push('/list')" <el-button type="danger" size="small" @click="$router.push('/list')">訂單列表</el-button>
>訂單列表</el-button
>
</div> </div>
</div> </div>
<!-- Breadcrumb: End --> <!-- Breadcrumb: End -->
<hr /> <hr />
<el-card class="top-action"> <el-card class="top-action">
<el-button <el-button type="primary" class="default-button-style" @click="handleGetOrder(orderInfo.prev)"
type="primary" :disabled="!orderInfo.prev">前一個訂單</el-button>
class="default-button-style" <el-button type="primary" class="default-button-style" @click="handleGetOrder(orderInfo.next)"
@click="handleGetOrder(orderInfo.prev)" :disabled="!orderInfo.next">後一個訂單</el-button>
:disabled="!orderInfo.prev" <el-button type="primary" class="default-button-style" @click="handlePrint">打印訂單</el-button>
>前一個訂單</el-button
>
<el-button
type="primary"
class="default-button-style"
@click="handleGetOrder(orderInfo.next)"
:disabled="!orderInfo.next"
>後一個訂單</el-button
>
<el-button
type="primary"
class="default-button-style"
@click="handlePrint"
>打印訂單</el-button
>
</el-card> </el-card>
<el-card class="box-card"> <el-card class="box-card">
<template #header> <template #header>
@ -48,12 +29,7 @@
</div> </div>
</template> </template>
<div class="card-body"> <div class="card-body">
<el-table <el-table :data="orderInfo.goods_item" :summary-method="getSummaries" show-summary style="width: 100%">
:data="orderInfo.goods_item"
:summary-method="getSummaries"
show-summary
style="width: 100%"
>
<el-table-column prop="goods_name" label="商品名稱" /> <el-table-column prop="goods_name" label="商品名稱" />
<el-table-column prop="goods_sn" label="商品編號" /> <el-table-column prop="goods_sn" label="商品編號" />
<el-table-column prop="product_sn" label="貨品號" /> <el-table-column prop="product_sn" label="貨品號" />
@ -376,11 +352,7 @@
<div align="right"><strong>操作備註：</strong></div> <div align="right"><strong>操作備註：</strong></div>
</td> </td>
<td width="75%"> <td width="75%">
<el-input <el-input v-model="orderInfo.action_note" :rows="2" type="textarea" />
v-model="orderInfo.action_note"
:rows="2"
type="textarea"
/>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -388,13 +360,8 @@
<div align="right"><strong>當前可執行操作：</strong></div> <div align="right"><strong>當前可執行操作：</strong></div>
</td> </td>
<td> <td>
<el-button <el-button type="danger" v-for="(v, i) in orderInfo.op_list" :key="i" @click="handleOp(v)">{{ opName[v]
type="danger" }}</el-button>
v-for="(v, i) in orderInfo.op_list"
:key="i"
@click="handleOp(v)"
>{{ opName[v] }}</el-button
>
</td> </td>
</tr> </tr>
</table> </table>
@ -419,11 +386,10 @@
</div> </div>
</el-card> </el-card>
</div> </div>
<el-dialog <el-dialog v-model="dialogPrintCardVisible" @open="handleOpenPrintCard" title="配貨">
v-model="dialogPrintCardVisible" <div class="dialog-message">
@open="handleOpenPrintCard" {{ dialogMessage }}
title="配貨" </div>
>
<div> <div>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick"> <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="正面" name="front" /> <el-tab-pane label="正面" name="front" />
@ -436,7 +402,7 @@
<!-- <img class="front-bg" src="@/assets/images/card/front.png"> --> <!-- <img class="front-bg" src="@/assets/images/card/front.png"> -->
<div class="front-cname">{{ cardInfo.cname }}</div> <div class="front-cname">{{ cardInfo.cname }}</div>
<div class="front-ename">{{ cardInfo.ename }}</div> <div class="front-ename">{{ cardInfo.ename }}</div>
<img class="front-logo" :src="cardInfo.image||cardImg" /> <img class="front-logo" :src="cardInfo.image || cardImg" />
</div> </div>
</div> </div>
<div class="card-preview" v-show="showCardType === 1"> <div class="card-preview" v-show="showCardType === 1">
@ -453,29 +419,16 @@
<el-button type="primary" v-print="printObj">列印卡片</el-button> <el-button type="primary" v-print="printObj">列印卡片</el-button>
<el-button type="primary" @click="printLabel">列印標籤</el-button> <el-button type="primary" @click="printLabel">列印標籤</el-button>
<el-button type="primary" @click="handleNfcCard">複製Nfc網址</el-button> <el-button type="primary" @click="handleNfcCard">複製Nfc網址</el-button>
<el-button type="primary" @click="makeNfcCard">製卡</el-button>
<el-button type="success" @click="handleFinish">完成</el-button> <el-button type="success" @click="handleFinish">完成</el-button>
</div> </div>
</el-dialog> </el-dialog>
<el-dialog <el-dialog v-model="dialogPrintVisible" @close="handleClosePrint" title="列印超商標籤">
v-model="dialogPrintVisible" <iframe id="printIframe" ref="printIframe" :src="printUrl" style="width: 340px; height: 520px" scrolling="no">
@close="handleClosePrint"
title="列印超商標籤"
>
<iframe
id="printIframe"
ref="printIframe"
:src="printUrl"
style="width: 340px; height: 520px"
scrolling="no"
>
</iframe> </iframe>
<el-button type="primary" v-print="'#printIframe'">列印</el-button> <el-button type="primary" v-print="'#printIframe'">列印</el-button>
</el-dialog> </el-dialog>
<el-dialog <el-dialog v-model="dialogPrintAddrVisible" @close="handleClosePrintAddr" title="列印住址標籤">
v-model="dialogPrintAddrVisible"
@close="handleClosePrintAddr"
title="列印住址標籤"
>
<div id="printAddr"> <div id="printAddr">
<div class="addr"> <div class="addr">
<div class="address"> <div class="address">
@ -505,6 +458,7 @@ import { getCardInfo, updateOrder } from "@/api/order";
import { getOrderInfo, getOrderAction, updateOrderAction } from "@/api/order"; import { getOrderInfo, getOrderAction, updateOrderAction } from "@/api/order";
import defaultImg from "@/assets/images/logo.png"; import defaultImg from "@/assets/images/logo.png";
import { ElMessage } from "element-plus";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -540,6 +494,8 @@ const orderInfo = ref({
address: {}, address: {},
}); });
const dialogMessage = ref("");
const orderAction = ref([]); const orderAction = ref([]);
onMounted(async () => { onMounted(async () => {
@ -633,9 +589,9 @@ const dialogPrintAddrVisible = ref(false);
const handleOp = async (op) => { const handleOp = async (op) => {
if (op === "prepare") { if (op === "prepare") {
// if (op === "prepare") { // if (op === "prepare") {
// router.push({ path: "/printcard", query: { order_sn: orderInfo.value.order_sn } }); // router.push({ path: "/printcard", query: { order_sn: orderInfo.value.order_sn } });
// openPrintCard(orderInfo.value.order_sn); // openPrintCard(orderInfo.value.order_sn);
dialogPrintCardVisible.value = true; dialogPrintCardVisible.value = true;
// } // }
let res = await updateOrderAction({ let res = await updateOrderAction({
@ -651,7 +607,7 @@ const handleOp = async (op) => {
} }
} }
} else { } else {
console.log('op',op) console.log('op', op)
ElMessageBox.confirm("確認" + opName[op] + "?", "訂單操作", {}) ElMessageBox.confirm("確認" + opName[op] + "?", "訂單操作", {})
.then(async () => { .then(async () => {
let res = await updateOrderAction({ let res = await updateOrderAction({
@ -706,7 +662,7 @@ const handleClick = (tab, event) => {
const printObj = ref({ const printObj = ref({
id: "printMe", id: "printMe",
popTitle: "card print", popTitle: "card print",
beforeOpenCallback(vue) {}, beforeOpenCallback(vue) { },
clickMounted() { clickMounted() {
size.value = 300; size.value = 300;
}, },
@ -752,27 +708,28 @@ const printLabel = async () => {
let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //視窗的垂直位置; let iTop = (window.screen.availHeight - 30 - iHeight) / 2; //視窗的垂直位置;
let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //視窗的水平位置; let iLeft = (window.screen.availWidth - 10 - iWidth) / 2; //視窗的水平位置;
window.open( window.open(
`https://shop.slash1000.com/adminapi/v1/order/printlabel?order_id=${order_id}`, `${import.meta.env.VITE_APP_BASE_URL}adminapi/v1/order/printlabel?order_id=${order_id}`,
"Print Label", "Print Label",
"height=" + "height=" +
iHeight + iHeight +
",,innerHeight=" + ",,innerHeight=" +
iHeight + iHeight +
",width=" + ",width=" +
iWidth + iWidth +
",innerWidth=" + ",innerWidth=" +
iWidth + iWidth +
",top=" + ",top=" +
iTop + iTop +
",left=" + ",left=" +
iLeft + iLeft +
",status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no" ",status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no"
); );
} else { } else {
changePrintPage("10cm 15cm"); changePrintPage("10cm 15cm");
//列印超商標籤 //列印超商標籤
dialogPrintVisible.value = true; dialogPrintVisible.value = true;
printUrl.value = `https://shop.slash1000.com/adminapi/v1/order/printlabel?order_id=${order_id}`; printUrl.value = `${import.meta.env.VITE_APP_BASE_URL}adminapi/v1/order/printlabel?order_id=${order_id}`;
} }
break; break;
} }
@ -805,13 +762,55 @@ const changePrintPage = (page) => {
head.appendChild(style); head.appendChild(style);
}; };
const makeNfcCard = async () => {
let nfcReaderUrl = 'http://localhost:8088'
const data = new URLSearchParams();
//將cardInfo去除掉https://
let cardInfoUrl = cardInfo.value.nfcurl.replace('https://', '')
data.append('data', cardInfoUrl);
try {
let res = await fetch(nfcReaderUrl + '/writenfc', {
method: 'POST',
body: data,
})
res = await res.json()
if (res.code !== 200) {
dialogMessage.value = res.error
setTimeout(() => {
dialogMessage.value = ""
}, 3000);
return
}
dialogMessage.value = "製卡成功"
setTimeout(() => {
dialogMessage.value = ""
}, 3000);
return
} catch (e) {
dialogMessage.value = "請確認NFCCard程式是否開啟"
setTimeout(() => {
dialogMessage.value = ""
}, 3000);
}
}
const handleNfcCard = async () => { const handleNfcCard = async () => {
const { toClipboard } = useClipboard(); const { toClipboard } = useClipboard();
try { try {
await toClipboard(cardInfo.value.nfcurl); await toClipboard(cardInfo.value.nfcurl);
return ElMessage.success("複製成功"); dialogMessage.value = "複製成功"
setTimeout(() => {
dialogMessage.value = ""
}, 2000);
return;
} catch (e) { } catch (e) {
return ElMessage.error("複製失敗"); dialogMessage.value = "複製失敗"
setTimeout(() => {
dialogMessage.value = ""
}, 2000);
} }
}; };
</script> </script>
@ -825,8 +824,7 @@ const handleNfcCard = async () => {
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-card { .el-card {}
}
table { table {
width: 100%; width: 100%;
@ -834,6 +832,7 @@ table {
.nav { .nav {
display: flex; display: flex;
.nav-item { .nav-item {
margin-right: 10px; margin-right: 10px;
// border: 1px solid #666; // border: 1px solid #666;
@ -846,6 +845,7 @@ table {
// border: 1px solid #000; // border: 1px solid #000;
margin: 0px; margin: 0px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -853,10 +853,12 @@ table {
top: 0; top: 0;
left: 0; left: 0;
} }
.front { .front {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
.front-logo { .front-logo {
position: absolute; position: absolute;
width: 100px; width: 100px;
@ -889,9 +891,11 @@ table {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.nfcimg { .nfcimg {
width: 100px; width: 100px;
height: 100px; height: 100px;
canvas { canvas {
width: 100px !important; width: 100px !important;
height: 100px !important; height: 100px !important;
@ -903,18 +907,21 @@ table {
#printAddr { #printAddr {
width: 600px; width: 600px;
height: 400px; height: 400px;
.addr { .addr {
.address { .address {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 100px; line-height: 100px;
} }
.name { .name {
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
line-height: 100px; line-height: 100px;
padding-left: 100px; padding-left: 100px;
} }
.sender { .sender {
text-align: right; text-align: right;
font-size: 20px; font-size: 20px;
@ -935,6 +942,7 @@ table {
// border: 1px solid #000; // border: 1px solid #000;
margin: 0px; margin: 0px;
position: relative; position: relative;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -942,10 +950,12 @@ table {
top: 0; top: 0;
left: 0; left: 0;
} }
.front { .front {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
.front-logo { .front-logo {
position: absolute; position: absolute;
width: 300px; width: 300px;
@ -978,6 +988,7 @@ table {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.nfcimg { .nfcimg {
width: 300px; width: 300px;
height: 300px; height: 300px;
@ -985,8 +996,7 @@ table {
} }
} }
#printIframe { #printIframe {}
}
#printAddr { #printAddr {
width: 1020px; width: 1020px;
@ -997,4 +1007,16 @@ table {
.action { .action {
margin-top: 10px; margin-top: 10px;
} }
.message-override {
z-index: 9999 !important;
}
.dialog-message {
padding: 10px 5px;
margin-top: -40px;
margin-bottom: 10px;
color: #FF7575;
border: 1px solid #ccc;
}
</style> </style>

72
src/pages/order/components/GoodsSelecter.vue
Unescape View File

@ -0,0 +1,72 @@
<template>
<el-drawer v-model="drawer" :destroy-on-close="true" :direction="direction" size="50%" @close="handleClose">
<template #header>
<h4>商品選擇</h4>
</template>
<template #default>
<div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="User" name="first" />
<el-tab-pane label="Config" name="second" />
<el-tab-pane label="Role" name="third" />
<el-tab-pane label="Task" name="fourth" />
</el-tabs>
<div>
--- {{ drawer }} ---
</div>
</div>
</template>
<template #footer>
<div style="flex: auto">
<el-button @click="cancelClick">cancel</el-button>
<el-button type="primary" @click="confirmClick">confirm</el-button>
</div>
</template>
</el-drawer>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
});
console.log('prop', props.visible)
const emit = defineEmits(["update:visible"]);
const loading = ref(false);
const direction = ref("rtl");
const drawer = computed({
get: () => {
return props.visible
}, set: (value) => {
emit("update:visible",value)
return value
}
})
const activeName = ref('')
const handleClose = () => {
drawer.value = false
}
const handleClick = () => {
}
const confirmClick = () => {
}
const cancelClick = () => {
}
</script>

3
src/pages/order/index.vue
Unescape View File

@ -34,7 +34,8 @@
<el-button type="primary" @click="handleSearch">查詢</el-button> <el-button type="primary" @click="handleSearch">查詢</el-button>
</div> </div>
<div> <div>
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%" border stripe>
<el-table-column type="index"/>
<el-table-column prop="order_sn" label="訂單號" /> <el-table-column prop="order_sn" label="訂單號" />
<el-table-column prop="add_time" label="下單時間" /> <el-table-column prop="add_time" label="下單時間" />
<el-table-column prop="consignee" label="收貨人" /> <el-table-column prop="consignee" label="收貨人" />

7
src/pages/order/router/index.js
Unescape View File

@ -19,9 +19,14 @@ let routes = [
}, },
{ {
path: '/info', path: '/info',
name: 'Info', name: 'OrderInfo',
component: ()=> import("../Info/index.vue") component: ()=> import("../Info/index.vue")
}, },
{
path: '/add',
name: 'OrderAdd',
component: ()=> import("../Add/index.vue")
},
{ {
path: '/printcard', path: '/printcard',
name: 'PrintCard', name: 'PrintCard',

Write Preview
Loading…
Cancel
Save