【收藏 / 取消收藏】uniapp&vue开发，实现点击收藏/取消收藏功能

一、实现效果如下：

二、代码如下：

<view class="collectbox">
	
	<image v-if="collect==false" @click="changeImg" src="../../static/img/collect.png">image>
	
	
	<image v-if="collect==true" @click="changeImg" src="../../static/img/collect_active.png"> image>
view>

<script>
	export default {
		data() {
			return {
				collect: false, //判断是否已收藏
			}
		},

		onShow() {},
		onLoad(option) {}
		
		methods: {
			
			//点击收藏的效果
			changeImg() {
				var that = this;
				var params = {
					id: that.case_id
				}
				//收藏
				if (that.collect == false) {
					this.$api.appPlateForm('POST', 'example/collection', params, function(res) {
						if (res.code == 200) {
							that.collect = true;
							uni.showToast({
								icon: 'success',
								title: '收藏成功'
							})
						}
					}, function(err) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					});
				} else {
					//取消收藏
					this.$api.appPlateForm('POST', 'example/collectDel', params, function(res) {
						if (res.code == 200) {
							that.collect = false;
							uni.showToast({
								icon: 'none',
								title: '取消成功'
							})
						}
					}, function(err) {
						uni.showToast({
							icon: 'none',
							title: err.msg
						})
					});
				}
			},

	
		}
	}
script>

##ending~