dev/dcp-app-gate/pages/cooperationNetwork/components/customServiceDetails.vue

<template>
	<view class="customServiceDetails woldKeep">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="400"
			back-icon-color="#fff" title-color="#fff" 
			:title="i18n('CustomizedServiceDetails')" 
			:background="background">
		</u-navbar>
		<view class="brief-img">
			<image class="img" src="../../../static/img/cooperationNetwork/dwjj.png" mode=""></image>
			<text class="unitName">{{ enterprise.unitName }}</text>
		</view>
		<view class="brief-title">{{$t('common.UnitIntroduction')}}</view>
		<view class="brief-content">
			<rich-text :nodes="enterprise.unitIntrodution"></rich-text>
		</view>
		<view class="brief-title">{{$t('common.ServiceContent')}}</view>
		<view class="brief-cont">
			<rich-text style="margin-top: 40upx;width: 100%;" :nodes="serviceContent.appContentHtml"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				customServiceId: '',
				serviceContent: {},
				enterprise: {},
				customService: {},
				baseEntityId:'',
			}
		},
		onLoad: function(e) {
			uni.setNavigationBarTitle({
				title: this.$i18n.locale == 'zh'? '定制服务详情': 'Costomized service details'
			});
			this.customServiceId = e.key;
		},
		onShow() {
			
			this.initDataList();
		},
		methods: {
			i18n (data) {
			    return this.$t('common.' + data);
			},
			async initDataList() {
				const res = await this.$myRequest({
					url: '/project/coopCustomServices/',
					data: {
						id: this.customServiceId
					}
				});
				// console.log(res);
				let data = res.data;
				if (data) {
					this.customService = data.coopCustomServices[0] || {};
					this.baseEntityId = this.customService.unitId;
				}
				const result = await this.$myRequest({
					url: '/project/baseUnitViews/getViewByEntityId',
					data: {
						baseEntityId: this.baseEntityId,
						language: this.$i18n.locale.toUpperCase()
					}
				});
				// console.log(result);
				if (result.data) {
					this.enterprise = result.data[0];
					// this.enterprise.setUpDate = formatDate(this.initData.setUpDate,'YYYY-MM-DD')
				};
				let params = {
					language: this.$i18n.locale.toUpperCase(),
					businessType: "custom_service",
					businessId: this.customService.id
				};
				const result2 = await this.$myRequest({
					url: '/cms/cmsInformationViews/getInformationList/',
					data: params
				});
				console.log(result2);
				if (result2.data) {
					this.serviceContent = result2.data.allDataList[0] || {};
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.customServiceDetails {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding: 20upx 30upx;
		.img {
			width: 100%;
			height: 300upx;
		}
		.brief-img {
			width: 100%;
			height: 300upx;
			position: relative;
			.unitName {
				width: 100%;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				font-size: 40upx;
				color: #FFFFFF;
				font-weight: bold;
				text-align: center;
			}
		}
		.brief-title {
			font-size: 34upx;
			color: #333333;
			font-weight: bold;
			margin-top: 20upx;
			text-align: center;
		}
		.brief-content {
			font-size: 30upx;
			color: #333333;
			text-indent: 2em;
			margin-top: 20upx;
		}
		.brief-cont {
			.brief-cont-title {
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
				margin-top: 20upx;
			}
		}
		.propaganda {
			.prop-img {
				margin-top: 20upx;
				.img {
					height: 200upx;
				}
			}
			.prop-cont {
				font-size: 30upx;
				color: #333333;
				margin-top: 20upx;
			}
		}
		
	}
	.woldKeep /deep/ img,.woldKeep /deep/ p, {
		max-width: 680upx;
	}
	.woldKeep /deep/ p {
		max-width: 680upx;
		word-break: break-all;
	}
</style>