hengmei-two/pagesB/articleDetail/articleDetail.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'详情'" :statusTitle="true"></status-nav>
		<view v-if="isLoading" :style="{paddingTop: statusHeight+'px'}" class="pad-zy32 pad-x180">
			<view class="fon36 col3 bold mar-sx20" style="line-height: 50rpx;">{{detailObj.title}}</view>
			<view class="disac mar-x20">
				<image :src="headImg" style="width: 60rpx;height: 60rpx;border-radius: 100%;" mode="widthFix"></image>
				<view class="mar-z10">
					<view class="fon28 col3">{{name}}</view>
					<view class="fon20 col9" style="margin-top: 6rpx;">{{detailObj.published_at}}发布</view>
				</view>
			</view>
			<!-- 内容详情 -->
			<view class="fon28" style="color: #1A1A1A; line-height: 40rpx;">
				<!-- <image class="mar-x20" src="/static/public/banner.png" style="height: 400rpx;width: 100%;" mode=""></image> -->
				<!-- <view style="margin-bottom:50rpx;">屋基寨位于阿坝茂县松坪沟，是典型的羌族聚居区，有着鲜明的价值观和民族文化屋基寨美景屋基寨美景。</view>
				<view style="margin-bottom:50rpx;">山寨海拔3000米以上，有川西独特的自然景色，但是海拔高、地势陡，各类资源匮乏，居民收入单一屋基寨地貌屋基寨地貌。</view>
				<view style="margin-bottom:50rpx;">成都恒美毛发医疗美容总经理徐军挺，了解到当地居民希望发展旅游增加收入时，便立即驱车前往屋基寨村民着盛装迎接恒美一行村民着盛装迎接恒美一行。</view>
				<view style="margin-bottom:50rpx;">徐军挺总经理建议：做强乡村旅游，要完善基础设施，同时要保持乡村建筑风貌和地域文化特色；还要完善服务标准，提升消防安全水平；</view>
				<view style="margin-bottom:50rpx;">打造乡村旅游品牌，形成示范带动作用参观了解村民居住环境参观了解村民居住环境了解村民们的生活习俗风土人情了解村民们的生活习俗风土人情。</view> -->
				<rich-text :nodes="content"></rich-text>
			</view>
			<!-- 导航 -->
			<view class="mar-s50 pad-s10">
				<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" :isCenter="cateListTwo.length<=4?false:true" :newbmo="'#F5F5F5'" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
			</view>
			<!-- 列表 -->
			<view v-if="dataList.length!=0" class="mar-x20">
				<view @tap="goDetail(index)" class="pad-sx30 width100 disjb bbot" v-for="(item,index) in dataList" :key="index">
					<view class="disjb fc">
						<view class="fon30 col3 clips2" style="height: 84rpx;">{{item.title}}</view>
						<view class="fon24 col9 mar-s25">{{item.time}}</view>
					</view>
					<image v-if="item.imgSrc!=''" class="flexs mar-z30" style="width: 140rpx;height: 140rpx;" :src="item.imgSrc" mode="aspectFill"></image>
				</view>
			</view>
			<view v-if="dataList.length==0" class="disjcac fc" style="margin-top: 20%;">
				<image class="zanw-img" src="/static/public/zanwn.png" mode="aspectFill"></image>
				<view class="fon24 col3">暂无内容</view>
			</view>
		</view>
		<!-- 分享 -->
		<view @tap="shareImgEv" class="detail-cart-box" style="display: flex;justify-content: center;align-items: center;width: 112rpx;height: 112rpx;border-radius: 100%;background-color: #0fac29;bottom: 160rpx;color: #FFFFFF;">
			<image class="zanw-img" src="/static/public/share-pyq.png" mode="aspectFill" style="width: 64rpx;height: 81rpx;"></image>
		</view>
		<view class="posixzy disjbac bacf pad-zy32 btnBKS">
			<view class="posir">
				<image @tap="backHome" class="posia backH" src="/static/public/back-home.png" mode="aspectFill"></image>
			</view>
			<view class="disac fon28 colf">
				<view @tap="lianK" class="disac posir lianShare" style="background-color: #3875F6; border-top-left-radius: 51rpx;border-bottom-left-radius: 51rpx;">
					<image src="/static/public/bottom-customer.png" class="mar-zy20" style="width: 47rpx;height: 47rpx;" mode="aspectFill"></image>
					<view>联系客服</view>
					<button class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
				</view>
				<view class="disac posir lianShare" style="background-color: #38CE51;border-top-right-radius: 51rpx;border-bottom-right-radius: 51rpx;">
					<image src="/static/public/bottom-shear.png" style="width: 47rpx;height: 47rpx;margin-left: 15rpx;margin-right: 8rpx;" mode="aspectFill"></image>
					<view>分享给好友</view>
					<button class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;">分享</button>
				</view>
			</view>
		</view>
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
	</view>
</template>

