diff --git a/project/sass/apps/Announce/AppAnnounce/components/Add.vue b/project/sass/apps/Announce/AppAnnounce/components/Add.vue index 4d8901f2..c1d3f307 100644 --- a/project/sass/apps/Announce/AppAnnounce/components/Add.vue +++ b/project/sass/apps/Announce/AppAnnounce/components/Add.vue @@ -43,7 +43,7 @@
- {{ item.name }} + {{ item.name || item.linkTitle || item.mpTitle }}
删除
@@ -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')">
@@ -107,7 +107,7 @@

网页

-
+

小程序

@@ -141,7 +141,48 @@
- +
+
+
+
+
+

{{ form.content }}

+
+
+
+
+
+
+
+ +
+
+ +
+
+
+

{{ item.name }}

+

11k

+
+ +
+ +
+

{{ item.mpTitle }}

+
+ 小程序 + +
+
+
+
+
- + + + + + + + +
+ + + + + + + + + + +
@@ -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; + } + } + } + } + } + } } }