1.优化商品列表全部加载动画 2.退款界面自定义退款使inpt自动获得焦点

2025-03-25 14:42:42 +08:00 · 2025-03-25 14:42:42 +08:00 · 4245b5a098
parent 3e84edbb6c
commit 4245b5a098
7 changed files with 16338 additions and 97 deletions
--- a/.env.development
+++ b/.env.development
@ -5,7 +5,10 @@ ENV = development
 # VITE_API_WSS = 'wss://sockets.sxczgkj.com/wss'

 # 正式ws
-VITE_API_WSS = 'wss://czgeatws.sxczgkj.com/wss'
+# VITE_API_WSS = 'wss://czgeatws.sxczgkj.com/wss'
+
+# 本地ws
+VITE_API_WSS = 'ws://192.168.1.43:2348'

 # 正式 php
 VITE_API_PHP_URL = 'https://newblockwlx.sxczgkj.cn/index.php/api'
@ -16,9 +19,6 @@ VITE_API_PHP_URL = 'https://newblockwlx.sxczgkj.cn/index.php/api'
 # 正式 php 开票
 VITE_API_KP_URL = 'https://invoice.sxczgkj.cn/api'

-# 阿伟
-# VITE_API_URL = 'http://192.168.1.21:9200/'
-
 # 杰哥
 # VITE_API_URL = 'http://192.168.1.34:10589/cashier-client'

@ -34,9 +34,12 @@ VITE_API_KP_URL = 'https://invoice.sxczgkj.cn/api'
 # 谭凯凯
 # VITE_API_URL = 'http://192.168.1.35/'

+# 阿伟
+VITE_API_URL = 'http://192.168.1.21:8000/'
+
 # 测试
 # VITE_API_URL = 'https://tapi.cashier.sxczgkj.cn'

 # 正式
-VITE_API_URL = 'https://cashier.sxczgkj.com'
+# VITE_API_URL = 'https://cashier.sxczgkj.com'

--- a/.env.test
+++ b/.env.test
@ -16,11 +16,8 @@ VITE_API_PHP_URL = 'https://newblockwlx.sxczgkj.cn/index.php/api'
 # 正式 php 开票
 VITE_API_KP_URL = 'https://invoice.sxczgkj.cn/api'

-# 测试
+# 测试Java
 # VITE_API_URL = 'https://tapi.cashier.sxczgkj.cn'

-# 预发布
-# VITE_API_URL = 'https://pre-cashierclient.sxczgkj.cn/cashier-client'
-
-# 正式
+# 正式Java
 VITE_API_URL = 'https://cashier.sxczgkj.com/'
--- a/dist-electron/main.js
+++ b/dist-electron/main.js
--- a/src/store/goods.js
+++ b/src/store/goods.js
@ -42,6 +42,7 @@ export const useGoods = defineStore("goods", {
    categoryIndex: useStorage.get("categoryIndex") || 0, // 商品分类索引,
    categoryList: [], // 商品分类列表
    originCategoryList: [], // 原始商品分类列表,
+    goodsListLoading: false, // 商品列表加载状态
    goodsList: [], // 商品列表
    originGoodsList: [], // 原始商品列表
    orderList: [], // 订单列表
@ -182,8 +183,9 @@ export const useGoods = defineStore("goods", {
            });
          }
          this.orderList = arr;
-          console.log("this.orderList===", this.orderList);
+          console.log("this.orderList===2222", this.orderList);
        }
+        this.calcCartInfo();
      } catch (error) {
        console.log(error);
      }
