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.

306 lines
7.7 KiB

7 months ago
<template>
<view class="content">
<!-- <view class="bgtoptxt" @click="$getpage('/pages/index/foodList')">查看全部</view> -->
<view class="bgtop" v-if="xllist.midPic!=''" :style="{background: 'url('+$geturl(xllist.midPic)+') no-repeat'}"></view>
<!-- <view class="bgtop" v-if="xllist.midPic==''" :style="{background: 'url('+getImg3('960noimg.png')+') no-repeat'}"></view> -->
<image v-if="xllist.channel_id==117||xllist.channel_id==116" @click="toOther()" class="yudingimg" :src="$getimg('lijigoumai.png')" mode="aspectFill"></image>
<view class="bgboxs">
<view class="xwtitle">
<view class="tit">
<view class="icon">
<image v-if="xllist.channel_id==92" :src="$getimg('wf-x-ms-icon.png')" mode=""></image> <!-- 美食 -->
<image v-if="xllist.channel_id==121" :src="$getimg('wf-x-tc-icon.png')" mode=""></image> <!-- 特产 -->
<image v-if="xllist.channel_id==76" :src="$getimg('icon-yyyc.png')" mode=""></image> <!-- 非遗 -->
<image v-if="xllist.channel_id==116" :src="$getimg('wf-x-wc-icon.png')" mode=""></image> <!-- 文创 -->
</view>
<view class="titwz">{{xllist.title }}</view>
</view>
<!-- <view class="xqtimeright" style="right: 150rpx;display: flex;align-items: center;">
<image :src="$getimg('icon-sc.png')" mode="" class="xwdzimg" style="margin-right: 10rpx;"></image>
{{xllist.collectCount}}
</view> -->
<view class="xqtimeright">
<text class="sjsj">{{xllist.upsNum}}</text>
</view>
</view>
<view class="xwnr">
<view class="xwnrdiv" v-html="xllist.content"></view>
</view>
<view class="xwdzAllfotter">
<view :class="['xwdzAll',!candz?'active':'']" @click="dzsclick">
<image :src="!candz?$getimg('icon-dzxz.png'):$getimg('icon-dianzhan.png')" mode="" class="xwdzimg"></image>
<view :class="['xwdzsl',!candz?'active':'']">{{ xllist.upsNum}}</view>
</view>
<!-- <view :class="['xwdzAll',xllist.isCollect?'active':'']" style="margin-left: 20rpx;" @click="soucan">
<image :src="xllist.isCollect?$getimg('icon-scxz.png'):$getimg('icon-sc.png')" mode="" class="xwdzimg"></image>
<view :class="['xwdzsl',xllist.isCollect?'active':'']">{{ xllist.collectCount}}</view>
</view> -->
</view>
</view>
<pingjia :info="pjinfo"></pingjia>
</view>
</template>
<script>
var web = require('@/components/utils/request.js');
import pingjia from '@/components/utils/zixunpj.vue';
export default {
components:{pingjia},
data() {
return {
id: 0,
xllist: {},
candz:true, //是否可以点赞
dzarr:[], //点赞缓存列表
pjinfo: {
id: ''
},
};
},
onLoad(option) {
this.id = option.id;
this.pjinfo.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;
}
},
onReady() {},
onShareAppMessage() {},
methods: {
getImg(url) {
return 'https://cs.tour-ma.com' + url;
},
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;
if(tmp.content!=undefined){
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;
}
});
},
soucan(id){
if(this.xllist.isCollect){
var type=2;
}else{
var type=1;
}
var url='/content/add_collections.jspx';
var para={
contentId:this.xllist.id,
type:type//1-收藏, 2-取消收藏
}
var that=this;
web.httpPost(that,url,para,function(res){
that.getdatas();
})
},
dzsclick() {
if(!this.candz){return}
//点赞缓存处理
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();
});
},
toOther(){
uni.navigateToMiniProgram({
appId:'wx8ece732cc3a87e0f',
path:'pages/index/index',
envVersion:'release',
extraData: {
},
success(res) {
console.log("chenggong");
},
fail(e){
console.log(e);
}
})
}
}
};
</script>
<style lang="scss">
$url:'https://cs.tour-ma.com/r/cms/www/m/changshu/';
page {
background: #ffffff;
}
.content {
width: 750rpx;
// padding-top: 30upx;
overflow-x: hidden;
.bgtoptxt{
font-size: 26upx;
font-weight: 500;
color: #FFFFFF;
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 100%);
border-radius: 26upx;
width: 160upx;
height: 56upx;
line-height: 56upx;
text-align: center;
margin: 0upx 0 30upx 30upx;
}
.bgtop{
width: 100%;
height: 460upx;
background-size: 100% 100% !important;
}
.bgboxs{
width: 100%;
margin: -40rpx auto 0;
background: #fff;
border-radius: 30rpx 30rpx 0rpx 0rpx;
.xwtitle {
font-size: 40upx;
font-weight: bold;
color: #333333;
display: flex;
align-items: center;
padding: 50rpx 20rpx 0;
position: relative;
.tit{
display: flex;
align-items: center;
}
.icon{
width: 62upx;
height: 56upx;
margin-right: 10rpx;
image{
display: block;
width: 100%;
height: 100%;
}
}
}
.xqtimeright {
font-size: 24rpx;
position: absolute;
right: 50rpx;
image{
width: 28rpx;
height: 28rpx;
}
}
.xqtimeright .sjsj::before {
content: '';
display: inline-block;
width: 28rpx;
height: 28rpx;
background: url( $url+"icon-dianzhan.png") no-repeat;
background-size: 100% auto;
margin-right: 10rpx;
margin-top: -9rpx;
vertical-align: middle;
}
.xwnr {
font-size: 24upx;
font-weight: 500;
color: #666;
width: 90%;
margin: 30upx auto 0 auto;
line-height: 1.6;
.xwnrdiv {
margin: 0rpx 0rpx 55rpx 0rpx;
line-height: 2;
}
}
.xwdzAllfotter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
.xwdzAll {
overflow: hidden;
border: 1rpx solid #d6d6d6;
border-radius: 35rpx;
display: flex;
flex-direction: row;
align-items: center;
width: 155rpx;
justify-content: center;
height: 70rpx;
.xwdzimg {
width: 32rpx;
height: 32rpx;
float: left;
margin-right: 10rpx;
}
.xwdzsl {
font-size: 28rpx;
font-family: Microsoft YaHei;
font-weight: bold;
color: #111111;
margin: 0rpx 0rpx 0rpx 18rpx;
float: left;
&.active {
color: #ff3335;
}
}
&.active{
border: 1rpx solid #ff3334;
}
}
}
}
.yudingimg{
width: 110rpx;
height: 110rpx;
position: fixed;
top: 278rpx;
right: 50rpx;
z-index: 999;
}
}
</style>