Kaynağa Gözat

fix: 替换推送短信弹窗的模拟数据为真实API调用

- 移除模拟数据,改为调用真实接口获取短信记录和内容
- 添加加载状态指示器,提升用户体验
- 将表单提交改为调用真实发送短信接口
- 修复事件监听,将@open改为@closed以正确处理弹窗关闭
- 移除未使用的getCurrentInstance引入
ylong 1 ay önce
ebeveyn
işleme
54e091fe7c

+ 38 - 53
src/views/mallOrder/all/components/push-sms-dialog.vue

@@ -4,7 +4,7 @@
         :width="800"
         v-model="visible"
         title="推送短信"
-        @open="handleOpen"
+        @closed="handleCancel"
     >
         <el-form
             ref="formRef"
@@ -12,6 +12,7 @@
             :rules="rules"
             label-width="80px"
             @submit.prevent=""
+            v-loading="loading"
         >
             <el-form-item label="短信类型" prop="type">
                 <el-radio-group v-model="form.type" @change="handleChangeType">
@@ -45,16 +46,16 @@
 
         <template #footer>
             <el-button @click="handleCancel">关闭</el-button>
-            <el-button type="primary" @click="handleSubmit">确定</el-button>
+            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
         </template>
     </ele-modal>
 </template>
 
 <script setup>
-import { ref, reactive, getCurrentInstance } from 'vue';
+import { ref, reactive } from 'vue';
 import { EleMessage } from 'ele-admin-plus/es';
+import request from '@/utils/request';
 
-const { proxy } = getCurrentInstance();
 const emit = defineEmits(['success']);
 
 /** 弹窗是否打开 */
@@ -68,6 +69,8 @@ const smsRecords = ref([]);
 
 /** 短信内容列表 */
 const smsContentList = ref([]);
+const loading = ref(false);
+const submitLoading = ref(false);
 
 const form = reactive({
     orderId: null,
@@ -134,45 +137,25 @@ const resetForm = () => {
 /** 弹窗打开事件 */
 const handleOpen = (row) => {
     resetForm();
-    // 模拟获取数据,实际开发中可以使用 row.orderId 调用接口
-    if (row) {
-        form.orderId = row.orderId || 123;
+    if (row && row.orderId) {
+        form.orderId = row.orderId;
         getSmsLogInfo(form.orderId);
-    } else {
-        // 如果没有 row 传入,也可以默认加载 mock 数据方便预览
-        getSmsLogInfo(123);
     }
     visible.value = true;
 };
 
-/** 获取短信记录信息 (Mock) */
+/** 获取短信记录信息 */
 const getSmsLogInfo = (orderId) => {
-    // 模拟 API 请求延迟
-    setTimeout(() => {
-        // Mock data
-        smsContentList.value = [
-            { type: 'urge', typeName: '催发货提醒', smsContent: '亲,您的订单已发货,请注意查收。' },
-            { type: 'receive', typeName: '收货提醒', smsContent: '亲,您的宝贝已送达,请确认收货。' },
-            { type: 'good_review', typeName: '好评提醒', smsContent: '亲,如果您对宝贝满意,请给个好评哦~' }
-        ];
-
-        smsRecords.value = [
-            {
-                id: 1,
-                createName: '管理员',
-                smsContent: '亲,您的订单已发货,请注意查收。',
-                createTime: '2023-10-27 10:00:00',
-                status: 1
-            },
-            {
-                id: 2,
-                createName: '客服小美',
-                smsContent: '亲,您的宝贝已送达,请确认收货。',
-                createTime: '2023-10-28 14:30:00',
-                status: 1
-            }
-        ];
-    }, 100);
+    loading.value = true;
+    request.get(`/shop/shopOrderSmsLog/getInfo/${orderId}`)
+        .then(res => {
+            const data = res.data.data || res.data;
+            smsContentList.value = data.smsContentList || [];
+            smsRecords.value = data.smsLogList || [];
+        })
+        .finally(() => {
+            loading.value = false;
+        });
 };
 
 /** 提交表单 */
@@ -180,22 +163,24 @@ const handleSubmit = () => {
     formRef.value?.validate(async (valid) => {
         if (!valid) return;
         
-        // 模拟提交
-        setTimeout(() => {
-            EleMessage.success('短信发送成功');
-            // 添加一条记录到 mock 列表,模拟实时更新
-            smsRecords.value.unshift({
-                id: Date.now(),
-                createName: '当前用户',
-                smsContent: form.remark,
-                createTime: new Date().toLocaleString(),
-                status: 1
-            });
-            // 这里的业务逻辑是发送后不一定马上关闭,或者可以关闭
-            // 参考 send-SMS.vue 是关闭的
-            handleCancel();
-            emit('success');
-        }, 500);
+        submitLoading.value = true;
+        request.post('/shop/shopOrderSmsLog/send', {
+            orderId: form.orderId,
+            type: form.type
+        }).then(res => {
+            if (res.data.code === 200) {
+                EleMessage.success('短信发送成功');
+                handleCancel();
+                emit('success');
+            } else {
+                EleMessage.error(res.data.msg || '短信发送失败');
+            }
+        }).catch(e => {
+            console.error(e);
+            EleMessage.error('网络错误');
+        }).finally(() => {
+            submitLoading.value = false;
+        });
     });
 };