Angular +Ionic实现关注与取消关注
1.html中:
<div class="middle-rate-shop-name" *ngIf="isShowContent">
<div class="middle-rate-shop-name-img" >
<img [src]="shopInfoList.storeLogo">
</div>
<div class="middle-rate-shop-name-text">
<div class="rate-shop-name-text-qzh">
{{shopInfoList.shortName}}
</div>
<span><img src="../../../assets/icon/search-icon/golden.png" alt="">{{shopInfoList.memberLevel}}</span>
</div>
<div class="middle-rate-shop-name-concern">
<div class="concern" *ngIf="!concernIs" (click)="concernIsNo()">
<img src="../../../assets/icon/search-icon/concern.png" alt="">
关注
</div>
<div class="unconcern" *ngIf="concernIs" (click)="concernIsNo()">
已关注
</div>
</div>
</div>
</div>
2.ts
public concernIs:boolean;//是否关注
public newOnLine = {
storeId:'',
};
constructor(
private rest: RestService,
//引入路由
private router: Router,
private activatedRoute: ActivatedRoute,
private navCtrl: NavController,
private loadingCtrl: LoadingController,
public appService: AppService,
public localStorageService: StorageService,
private toastCtrl: ToastController
)
{
super(appService, localStorageService);
this.goodsId = this.activatedRoute.snapshot.paramMap.get('goodsId');
this.storeId = this.activatedRoute.snapshot.paramMap.get('storeId');
}
//6,关注店铺
async getStoreinsert() {
const goodsReq = {
'storeId':this.newOnLine.storeId,
}
this.rest.apiPost(goodsReq, this.rest.getStoreinsert).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
this.concernIs=true;
console.log("关注店铺",data);
alert("关注成功")
} else {
console.log("请求失败");
}
});
}
//7,取消关注
async getdeletByStoreId() {
const goodsReq = {
ids:this.newOnLine.storeId, //店铺的ID
}
await this.rest.apiPost(goodsReq, this.rest.getdeletByStoreId).subscribe(res => {
const { status, msg, data } = res;
if (status == 200) {
console.log("======取消关注=======");
alert("取消成功")
} else {
console.log("请求失败");
}
});
}
//8,6<-->7取消与关注店铺
concernIsNo(){
this.concernIs=!this.concernIs
//关注
if(this.concernIs){
this.getStoreinsert();
//取消关注
}if(!this.concernIs){
this.getdeletByStoreId();
}
}
3.效果