deming/pageB/components/userinfo/index.vue

<template>
    <view class="userinfo">
        <view class="userhead">
            <image :src="item.member_avatar"></image>
            <text class="follow" v-if="!is_follow" @click="following(item.member_id)">+</text>
			<u-icon v-else name="checkmark" color="#ffffff" :size="28" class="follow"  @click="following(item.member_id)"></u-icon>
        </view>
		<!-- 点赞 -->
        <view class="operat zan">
            <u-icon name="thumb-up-fill" :color=" is_like ? '#FF7807' : '#ffffff' " :size="50" @click="likeType(item.article_id)"></u-icon>
            <text>{{item.like_num}}</text>
        </view>
		<!-- 收藏 -->
        <view class="operat shoucang">
            <u-icon name="star-fill" :color=" is_collect ? '#FF7807' : '#ffffff' " :size="50" @click="collecting(item.article_id)"></u-icon>
            <text>{{item.collect_num}}</text>
        </view>
		<!-- 评论 -->
        <view class="operat pinglun">
            <u-icon name="more-circle-fill" :color=" is_content ? '#FF7807' : '#ffffff' " :size="50" @click="editing()"></u-icon>
            <text>{{ comment_num }}</text>
        </view>
		<!-- 购物车 -->
        <view class="operat gouwu">
           <u-icon name="shopping-cart-fill" :color=" is_cart ? '#FF7807' : '#ffffff' " :size="50" @click="carting()"></u-icon>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.userinfo{
    width: 110rpx;
    height: 570rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .userhead{
		position: relative;
        display: flex;
        position: relative;
        align-items: center;
		&>image{
		    width: 110rpx;
		    height: 110rpx;
		    border-radius: 50%;
		    border: 2rpx solid #fff;
		}
		.follow {
			position: absolute;
			top: 90rpx;
			left: 35%;
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 36rpx;
			border-radius: 50%;
			color: #fff;
			background-color: #FF780F;
		}
    }
	.operat {
		display: flex;
		align-items: center;
		flex-direction: column;
		& > text {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
}
</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,old);
			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) {
			this.$u.api.attentionMember({member_id: id}).then(res => {
				if (res.errCode == 0) {
                    this.is_follow = !this.is_follow;
					this.$u.toast(res.message);
				}
			})
		},
		// 点赞
		likeType(id) {
			// console.log(id);
			this.$u.post("article/articleLike",{article_id: id}).then(res => {
				if (res.errCode == 0) {
					// console.log(res);
                    this.is_like = !this.is_like;
					this.list.like_num = res.data.num;
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		// 收藏
		collecting(id) {
			this.$u.post("article/articleCollect",{article_id: id}).then(res => {
				if (res.errCode == 0) {
					// console.log(res);
                    this.is_collect = !this.is_collect;
					this.list.collect_num = res.data.num;
				} else {
					this.$u.toast(res.message);
				}
			})
		},
		// 评论
		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>