移除 `this.$fetch('addLogShareInfo', params)` 的调用,改用 `shareLog.insert(this.id)` 来记录分享日志。同时,统一了代码格式,提升了代码的可读性和维护性。
master
| @ -1,234 +1,250 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <view class="page"> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" /> | <navbar leftClick @leftClick="$utils.navigateBack" /> | ||||
| <view class="content"> | |||||
| <image class="avatar" :src="detail.headImage"></image> | |||||
| <text class="nick-name">{{ `${detail.headTitle || ''}(${detail.memberNum || 0})` }}</text> | |||||
| <view class="content"> | |||||
| <image class="avatar" :src="detail.headImage"></image> | |||||
| <text class="nick-name">{{ `${detail.headTitle || ''}(${detail.memberNum || 0})` }}</text> | |||||
| <template v-if="isLocked"> | |||||
| <button class="btn" type="success" @click="onAdd">加入</button> | |||||
| </template> | |||||
| <view v-else class="group-info flex"> | |||||
| <text>扫一扫,加群主审核进群</text> | |||||
| <image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image> | |||||
| </view> | |||||
| </view> | |||||
| <template v-if="isLocked"> | |||||
| <button class="btn" type="success" @click="onAdd">加入</button> | |||||
| </template> | |||||
| <view v-else class="group-info flex"> | |||||
| <text>扫一扫,加群主审核进群</text> | |||||
| <image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image> | |||||
| </view> | |||||
| </view> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-group.png"></popupUnlock> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-group.png"></popupUnlock> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <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 popupUnlock from '../components/popupUnlock.vue' | |||||
| export default { | export default { | ||||
| components: { | |||||
| popupUnlock, | |||||
| }, | |||||
| components: { | |||||
| popupUnlock, | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| avatarUrl: null, | |||||
| nickName: null, | |||||
| imageUrl: null, | |||||
| times: 0, | |||||
| qrCode: null, | |||||
| description: null, | |||||
| }, | |||||
| isLocked: true, | |||||
| } | |||||
| }, | |||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| avatarUrl: null, | |||||
| nickName: null, | |||||
| imageUrl: null, | |||||
| times: 0, | |||||
| qrCode: null, | |||||
| description: null, | |||||
| }, | |||||
| isLocked: true, | |||||
| } | |||||
| }, | |||||
| computed: { | computed: { | ||||
| ...mapState(['userInfo']), | ...mapState(['userInfo']), | ||||
| }, | }, | ||||
| onShow() { | |||||
| // if (this.id && uni.getStorageSync('token')) { | |||||
| // this.detail.id ? this.refreshLockStatus() : this.fetchDetails() | |||||
| // } | |||||
| if (this.detail.id) { // 转发后返回页面的场景 | |||||
| this.refreshLockStatus() | |||||
| } | |||||
| }, | |||||
| onLoad(option) { | |||||
| const { id, state, shareId } = option | |||||
| onShow() { | |||||
| // if (this.id && uni.getStorageSync('token')) { | |||||
| // this.detail.id ? this.refreshLockStatus() : this.fetchDetails() | |||||
| // } | |||||
| if (this.detail.id) { // 转发后返回页面的场景 | |||||
| this.refreshLockStatus() | |||||
| } | |||||
| }, | |||||
| onLoad(option) { | |||||
| const { | |||||
| id, | |||||
| state, | |||||
| shareId | |||||
| } = option | |||||
| if (shareId) { | if (shareId) { | ||||
| uni.setStorageSync('shareId', shareId) | uni.setStorageSync('shareId', shareId) | ||||
| } | } | ||||
| if (state) { | if (state) { | ||||
| uni.setStorageSync('state', state) | uni.setStorageSync('state', state) | ||||
| } | } | ||||
| if (id) { | if (id) { | ||||
| uni.setStorageSync('id', id) | uni.setStorageSync('id', id) | ||||
| } | } | ||||
| this.id = id | |||||
| // if (uni.getStorageSync('token')) { | |||||
| // this.fetchDetails() | |||||
| // } else { | |||||
| // uni.navigateTo({ | |||||
| // url: '/pages_order/auth/wxLogin' | |||||
| // }) | |||||
| // } | |||||
| this.fetchDetails() | |||||
| }, | |||||
| onShareAppMessage(res) { | |||||
| const { | |||||
| textDetails, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title : textDetails, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=2&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id:this.id, | |||||
| state:"2", | |||||
| } | |||||
| this.$fetch('addLogShareInfo', params) | |||||
| shareLog.insert(this.id) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails() { | |||||
| try { | |||||
| this.detail = await this.$fetch('getGroupShareInfo', { id: this.id }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async fetchCheckShare() { | |||||
| try { | |||||
| return await 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 | |||||
| return | |||||
| } | |||||
| title && uni.showToast({ | |||||
| title, | |||||
| icon: 'none', | |||||
| duration: 3000 | |||||
| }) | |||||
| }, | |||||
| openPopup() { | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onAdd() { | |||||
| const result = await this.fetchCheckShare() | |||||
| const { open, need_num, num } = result | |||||
| console.log('--open', open) | |||||
| if (open) { // 转发已达标 | |||||
| this.isLocked = false | |||||
| return | |||||
| } | |||||
| uni.showToast({ | |||||
| title: `还需转发${need_num - num}次`, | |||||
| icon: 'none', | |||||
| }) | |||||
| this.openPopup() | |||||
| } | |||||
| }, | |||||
| } | |||||
| this.id = id | |||||
| // if (uni.getStorageSync('token')) { | |||||
| // this.fetchDetails() | |||||
| // } else { | |||||
| // uni.navigateTo({ | |||||
| // url: '/pages_order/auth/wxLogin' | |||||
| // }) | |||||
| // } | |||||
| this.fetchDetails() | |||||
| }, | |||||
| onShareAppMessage(res) { | |||||
| const { | |||||
| textDetails, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title: textDetails, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=2&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id: this.id, | |||||
| state: "2", | |||||
| } | |||||
| // this.$fetch('addLogShareInfo', params) | |||||
| shareLog.insert(this.id) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails() { | |||||
| try { | |||||
| this.detail = await this.$fetch('getGroupShareInfo', { | |||||
| id: this.id | |||||
| }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async fetchCheckShare() { | |||||
| try { | |||||
| return await 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 | |||||
| return | |||||
| } | |||||
| title && uni.showToast({ | |||||
| title, | |||||
| icon: 'none', | |||||
| duration: 3000 | |||||
| }) | |||||
| }, | |||||
| openPopup() { | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onAdd() { | |||||
| const result = await this.fetchCheckShare() | |||||
| const { | |||||
| open, | |||||
| need_num, | |||||
| num | |||||
| } = result | |||||
| console.log('--open', open) | |||||
| if (open) { // 转发已达标 | |||||
| this.isLocked = false | |||||
| return | |||||
| } | |||||
| uni.showToast({ | |||||
| title: `还需转发${need_num - num}次`, | |||||
| icon: 'none', | |||||
| }) | |||||
| this.openPopup() | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| position: relative; | |||||
| height: 100vh; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| } | |||||
| .avatar { | |||||
| width: 180rpx; | |||||
| height: 180rpx; | |||||
| margin-top: 127rpx; | |||||
| } | |||||
| .nick-name { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .desc { | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .btn, .group-info { | |||||
| position: absolute; | |||||
| } | |||||
| .btn { | |||||
| 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; | |||||
| } | |||||
| .group-info { | |||||
| bottom: 269rpx; | |||||
| flex-direction: column; | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| .qr { | |||||
| margin-top: 40rpx; | |||||
| width: 350rpx; | |||||
| height: 350rpx; | |||||
| } | |||||
| .page { | |||||
| position: relative; | |||||
| height: 100vh; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| } | |||||
| .avatar { | |||||
| width: 180rpx; | |||||
| height: 180rpx; | |||||
| margin-top: 127rpx; | |||||
| } | |||||
| .nick-name { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .desc { | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .btn, | |||||
| .group-info { | |||||
| position: absolute; | |||||
| } | |||||
| .btn { | |||||
| 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; | |||||
| } | |||||
| .group-info { | |||||
| bottom: 269rpx; | |||||
| flex-direction: column; | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| .qr { | |||||
| margin-top: 40rpx; | |||||
| width: 350rpx; | |||||
| height: 350rpx; | |||||
| } | |||||
| </style> | </style> | ||||
| @ -1,228 +1,244 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <view class="page"> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" /> | <navbar leftClick @leftClick="$utils.navigateBack" /> | ||||
| <view class="content"> | |||||
| <image class="avatar" :src="detail.headImage"></image> | |||||
| <text class="nick-name">{{ detail.headTitle || '' }}</text> | |||||
| <view class="content"> | |||||
| <image class="avatar" :src="detail.headImage"></image> | |||||
| <text class="nick-name">{{ detail.headTitle || '' }}</text> | |||||
| <template v-if="isLocked"> | |||||
| <button class="btn" type="success" @click="onAdd">添加</button> | |||||
| </template> | |||||
| <view v-else class="flex flex-column qr-popup"> | |||||
| <text class="tips">长按识别二维码,了解更多内容!</text> | |||||
| <image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image> | |||||
| </view> | |||||
| </view> | |||||
| <template v-if="isLocked"> | |||||
| <button class="btn" type="success" @click="onAdd">添加</button> | |||||
| </template> | |||||
| <view v-else class="flex flex-column qr-popup"> | |||||
| <text class="tips">长按识别二维码,了解更多内容!</text> | |||||
| <image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image> | |||||
| </view> | |||||
| </view> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-user.png"></popupUnlock> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-user.png"></popupUnlock> | |||||
| </view> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <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 popupUnlock from '../components/popupUnlock.vue' | |||||
| export default { | export default { | ||||
| components: { | |||||
| popupUnlock, | |||||
| }, | |||||
| components: { | |||||
| popupUnlock, | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| userId: null, | |||||
| headImage: null, | |||||
| headTitle: null, | |||||
| indexImage: null, | |||||
| num: 0, | |||||
| wxCodeImage: null, | |||||
| textDetails: null, | |||||
| }, | |||||
| isLocked: true, | |||||
| } | |||||
| }, | |||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| userId: null, | |||||
| headImage: null, | |||||
| headTitle: null, | |||||
| indexImage: null, | |||||
| num: 0, | |||||
| wxCodeImage: null, | |||||
| textDetails: null, | |||||
| }, | |||||
| isLocked: true, | |||||
| } | |||||
| }, | |||||
| computed: { | computed: { | ||||
| ...mapState(['userInfo']), | ...mapState(['userInfo']), | ||||
| }, | }, | ||||
| onShow() { | |||||
| // if (this.id && uni.getStorageSync('token')) { | |||||
| // this.detail.id ? this.refreshLockStatus() : this.fetchDetails() | |||||
| // } | |||||
| if (this.detail.id) { // 转发后返回页面的场景 | |||||
| this.refreshLockStatus() | |||||
| } | |||||
| }, | |||||
| onLoad(option) { | |||||
| const { id, state, shareId } = option | |||||
| onShow() { | |||||
| // if (this.id && uni.getStorageSync('token')) { | |||||
| // this.detail.id ? this.refreshLockStatus() : this.fetchDetails() | |||||
| // } | |||||
| if (this.detail.id) { // 转发后返回页面的场景 | |||||
| this.refreshLockStatus() | |||||
| } | |||||
| }, | |||||
| onLoad(option) { | |||||
| const { | |||||
| id, | |||||
| state, | |||||
| shareId | |||||
| } = option | |||||
| if (shareId) { | if (shareId) { | ||||
| uni.setStorageSync('shareId', shareId) | uni.setStorageSync('shareId', shareId) | ||||
| } | } | ||||
| if (state) { | if (state) { | ||||
| uni.setStorageSync('state', state) | uni.setStorageSync('state', state) | ||||
| } | } | ||||
| if (id) { | if (id) { | ||||
| uni.setStorageSync('id', id) | uni.setStorageSync('id', id) | ||||
| } | } | ||||
| this.id = id | |||||
| // if (uni.getStorageSync('token')) { | |||||
| // this.fetchDetails() | |||||
| // } else { | |||||
| // uni.navigateTo({ | |||||
| // url: '/pages_order/auth/wxLogin' | |||||
| // }) | |||||
| // } | |||||
| this.fetchDetails() | |||||
| }, | |||||
| onShareAppMessage(res) { | |||||
| const { | |||||
| textDetails, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title : textDetails, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=0&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id:this.id, | |||||
| state:"0", | |||||
| } | |||||
| this.$fetch('addLogShareInfo', params) | |||||
| shareLog.insert(this.id) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails() { | |||||
| try { | |||||
| this.detail = await this.$fetch('getShareInfo', { id: this.id }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async fetchCheckShare() { | |||||
| try { | |||||
| return await 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 | |||||
| return | |||||
| } | |||||
| title && uni.showToast({ | |||||
| title, | |||||
| icon: 'none', | |||||
| duration: 3000 | |||||
| }) | |||||
| }, | |||||
| openPopup() { | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onAdd() { | |||||
| const result = await this.fetchCheckShare() | |||||
| const { open, need_num, num } = result | |||||
| console.log('--open', open) | |||||
| if (open) { // 转发已达标 | |||||
| this.isLocked = false | |||||
| return | |||||
| } | |||||
| uni.showToast({ | |||||
| title: `还需转发${need_num - num}次`, | |||||
| icon: 'none', | |||||
| }) | |||||
| this.openPopup() | |||||
| } | |||||
| }, | |||||
| } | |||||
| this.id = id | |||||
| // if (uni.getStorageSync('token')) { | |||||
| // this.fetchDetails() | |||||
| // } else { | |||||
| // uni.navigateTo({ | |||||
| // url: '/pages_order/auth/wxLogin' | |||||
| // }) | |||||
| // } | |||||
| this.fetchDetails() | |||||
| }, | |||||
| onShareAppMessage(res) { | |||||
| const { | |||||
| textDetails, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title: textDetails, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=0&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id: this.id, | |||||
| state: "0", | |||||
| } | |||||
| // this.$fetch('addLogShareInfo', params) | |||||
| shareLog.insert(this.id) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails() { | |||||
| try { | |||||
| this.detail = await this.$fetch('getShareInfo', { | |||||
| id: this.id | |||||
| }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async fetchCheckShare() { | |||||
| try { | |||||
| return await 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 | |||||
| return | |||||
| } | |||||
| title && uni.showToast({ | |||||
| title, | |||||
| icon: 'none', | |||||
| duration: 3000 | |||||
| }) | |||||
| }, | |||||
| openPopup() { | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onAdd() { | |||||
| const result = await this.fetchCheckShare() | |||||
| const { | |||||
| open, | |||||
| need_num, | |||||
| num | |||||
| } = result | |||||
| console.log('--open', open) | |||||
| if (open) { // 转发已达标 | |||||
| this.isLocked = false | |||||
| return | |||||
| } | |||||
| uni.showToast({ | |||||
| title: `还需转发${need_num - num}次`, | |||||
| icon: 'none', | |||||
| }) | |||||
| this.openPopup() | |||||
| } | |||||
| }, | |||||
| } | |||||
| </script> | </script> | ||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||
| .page { | |||||
| position: relative; | |||||
| height: 100vh; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| } | |||||
| .avatar { | |||||
| width: 180rpx; | |||||
| height: 180rpx; | |||||
| margin-top: 127rpx; | |||||
| } | |||||
| .nick-name { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .btn, .qr-popup { | |||||
| position: absolute; | |||||
| } | |||||
| .btn { | |||||
| 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; | |||||
| } | |||||
| .qr-popup { | |||||
| width: 100vw; | |||||
| bottom: 269rpx; | |||||
| .tips { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| } | |||||
| .qr { | |||||
| margin-top: 40rpx; | |||||
| width: 350rpx; | |||||
| height: 350rpx; | |||||
| } | |||||
| .page { | |||||
| position: relative; | |||||
| height: 100vh; | |||||
| } | |||||
| .content { | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: center; | |||||
| } | |||||
| .avatar { | |||||
| width: 180rpx; | |||||
| height: 180rpx; | |||||
| margin-top: 127rpx; | |||||
| } | |||||
| .nick-name { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| margin-top: 30rpx; | |||||
| } | |||||
| .btn, | |||||
| .qr-popup { | |||||
| position: absolute; | |||||
| } | |||||
| .btn { | |||||
| 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; | |||||
| } | |||||
| .qr-popup { | |||||
| width: 100vw; | |||||
| bottom: 269rpx; | |||||
| .tips { | |||||
| color: #1B1B1B; | |||||
| font-size: 32rpx; | |||||
| } | |||||
| } | |||||
| .qr { | |||||
| margin-top: 40rpx; | |||||
| width: 350rpx; | |||||
| height: 350rpx; | |||||
| } | |||||
| </style> | </style> | ||||
| @ -1,189 +1,217 @@ | |||||
| <template> | <template> | ||||
| <view class="page"> | |||||
| <view class="page"> | |||||
| <navbar leftClick @leftClick="$utils.navigateBack" /> | <navbar leftClick @leftClick="$utils.navigateBack" /> | ||||
| <view class="content"> | |||||
| <video class="video" | |||||
| id="video" | |||||
| :src="detail.vio" | |||||
| autoplay | |||||
| play-btn-position="center" | |||||
| :controls="!timeIsUp" | |||||
| :show-fullscreen-btn="false" | |||||
| :show-center-play-btn="true" | |||||
| @timeupdate="onTimeupdate" | |||||
| @ended="onTimeEnd" | |||||
| ></video> | |||||
| <view class="info"> | |||||
| <view class="author">{{ detail.author || '' }}</view> | |||||
| <view class="title">{{ detail.headTitle || '' }}</view> | |||||
| <view class="desc">{{ detail.textDetails || '' }}</view> | |||||
| </view> | |||||
| </view> | |||||
| <uv-overlay :show="timeIsUp" @click="onPlay" zIndex="998"> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-video.png"></popupUnlock> | |||||
| </uv-overlay> | |||||
| <popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode> | |||||
| </view> | |||||
| <view class="content"> | |||||
| <video class="video" id="video" :src="detail.vio" autoplay play-btn-position="center" :controls="!timeIsUp" | |||||
| :show-fullscreen-btn="false" :show-center-play-btn="true" @timeupdate="onTimeupdate" | |||||
| @ended="onTimeEnd"></video> | |||||
| <view class="info"> | |||||
| <view class="author">{{ detail.author || '' }}</view> | |||||
| <view class="title">{{ detail.headTitle || '' }}</view> | |||||
| <view class="desc">{{ detail.textDetails || '' }}</view> | |||||
| </view> | |||||
| </view> | |||||
| <uv-overlay :show="timeIsUp" @click="onPlay" zIndex="998"> | |||||
| <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-video.png"></popupUnlock> | |||||
| </uv-overlay> | |||||
| <popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode> | |||||
| </view> | |||||
| </template> | </template> | ||||
| <script> | <script> | ||||
| import { mapState } from 'vuex' | |||||
| import { | |||||
| mapState | |||||
| } from 'vuex' | |||||
| 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 { | export default { | ||||
| components: { | |||||
| popupUnlock, | |||||
| popupQrCode, | |||||
| }, | |||||
| components: { | |||||
| popupUnlock, | |||||
| popupQrCode, | |||||
| }, | |||||
| data() { | data() { | ||||
| return { | return { | ||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| headTitle: null, | |||||
| indexImage: null, | |||||
| vio: null, | |||||
| timeNum: 0, | |||||
| num: 0, | |||||
| wxCodeImage: null, | |||||
| textDetails: null, | |||||
| }, | |||||
| timeIsUp: false, | |||||
| isLocked: true, | |||||
| videoContext: null, | |||||
| } | |||||
| }, | |||||
| id: null, | |||||
| detail: { | |||||
| id: null, | |||||
| headTitle: null, | |||||
| indexImage: null, | |||||
| vio: null, | |||||
| timeNum: 0, | |||||
| num: 0, | |||||
| wxCodeImage: null, | |||||
| textDetails: null, | |||||
| }, | |||||
| timeIsUp: false, | |||||
| isLocked: true, | |||||
| videoContext: null, | |||||
| } | |||||
| }, | |||||
| computed: { | computed: { | ||||
| ...mapState(['userInfo']), | ...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) { | if (shareId) { | ||||
| uni.setStorageSync('shareId', shareId) | uni.setStorageSync('shareId', shareId) | ||||
| } | } | ||||
| if (state) { | if (state) { | ||||
| uni.setStorageSync('state', state) | uni.setStorageSync('state', state) | ||||
| } | } | ||||
| if (id) { | if (id) { | ||||
| uni.setStorageSync('id', 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, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title : headTitle, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=1&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id:this.id, | |||||
| state:"1", | |||||
| } | |||||
| this.$fetch('addLogShareInfo', params) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails(id) { | |||||
| try { | |||||
| this.detail = await this.$fetch('getVideoShareInfo', { id }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async initData() { | |||||
| this.isLocked = true | |||||
| await this.fetchDetails(this.id) | |||||
| this.videoContext = uni.createVideoContext('video'); | |||||
| }, | |||||
| refreshLockStatus() { | |||||
| this.isLocked = false | |||||
| this.timeIsUp = false | |||||
| setTimeout(() => { | |||||
| this.videoContext.play() | |||||
| console.log('--play') | |||||
| }) | |||||
| }, | |||||
| async onPlay() { | |||||
| if (!this.isLocked) { | |||||
| return | |||||
| } | |||||
| this.videoContext.pause() | |||||
| this.timeIsUp = true | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onTimeupdate(e) { | |||||
| const { currentTime } = e.target | |||||
| if (currentTime >= this.detail.timeNum && this.isLocked) { | |||||
| this.videoContext.pause() | |||||
| this.timeIsUp = true | |||||
| this.onPlay() | |||||
| } | |||||
| }, | |||||
| onTimeEnd() { | |||||
| this.$refs.popupQrCode.open() | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| this.id = id | |||||
| <style scoped lang="scss"> | |||||
| .video { | |||||
| width: 100%; | |||||
| height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx); | |||||
| } | |||||
| // if(uni.getStorageSync('token')){ | |||||
| // this.initData() | |||||
| // }else{ | |||||
| // uni.navigateTo({ | |||||
| // url: '/pages_order/auth/wxLogin' | |||||
| // }) | |||||
| // } | |||||
| .info { | |||||
| color: #FFFFFF; | |||||
| font-size: 28rpx; | |||||
| this.initData() | |||||
| position: fixed; | |||||
| left: 40rpx; | |||||
| bottom: 100rpx; | |||||
| }, | |||||
| onShareAppMessage(res) { | |||||
| const { | |||||
| headTitle, | |||||
| indexImage, | |||||
| } = this.detail | |||||
| let o = { | |||||
| title: headTitle, | |||||
| imageUrl: indexImage, | |||||
| query: `id=${this.id}&state=1&shareId=${this.userInfo.id}`, | |||||
| } | |||||
| .title { | |||||
| font-size: 32rpx; | |||||
| margin: 5rpx 0; | |||||
| } | |||||
| } | |||||
| //调用增加分享次数的方法 | |||||
| const params = { | |||||
| id: this.id, | |||||
| state: "1", | |||||
| } | |||||
| // this.$fetch('addLogShareInfo', params) | |||||
| shareLog.insert(this.id) | |||||
| return o | |||||
| }, | |||||
| methods: { | |||||
| async fetchDetails(id) { | |||||
| try { | |||||
| this.detail = await this.$fetch('getVideoShareInfo', { | |||||
| id | |||||
| }) | |||||
| } catch (err) { | |||||
| } | |||||
| }, | |||||
| async initData() { | |||||
| this.isLocked = true | |||||
| await this.fetchDetails(this.id) | |||||
| this.videoContext = uni.createVideoContext('video'); | |||||
| }, | |||||
| async refreshLockStatus() { | |||||
| this.isLocked = false | |||||
| this.timeIsUp = false | |||||
| setTimeout(async () => { | |||||
| const result = await this.fetchCheckShare() | |||||
| const { | |||||
| open, | |||||
| need_num, | |||||
| num | |||||
| } = result | |||||
| console.log('--open', open) | |||||
| if (open) { // 转发已达标 | |||||
| this.videoContext.play() | |||||
| this.isLocked = false | |||||
| return | |||||
| } | |||||
| uni.showToast({ | |||||
| title: `还需转发${need_num - num}次`, | |||||
| icon: 'none', | |||||
| }) | |||||
| }) | |||||
| }, | |||||
| async fetchCheckShare() { | |||||
| try { | |||||
| return await shareLog.check(this.id, this.detail.num) | |||||
| } catch (err) { | |||||
| return {} | |||||
| } | |||||
| }, | |||||
| async onPlay() { | |||||
| if (!this.isLocked) { | |||||
| return | |||||
| } | |||||
| this.videoContext.pause() | |||||
| this.timeIsUp = true | |||||
| this.$refs.popupUnlock.open(); | |||||
| }, | |||||
| async onTimeupdate(e) { | |||||
| const { | |||||
| currentTime | |||||
| } = e.target | |||||
| if (currentTime >= this.detail.timeNum && this.isLocked) { | |||||
| this.videoContext.pause() | |||||
| this.timeIsUp = true | |||||
| this.onPlay() | |||||
| } | |||||
| }, | |||||
| onTimeEnd() { | |||||
| this.$refs.popupQrCode.open() | |||||
| }, | |||||
| }, | |||||
| } | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .video { | |||||
| width: 100%; | |||||
| height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx); | |||||
| } | |||||
| .info { | |||||
| color: #FFFFFF; | |||||
| font-size: 28rpx; | |||||
| position: fixed; | |||||
| left: 40rpx; | |||||
| bottom: 100rpx; | |||||
| .title { | |||||
| font-size: 32rpx; | |||||
| margin: 5rpx 0; | |||||
| } | |||||
| } | |||||
| </style> | </style> | ||||