更新企微投放
This commit is contained in:
王博冉
BIN
src/assets/img/business_wechat.png
Normal file
BIN
src/assets/img/business_wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -275,6 +275,12 @@ const constantRoutes = [
|
|||||||
meta: { showPreview: false, showPublish: false, keepAlive: true, showShare: true },
|
meta: { showPreview: false, showPublish: false, keepAlive: true, showShare: true },
|
||||||
component: () => import(/* webpackChunkName: "publish" */ '@/views/Publish/launch-center/launch-task/create')
|
component: () => import(/* webpackChunkName: "publish" */ '@/views/Publish/launch-center/launch-task/create')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'enterprise-weChat',
|
||||||
|
name: 'enterprise-weChat',
|
||||||
|
meta: { showPreview: false, showPublish: false, keepAlive: true, showShare: true },
|
||||||
|
component: () => import(/* webpackChunkName: "publish" */ '@/views/Publish/launch-center/launch-task/enterpriseWeChat')
|
||||||
|
},
|
||||||
// {
|
// {
|
||||||
// path: "link",
|
// path: "link",
|
||||||
// name: "link",
|
// name: "link",
|
||||||
|
|||||||
@@ -0,0 +1,472 @@
|
|||||||
|
<template>
|
||||||
|
<div class="link-container">
|
||||||
|
<sub-title>基本信息</sub-title>
|
||||||
|
<!-- <div class="title">分享链接</div> -->
|
||||||
|
<div class="content">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="labelCol"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-form-item ref="deliveryName" label="投放名称" name="deliveryName">
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入本次投放名称"
|
||||||
|
v-model:value="formState.deliveryName"
|
||||||
|
:disabled="!iscreate"
|
||||||
|
:show-count="true"
|
||||||
|
:maxlength="50"
|
||||||
|
class="input"
|
||||||
|
>
|
||||||
|
<template #suffix
|
||||||
|
><span class="show-count"> {{ formState.deliveryName.length }}/50</span>
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- <a-form-item ref="attachment" label="附件" name="attachment">
|
||||||
|
<div class="attachment" v-if="iscreate">
|
||||||
|
<span class="input-upload-show" v-if="formState.attachmentName">
|
||||||
|
{{ formState.attachmentName }}
|
||||||
|
<i
|
||||||
|
class="icon iconfont curror"
|
||||||
|
@click="
|
||||||
|
() => {
|
||||||
|
if (iscreate) {
|
||||||
|
deleteUpdate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
"
|
||||||
|
></i
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<a-upload
|
||||||
|
v-else
|
||||||
|
:customRequest="onCustomRequest"
|
||||||
|
:beforeUpload="onBeforeUpload"
|
||||||
|
v-model:file-list="fileList"
|
||||||
|
:accept="'.jpg,.jpeg,.png,.pdf,.rar,.zip'"
|
||||||
|
:showUploadList="false"
|
||||||
|
:directory="false"
|
||||||
|
@change="onUpload"
|
||||||
|
:disabled="!iscreate"
|
||||||
|
>
|
||||||
|
<a-button class="input-upload">
|
||||||
|
<upload-outlined @change="onUpload"></upload-outlined>
|
||||||
|
上传文件
|
||||||
|
</a-button>
|
||||||
|
</a-upload>
|
||||||
|
<span class="show-upload-accept"> 支持扩展名:.jpg .jpeg .png .pdf .rar .zip</span>
|
||||||
|
</div>
|
||||||
|
<div class="attachment" v-if="!iscreate">
|
||||||
|
<a @click="onOpen(formState)"> {{ formState.attachmentName }}</a>
|
||||||
|
</div>
|
||||||
|
</a-form-item> -->
|
||||||
|
<!-- <a-form-item ref="description" label="投放描述" name="description">
|
||||||
|
<a-textarea
|
||||||
|
placeholder="系统会将作答设置信息自动同步，如有额外的投放描述，请在此输入…"
|
||||||
|
v-model:value="formState.description"
|
||||||
|
:auto-size="{ minRows: 5, maxRows: 5 }"
|
||||||
|
type="text-area"
|
||||||
|
:disabled="!iscreate"
|
||||||
|
:maxlength="200"
|
||||||
|
:show-count="true"
|
||||||
|
>
|
||||||
|
</a-textarea>
|
||||||
|
</a-form-item> -->
|
||||||
|
<a-form-item label="样本数量限制" name="">
|
||||||
|
<a-switch class="custom-switch" v-model:checked="formState.checked" />
|
||||||
|
<span v-if="!formState.checked">（不开启样本数量限制）</span>
|
||||||
|
<div class="limitation" v-else>
|
||||||
|
<span> 样本数量达到 </span>
|
||||||
|
<a-input-number :min="1" :max="100000" v-model:value="formState.number" />
|
||||||
|
<span> 时，停止收集数据</span>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="问卷链接" name="">
|
||||||
|
<div class="copy">
|
||||||
|
<a-input v-model:value="formState.code" style="width: 580px"></a-input>
|
||||||
|
<div class="copy-btn" @click="handleCopy">
|
||||||
|
<img class="copy-icon" :src="require('@/assets/img/publish/copy_icon.png')" alt="" />
|
||||||
|
<span>复制</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref, reactive } from "@vue/reactivity";
|
||||||
|
import SubTitle from "@/views/DataAnalyse/components/SubTitle.vue";
|
||||||
|
import { UploadOutlined } from "@ant-design/icons-vue";
|
||||||
|
import common from "@/api/common.js";
|
||||||
|
import { Modal, message } from "ant-design-vue";
|
||||||
|
import { useRoute } from "vue-router";
|
||||||
|
import { deliveryPlan } from "../api/php";
|
||||||
|
import { onMounted } from "@vue/runtime-core";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "share-links",
|
||||||
|
components: {
|
||||||
|
SubTitle,
|
||||||
|
// UploadOutlined,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
status: {
|
||||||
|
type: Number,
|
||||||
|
default: () => 0,
|
||||||
|
},
|
||||||
|
isCreate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: () => true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props, context) {
|
||||||
|
const formRef = ref();
|
||||||
|
|
||||||
|
/*上传文件配置 */
|
||||||
|
|
||||||
|
const accept = "";
|
||||||
|
const route = useRoute();
|
||||||
|
const iscreate = ref(route.query.iscreate === "1");
|
||||||
|
|
||||||
|
const isUpload = ref(false);
|
||||||
|
|
||||||
|
const fileList = ref([]);
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
deliveryName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请输入本次投放名称",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
// { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
|
||||||
|
],
|
||||||
|
attachmentName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: "请上传附件",
|
||||||
|
trigger: "change",
|
||||||
|
trigger: "blur",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// description: [
|
||||||
|
// {
|
||||||
|
// required: true,
|
||||||
|
// message: "请输入投放描述",
|
||||||
|
// trigger: "change",
|
||||||
|
// trigger: "blur",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
};
|
||||||
|
const formState = ref({
|
||||||
|
deliveryName: "",
|
||||||
|
checked: false,
|
||||||
|
number: null,
|
||||||
|
code: "",
|
||||||
|
|
||||||
|
attachmentName: "",
|
||||||
|
description: "",
|
||||||
|
attachment: [],
|
||||||
|
});
|
||||||
|
const onSubmit = () => {
|
||||||
|
return formRef.value.validate();
|
||||||
|
};
|
||||||
|
const resetForm = () => {
|
||||||
|
formRef.value.resetFields();
|
||||||
|
};
|
||||||
|
|
||||||
|
/*上传文件配置 */
|
||||||
|
const onCustomRequest = (file) => {
|
||||||
|
console.log(file || file?.file || file?.file?.originFileObj);
|
||||||
|
};
|
||||||
|
/*上传文件配置 */
|
||||||
|
const onBeforeUpload = (file) => {
|
||||||
|
file = file?.file || file?.file?.originFileObj || file;
|
||||||
|
console.log(file);
|
||||||
|
const isLt50M = file.size / 1024 / 1024 < 50;
|
||||||
|
if (!isLt50M) {
|
||||||
|
Modal.error({
|
||||||
|
title: "提示",
|
||||||
|
content: "上传文件需小于50MB!",
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 上传文件 */
|
||||||
|
const onUpload = async (file) => {
|
||||||
|
file = file?.file && file?.file?.originFileObj;
|
||||||
|
console.log(file);
|
||||||
|
|
||||||
|
const data = await common.cosUpload(file, file.name, "", () => {});
|
||||||
|
console.log(data);
|
||||||
|
fileList.value = [];
|
||||||
|
formState.value.attachmentName = data?.name || file?.name;
|
||||||
|
formState.value.attachment = [
|
||||||
|
{
|
||||||
|
url: data?.url || file?.name,
|
||||||
|
name: file?.name,
|
||||||
|
attachmentId: data?.attachmentId || file?.name,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
isUpload.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteUpdate = () => {
|
||||||
|
console.log("deleteUpdate");
|
||||||
|
formState.value.attachment = "";
|
||||||
|
formState.value.attachmentName = "";
|
||||||
|
formState.value.attachment = [];
|
||||||
|
fileList.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
if (!iscreate.value) {
|
||||||
|
const data = await deliveryPlan({
|
||||||
|
sn: route.query.sn,
|
||||||
|
deliveryPlanId: route.query.id,
|
||||||
|
});
|
||||||
|
// console.log(data);
|
||||||
|
formState.value.deliveryName = data.data.title;
|
||||||
|
formState.value.description = data.data.memo;
|
||||||
|
if (data.data.attachment.length > 0) {
|
||||||
|
formState.value.attachmentName = data.data.attachment[0].name;
|
||||||
|
formState.value.attachment = data.data.attachment;
|
||||||
|
} else {
|
||||||
|
formState.value.attachmentName = "";
|
||||||
|
formState.value.attachment = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
|
||||||
|
const onOpen = (value) => {
|
||||||
|
window.open(value.attachment[0].url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = (text) => {
|
||||||
|
let input = document.createElement("input");
|
||||||
|
input.value = formState.value.code;
|
||||||
|
document.body.appendChild(input);
|
||||||
|
input.select();
|
||||||
|
document.execCommand("Copy");
|
||||||
|
document.body.removeChild(input);
|
||||||
|
message.success("复制成功");
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
formRef,
|
||||||
|
labelCol: {
|
||||||
|
span: 3,
|
||||||
|
style: {
|
||||||
|
"text-align": "left",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
wrapperCol: { span: 14 },
|
||||||
|
other: "",
|
||||||
|
formState,
|
||||||
|
rules,
|
||||||
|
isUpload,
|
||||||
|
fileList,
|
||||||
|
iscreate,
|
||||||
|
onBeforeUpload,
|
||||||
|
deleteUpdate,
|
||||||
|
onCustomRequest,
|
||||||
|
onSubmit,
|
||||||
|
resetForm,
|
||||||
|
onUpload,
|
||||||
|
onOpen,
|
||||||
|
handleCopy,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.link-container {
|
||||||
|
padding: 32px 24px;
|
||||||
|
background: #fff;
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
margin-top: 16px;
|
||||||
|
.limitation {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.isEditTable {
|
||||||
|
::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
|
||||||
|
.ant-table-row-hover,
|
||||||
|
.ant-table-row-hover > td .rowClass {
|
||||||
|
background-color: #f6f7fa !important;
|
||||||
|
color: #e1e2e5;
|
||||||
|
a {
|
||||||
|
color: #e1e2e5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is_copy {
|
||||||
|
color: #2575fe;
|
||||||
|
}
|
||||||
|
.is_onmouse {
|
||||||
|
color: #e1e2e5;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #e1e2e5;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tableBox {
|
||||||
|
margin-top: 16px;
|
||||||
|
.is_active {
|
||||||
|
color: #30c57c;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #30c57c;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is_pause {
|
||||||
|
color: #8c8c8c;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #8c8c8c;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.customer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 54px;
|
||||||
|
}
|
||||||
|
.copy {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.copy-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 76px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f5f5f5;
|
||||||
|
&:hover {
|
||||||
|
background: #d9d9d9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copy-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.share-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.qrcode {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.qrcode img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.download {
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #70b936;
|
||||||
|
}
|
||||||
|
.download-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
width: 328px;
|
||||||
|
height: 32px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.input-upload {
|
||||||
|
width: 103px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.input-upload-show {
|
||||||
|
min-width: 96px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #fafafa;
|
||||||
|
opacity: 1;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
.iconfont {
|
||||||
|
color: #d9d9d9;
|
||||||
|
font-size: 14px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.attachment {
|
||||||
|
display: flex;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.curror {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.show-upload-accept {
|
||||||
|
margin-left: 20px;
|
||||||
|
color: rgb(191, 191, 191);
|
||||||
|
}
|
||||||
|
.show-count {
|
||||||
|
color: rgb(191, 191, 191);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content">
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="formState"
|
||||||
|
:rules="rules"
|
||||||
|
:label-col="labelCol"
|
||||||
|
:wrapper-col="wrapperCol"
|
||||||
|
>
|
||||||
|
<a-form-item label="消息接收者" name="">
|
||||||
|
<a-input
|
||||||
|
placeholder="请输入本次投放名称"
|
||||||
|
v-model:value="formState.deliveryName"
|
||||||
|
:show-count="true"
|
||||||
|
:maxlength="50"
|
||||||
|
class="input"
|
||||||
|
>
|
||||||
|
<template #suffix
|
||||||
|
><span class="show-count"> {{ formState.deliveryName.length }}/50</span>
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button type="text" class="custom-button" @click="addLogicHandle">
|
||||||
|
<div class="flex-align">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span style="margin-left: 6px">新增人群包</span>
|
||||||
|
</div>
|
||||||
|
</a-button>
|
||||||
|
<a-button type="text" class="custom-button" @click="addLogicHandle">
|
||||||
|
<div class="flex-align">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<span style="margin-left: 6px">查看人群包</span>
|
||||||
|
</div>
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="消息内容" name="">
|
||||||
|
<a-textarea
|
||||||
|
placeholder="系统会将作答设置信息自动同步，如有额外的投放描述，请在此输入…"
|
||||||
|
v-model:value="formState.description"
|
||||||
|
:auto-size="{ minRows: 5, maxRows: 5 }"
|
||||||
|
type="text-area"
|
||||||
|
:maxlength="200"
|
||||||
|
:show-count="true"
|
||||||
|
style="min-width:580px"
|
||||||
|
>
|
||||||
|
</a-textarea>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="消息展现示例" name="">
|
||||||
|
<div style="width: 720px;height: 263px;background: #F9F9F9;opacity: 1;display: flex;justify-content: center;padding-top: 30px;">
|
||||||
|
<img style="width: 45px;height: 37px;margin-right: 15px;" :src="require('@/assets/img/business_wechat.png')" alt="">
|
||||||
|
<div style="width: 605px;height: 76px;background: #FFF;border-radius: 4px 4px 4px 4px;opacity: 0.7;padding: 10px;">
|
||||||
|
<span style="color:#000">您好！我们诚邀您参加本次问卷调研。点击</span>
|
||||||
|
<span style="color:#70B936"> xxxx品牌新品调研</span>
|
||||||
|
<span style="color:#000"> 即可参与。感谢您的支持。</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
defineProps({
|
||||||
|
|
||||||
|
})
|
||||||
|
const formState = ref({
|
||||||
|
deliveryName: "",
|
||||||
|
checked: false,
|
||||||
|
number: null,
|
||||||
|
code: "",
|
||||||
|
|
||||||
|
attachmentName: "",
|
||||||
|
description: "",
|
||||||
|
attachment: [],
|
||||||
|
});
|
||||||
|
const labelCol = ref({
|
||||||
|
span: 6,
|
||||||
|
style: {
|
||||||
|
"text-align": "left",
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const wrapperCol = ref({ span: 18 })
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.input {
|
||||||
|
width: 328px;
|
||||||
|
height: 32px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -252,6 +252,7 @@ export default {
|
|||||||
.link-container {
|
.link-container {
|
||||||
padding: 32px 24px;
|
padding: 32px 24px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 10%);
|
||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|||||||
394
src/views/Publish/launch-center/launch-task/enterpriseWeChat.vue
Normal file
394
src/views/Publish/launch-center/launch-task/enterpriseWeChat.vue
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
<template>
|
||||||
|
<div class="launch-center-create">
|
||||||
|
<basicInformation ref="basicInformationRef" :isCreate="isCreate"></basicInformation>
|
||||||
|
<div class="link-container" style="margin-top: 20px">
|
||||||
|
<div class="customer">
|
||||||
|
<sub-title>渠道应用信息</sub-title>
|
||||||
|
<!-- <div class="customer-btn" style="text-align: right">
|
||||||
|
<a-button type="primary" style="margin-right: 12px" @click="open" v-if="isCreate">
|
||||||
|
<i class="iconfont icon-tianjia mr-10"></i>
|
||||||
|
添加渠道应用
|
||||||
|
</a-button>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="tableBox">
|
||||||
|
<quantityLimitTable
|
||||||
|
:isCreate="isCreate"
|
||||||
|
v-model:datasource="datasource"
|
||||||
|
@deleteRecord="deleteRecord"
|
||||||
|
@update:datasource="onUpdate"
|
||||||
|
:publish_number="publish_number"
|
||||||
|
ref="quantityLimitTableRef"
|
||||||
|
></quantityLimitTable>
|
||||||
|
<!-- <launchListEmpty v-else></launchListEmpty> -->
|
||||||
|
</div>
|
||||||
|
<div class="customer-btn" style="text-align: right">
|
||||||
|
<a-button type="primary" style="margin-right: 12px" v-if="isCreate" @click="save">
|
||||||
|
确定投放
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<addChannelApplication
|
||||||
|
ref="addChannelApplicationRef"
|
||||||
|
:datasource="datasource"
|
||||||
|
@selectRows="onSelectRows"
|
||||||
|
></addChannelApplication>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import basicInformation from "../components/enterpriseBasicInformation.vue";
|
||||||
|
import SubTitle from "@/views/DataAnalyse/components/SubTitle.vue";
|
||||||
|
import quantityLimitTable from "../components/enterpriseQuantityLimitTable.vue";
|
||||||
|
import launchListEmpty from "../components/launchListEmpty.vue";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { onMounted, ref, watch } from "@vue/runtime-core";
|
||||||
|
import addChannelApplication from "../components/createChannelApplication.vue";
|
||||||
|
import { add, channels } from "../api/php";
|
||||||
|
import { getQrcode } from "@/api/publish";
|
||||||
|
import { getAnswerSetting } from "@/views/planetDesign/api/api";
|
||||||
|
import { Modal } from "ant-design-vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
basicInformation,
|
||||||
|
quantityLimitTable,
|
||||||
|
// launchListEmpty,
|
||||||
|
SubTitle,
|
||||||
|
addChannelApplication,
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const route = useRoute();
|
||||||
|
const isCreate = ref(false);
|
||||||
|
const addChannelApplicationRef = ref();
|
||||||
|
const basicInformationRef = ref();
|
||||||
|
const datasource = ref([]);
|
||||||
|
const loading = ref(false);
|
||||||
|
const publish_number = ref(0);
|
||||||
|
const quantityLimitTableRef = ref();
|
||||||
|
const id = ref();
|
||||||
|
const router = useRouter();
|
||||||
|
isCreate.value = route.query.iscreate === "1" ? true : false;
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.query.iscreate,
|
||||||
|
(value) => {
|
||||||
|
isCreate.value = value === "1" ? true : false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => route.query.id,
|
||||||
|
(value) => {
|
||||||
|
id.value = value;
|
||||||
|
getList();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
id.value = route.query.id;
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
addChannelApplicationRef.value.showModal(datasource.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectRows = (value) => {
|
||||||
|
datasource.value = JSON.parse(JSON.stringify(value));
|
||||||
|
console.log("onSelectRows", value);
|
||||||
|
};
|
||||||
|
const deleteRecord = (recode) => {
|
||||||
|
datasource.value = JSON.parse(JSON.stringify(datasource.value.filter((s) => s !== recode)));
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async () => {
|
||||||
|
const params = await basicInformationRef.value.onSubmit();
|
||||||
|
if (quantityLimitTableRef.value) {
|
||||||
|
quantityLimitTableRef.value.onSubmit();
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("save", datasource.value);
|
||||||
|
|
||||||
|
if (datasource.value.length > 0) {
|
||||||
|
let sampleQuotaValue = 0;
|
||||||
|
sampleQuotaValue = datasource.value
|
||||||
|
.map((s) => s.sampleQuota)
|
||||||
|
.reduce((s, v) => {
|
||||||
|
let sampleQuota = 0;
|
||||||
|
if (s) {
|
||||||
|
sampleQuota += s || 0;
|
||||||
|
}
|
||||||
|
if (v) {
|
||||||
|
sampleQuota += v;
|
||||||
|
}
|
||||||
|
return sampleQuota;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (sampleQuotaValue > publish_number.value && publish_number.value > 0) {
|
||||||
|
Modal.error({
|
||||||
|
content: "样本数量限制累计不能大于" + publish_number.value,
|
||||||
|
title: "提示",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Modal.error({
|
||||||
|
content: "未添加渠道应用",
|
||||||
|
title: "提示",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
Modal.confirm({
|
||||||
|
title: "提示",
|
||||||
|
content: "确定后,该投放任务将无法修改（除样本数量限制），可在投放中心查询业务进度",
|
||||||
|
okText: "确认",
|
||||||
|
cancelText: "取消",
|
||||||
|
onOk() {
|
||||||
|
setTimeout(async () => {
|
||||||
|
if (params) {
|
||||||
|
const url = await getUrl(route.query.sn);
|
||||||
|
const data = await add({
|
||||||
|
...params,
|
||||||
|
deliverySource: 1,
|
||||||
|
attachment: JSON.stringify(params.attachment),
|
||||||
|
deliveryPlanList: datasource.value.map((s) => {
|
||||||
|
return {
|
||||||
|
channelId: s.systemName,
|
||||||
|
deliveryStatus: 1,
|
||||||
|
// directorCode: s.systemDescribe,
|
||||||
|
// directorName: s.systemAdministrator,
|
||||||
|
outerPlanId: route.query.sn,
|
||||||
|
receiveApplicationCode: s.applicationCode,
|
||||||
|
receiveApplicationName: s.applicationChineseName,
|
||||||
|
sampleQuota: s.sampleQuota > 0 ? s.sampleQuota : 0,
|
||||||
|
questionnaireUrl: url,
|
||||||
|
receiverCodeNameList: JSON.stringify([
|
||||||
|
{
|
||||||
|
receiverCode: s.systemAdministratorPhone,
|
||||||
|
receiverName: s.systemAdministrator,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
})
|
||||||
|
,
|
||||||
|
sn: route.query.sn,
|
||||||
|
});
|
||||||
|
if (data) {
|
||||||
|
Modal.success({
|
||||||
|
title: "提示",
|
||||||
|
content: "添加成功",
|
||||||
|
});
|
||||||
|
router.back();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNum = async () => {
|
||||||
|
const data = await getAnswerSetting(route.query.sn);
|
||||||
|
console.log("getNum", data.data.publish_number);
|
||||||
|
publish_number.value = data.data.publish_number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUrl = async (sn) => {
|
||||||
|
const data = await getQrcode(sn);
|
||||||
|
return data.data.url;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
getNum();
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
|
||||||
|
const getList = async () => {
|
||||||
|
if (!(id.value && route.query.sn)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading.value = true;
|
||||||
|
const data = await channels({
|
||||||
|
sn: route.query.sn,
|
||||||
|
deliveryPlanId: route.query.id,
|
||||||
|
}).finally(() => {
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
datasource.value = data.data.map((s) => {
|
||||||
|
return {
|
||||||
|
systemAdministratorPhone: s.system_administrator_phone,
|
||||||
|
applicationChineseName: s.app_name,
|
||||||
|
systemChineseName: "小程序",
|
||||||
|
sampleQuota: s.samples > 0 ? s.samples : undefined,
|
||||||
|
systemAdministrator: s.system_administrator,
|
||||||
|
id: s.id,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
console.log("data.data.map", datasource.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onUpdate = (value) => {
|
||||||
|
datasource.value = value.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
// eslint-disable-next-line vue/no-dupe-keys
|
||||||
|
basicInformationRef,
|
||||||
|
datasource,
|
||||||
|
isCreate,
|
||||||
|
addChannelApplicationRef,
|
||||||
|
onUpdate,
|
||||||
|
deleteRecord,
|
||||||
|
onSelectRows,
|
||||||
|
publish_number,
|
||||||
|
open,
|
||||||
|
save,
|
||||||
|
quantityLimitTableRef,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.launch-center-create {
|
||||||
|
// position: relative;
|
||||||
|
.link-container {
|
||||||
|
padding: 32px 24px;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 10%);
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.isEditTable {
|
||||||
|
::v-deep .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
|
||||||
|
.ant-table-row-hover,
|
||||||
|
.ant-table-row-hover > td .rowClass {
|
||||||
|
background-color: #f6f7fa !important;
|
||||||
|
color: #e1e2e5;
|
||||||
|
a {
|
||||||
|
color: #e1e2e5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is_copy {
|
||||||
|
color: #2575fe;
|
||||||
|
}
|
||||||
|
.is_onmouse {
|
||||||
|
color: #e1e2e5;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #e1e2e5;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tableBox {
|
||||||
|
margin-top: 16px;
|
||||||
|
.is_active {
|
||||||
|
color: #30c57c;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #30c57c;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is_pause {
|
||||||
|
color: #8c8c8c;
|
||||||
|
padding-left: 15px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
content: "";
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: #8c8c8c;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.customer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 54px;
|
||||||
|
}
|
||||||
|
.copy-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 76px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f5f5f5;
|
||||||
|
&:hover {
|
||||||
|
background: #d9d9d9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.copy-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.share-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.qrcode {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
.qrcode img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.download {
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #70b936;
|
||||||
|
}
|
||||||
|
.download-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mr-10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.fixed {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -65,6 +65,45 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else></div>
|
<div v-else></div>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
wrapClassName="custom-modal"
|
||||||
|
width="624px"
|
||||||
|
style="height:368px"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
:centered="true"
|
||||||
|
:maskClosable="false"
|
||||||
|
:footer="null"
|
||||||
|
@cancel="onCancel"
|
||||||
|
title="选择投放类型"
|
||||||
|
>
|
||||||
|
<div class="delivery-type">
|
||||||
|
<div class="wechat-type" :class="isSelected===1?'selected':''" @click="onSelected(1)">
|
||||||
|
<div class="title">
|
||||||
|
<img :src="require('@/assets/img/business_wechat.png')" alt="">
|
||||||
|
<span>企业微信</span>
|
||||||
|
</div>
|
||||||
|
<div class="present">
|
||||||
|
<p>适用于内部员工调研</p>
|
||||||
|
<p>可指定多成员、多部门、多标签参与</p>
|
||||||
|
</div>
|
||||||
|
<a-button class="custom-button" style="color: #000;" @click="onNewBuilt(1)">
|
||||||
|
开始新建
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="wechat-type" :class="isSelected===2?'selected':''" @click="onSelected(2)">
|
||||||
|
<div class="title">小程序</div>
|
||||||
|
<div class="present program">
|
||||||
|
<p>通过消息中心传递至小程序</p>
|
||||||
|
<p>请先联系小程序运营人员支持标签参与</p>
|
||||||
|
</div>
|
||||||
|
<div class="typeBtn"></div>
|
||||||
|
<a-button class="custom-button" style="color: #000;" @click="onNewBuilt(2)">
|
||||||
|
开始新建
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -138,16 +177,22 @@ export default {
|
|||||||
// projectname.value = res.data.project_name;
|
// projectname.value = res.data.project_name;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
const addLaunchTask = (iscreate = 0, item) => {
|
const addLaunchTask = (iscreate = 0, item) => {
|
||||||
console.log("create", item);
|
console.log("create", item);
|
||||||
router.push({
|
if(iscreate===1) {
|
||||||
path: "create",
|
visible.value = true
|
||||||
query: {
|
}else{
|
||||||
...route.query,
|
// 小程序投放入口
|
||||||
iscreate: iscreate,
|
router.push({
|
||||||
id: item?.record?.plan_id,
|
path: "create",
|
||||||
},
|
query: {
|
||||||
});
|
...route.query,
|
||||||
|
iscreate: iscreate,
|
||||||
|
id: item?.record?.plan_id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
const lockLaunchTask = (item) => {
|
const lockLaunchTask = (item) => {
|
||||||
addLaunchTask(0, item);
|
addLaunchTask(0, item);
|
||||||
@@ -194,6 +239,35 @@ export default {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isSelected = ref(0)
|
||||||
|
const onSelected = (isSelect) => {
|
||||||
|
isSelected.value = isSelect
|
||||||
|
}
|
||||||
|
const onNewBuilt = (type) => {
|
||||||
|
if(type===1) {
|
||||||
|
// 企业微信投放入口
|
||||||
|
router.push({
|
||||||
|
path: "enterprise-weChat",
|
||||||
|
query: {
|
||||||
|
...route.query,
|
||||||
|
iscreate: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}else{
|
||||||
|
// 小程序投放入口
|
||||||
|
router.push({
|
||||||
|
path: "create",
|
||||||
|
query: {
|
||||||
|
...route.query,
|
||||||
|
iscreate: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const onCancel = () => {
|
||||||
|
isSelected.value = 0
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await fetchInfo(route.query.sn);
|
await fetchInfo(route.query.sn);
|
||||||
if (status.value === 1) {
|
if (status.value === 1) {
|
||||||
@@ -225,6 +299,11 @@ export default {
|
|||||||
createQuantityLimitRef,
|
createQuantityLimitRef,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
onShowSizeChange,
|
onShowSizeChange,
|
||||||
|
visible,
|
||||||
|
isSelected,
|
||||||
|
onSelected,
|
||||||
|
onCancel,
|
||||||
|
onNewBuilt,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -389,4 +468,42 @@ export default {
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.delivery-type {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.wechat-type {
|
||||||
|
width: 264px;
|
||||||
|
height: 256px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 6px 6px 6px 6px;
|
||||||
|
opacity: 1;
|
||||||
|
border: 1px solid #DFE0E3;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.wechat-type:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.present {
|
||||||
|
margin: 24px 0 31px;
|
||||||
|
text-align: center;
|
||||||
|
color: #908B8B;
|
||||||
|
p {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.program {
|
||||||
|
margin: 25px 0 32px;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
.selected {
|
||||||
|
border: 1px solid #70B936;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user