292 lines
11 KiB
Vue
292 lines
11 KiB
Vue
<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>
|
||
<empower @buttonH="buttonH" :vision="vision" :isWhere="2" @cancleEv="cancleEv"></empower>
|
||
<!-- 底部客服 -->
|
||
<public-customer :nbottom="140"></public-customer>
|
||
<!-- 弹框 -->
|
||
<view v-if="isShowP" @touchmove.stop.prevent="moveHandle" class="disjcac posAll">
|
||
<view class="bacf radius20 width100 tank-box">
|
||
<view class="tc tank-box-itemone">请授权绑定手机号</view>
|
||
<view class="fon28 colf pad-x30 pad-zy30 tc disjb">
|
||
<view @tap="isShowP=false" class="pad-sx10 radius10 tank-btn" style="background-color: rgba(230, 230, 230,1);color: #000000;">暂不绑定</view>
|
||
<view class="pad-sx10 radius10 tank-btn posir pbackc">
|
||
立即绑定
|
||
<button open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="posia syxzo">立即绑定</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import empower from '@/components/empower.vue';
|
||
export default {
|
||
components:{
|
||
empower
|
||
},
|
||
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:'',
|
||
vision:false,
|
||
isShowP:false,
|
||
newCurrent:0,
|
||
cateListTwo:[],
|
||
dataList:[],
|
||
category_id:0,
|
||
size:10,
|
||
page:1,
|
||
total:'',//总数
|
||
isZanw:true,
|
||
}
|
||
},
|
||
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
|
||
this.category_id = options.category_id
|
||
if(options.invite_code!='' && options.invite_code!=undefined){
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (res)=> {
|
||
if (res.code) {
|
||
var params = {
|
||
code:res.code,
|
||
invite_code:options.invite_code,//用户邀请码
|
||
}
|
||
this.$requst.post('user/login',params).then(res => {
|
||
if(res.data.token!=''){
|
||
if(res.data.is_active==0) {
|
||
this.vision = true
|
||
this.haveImg = false
|
||
}
|
||
}
|
||
},error => {})
|
||
}
|
||
},
|
||
});
|
||
}
|
||
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: {
|
||
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
|
||
})
|
||
},
|
||
moveHandle(){//禁止底层滑动
|
||
return false
|
||
},
|
||
getphonenumber(e){//授权绑定手机号
|
||
if(e.detail.errMsg=="getPhoneNumber:ok"){
|
||
this.$requst.post('user/bind-phone',{iv:e.detail.iv,encryptedData:e.detail.encryptedData}).then(res=>{
|
||
// console.log('手机号信息：',res);
|
||
if(res.code==0){
|
||
this.isShowP = false
|
||
this.$toolAll.tools.showToast('手机号绑定成功','success')
|
||
}
|
||
},error=>{})
|
||
} else {
|
||
this.isShowP = false
|
||
}
|
||
},
|
||
buttonH(e){//授权成功
|
||
this.haveImg = e
|
||
if(e) {
|
||
this.vision = false
|
||
this.isShowP = true
|
||
}
|
||
},
|
||
cancleEv(e){//取消授权
|
||
if(e==0) this.vision = false
|
||
},
|
||
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>
|