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

2025-03-25 14:42:42 +08:00
parent 3e84edbb6c
commit 4245b5a098
7 changed files with 16338 additions and 97 deletions
--- 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',
        })