|
|
@ -1,237 +1,251 @@ |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<view class="content"> |
|
|
|
<view class="title">{{ detail.headTitle || '' }}</view> |
|
|
|
|
|
|
|
<view class="desc">{{ detail.createTime ? `发布于${detail.createTime}` : '' }}</view> |
|
|
|
|
|
|
|
<editor id="editor" class="editor" |
|
|
|
:read-only="true" |
|
|
|
@ready="onEditorReady" |
|
|
|
></editor> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-overlay :show="true" :opacity="0" zIndex="998"> |
|
|
|
<navbar leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<button class="btn" type="success" @click="onJoin">查看更多</button> |
|
|
|
|
|
|
|
<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-article.png"></popupUnlock> |
|
|
|
|
|
|
|
<popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode> |
|
|
|
|
|
|
|
</uv-overlay> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view> |
|
|
|
<view class="content"> |
|
|
|
<view class="title">{{ detail.headTitle || '' }}</view> |
|
|
|
|
|
|
|
<view class="desc">{{ detail.createTime ? `发布于${detail.createTime}` : '' }}</view> |
|
|
|
|
|
|
|
<editor id="editor" class="editor" :read-only="true" @ready="onEditorReady"></editor> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-overlay :show="true" :opacity="0" zIndex="998"> |
|
|
|
<navbar leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<button class="btn" type="success" @click="onJoin">查看更多</button> |
|
|
|
|
|
|
|
<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-article.png"></popupUnlock> |
|
|
|
|
|
|
|
<popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode> |
|
|
|
|
|
|
|
</uv-overlay> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState } from 'vuex' |
|
|
|
import shareLog from '@/utils/shareLog' |
|
|
|
import { |
|
|
|
mapState |
|
|
|
} from 'vuex' |
|
|
|
import shareLog from '@/utils/shareLog' |
|
|
|
|
|
|
|
import popupUnlock from '../components/popupUnlock.vue' |
|
|
|
import popupQrCode from '../components/popupQrCode.vue' |
|
|
|
import popupUnlock from '../components/popupUnlock.vue' |
|
|
|
import popupQrCode from '../components/popupQrCode.vue' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
popupUnlock, |
|
|
|
popupQrCode, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
popupUnlock, |
|
|
|
popupQrCode, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
id: null, |
|
|
|
detail: { |
|
|
|
id: null, |
|
|
|
userId: null, |
|
|
|
headImage: null, |
|
|
|
headTitle: null, |
|
|
|
num: 0, |
|
|
|
wxCodeImage: null, |
|
|
|
textDetails: null, |
|
|
|
}, |
|
|
|
isLocked: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
id: null, |
|
|
|
detail: { |
|
|
|
id: null, |
|
|
|
userId: null, |
|
|
|
headImage: null, |
|
|
|
headTitle: null, |
|
|
|
num: 0, |
|
|
|
wxCodeImage: null, |
|
|
|
textDetails: null, |
|
|
|
}, |
|
|
|
isLocked: true, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['userInfo']), |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// if (this.id && uni.getStorageSync('token')) { |
|
|
|
// this.detail.id ? this.refreshLockStatus() : this.initData() |
|
|
|
// } |
|
|
|
|
|
|
|
if (this.detail.id) { // 转发后返回页面的场景 |
|
|
|
this.refreshLockStatus() |
|
|
|
} |
|
|
|
}, |
|
|
|
async onLoad(option) { |
|
|
|
const { id, state, shareId } = option |
|
|
|
onShow() { |
|
|
|
// if (this.id && uni.getStorageSync('token')) { |
|
|
|
// this.detail.id ? this.refreshLockStatus() : this.initData() |
|
|
|
// } |
|
|
|
|
|
|
|
if (this.detail.id) { // 转发后返回页面的场景 |
|
|
|
this.refreshLockStatus() |
|
|
|
} |
|
|
|
}, |
|
|
|
async onLoad(option) { |
|
|
|
const { |
|
|
|
id, |
|
|
|
state, |
|
|
|
shareId |
|
|
|
} = option |
|
|
|
|
|
|
|
if (shareId) { |
|
|
|
uni.setStorageSync('shareId', shareId) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (state) { |
|
|
|
uni.setStorageSync('state', state) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (id) { |
|
|
|
uni.setStorageSync('id', id) |
|
|
|
} |
|
|
|
|
|
|
|
this.id = id |
|
|
|
|
|
|
|
// if (uni.getStorageSync('token')) { |
|
|
|
// this.initData() |
|
|
|
// } else { |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/pages_order/auth/wxLogin' |
|
|
|
// }) |
|
|
|
// } |
|
|
|
|
|
|
|
this.initData() |
|
|
|
}, |
|
|
|
onShareAppMessage(res) { |
|
|
|
const { |
|
|
|
headTitle, |
|
|
|
headImage, |
|
|
|
} = this.detail |
|
|
|
|
|
|
|
let o = { |
|
|
|
title : headTitle, |
|
|
|
imageUrl: headImage, |
|
|
|
query: `id=${this.id}&state=3&shareId=${this.userInfo.id}`, |
|
|
|
} |
|
|
|
|
|
|
|
//调用增加分享次数的方法 |
|
|
|
const params = { |
|
|
|
id:this.id, |
|
|
|
state:"3", |
|
|
|
} |
|
|
|
this.$fetch('addLogShareInfo', params) |
|
|
|
|
|
|
|
shareLog.insert(this.id) |
|
|
|
|
|
|
|
return o |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onEditorReady() { |
|
|
|
this.id = id |
|
|
|
|
|
|
|
// if (uni.getStorageSync('token')) { |
|
|
|
// this.initData() |
|
|
|
// } else { |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/pages_order/auth/wxLogin' |
|
|
|
// }) |
|
|
|
// } |
|
|
|
|
|
|
|
this.initData() |
|
|
|
}, |
|
|
|
onShareAppMessage(res) { |
|
|
|
const { |
|
|
|
headTitle, |
|
|
|
headImage, |
|
|
|
} = this.detail |
|
|
|
|
|
|
|
let o = { |
|
|
|
title: headTitle, |
|
|
|
imageUrl: headImage, |
|
|
|
query: `id=${this.id}&state=3&shareId=${this.userInfo.id}`, |
|
|
|
} |
|
|
|
|
|
|
|
//调用增加分享次数的方法 |
|
|
|
const params = { |
|
|
|
id: this.id, |
|
|
|
state: "3", |
|
|
|
} |
|
|
|
this.$fetch('addLogShareInfo', params) |
|
|
|
|
|
|
|
shareLog.insert(this.id) |
|
|
|
|
|
|
|
return o |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
onEditorReady() { |
|
|
|
uni.createSelectorQuery().select('#editor').context((res) => { |
|
|
|
this.editorCtx = res.context |
|
|
|
}).exec() |
|
|
|
}, |
|
|
|
initEditor(html) { |
|
|
|
if (!this.editorCtx) { |
|
|
|
setTimeout(() => { |
|
|
|
this.initEditor(html) |
|
|
|
}, 200) |
|
|
|
|
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.editorCtx.setContents({ html }) |
|
|
|
}, |
|
|
|
async fetchDetails(id) { |
|
|
|
try { |
|
|
|
this.detail = await this.$fetch('getArticleShareInfo', { id }) |
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
async initData() { |
|
|
|
await this.fetchDetails(this.id) |
|
|
|
this.initEditor(this.detail.textDetails) |
|
|
|
}, |
|
|
|
async fetchCheckShare() { |
|
|
|
try { |
|
|
|
return shareLog.check(this.id, this.detail.num) |
|
|
|
} catch (err) { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
async refreshLockStatus() { |
|
|
|
const result = await this.fetchCheckShare() |
|
|
|
const { title, open } = result |
|
|
|
|
|
|
|
console.log('--open', open) |
|
|
|
|
|
|
|
this.$refs.popupUnlock.close(); |
|
|
|
|
|
|
|
if (open) { |
|
|
|
this.isLocked = false |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
title && uni.showToast({ |
|
|
|
title, |
|
|
|
icon: 'none', |
|
|
|
duration: 3000 |
|
|
|
}) |
|
|
|
}, |
|
|
|
async onJoin() { |
|
|
|
if (!this.isLocked) { |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const result = await this.fetchCheckShare() |
|
|
|
const { open, need_num, num } = result |
|
|
|
|
|
|
|
console.log('--open', open) |
|
|
|
|
|
|
|
if (open) { // 转发已达标 |
|
|
|
this.isLocked = false |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: `还需转发${need_num - num}次`, |
|
|
|
icon: 'none', |
|
|
|
}) |
|
|
|
this.$refs.popupUnlock.open(); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
initEditor(html) { |
|
|
|
if (!this.editorCtx) { |
|
|
|
setTimeout(() => { |
|
|
|
this.initEditor(html) |
|
|
|
}, 200) |
|
|
|
|
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
this.editorCtx.setContents({ |
|
|
|
html |
|
|
|
}) |
|
|
|
}, |
|
|
|
async fetchDetails(id) { |
|
|
|
try { |
|
|
|
this.detail = await this.$fetch('getArticleShareInfo', { |
|
|
|
id |
|
|
|
}) |
|
|
|
} catch (err) { |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
async initData() { |
|
|
|
await this.fetchDetails(this.id) |
|
|
|
this.initEditor(this.detail.textDetails) |
|
|
|
}, |
|
|
|
async fetchCheckShare() { |
|
|
|
try { |
|
|
|
return shareLog.check(this.id, this.detail.num) |
|
|
|
} catch (err) { |
|
|
|
return {} |
|
|
|
} |
|
|
|
}, |
|
|
|
async refreshLockStatus() { |
|
|
|
const result = await this.fetchCheckShare() |
|
|
|
const { |
|
|
|
title, |
|
|
|
open |
|
|
|
} = result |
|
|
|
|
|
|
|
console.log('--open', open) |
|
|
|
|
|
|
|
this.$refs.popupUnlock.close(); |
|
|
|
|
|
|
|
if (open) { |
|
|
|
this.isLocked = false |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
title && uni.showToast({ |
|
|
|
title, |
|
|
|
icon: 'none', |
|
|
|
duration: 3000 |
|
|
|
}) |
|
|
|
}, |
|
|
|
async onJoin() { |
|
|
|
if (!this.isLocked) { |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
const result = await this.fetchCheckShare() |
|
|
|
const { |
|
|
|
open, |
|
|
|
need_num, |
|
|
|
num |
|
|
|
} = result |
|
|
|
|
|
|
|
console.log('--open', open) |
|
|
|
|
|
|
|
if (open) { // 转发已达标 |
|
|
|
this.isLocked = false |
|
|
|
this.$refs.popupQrCode.open() |
|
|
|
} else { |
|
|
|
uni.showToast({ |
|
|
|
title: `还需转发${need_num - num}次`, |
|
|
|
icon: 'none', |
|
|
|
}) |
|
|
|
this.$refs.popupUnlock.open(); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.content { |
|
|
|
padding: 40rpx 20rpx; |
|
|
|
padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx + 40rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
color: #474747; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.desc { |
|
|
|
color: #A2A2A2; |
|
|
|
font-size: 24rpx; |
|
|
|
margin-top: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.editor { |
|
|
|
margin-top: 22rpx; |
|
|
|
height: 40vh; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
position: absolute; |
|
|
|
width: calc(100% - 60rpx*2); |
|
|
|
height: auto; |
|
|
|
left: 60rpx; |
|
|
|
bottom: 292rpx; |
|
|
|
|
|
|
|
background-color: #07C160; |
|
|
|
border: none; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 1; |
|
|
|
border-radius: 45rpx; |
|
|
|
padding: 25rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
.content { |
|
|
|
padding: 40rpx 20rpx; |
|
|
|
padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx + 40rpx); |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
color: #474747; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
.desc { |
|
|
|
color: #A2A2A2; |
|
|
|
font-size: 24rpx; |
|
|
|
margin-top: 6rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.editor { |
|
|
|
margin-top: 22rpx; |
|
|
|
height: 40vh; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
position: absolute; |
|
|
|
width: calc(100% - 60rpx*2); |
|
|
|
height: auto; |
|
|
|
left: 60rpx; |
|
|
|
bottom: 292rpx; |
|
|
|
|
|
|
|
background-color: #07C160; |
|
|
|
border: none; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 1; |
|
|
|
border-radius: 45rpx; |
|
|
|
padding: 25rpx 0; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
</style> |