9 changed files with 252 additions and 134 deletions
@ -0,0 +1,14 @@ |
|||
import { SlateDescendant, SlateElement, SlateText } from '@wangeditor/editor' |
|||
|
|||
declare module '@wangeditor/editor' { |
|||
// 扩展 Text
|
|||
interface SlateText { |
|||
text: string |
|||
} |
|||
|
|||
// 扩展 Element
|
|||
interface SlateElement { |
|||
type: string |
|||
children: SlateDescendant[] |
|||
} |
|||
} |
@ -0,0 +1,47 @@ |
|||
<script setup lang="ts"> |
|||
import { onMounted, reactive, onBeforeUnmount, ref, shallowRef } from 'vue' |
|||
|
|||
import '@wangeditor/editor/dist/css/style.css' // 引入 css |
|||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' |
|||
|
|||
const emits = defineEmits(["updateContent"]) |
|||
|
|||
const data = reactive({ |
|||
content: '', |
|||
}) |
|||
|
|||
//编辑器 |
|||
const toolbarConfig = {} |
|||
const editorConfig = {} |
|||
|
|||
const editorRef = shallowRef() |
|||
|
|||
// 组件销毁时,也及时销毁编辑器 |
|||
onBeforeUnmount(() => { |
|||
const editor = editorRef.value |
|||
if (editor == null) return |
|||
editor.destroy() |
|||
}) |
|||
|
|||
const handleCreated = (editor) => { |
|||
editorRef.value = editor // 记录 editor 实例,重要! |
|||
} |
|||
|
|||
const handleChange = () => { |
|||
emits("updateContent", data.content) |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="border: 1px solid #ccc"> |
|||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="simple" /> |
|||
<Editor |
|||
style="height: 300px; overflow-y: hidden" |
|||
v-model="data.content" |
|||
:defaultConfig="editorConfig" |
|||
mode="simple" |
|||
@onCreated="handleCreated" |
|||
@onChange="handleChange" |
|||
/> |
|||
</div> |
|||
</template> |
@ -1,122 +1,151 @@ |
|||
<script setup lang="ts"> |
|||
import { onMounted, reactive } from 'vue'; |
|||
import request from "@/api/config"; |
|||
import { ElMessage } from "element-plus"; |
|||
import { onMounted, reactive, onBeforeUnmount, ref } from 'vue' |
|||
import request from '@/api/config' |
|||
import { ElMessage } from 'element-plus' |
|||
import { Plus, Minus } from '@element-plus/icons-vue' |
|||
import CustomEditor from '@/components/common/CustomEditor.vue' |
|||
|
|||
const emits = defineEmits(["closeBox"]) |
|||
const props = defineProps(["uid", "user_no", "gold", "diamonds", "pid", "channel_name"]) |
|||
const emits = defineEmits(['closeBox']) |
|||
const props = defineProps(['uid', 'user_no', 'gold', 'diamonds', 'pid', 'channel_name']) |
|||
const data = reactive({ |
|||
options: [ |
|||
{ label: "金币", value: 1 }, |
|||
{ label: "钻石", value: 2 }, |
|||
{ label: "点券", value: 3 }, |
|||
{ label: "道具", value: 4 }, |
|||
] as any[], |
|||
form: { |
|||
recipient: [parseInt(props.user_no)], |
|||
append: [] as any[], //[{num:2,type:1}] |
|||
title: "", |
|||
content: "", |
|||
timing: "", |
|||
}, |
|||
options: [ |
|||
{ label: '金币', value: 1 }, |
|||
{ label: '钻石', value: 2 }, |
|||
{ label: '点券', value: 3 }, |
|||
{ label: '道具', value: 4 }, |
|||
] as any[], |
|||
form: { |
|||
recipient: [parseInt(props.user_no)], |
|||
append: [] as any[], //[{num:2,type:1}] |
|||
title: [''], |
|||
content: [''], |
|||
timing: '', |
|||
}, |
|||
emailNum: 1, |
|||
}) |
|||
|
|||
const addProp = () => { |
|||
data.form.append.push({ type: "", num: "" }) |
|||
data.form.append.push({ type: '', num: '' }) |
|||
} |
|||
|
|||
const delProp = () => { |
|||
if (data.form.append.length == 0) return |
|||
if (data.form.append.length == 0) return |
|||
|
|||
data.form.append.pop() |
|||
data.form.append.pop() |
|||
} |
|||
|
|||
const onSubmit = async () => { |
|||
for (const index in data.form.append) { |
|||
if (data.form.append[index].type == "" || data.form.append[index].num == "") { |
|||
ElMessage.error("道具不能为空") |
|||
return |
|||
} |
|||
|
|||
if (data.form.append[index].type == 1 && data.form.append[index].num < 1) { |
|||
ElMessage.error("金币不能小于1000") |
|||
return |
|||
} |
|||
data.form.append[index].num = parseInt(data.form.append[index].num) |
|||
} |
|||
const addEmail = () => { |
|||
data.form.title.push('') |
|||
data.form.content.push('') |
|||
} |
|||
|
|||
const params = { |
|||
id: props.uid, |
|||
recipient: JSON.stringify(data.form.recipient), |
|||
title: data.form.title, |
|||
content: data.form.content, |
|||
timing: data.form.timing, |
|||
type: 2, |
|||
append: JSON.stringify(data.form.append) |
|||
} |
|||
const respond = await request.post("/person/sendEmail", params) |
|||
if (respond.code != 0) { |
|||
ElMessage.error(respond.msg) |
|||
return |
|||
} |
|||
const delEmail = () => { |
|||
if (data.form.title.length == 0) return |
|||
|
|||
ElMessage.success("操作成功") |
|||
emits("closeBox", false) |
|||
data.form.title.pop() |
|||
data.form.content.pop() |
|||
} |
|||
|
|||
const onSubmit = async () => { |
|||
for (const index in data.form.append) { |
|||
if (data.form.append[index].type == '' || data.form.append[index].num == '') { |
|||
ElMessage.error('道具不能为空') |
|||
return |
|||
} |
|||
|
|||
if (data.form.append[index].type == 1 && data.form.append[index].num < 1) { |
|||
ElMessage.error('金币不能小于1000') |
|||
return |
|||
} |
|||
data.form.append[index].num = parseInt(data.form.append[index].num) |
|||
} |
|||
|
|||
const params = { |
|||
user_id: props.uid, |
|||
recipient: JSON.stringify(data.form.recipient), |
|||
title: data.form.title, |
|||
content: data.form.content, |
|||
timing: data.form.timing, |
|||
type: 2, |
|||
append: JSON.stringify(data.form.append), |
|||
} |
|||
const respond = await request.post('/person/sendEmail', params) |
|||
if (respond.code != 0) { |
|||
ElMessage.error(respond.msg) |
|||
return |
|||
} |
|||
|
|||
ElMessage.success('操作成功') |
|||
emits('closeBox', false) |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<template> |
|||
|
|||
<el-form> |
|||
<el-form-item label="玩家ID" label-width="100"> |
|||
<el-input :value="props.user_no" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="玩家拥有资产" label-width="100"> |
|||
<el-input :value="`金币 ${props.gold}`" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮件标题" label-width="100"> |
|||
<el-input v-model="data.form.title"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮件内容" label-width="100"> |
|||
<el-input v-model="data.form.content" type="textarea" :rows="5" /> |
|||
</el-form-item> |
|||
<el-form-item label="发送道具" label-width="100"> |
|||
<el-card shadow="never" style="width: 100%"> |
|||
|
|||
<el-form v-for="(item, index) in data.form.append" :key="index"> |
|||
<p class="tip-font">客户端金币比例为 1: 1000</p> |
|||
<el-form-item> |
|||
<el-select v-model="item.type" style="width: 100%;" class="mb-10"> |
|||
<el-option v-for="item in data.options" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-input v-model="item.num" style="width: 100%;" class="mb-10"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-row justify="space-between"> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Plus" type="primary" circle @click="addProp"></el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Minus" type="danger" circle @click="delProp"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-form-item> |
|||
<el-form-item label="发送时间" label-width="100"> |
|||
<el-date-picker v-model="data.form.timing" type="datetime" format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"></el-date-picker> |
|||
</el-form-item> |
|||
<div class="paginate-center"> |
|||
<el-button type="primary" @click="$emit('closeBox', false)">取消</el-button> |
|||
<el-button type="danger" @click="onSubmit">确定</el-button> |
|||
</div> |
|||
</el-form> |
|||
|
|||
</template> |
|||
<el-form> |
|||
<el-form-item label="玩家ID" label-width="100"> |
|||
<el-input :value="props.user_no" disabled></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="玩家拥有资产" label-width="100"> |
|||
<el-input :value="`金币 ${props.gold}`" disabled></el-input> |
|||
</el-form-item> |
|||
|
|||
<div v-for="(item, index) in data.form.title"> |
|||
<el-form-item :label="`邮件标题${index+1}`" label-width="100"> |
|||
<el-input v-model="data.form.title[index]"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label="`邮件内容${index+1}`" label-width="100"> |
|||
<!-- <el-input v-model="data.form.content" type="textarea" :rows="5" /> --> |
|||
<CustomEditor @update-content="(v) => data.form.content[index] = v" /> |
|||
</el-form-item> |
|||
</div> |
|||
|
|||
<el-form-item label="" label-width="100"> |
|||
<el-row justify="space-between" style="width: 100%"> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Plus" type="primary" circle @click="addEmail"></el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Minus" type="danger" circle @click="delEmail"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="发送道具" label-width="100"> |
|||
<el-card shadow="never" style="width: 100%"> |
|||
<el-form v-for="(item, index) in data.form.append" :key="index"> |
|||
<p class="tip-font">客户端金币比例为 1: 1000</p> |
|||
<el-form-item> |
|||
<el-select v-model="item.type" style="width: 100%" class="mb-10"> |
|||
<el-option v-for="item in data.options" :label="item.label" :value="item.value"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-input v-model="item.num" style="width: 100%" class="mb-10"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<el-row justify="space-between"> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Plus" type="primary" circle @click="addProp"></el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-button :icon="Minus" type="danger" circle @click="delProp"></el-button> |
|||
</el-col> |
|||
</el-row> |
|||
</el-card> |
|||
</el-form-item> |
|||
<el-form-item label="发送时间" label-width="100"> |
|||
<el-date-picker |
|||
v-model="data.form.timing" |
|||
type="datetime" |
|||
format="YYYY-MM-DD HH:mm:ss" |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
style="width: 100%" |
|||
></el-date-picker> |
|||
</el-form-item> |
|||
<div class="paginate-center"> |
|||
<el-button type="primary" @click="$emit('closeBox', false)">取消</el-button> |
|||
<el-button type="danger" @click="onSubmit">确定</el-button> |
|||
</div> |
|||
</el-form> |
|||
</template> |
|||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue