tlfb/pages/index/cpzq.vue

<template>
	<view class="content">
		<view class="" style="height: 20rpx;">
			
		</view>
		<view class="jj-tit" v-if="gsjjList.length > 0">
			<view class="left">
				<image src="../../static/icon/gsjj.png" mode="" class="jj-log"></image>
				<view class="jj-title">
					公司简介
				</view>
			</view>
			<!-- <view class="right" @click="navto('/pages/index/artList?cid=1')">
				<view class="jj-more-tit">
					更多
				</view>
				<image src="../../static/img/img39.png" mode="" class="jj-more"></image>
			</view> -->
		</view>
		<view class="jj-wrap" v-if="gsjjList.length > 0">
			<view class="jj" v-for="gs in gsjjList" @click="navto('/pages/index/artDetail?id=' + gs.id)">
				<image :src="gs.image_input[0]" mode="" class="jj-img"></image>
				<view class="jj-info">
					<view class="jj-tit-tit clamp">
						{{gs.title}}
					</view>
					<view class="jj-val clamp2">
						更新时间{{gs.add_time}}
					</view>
				</view>
			</view>
		</view>
		<!-- 产品简介 -->
		<view class="jj-tit" style="margin-top: 20rpx;">
			<view class="left">
				<image src="../../static/icon/cpjj.png" mode="" class="jj-log"></image>
				<view class="jj-title">
					商城简介
				</view>
			</view>
			<!-- <view class="right" @click="navto('/pages/index/artList?cid=2')">
				<view class="jj-more-tit">
					更多
				</view>
				<image src="../../static/img/img39.png" mode="" class="jj-more"></image>
			</view> -->
		</view>
		<view class="scjj" style="padding: 20rpx;background-color: #fff;">
			<view class="" v-html="content">
				
			</view>
		</view>
		<!-- <view class="jj-wrap" v-if="cpjjList.length > 0">
			<view class="jj" v-for="cp in cpjjList" @click="navto('/pages/index/artDetail?id=' + cp.id)">
				<image :src="cp.image_input[0]" mode="" class="jj-img"></image>
				<view class="jj-info">
					<view class="jj-tit-tit clamp2">
						{{cp.title}}
					</view>
					<view class="jj-val clamp">
						更新时间{{cp.add_time}}
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		loadIndexs,
		getArticleList,
		getArtDetai
	} from '@/api/index.js';
	export default {
		data() {
			return {
				cpjjList: [],
				gsjjList: [],
				content: ''
			}
		},
		onShow() {
			this.getArticleList()
		},
		methods: {
			navto(url) {
				console.log(url)
				uni.navigateTo({
					url: url
				})
			},
			getArticleList() {
				// getArticleList({
				// 	pages: 1,
				// 	limit: 3
				// },2).then(({data}) => {
				// 	console.log(data)
				// 	this.cpjjList = data
				// })
				let obj = this
				getArticleList({
					pages: 1,
					limit: 3
				},1).then(({data}) => {
					console.log(data)
					this.gsjjList = data
				})
				getArtDetai({},6).then(res => {
					console.log(res)
					obj.content = res.data.content
					if(obj.content != null){
						obj.content = obj.content.replace(/<img/g,"<img style='max-width:100%;height:auto;min-width:100%;'");
					}//小程序商品详情图超出屏幕问题
				})
			},
		}
	}
</script>

<style lang="scss">
	.jj-tit {
		display: flex;
		// height: 50rpx;
		justify-content: space-between;
		background-color: #fff;
		padding-top: 20rpx;
		.left {
			padding-left: 20rpx;
			display: flex;
			.jj-log {
				width: 45rpx;
				height: 45rpx;
			}
			.jj-title {
				font-weight: bold;
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		}
		.right {
			display: flex;
			width: 200rpx;
			font-size: 22rpx;
			// justify-content: sp;
			justify-content: flex-end;
			align-items: center;
			padding-right: 20rpx;
			color: #999;
			.jj-more {
				margin-left: 10rpx;
				width: 15rpx;
				height: 22rpx;
			}
		}
	}
	.jj-wrap {
		background-color: #fff;
		// margin: 20rpx 0;
		.jj {
			margin: auto;
			width: 689rpx;
			height: 202rpx;
			border-bottom: 1px solid #e5e5e5;
			padding: 20rpx;
			padding-left: 0;
			display: flex;
			&:last-of-type {
				border-bottom: none;
			}
			.jj-img {
				flex-shrink: 0;
				width: 222rpx;
				height: 158rpx;
				background-color: #bfa;
				border-radius: 10rpx;
			}
			.jj-info {
				width: 450rpx;
				// flex-shrink: 0;
				padding: 10rpx;
				padding-left: 15rpx;
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.jj-tit-tit {
					
				}
				.jj-val {
					padding-top: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
				}
			}
		}
	}
</style>