宣发

project/sass/apps/Announce/AppAnnounce/components/Add.vue

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