<template> <view class="content"> <view class="top"> <image :src="info.share_images[0] || ''" mode="widthFix"></image> </view> <view class="title">{{ info.title || '' }}</view> <view class="tip">{{ info.synopsis || '' }}</view> <view class="main" v-for="(ls, index) in info.content" :key="index"> <view v-if="ls.type == 'rich-text'" v-html="ls.value"></view> <video v-if="ls.type == 'video' && ls.value" :src="ls.value" style="width:100%;height: 300px" frameborder="0"></video> </view> <!-- <view class="navbar flex"> <view class="navbar-item" @click.stop="shareLink()"> <view class="navbar-icon"> <image src="../../static/icon/sharejt.png" mode=""></image> </view> <view class="navbar-font">分享</view> </view> <view class="xian"></view> <view class="navbar-item" @click.stop="wzdz()"> <view class="navbar-icon" v-if="info.user_good == 1"> <image src="../../static/icon/zanguo.png" mode=""></image> </view> <view class="navbar-icon" v-else> <image src="../../static/icon/zan.png" mode=""></image> </view> <view class="navbar-font">{{ info.goods_count }}</view> </view> </view> --> <view v-if="shareShow" class="Shraremask" @click="cancel"> <view class="mask-content"> <scroll-view class="view-content" scroll-y> <view class="share-header">分享到</view> <view class="share-list"> <view class="share-item"> <button class="wechat-box" open-type="share"> <image class="itemImage" src="../../static/icon/share1.png" mode=""></image> <text class="itemText">微信好友</text> </button> <view class="wechat-box" @click="navTo('/pages/zc/wzshare?id=' + id)"> <image class="itemImage" src="../../static/icon/share2.png" mode=""></image> <text class="itemText">朋友圈</text> </view> <view class="wechat-box" @click="copy()"> <image class="itemImage" src="../../static/icon/share3.png" mode=""></image> <text class="itemText">复制链接</text> </view> <view class="wechat-box" @click="shareToFriend()"> <image class="itemImage" src="../../static/icon/share4.png" mode=""></image> <text class="itemText">生成海报</text> </view> </view> </view> </scroll-view> <view class="bottomButtom b-t" @click="cancel">取消</view> </view> </view> <uni-popup ref="popupshare" type="center"> <view class="share-box"> <image :src="shareImage" mode="" class="box-img" @longpress="saveImg()"></image> </view> </uni-popup> </view> </template> <script> import { details } from '@/api/user.js'; import { article_good, short_link, article_poster } from '@/api/activity.js'; import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'; import { mapState } from 'vuex'; export default { data() { return { id: '', info: {}, shareShow: false, shareImage: '' }; }, computed: { ...mapState('user', ['hasLogin', 'userInfo']) }, onLoad(option) { if (option.id) { this.id = option.id; } // #ifdef MP if (option.scene) { if (typeof option.scene == 'string') { // let scene = ('{' + option.scene + "}").replace('qr%26', '').replace(/%3D/g, ':').replace(/%26/g, ',') // .replace('id', '\"id\"').replace('pid', '\"pid\"'); let scene = ('{' + option.scene + '}') .replace('qr%26', '') .replace(/%3D/g, ':') .replace(/%26/g, ',') .replace('id', '"id"') .replace('pid', '"pid"') .replace(/=/g, ':') .replace(/&/g, ','); console.log(scene, 'scene'); let opt = JSON.parse(scene); console.log(opt); // 保存拼团订单id this.id = opt.id; if (opt.pid) { // 存储邀请人 // this.spread = opt.pid; uni.setStorageSync('spread', opt.pid); } } } // #endif }, onShow() { this.loadData(); }, onReachBottom() {}, onReady() {}, // #ifdef MP onShareAppMessage: function(res) { console.log(this.share); if (res.from === 'button') { // 来自页面内分享按钮 let pages = getCurrentPages(); // 获取当前页面 let page = pages[pages.length - 1]; let path = '/' + page.route + '?'; // 保存传值 for (let i in page.options) { path += i + '=' + page.options[i] + '&'; } path += 'pid=' + this.userInfo.uid; // 保存邀请人 let data = { path: path, imageUrl: this.info.share_images[0], title: this.info.title }; console.log('data', data); return data; } }, // #endif methods: { loadData() { details({}, this.id).then(({ data }) => { data.content = data.content.replace(/<img/g, '<img class="rich-img"').replace(/<p>\s*<img/g, '<p class="pHeight"><img'); data.content = this.getVideo(data.content); this.info = data; }); }, // 文章点赞 wzdz() { article_good({}, this.id).then(e => { if (this.info.user_good == 0) { this.info.user_good = 1; this.info.goods_count += 1; } else { this.info.user_good = 0; this.info.goods_count -= 1; } }); }, shareLink(item) { console.log('dainjideniang'); this.shareShow = true; }, navTo(url) { uni.navigateTo({ url }); }, shareToFriend() { let obj = this; uni.showLoading({ title: 'Loading...', mask: true }); article_poster({}, this.id) .then(({ data }) => { obj.shareImage = data.url; console.log(obj.shareImage, '123456'); uni.hideLoading(); this.$refs.popupshare.open(); }) .catch(e => { uni.hideLoading(); }); }, copy() { short_link({ url: 'pages/zc/wzDetail?id=' + this.id }).then(({ data }) => { console.log(data); this.comfirm(data.link); }); }, comfirm(text) { console.log(text); const result = uniCopy(text); if (result === false) { uni.showToast({ title: '不支持' }); } else { uni.showToast({ title: '复制成功', icon: 'none' }); } }, //取消分享 cancel() { this.shareShow = false; }, saveImg(w) { console.log(w); let obj = this; uni.downloadFile({ //下载图片 url: obj.shareImage, success: res => { console.log(res.tempFilePath); uni.saveImageToPhotosAlbum({ //将图片保存在手机 filePath: res.tempFilePath, //保存的位置 success: res => { uni.showToast({ title: '保存成功', icon: 'none' }); } }); } }); }, // 富文本视频解析 getVideo(data) { let videoList = []; let videoReg = /<video.*?(?:>|\/>)/gi; //匹配到字符串中的 video 标签 let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; //匹配到字符串中的 video 标签 的路径 let arr = data.match(videoReg) || []; // arr 为包含所有video标签的数组 let articleList = data.split('</video>'); // 把字符串 从视频标签分成数组 arr.forEach((item, index) => { var src = item.match(srcReg); videoList.push(src[1]); //所要显示的字符串中 所有的video 标签 的路径 }); let needArticleList = []; articleList.forEach((item, index) => { if (item != '' && item != undefined) { // 常见的标签渲染 needArticleList.push({ type: 'rich-text', value: item + '</video>' }); } let articleListLength = articleList.length; // 插入到原有video 标签位置 if (index < articleListLength && videoList[index] != undefined) { needArticleList.push({ type: 'video', value: videoList[index] }); } }); return needArticleList; } } }; </script> <style lang="scss"> page, .content { min-height: 100%; height: auto; } .top { width: 750rpx; image { width: 100%; } } .title { margin-top: 20rpx; text-align: center; font-size: 32rpx; font-family: PingFang SC; font-weight: 800; color: #303030; } .tip { margin-top: 20rpx; padding: 0 10rpx; font-size: 24rpx; font-family: PingFang SC; font-weight: 500; color: #969696; } .main { margin-top: 60rpx; padding: 10rpx; } /deep/ .main { .rich-img { width: 100% !important; height: auto; } } .navbar { position: fixed; bottom: 0; left: 0; right: 0; width: 750rpx; padding: 50rpx 0; .xian { width: 2px; background: #999999; height: 36rpx; } .navbar-item { width: 50%; display: flex; justify-content: center; align-items: center; .navbar-icon { width: 36rpx; height: 36rpx; image { width: 100%; height: 100%; } } .navbar-font { margin-left: 17rpx; font-size: 22rpx; font-family: PingFang SC; font-weight: 500; color: #333333; } } } .Shraremask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 998; transition: 0.3s; background-color: rgba(51, 51, 51, 0.6); .bottomButtom { position: absolute; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 90rpx; background: #fff; z-index: 9; font-size: $font-base + 2rpx; color: $font-color-dark; } } .mask-content { margin-bottom: 88rpx; width: 100%; height: 380rpx; transition: 0.3s; background: #fff; &.has-bottom { padding-bottom: 90rpx; } .view-content { height: 100%; } } .share-header { height: 110rpx; font-size: $font-base + 2rpx; color: font-color-dark; display: flex; align-items: center; justify-content: center; padding-top: 10rpx; &:before, &:after { content: ''; width: 240rpx; height: 0; border-top: 1px solid $border-color-base; transform: scaleY(0.5); margin-right: 30rpx; } &:after { margin-left: 30rpx; margin-right: 0; } } .share-list { display: flex; width: 80%; margin: 0rpx auto; } .share-item { min-width: 33.33%; display: flex; justify-content: center; align-items: center; height: 180rpx; width: 100%; .wechat-box { width: 50%; height: 100%; background: #ffffff; border: 0; display: flex; align-items: center; flex-direction: column; &::after { border: 0; } .itemImage { width: 80rpx; height: 80rpx; margin-bottom: 16rpx; } .itemText { font-size: $font-base; color: $font-color-base; line-height: 2; } } } .share-box { width: 600rpx; height: 1000rpx; background: red; .box-img { width: 600rpx; height: 1000rpx; } } </style>