|
@@ -0,0 +1,249 @@
|
|
|
+<template>
|
|
|
+ <el-form :model="formCallback" label-width="120px" ref="form" v-loading="loading" class="pr-4">
|
|
|
+ <el-form-item label="活动名称" prop="is_roi" :rules="[{ required: true, message: '活动名称必须填写' }]" label-width="120px">
|
|
|
+ <el-input v-model="formCallback.keyword" placeholder="请输入活动名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="消息内容" prop="type" :rules="[{ required: true, message: '消息类型必须填写' }]" label-width="120px">
|
|
|
+ <el-radio-group v-model="formCallback.type">
|
|
|
+ <el-radio label="txt">文本消息</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="" label-width="120px">
|
|
|
+ <el-card class="box-card" style="width:500px;">
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <el-popover placement="right" :visible="popoverVisible" trigger="click">
|
|
|
+ <template #reference>
|
|
|
+ <el-button link :icon="Plus" @click="popoverVisible = !popoverVisible">插入内容</el-button>
|
|
|
+ </template>
|
|
|
+ <div class="flex flex-col items-start justify-start">
|
|
|
+ <el-link :underline="false" class="m-1" @click="insertChange('link')">插入小程序链接</el-link>
|
|
|
+ <el-link :underline="false" class="m-1" @click="insertChange('text')">插入纯文本</el-link>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="insert-content">
|
|
|
+ <div v-for="(item, index) in formCallback.content" :key="index">
|
|
|
+ <el-button type="primary" link v-if="item.link" @click="linkClick({ index, ...item })">
|
|
|
+ {{ item.title }}
|
|
|
+ </el-button>
|
|
|
+ <el-input style="boder:none;" v-else v-model="item.title" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送用户" prop="is_roi" :rules="[{ required: true, message: '活动名称必须填写' }]" label-width="120px">
|
|
|
+ <el-radio-group v-model="formCallback.user">
|
|
|
+ <el-radio :label="3">全部粉丝</el-radio>
|
|
|
+ <el-radio :label="6">标签用户</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="人群包" prop="callback_config_id"
|
|
|
+ :rules="[{ required: true, message: '请选择人群包', trigger: 'change' }]">
|
|
|
+ <el-select v-model="formCallback.callback_config_id" filterable remote clearable :remote-method="remoteMethod"
|
|
|
+ placeholder="请选择人群包">
|
|
|
+ <el-option v-for="(item, index) in crowdPackageList" :key="index" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-button type="primary" link size="default" @click="addCrowdPackage">新增人群包</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="发送时间" prop="callback_config_id"
|
|
|
+ :rules="[{ required: true, message: '请选择发送时间', trigger: 'change' }]">
|
|
|
+ <div>
|
|
|
+ <el-date-picker unlink-panels clearable @change="sendTimeChange" format="YYYY/MM/DD hh:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD h:m:s" v-model="formCallback.sendTime" type="datetime" placeholder="选择日期时间" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" v-for="(time, index) in timeArr" :key="index" link size="default"
|
|
|
+ @click="setSendTime(time)">{{ time.name }}</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="flex justify-end">
|
|
|
+ <el-button type="primary" @click="submitForm(form)">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <Dialog v-model="insertVisible" :title="insertTitle" destroy-on-close @update:modelValue="formCallbackinsert = {}">
|
|
|
+ <el-form :model="formCallbackinsert" label-width="120px" ref="insertform" v-loading="loading" class="pr-4">
|
|
|
+ <div v-if="insertType == 'link'">
|
|
|
+ <div class="withdraw-popup-warn">
|
|
|
+ <span>需先</span>
|
|
|
+ <el-link class="text-lg font-bold text-blue-400 cursor-pointer" type="primary" href="https://element-plus.org"
|
|
|
+ target="_blank">关联小程序</el-link>
|
|
|
+ <span>,已关联的小程序可被使用在自定义菜单、模板消息和附近的小程序等场景中</span>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '标题必须填写' }]" label-width="120px">
|
|
|
+ <el-input style="width:300px;" v-model="formCallbackinsert.title" auto-complete="off"
|
|
|
+ placeholder="请输入标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="链接" prop="link" :rules="[{ required: true, message: '链接必须填写' }]" label-width="120px">
|
|
|
+ <el-input style="width:300px;" v-model="formCallbackinsert.link" auto-complete="off"
|
|
|
+ placeholder="请输入链接"></el-input>
|
|
|
+ <el-button type="primary" link :icon="Plus" @click="linkVisible = true" class="mr-6">插入链接</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-form-item label="标题" prop="title" :rules="[{ required: true, message: '标题必须填写' }]" label-width="120px">
|
|
|
+ <el-input style="width:300px;" type="textarea" v-model="formCallbackinsert.title" auto-complete="off"
|
|
|
+ placeholder="请输入标题"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-end">
|
|
|
+ <el-button type="primary" @click="insertSubmitChange(insertform)">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ <Dialog v-model="linkVisible" title="选择链接" destroy-on-close>
|
|
|
+ <generateLink @close="linkClose" />
|
|
|
+ </Dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { Plus, InfoFilled } from '@element-plus/icons-vue';
|
|
|
+import { FormInstance } from 'element-plus';
|
|
|
+import { useRouter, useRoute } from 'vue-router'
|
|
|
+import { wechatPlatformKeywordAdd, wechatPlatformKeywordEdit } from '@/api/officialAccount/keywordReply/index'
|
|
|
+import generateLink from './generateLink.vue'
|
|
|
+import moment from 'moment';
|
|
|
+const router = useRouter()
|
|
|
+const route = useRoute()
|
|
|
+const insertform = ref()
|
|
|
+const form = ref()
|
|
|
+const crowdPackageList = ref([])
|
|
|
+const props = defineProps({
|
|
|
+ primary: Object | null,
|
|
|
+});
|
|
|
+const timeArr = [
|
|
|
+ { name: '10分钟后', value: '10', format: "minutes" },
|
|
|
+ { name: '30分钟后', value: '30', format: "minutes" },
|
|
|
+ { name: '1小时后', value: '1', format: "hours" }
|
|
|
+]
|
|
|
+const emit = defineEmits(['close']);
|
|
|
+const loading = ref(false)
|
|
|
+const linkVisible = ref(false)
|
|
|
+const popoverVisible = ref(false)
|
|
|
+const insertVisible = ref(false)
|
|
|
+const formCallback = ref({ type: 'txt', content: [] })
|
|
|
+const formCallbackinsert = ref({})
|
|
|
+const insertType = ref()
|
|
|
+const insertTitle = computed(() => insertType.value == 'link' ? '插入小程序链接' : '插入纯文本')
|
|
|
+const insertChange = (type: string) => {
|
|
|
+ insertType.value = type;
|
|
|
+ insertVisible.value = true;
|
|
|
+ popoverVisible.value = false;
|
|
|
+}
|
|
|
+const linkClick = (row: object) => {
|
|
|
+ formCallbackinsert.value = row
|
|
|
+ insertVisible.value = true
|
|
|
+ insertType.value = 'link'
|
|
|
+}
|
|
|
+
|
|
|
+const setSendTime = (item: object) => {
|
|
|
+ console.log(item, 'setSendTime', moment().add(item.value, item.format).format('YYYY-MM-DD HH:mm:ss'));
|
|
|
+ formCallback.value.sendTime = moment().add(item.value, item.format).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+}
|
|
|
+const sendTimeChange = (e: object) => {
|
|
|
+ console.log(e, 'timeChangetimeChangetimeChange');
|
|
|
+}
|
|
|
+
|
|
|
+const addCrowdPackage = () => {
|
|
|
+ router.push({ path: '', query: {} })
|
|
|
+}
|
|
|
+
|
|
|
+const initRemoteOption = (type: string, params?: object) => {
|
|
|
+ switch (type) {
|
|
|
+ case '':
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const remoteMethod = (query: string) => {
|
|
|
+ if (query) {
|
|
|
+ initRemoteOption("callbackJuliangAccountList", { name: query })
|
|
|
+ } else {
|
|
|
+ initRemoteOption("callbackJuliangAccountList")
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+const insertSubmitChange = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl
|
|
|
+ .validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (formCallbackinsert.value.index != undefined) {
|
|
|
+ formCallback.value.content[formCallbackinsert.value?.index] = formCallbackinsert.value
|
|
|
+ } else {
|
|
|
+ formCallback.value.content.push(formCallbackinsert.value)
|
|
|
+ }
|
|
|
+ insertVisible.value = false
|
|
|
+ formCallbackinsert.value = {}
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => { });
|
|
|
+}
|
|
|
+
|
|
|
+const linkClose = (e: any) => {
|
|
|
+ console.log(e);
|
|
|
+}
|
|
|
+// 提交回传配置
|
|
|
+const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ loading.value = true;
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl
|
|
|
+ .validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (props.primary?.id) {
|
|
|
+ wechatPlatformKeywordEdit(props.primary?.id, formCallback.value).then(res => {
|
|
|
+ ElMessage.success(res.message)
|
|
|
+ emit('close')
|
|
|
+ }).catch(e => {
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ wechatPlatformKeywordAdd(formCallback.value).then(res => {
|
|
|
+ ElMessage.success(res.message)
|
|
|
+ emit('close')
|
|
|
+ }).catch(e => {
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ loading.value = false;
|
|
|
+ } else {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(() => { });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+if (props.primary) {
|
|
|
+ console.log(props.primary, 'props.primary');
|
|
|
+ formCallback.value = JSON.parse(JSON.stringify(props.primary))
|
|
|
+ formCallback.value.content = [{ title: 'dsds' }, { title: 'sdds', link: 'dsdsds' }]
|
|
|
+}
|
|
|
+onMounted(() => {
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.withdraw-popup-warn {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.insert-content {
|
|
|
+ min-height: 200px;
|
|
|
+ max-height: 468px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+</style>
|