点赞变蓝-数字加1效果

点赞变蓝-数字加1效果

图例

<div class="b-j">
    <div class="b-ja" @click="watch()">
        <div style="margin-left:14px">
            <div v-if="!detaList.active">
                <img src="../../assets/images/dz_h.png" alt />
                <p>{{detaList.upvote}}</p>
            </div>
            <div v-if="detaList.active">
                <img src="../../assets/images/dz_l.png" alt />
                <p style="color:#409eff">{{detaList.upvote}}</p>
            </div>
        </div>
    </div>
</div>

方法

data(){
    return{
     // 问题详情
      detaList: {
        related_interpretation: [],
        related_question: [],
        related_law: [],
      },
      upvote: '',
    }
}

created() {
    // 获取问题详情数据
    this.getDeta()
},


// 点赞
watch() {
    this.$http.get('/FAQ/praise', { id: this.$route.query.id }).then(
        (response) => {
            if (response.code !== 200) {
                this.$message.error(`问题点赞失败，原因: ${response.message}`)
            } else {
                this.detaList.active = response.result.active
                this.detaList.upvote = response.result.upvote
            }
        },
        (error) => {
            this.$message.error(`问题点赞失败`)
        }
    )
},

    
 // get请求 get('地址'，'{params:数据}')
async getDeta() {
    let res = await this.$http.get('/FAQ/detail', {
        id: this.$route.query.id,
    })

    if (res.code != 200) {
        this.$router.push('/404')
    } else {
        this.detaList = res.result
    }
},

样式

.b-j {
    float: left;
    width: 122px;
    height: 50px;
    background: #f7f8fa;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer; /*鼠标悬停变小手*/
    img {
        float: left;
        width: 22x;
        height: 22px;
        margin-left: 30px;
        margin-top: 14px;
        margin-bottom: 14px;
        margin-right: 8px;
    }
    p {
        float: left;
        font-size: 16px;
        color: #555555;
        line-height: 22px;
        height: 22px;
        margin: 14px 0px;
    }
}