bigDataApp/pages/expertDiagnosis/introduce.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="详情"></uni-nav-bar>
			</view>
			<image :src="wormcasedata.img_urls" mode="" style="width: 100%;height: 320rpx;margin-top: 88rpx;"></image>
			<p class="name">{{wormcasedata.name}}</p>
			<view v-for="(item,index) in preventionArr" :key="index" class="prevention">
				<view class="prevention_title">
					<u-icon name="play-right-fill" size="24" color="#55A92D"></u-icon>
					<p>{{regexptitle[index]}}:</p>
				</view>
				<p class="prevention_con">{{item}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wormcasedata: {},
				unititle: '',
				wormdata: { //虫子数据

				},
				disease: { //病害数据

				},
				preventionArr: [],
				regexptitle: []
			}
		},
		methods: {
			async getIntroduce(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.pests_info',
					data: {
						pest_id: data
					}
				})
				console.log(res)
				this.wormcasedata = res
				var regex2 = /\[(.+?)\]/g; // [] 中括号
				var str = this.wormcasedata.prevention
				var arr = str.match(regex2)
				var arrindex = []
				for (var i = 0; i < arr.length; i++) {
					arrindex.push(str.indexOf(arr[i]))
				}
				for (var i = 0; i < arr.length; i++) {
					this.preventionArr.push(str.slice(arrindex[i] + arr[i].length, arrindex[i + 1]))
				}
				for (var i = 0; i < arr.length; i++) {
					arr[i] = arr[i].slice(1, arr[i].length - 1)
				}
				this.regexptitle = arr
			},
			clickLeft() {
				uni.navigateTo({
					url: "./wormcase?name=" + this.unititle
				})
			}
		},
		onLoad(option) {
			console.log(option)
			this.unititle = option.title
			this.getIntroduce(option.id)
		}
	}
</script>

<style lang="scss">
	.name {
		font-size: 34rpx;
		font-weight: 700;
		width: 95%;
		margin: 20rpx auto 0;
	}

	.prevention {
		font-size: 28rpx;
		color: #919191;
		width: 95%;
		margin: 20rpx auto;

		.prevention_title {
			display: flex;

			p {
				margin-left: 20rpx;
				color: #000000;
				font-size: 28rpx;
				font-weight: 700;
			}
		}

		.prevention_con {
			padding-left: 6%;
		}
	}
</style>