H5_module/share/pages/index.vue

<template>
	<view v-if="detaile">
		<view class="cover">
			<image :src="detaile.pic" mode="aspectFill"></image>
		</view>
		<view class="info">
			<view class="tit">{{detaile.title}}</view>
			<view class="brief">{{detaile.brief}}</view>
		</view>
		<view class="form">
			<view class="li dflex">
				<view class="label">姓名</view>
				<input placeholder="请输入姓名" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<view class="li dflex">
				<view class="label">手机</view>
				<input placeholder="请输入手机号码" placeholder-class="placeholder" class="ipt flex" />
			</view>
			<view class="save">免费报名</view>
		</view>
		<view class="det" v-if="detaile.params.imageList && detaile.params.imageList.length > 0">
			<image :src="item.url" mode="widthFix" v-for="(item,index) in detaile.params.imageList" :key="index" @click="previewImg(detaile.params.imageList,index)"></image>
		</view>
		<view class="btn">立即分享</view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
import mpHtml from "../../components/mp-html/components/mp-html/mp-html";
export default {
	components: {
		mpHtml,
	},
	data() {
		return {
			code: '',
			rootCode: '',
			detaile: '',
		};
	},

	onLoad: async function(options) {
		if(options.detail){
			let params = JSON.parse(decodeURIComponent(options.detail));
			console.log('params==',params)
			this.code = params.code;
			this.shareCode = params.shareCode
			this.rootCode = params.rootCode
			if(params.appId){
				req.setStorage('appId',params.appId)
			}
			// if(params.userId){
			// 	req.setStorage('pidCode', params.userId);
			// }
		}
		if(options.x_code_id){
			console.log('options==',options)
			this.sceneId = options.x_code_id
		}
		await this.loadCodeParams()
		await this.getDetail();
	},
	onShow(){
	},

	methods: {
		monitor() {
			let that = this;
			let system = uni.getSystemInfoSync();
			let query = uni.createSelectorQuery();
			query.select('.viewMore').boundingClientRect(data=>{
				if(data){
					let height = data.height;
					if(height > system.windowHeight*2) {
						that.height = system.windowHeight *1.8 + 'px';
						that.viewMoress = true
					}
				}
			}).exec();
		},
		viewMores(){
			this.height = 'initial';
			this.viewMoress = false;
		},
		choose: function () {
		  let freshen = false;
		  this.$emit('freshen', {
		    detail: freshen
		  });
		},
		toIndex(){
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		loadCodeParams() {
			let _ts = this;
			return new Promise((resolve, reject) => {
				let form = {
					scene: _ts.sceneId
				};
				if (!_ts.sceneId) {
					resolve();
					return false;
				}
				req.getRequest(api.api_code_params, form, data => {
					let res = JSON.parse(data.scene);
					this.code = res.code;
					this.shareCode = res.shareCode
					this.rootCode = res.rootCode
					if(res.appId){
						req.setStorage('appId',res.appId)
					}
					resolve();
				});
			});
		},
		getDateTimeStamp(dateStr){
		 return util.getDateDiff(Date.parse(dateStr.replace(/-/gi,"/")));
		},
		getDetail() {
			let that = this;
			let apiUrl = api.api_material_detail;
			return new Promise((resolve,reject)=>{
				req.getRequest(apiUrl,{ code: that.code,shareCode: that.shareCode }, res => {
					if(res.brief){
						res.brief = res.brief.replace(/\r\n/g,"<br>")
						res.brief = res.brief.replace(/\n/g,"<br>");
						res.brief = res.brief.replace(/↵/g,"<br>");
					}
					that.detaile = res;
					uni.setNavigationBarTitle({
						title: res.title
					})
					resolve();
				},true);
			})
		},
		getContentList() {
			let form = this.form;
			form.rootCode = this.rootCode;
			req.getRequest(api.api_material_library,form,res => {
				this.contentList = res.list;
				for (var i = 0; i < this.contentList.length; i++) {
					if (this.contentList[i].code == this.code){
						this.contentList.splice(i,1);
					}
				}
			});
		},
		//预览图片
		previewImg(index) {
			//预览合同图片
			var src = this.detaile.params.imageList[index].url;
			let imgs = [];
			this.detaile.params.imageList.map(it=>{
				imgs.push(it.url)
			})
			uni.previewImage({
				current: src, // 当前显示图片的http链接
				urls: imgs
			});
		},
	},
	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) {
			//控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/<br[^>]*\/>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/<br[^>]*\>/gi, '<p style="margin: 10px 0;"></p>');
			newContent = newContent.replace(/font-size:[^;]+;?/g,'');
			newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:12rpx auto;"');
			return newContent;
		}
	}
};
</script>
<style>
@import './index.css';
</style>