shop-applet/pages/news_details/index.vue

352 lines
8.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<view class='newsDetail' style="padding-bottom: 50px;">
<view class='title'>{{articleInfo.title}}</view>
<view class='list acea-row row-middle'>
<view class='label'>{{articleInfo.author}}</view>
<view class='item'></text>{{articleInfo.create_time}}</view>
<!-- <view class='item'><text class='iconfont icon-liulan'></text>{{articleInfo.visit}}</view> -->
</view>
<view class='conters'>
<!-- <rich-text :nodes="content" class="conter"></rich-text> -->
<jyf-parser :html="content.replace(/<br\/>/ig, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
</view>
<view class="picTxt acea-row row-between-wrapper" v-if="store_info.id">
<view class="pictrue">
<image :src="store_info.image"></image>
</view>
<view class="text">
<view class="name line1">{{store_info.store_name}}</view>
<view class="money font-color">
¥<text class="num">{{store_info.price}}</text>
</view>
<view class="y_money">¥{{store_info.ot_price}}</view>
</view>
<navigator :url="'/pages/goods_details/index?id='+store_info.id" hover-class="none" class="label"><text
class="span">查看商品</text></navigator>
</view>
<!-- #ifdef H5 -->
<button class="bnt bg-color" hover-class='none' @click="listenerActionSheet">和好友一起分享</button>
<!-- #endif -->
<!-- #ifdef MP -->
<button class="bnt bg-color" open-type="share" hover-class='none'>和好友一起分享</button>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<button class="bnt bg-color" open-type="share" hover-class='none' @click="uniShare">分享</button>
<!-- #endif -->
</view>
<shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo>
<!-- <home></home> -->
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import parser from "@/components/jyf-parser/jyf-parser";
import {
getArticleDetails
} from '@/api/api.js';
import shareInfo from '@/components/shareInfo';
import home from '@/components/home';
import UniShare from 'uni_modules/uni-share/js_sdk/uni-share.js';
const uniShare = new UniShare();
export default {
components: {
shareInfo,
home,
"jyf-parser": parser,
},
onBackPress({
from
}) {
if (from == 'backbutton') {
this.$nextTick(function() {
uniShare.hide()
})
return uniShare.isShow;
}
},
data() {
return {
id: 0,
articleInfo: [],
store_info: {},
content: '',
shareInfoStatus: false,
tagStyle: {
img: 'width:100%;display:block;'
},
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
if (options.hasOwnProperty('id')) {
this.id = options.id;
} else {
// #ifndef H5
uni.navigateBack({
delta: 1
});
// #endif
// #ifdef H5
history.back();
// #endif
}
},
onShow: function() {
this.getArticleOne();
},
methods: {
// 分享
uniShare() {
uniShare.show({
content: { //公共的分享参数配置 类型type、链接herf、标题title、summary描述、imageUrl缩略图
type: 0,
href: 'https://uniapp.dcloud.io/',
title: '标题',
summary: '描述',
imageUrl: 'https://img-cdn-aliyun.dcloud.net.cn/stream/icon/__UNI__HelloUniApp.png'
},
menus: [{
"img": "/static/images/weixin.png",
"text": "微信好友",
"share": { //当前项的分享参数配置。可覆盖公共的配置如下分享到微信小程序配置了type=5
"provider": "weixin",
"scene": "WXSceneSession"
}
},
{
"img": "/static/images/weixin.png",
"text": "微信朋友圈",
"share": {
"provider": "weixin",
"scene": "WXSceneTimeline"
}
},
{
"img": "/static/images/weixin.png",
"text": "微信小程序",
"share": {
provider: "weixin",
scene: "WXSceneSession",
type: 5,
miniProgram: {
id: '123',
path: '/pages/list/detail',
webUrl: '/#/pages/list/detail',
type: 0
},
}
},
// {
// "img": "/static/app-plus/sharemenu/weibo.png",
// "text": "微博",
// "share": {
// "provider": "sinaweibo"
// }
// },
// {
// "img": "/static/app-plus/sharemenu/qq.png",
// "text": "QQ",
// "share": {
// "provider": "qq"
// }
// },
// {
// "img": "/static/app-plus/sharemenu/copyurl.png",
// "text": "复制",
// "share": "copyurl"
// },
// {
// "img": "/static/app-plus/sharemenu/more.png",
// "text": "更多",
// "share": "shareSystem"
// }
],
cancelText: "取消分享",
}, e => { //callback
console.log(uniShare.isShow);
console.log(e);
})
},
getArticleOne: function() {
let that = this;
getArticleDetails(that.id).then(res => {
uni.setNavigationBarTitle({
title: res.data.title.substring(0, 7) + "..."
});
that.$set(that, 'articleInfo', res.data);
that.$set(that, 'store_info', res.data.store_info ? res.data.store_info : {});
that.content = res.data.content.content;
// #ifdef H5
if (this.$wechat.isWeixin()) {
this.setShareInfo();
}
// #endif
});
},
listenerActionSheet() {
this.shareInfoStatus = true
},
setShareInfoStatus() {
this.shareInfoStatus = false
},
setShareInfo: function() {
let href = location.href;
let configAppMessage = {
desc: this.articleInfo.synopsis,
title: this.articleInfo.title,
link: href,
imgUrl: this.articleInfo.image_input
};
this.$wechat.wechatEvevt(["updateAppMessageShareData", "updateTimelineShareData"], configAppMessage);
}
}
}
</script>
<style lang="scss">
page {
background-color: #fff !important;
}
.newsDetail .title {
padding: 0 30rpx;
font-size: 34rpx;
color: #282828;
font-weight: bold;
margin: 45rpx 0 23rpx 0;
line-height: 1.5;
}
.newsDetail .list {
margin: 0 30rpx;
padding-bottom: 25rpx;
}
.newsDetail .list .label {
font-size: 30rpx;
color: #B1B2B3;
}
.newsDetail .list .item {
margin-left: 27rpx;
font-size: 30rpx;
color: #B1B2B3;
}
.newsDetail .list .item .iconfont {
font-size: 28rpx;
margin-right: 10rpx;
}
.newsDetail .list .item .iconfont.icon-shenhezhong {
font-size: 26rpx;
}
.newsDetail .conters {
padding: 0 30rpx;
font-size: 32rpx;
line-height: 1.7;
/deep/ img {
max-width: 100%;
}
}
.newsDetail .picTxt {
width: 690rpx;
height: 200rpx;
border-radius: 20rpx;
border: 1px solid #e1e1e1;
position: relative;
margin: 30rpx auto 0 auto;
}
.newsDetail .picTxt .pictrue {
width: 200rpx;
height: 200rpx;
}
.newsDetail .picTxt .pictrue image {
width: 100%;
height: 100%;
border-radius: 20rpx 0 0 20rpx;
display: block;
}
.newsDetail .picTxt .text {
width: 460rpx;
}
.newsDetail .picTxt .text .name {
font-size: 30rpx;
color: #282828;
}
.newsDetail .picTxt .text .money {
font-size: 24rpx;
margin-top: 40rpx;
font-weight: bold;
}
.newsDetail .picTxt .text .money .num {
font-size: 36rpx;
}
.newsDetail .picTxt .text .y_money {
font-size: 26rpx;
color: #999;
text-decoration: line-through;
}
.newsDetail .picTxt .label {
position: absolute;
background-color: #303131;
width: 160rpx;
height: 50rpx;
right: -7rpx;
border-radius: 25rpx 0 6rpx 25rpx;
text-align: center;
line-height: 50rpx;
bottom: 24rpx;
}
.newsDetail .picTxt .label .span {
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.newsDetail .picTxt .label:after {
content: " ";
position: absolute;
width: 0;
height: 0;
border-bottom: 8rpx solid #303131;
border-right: 8rpx solid transparent;
top: -7rpx;
right: 0;
}
.newsDetail .bnt {
color: #fff;
font-size: 30rpx;
width: 690rpx;
height: 90rpx;
border-radius: 45rpx;
margin: 48rpx auto;
text-align: center;
line-height: 90rpx;
}
</style>