|
|
|
|
@ -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%"> </td>
|
|
|
|
|
<td width="35%"> </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>
|