@ -205,17 +207,23 @@ export const useGoods = defineStore("goods", {

      if (index == 0) {
        await this.getGoodsList();
-        this.goodsList = _.chunk(this.originGoodsList, 12);
-      }
-      //  else if (this.categoryList[index].id == "off_sale") {
-      //   // 筛选已下架的商品
-      // }
-      else {
+        this.goodsList = _.chunk(
+          this.originGoodsList.filter((item) => item.isSale),
+          12
+        );
+      } else if (this.categoryList[index].id == "off_sale") {
+        // 筛选已下架的商品
+        this.goodsList = _.chunk(
+          this.originGoodsList.filter((item) => item.isSale == 0),
+          12
+        );
+      } else {
        // 除了全部，其他只做本地筛选
        this.goodsList = _.chunk(
          this.originGoodsList.filter(
            (item) =>
-              item.categoryId == this.categoryList[this.categoryIndex].id
+              item.categoryId == this.categoryList[this.categoryIndex].id &&
+              item.isSale
          ),
          12
        );
@ -223,6 +231,7 @@ export const useGoods = defineStore("goods", {

      this.updateGoodsNumber();
    },
+    filterCategoryGoods(id) {},
    // 根据商品名字模糊查询商品列表
    filterNameGoods(name) {
      this.goodsList = _.chunk(
@ -242,10 +251,10 @@ export const useGoods = defineStore("goods", {
          name: "全部",
          id: "",
        });
-        // this.categoryList.push({
-        //   name: "已下架",
-        //   id: "off_sale",
-        // });
+        this.categoryList.push({
+          name: "已下架",
+          id: "off_sale",
+        });
      } catch (error) {
        console.log(error);
      }
@ -253,8 +262,12 @@ export const useGoods = defineStore("goods", {
    // 获取商品列表/更新商品列表
    async getGoodsList() {
      try {
+        this.goodsListLoading = true;
        const res = await productPage({
-          categoryId: this.categoryList[this.categoryIndex].id,
+          categoryId:
+            this.categoryList[this.categoryIndex].id == "off_sale"
+              ? ""
+              : this.categoryList[this.categoryIndex].id,
          name: this.goodsName,
        });

@ -269,60 +282,112 @@ export const useGoods = defineStore("goods", {
          val.orderCount = 0;
        });

-        // 将数组分割成每页12个
+        // // 将数组分割成每页12个
        this.goodsList = _.chunk(res, 12);
+
+        let index = useStorage.get("categoryIndex") || 0;
+        if (index == 0) {
+          this.goodsList = _.chunk(
+            this.originGoodsList.filter((item) => item.isSale),
+            12
+          );
+        } else if (this.categoryList[index].id == "off_sale") {
+          // 筛选已下架的商品
+          this.goodsList = _.chunk(
+            this.originGoodsList.filter((item) => item.isSale == 0),
+            12
+          );
+        } else {
+          // 除了全部，其他只做本地筛选
+          this.goodsList = _.chunk(
+            this.originGoodsList.filter(
+              (item) =>
+                item.categoryId == this.categoryList[this.categoryIndex].id &&
+                item.isSale
+            ),
+            12
+          );
+        }
      } catch (error) {
        console.log(error);
      }
+
+      setTimeout(() => {
+        this.goodsListLoading = false;
+      }, 1000);
    },
    // 获取购物车列表，数据必须由长链接返回
    async getCartList(arr) {
-      const store = useUser();
+      try {
+        const store = useUser();

-      let numCount = 0;
-      let packCount = 0;
+        let numCount = 0;
+        let packCount = 0;

-      arr.map((val, index) => {
-        if (val.product_type == "weight") {
-          numCount++;
+        arr.map((val, index) => {
+          if (val.product_type == "weight") {
+            numCount++;
+          } else {
+            numCount += +val.number;
+          }
+          packCount += +val.pack_number;
+          val = this.completeGoodsInfo(val);
+          val.active = false;
+          if (!this.isCartInit && index == 0) {
+            val.active = true;
+          }
+        });
+
+        if (packCount > 0 && packCount == numCount) {
+          this.allSelected = 1;
        } else {
-          numCount += +val.number;
+          this.allSelected = 0;
        }
-        packCount += +val.pack_number;
-        val = this.completeGoodsInfo(val);
-        val.active = false;
-        if (!this.isCartInit && index == 0) {
-          val.active = true;
-        }
-      });

-      if (packCount > 0 && packCount == numCount) {
-        this.allSelected = 1;
-      } else {
-        this.allSelected = 0;
+        this.cartList = arr;
+        this.isCartInit = true;
+
+        // if (
+        //   this.tableInfo.tableCode &&
+        //   store.shopInfo.registerType == "after"
+        // ) {
+        //   await this.historyOrderAjax(this.tableInfo.tableCode);
+        // }
+        // this.calcCartInfo();
+        console.log("getCartList.cartList===", this.cartList);
+      } catch (error) {
+        console.log("getCartList===", error);
      }
-
-      this.cartList = arr;
-      this.isCartInit = true;
-
-      if (this.tableInfo.tableCode && store.shopInfo.registerType == "after") {
-        await this.historyOrderAjax(this.tableInfo.tableCode);
-      }
-      this.calcCartInfo();
-      console.log("getCartList.cartList===", this.cartList);
    },
    // 更新商品列表的角标
    updateGoodsNumber() {
+      let arr = [
+        ...this.cartList,
+        ...this.orderList
+          .map((item) => item.goods)
+          .flat()
+          .map((item) => {
+            item.discount_sale_amount = item.discountSaleAmount;
+            item.discount_sale_note = item.discountSaleNote;
+            item.is_print = item.isPrint;
+            item.is_gift = item.isGift;
+            item.is_temporary = item.isTemporary;
+            return item;
+          }),
+      ];
+
      this.goodsList.map((item) => {
        item.map((val) => {
          val.number = 0;
-          this.cartList.map((cart) => {
+          arr.map((cart) => {
            if (val.id == cart.product_id) {
-              val.number += +cart.number;
+              val.number += +cart.number - (cart.returnNum || 0);
            }
          });
        });
      });
+
+      console.log("updateGoodsNumber===", this.goodsList);
    },
    // 添加商品到购物车
    addCart(params) {
@ -464,7 +529,7 @@ export const useGoods = defineStore("goods", {
          item.skuList = val.skuList;
          item.selectSpecInfo = val.selectSpecInfo;
          item.group_text = group_text;
-          item.packFee = val.packFee;
+          item.packFee = item.packAmount;
          item.unitName = val.unitName;
        }
        item.pack_number = item.packNumber;
@ -528,15 +593,22 @@ export const useGoods = defineStore("goods", {
      // 存在真实台桌，需要拉取历史订单
      if (this.tableInfo.id) {
        await this.historyOrderAjax(this.tableInfo.tableCode);
+      } else {
+        this.calcCartInfo();
      }

-      this.calcCartInfo();
+      // 清空商品列表的角标
+      // this.goodsList.map((item) => {
+      //   item.map((val) => {
+      //     val.number = 0;
+      //   });
+      // });
    },
    // 下单成功清除购物车，重新加载订单
    async updateOrderList() {
      await this.historyOrderAjax(this.cartList[0].table_code);
      this.cartList = [];
-      this.calcCartInfo();
+      // this.calcCartInfo();
    },
    // 计算购物车信息
    calcCartInfo() {
@ -568,9 +640,11 @@ export const useGoods = defineStore("goods", {
          }),
      ];

-      console.log("arr===", arr);
+      console.log("arr===11111", arr);

      arr.map((val, index) => {
+        console.log("val===", val);
+
        let lowPrice = 0;
        let number = val.number - (val.returnNum || 0);

--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@ -4,7 +4,12 @@
        <div class="menus scroll-x">
            <div class="item" :class="{ active: goodsStore.categoryIndex == index }"
                v-for="(item, index) in goodsStore.categoryList" :key="item.id" @click="changeCategory(index)">
-                <el-text>{{ item.name }}</el-text>
+                <el-icon v-if="item.id === ''" class="icon" :class="{ active: goodsStore.goodsListLoading }">
+                    <RefreshRight />
+                </el-icon>
+                <el-text>
+                    {{ item.name }}
+                </el-text>
            </div>
        </div>
        <el-popover trigger="click" :width="600" title="全部分类" :visible="showPopover">
@ -51,7 +56,7 @@
                        <transition name="el-fade-in">
                            <div class="more" v-if="item.showMore" @click.stop>
                                <div class="ul">
-                                    <template v-if="goodsStore.categoryList[goodsStore.categoryIndex].id == '-1'">
+                                    <template v-if="goodsStore.categoryList[goodsStore.categoryIndex].id == 'off_sale'">
                                        <div class="li" @click.stop="showPutawayHandle(item)">上架</div>
                                    </template>
                                    <template v-else>
@ -65,7 +70,7 @@
                        </transition>
                        <div class="dot" v-if="item.number">{{ item.number }}</div>
                        <div class="cover" v-if="shopListType == 'img'">
-                            <el-image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_150,h_150`"
+                            <el-image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_120,h_120`"
                                class="el_img" fit="cover"></el-image>
                            <div class="sell_out" v-if="item.isSoldStock">
                                <img class="sell_out_icon" src="../../../assets/icon_xq.png">
@ -491,7 +496,7 @@ function showSkuHandle(item) {
        if (!item.isSale) {
            ElMessage({
                type: 'error',
-                message: '该商品已下架，请上架后操作',
+                message: '该商品已下架，请编辑上架后操作',
                showClose: true,
            })
            return
@ -656,7 +661,7 @@ const showPutawayLoading = ref(false)

 async function showPutawayHandle(item) {
    try {
-        await staffPermission('yun_xu_shang_xia_jia_shang_pin')
+        // await staffPermission('yun_xu_shang_xia_jia_shang_pin')
        goodEditorItem.value = item
        showPutaway.value = true
    } catch (error) {
@ -668,11 +673,10 @@ async function showPutawayHandle(item) {
 async function putawayHandle(item) {
    try {
        showPutawayLoading.value = true
-        const res = await productStatus({
-            shopId: store.userInfo.shopId,
-            productId: goodEditorItem.value.id,
-            type: 0,
-            state: 1
+        await productOnOff({
+            type: 'product',
+            id: goodEditorItem.value.id,
+            isSale: 1
        })
        showPutawayLoading.value = false
        showPutaway.value = false
@ -835,6 +839,26 @@ defineExpose({
        position: relative;
        white-space: nowrap;

+        .icon {
+            margin-right: 4px;
+            animation: rotateAni 1s linear infinite;
+            animation-play-state: paused;
+
+            @keyframes rotateAni {
+                0% {
+                    transform: rotate(0deg);
+                }
+
+                100% {
+                    transform: rotate(360deg);
+                }
+            }
+
+            &.active {
+                animation-play-state: running;
+            }
+        }
+
        span {
            font-size: var(--el-font-size-base);
        }
--- a/src/views/order/components/refundDrawer.vue
+++ b/src/views/order/components/refundDrawer.vue
@ -24,8 +24,8 @@
                        <el-radio-button label="自定义" :value="3" />
                    </el-radio-group>
                    <div class="amount">
-                        <el-input v-model="refundAmount" style="width: 400px;height: 42px;" :readonly="refundType != 3"
-                            placeholder="请输入退款金额" @input="inputChange">
+                        <el-input ref="amountInputRef" v-model="refundAmount" style="width: 400px;height: 42px;"
+                            :readonly="refundType != 3" placeholder="请输入退款金额" @input="inputChange">
                            <template #prepend>￥</template>
                            <template #append>最多可退￥{{ formatDecimal(item.payAmount - item.refundAmount, 2) }}</template>
                        </el-input>
@ -166,6 +166,7 @@ const remarkTagList = ref([
 const loading = ref(false)
 const takeFoodCodeRef = ref(null)
 const cash = ref(false)
+const amountInputRef = ref(null)

 // 退款密码
 async function passwordSuccess(e = '') {
@ -397,6 +398,7 @@ function refundTypeChange(val) {
            tableRef.value.clearSelection()
            refundAmount.value = ''
            modify.value = true
+            amountInputRef.value.focus()
            break;
        default:
            break;
--- a/src/views/table/components/tableInfo.vue
+++ b/src/views/table/components/tableInfo.vue
@ -35,7 +35,7 @@
                    <el-button type="success" style="width: 100%;" @click="toOrderMeal(1)">加菜/管理</el-button>
                </div>
                <div class="btn_wrap">
-                    <el-button type="primary" style="width: 100%;" @click="showPayHandle">结算(￥{{
+                    <el-button type="primary" style="width: 100%;" :loading="payLoading" @click="showPayHandle">结算(￥{{
                        orderInfo.orderAmount || 0 }})</el-button>
                </div>
            </div>
@ -76,20 +76,16 @@
            </transition>
        </div>
        <!-- 结算订单 -->
-        <settleAccount ref="settleAccountRef" :cart="cartList" :amount="orderInfo.orderAmount"
-            :remark="orderInfo.remark" :masterId="orderInfo.masterId" :orderInfo="orderInfo" @paySuccess="paySuccess" />
+        <SettleAccount ref="SettleAccountRef" @success="emits('success')" />
    </div>
 </template>

 <script setup>
-import { ref, reactive, onMounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUser } from "@/store/user.js"
-import { useGlobal } from '@/store/global.js'
-import { queryMembermember } from '@/api/member/index.js'
-import { orderDetail } from '@/api/order/index.js'
 import { formatDecimal } from '@/utils/index.js'
-import settleAccount from "@/views/home/components/settleAccount.vue";
+import SettleAccount from '@/views/home/components/settleAccount.vue'
 import { ElMessage } from 'element-plus'
 import { clearTable } from '@/api/table.js'
 import { useGoods } from "@/store/goods.js";
@ -97,8 +93,8 @@ import { getOrderByIdAjax } from '@/utils/index.js'

 const goodsStore = useGoods()
 const router = useRouter()
-const global = useGlobal()
 const store = useUser()
+const SettleAccountRef = ref(null)

 const emits = defineEmits(['close', 'success'])

@ -109,7 +105,6 @@ const props = defineProps({
    }
 })

-
 const showPeopleNum = ref(false)
 const peopleNum = ref(0)
 const peopleNumInputValue = ref('')
@ -123,7 +118,6 @@ function inputFocus() {
    peopleNum.value = 'custom'
 }

-const settleAccountRef = ref(null)
 const orderInfo = ref({})
 const cartList = ref([])

@ -140,8 +134,20 @@ const status = ref({
 const payLoading = ref(false)

 // 显示结算页面
-function showPayHandle() {
-    settleAccountRef.value.show()
+async function showPayHandle() {
+    try {
+        payLoading.value = true
+        await goodsStore.historyOrderAjax('', props.tableInfo.orderId)
+        goodsStore.selectTable({
+            ...props.tableInfo,
+            num: props.tableInfo.useNum
+        })
+        goodsStore.calcCartInfo()
+        SettleAccountRef.value.show()
+    } catch (error) {
+        console.log(error);
+    }
+    payLoading.value = false
 }

 // 显示就就餐人数
@ -227,7 +233,10 @@ function orderDownHandle() {
 function toOrderMeal(t) {
    if (t == 1) {
        // 直接点单
-        global.setOrderTable(props.tableInfo)
+        goodsStore.selectTable({
+            ...props.tableInfo,
+            num: props.tableInfo.useNum
+        })
        router.push({
            name: 'home',
        })