<script>
	import { base64ToPath } from '@/jsFile/base64-src.js';
	export default {
		data() {
			return {
				headImg:'/static/public/like.png',
				name:'恒美植发',
				time:'2021-07-14 08:22',
				showTop:false,
				detailObj:{},//详情
				content:'',//富文本详情
				isLoading:false,
				detailId:'',//当前关于我们新闻ID
				invite_code:'',
				newCurrent:0,
				cateListTwo:[],
				dataList:[],
				category_id:0,
				size:10,
				page:1,
				total:'',//总数
				isZanw:true,
				// shareImg:''//分享图
				shareFlag:true,
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onShareAppMessage(res) {
		    var ya = this;
			this.$requst.post('user/record',{type:'content',action:'share',id:this.detailObj.id}).then(res=>{console.log('分享成功：',res);},error=>{})
			// 调用tools.js中的种植埋点事件
			this.$toolAll.tools.plantPoint(4,this.detailObj.id);
			var shareObj = {
		　　　　	title: `${ya.detailObj.title}`, // 默认是小程序的名称(可以写slogan等)
		　　　　	path: `/pagesB/articleDetail/articleDetail?id=${this.detailId}&share_id=${uni.getStorageSync('userId')}&invite_code=${uni.getStorageSync('invite_code')}`, // 默认是当前页面，必须是以‘/’开头的完整路径
		　　　　	imageUrl: `${this.$http}${this.detailObj.share_img || this.detailObj.cover}`//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
		　	};
		　　return shareObj;
		},
		onLoad(options) {
			this.detailId = options.id
			this.category_id = options.category_id
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkDetail(options.id);
				this.$requst.get('index/base-config').then(res=>{
					this.headImg = this.$http + res.data.logo;
					this.name = res.data.logo_title;
				})
			}
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.checkAbout(this.category_id)//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		methods: {
			// 分享图分享
			shareImgEv(){
				this.$toolAll.tools.showToast('分享图生成中...','none',10000);
				if(this.shareFlag){
					this.shareFlag = false;
					this.$requst.post('archives/share',{id:this.detailId}).then(res=>{
						base64ToPath(res.data.share_img).then(path=>{
							uni.hideToast();
							this.$toolAll.tools.showToast('正在调起分享...');
							wx.showShareImageMenu({
								path: path,
								success:(res=>{
									this.shareFlag = true;
									this.$requst.post('user/record', {
										type: 'content',
										action: 'share',
										id: this.detailId
									}).then(res => {
										console.log('分享成功：', res);
									}, error => {})
									// 调用tools.js中的种植埋点事件
									this.$toolAll.tools.plantPoint(4);
								}),
								fail:(err=>{
									this.shareFlag = true;
								})
							})
						})
					})
				} else {this.$toolAll.tools.showToast('请勿重复点击');}
			},
			
			checkAbout(category_id){
				let params = {
					category_id:category_id,
					page:this.page,
					size:this.size
				}
				this.$requst.post('archives/about',params).then(res=>{
					// console.log('关于我们：',res);
					if(res.code==0){
						if(this.cateListTwo.length==0){
							if(res.data.category.length!=0){
								res.data.category.forEach((item,index)=>{
									let cateObj = {
										id:item.id,
										mode_id:item.mode_id,
										title:item.title
									}
									this.cateListTwo.push(cateObj)
									if(this.category_id==item.id) this.newCurrent = index
								})
							}
						}
						if(this.page==1) this.dataList = []
						if(res.data.list.list.length!=0){
							this.total = res.data.list.total
							res.data.list.list.forEach(item=>{
								let newImg = ''
								if(item.cover=='') newImg = '/static/public/logo.png'
								else newImg = this.$http + item.cover
								let aobj = {
									id:item.id,
									title:item.title,
									time:item.published_at,
									imgSrc:newImg
								}
								if(this.detailId!=item.id) this.dataList.push(aobj)
							})
						}
					}
				},error=>{})
			},
			chooseTwo(index){//二级分类选择
				this.newCurrent = index
				// console.log('二级分类：',index);
				this.isZanw = true
				this.page = 1
				this.category_id = this.cateListTwo[index].id
				this.checkAbout(this.cateListTwo[index].id)
			},
			goDetail(index){
				uni.navigateTo({
					url:'/pagesB/articleDetail/articleDetail?id='+this.dataList[index].id +"&category_id="+this.category_id
				})
			},
			backHome(){
				uni.navigateTo({
					url:'/pages/tabbar/pagehome/pagehome'
				})
			},
			lianK(){//客服
				// wx.openCustomerServiceChat({
				// 	extInfo: {url: `https://work.weixin.qq.com/kfid/kfcb3bba5b57d9a42ba?enc_scene=ENC616HXDjLYNcmsR49PBE75UERg8Ncv3dygpYjfnh3XVvA&scene_param=${uni.getStorageSync('openid')}`},
				// 	corpId: 'ww1f86f258d4ff5817',
				// 	success(res) {}
				// })
				this.$toolAll.tools.closeTimer()//清空埋点倒计时
				this.$requst.post('user/record',{type:'other',action:'ask',id:0}).then(res=>{},error=>{})
				// 调用tools.js中的种植埋点事件
				this.$toolAll.tools.plantPoint(5);
			},
			checkDetail(id){
				this.$requst.post('archives/detail',{id:id}).then(res=>{
					// console.log('详情：',res);
					if(res.code==0){
						this.detailObj = res.data.detail;
						// this.shareImg = this.$http + this.detailObj.share_img;
						this.content = this.$toolAll.tools.escape2Html(res.data.detail.content)
						uni.hideToast()
						this.isLoading = true
					}
					this.checkAbout(this.category_id);
				},error=>{})
			}
		}
	}
</script>

<style>
</style>