You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
304 lines
6.5 KiB
304 lines
6.5 KiB
<template>
|
|
<view class="centent" :style="{ height: height + 'px' }">
|
|
<back :info="info"></back>
|
|
<view class="main-top">
|
|
<image v-if="xllist.channel_id==75" :src="xllist.midPic!=''? $geturl(xllist.midPic):$getimg('noimg.png')" mode="" class="top-pos1"></image>
|
|
<image v-if="xllist.channel_id==85" :src="$geturl(xllist.midPic)" mode="" class="top-pos1"></image>
|
|
<image v-if="xllist.channel_id==93" :src="$geturl(xllist.midPic)" mode="" class="top-pos1"></image>
|
|
</view>
|
|
<view class="main">
|
|
<view class="main-top1">
|
|
<view class="top1-sdf">
|
|
{{ xllist.title }}
|
|
</view>
|
|
</view>
|
|
<view class="xqtimeAll">
|
|
<view class="xqtimeleft">
|
|
<text class="sjsj">{{ xllist.pubDate }}</text>
|
|
</view>
|
|
<view class="xqtimeright">
|
|
<text class="sjsj">{{ xllist.upsNum }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="main-top2">
|
|
<view class="top2-sdf" v-html="xllist.content">
|
|
</view>
|
|
</view>
|
|
<view class="dzys active" v-if="!candz">
|
|
<image :src="$getimg('icon-dzxz.png')" class="imgs"></image>
|
|
<text class="text active">{{ xllist.upsNum }}</text>
|
|
</view>
|
|
<view class="dzys" v-if="candz" @click="dzsclick">
|
|
<image :src="$getimg('icon-dianzhan.png')" class="imgs"></image>
|
|
<text class="text">{{ xllist.upsNum }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import back from '@/components/html/back.vue';
|
|
var web = require('@/components/utils/request.js');
|
|
export default {
|
|
components: {
|
|
back
|
|
},
|
|
data() {
|
|
return {
|
|
info: {
|
|
color: true,num:false
|
|
},
|
|
id: 0,
|
|
xllist: {},
|
|
height: 800,
|
|
candz:true, //是否可以点赞
|
|
dzarr:[], //点赞缓存列表
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
var that = this;
|
|
uni.getSystemInfo({
|
|
//设置屏幕背景
|
|
success(res) {
|
|
that.height = res.windowHeight - 40;
|
|
}
|
|
});
|
|
this.id = option.id;
|
|
var pages = getCurrentPages();
|
|
var page = pages[pages.length - 1].route;
|
|
// this.share.path='/'+page+'?id='+this.id;
|
|
// this.shareline.query={id:this.id}
|
|
this.getdatas();
|
|
try {
|
|
let tmpstr = uni.getStorageSync('dianzan'); //获取缓存中的点赞列表
|
|
if(tmpstr){
|
|
this.dzarr = tmpstr.split(',');
|
|
}
|
|
if(this.dzarr.indexOf(this.id) > -1){ //判断是否点赞过
|
|
this.candz = false; //点赞过则不能点
|
|
}
|
|
} catch (e) {
|
|
this.candz = true;
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
if(e.scrollTop>50&&!this.info.num){
|
|
this.info.num=true;
|
|
}
|
|
if(e.scrollTop<50&&this.info.num){
|
|
this.info.num=false;
|
|
}
|
|
},
|
|
methods: {
|
|
getdatas() {
|
|
//获取数据
|
|
var para = {
|
|
id: this.id
|
|
};
|
|
var url = '/newsdetail.jspx';
|
|
var that = this;
|
|
web.httpPost(that, url, para, function(res) {
|
|
if (res.data.status == 200) {
|
|
var tmp = res.data;
|
|
tmp.content = tmp.content.replace(/src="/gi, 'src="https://cs.tour-ma.com/');
|
|
|
|
tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
|
|
return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, 'style="max-width:100%;height:auto;width:100%;"'); // 替换style
|
|
});
|
|
tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) {
|
|
return match.replace(/<img /gi, '<img style="max-width:100%;height:auto;width:100%;"'); // 替换style
|
|
});
|
|
|
|
that.xllist = tmp;
|
|
console.log(that.xllist.content);
|
|
}
|
|
});
|
|
},
|
|
dzsclick() {
|
|
//点赞缓存处理
|
|
try {
|
|
|
|
if(this.dzarr.indexOf(this.id) > -1){
|
|
this.candz = false;
|
|
}else{
|
|
this.dzarr.push(this.id);
|
|
uni.setStorageSync('dianzan',this.dzarr.toString()); //加到缓存数组里
|
|
this.candz = false; //改为不能点
|
|
}
|
|
} catch (e) {
|
|
this.candz = true;
|
|
}
|
|
var url = '/content_up.jspx?contentId=' + this.id;
|
|
var para = {};
|
|
var that = this;
|
|
web.httpGejqr(that, url, para, function(res) {
|
|
uni.showToast({
|
|
title: '点赞成功！'
|
|
});
|
|
that.getdatas();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.main-top {
|
|
width: 750rpx;
|
|
// height: 100%;
|
|
position: relative;
|
|
|
|
.top-pos {
|
|
width: 100%;
|
|
height: 240rpx;
|
|
}
|
|
.top-pos1 {
|
|
width: 100%;
|
|
height: 540rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.main {
|
|
width: 750rpx;
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
|
|
.main-top1 {
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 30rpx auto 0rpx auto;
|
|
text-align: center;
|
|
.top1-sdf {
|
|
font-size: 40rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 1.6;
|
|
margin: 0rpx auto;
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
.main-top2 {
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 30rpx 0rpx 0 0rpx;
|
|
|
|
.top2-sdf {
|
|
width: 90%;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
// font-weight: 500;
|
|
color: #666666;
|
|
line-height: 1.8;
|
|
margin: 0rpx auto;
|
|
}
|
|
}
|
|
.main-top3{
|
|
width: 100%;
|
|
height: auto;
|
|
margin: 30rpx 0rpx 0 0rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
color: #666666;
|
|
line-height: 48rpx;
|
|
.top3-sdf{
|
|
margin-left: 30rpx;
|
|
}
|
|
.sdf-count{
|
|
margin: 0 30rpx 0 40rpx;
|
|
}
|
|
.top3-sdf1{
|
|
margin-left: 30rpx;
|
|
}
|
|
.sdf-count1{
|
|
margin: 0 30rpx 0 40rpx;
|
|
}
|
|
}
|
|
}
|
|
.xqtimeAll {
|
|
width: 90%;
|
|
margin: 40upx auto;
|
|
color: #b7987c;
|
|
font-size: 24upx;
|
|
overflow: hidden;
|
|
.sjsj {
|
|
vertical-align: middle;
|
|
color: #666666;
|
|
}
|
|
.xqtimeleft {
|
|
float: left;
|
|
.sjsj{
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
background: url($url+'shijian.png') no-repeat;
|
|
background-size: 100% auto;
|
|
margin-right: 10upx;
|
|
margin-top: -5upx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
.xqtimeright {
|
|
float: right;
|
|
.sjsj{
|
|
&::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 28upx;
|
|
height: 28upx;
|
|
background: url($url+'icon-dianzhan.png') no-repeat;
|
|
background-size: 100% auto;
|
|
margin-right: 10upx;
|
|
margin-top: -5upx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.dzys{
|
|
width: 168upx;
|
|
height: 168upx;
|
|
position: absolute;
|
|
left: 50%;
|
|
border-radius: 50%;
|
|
margin: 20upx 0upx 100upx -94upx;
|
|
border: 1rpx solid #666666;
|
|
background-size: 100% auto;
|
|
.imgs {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
margin: 22% auto 2%;
|
|
display: block;
|
|
opacity: 0.7;
|
|
}
|
|
.text {
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
.dzys.active{
|
|
border: 1rpx solid #ff3335;
|
|
.imgs {
|
|
opacity: 1;
|
|
}
|
|
.text{
|
|
color: #ff3335;
|
|
}
|
|
}
|
|
</style>
|
|
|