348 lines
8.5 KiB
Vue
348 lines
8.5 KiB
Vue
<template>
|
||
<div class="massDispatch">
|
||
<div class="tips">
|
||
<u-icon name="error-circle-fill" size="30" color="#ff9900"></u-icon>请于{{ data.taskEndTime }}前完成群发任务</div>
|
||
<div class="task">
|
||
<div class="task_title">群发客户群</div>
|
||
<div class="task_content">
|
||
<div class="item">
|
||
<span>任务名称</span>
|
||
<span>{{ data.taskTitle }}</span>
|
||
</div>
|
||
<div class="item">
|
||
<span>创建人</span>
|
||
<span>{{ data.createUserName }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="task_results" v-if="data.enableExamine == 1">
|
||
<img v-if="data.status == 1" src="./images/refuse.png" alt="">
|
||
<img v-if="data.status == 2" src="./images/pass.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div class="scope">
|
||
<span>群发范围</span>
|
||
<span>我的全部居民群</span>
|
||
</div>
|
||
<div class="content">
|
||
<p>群发内容</p>
|
||
<div>
|
||
<!-- 文本 -->
|
||
<div class="textarea" v-show="content.length">{{ content }}</div>
|
||
<!-- 图片 -->
|
||
<div class="pictures" v-show="picList.length">
|
||
<image v-for="(item, index) in picList" :key="index" :src="item.imgPicUrl" @click.stop="previewImages(picList, item.imgPicUrl)"/>
|
||
</div>
|
||
<!-- 视频 -->
|
||
<div class="video" v-show="videoList.length">
|
||
<video v-for="(item, index) in videoList" :key="index" :src="item.imgPicUrl"/>
|
||
</div>
|
||
<!-- 文件 -->
|
||
<div class="file" v-show="fileList.length">
|
||
<div class="file_item" v-for="(item,index) in fileList" :key="index" @click="prevFile(item.sysFile)">
|
||
<img src="./images/files.png" alt="">
|
||
<div>{{ item.sysFile.name }}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 网页 -->
|
||
<div class="webpage" v-show="webpage.length">
|
||
<p>链接地址</p>
|
||
<a v-for="(item, index) in webpage" :key="index" :href="item.linkUrl">
|
||
<div v-if="item.linkTitle">{{item.linkTitle}}</div>
|
||
<div v-else>{{ item.linkUrl }}</div>
|
||
</a>
|
||
</div>
|
||
<!-- 小程序 -->
|
||
<div class="miniapp" v-show="miniapp.length">
|
||
<p>小程序</p>
|
||
<div v-for="(item, index) in miniapp" :key="index">{{item.mpTitle}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="subBtn" @click="toSend">
|
||
<div>前往群发</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState , mapActions } from "vuex";
|
||
export default {
|
||
name: "massDispatch",
|
||
data() {
|
||
return {
|
||
id: "",
|
||
data: {},
|
||
content: '',
|
||
picList: [],
|
||
videoList: [],
|
||
fileList: [],
|
||
webpage: [],
|
||
miniapp: [],
|
||
pictres: [],
|
||
options: '',
|
||
approver: [], //审批人
|
||
}
|
||
},
|
||
onLoad(o) {
|
||
this.id = o.id
|
||
},
|
||
computed: {
|
||
...mapState(['user'])
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
this.$http.post(`/app/appmasssendingtask/queryDetailById?id=${this.id}`).then(res=> {
|
||
if (res?.data) {
|
||
this.data = res.data
|
||
this.content = res.data.contents.filter(v=> v.msgType == 0)?.[0].content
|
||
this.picList = res.data.contents.filter(v=> v.msgType == 1)
|
||
this.videoList = res.data.contents.filter(v=> v.msgType == 2)
|
||
this.fileList = res.data.contents.filter(v=> v.msgType == 3)
|
||
this.webpage = res.data.contents.filter(v=> v.msgType == 4)
|
||
this.miniapp = res.data.contents.filter(v=> v.msgType == 5)
|
||
this.approver = res.data.examines
|
||
}
|
||
})
|
||
},
|
||
previewImages(images, img) {
|
||
uni.previewImage({
|
||
urls: images.map(v => v.imgPicUrl),
|
||
current: img
|
||
})
|
||
},
|
||
...mapActions(['previewFile', 'shareToExternalChat']),
|
||
prevFile(file) {
|
||
this.$loading()
|
||
this.previewFile({ ...file }).then(()=>{
|
||
this.$hideLoading()
|
||
})
|
||
},
|
||
|
||
|
||
|
||
|
||
// msgtype: "miniprogram", // 消息类型，必填
|
||
// miniprogram: {
|
||
// appid: "", // 小程序的appid
|
||
// title: "", // 小程序消息的title
|
||
// imgUrl : "", //小程序消息的封面图。必须带http或者https协议头
|
||
// page: "", //小程序消息打开后的路径，注意要以.html作为后缀，否则在微信端打开会提示找不到页面
|
||
// },
|
||
// },
|
||
|
||
// {
|
||
// msgtype: "file", // 消息类型，必填，从3.1.12版本开始支持
|
||
// file:{
|
||
// mediaid:"", // 文件的素材id，必填
|
||
// },
|
||
// },
|
||
|
||
toSend() {
|
||
// 文本
|
||
const text = {
|
||
content: this.content
|
||
}
|
||
const data = []
|
||
// 图片
|
||
const imgs = this.picList.map(v =>{
|
||
return {
|
||
msgtype: "image",
|
||
image: {
|
||
mediaid: v.mediaId,
|
||
imgUrl: v.imgPicUrl,
|
||
},
|
||
}
|
||
})
|
||
data.push(imgs)
|
||
// 视频
|
||
const videos = this.videoList.map(v =>{
|
||
return {
|
||
msgtype: "video",
|
||
video:{
|
||
mediaid: v.mediaId,
|
||
},
|
||
}
|
||
})
|
||
data.push(videos)
|
||
// 文件
|
||
const files = this.fileList.map(v => {
|
||
return {
|
||
msgtype: "file",
|
||
file:{
|
||
mediaid: v.mediaId,
|
||
},
|
||
}
|
||
})
|
||
data.push(files)
|
||
|
||
// 链接
|
||
// const links = this.webpage.map(v =>{
|
||
// return {
|
||
// msgtype: "link", // 消息类型，必填
|
||
// link: {
|
||
// title: "", // H5消息标题
|
||
// imgUrl: "", // H5消息封面图片URL
|
||
// desc: "", // H5消息摘要
|
||
// url: "", // H5消息页面url 必填
|
||
// },
|
||
// }
|
||
// })
|
||
|
||
|
||
|
||
this.shareToExternalChat({ ...text, attachments: data }).then((res) =>{
|
||
console.log(res,'返回的数据');
|
||
})
|
||
},
|
||
},
|
||
onShow() {
|
||
document.title = "群发居民群任务"
|
||
this.getDetail()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.massDispatch {
|
||
padding: 32px 32px 140px 32px;
|
||
box-sizing: border-box;
|
||
|
||
.tips {
|
||
width: 100%;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
background: #fff1e8;
|
||
border: 1px solid #ff9e61;
|
||
border-radius: 8px;
|
||
margin-bottom: 16px;
|
||
padding: 0 30px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.task {
|
||
position: relative;
|
||
margin-bottom: 24px;
|
||
background: #FFF;
|
||
border-radius: 8px;
|
||
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
|
||
.task_title {
|
||
padding: 26px 32px;
|
||
box-sizing: border-box;
|
||
border-bottom: 2px solid #DDDDDD;
|
||
}
|
||
.task_content {
|
||
padding: 0 32px 26px 32px;
|
||
box-sizing: border-box;
|
||
.item {
|
||
display: flex;
|
||
padding-top: 26px;
|
||
box-sizing: border-box;
|
||
span:first-child {
|
||
width: 160px;
|
||
color: #999999;
|
||
}
|
||
span:last-child {
|
||
width: calc(100% - 160px);
|
||
}
|
||
}
|
||
}
|
||
.task_results {
|
||
position: absolute;
|
||
right: 30px;
|
||
top: 30px;
|
||
img {
|
||
width: 160px;
|
||
height: 130px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
background: #FFF;
|
||
border-radius: 8px;
|
||
padding: 26px 32px;
|
||
box-sizing: border-box;
|
||
.scope {
|
||
display: flex;
|
||
margin-bottom: 16px;
|
||
span:first-child {
|
||
width: 160px;
|
||
color: #999;
|
||
}
|
||
span:last-child {
|
||
width: calc(100% - 160px);
|
||
}
|
||
}
|
||
.content {
|
||
p {
|
||
color: #999;
|
||
}
|
||
.textarea,
|
||
.pictures,
|
||
.video,
|
||
.file,
|
||
.webpage,
|
||
.miniapp {
|
||
background: #F9F9F9;
|
||
border-radius: 4px;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
margin-top: 26px;
|
||
}
|
||
.pictures {
|
||
margin-top: 16px;
|
||
image {
|
||
width: 190px;
|
||
height: 190px;
|
||
margin-right: 4px;
|
||
margin-bottom: 4px;
|
||
}
|
||
image:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
.video {
|
||
video {
|
||
height: 300px;
|
||
}
|
||
}
|
||
.file {
|
||
.file_item {
|
||
display: flex;
|
||
align-items: center;
|
||
img {
|
||
width: 96px;
|
||
height: 96px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.subBtn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 118px;
|
||
background: #f4f8fb;
|
||
padding: 18px 32px;
|
||
box-sizing: border-box;
|
||
|
||
|
||
div {
|
||
width: 100%;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
background: #1365dd;
|
||
border-radius: 4px;
|
||
font-size: 32px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
</style> |