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

<template>
	<view v-if="health_tip" class="content">
		<view>
			<text class="title">健康小知识</text>
		</view>
		
		<uv-gap height="50"></uv-gap>
		
		<view class="tip center">
			<div class="long-text center" v-html="health_tip"></div>
		</view>
		
		<view @click="change_favor" class="flex justify-end relative" style="top: -55vw;">
			<text v-if="favor" class="favor cuIcon-favorfill text-red"></text>
			<text v-else class="favor cuIcon-favor"></text>
		</view>
		
		<uv-gap height="50"></uv-gap>
		
		<view class="flex justify-between">
			<button @click="get_health_tip(index - 1)" class="button-all">上一条</button>
			<button @click="get_health_tip(index + 1)" class="button-all">下一条</button>
		</view>
	</view>
	<view v-else class="no_data"></view>
</template>

<script>
	import health_tips from '@/static/health_tip.js'
	export default {
		onShow() {
			this.get_random_health_tip();
		},
		data() {
			return {
				health_tip: null,
				index: null,
				favor: false
			}
		},
		methods: {
			change_favor(){
				let favor_health_list = uni.getStorageSync('favor_health_list');
				if(favor_health_list){
					if(favor_health_list.includes(this.index)) 
						favor_health_list.splice(favor_health_list.indexOf(this.index), 1);
					else favor_health_list.unshift(this.index);
				}
				else favor_health_list = [this.index];
				
				uni.setStorageSync('favor_health_list',favor_health_list);
				
				this.favor = !this.favor;
			},
			get_health_tip(index){
				if(index < 0 || index >= health_tips.length){
					uni.showToast({duration:1000,icon:'none',title: '到顶了'});
					return ;
				}
				const health_tip = health_tips[index];
				// 输出随机选取的元素
				console.log(health_tip);
				
				this.favor = false;
				let favor_health_list = uni.getStorageSync('favor_health_list');
				if(favor_health_list){
					if(favor_health_list.includes(index)) this.favor = true;
				}
				
				this.index = index;
				
				this.health_tip = formatHealthTip(health_tip);
				
				function formatHealthTip(health_tip) {
				    const totalLength = health_tip.length;
				    const numRows = Math.ceil(totalLength / 10); // 计算总行数
				    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;
				}
			},
			get_random_health_tip(){
				// 获取数组的长度
				const length = health_tips.length;
				
				// 使用 Math.random() 生成一个 [0, length) 范围内的随机索引值
				const randomIndex = Math.floor(Math.random() * length);
				
				this.get_health_tip(randomIndex);
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	button{
		background-color: aliceblue;
	}
	.content{
		padding: 20px;
	}
	.tip{
		height: 55vw;
		background-color: #f1f3f2;
		border: none;
		border-radius: 30px;
		padding: 20px;
		letter-spacing: 2px;
		margin-bottom: 20px;
		font-weight: 1000;
		color: #666;
		font-size: 27px;
	}
	.title{
		color: #777;
		font-size: 20px;
		font-weight: 600;
	}
	.favor{
		font-size: 24px;
		margin-right: 5vw;
	}
	.long-text{
		width: 100vw;
		overflow: scroll;
		height: calc(55vw - 40px);
		overflow-wrap: break-word;
		text-align: center;
	}
</style>