kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

宣发

Browse Source
This commit is contained in:
yanran200730
2022-07-19 17:31:22 +08:00
parent c29d493159
commit 68e26624be
1 changed files with 294 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
project/sass/apps/Announce/AppAnnounce/components/Add.vue
View File

@@ -43,7 +43,7 @@
<div class="add-item" v-for="(item, index) in fileList" :key="index">
<div class="left">
<img :src="mapIcon(item.msgType)" />
<span>{{ item.name }}</span>
<span>{{ item.name || item.linkTitle || item.mpTitle }}</span>
</div>
<i @click="removeFile(index)">删除</i>
</div>
@@ -93,10 +93,10 @@
multiple
:file-list="fileList"
:show-file-list="false"
:before-upload="v => handleChange(v, 10, '.zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt')"
:before-upload="v => handleChange(v, 10, '.zip,.rar,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt')"
:limit="9"
action="/app/wxcp/upload/uploadFile"
accept=".zip、.rar、.doc、.docx、.xls、.xlsx、.ppt、.pptx、.pdf、.txt"
accept=".zip,.rar,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.txt"
:http-request="v => submitUpload(v, '3')">
<div class="content-item" trigger>
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
@@ -107,7 +107,7 @@
<img src="https://cdn.cunwuyun.cn/dvcp/announce/site.png" />
<p>网页</p>
</div>
<div class="content-item">
<div class="content-item" @click="isShowAddMiniapp = true">
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png" />
<p>小程序</p>
</div>
@@ -141,7 +141,48 @@
<img class="phone" src="https://cdn.cunwuyun.cn/dvcp/announce/phone.png" />
<img class="phone-wrapper" src="https://cdn.cunwuyun.cn/dvcp/announce/phone-wrapper.png" />
<div class="right-content">
<div class="msg-list">
<div class="msg-item" v-if="form.content">
<div class="msg-item__left"></div>
<div class="msg-item__right">
<div class="msg-wrapper msg-text">
<p>{{ form.content }}</p>
</div>
</div>
</div>
<div class="msg-item" v-for="(item, index) in fileList" :key="index">
<div class="msg-item__left"></div>
<div class="msg-item__right" :class="[['1', '2'].indexOf(item.msgType) !== -1 ? 'left-border' : '']">
<div class="msg-wrapper msg-img" v-if="item.msgType === '1'">
<img :src="item.url" />
</div>
<div class="msg-wrapper msg-video" v-if="item.msgType === '2'">
<video controls :src="item.url"></video>
</div>
<div class="msg-wrapper msg-file" v-if="item.msgType === '3'">
<div class="msg-left">
<h2>{{ item.name }}</h2>
<p>11k</p>
</div>
<img src="https://cdn.cunwuyun.cn/dvcp/announce/folder.png" />
</div>
<div class="msg-wrapper msg-link" v-if="item.msgType === '4'">
<h2>{{ item.linkTitle }}</h2>
<div class="msg-right">
<p>{{ item.linkDesc }}</p>
<img :src="item.linkPicUrl" />
</div>
</div>
<div class="msg-wrapper msg-miniapp" v-if="item.msgType === '5'">
<h2>{{ item.mpTitle }}</h2>
<div class="msg-bottom">
<i>小程序</i>
<img src="https://cdn.cunwuyun.cn/dvcp/announce/miniapp.png">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ai-dialog
@@ -174,7 +215,39 @@
</el-input>
</el-form-item>
<el-form-item label="封面图" prop="linkPicUrl" style="width: 100%;" :rules="[{ required: true, message: '请上传封面图', trigger: 'change' }]">
<ai-uploader :instance="instance" v-model="form.linkPicUrl" :limit="1"></ai-uploader>
<ai-uploader :instance="instance" v-model="linkForm.linkPicUrl" :limit="1"></ai-uploader>
</el-form-item>
</div>
</el-form>
</ai-dialog>
<ai-dialog
:visible.sync="isShowAddMiniapp"
width="920px"
title="小程序消息"
@close="onClose"
@onConfirm="onMiniAppForm">
<el-form ref="miniAppForm" :model="miniAppForm" label-width="130px" label-position="right">
<div class="ai-form">
<el-form-item label="小程序appid" style="width: 100%;" prop="mpAppid" :rules="[{ required: true, message: '小程序appid', trigger: 'blur' }]">
<el-input
size="small"
placeholder="小程序appid"
v-model="miniAppForm.mpAppid">
</el-input>
</el-form-item>
<el-form-item label="小程序page路径" style="width: 100%;" prop="mpPage" :rules="[{ required: true, message: '请输入小程序page路径', trigger: 'blur' }]">
<el-input
size="small"
placeholder="请输入小程序page路径"
v-model="miniAppForm.mpPage">
</el-input>
</el-form-item>
<el-form-item label="标题" style="width: 100%;" prop="mpTitle" :rules="[{ required: true, message: '请输入标题', trigger: 'blur' }]">
<el-input
size="small"
placeholder="请输入标题"
v-model="miniAppForm.mpTitle">
</el-input>
</el-form-item>
</div>
</el-form>
@@ -205,12 +278,18 @@
department: [],
fileList: [],
isShowAddLink: false,
isShowAddMiniapp: false,
linkForm: {
linkPicUrl: [],
linkDesc: '',
linkTitle: '',
linkUrl: ''
},
miniAppForm: {
mpAppid: '',
mpPage: '',
mpTitle: ''
},
form: {
content: '',
choiceTime: '',
@@ -228,6 +307,16 @@
}
},
watch: {
fileList (v) {
if (v.length) {
setTimeout(() => {
document.querySelector('.right-content').scrollTo(0, 999999)
}, 800)
}
}
},
created () {
this.getTags()
@@ -265,7 +354,7 @@
if (valid) {
this.fileList.push({
...this.linkForm,
linkPicUrl: this.linkPicUrl[0].url,
linkPicUrl: this.linkForm.linkPicUrl[0].url,
msgType: '4'
})
@@ -274,11 +363,27 @@
})
},
onMiniAppForm () {
this.$refs.miniAppForm.validate((valid) => {
if (valid) {
this.fileList.push({
...this.miniAppForm,
msgType: '5'
})
this.isShowAddMiniapp = false
}
})
},
onClose () {
this.linkForm.linkPicUrl = []
this.linkForm.linkDesc = ''
this.linkForm.linkTitle = ''
this.linkForm.linkUrl = ''
this.miniAppForm.mpAppid = ''
this.miniAppForm.mpPage = ''
this.miniAppForm.mpTitle = ''
},
removeFile (index) {
@@ -520,6 +625,7 @@
top: 0;
width: 338px;
height: 675px;
padding: 90px 15px 90px 32px;
.phone {
position: absolute;
@@ -538,6 +644,187 @@
width: 338px;
height: 675px;
}
.right-content {
position: relative;
z-index: 11;
height: 100%;
overflow-y: auto;
.msg-item {
display: flex;
margin-bottom: 20px;
.msg-item__left {
width: 42px;
height: 42px;
margin-right: 16px;
background: #2891FF;
border-radius: 4px;
flex-shrink: 1;
}
.msg-item__right {
position: relative;
flex: 1;
&::after {
position: absolute;
top: 16px;
left: 0;
z-index: 1;
width: 0;
height: 0;
border-right: 6px solid #fff;
border-left: 6px solid transparent;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
content: " ";
transform: translate(-100%, 0%);
}
&.left-border::after {
display: none;
}
.msg-img img {
max-width: 206px;
max-height: 200px;
}
.msg-video video {
max-width: 206px;
max-height: 200px;
}
.msg-text {
max-width: 206px;
width: max-content;
line-height: 1.3;
padding: 12px;
text-align: justify;
background: #FFFFFF;
border-radius: 5px;
font-size: 14px;
color: #222222;
}
.msg-miniapp {
width: 206px;
text-align: justify;
background: #FFFFFF;
border-radius: 5px;
font-size: 14px;
color: #222222;
h2 {
line-height: 1.2;
padding: 8px 10px 8px;
border-bottom: 1px solid #eee;
color: #222222;
font-size: 14px;
}
.msg-bottom {
display: flex;
align-items: center;
line-height: 1;
padding: 8px 12px;
i {
margin-right: 4px;
font-size: 12px;
font-style: normal;
color: #999;
}
img {
width: 20px;
height: 20px;
border-radius: 50%;
}
}
}
.msg-file {
display: flex;
align-items: center;
width: 206px;
padding: 12px;
background: #FFFFFF;
border-radius: 5px;
.msg-left {
flex: 1;
margin-right: 18px;
h2 {
display: -webkit-box;
flex: 1;
line-height: 16px;
margin-bottom: 4px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
color: #222222;
font-size: 14px;
}
p {
color: #888888;
font-size: 12px;
}
}
img {
width: 44px;
height: 44px;
border-radius: 2px;
}
}
.msg-link {
width: 206px;
height: 102px;
padding: 12px;
background: #FFFFFF;
border-radius: 5px;
h2 {
margin-bottom: 4px;
color: #222222;
font-size: 14px;
font-weight: normal;
}
.msg-right {
display: flex;
align-items: center;
p {
display: -webkit-box;
flex: 1;
line-height: 16px;
margin-right: 10px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
color: #888;
font-size: 12px;
}
img {
width: 50px;
height: 50px;
border-radius: 4px;
}
}
}
}
}
}
}
}