hengmei-one/pagesB/articleDetail/articleDetail.vue

268 lines
10 KiB
Vue
Raw Permalink Normal View History

2021-10-21 09:21:59 +00:00
<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'详情'" :statusTitle="true"></status-nav>
<view v-if="isLoading" :style="{paddingTop: statusHNH+'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="aspectFill"></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 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 v-if="haveImg" class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact"></button>
</view>
<view @tap="shareEv" 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 v-if="haveImg" class="posia" open-type="share" style="top: 0;right: 0;left: 0;bottom: 0;opacity: 0;"></button>
</view>
</view>
</view>
<!-- 底部客服 -->
<public-customer :nbottom="140"></public-customer>
2021-12-20 08:03:34 +00:00
<!-- 弹框授权 -->
<empower @buttonH="buttonH" :vision="vision" :isWhere="2"></empower>
2021-10-21 09:21:59 +00:00
<!-- 弹框 -->
2021-12-20 08:03:34 +00:00
<auth-phone v-if="isShowP"></auth-phone>
2021-10-21 09:21:59 +00:00
</view>
</template>
<script>
export default {
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor'),//主题颜色
headImg:'/static/public/like.png',
name:'恒美植发',
time:'2021-07-14 08:22',
showTop:false,
detailObj:{},//详情
content:'',//富文本详情
isLoading:false,
haveImg:true,
detailId:'',//当前关于我们新闻ID
invite_code:'',
newCurrent:0,
cateListTwo:[],
dataList:[],
category_id:0,
size:10,
page:1,
total:'',//总数
isZanw:true,
2021-12-20 08:03:34 +00:00
vision:false,
isShowP:false,
2021-10-21 09:21:59 +00:00
}
},
onShareAppMessage(res) {
var ya = this;
this.$requst.post('user/record',{type:'content',action:'share',id:this.detailObj.id}).then(res=>{console.log('分享成功:',res);},error=>{})
let maiOjb = {
e:4,//内容分享
c:this.detailObj.id*1,
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
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: ''//自定义图片路径可以是本地文件路径、代码包文件路径或者网络图片路径支持PNG及JPG不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
  };
  return shareObj;
},
onShow() {
this.$toolAll.tools.isLogin()
},
onLoad(options) {
this.checkDetail(options.id)
this.detailId = options.id
2021-12-20 08:03:34 +00:00
this.category_id = options.category_id;
console.log(uni.getStorageSync('is_active'),'是否已注册');
if(uni.getStorageSync('is_active')!=1){this.vision = true;}
2021-10-21 09:21:59 +00:00
if(options.invite_code!='' && options.invite_code!=undefined){
2021-12-20 08:03:34 +00:00
this.loginEv(options.invite_code);
} else if(options.source_code!='' && options.source_code!=undefined){
this.loginEv('',options.source_code,options.channel);
}
this.checkAbout(this.category_id)
},
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: {
loginEv(invite_code='',source='',channel=''){
2021-10-21 09:21:59 +00:00
uni.login({
provider: 'weixin',
success: (res)=> {
if (res.code) {
var params = {
code:res.code,
2021-12-20 08:03:34 +00:00
invite_code:invite_code,//用户邀请码
source_code:source,
channel:channel
2021-10-21 09:21:59 +00:00
}
this.$requst.post('user/login',params).then(res => {
if(res.data.token!=''){
if(res.data.is_active==0) {
2021-12-20 08:03:34 +00:00
this.haveImg = false;
this.vision = true;
2021-10-21 09:21:59 +00:00
}
}
},error => {})
}
},
});
2021-12-20 08:03:34 +00:00
},
buttonH(e){//授权成功
this.haveImg = e
if(e) {
this.vision = false
this.isShowP = true
}
},
2021-10-21 09:21:59 +00:00
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(){//客服
// if(!this.jieDuan){
// let isAuth = this.$toolAll.tools.returnAuth()
// if(!isAuth){
if(this.haveImg == false) {
this.vision = true
} else {
this.$toolAll.tools.closeTimer()//清空埋点倒计时
this.$requst.post('user/record',{type:'other',action:'ask',id:0}).then(res=>{},error=>{})
let maiOjb = {
e:5,//内容咨询
t:new Date().getTime()//当前时间戳
}
this.$toolAll.tools.maiDian(maiOjb)
}
// } else this.jieDuan = true
// }
},
shareEv(){
if(this.haveImg == false) {
this.vision = true
}
},
checkDetail(id){
this.$requst.post('archives/detail',{id:id}).then(res=>{
// console.log('详情:',res);
if(res.code==0){
this.detailObj = res.data.detail
this.content = this.$toolAll.tools.escape2Html(res.data.detail.content)
uni.hideToast()
this.isLoading = true
}
},error=>{})
}
}
}
</script>
<style>
</style>