deming/pageB/components/userinfo/index.vue

<template>
    <view class="userinfo">
        <view class="userhead">
            <image class="avatar" :src="item.member_avatar"></image>
            <text class="follow" @click="following(item.member_id)">{{ is_follow ? "✓" : "+" }}</text>
        </view>
        <!-- 点赞 -->
        <view class="operat zan">
            <image class="operat-img" :src=" is_like ? '../../static/image/userinfo/dianzan1.png' : '../../static/image/userinfo/dianzan.png' "
                mode="" @click="likeType(item.article_id)"></image>
            <text class="operat-span">{{item.like_num}}</text>
        </view>
        <!-- 收藏 -->
        <view class="operat shoucang">
            <image class="operat-img" :src=" is_collect ? '../../static/image/userinfo/shoucang1.png' : '../../static/image/userinfo/shoucang.png' "
                mode="" @click="collecting(item.article_id)"></image>
            <text class="operat-span">{{item.collect_num}}</text>
        </view>
        <!-- 评论 -->
        <view class="operat pinglun">
            <image class="operat-img" :src=" is_content ? '../../static/image/userinfo/pinglun1.png' : '../../static/image/userinfo/pinglun.png' "
                mode="" @click="editing(item.article_id)"></image>
            <text class="operat-span">{{ comment_num }}</text>
        </view>
        <!-- 购物车 -->
        <view class="operat gouwu">
            <image class="operat-img" :src=" is_cart ? '../../static/image/userinfo/gouwuche1.png' : '../../static/image/userinfo/gouwuche.png' "
                mode="" @click="carting()"></image>
        </view>
    </view>
</template>
<style lang="scss" scoped>
    .userinfo {
        width: 110rpx;
        height: 570rpx;
        /* #ifndef APP-PLUS-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .userhead {
        position: relative;
        /* #ifndef APP-PLUS-NVUE */
        display: flex;
        /* #endif */
        align-items: center;
        padding-bottom: 20rpx;
    }

    .avatar {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        /* #ifndef APP-PLUS-NVUE */
        border: 2rpx solid #fff;
        /* #endif */
    }

    .follow {
        z-index: 100;
        position: absolute;
        top: 90rpx;
        left: 40rpx;
        width: 36rpx;
        height: 36rpx;
        text-align: center;
        line-height: 36rpx;
        font-size: 34rpx;
        border-radius: 50%;
        color: #fff;
        background-color: #FF780F;
    }

    .operat {
        /* #ifndef APP-PLUS-NVUE */
        display: flex;
        /* #endif */
        align-items: center;
        flex-direction: column;
    }

    .operat-span {
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #fff;
    }

    .operat-img {
        width: 50rpx;
        height: 50rpx;
    }
</style>
<script>
    export default {
        name: 'userinfo',
        props: ['list', 'cart', 'comment', 'num'],
        data() {
            return {
                is_follow: this.list.is_attention || false,
                is_like: this.list.is_like || false,
                is_collect: this.list.is_collect || false,
                is_content: false,
                is_cart: false,
                comment_num: this.list.comment_num || 0,
                item: this.list || {}
            }
        },
        watch: {
            list(newValue, old) {
                console.log(newValue);
                this.item = newValue || {};
                this.is_follow = this.list.is_attention || false;
                this.is_like = this.list.is_like || false;
                this.is_collect = this.list.is_collect || false;
                this.comment_num = this.list.comment_num || 0;
            },
            cart(newValue, old) {
                // console.log(newValue);
                this.is_cart = newValue;
            },
            comment(newValue, old) {
                // console.log(newValue,old);
                this.is_content = newValue;
            },
            num(newVal, old) {
                // console.log(newVal);
                this.comment_num = newVal;
                // this.item.comment_num = newVal;
            },
            deep: true
        },
        methods: {
            // 关注
            following(id) {
                uni.request({
                    url: "https://dmmall.sdbairui.com/api/member/attentionMember",
                    method: "POST",
                    data: {
                        member_id: id
                    },
                    header: {
                    	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        if (res.data.errCode == 0) {
                            this.is_follow = !this.is_follow;
                            console.log(this.is_follow);
                            uni.showToast({
                                title: res.data.message,
                                icon: "none"
                            })
                        }
                    }
                })
            },
            // 点赞
            likeType(id) {
                // console.log(id);
                uni.request({
                    url: "https://dmmall.sdbairui.com/api/article/articleLike",
                    method: "POST",
                    data: {
                        article_id: id
                    },
                    header: {
                    	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        console.log(res);
                        if (res.data.errCode == 0) {
                            // console.log(res);
                            this.is_like = !this.is_like;
                            this.list.like_num = res.data.data.num;
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none"
                            })
                        }
                    }
                })
            },
            // 收藏
            collecting(id) {
                uni.request({
                    url: "https://dmmall.sdbairui.com/api/article/articleCollect",
                    method: "POST",
                    data: {
                        article_id: id
                    },
                    header: {
                    	Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
                    },
                    success: (res) => {
                        console.log(res);
                        if (res.data.errCode == 0) {
                            console.log(res.data.num);
                            this.is_collect = !this.is_collect;
                            this.list.collect_num = res.data.data.num;
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: "none"
                            })
                        }
                    }
                })
            },
            // 评论
            editing() {
                this.is_content = !this.is_content;
                // console.log(this.is_content);
                this.$emit("openCart", {
                    comment: this.is_content,
                    cart: this.is_cart
                });
            },
            // 购物车
            carting() {
                this.is_cart = !this.is_cart;
                // console.log(this.is_cart);
                this.$emit("openCart", {
                    comment: this.is_content,
                    cart: this.is_cart
                });
            },
        }
    }
</script>