Files
dvcp_v2_wxcp_app/library/project/qianxinan/AppCooperationPropaganda/addPropaganda.vue
2024-10-31 14:34:57 +08:00

1354 lines
41 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div class="addPropaganda">
<div class="task_name">
<div><span class="color_red">*</span><span class="title">任务名称</span></div>
<u-input v-model="form.taskTitle" type="text" placeholder="请输入" maxlength="15" class="inpt"/>
</div>
<div class="send_scope">
<div><span class="color_red">*</span><span class="title">发送范围</span></div>
<div @click="toSleectScoped">
<span>
<span>
<span class="color_gray" v-if="sum==0">请选择</span>
<span v-else>预计送达{{ sum }}
<span v-if="type=='ResidentsGroup'">个居民群</span>
<span v-if="type=='Residents'">个居民</span>
<span v-if="type=='CircleOfFriends'">个朋友圈</span>
</span>
</span>
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
</span>
</div>
</div>
<div class="send_content">
<div class="content_title">
<div><span class="color_red">*</span><span class="title">发送内容</span></div>
<div style="color: #3399FF;" @click="preview">预览</div>
</div>
<div class="content_text">
<u-input v-model="content" type="textarea" height="372" :clearable="false" :auto-height="true" placeholder="请输入政策、活动、节日问候等内容" maxlength="1300"/>
</div>
<div class="content_fodder">
<div class="fodder_alls">
<div class="fodder_add" @click="showUpload = true"><u-icon name="plus" color="#CCD0D3" size="32"></u-icon></div>
<div class="fodder_title">添加素材</div>
</div>
<!-- 本地素材 -->
<div class="fodder_file" v-for="(item, index) in files" :key="item.id">
<div class="item">
<div class="images">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.name }}</div>
<div class="size">{{ item.fileSizeStr }}</div>
</div>
<div class="remove" @click="remove(index)" style="color: #f72c27">删除</div>
</div>
</div>
<!-- 素材库 -->
<!-- <div class="fodder_file" v-for="(item, index) in checkedList" :key="item.id">
<div class="item">
<div class="images">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.title }}</div>
<div class="size">{{ item.fileSizeStr }}</div>
</div>
<div class="remove" @click="removeSucai(index)" style="color: #f72c27">删除</div>
</div>
</div> -->
<!-- 网页 -->
<div class="fodder_file" v-for="(item, index) in webListInfo" :key="index">
<div class="item">
<div class="images">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.linkTitle }}</div>
</div>
<div class="remove" @click="removeWeb(index)" style="color: #f72c27">删除</div>
</div>
</div>
<!-- 小程序 -->
<div class="fodder_file" v-for="(item, index) in appListInfo" :key="index">
<div class="item">
<div class="images">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/file.png" alt="">
</div>
<div class="info">
<div class="name">{{ item.mpTitle }}</div>
</div>
<div class="remove" @click="removeApp(index)" style="color: #f72c27">删除</div>
</div>
</div>
</div>
</div>
<div class="send_scope">
<div><span class="color_red"></span><span class="title">标签</span></div>
<div @click="toSelectTag">
<span>
<span>
<span class="color_gray" v-if="tagList==0">请选择</span>
<span v-else>已选择{{ tagList.length }}个标签</span>
</span>
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
</span>
</div>
</div>
<div class="isExamine">
<div class="examineChange">
<div>宣发需要审批</div>
<u-switch v-model="enableExamine" size="40" @change="enableExamine = !!enableExamine"></u-switch>
</div>
<div class="examine_person" v-if="enableExamine == true">
<div><span class="color_red">*</span><span class="title">审批人</span></div>
<AiPagePicker type="custom" :selected.sync="form.examines" @select="getExamines" nodeKey="id" :ops="{url:`./selectDeptUser?selectTtype=0`,label: 'id'}">
<span class="label" v-if="form.examines.length">已选择{{ form.examines.length }}名人员</span>
<span class="color_gray" v-else>请选择</span>
<u-icon name="arrow-right" color="#CCD0D3" size="28"/>
</AiPagePicker>
</div>
<div class="examineChange">
<div>定时发送</div>
<u-switch v-model="isTimedTask" size="40" @change="isTimedTask = !!isTimedTask"></u-switch>
</div>
<div class="examine_person" v-if="isTimedTask == true">
<div><span class="color_red">*</span><span class="title">发送时间</span></div>
<div @click="showTaskTime = true">
<span class="color_gray" v-if="!form.choiceTime.length">请选择</span>
<span v-if="form.choiceTime.length">{{ form.choiceTime }}</span>
<u-icon name="arrow-right" color="#CCD0D3"/>
</div>
</div>
<div class="examineChange">
<div><span class="color_red">*</span>结束时间</div>
<div @click="showEndTime = true">
<span class="color_gray" v-if="!form.taskEndTime.length">请选择</span>
<span v-else>{{ form.taskEndTime }}</span>
<u-icon name="arrow-right" color="#CCD0D3"/>
</div>
</div>
<u-picker v-model="showEndTime" :params="endParams" mode="time" @confirm="choiceEndTime"></u-picker>
</div>
<u-picker v-model="showTaskTime" :params="params" mode="time" @confirm="choiceTime"></u-picker>
<div class="mask" v-show="showPopup" @tap="showPopup = false">
<div class="noticeModal" @tap.stop>
<div class="body">
<div class="text_content" v-if="content.length">
<img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
<div class="text_right">{{ content }}</div>
</div>
<!-- 本地素材 -->
<div class="file_content" v-for="item in files" :key="item.id">
<img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
<img class="only_pic" :src="item.url" alt="" v-if="['.jpg', '.jpeg','.png'].indexOf(getExtension(item.name)) !== -1">
<video controls class="only_video" :src="item.url" v-if="getExtension(item.name) == '.mp4'"></video>
<div class="text_right file_right"
v-if="['.jpg', '.jpeg','.png','.mp4'].indexOf(getExtension(item.name)) === -1">
<div class="cont_left">
<h4>{{ item.name }}</h4>
<p>{{ item.fileSizeStr }}</p>
</div>
<div class="cont_right">
<img :src="fileIcon(item.name)" alt="">
</div>
</div>
</div>
<!-- 素材库 -->
<div class="file_content" v-for="item in checkedList" :key="item.id">
<img class="text_left" src="https://cdn.cunwuyun.cn/dvcp/announce/avatar.png" />
<img class="only_pic" :src="item.imgPicUrl" alt="" v-if="item.type==1">
<video controls class="only_video" :src="item.fileUrl" v-if="item.type == 4"></video>
<div class="text_right file_right" v-if="['0','2','3','5'].includes(item.type)">
<div class="cont_left">
<h4>{{ item.title }}</h4>
<p v-if="['1', '4', '3'].includes(item.type)">{{ item.fileSizeStr }}</p>
<p v-if="item.type==5">{{ item.linkUrl }}</p>
</div>
<div class="cont_right">
<img v-if="['2', '4', '5'].includes(item.type)" :src="item.pictureUrl" alt="">
<img v-else :src="sucaiIcon[item.type]" alt="">
</div>
</div>
</div>
</div>
<div class="footer">
<div class="exit" @click="showPopup = false">退出预览</div>
</div>
</div>
</div>
<u-popup v-model="showUpload" mode="bottom" border-radius="24">
<div class="uploadPopup">
<div class="upload_card" v-for="(item,index) in uploadList" :key="index">
<!-- <div class="upload_item">{{ item.title }}</div> -->
<scroll-view scroll-x="">
<div class="upload_list">
<div class="lists_item" v-for="(e, i) in item.list" :key="i" @click="uploadBtn(e.msgType)">
<img :src="e.icon" alt="">
<span>{{ e.name }}</span>
</div>
</div>
</scroll-view>
</div>
<div class="btnCancel" @click="showUpload = false">取消</div>
</div>
</u-popup>
<u-popup v-model="showAddWeb" mode="bottom" border-radius="24" class="popup-form">
<div class="item">
<div class="left">
<span>*</span><span>标题</span>
</div>
<input type="text" class="right__text" v-model="webInfo.linkTitle" placeholder="请输入" maxlength="42"/>
</div>
<div class="item">
<div class="left">
<span>*</span><span>链接</span>
</div>
<input type="text" class="right__text" v-model="webInfo.linkUrl" placeholder="请输入" maxlength="682"/>
</div>
<div class="item">
<div class="left">
<span></span><span>描述</span>
</div>
<input type="text" class="right__text" v-model="webInfo.linkDesc" placeholder="请输入" maxlength="170"/>
</div>
<div class="items">
<div class="left">
<span style="margin-right: 8px"></span><span>封面图</span>
</div>
<div style="margin-top: 10px;">
<AiUploader :def.sync="webInfo.linkPicUrl" :limit="1" multiple action="/admin/file/add2" v-if="showAddWeb"></AiUploader>
</div>
</div>
<div class="popup-btn" @click="addWeb">确定</div>
</u-popup>
<u-popup v-model="showAddApp" mode="bottom" border-radius="24" class="popup-form">
<div class="item">
<div class="left">
<span>*</span><span>小程序appid</span>
</div>
<input type="text" class="right__text" v-model="appInfo.mpAppid" placeholder="请输入" />
</div>
<!-- <div class="item">
<div class="left">
<span>*</span><span>小程序page路径</span>
</div>
<input type="text" class="right__text" v-model="appInfo.mpPage" placeholder="请输入" />
</div> -->
<div class="items">
<div class="left">
<span>*</span><span>小程序page路径</span>
</div>
<input type="text" class="textarea" v-model="appInfo.mpPage" placeholder="请输入" maxlength="100"/>
</div>
<div class="item">
<div class="left">
<span>*</span><span>标题</span>
</div>
<input type="text" class="right__text" v-model="appInfo.mpTitle" placeholder="请输入" maxlength="170"/>
</div>
<div class="items">
<div class="left">
<span style="margin-right: 8px">*</span><span>封面图</span>
</div>
<div style="margin-top: 10px;">
<AiUploader :def.sync="appInfo.media" @data="appMediaChange" :limit="1" multiple action="/app/wxcp/upload/uploadFile" v-if="showAddApp"></AiUploader>
</div>
</div>
<div class="popup-btn" @click="addApp">确定</div>
</u-popup>
<div class="btn">
<div class="submitBtn" @click="confirm">通知成员发送</div>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
name: "addPropaganda",
data() {
return {
type: '',
form: {
taskTitle: '',
contents: [], // 发送内容
enableExamine: '0', // 是否需要审批 0否 1是
examines: [], // 审批人
choiceTime: '', // 定时发送时间
sendScope: '', // 0全部居民群、1按部门选择、2按网格选择
sendType: '0', // 0立即发送、1定时发送
wxGroups: [], // 送达居民群
filterCriteria: '',
taskEndTime: '', // 任务结束时间
sendChannel: 0,
},
forms: {
taskTitle: '',
taskType: '',
executorList: [], // 任务执行人集合(群发朋友圈的执行人)
groupList: [], // 添加人集合
contents: [], // 发送内容
enableExamine: '0', // 是否需要审批 0否 1是
examines: [], // 审批人
choiceTime: '', // 定时发送时间
sendScope: '', // 0全部居民群、1按部门选择、2按网格选择
sendType: '0', // 0立即发送、1定时发送
gender: '', // 性别0-女、1-男、2-全部
filterCriteria: '',
filterTags: '', //过滤标签id集合
filterTagsName: '', //过滤标签名称
excludeFilterTags: '', // 剔除标签id集合
excludeFilterTagsName: '', // 剔除标签名称
addFromTime: '',
addEndTime: '',
taskEndTime: '', // 任务结束时间
markTag: '', //标签选择
},
enableExamine: false,
isTimedTask: false,
content: '',
files: [],
showTaskTime: false,
userList: [],
showPopup: false,
showFodder: false,
showUpload: false,
showEndTime: false,
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: false,
},
endParams: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: true,
timestamp: false,
},
flag: false,
uploadList: [
// {
// title: '从素材库上传',
// list: [
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-script.png',
// name: '话术',
// msgType: '0'
// },
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-picture.png',
// name: '图片',
// msgType: '1'
// },
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-video.png',
// name: '视频',
// msgType: '4'
// },
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-document.png',
// name: '文件',
// msgType: '3'
// },
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-routine.png',
// name: '小程序',
// msgType: '2'
// },
// {
// icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-web.png',
// name: '网页',
// msgType: '5'
// },
// ]
// },
{
title: '从本地上传',
list: [
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-picture.png',
name: '图片',
msgType: 'image'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-video.png',
name: '视频',
msgType: 'video'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-document.png',
name: '文件',
msgType: 'file'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-web.png',
name: '网页',
msgType: 'web'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-routine.png',
name: '小程序',
msgType: 'app'
},
]
}
],
uploadCircle: [
{
title: '从素材库上传',
list: [
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-script.png',
name: '话术',
msgType: '0'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-picture.png',
name: '图片',
msgType: '1'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-video.png',
name: '视频',
msgType: '4'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-web.png',
name: '网页',
msgType: '5'
},
]
},
{
title: '从本地上传',
list: [
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-picture.png',
name: '图片',
msgType: 'image'
},
{
icon: 'https://cdn.cunwuyun.cn/dvcp/announce/ic-video.png',
name: '视频',
msgType: 'video'
},
]
}
],
midiaIds: [],
sum: null,
// 筛选条件
girdListIds: [], // 网格id集合
deptListIds: [], // 部门id集合
ResidentTags: [], // 居民包含
ResidentTagsRemove: [], // 居民剔除
circleTags: [], // 朋友圈包含
circleTagsRemove: [], // 朋友圈剔除
startTime: '',
endTime: '',
checkedList: [],
sucaiIcon: [
'https://cdn.cunwuyun.cn/dvcp/announce/ic-script.png',
'https://cdn.cunwuyun.cn/dvcp/announce/ic-picture.png',
'https://cdn.cunwuyun.cn/dvcp/announce/ic-routine.png',
'https://cdn.cunwuyun.cn/dvcp/announce/ic-document.png',
'https://cdn.cunwuyun.cn/dvcp/announce/ic-video.png',
'https://cdn.cunwuyun.cn/dvcp/announce/ic-web.png',
],
tagList: [],
showAddWeb: false,
webInfo: {},
webListInfo: [],
showAddApp: false,
appInfo: {media: []},
appListInfo: []
}
},
methods: {
...mapActions(['selectEnterpriseContact']),
// 发送范围
toSleectScoped() {
uni.navigateTo({url: `./sendScoped?type=${this.type}`})
},
// 预览
preview() {
this.showPopup = true;
},
fileIcon(name) {
if (['.zip', '.rar','.mp4'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/zip.png'
}
if (['.doc', '.docx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/world.png'
}
if (['.xls', '.xlsx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/xls.png'
}
if (['.txt'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/txt.png'
}
if (['.pdf'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/pdf.png'
}
if (['.ppt', '.pptx'].indexOf(this.getExtension(name)) !== -1) {
return 'https://cdn.cunwuyun.cn/dvcp/announce/ppt.png'
}
},
getExtension(name) {
return name.substring(name.lastIndexOf('.'))
},
uploadBtn(type) {
if(type == 'web') {
this.showAddWeb = true
this.webInfo = {}
return false
}
if(type == 'app') {
this.showAddApp = true
this.appInfo = {media: []}
return
}
let count = 9 - (this.files?.length || 0) - (this.checkedList?.length || 0)
if(count > 0){
let params = {
count,
sizeType: ['compressed'],
sourceType: ['album'],
success: (res) => {
// console.log(res);
let count = this.files?.length + (res.tempFiles?.length || res.tempFile ? 1 : 0)
if (count > 9) {
return this.$u.toast(`不能超过9个`)
}
let maxImage = 10 * 1024 * 1024// 10M
let maxVideo = 10 * 1024 * 1024// 10M
let maxFile = 20 * 1024 * 1024// 20M
if (res.tempFiles) {
if(type == "image") {
if(res.tempFiles.every(e=> e.size > maxImage)) {
return this.$u.toast(`图片最大不能超过10M`)
}
}
if(type == "file") {
if(res.tempFiles.every(e=> e.size > maxFile)) {
return this.$u.toast(`文件最大不能超过20M`)
}
}
res.tempFiles?.map((item) => {
this.uploadFile(item,type)
})
} else if (res?.tempFile) {
if(type == "video") {
if(res.tempFile.size > maxVideo) {
return this.$u.toast(`视频最大不能超过10M`)
}
}
this.uploadFile(res.tempFile,type)
}
},
}
if (type == 'image') {
uni.chooseImage(params)
} else if (type == 'video') {
uni.chooseVideo(params)
} else if(type == 'file') {
uni.chooseFile(params)
} else {
uni.navigateTo({url: `./fodderList?type=${this.type}&msgType=${type}`})
this.showUpload = false
}
} else {
this.$u.toast(`不能超过9个`)
}
},
uploadFile(img,type) {
uni.showLoading({title: '上传中'})
let formData = new FormData()
formData.append('file', img)
formData.append('type', type)
let url = ''
if(this.type=='Residents' || this.type=='ResidentsGroup') {
url = `/app/wxcp/upload/uploadFile`
} else if(this.type=='CircleOfFriends') {
url = `/app/wxcp/upload/uploadAttachment?attachmentType=1&mediaType=${type}`
}
this.$http.post(url, formData,{
withCredentials: false
}).then((res) => {
uni.hideLoading()
if (res?.data) {
this.$u.toast('上传成功!')
this.showUpload = false
this.files.push({
...res.data.file,
media: res.data.media,
msgType: type,
sysFileId: res.data.file.id,
imgPicUrl: res.data.file.url,
mediaId: res.data.media.mediaId
})
}
}).catch(res => {
this.$u.toast(res)
uni.hideLoading()
})
},
remove(index) {
this.files.splice(index, 1)
},
removeSucai(index) {
this.checkedList.splice(index, 1)
uni.setStorageSync("checkedList", this.checkedList)
},
choiceTime(e) {
this.form.choiceTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
},
choiceEndTime(e) {
this.form.taskEndTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
},
confirm() {
if(this.flag) return
if(!this.form.taskTitle) {
return this.$u.toast('请输入任务名称')
}
if(!this.form.sendScope || this.sum == 0) {
return this.$u.toast('请选择发送范围')
}
if(!this.content) {
return this.$u.toast("请输入发送内容")
}
this.form.contents = []
// 文本
const firstContent = [
{
content: this.content,
msgType: '0'
},
]
this.form.contents.push(...firstContent)
// 图片
const picUrl = this.files.filter(i=> ['.jpg','.jpeg','.png'].indexOf(this.getExtension(i.name)) !== -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '1',
mediaId: e.mediaId
}
})
this.form.contents.push(...picUrl)
// 视频
const video = this.files.filter(i=> ['.mp4'].indexOf(this.getExtension(i.name)) !== -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '2',
mediaId: e.mediaId
}
})
this.form.contents.push(...video)
// 文件
const files = this.files.filter(i=> ['.mp4','.jpg','.jpeg','.png'].indexOf(this.getExtension(i.name)) == -1).map(e=>{
return {
imgPicUrl: e.url,
msgType: '3',
mediaId: e.mediaId
}
})
this.form.contents.push(...files)
//网页
this.webListInfo.map((item) => {
if(item.linkPicUrl && item.linkPicUrl.length) {
item.linkPicUrl = item.linkPicUrl[0].url
}
item.msgType = '4'
})
this.form.contents.push(...this.webListInfo)
//小程序
this.appListInfo.map((item) => {
if(item.media && item.media.length) {
item.sysFileId = item.media[0].id
item.mediaId = item.media[0].mediaId
item.url = item.media[0].url
}
item.msgType = '5'
})
this.form.contents.push(...this.appListInfo)
if(this.checkedList.length) {
this.form.contents.push(...this.checkedList)
}
if(this.type=='Residents' || this.type=='CircleOfFriends') {
this.forms.contents = this.form.contents
this.forms.taskTitle = this.form.taskTitle
}
if(this.enableExamine) { // 是否需要审批0否、1
if(!this.form.examines.length) {
return this.$u.toast("请选择审批人")
} else {
this.forms.examines = this.form.examines
}
this.form.enableExamine = 1
this.forms.enableExamine = 1
} else {
this.form.enableExamine = 0
this.forms.enableExamine = 0
this.form.examines = []
this.forms.examines = []
}
if(this.isTimedTask) { // 发送类型0立即发送、1定时发送
this.form.sendType = 1
this.forms.sendType = 1
if(!this.form.choiceTime.length) {
return this.$u.toast("请选择发送时间")
} else if (new Date(this.form.choiceTime).getTime() < Date.now()) {
return this.$u.toast('定时发送时间不得早于当前时间')
}
this.forms.choiceTime = this.form.choiceTime
} else {
this.form.sendType = 0
this.forms.sendType = 0
this.forms.choiceTime = ''
this.form.choiceTime = ''
}
if(!this.form.taskEndTime) {
return this.$u.toast("请选择结束时间")
}
this.flag = true
let formData = {}
let url = ''
if(this.type=='CircleOfFriends' || this.type=='Residents') { //群发朋友圈、居民
url = `/app/whchatmomentstask/addOrUpdate`
this.forms.gender = this.sex
this.forms.addFromTime = this.startTime
this.forms.addEndTime = this.endTime
this.forms.taskEndTime = this.form.taskEndTime
formData = this.forms
} else if(this.type=='ResidentsGroup') { // 群发居民群
url = `/app/appmasssendingtask/addOrUpdate`
this.form.filterCriteria = this.girdListIds.toString() || this.deptListIds.toString() || ''
formData = this.form
}
this.form.markTag = this.tagList.join(',')
console.log(formData)
this.$http.post(url, { ...formData }).then(res=>{
if(res?.code == 0) {
this.flag = false
this.$u.toast("新增成功")
setTimeout(() => {
uni.navigateBack()
}, 600)
}
}).then(()=> {
this.removeStorage()
}).catch((err)=>{
this.flag = false
this.$u.toast(err)
})
},
removeStorage() {
uni.removeStorageSync('userSelect')
uni.removeStorageSync('wxGroupsUser')
uni.removeStorageSync('girdSelect')
uni.removeStorageSync('deptList')
uni.removeStorageSync('sendScope')
uni.removeStorageSync('ResidentTags') // 居民包含
uni.removeStorageSync('ResidentTagsRemove') // 居民剔除
uni.removeStorageSync('circleTags') // 朋友圈包含
uni.removeStorageSync('circleTagsRemove') // 朋友圈剔除
uni.removeStorageSync('startTime')
uni.removeStorageSync('endTime')
uni.removeStorageSync('selectDeptUser')
uni.removeStorageSync('checkedList')
uni.removeStorageSync('tagList')
},
getExamines(list) {
this.form.examines = list?.map(e => {
return {
...e,
examineUserId: e.id,
examineUserName: e.name
}
})
uni.setStorageSync('selectDeptUser', list)
},
toSelectTag() {
uni.navigateTo({url: `./selectTag?selected=${this.tagList.join(',')}`})
},
addWeb() {
if(!this.webInfo.linkTitle) {
return this.$u.toast('请输入标题')
}
if(!this.webInfo.linkUrl) {
return this.$u.toast('请输入链接')
}
this.webListInfo.push(this.webInfo)
this.showAddWeb = false
},
removeWeb(index) {
this.webListInfo.splice(index, 1)
},
appMediaChange(e) {
this.$nextTick(() => {
console.log(this.appInfo.media)
this.appInfo.media.map((item) => {
if(item.id == e.file.id) {
item.mediaId = e.media.mediaId
}
})
})
},
addApp() {
if(!this.appInfo.mpAppid) {
return this.$u.toast('请输入小程序appid')
}
if(!this.appInfo.mpPage) {
return this.$u.toast('请输入小程序page路径')
}
if(!this.appInfo.mpTitle) {
return this.$u.toast('请输入标题')
}
if(!this.appInfo.media.length) {
return this.$u.toast('请上传封面图')
}
this.appListInfo.push(this.appInfo)
this.showAddApp = false
},
removeApp(index) {
this.appListInfo.splice(index, 1)
},
},
watch: {
type: {
handler(v) {
if(v) {
if(v=='Residents') {
this.forms.taskType = 1
this.uploadList = this.uploadList
} else if(v=='CircleOfFriends') {
this.forms.taskType = 0
this.uploadList = this.uploadCircle
} else if(v=='ResidentsGroup') {
this.uploadList = this.uploadList
}
}
}
}
},
onLoad(o) {
this.type = o.type;
document.title = this.type=='ResidentsGroup'? "群发居民群": this.type=='Residents'? "群发居民": "群发朋友圈"
//清除发送范围,审批人缓存
uni.setStorageSync('sendScope', [])
uni.setStorageSync('wxGroupsUser', [])
uni.setStorageSync('selectDeptUser', [])
uni.setStorageSync('deptList', [])
uni.setStorageSync('tagList', [])
},
onShow() {
this.tagList = uni.getStorageSync('tagList') || []
this.form.wxGroups = uni.getStorageSync('wxGroupsUser') || []
this.form.sendScope = uni.getStorageSync('sendScope')
if(this.type=='Residents') {
this.forms.taskType = 1
this.forms.sendScope = this.form.sendScope
this.forms.groupList = this.form.wxGroups
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.customerCount, 0)
} else if(this.type=='CircleOfFriends') {
this.forms.taskType = 0
this.forms.sendScope = this.form.sendScope
this.forms.executorList = this.form.wxGroups
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.customerCount, 0)
} else if(this.type == 'ResidentsGroup') {
this.sum = this.form.wxGroups.reduce((pre, cur) => pre + cur.groupCount, 0)
}
this.forms.taskTitle = this.form.taskTitle
const girdArr = uni.getStorageSync('girdSelect')
if(girdArr.length) {
this.girdListIds = girdArr.map(e=>e.id)
}
const deptArr = uni.getStorageSync('deptList')
if(deptArr.length) {
this.deptListIds = deptArr.map(v=>v.id)
}
// 性别
this.sex = uni.getStorageSync('gender')
// 标签
if(this.type == 'Residents') {
this.ResidentTags = uni.getStorageSync('ResidentTags') // 居民包含
this.ResidentTagsRemove = uni.getStorageSync('ResidentTagsRemove') // 居民剔除
if(this.ResidentTags.length) {
this.forms.filterTags = this.ResidentTags.map(e=> e.id).toString()
this.forms.filterTagsName = this.ResidentTags.map(e=> e.name).toString()
} else if(this.ResidentTagsRemove) {
this.forms.excludeFilterTags = this.ResidentTagsRemove.map(e=> e.id).toString()
this.forms.excludeFilterTagsName = this.ResidentTagsRemove.map(e=> e.name).toString()
}
} else if(this.type == 'CircleOfFriends') {
this.circleTags = uni.getStorageSync('circleTags') // 朋友圈包含
this.circleTagsRemove = uni.getStorageSync('circleTagsRemove') // 朋友圈剔除
if(this.circleTags.length) {
this.forms.filterTags = this.circleTags.map(e=> e.id).toString()
this.forms.filterTagsName = this.circleTags.map(e=> e.name).toString()
} else if(this.circleTagsRemove.length) {
this.forms.excludeFilterTags = this.circleTagsRemove.map(e=> e.id).toString()
this.forms.excludeFilterTagsName = this.circleTagsRemove.map(e=> e.name).toString()
}
}
// 时间
this.startTime = uni.getStorageSync('startTime')
this.endTime = uni.getStorageSync('endTime')
uni.$on("pagePicker:custom", ()=> {
this.form.examines = uni.getStorageSync('selectDeptUser').map(e=> {
return {
...e,
examineUserId: e.id,
examineUserName: e.name
}
})
})
this.form.examines = uni.getStorageSync('selectDeptUser')?.map(e => {
return {
...e,
examineUserId: e.id,
examineUserName: e.name
}
})
uni.$on("fodder",()=> {
this.checkedList = uni.getStorageSync('checkedList').filter(i => i.type != 0)
})
this.checkedList = uni.getStorageSync('checkedList')?.filter(i=> i.type != 0) || []
let arr = uni.getStorageSync('checkedList')?.filter(e => e.type == 0) || []
if (arr.length) {
let arrStr = arr.map(i => i.content)
this.content = this.content.concat(' ', arrStr.toString())
uni.setStorageSync('checkedList', this.checkedList)
}
}
}
</script>
<style lang="scss" scoped>
.addPropaganda {
font-size: 32px !important;
padding-bottom: 140px;
box-sizing: border-box;
.task_name,
.send_scope,
.send_content {
background: #FFF;
padding: 32px;
box-sizing: border-box;
margin-bottom: 16px;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
.title {
font-weight: 400;
font-size: 32px;
}
}
.send_scope {
display: flex;
justify-content: space-between;
}
.send_content {
.content_title {
display: flex;
justify-content: space-between;
}
.content_text {
margin-top: 12px;
border-bottom: 1px solid #DDD;
}
.content_fodder {
margin-top: 16px;
.fodder_alls {
display: flex;
margin-top: 16px;
align-items: center;
.fodder_add {
border: 2px solid #DBDCDF;
padding: 20px 24px;
box-sizing: border-box;
border-radius: 8px;
}
.fodder_title {
color: #8E8F91;
margin-left: 20px;
}
}
.fodder_file {
margin-top: 16px;
width: 100%;
.item {
display: flex;
.images {
margin-right: 32px;
img {
width: 80px;
height: 80px;
}
}
.info {
width: calc(100% - 200px);
.name {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.size {
color: #9b9b9b;
}
}
.reUpload {
color: #1365DD;
margin-left: 20px;
}
.remove {
color: #f72c27;
margin-left: 20px;
}
}
}
}
}
.isExamine {
background: #FFF;
padding: 0px 32px;
box-sizing: border-box;
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
.examineChange,
.examine_person {
display: flex;
justify-content: space-between;
padding: 26px 0px;
box-sizing: border-box;
border-top: 2px solid #DDD;
}
.examine_person {
// padding: 26px 0 0 0;
}
}
.color_red {
color: #FF4466;
}
.color_gray {
color: #CCD0D3;
}
.inpt {
margin-left: 14px;
}
.mask {
position: fixed;
top: 0;
bottom: 0;
margin: 0;
left: 0;
right: 0;
background: rgba(#000, 0.6);
z-index: 202103021409;
width: 100%;
height: 100%;
}
::v-deep .noticeModal {
position: fixed;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
width: 90%;
height: 85%;
.body {
background: #EBECF0;
border-radius: 16px 16px 0 0;
padding: 32px;
box-sizing: border-box;
height: 100%;
overflow-y: auto;
font-size: 28px;
font-weight: 400;
color: #333;
line-height: 48px;
.text_content,
.file_content {
display: flex;
margin-bottom: 32px;
.text_left {
margin-right: 32px;
width: 84px;
height: 84px;
}
.only_pic {
max-width: 206px;
max-height: 200px;
}
.only_video {
max-width: 284px;
max-height: 160px;
}
.text_right {
width: calc(100% - 116px);
background: #FFF;
border-radius: 10px;
padding: 24px;
box-sizing: border-box;
position: relative;
&::before {
position: absolute;
content: "";
width: 0;
height: 0;
top: 18px;
left: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-left: 12px solid transparent;
border-right: 12px solid #fff;
transform: translate(-100%, 0%);
}
}
.file_right {
display: flex;
.cont_left {
width: calc(100% - 90px);
h4 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: normal;
}
p {
color: #888888;
}
}
.cont_right {
width: 84px;
height: 84px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.footer {
width: 100%;
height: 112px;
line-height: 112px;
text-align: center;
background: #FFF;
border-radius: 0 0 16px 16px;
border-top: 2px solid #EEEEEE;
}
}
.uploadPopup {
width: 100%;
background: #F7F7F7;
.upload_card {
padding: 32px 32px 0 32px;
box-sizing: border-box;
.upload_item {
margin-bottom: 32px;
}
.upload_list {
text-align: center;
height: 140px;
display: flex;
flex-wrap: nowrap;
.lists_item {
margin-right: 48px;
img {
display: inline-block;
width: 84px;
height: 84px;
}
}
}
}
.btnCancel {
width: 100%;
height: 120px;
line-height: 120px;
text-align: center;
border-top: 2px solid #DDDDDD;
margin-top: 80px;
}
}
.btn {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 128px;
padding: 24px 32px;
box-sizing: border-box;
background: #FFF;
z-index: 9;
.submitBtn {
background: #1365DD;
width: 100%;
height: 80px;
line-height: 80px;
text-align: center;
color: #FFF;
border-radius: 8px;
}
}
.popup-form {
.item {
display: flex;
padding: 32px;
box-sizing: border-box;
border-bottom: 1px solid #DDDDDD;
.left {
width: 240px;
span:first-child {
color: #FF4466;
}
}
.right__text {
width: calc(100% - 240px);
text-align: right;
}
.color-999 {
color: #999;
}
.color-333 {
color: #333;
}
}
.items {
padding: 32px;
box-sizing: border-box;
border-bottom: 1px solid #DDDDDD;
.left {
span:first-child {
color: #FF4466;
}
}
.text {
margin-top: 20px;
}
.textarea {
margin-top: 32px;
}
.tags {
margin-top: 20px;
span {
display: inline-block;
width: 31%;
height: 80px;
line-height: 80px;
text-align: center;
box-sizing: border-box;
border-radius: 16px;
border: 1px solid #CCCCCC;
margin-right: 20px;
margin-bottom: 16px;
}
span:nth-child(3n) {
margin-right: 0;
}
.isCheck {
color: #FFF;
background: #4181FF;
}
}
}
.popup-btn {
width: 100%;
height: 98px;
background: #1365DD;
line-height: 98px;
text-align: center;
color: #FFF;
}
}
}
</style>