优化样式

2024-03-08 15:04:11 +08:00 · 2024-03-08 15:04:11 +08:00 · 11290d1505
parent 6e3a4c5ce3
commit 11290d1505
15 changed files with 114 additions and 96 deletions
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
@ -1,10 +1,6 @@
 "use strict";
 const path = require("path");
 const electron = require("electron");
-const { SerialPort } = require("serialport");
-SerialPort.list().then((res) => {
-  console.log(res);
-});
 let win;
 electron.app.whenReady().then(() => {
  win = new electron.BrowserWindow({
@ -36,7 +32,6 @@ electron.app.whenReady().then(() => {
  });
  const printWin = new electron.BrowserWindow({
    show: false,
-    width: 580,
    webPreferences: {
      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
      nodeIntegration: true,
@ -51,6 +46,9 @@ electron.app.whenReady().then(() => {
  electron.ipcMain.on("printerInfoSync", (event, params) => {
    printWin.webContents.send("getParams", params);
  });
+  electron.ipcMain.on("printStart", () => {
+    console.log("开始打印");
+  });
 });
 electron.app.on("window-all-closed", () => {
  if (process.platform !== "darwin")
--- a/electron/main.js
+++ b/electron/main.js
@ -1,10 +1,5 @@
 import path from "path";
 import { app, BrowserWindow, ipcMain } from "electron";
-const { SerialPort } = require("serialport");
-
-SerialPort.list().then(res => {
-  console.log(res);
-});

 let win;
 app.whenReady().then(() => {
@ -47,7 +42,6 @@ app.whenReady().then(() => {
  // 创建打印小票子窗口
  const printWin = new BrowserWindow({
    show: false,
-    width: 580,
    webPreferences: {
      // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
      nodeIntegration: true,
@ -62,18 +56,27 @@ app.whenReady().then(() => {
    printWin.loadFile(path.resolve(__dirname, "../dist/print.html")); // 打包后使用文件路径访问应用
  }

+  // win.webContents.getPrintersAsync().then(res => {
+  //   console.log('list', res)
+  // })
+
  ipcMain.on("printerInfoSync", (event, params) => {
    // console.log(JSON.parse(params))
    printWin.webContents.send("getParams", params);
  });

  // 执行打印操作
-  // ipcMain.on('printStart', () => {
-  //   console.log('开始打印')
-  //   printWin.webContents.print({
-  //     silent: true
-  //   })
-  // })
+  ipcMain.on('printStart', () => {
+    console.log('开始打印')
+
+    let name = 'RONGTA 80mm Series Printer'
+
+    // printWin.webContents.print({
+    //   silent: true,
+    //   printBackground: true,
+    //   deviceName: name
+    // })
+  })
 });

 app.on("window-all-closed", () => {
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "vite-electron",
  "private": true,
-  "version": "0.0.2",
+  "version": "0.0.5",
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "chcp 65001 && vite",
@ -13,10 +13,10 @@
    "@element-plus/icons-vue": "^2.3.1",
    "axios": "^1.6.2",
    "dayjs": "^1.11.10",
+    "electron-pos-printer": "^1.3.7",
    "element-plus": "^2.4.3",
    "lodash": "^4.17.21",
    "pinia": "^2.1.7",
-    "serialport": "^12.0.0",
    "vue": "^3.3.8",
    "vue-router": "^4.2.5"
  },
--- a/public/js/html2canvas.min.js
+++ b/public/js/html2canvas.min.js
--- a/public/print.html
+++ b/public/print.html
@ -56,24 +56,28 @@
        <div>---------------</div>
        <div>---------------</div>
        <div>---------------</div>
-        <pre>{{data.shop_name || '结账单位'}}</pre>
+        <ESC> "@"
+        <ESC> "|cA" "Sample Text" <LF>
+        <ESC> "|cA" "Price: $10.00" <LF>
+        <ESC> "|cA" "Thank you!" <LF>
+        <ESC> "d" "n" <LF>
+        <pre style="text-align: center">{{data.shop_name || '结账单位'}}</pre>
        <div class="header">
          <div class="t2">结账单</div>
        </div>
        <div class="time">开始时间： 2024/3/7 09:56:23</div>
        <div class="time">结束时间： 2024/3/8 13:11:07</div>
-        <div class="thead">
-          品相    数量    单位    单价   小计    注
-        </div>
+        <div class="thead">品相 数量 单位 单价 小计 注</div>
        <div class="tbody">
          <div v-for="item in data.carts" :key="item.id" class="tr">
-            {{item.name}}    x{{item.number}}    x{{item.number}}    {{item.unitName}}    {{item.salePrice}}    {{item.salePrice}}
+            {{item.name}} x{{item.number}} x{{item.number}} {{item.unitName}}
+            {{item.salePrice}} {{item.salePrice}}
          </div>
        </div>
        <div>优惠信息</div>
-        <div><br> </div>
+        <div><br /></div>
        <div>赠送优惠：{{data.amount}}</div>
-        <div><br> </div>
+        <div><br /></div>
        <div>结算方式</div>
        <div>---------------</div>
        <div>---------------</div>
@ -81,6 +85,10 @@
        <div>---------------</div>
        <div>---------------</div>
      </div>
+      <!-- <section>我是标签111</section>
+      <section>我是标签222</section>
+      <section>我是标签333</section>
+      <section>我是标签444</section> -->
    </div>
    <script type="module">
      const { ipcRenderer } = require("electron");
--- a/src/App.vue
+++ b/src/App.vue
@ -63,11 +63,16 @@ router.beforeEach((to, from) => {
  --g-lighter2: calc(var(--g) + (255 - var(--g)) * 0.5);
  --b-lighter2: calc(var(--b) + (255 - var(--b)) * 0.5);

+  --r-lighter3: calc(var(--r) + (255 - var(--r)) * 0.9);
+  --g-lighter3: calc(var(--g) + (255 - var(--g)) * 0.9);
+  --b-lighter3: calc(var(--b) + (255 - var(--b)) * 0.9);
+
  --r-darker: calc(var(--r) * 0.8);
  --g-darker: calc(var(--g) * 0.8);
  --b-darker: calc(var(--b) * 0.8);

  --primary-color: rgb(var(--r), var(--g), var(--b));
+  --primary-color-hover: rgb(var(--r-lighter3), var(--g-lighter3), var(--b-lighter3));
  --el-color-primary: var(--primary-color) !important;
  --el-button-hover-bg-color: var(--primary-color) !important;
  --el-color-primary-light-3: rgb(var(--r-lighter), var(--g-lighter), var(--b-lighter)) !important;
@ -172,6 +177,7 @@ html {
 高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
  width: 4px;
+  height: 2px;
 }

 /*定义滚动条轨道
@ -187,6 +193,22 @@ html {
  background-color: #d3d3d3;
 }

+.scroll-x {
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 0;
+    background-color: transparent;
+  }
+}
+
 .mt50 {
  margin-top: 50px;
 }
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@ -182,7 +182,7 @@ const menus = ref([
        }

        &.more {
-            margin-top: 200px;
+            margin-top: 150px;
        }

        .icon {
--- a/src/components/remarkModal.vue
+++ b/src/components/remarkModal.vue
@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="备注" width="800" v-model="dialogVisible">
+    <el-dialog title="备注" width="600" v-model="dialogVisible">
        <div class="tag_wrap">
            <el-button plain type="primary" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
                {{ item.remark }}
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@ -2,13 +2,13 @@

 <template>
    <div class="header">
-        <div class="menus">
+        <div class="menus scroll-x">
            <div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
                :key="item.id" @click="changeCategory(item, index)">
                <el-text>{{ item.name }}</el-text>
            </div>
        </div>
-        <el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
+        <el-popover trigger="click" :width="600" title="全部分类" :visible="showPopover">
            <template #reference>
                <div class="all" @click="showMoreMenu">
                    <el-icon class="icon" :class="{ active: showPopover }">
@ -16,7 +16,6 @@
                    </el-icon>
                </div>
            </template>
-
            <template #default>
                <div class="popover_wrap">
                    <el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
@ -29,7 +28,7 @@
    </div>
    <div class="search_wrap">
        <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+            <el-input placeholder="请输入商品名称查询" prefix-icon="Search" v-model="commdityName" clearable
                @input="inputChange"></el-input>
        </div>
        <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
@ -40,7 +39,8 @@
            <div class="item">
                <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                <div class="cover" v-if="shopListType == 'img'">
-                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;" fit="contain"></el-image>
+                    <el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;"
+                        fit="contain"></el-image>
                </div>
                <div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
                <div class="item_empty" v-if="shopListType == 'text'"></div>
@ -205,7 +205,8 @@ defineExpose({
 .popover_wrap {
    display: flex;
    flex-wrap: wrap;
-    padding: 20px 0;
+    gap: var(--el-font-size-base);
+    padding: var(--el-font-size-base) 0;
 }

 .header {
@ -216,14 +217,18 @@ defineExpose({
 }

 .menus {
+    flex: 1;
    display: flex;
    padding: 0 10px;
+    overflow-x: auto;
+    width: 100px;

    .item {
        padding: 0 10px;
        display: flex;
        align-items: center;
        position: relative;
+        white-space: nowrap;

        span {
            font-size: var(--el-font-size-base);
@ -249,11 +254,12 @@ defineExpose({
 }

 .all {
-    width: var(--el-component-size-large);
+    width: calc(var(--el-component-size-large) + 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
+    flex-shrink: 0;

    &::before {
        content: "";
--- a/src/views/home/components/settleAccount.vue
+++ b/src/views/home/components/settleAccount.vue
@ -219,6 +219,7 @@ defineExpose({

                .tag_wrap {
                    display: flex;
+                    flex-wrap: wrap;
                    padding-top: 10px;
                    padding-bottom: 10px;

@ -227,6 +228,7 @@ defineExpose({
                        background-color: var(--el-color-danger);
                        color: #fff;
                        margin-right: 10px;
+                        margin-bottom: 10px;
                    }
                }

--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -76,13 +76,8 @@
          <div class="button">
            <el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
              @click="createOrderHandle">
-              <div class="js">
-                <el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
-                <el-text class="t" style="margin-left: 30px">
-                  <span v-if="!createOrderLoading">结算</span>
-                  <span v-else>下单中...</span>
-                </el-text>
-              </div>
+              <span v-if="!createOrderLoading">结算(￥{{ cartInfo.totalAmount || 0 }})</span>
+              <span v-else>下单中...</span>
            </el-button>
          </div>
        </div>
@ -294,7 +289,7 @@ async function queryCartAjax() {
 async function createCodeAjax() {
  try {
    if (process.env.VITE_DEV_SERVER_URL) {
-      masterId.value = '#8'
+      masterId.value = '#10'
    } else {
      const res = await createCode({
        shopId: store.userInfo.shopId
@ -396,7 +391,7 @@ onMounted(() => {
        padding: var(--el-font-size-base);

        &.active {
-          background-color: #f5f5f5;
+          background-color: var(--primary-color-hover);
        }

        &:not(:last-child) {
@ -419,6 +414,7 @@ onMounted(() => {
            background-color: var(--el-color-danger);
            color: #fff;
            margin-right: 10px;
+            margin-bottom: 10px;
          }
        }

--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -42,7 +42,7 @@
          </el-form-item>
        </el-form>
        <div class="version">
-          <el-text size="large">Ver2.1.6</el-text>
+          <el-text size="large">Ver{{ packageData.version }}</el-text>
          <el-text size="large">陕西超掌柜科技有限公司</el-text>
        </div>
      </div>
@ -51,6 +51,8 @@
 </template>

 <script setup>
+import packageData from '../../package.json'
+
 import logo from "@/assets/logo.png";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { reactive, ref } from "vue";
--- a/src/views/table/components/countCard.vue
+++ b/src/views/table/components/countCard.vue
@ -61,25 +61,25 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .time {
    font-family: 'num';
-    font-size: 82px;
+    font-size: 42px;
    letter-spacing: 10px;
+    font-weight: bold;
 }

 .count_wrap {
-    padding: 0 20px;
+    padding: 0 var(--el-font-size-base);

    .date_wrap {
-        padding: 40px 0;
+        padding: var(--el-font-size-base) 0;
        border-bottom: 1px solid #ececec;

        .date {
-            font-size: 26px;
-            padding-left: 6px;
+            font-size: var(--el-font-size-base);
        }
    }

    .order_info {
-        padding: 40px 0;
+        padding: var(--el-font-size-base) 0;
        display: flex;

        .item {
@ -87,9 +87,10 @@ onUnmounted(() => {

            .num {
                font-family: 'num';
-                font-size: 46px;
+                font-size: 26px;
                letter-spacing: 4px;
                padding-top: 10px;
+                font-weight: bold;
            }
        }
    }
--- a/src/views/table/components/tableInfo.vue
+++ b/src/views/table/components/tableInfo.vue
@ -64,7 +64,7 @@ function close() {
        justify-content: space-between;

        .t {
-            font-size: 26px;
+            font-size: calc(var(--el-font-size-base) + 10px);
        }

        .close {
@ -75,7 +75,7 @@ function close() {
            justify-content: flex-end;

            .icon {
-                font-size: 30px;
+                font-size: 24px;
                color: #999;
            }
        }
@ -84,11 +84,11 @@ function close() {
    .status_wrap {
        display: flex;
        align-items: center;
-        padding-bottom: 20px;
+        padding-bottom: var(--el-font-size-base);

        .icon {
            color: #666;
-            font-size: 24px;
+            font-size: var(--el-font-size-base);
        }

        .t {
@ -99,7 +99,7 @@ function close() {

    .place_order {
        background-color: #efefef;
-        height: calc(100vh - 180px);
+        height: calc(100vh - 160px);
        border-radius: 6px;
        display: flex;
        align-items: center;
@ -123,7 +123,7 @@ function close() {

                .icon {
                    color: #fff;
-                    font-size: 50px;
+                    font-size: 40px;
                }

                .t {
--- a/src/views/table/index.vue
+++ b/src/views/table/index.vue
@ -9,7 +9,7 @@
                    </div>
                </div>
                <div class="all">
-                    <el-button type="primary" icon="Clock">预定管理</el-button>
+                    <el-button type="text" icon="Clock">预定管理</el-button>
                </div>
            </div>
            <div class="tab_container">
@ -17,13 +17,13 @@
                    <el-radio-group v-model="area" @change="queryShopTableAjax">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button :label="item.id" v-for="item in areaList" :key="item.id">{{ item.name
-                        }}</el-radio-button>
+                            }}</el-radio-button>
                    </el-radio-group>
                </div>
                <div class="overflow_y" v-loading="loading">
                    <div class="tab_list">
-                        <div class="item" :class="{ active: tableItemActive == index }" v-for="(item, index) in tableList"
-                            :key="item.id" @click="slectTableHandle(index, item)">
+                        <div class="item" :class="{ active: tableItemActive == index }"
+                            v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
                            <div class="tab_title" :class="`${item.status}`">
                                <span>{{ item.name }}</span>
                                <span>0/{{ item.maxCapacity }}</span>
@ -156,18 +156,18 @@ onMounted(() => {

 <style scoped lang="scss">
 .cart_wrap {
-    flex: 1;
+    flex: 2;
 }

 .right_card {
-    width: 550px;
+    flex: 1;
    height: 100%;
-    margin-left: 20px;
+    margin-left: var(--el-font-size-base);
 }

 .header {
    display: flex;
-    height: 80px;
+    height: var(--el-component-size-large);
    justify-content: space-between;
    border-bottom: 1px solid #ececec;

@ -182,7 +182,7 @@ onMounted(() => {
            position: relative;

            span {
-                font-size: 24px;
+                font-size: var(--el-font-size-base);
            }

            &.active {
@ -208,15 +208,14 @@ onMounted(() => {
    .all {
        display: flex;
        align-items: center;
-        padding-right: 20px;
    }
 }

 .tab_container {
-    padding: 20px;
+    padding: var(--el-font-size-base);

    .tab_head {
-        padding-bottom: 20px;
+        padding-bottom: var(--el-font-size-base);
    }

    .overflow_y {
@ -226,17 +225,18 @@ onMounted(() => {

    .tab_list {
        display: grid;
-        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
-        gap: 20px;
+        gap: var(--el-font-size-base);

        .item {
            background-color: #efefef;
            border-radius: 6px;
            overflow: hidden;
+            border: 2px solid #fff;

            &.active {
-                box-shadow: inset 0 0 0 2px var(--primary-color);
+                border-color: var(--primary-color);
            }

            &:hover {
@ -244,7 +244,7 @@ onMounted(() => {
            }

            .tab_title {
-                height: 50px;
+                height: var(--el-component-size-large);
                display: flex;
                align-items: center;
                justify-content: space-between;
@ -269,14 +269,14 @@ onMounted(() => {
            }

            .tab_cont {
-                height: 160px;
+                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    color: #555;
-                    font-size: 40px;
+                    font-size: 30px;
                    transform: rotate(45deg);
                }
            }