hm-examples/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;">
				<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 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>
	export default {
		data() {
			return {
				headImg:'/static/public/like.png',
				name:'Company',
				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:''//分享图
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			},
			appletImg() {
				return this.$store.state.appletImg
			}
		},
		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: {
			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 = this.appletImg;
								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/kfc0d895c27861955a2?enc_scene=${'ENC6yeVMve4yhC238GG9zc5VYa6WaddYNHvNriZ6KueYvXj'}&scene_param=${uni.getStorageSync('openid')}`},
					corpId: 'ww62997b64e2c56170',
					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>