feat: app三级页&项目信息页面, 认领并添加标签功能完善

src/jfw/modules/app/src/web/templates/big-member/page_client_follow_detail.html

@@ -26,6 +26,9 @@
 <div class="j-container">
     {{include "/big-member/header.html"}}
     <!--S-Vue-->
+    <div id="jyKeepEntComponent">
+        <keep-ent-component ref="vKeepComponent" @on-save-tag="onSaveTag" :bid="nowOpenBid" :first="false"></keep-ent-component>
+    </div>
     <div class="j-main prodetail" id="v-pro" v-cloak>
         <div class="prodetailTop">
             <div class="prodetail_title">
@@ -147,7 +150,7 @@
                         </div>
                         <span class="columnLine"></span>
                         <div class="claim" @click="claimBtn($event, this)">
-                          <span class="j-icon icon-add-claim"></span>
+                          <span class="j-icon icon-claim"></span>
                           <span class="icon-claim-text" style="color:#2ABED1;font-size: .26rem;">认领客户</span>
                         </div>
                       </div>
@@ -218,6 +221,7 @@
 <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
 <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
 <script src=//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js></script>
+<script src='/common-module/keep-tags/keep-ent-tags-template.js?v={{Msg "seo" "version"}}'></script>
 {{include "/big-member/commonjs.html"}}
 <script src='{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/js/common.js?v={{Msg "seo" "version"}}'></script>
 
@@ -275,6 +279,28 @@
         }
     }
     var localEmail =  {{.T.email}} || sessionStorage.getItem('reportEmail') || ''
+    // 商机管理-认领客户
+    var vKeepEntComponent = new Vue({
+        delimiters: ['${', '}'],
+        el: '#jyKeepEntComponent',
+        data: {
+            nowOpenBid: ''
+        },
+        methods: {
+            changeBid (id, type) {
+                this.nowOpenBid = id
+                this.$refs.vKeepComponent.ajaxAddKeep(id, type)
+            },
+            onSaveTag (data) {
+                var getclient = sessionStorage.getItem('setClientInfo')
+                if(getclient) {
+                    getclient = JSON.parse(getclient)
+                    getclient.label = data
+                    vm.setClaimState(getclient)
+                }
+            }
+        }
+    })
     var vNode = {
         delimiters: ['${', '}'],
         el: '#v-pro',
@@ -367,54 +393,68 @@
                 success: function(res) {
                   console.log(res)
                   if(res.data.iscoll) {
-                    if(res.data.names.length > 0) {
-                      $('.icon-claim-text').text('已认领')
-                    } else {
-                      $('.icon-claim-text').text('认领')
-                    }
+                    _this.changeClaimState(res.data.names.length > 0)
                   }
                 }
               })
             },
             // 认领
             claimBtn: function(e, that) {
-              e.stopPropagation()
-              let claim = $('.icon-claim-text').text()
-              if(claim == '已认领') {
-                this.$toast('不支持在该页面进行退回')
-                return
-              }
-              let _this = this
-              let params = {
-                "name": this.$data.prolist.buyer, //采购单位名称
-                "province": this.$data.prolist.area, //省份
-                "city": this.$data.prolist.city, //区域
-                "mold": 1, //1 认领；默认 0关注
-                "D": false, //true 取关；默认 false 关注
-              }
-              $.ajax({
-                type: 'POST',
-                url: '/entnicheNew/customer/attention',
-                contentType: 'application/json',
-                data: JSON.stringify(params),
-                success: function(res) {
-                  console.log(res)
-                  if(res.error_code == 0) {
-                    if(res.data) {
-                      if(params.mold == 0) {
-                        _this.follow = !_this.follow
-                      } else {
-                        _this.$toast('认领成功')
-                        $('.icon-claim-text').text('已认领')
-                      }
-                    } else {
-                      _this.$toast(res.error_msg)
-                    }
-                    // this.getActionState(utils.getParam('entName'), 'g')
-                    // this.getActionState(utils.getParam('entName'), 'r')
-                  }
+                e.stopPropagation()
+                let claim = $('.icon-claim-text').text()
+                var claimState = claim === '已认领'
+                // if(claim == '已认领') {
+                //   return this.$toast('不支持在该页面进行退回')
+                // }
+
+                let _this = this
+                let params = {
+                    "name": this.$data.prolist.buyer, //采购单位名称
+                    "province": this.$data.prolist.area, //省份
+                    "city": this.$data.prolist.city, //区域
+                    "mold": 1, //1 认领；默认 0关注
+                    "D": claimState, //true 取关；默认 false 关注
                 }
-              })
+                sessionStorage.setItem('setClientInfo', JSON.stringify(params))
+
+                if (!claimState) {
+                    vKeepEntComponent.changeBid(params.name, !claimState)
+                } else {
+                    // 取消认领
+                    this.setClaimState(params)
+                }
+            },
+            setClaimState: function (params) {
+                var _this = this
+                $.ajax({
+                    type: 'POST',
+                    url: '/entnicheNew/customer/attention',
+                    contentType: 'application/json',
+                    data: JSON.stringify(params),
+                    success: function(res) {
+                        if(res.error_code == 0) {
+                            if(res.data) {
+                                if (params.D) {
+                                    _this.$toast('取消认领成功')
+                                } else {
+                                    _this.$toast('认领成功')
+                                }
+                                _this.changeClaimState(!params.D)
+                            }
+                        } else {
+                            _this.$toast(res.error_msg)
+                        }
+                    }
+                })
+            },
+            changeClaimState: function (f) {
+              if (f) {
+                $('.icon-claim-text').text('已认领')
+                $('.claim .j-icon').removeClass('icon-claim').addClass('icon-add-claim')
+              } else {
+                $('.icon-claim-text').text('认领客户')
+                $('.claim .j-icon').removeClass('icon-add-claim').addClass('icon-claim')
+              }
             },
             // 获取项目详情
             getProDetail: function () {
@@ -844,7 +884,7 @@
             }
         }
     }
