web3-202226701037/chexnet-master-MP/pages/health_tip/health_tip_collect/health_tip_collect.vue

<template>
	<view v-if="favor_health_list" class="content">
		<view v-for="(value, key) in favor_health_list" :key="value" class="tip-group">
			<view class="tip-item flex justify-between">
				<div class="center" v-html="formatHealthTip(health_tips[value])"></div>
				<view @click="change_favor(value,key)" class="flex justify-end relative">
					<text v-if="change_favor_list[key]" class="favor cuIcon-favorfill text-red"></text>
					<text v-else class="favor cuIcon-favor"></text>
				</view>
			</view>
		</view>
	</view>
	<view v-else class="no_data"></view>
</template>

<script>
	import health_tips from '@/static/health_tip.js'
	export default {
		onLoad() {
			let favor_health_list = uni.getStorageSync('favor_health_list');
			if(favor_health_list && Object.keys(favor_health_list).length != 0) this.favor_health_list = favor_health_list;
			
			this.change_favor_list = new Array(favor_health_list.length).fill(1);
		},
		data() {
			return {
				health_tips,
				favor_health_list: null,
				change_favor_list: null
			}
		},
		methods: {
			formatHealthTip(health_tip) {
			    const totalLength = health_tip.length;
			    const numRows = Math.ceil(totalLength / 15); // 计算总行数
			    const charsPerRow = Math.ceil(totalLength / numRows); // 计算每行字符数
			
			    let formattedTip = '';
			    for (let i = 0; i < totalLength; i += charsPerRow) {
			        formattedTip += health_tip.slice(i, i + charsPerRow) + '<br>';
			    }
			
			    // 去掉最后一行多余的 <br>
			    formattedTip = formattedTip.slice(0, -4);
			
			    return formattedTip;
			},
			change_favor(index,key){
				console.log('index: ',index);
				console.log('key: ',key);
				let favor_health_list = uni.getStorageSync('favor_health_list');
				
				if(favor_health_list){
					if(favor_health_list.includes(index)) 
						favor_health_list.splice(favor_health_list.indexOf(index), 1);
					else favor_health_list.unshift(index);
				}
				else favor_health_list = [index];
				
				uni.setStorageSync('favor_health_list',favor_health_list);
				
				if(this.change_favor_list[key] == 1) this.change_favor_list[key] = 0;
				else this.change_favor_list[key] = 1;
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f5f5f5;
	}
	text{
		font-size: 18px;
		display: flex;
		justify-content: center; /* 水平居中 */
		align-items: center;    /* 垂直居中 */
	}
	
	.content {
		padding:5px 20px;
		border: none;
	}
	.tip-group{
		border: none;
		border-radius: 15px;
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 10px;
		
		:first-child{
			border-radius: 15px 15px 0% 0%;
		}
		:last-child{
			border-radius:0% 0% 15px 15px;
		}
		:only-child {
		    border-radius: 15px;
		}
	}
	.tip-item{
		font-size: 18px;
		border: 0px;
		height: 14vw;
		padding: 0 10px;
		background-color: #ffffff;
	}
	.tip-item::after {
	    display: none;
	}
	.favor{
		font-size: 24px;
		margin-right: 5px;
	}
</style>