sooka_consult_uniapp/pages/handleAffairs/mattercontent/mattercontent.vue

<template>
	<view>
		<!-- 心理咨询详情 -->
		<view class="container">
			<h1 class="title">{{matterlist.title}}</h1>
            <view class="fengexian"></view>
			<view class="wenzhangCont article">
				<view v-html="matterlist.content"></view>
				<image class="uni-header-image" :src="loadImgSrcLocalhost(matterlist.picture)"></image>
				<button class="likeBtn" @click="toggleFavorite">{{ isFavorite ? '❤️' : '🤍' }}</button>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		getDept, scadd, delDept, getsc
	} from '@/api/handleAffairs/matter.js';

	export default {
		data() {
			return {
				matterlist:[],
				isFavorite: false,
			};
		},
		created() {
			this.getList();

		},

		methods: {
			getList(){
				const _that = this;
				const id = uni.getStorageSync('id');

				getDept(id).then(res =>{
					_that.matterlist = res.data
					this.checkFavorite();
				})
			},
			toggleFavorite() {
				const userId = getApp().globalData.userId;
				if (this.isFavorite) {
					delDept(this.matterlist.id).then(() => {
						this.isFavorite = false;
					});
				} else {
					const userId = getApp().globalData.userId
					const matterId = this.matterlist.id
					scadd({ matterId:this.matterlist.id , userId }).then(() => {
						this.isFavorite = true;
					});
				}
			},

			checkFavorite() {
				const userId = getApp().globalData.userId
				const matterId = this.matterlist.id
				getsc({ matterId , userId }).then(res => {
					this.isFavorite = res.data;
				});
			},
		},
	}
</script>
<style scoped>
	/* pages/wenbaxiangqing.wxss */
	.title {
		font-size: 44rpx;
		text-align: center;
		line-height: 70rpx;
		color: #333;
		margin: 30rpx 0;
	}
	.wenzhangLy {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: solid 2rpx #e8e8e8;
		padding: 0 0 14rpx 0;
	}
	.txTime {
		display: flex;
		flex-direction: row;
	}
	.txTime image {
		width: 80rpx;
		height: 80rpx;
	}
	.time {
		display: flex;
		flex-direction: column;
		padding: 10rpx 0 0 8px;
	}
	.time p {
		font-size: 28rpx;
		color: #9c9c9c;
	}
	.time span {
		font-size: 24rpx;
		color: #c4c4c4;
	}

	.jf {
		color: #07c160;
		line-height: 80rpx;
		font-size: 24rpx;
	}
	.icon-jifen {
		font-size: 28rpx;
		color: #07c160;
		margin: 0 0 0 6rpx;
	}
	.ck {
		color: #c4c4c4;
		font-size: 28rpx;
	}
	.icon-pinglun,
	.icon-chakan,
	.ck .icon-shoucang {
		font-size: 28rpx;
		margin: 0 6rpx 0 20rpx;
		color: #c4c4c4;
		line-height: 0;
	}
	.wenzhangCont {
		width: 100%;
		font-size: 34rpx;
		margin: 30rpx 0;
	}
	.wenzhangCont image {
		width: 100%;
		height: 320rpx;
		margin: 20rpx auto;
	}
	.pinglunTj {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
	}
	.pinglunTitle {
		font-size: 34rpx;
		color: #2e2e2e;
		font-weight: 600;
	}
	.pinglunTitle em {
		font-size: 34rpx;
		color: #9b9b9b;
		font-weight: normal;
		margin: 0 0 0 10rpx;
	}
	.pinglunList {
		width: 100%;
		padding: 0 0 120rpx 0;
	}
	.pinglunList li {
		margin: 20rpx 0;
		border-bottom: solid 2rpx #e8e8e8;
		padding: 0 0 20rpx 0;
		display: flex;
		flex-direction: column;
	}
	.plListcont {
		font-size: 30rpx;
		color: #696868;
		margin: 20rpx 0;
	}
	.pinglunList li button {
		width: 80%;
		border-radius: 10rpx;
		background: #07c160;
		color: #fff;
		font-size: 28rpx;
		font-weight: normal;
		margin: 16rpx auto;
	}
	.fabiaoPl {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 112rpx;
		background: #e8e8e8;
		box-shadow: 0rpx 0rpx 16rpx #999;
	}
	.shuRu {
		width: 72%;
		display: flex;
		flex-direction: row;
		height: 76rpx;
		background: #e0e0e0;
		border-radius: 60rpx;
		margin: 20rpx 0 0 20rpx;
	}
	.shuRu input {
		line-height: 38px;
		height: 76rpx;
		font-size: 30rpx;
		width: 83%;
	}
	.icon-bianji {
		font-size: 38rpx;
		line-height: 76rpx;
		margin: 0 10rpx 0 20rpx;
		color: #828181;
	}
	.icon-shoucang {
		font-size: 50rpx;
		line-height: 112rpx;
		color: #828181;
	}
	.fasong {
		width: 58rpx;
		height: 58rpx;
		border-radius: 50rpx;
		background: #07c160;
		margin: 26rpx 20rpx 0 10rpx;
		text-align: center;
		line-height: 58rpx;
	}
	.icon-fasong {
		font-size: 40rpx;
		color: #fff;
	}
	.likeBtn{
		width: 15vw;
		height: 9vh;
		border-radius: 50%;
		position: absolute;
		background-color: #F1F1F1;
		right: 3%;
		bottom: 3%;
		font-size: 218%;
		text-indent: -16%;
		line-height: 190%;
		border: none;
	}
	.likeBtn::after{
		border: none;
	}
</style>