his_user_miniapp/pages_index/chineseMedicineDetails.vue

<template>
	<view class="content" v-if="item!=null">
		<view class="image">
			<image mode="aspectFill" :src="item.imgUrl"></image>
		</view>
		<view class="detail-cont">
			<view class="title-box">
				<view class="line"></view>
				<view class="title">{{item.medicineName}}</view>
				<view class="title-py">{{item.pinyin}}</view>
			</view>
			<view class="desc">
				{{item.actionTitle}}
			</view>
			<view class="line-h"></view>
			<view class="tabs">
				<view @click="tabClick(1)" :class="tabIndex==1?'tab1 active':'tab1'">
					基本用法
				</view>
				<view @click="tabClick(2)"  :class="tabIndex==2?'tab2 active':'tab2'">
					药物作用
				</view>
				<view @click="tabClick(3)"  :class="tabIndex==3?'tab3 active':'tab3'">
					用药方法
				</view>
				<view @click="tabClick(4)"  :class="tabIndex==4?'tab4 active':'tab4'">
					注意事项
				</view>
			</view>
			<view class="content" v-if="tabIndex==1" v-html="item.descs">
			</view>
			<view class="content" v-if="tabIndex==2"  v-html="item.action">
			</view>
			<view class="content" v-if="tabIndex==3" v-html="item.usageMethod">
			</view>
			<view class="content" v-if="tabIndex==4" v-html="item.msg">
			</view>
		</view>
		<view class="ad">
			<u-swiper
					:list="advImgs"
					indicator
					indicatorMode="line"
					circular
					@click="handleAdvClick"
			></u-swiper>
		</view>
	</view> 
</template>

<script>
	import {getAdvList} from '@/api/adv.js'
	import {getChineseMedicineById} from '@/api/index'
	export default {
		data() {
			return {
				advs:[],
				advImgs:[],
				tabIndex:1,
				articleId:null,
				item:{},
			};
		},
		onLoad(option) {
			this.id=option.id;
			 
		},
		onShow() {
			this.getChineseMedicineById();
			this.getAdvList();
		},
		onShareAppMessage(res) {
			if(this.$isLogin()){
				return {
					title: this.item.medicineName,
					path: '/pages_index/chineseMedicineDetails?id='+this.id,
					imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if(this.utils.isLogin()){
				return {
					title: this.item.title,
					imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		methods:{
			handleAdvClick(index){
				var ad=this.advs[index];
				console.log(ad.advUrl);
				if(ad.showType==1){
					uni.setStorageSync('url',ad.advUrl);
					uni.navigateTo({
						url:"h5"
					})
				}
				else if(ad.showType==2){
					uni.navigateTo({
						url:ad.advUrl
					})
				}
				else if(ad.showType==3){
					 uni.setStorageSync('content',ad.content);
					 uni.navigateTo({
					 	url:"content"
					 })
				}
				
			},
			getAdvList() {
				//联网加载数据
				var that = this;
				var data = {
					advType:8
				};
				getAdvList(data).then(res => {
					if(res.code==200){
						that.advImgs=[];
						that.advs=[];
						res.data.forEach(function(element) {
							if(element.imageUrl!=null&&element.imageUrl!=""){
								that.advs.push(element);
								that.advImgs.push(element.imageUrl);
							}
						});
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			tabClick(index){
				this.tabIndex=index;
			},
			getChineseMedicineById(){
				let data = {id:this.id};
				getChineseMedicineById(data).then(
					res => {
						if(res.code==200){
							this.item=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100%;
		image{
			height:450rpx;
			width:100%;
		}
		.detail-cont{
			flex: 1;
			padding: 20upx;
			overflow-y: auto;
			.title-box{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.line{
					border-radius: 5rpx;
					width: 8rpx;
					height:30rpx;
					background-color: #C39A58;
				}
				.title{
					margin-left: 15rpx;
					font-size: 40upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333;
				}
				.title-py{
					margin-left: 15rpx;
					font-size: 32upx;
					font-family: PingFang SC;
					color: #333;
				}
			}
			.desc{
				margin-top: 20rpx;
				font-size: 32upx;
				font-family: PingFang SC;
				color: #333;
			}
			.line-h{
				margin: 15rpx 0rpx;
				border-bottom: 1rpx dashed #d4d4d4;
			}
			.tabs{
				width: 100%;
				margin: 20rpx 0rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// border: 1rpx solid #C39A58;
				border-radius: 30rpx;
				line-height: 60rpx;
				.tab1{
					border-radius: 30rpx 0rpx 0rpx 30rpx;
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					color: #4F575A;
					font-size: 28upx;
					font-weight: bold;
					font-family: PingFang SC;
				}
				.tab2{
					
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					color: #4F575A;
					font-size: 28upx;
					font-weight: bold;
					
					font-family: PingFang SC;
				}
				.tab3{
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					color: #4F575A;
					font-size: 28upx;
					font-weight: bold;
					font-family: PingFang SC;
				}
				.tab4{
					border-radius: 0rpx 30rpx 30rpx 0rpx;
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #fff;
					color: #4F575A;
					font-size: 28upx;
					font-weight: bold;
					font-family: PingFang SC;
				}
				.active{
					background-color: #C39A58;
					color: #fff;
				}
				 
			}
			 
		}
		.ad{
			margin-bottom: 50rpx;
			width: 100%;
			padding: 15rpx;
			 
		}
	}
	
	 
</style>