|
@@ -1,35 +1,321 @@
|
|
<template>
|
|
<template>
|
|
- <view class="content">
|
|
|
|
- <view class="header">
|
|
|
|
- <text style="font-size: 40rpx;">标题</text>
|
|
|
|
- <u-icon name="share" size="40"></u-icon>
|
|
|
|
|
|
+ <view class="container">
|
|
|
|
+ <view class="pay-wall">
|
|
|
|
+ <view class="title">
|
|
|
|
+ {{ report.title }}
|
|
|
|
+ </view>
|
|
|
|
+ <!-- <text>需要付款才能看</text> -->
|
|
|
|
+ </view>
|
|
|
|
+ <!-- <web-view id="webview" :src="report.sourceFile">
|
|
|
|
+ <cover-view class="close-view">
|
|
|
|
+ <button>22222</button>
|
|
|
|
+ </cover-view>
|
|
|
|
+ </web-view> -->
|
|
|
|
+ <view class="bottom-box">
|
|
|
|
+ <view class="menu-box">
|
|
|
|
+ <button class="menu-item" @click="changeApplaud">
|
|
|
|
+ <i class="iconfont icon-dianzan" :class="report.hasApplaud?'active':''"></i>
|
|
|
|
+ </button>
|
|
|
|
+ <button class="menu-item" @click="changeFavi">
|
|
|
|
+ <i class="iconfont icon-shoucang1" :class="report.hasFavi?'active':''"></i>
|
|
|
|
+ </button>
|
|
|
|
+ <button class="menu-item" open-type="share">
|
|
|
|
+ <i class="iconfont icon-zhuanfa"></i>
|
|
|
|
+ </button>
|
|
|
|
+ <button class="menu-item">
|
|
|
|
+ <i class="iconfont icon-pengyouquan"></i>
|
|
|
|
+ </button>
|
|
|
|
+ <button class="menu-item">
|
|
|
|
+ <i class="iconfont icon-xiaoxi"></i>
|
|
|
|
+ </button>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- <iframe :src="previewUrl" style="height: 200px;width: 100vw;"></iframe>
|
|
|
|
-
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
|
- var wv;
|
|
|
|
- export default {
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- previewUrl:"http://www.gzrea.org.cn/upload/news/2025/03/4128b87c1b0535772f345cf82fa04084431c17f2561a6fb3.pdf"
|
|
|
|
|
|
+<script setup>
|
|
|
|
+ import {
|
|
|
|
+ ref,
|
|
|
|
+ computed,
|
|
|
|
+ onMounted
|
|
|
|
+ } from 'vue'
|
|
|
|
+ import {
|
|
|
|
+ onLoad,
|
|
|
|
+ onShareAppMessage,
|
|
|
|
+ onShareTimeline
|
|
|
|
+ } from '@dcloudio/uni-app'
|
|
|
|
+ import {
|
|
|
|
+ getToken
|
|
|
|
+ } from '@/utils/auth.js'
|
|
|
|
+ import {
|
|
|
|
+ getReportDetail,
|
|
|
|
+ reportFavi,
|
|
|
|
+ cancelReportFavi,
|
|
|
|
+ reportApplaud,
|
|
|
|
+ cancelReportApplaud
|
|
|
|
+ } from '@/api/report.js'
|
|
|
|
+
|
|
|
|
+ // import VueOfficePdf from '@vue-office/pdf'
|
|
|
|
+ // const modelValue = ref('http://www.gzrea.org.cn/upload/news/2025/03/4128b87c1b0535772f345cf82fa04084431c17f2561a6fb3.pdf')
|
|
|
|
+ // let previewOtherUpload = ref(false);
|
|
|
|
+ const webview = ref();
|
|
|
|
+ const id = ref()
|
|
|
|
+ const title = ref()
|
|
|
|
+ const hasPermission = ref(false);
|
|
|
|
+ const imgurl = '/static/images/avator-img/1.png'
|
|
|
|
+ const report = ref({
|
|
|
|
+ id: '01',
|
|
|
|
+ title: '2025年2月从化区二手住宅市场交易简报',
|
|
|
|
+ summary: "2025年2月从化区二手住宅市场交易简报",
|
|
|
|
+ price: '9.9',
|
|
|
|
+ memberFree: 1,
|
|
|
|
+ free: 0,
|
|
|
|
+ status: 0,
|
|
|
|
+ markdown: ``
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const compileMarkDown = computed(() => {
|
|
|
|
+ if (!report.value.markdown) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let htmlString = "";
|
|
|
|
+ // 判断markdown中代码块标识符的数量是否为偶数
|
|
|
|
+ if (report.value.markdown.split("```").length % 2) {
|
|
|
|
+ let content = report.value.markdown;
|
|
|
|
+ if (content[content.length - 1] != "\n") {
|
|
|
|
+ content += "\n";
|
|
}
|
|
}
|
|
|
|
+ htmlString = content;
|
|
|
|
+ } else {
|
|
|
|
+ htmlString = report.value.markdown;
|
|
|
|
+ }
|
|
|
|
+ return htmlString;
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 是否登录
|
|
|
|
+ const isLogin = computed(() => {
|
|
|
|
+ return false
|
|
|
|
+ // return getToken() ? true : false
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 是否购买/免费
|
|
|
|
+ const free = computed(() => {
|
|
|
|
+ return false
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ const showMask = computed(() => {
|
|
|
|
+ // 是否登录
|
|
|
|
+
|
|
|
|
+ // 是否已购买或者免费
|
|
|
|
+ if (report.value.status || report.value.free) {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ // 判断用户是否为会员免费
|
|
|
|
+ if (report.value.memberFree) {
|
|
|
|
+ //
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ return false
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ function changeFavi() {
|
|
|
|
+ if(report.value.hasFavi){
|
|
|
|
+ cancelReportFavi(id.value).then(res=>{
|
|
|
|
+ if(res?.code==0){
|
|
|
|
+ report.value.hasFavi = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ reportFavi(id.value).then(res => {
|
|
|
|
+ if(res?.code==0){
|
|
|
|
+ report.value.hasFavi = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ function changeApplaud(){
|
|
|
|
+ if(report.value.hasApplaud){
|
|
|
|
+ cancelReportApplaud(id.value).then(res=>{
|
|
|
|
+ if(res?.code==0){
|
|
|
|
+ report.value.hasApplaud = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }else{
|
|
|
|
+ reportApplaud(id.value).then(res => {
|
|
|
|
+ if(res?.code==0){
|
|
|
|
+ report.value.hasApplaud = true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ onLoad((load) => {
|
|
|
|
+ if(load.id){
|
|
|
|
+ console.log(load.id)
|
|
|
|
+ id.value = load.id
|
|
|
|
+ title.value = load.title
|
|
|
|
+ }
|
|
|
|
+ getReportDetail(66).then(res => {
|
|
|
|
+ console.log(res, "报告详情")
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ report.value = res.data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
|
+ title: title.value
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ onMounted(()=>{
|
|
|
|
+ console.log(uni.createSelectorQuery().select("#webview"))
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ onShareAppMessage((res) => {
|
|
|
|
+ if (res.from === 'button') {
|
|
|
|
+ console.log('来自按钮分享');
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ title: '研究报告',
|
|
|
|
+ path: `/pages/reportDetail/reportDetail?id=${id.value}`,
|
|
|
|
+ imageUrl: imgurl.value
|
|
|
|
+ };
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ onShareTimeline(() => {
|
|
|
|
+ return {
|
|
|
|
+ title: '朋友圈标题-研究报告',
|
|
|
|
+ query: `id=${id.value}`,
|
|
|
|
+ imageUrl: imgurl.value
|
|
|
|
+ };
|
|
|
|
+ })
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-.header{
|
|
|
|
- padding: 20rpx;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
+ .container {
|
|
|
|
+ height: 100vh;
|
|
width: 100vw;
|
|
width: 100vw;
|
|
- height: 140rpx;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: row;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- align-items: flex-end;
|
|
|
|
-}
|
|
|
|
-</style>
|
|
|
|
|
|
+ background-color: $uni-bg-color;
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-size: 38rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ width: 60%;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .mask {
|
|
|
|
+ height: 75vh;
|
|
|
|
+ padding: 0 20rpx;
|
|
|
|
+ background-color: $uni-bg-color-grey;
|
|
|
|
+
|
|
|
|
+ -webkit-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
+ -moz-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
+ box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
+
|
|
|
|
+ @include bottomMagnet();
|
|
|
|
+
|
|
|
|
+ .mask-box {
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ .button {
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ width: 45%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .member-box {
|
|
|
|
+ padding-top: 210rpx;
|
|
|
|
+
|
|
|
|
+ .remark {
|
|
|
|
+ height: 90rpx;
|
|
|
|
+ text-align: center;
|
|
|
|
+ letter-spacing: 3rpx;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: $uni-text-color-grey;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .link {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 70%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ color: $uni-color-error;
|
|
|
|
+ font-size: $uni-title-font-size-2;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+
|
|
|
|
+ .text {
|
|
|
|
+ text-align: center;
|
|
|
|
+ letter-spacing: 5rpx;
|
|
|
|
+
|
|
|
|
+ &:active {
|
|
|
|
+ text-decoration: underline;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .login-box {
|
|
|
|
+ padding-top: 300rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .disable-scroll {
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-block {
|
|
|
|
+ height: 110rpx;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bottom-box {
|
|
|
|
+ padding: 5rpx 25rpx;
|
|
|
|
+ background-color: $uni-bg-color-grey;
|
|
|
|
+
|
|
|
|
+ @include bottomMagnet();
|
|
|
|
+
|
|
|
|
+ -webkit-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
+ -moz-box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
+ box-shadow: 0px -1rpx 5rpx 0px rgba(50, 50, 50, 0.25);
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .menu-box {
|
|
|
|
+ height: 100rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: flex-end;
|
|
|
|
+ gap: 50rpx;
|
|
|
|
+ .menu-item{
|
|
|
|
+ background-color: transparent;
|
|
|
|
+ margin: 0;
|
|
|
|
+ border: none;
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ .menu-item::after{
|
|
|
|
+ border: none !important;
|
|
|
|
+ }
|
|
|
|
+ .iconfont {
|
|
|
|
+ font-size: 42rpx;
|
|
|
|
+ color: $uni-text-color-grey;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .active {
|
|
|
|
+ color: yellow;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|