|
|
@@ -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;
|
|
|
+ });
|
|
|
});
|
|
|
};
|
|
|
|