zhuangxiu/pages/index/noticeDetail.vue

<template>
	<view class="content">
		<view class="itemDetail">
			<view class="typeName clamp2" :class="{wargin:type==2,base:type==1}">
				{{actionCart.title}}
			</view>
			<view class="detail">
				{{actionCart.add_time}}
			</view>
			<view class="contentDetail detail-desc">
				<rich-text class="detail-centent" :nodes="actionCart.content"></rich-text>
			</view>
		</view>
		<view class="mapBox" v-if="type==2">
			<map :enable-zoom='false' :enable-scroll='false' @click="openMap(actionCart.latitude,actionCart.longitude)"
				class="map" :latitude="actionCart.latitude" :longitude="actionCart.longitude" :markers="[{
				latitude:actionCart.latitude,
				longitude:actionCart.longitude,
				iconPath: '../../static/image/location.png',
				heighe:35,
				width:35
			}]"></map>
			<view class="mapBottom flex">
				<view>
					<image src="../../static/icon/gpsW.png" mode="widthFix"></image>
				</view>
				<view class="clamp">
					{{actionCart.title}}
				</view>
			</view>
			<!-- <view class="mapTip flex">
				<view class="leftMapTip flex" :class="{success:actionCart.xh,error:!actionCart.xh}">
					<image class="topTip" src="../../static/icon/mpXh.png" mode="widthFix"></image>
				</view>
				<view class="leftMapTip flex" :class="{success:actionCart.gps,error:!actionCart.gps}">
					<image class="topTip" src="../../static/icon/mpGps.png" mode="widthFix"></image>
				</view>
			</view> -->
		</view>

		<!-- <view class="base-buttom" v-if="type==1">

		</view> -->
	</view>
</template>

<script>
	import {
		share
	} from '@/api/wx';
	import {
		mapState,
	} from 'vuex';
	import {
		details,
	} from '@/api/index.js';
	export default {
		data() {
			return {
				id: '', //保存信息id
				type: 0, //2为警报1为非警报
				actionCart: {},

			};
		},

		onLoad(options) {
			const that = this;
			that.id = options.id;
			that.type = options.type;
			if(+options.type==2){
				// #ifdef APP-NVUE
				const eventChannel = that.$scope.eventChannel; // 兼容APP-NVUE
				// #endif
				// #ifndef APP-NVUE
				const eventChannel = that.getOpenerEventChannel();
				// #endif
				// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
				eventChannel.on('addPushData', function(data) {
					that.actionCart = data;
					that.actionCart.content = that.actionCart.content.replace(/\<img/gi, '<img class="rich-img"');
				})
			}
			if(+options.type==1){
				that.loadData();
			}
			if(+options.type==3){
				that.loadData();
			}
			that.share()
		},
		// #ifdef MP
		onShareAppMessage(options) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			let pages = getCurrentPages(); //获取加载的页面
			let currentPage = pages[pages.length - 1]; //获取当前页面的对象
			let url = currentPage.route; //当前页面url
			let item = currentPage.options; //如果要获取url中所带的参数可以查看options
			let shareObj = {
				title: this.shareData.title, // 默认是小程序的名称(可以写slogan等)
				path: url, // 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: this.shareData.img,
				desc:this.shareData.synopsis,
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				},
				fail: function() {
					// 转发失败之后的回调
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						// 用户取消转发
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				}
			};
			// 判断是否可以邀请
			if (this.userInfo) {
				shareObj.path += '&spread=' + this.userInfo.uid;
			}
			return shareObj;
		},
		// #endif
		methods: {
			share() {
				console.log('加载分享');
				const that = this;
				// 请求获取默认数据
				share({}).then(({
					data
				}) => {
					console.log('分享回调', data);
					that.shareData = data.data
				});
			},
			// 打开地图导航
			openMap(lat, long) {
				uni.openLocation({
					latitude: lat,
					longitude: long,
				})
			},
			navTo(url) {

				uni.navigateTo({
					url: url
				})

			},
			// 转换金额为数字
			moneyNum(value) {
				return +value;
			},
			// 确认收货
			//获取订单列表
			loadData() {
				const that = this;
				details({},this.id)
					.then(({
						data
					}) => {
						this.actionCart = data;
						that.actionCart.content = that.actionCart.content.replace(/\<img/gi, '<img class="rich-img"');
						uni.setNavigationBarTitle({
							title:data.title
						})
					})
					.catch(e => {
						
					});
			}
		}
	};
</script>

<style lang="scss">
	/deep/ .iconenter {
		font-size: $font-base + 2rpx;
		color: #888;
	}
	
	/deep/ .con_image {
		width: 130rpx;
		height: 130rpx;
		display: inline-block;
		padding: 15rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	/* 商品详情中限制图片大小 */
	/deep/ .rich-img {
		width: 100% !important;
		height: auto;
	}
	.detail-desc {
		background: #fff;
		/deep/ img {
			max-width: 100% !important;
			display: inline !important;
		}
		/deep/ div {
			max-width: 100% !important;
		}
	}
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	// .content {
	// 	padding-top: 30rpx;
	// }

	.base-buttom {
		position: relative;
		bottom: auto;
		right: auto;
		left: auto;
	}

	.itemDetail {
		margin-bottom: 30rpx;
		padding: 50rpx;
		padding-top: 44px;
		background-color: #FFFFFF;
		.base {
			color: $font-color-base;
		}

		.wargin {
			color: $color-red;
		}

		.typeName {
			font-size: 36rpx;
		}

		.detail {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: $font-color-light;
		}

		.contentDetail {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: $font-color-light;
		}
	}

	.mapBox {
		position: relative;

		.mapBottom {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 15rpx;
			font-size: 24rpx;
			;
			color: #ffffff;
			justify-content: flex-start;
			background-color: rgba($color: #000000, $alpha: 0.75);

			image {
				width: 30rpx;
				margin-right: 10rpx;
			}
		}

		.map {
			width: 750rpx;
			height: 300rpx;
			font-size: 35rpx;
		}

		.mapTip {
			position: absolute;
			top: 0;
			left: 0;
			padding: 20rpx;

			.leftMapTip {
				margin-right: 20rpx;
				width: 44rpx;
				height: 44rpx;
				border-radius: 10rpx;
				justify-content: center;

				.topTip {
					width: 24rpx;
				}

				&.success {
					background-color: $color-green;
				}

				&.error {
					background-color: $color-red;
				}
			}
		}
	}
</style>