uniapp 社区app点赞功能

<template>
    <view class="p-2">
        <!-- 列表样式 -->
        <view class="flex align-center justify-between" >
            <view class="flex align-center"  @click="openSpace">
                <image class="rounded-circle mr-2" v-if="item.userpic" :src="item.userpic " mode="" style="width: 65rpx; height: 65rpx; " lazy-load></image>
                <view>
                    <view class="font" style="line-height: 1.2;">
                        昵称：{{item.username}}
                    </view>
                    <text class="font-sm text-light-muted" style="  line-height: 1.2">
                        {{item.newstime}}
                    </text>
                </view>
            </view>
            <view class="flex align-center justify-center rounded bg-main text-white animated" @click="follow(index)" v-if="!item.isFollow" hover-class="jello"  style="width: 90rpx; height: 50rpx;"> 
                关注
            </view>
        </view>
        <!-- 标题 -->
        <view class="font-md my-1" @click="openDetail">
            {{item.title}}
        </view>
        <!-- 图片 -->
        <view @click="openDetail">
            <image :src="item.titlepic" class="w-100" mode="widthFix" style="height: 350rpx; border-radius: 5rpx;" lazy-load></image>
        </view>
        <!-- 图标按钮 -->
        <view class="flex align-center" >
            <view class="flex align-center justify-center flex-1 animated" 
            hover-class="jello text-main"  
            @click="doSupport('support')" 
            :class="item.support.type === 'support' ? 'support_color' : '' "
            >
                <text class="iconfont icon-dianzan1 mr-2"></text>
                <text>{{item.support.support_count > 0 ? item.support.support_count : '顶'}}</text>
            </view>
            <view class="flex align-center justify-center flex-1 animated" 
            hover-class="jello text-main" 
            @click="doSupport('unsupport')" 
            :class="item.support.type === 'unsupport' ? 'support_color' : '' "
            >
                <text class="iconfont icon-cai mr-2"></text>
                <text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count : '踩'}}</text>
            </view>
            <view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main">
                <text class="iconfont icon-pinglun2 mr-2"></text>
                <text>{{item.support.comment_count}}</text>
            </view>
            <view class="flex align-center justify-center flex-1 animated" hover-class="jello text-main">
                <text class="iconfont icon-fenxiang mr-2"></text>
                <text>{{item.support.share_num}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            item : Object,
            index: Number
        },
        methods:{
            // 进入个人空间
            openSpace(){
                console.log("打开个人空间")
            },
            // 关注
            follow(index){
                this.$emit("follow",index)
            },
            // 个人详情
            openDetail(){
                console.log("进入详情")
            },
            // 顶
            doSupport(type){
                this.$emit("doSupport",{
                    index:this.index,
                    type
                })
            },
            
        }
    }
</script>

<style>
    .support_color{
        color: #ff0c2c;
    }
</style>
// 上面是子组件
//下面是父组件
<template>
    <view class="content">
        <block v-for="(item,index) in list" :key="index">
            <common-list :item="item" :index="index" @follow="follow" @doSupport="doSupport"></common-list>
            <divider></divider>
        </block>
    </view>
</template>

<script>
    import commonList from '@/components/common/common-list.vue'
    export default {
        components:{
            commonList
        },
        data() {
            return {
                list:[
                    {
                        username:'张三',
                        userpic:'../../static/default.jpg',
                        newstime:'2019-07-10 下午 04：10',
                        isFollow:false,
                        title:'张三',
                        titlepic:'../../static/demo/datapic/11.jpg',
                        support:{
                            type:"",
                            support_count:0,
                            unsupport_count:0
                        },
                        comment_count:2,
                        share_num:2
                    },
                    {
                        username:'张三',
                        userpic:'../../static/default.jpg',
                        newstime:'2019-07-10 下午 04：10',
                        isFollow:false,
                        title:'张三',
                        titlepic:'../../static/demo/datapic/11.jpg',
                        support:{
                            type:"",
                            support_count:1,
                            unsupport_count:2
                        },
                        comment_count:2,
                        share_num:3
                    },
                    {
                        username:'张三',
                        userpic:'../../static/default.jpg',
                        newstime:'2019-07-10 下午 04：10',
                        isFollow:false,
                        title:'张三',
                        titlepic:'../../static/demo/datapic/11.jpg',
                        support:{
                            type:"",
                            support_count:1,
                            unsupport_count:2
                        },
                        comment_count:2,
                        share_num:3
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            // 关注
            follow(e){
                this.list[e].isFollow = true
                uni.showToast({
                    title:"关注成功" 
                })
            },
            // 顶，踩操作
            doSupport(e){
                // 拿到当前对象
                let item = this.list[e.index]
                let msg = e.type === "support" ? "顶" : "踩"
                // 之前没有操作过
                if(item.support.type === ""){
                    item.support[e.type+'_count']++
                } else if(item.support.type === "support" && e.type === "unsupport" ){
                    // 顶 -1
                    item.support.support_count--
                    // 顶 +1
                    item.support.unsupport_count++
                }
                // 之前踩过 , 现在要顶
                else if(item.support.type === "unsupport" && e.type === "support" ){
                    // 顶 +1
                    item.support.support_count++
                    // 顶 -1
                    item.support.unsupport_count--
                }
                item.support.type = e.type
                uni.showToast({
                    title: msg + "成功"
                })
            }
        }
    }
</script>

<style>
    
</style>