-    var tt = new Vue(vNode)
+    var vm = new Vue(vNode)
 </script>
 
 </body>

src/jfw/modules/app/src/web/templates/weixin/wxinfocontent.html

@@ -163,6 +163,9 @@
 <div id="jyKeepComponent">
     <keep-component ref="vKeepComponent" @on-save-tag="getKeepList" @on-change-keep="changeKeepStatus" :bid="nowOpenBid" :first="false"></keep-component>
 </div>
+<div id="jyKeepEntComponent">
+  <keep-ent-component ref="vKeepComponent" @on-save-tag="onSaveTag" :bid="nowOpenBid" :first="false"></keep-ent-component>
+</div>
 <div class="share1">
 
     <!-- 复制提示 star -->
@@ -844,6 +847,9 @@
 <script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
 <script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
 <script src='/common-module/keep-tags/keep-tags-template.js?v={{Msg "seo" "version"}}'></script>
+<script src='/common-module/keep-tags/keep-ent-tags-template.js?v={{Msg "seo" "version"}}'></script>
+<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
+<script> new VConsole(); </script> -->
 <script>
     var	shareimgflag = true;
     var area = {{.T.obj.area}}
@@ -1298,16 +1304,12 @@
           contentType: 'application/json',
           data: JSON.stringify(params),
           success: function(res) {
-            console.log(res)
-            if(res.data.iscoll) {
+            if(res.data && res.data.iscoll) {
               claimData = true
-              // $('.icon_state').removeClass('icon-claim').addClass('icon-add-claim')
-              $('.icon-claim-text').text('已认领')
             } else {
               claimData = false
-              // $('.icon_state').removeClass('icon-add-claim').addClass('icon-claim')
-              $('.icon-claim-text').text('认领客户')
             }
+            changeClaimState(claimData)
           }
         })
       } else if (str == 'g') {
@@ -1339,41 +1341,84 @@
     // 商机管理---认领
     function setClientClaim (e) {
       e.preventDefault()
-      if(claimData) {
-        EasyAlert.show("不支持在该页面进行退回");
-        return
-      }
+      // if(claimData) {
+      //   EasyAlert.show("不支持在该页面进行退回");
+      //   return
+      // }
+      // claimData:true则当前为已认领
       if(window.entniche) {
         params = {
-          "userId": 123,
           "name": {{.T.obj.buyer}}, //采购单位名称
           "province": {{.T.obj.area}}, //省份
           "city": {{.T.obj.city}}, //区域
           "mold": 1, //1 认领；默认 0关注
           "D": claimData, //true 取关；默认 false 关注
         }
-        $.ajax({
-          type: 'POST',
-          url: '/entnicheNew/customer/attention',
-          contentType: 'application/json',
-          data: JSON.stringify(params),
-          success: function(res) {
-            console.log(res)
-            if(res.error_code == 0) {
-              if(res.data) {
-                if(claimData) {
-                  // $('.icon_state').removeClass('icon-add-claim').addClass('icon-claim')
-                } else {
-                  $('.icon-claim-text').text('已认领')
-                  // $('.icon_state').removeClass('icon-claim').addClass('icon-add-claim')
-                }
+
+        sessionStorage.setItem('setClientInfo', JSON.stringify(params))
+        if (!claimData) {
+          vKeepEntComponent.changeBid(params.name, !claimData)
+        } else {
+          // 取消认领
+          setClaimState(params)
+        }
+      }
+    }
+
+    function setClaimState (params) {
+      $.ajax({
+        type: 'POST',
+        url: '/entnicheNew/customer/attention',
+        contentType: 'application/json',
+        data: JSON.stringify(params),
+        success: function(res) {
+          if(res.error_code == 0) {
+            if(res.data) {
+              claimData = !claimData
+              changeClaimState(claimData)
+              if (claimData) {
+                EasyAlert.show('认领成功')
+              } else {
+                EasyAlert.show('取消认领成功')
               }
             }
           }
-        })
+        }
+      })
+    }
+    function changeClaimState (f) {
+      if (f) {
+        $('.icon-claim-text').text('已认领')
+        $('.icon_state').removeClass('icon-claim').addClass('icon-add-claim')
+      } else {
+        $('.icon-claim-text').text('认领客户')
+        $('.icon_state').removeClass('icon-add-claim').addClass('icon-claim')
       }
     }
 
+    // 商机管理-认领客户
+    var vKeepEntComponent = new Vue({
+      delimiters: ['${', '}'],
+      el: '#jyKeepEntComponent',
+      data: {
+        nowOpenBid: ''
+      },
+      methods: {
+        changeBid (id, type) {
+          this.nowOpenBid = id
+          this.$refs.vKeepComponent.ajaxAddKeep(id, type)
+        },
+        onSaveTag (data) {
+          var getclient = sessionStorage.getItem('setClientInfo')
+          if(getclient) {
+            getclient = JSON.parse(getclient)
+            getclient.label = data
+            setClaimState(getclient)
+          }
+        }
+      }
+    })
+
     function setportain (e) {
       e.preventDefault()
       location.href = '/jyapp/big/page/client_portrayal?entName=' + encodeURIComponent({{.T.obj.buyer}}) + '&from=client'
@@ -1938,7 +1983,7 @@
           buyertel_show = "hide"
       }
       outhtml +='<li class="caigouunit commonUser"><p class="name">采购单位</p><div class="unitcenter"><p  class="textcontent">'+rerbuyer+'</p><div class="unitbtn '+rerbuyer_show+'">立即查看<span class="iconunit" style="display:none;"></span></div></div></li>'
-      outhtml +='<li class="entnicheUser"><p class="name">采购单位</p><div class="unitcenter sum_caigou client_caigou"><p  class="textcontent">'+rerbuyer+'</p><div class="sum_right"><div class="claim" onClick="setportain(event)"><span class="j-icon icon-porait"></span><span class="getproit" style="color:#2ABED1">查看画像</span></div><span class="columnLine"></span><div class="claim clientClaim" onClick="setClientClaim(event)"><span class="j-icon icon_state icon-add-claim"></span><span class="icon-claim-text" style="color:#2ABED1;font-size: .26rem;">认领客户</span></div></div></div></li>'
+      outhtml +='<li class="entnicheUser"><p class="name">采购单位</p><div class="unitcenter sum_caigou client_caigou"><p  class="textcontent">'+rerbuyer+'</p><div class="sum_right"><div class="claim" onClick="setportain(event)"><span class="j-icon icon-porait"></span><span class="getproit" style="color:#2ABED1">查看画像</span></div><span class="columnLine"></span><div class="claim clientClaim" onClick="setClientClaim(event)"><span class="j-icon icon_state icon-claim"></span><span class="icon-claim-text" style="color:#2ABED1;font-size: .26rem;">认领客户</span></div></div></div></li>'
       outhtml +='<li><p class="name">采购联系人</p><p class="textcontent">'+rerbuyerperson+'</p></li>'+
           '<li class="bbm0"><p class="name">采购电话</p><p class="textcontent">'+rerbuyertel+'</p><a class="border-tel_ '+buyertel_show+'" style="position: static;display:block" datalink="/jyapp/vipsubscribe/introducePage"><div class="tel"></div></a></li>'
       if(packageCon==""){

src/web/staticres/common-module/keep-tags/keep-ent-tags-template.js

@@ -1,4 +1,4 @@
-var tempStyleComponent = `<style>
+var tempEntStyleComponent = `<style>
 /*
 * Prefixed by https://autoprefixer.github.io
 * PostCSS: v7.0.29,
@@ -337,7 +337,7 @@ Vue.component('keep-ent-component', {
     }
   } ,
   mounted () {
-    $('head').append(tempStyleComponent)
+    $('head').append(tempEntStyleComponent)
     // if (this.first) {
     //   this.ajaxGetAllTags()
     // }