feat: 客户朋友圈 - 支持选择素材

project/src/components/assembly/conTwo.vue

@@ -9,6 +9,10 @@
             <div class="f14">添加图片</div>
           </div>
         </el-upload>
+        <div class="flex-align-center" style="margin-top:10px;">
+          <el-button type="primary" size="mini" style="margin-right:10px;" @click="onClickSelectMaterials('TP')">选择素材</el-button>
+          <div class="uploadImgHint" style="margin:0">可直接从素材库选择图片。</div>
+        </div>
         <el-dialog append-to-body :visible.sync="imgVisible">
           <img width="100%" :src="dialogImageUrl" alt="">
         </el-dialog>
@@ -60,6 +64,10 @@
                   <div class="f14">添加封面</div>
                 </div>
               </el-upload>
+              <div class="flex-align-center" style="margin-top:10px;">
+                <el-button type="primary" size="mini" style="margin-right:10px;" @click="onClickSelectMaterials('TWLJ')">选择素材</el-button>
+                <div class="uploadImgHint" style="margin:0">可直接从素材库选择图片。</div>
+              </div>
               <el-dialog append-to-body :visible.sync="coverVisible">
                 <img width="100%" :src="dialogcoverUrl" alt="">
               </el-dialog>
@@ -88,15 +96,23 @@
       <template v-if="conType==0">因企业微信限制，图片长宽建议不超过1440x1080，大小不超过10M，最多9张图片</template>
       <template v-if="conType==1">因企业微信限制，视频建议不超过1280X720，帧率30FPS，视频码率1.67Mbps，最长不超过30s，最大不超过10MB，最多1个视频</template>
     </div>
+
+    <!-- 选择素材 -->
+    <selectMaterials :selectVisible="selectMaterialsVisible" @cancel="selectMaterialsVisible = false" @selectObj="selectMaterialsConfirm"></selectMaterials>
   </div>
 </template>
 
 <script>
 import radarEntrance from './radarEntrance.vue'
+import selectMaterials from "@/components/manage/materialLibrary/dialog/selectMaterials.vue"
+
 export default {
   name: "conTwo",
   props: ['conType', 'reBackData', 'disabled'],
-  components:{radarEntrance},
+  components:{
+    radarEntrance,
+    selectMaterials,
+  },
   data () {
     return {
       imageFileList: [],
@@ -144,7 +160,9 @@ export default {
       videoFlag: false,
       hoverInFlag: false,
       radarIds:[],
-      radar_attach:[]
+      radar_attach:[],
+      selectMaterialsVisible: false, // 选择素材弹框
+      selectMaterialsSource:'', // 选择素材 - 判断是从哪里点击的
     }
   },
   created () {
@@ -231,7 +249,7 @@ export default {
         })
       } else if (this.conType == 2) {
         this.$message({
-          message: '最多上传1个照片',
+          message: '最多上传1张图片',
           type: "warning"
         })
       }
@@ -276,6 +294,7 @@ export default {
         } else if (this.conType == 2) {
           this.linkUrl.link.media_id = res.rst.material_id
           this.linkUrl.link.pic_url = res.rst.url
+          this.handleSetCoverFileList()
           this.$loading(this.$loadingConfig).close()
         }
         this.fromRebackGetInfo = false
@@ -312,18 +331,20 @@ export default {
       //     type: 'warning'
       //   })
       // }
-
       if (res.status == 'success') {
         if (this.conType == 0) {
+          const delId = res.media_id || res.response.rst.material_id
           let ids = []//所有图片的id集合
           this.imgUrls.forEach(item => {
             ids.push(item.image.media_id)
           })
-          let deleImgidx = ids.indexOf(finallyRes.rst.material_id)
+          let deleImgidx = ids.indexOf(delId)
           this.imgUrls.splice(deleImgidx, 1)
+          this.handleSetImageFileList()
         } else if (this.conType == 2) {
           this.linkUrl.link.media_id = ''
           this.linkUrl.link.pic_url = ''
+          this.handleSetCoverFileList()
         }
       }
     },
@@ -340,10 +361,73 @@ export default {
     beforeUploadUpload (file) {
       this.$loading(this.$loadingConfig);
     },
+
+    // 点击选择素材
+    onClickSelectMaterials(val) {
+      this.selectMaterialsSource = val
+      if (this.selectMaterialsSource == 'TP' && this.imgUrls && this.imgUrls.length == 9) { // 图片
+        this.handleExceed()
+        return false
+      } else if (this.selectMaterialsSource == 'TWLJ' && this.linkUrl && this.linkUrl.link.media_id) { // 图文链接
+        this.handleExceed()
+        return false
+      }
+      this.selectMaterialsVisible = true
+    },
+    // 选择素材回调
+    selectMaterialsConfirm(data){
+      if (data && data.url) {
+        if (this.selectMaterialsSource == 'TP') { // 图片
+          this.imgUrls.push({
+            msgtype: 'image',
+            image: {
+              media_id: data.material_id,
+              pic_url: data.url,
+            }
+          })
+          this.handleSetImageFileList()
+        } else if (this.selectMaterialsSource == 'TWLJ') { // 图文链接
+          this.linkUrl.link.media_id = data.material_id
+          this.linkUrl.link.pic_url = data.url
+          this.handleSetCoverFileList()
+        }
+        this.selectMaterialsVisible = false
+      } else {
+        this.$message({ message: '所选素材不可用，请重新选择！', type: 'warning' })
+      }
+    },
+    async handleSetImageFileList() {
+      this.imageFileList = []
+      await this.$nextTick()
+      this.imgUrls.forEach(img => {
+        this.imageFileList.push({
+          media_id: img.image.media_id,
+          url: img.image.pic_url,
+        })
+      })
+    },
+    async handleSetCoverFileList() {
+      this.coverFileList = []
+      await this.$nextTick()
+      if (this.linkUrl.link.media_id) {
+        this.coverFileList.push({
+          media_id: this.linkUrl.link.media_id,
+          url: this.linkUrl.link.pic_url,
+        })
+      }
+    },
   }
 }
 </script>
 <style lang="scss">
+.uploadImgHint {
+  font-size: 13px;
+  line-height: 30px;
+  color: #f9a527;
+  margin-left: 60px;
+  margin-top: -10px;
+  margin-bottom: 10px;
+}
 .friendCircleUploader {
   .imgUploader {
     .el-upload--picture-card {
@@ -460,7 +544,7 @@ export default {
         margin-right: 6px;
       }
       .conEle {
-        width: 50%;
+        width: 52%;
       }
     }
   }