內容頁-收藏與取消收藏 · ThinkPHP模塊兒

# 收藏與取消收藏說明：“收藏與取消收藏”和“點贊和取消點贊”是一個道理，API幾乎也是一樣的，只不過他們之前的差別，可能就是字段不一樣而已！下邊就說說他們之間的功能吧！在 [文章頁](http://http://hongweizhiyuan.oschina.io/newthink_tpl/tpl/AUI/AUI2.1/module_article/article2.html) 這個鏈接中，我們可以看到，里邊即有內容頁，其關鍵代碼如下： ```  <div class="aui-bar-tab-item" style="width: 2.2rem;" > <i class="aui-iconfont aui-icon-star"></i> </div> ``` 表面上看起來，一個簡單的內容，其實好多好多程序員都不會！其中我也是曾經的一員！那怎么實現呢？先說一說方法： >1、去掉內容中間的圖標，并賦ID值 2、引用doT.js并加入script模板，并判斷收藏狀態 3、用js調用遠程api并賦值 4、打開頁面判斷收藏狀態 5、不同狀態引用不同的點擊事件好吧！這一個圖標的操作，簡單比調用一篇文章還要復雜，是不是呢？程序員們，那我們來看代碼吧！ ### 步驟1:去掉內容中間的圖標，并賦ID值 ```  <div class="aui-bar-tab-item" id="userStar" tapmode style="width: 2.2rem;"> </div> ``` ### 步驟2:引用doT.js并加入script模板，并判斷收藏狀態 ``` <script type="text/javascript" src="../../../script/assets/doT.min.js"></script>  <script id="collect_status" type="text/x-dot-template" > {{ if(it.status == 1){ }} <i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i> {{ }else{ }} <i class="aui-iconfont aui-icon-star" onclick="collectArticle();" ></i> {{ }; }} </script> ``` ### 步驟3:打開頁面判斷收藏狀態 ``` apiready = function() { collectStatus(); //收藏狀態 }; //收藏狀態 function collectStatus(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Collect_Status; let data = { values:{ article_id:article_id, uid:uid } }; var callback = function(ret){ if(ret.data){ dotTpl('collect_status','userStar',ret.data); }else{ showToast('判斷收藏狀態錯誤', 2, 'bottom'); } }; r_ajax(serverURL,data,callback); } ``` ### 步驟5:不同狀態引用不同的點擊事件 ``` //取消收藏 function cancelCollectArticle(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Cancel_Collect; let data = {values:{ article_id:article_id, uid:uid }}; var callback = function(ret){ if(ret){ $api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();"></i>'); showToast('取消收藏成功！', 2000, 'bottom'); collectStatus(); }else { showToast('取消收藏失敗！', 2000, 'bottom'); } } r_ajax(serverURL,data,callback); } //收藏 function collectArticle(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Collect; let data = {values:{ article_id:article_id, uid:uid }}; var callback = function(ret){ if(ret){ $api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>'); showToast('收藏成功！', 2000, 'bottom'); collectStatus(); }else { showToast('收藏失敗！', 2000, 'bottom'); } } r_ajax(serverURL,data,callback); } ``` ## 完整的代碼如下： ```  <div class="aui-bar-tab-item" id="userStar" tapmode style="width: 2.2rem;"> </div> <script type="text/javascript" src="../../../script/assets/doT.min.js"></script>  <script id="collect_status" type="text/x-dot-template" > {{ if(it.status == 1){ }} <i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i> {{ }else{ }} <i class="aui-iconfont aui-icon-star" onclick="collectArticle();" ></i> {{ }; }} </script> <script> apiready = function() { collectStatus(); //收藏狀態 }; //收藏狀態 function collectStatus(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Collect_Status; let data = { values:{ article_id:article_id, uid:uid } }; var callback = function(ret){ if(ret.data){ dotTpl('collect_status','userStar',ret.data); }else{ showToast('判斷收藏狀態錯誤', 2, 'bottom'); } }; r_ajax(serverURL,data,callback); } //取消收藏 function cancelCollectArticle(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Cancel_Collect; let data = {values:{ article_id:article_id, uid:uid }}; var callback = function(ret){ if(ret){ $api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();"></i>'); showToast('取消收藏成功！', 2000, 'bottom'); collectStatus(); }else { showToast('取消收藏失敗！', 2000, 'bottom'); } } r_ajax(serverURL,data,callback); } //收藏 function collectArticle(){ var uid = $api.getStorage('user').id; //用戶id var article_id = api.pageParam.object_id; //文章id let serverURL = Config.api.User_Article_Collect; let data = {values:{ article_id:article_id, uid:uid }}; var callback = function(ret){ if(ret){ $api.html($api.byId('userStar'),'<i class="aui-iconfont aui-icon-star" onclick="cancelCollectArticle();" style="color:#FF0000;"></i>'); showToast('收藏成功！', 2000, 'bottom'); collectStatus(); }else { showToast('收藏失敗！', 2000, 'bottom'); } } r_ajax(serverURL,data,callback); } </script> ```