# 收藏與取消收藏
說明:“收藏與取消收藏”和“點贊和取消點贊”是一個道理,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>
```