operation-applet/pages/public/novice.vue

<template>
	<view>
		<view class="novice">
			<view class="novice-main">
				<view class="releat">
					<view class="novice-tip">
						<view>值守人员</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="novice-tel flex">
					<view>
						<view class="flex" v-for="item in info.onDutyList" :key="item.tel">
							<view class="novice-tel-name ellipsis">{{item.name}}</view>
							<view class="novice-tel-name novice-tel-phone">{{item.tel}}</view>
						</view>
					</view>
					<image src="../../static/wx_noveic_tel.png" class="novice-tel-img" @click="callPhone"></image>
				</view>
				<view class="releat">
					<view class="novice-tip">
						<view>集控中心</view>
					</view>
					<view class="line"></view>
				</view>
				<view class="novice-tel flex">
					<view>
						<view class="novice-tel-name ellipsis">{{info.contactPerson}}</view>
						<view class="novice-tel-name novice-tel-phone no-ma">{{info.contactPhone}}</view>
					</view>
					<image src="../../static/wx_noveic_tel.png" class="novice-tel-img" @click="call"></image>
				</view>
				<view class="releat">
					<view class="novice-tip">
						<view>操作指南</view>
					</view>
					<view class="line"></view>
				</view>
				<video :src="info.videoUrl" class="novice-video"></video>
				<rich-text space="nbsp" :nodes="info.material" class="novice-rich"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: null,
				stationCode: null
			}
		},
		onShow() {
			if (this.$storage.getJson("token") && this.stationCode) {
				this.getInfo()
			}
		},
		onLoad(option) {
			this.stationCode = option.stationCode || null
			//this.info.material = this.formatRichText(this.info.material)
		},
		methods: {
			getInfo() {
				uni.showLoading();
				this.$http.getexchangeGuide('ZL000003').then(res => {
					uni.hideLoading();
					if (res.code === 0) {
						const material = this.formatRichText(res.data.material)
						res.data.material = material
						this.info = res.data
					} else {
						this.$utils.msg(res.msg)
					}
				})
			},
			appendNodeLineStyle(html, nodeName, style) {
				const reg = new RegExp(`<${nodeName}.*?>`, 'ig')
				return html.replace(reg, match => {
					// 检测是否有 `style` 属性
					if (match.indexOf('style=') !== -1) {
						// 在原有的 `style` 属性后面加上新的行内样式
						return match.replace(/style="(.*?)"/, `style="${style}$1"`);
					} else {
						// 否则直接添加 `style` 属性和行内样式属性
						return match.replace(/<img/, `<img style="${style}"`);
					}
				})
			},
			formatRichText(html) {
				if (typeof html !== 'string') {
					html = ''
				}
				// 解决图片宽度不能自适应的问题
				html = this.appendNodeLineStyle(html, 'img', 'max-width:100%;height:auto;')
				// 解决 `p` 标签在后台有默认的上下外边距，到小程序里没有上下外边距的问题
				html = this.appendNodeLineStyle(html, 'p', 'max-width:100%;margin-block-start:1em;margin-block-end:1em;')
				// 解决微信小程序会忽略空白换行的问题
				html = html.replace(/&nbsp;/g, '\u00A0')

				return html
			},
			callPhone() {
				const _this = this
				const phoneNumber = this.info.onDutyList.map(item => {
					return item.tel
				})
				uni.showActionSheet({
					itemList: phoneNumber,
					success(res) {
						// console.log("reasss",res)
						phoneNumber.forEach((item, index) => {
							if (res.tapIndex == index) {
								uni.makePhoneCall({
									phoneNumber: item,
									success: function() {
										console.log('拨打电话成功' + item)
									},
									fail: function() {
										console.log('拨打电话失败')
									},
								})
							}
						})
					},
					fail(res) {
						// console.log("拨打电话失败")
					},
				})
			},
			call() {
				const that = this
				uni.makePhoneCall({
					phoneNumber: that.info.contactPhone,
					success: function() {
						console.log('拨打电话成功' + item)
					},
					fail: function() {
						console.log('拨打电话失败')
					},
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
	}

	.ellipsis {
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; // 默认不换行；
	}

	.novice {
		overflow: scroll;
		height: 100vh;
		width: 100%;
		background: #F7F8FA;
	}

	.novice-main {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;

		.releat {
			position: relative;

			.line {
				width: 585rpx;
				height: 0rpx;
				opacity: 1;
				border: 1rpx solid;
				border-image: linear-gradient(90deg, rgba(229, 230, 235, 1), rgba(229, 230, 235, 0)) 1 1;
				position: absolute;
				top: 0;
				left: 106rpx;
				z-index: 10;
			}
		}

		.novice-tip {
			width: 140rpx;
			height: 40rpx;
			background: #E5E6EB;
			-webkit-clip-path: polygon(100% 0, 130rpx 100%, 0 100%, 0 0);
			line-height: 40rpx;
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #1D2129;
			text-indent: 15rpx;
			margin-bottom: 30rpx;
		}

		.novice-tel {
			padding: 24rpx 30rpx;
			background: #F7F8FA;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.novice-tel-name {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #1D2129;
				line-height: 44rpx;
				max-width: 180rpx;
			}

			.novice-tel-phone {
				color: #4E5969;
				margin-left: 16rpx;
			}

			.no-ma {
				margin-left: 0;
			}

			.novice-tel-img {
				width: 226rpx;
				height: 80rpx;
			}
		}

		.novice-video {
			width: 100%;
			height: 518rpx;
		}

		.novice-rich {
			width: 100%;
			word-break: break-all;
			white-space: pre-warp;
		}
	}
</style>