feat: 微信端标讯详情页添加打赏功能

apps/mobile/src/api/modules/front.js

@@ -38,3 +38,10 @@ export function getPreview(data) {
     data
   })
 }
+
+export function getRewardText() {
+  return request({
+    method: 'get',
+    url: '/front/rewardText'
+  })
+}

apps/mobile/src/composables/attachment-download/component/AttachmentDownload.vue

@@ -533,7 +533,9 @@ export default {
   font-size: 15px;
   line-height: 22px;
   .file-attachment-item {
-    margin-bottom: 16px;
+    &:not(:last-of-type) {
+      margin-bottom: 16px;
+    }
   }
 }
 

apps/mobile/src/data/links.js

@@ -200,6 +200,11 @@ export const LINKS = {
     h5: '/jyapp/big/page/main_root',
     wx: '/big/wx/page/main_root'
   },
+  打赏页面: {
+    app: '',
+    h5: '',
+    wx: '/jypay/weixin/reward/redirect'
+  },
   数据导出记录: {
     app: '/jyapp/dataPack/recordList',
     h5: '/jyapp/dataPack/recordList',

apps/mobile/src/views/article/components/ContentMainText.vue

@@ -4,6 +4,11 @@
       <pre v-html="content.contentHighlighted"></pre>
     </section>
     <AttachmentDownloadCard class="attachment-download-section" />
+    <div></div>
+    <Reward
+      :beforeLeavePage="beforeLeavePage"
+      v-if="rewardShow"
+      :id="content.id" />
     <section class="others-footer">
       <div class="origin-link-container">
         <OriginLink :id="content.id" v-if="content.originalShow" />
@@ -18,6 +23,7 @@
 import ContentModuleCard from '@/views/article/ui/ContentModuleCard.vue'
 import AttachmentDownloadCard from '@/views/article/components/AttachmentDownloadCard.vue'
 import OriginLink from '@/views/article/components/OriginLink.vue'
+import Reward from '@/views/article/components/Reward.vue'
 import { mapState, mapGetters } from 'vuex'
 import { LINKS } from '@/data'
 import { openAppOrWxPage } from '@/utils/'
@@ -27,6 +33,7 @@ export default {
   components: {
     AttachmentDownloadCard,
     OriginLink,
+    Reward,
     ContentModuleCard
   },
   props: {
@@ -36,6 +43,12 @@ export default {
     ...mapState({
       content: (state) => state.article.mainModel.content
     }),
+    canRead() {
+      return this.content.isCanRead
+    },
+    rewardShow() {
+      return this.canRead && this.$envs.inWX
+    },
     ...mapGetters('user', ['isLogin'])
   },
   methods: {

apps/mobile/src/views/article/components/Reward.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="user-reward" v-show="wxVersionCheck">
+    <div class="user-reward-text">{{ rewardText }}</div>
+    <div class="user-reward-action">
+      <button
+        type="button"
+        class="user-reward-button clickable"
+        @click="toRewardPage(true)"
+      >
+        打赏
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRewardText } from '@/api/modules/'
+import { LINKS } from '@/data'
+import { openAppOrWxPage } from '@/utils/'
+export default {
+  name: 'Reward',
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    beforeLeavePage: Function
+  },
+  data() {
+    return {
+      wxVersionCheck: true,
+      rewardText: ''
+    }
+  },
+  created() {
+    this.calcWxVersion()
+    this.getRewardText()
+    this.checkRewardBack()
+  },
+  methods: {
+    async getRewardText() {
+      this.rewardText = await getRewardText()
+    },
+    checkRewardBack() {
+      if (sessionStorage.rewardStatus) {
+        this.$toast('剑鱼标讯感谢您的支持')
+      }
+    },
+    getWxVersion() {
+      const wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
+      if(!wxInfo) {
+        return null
+      }
+      return wxInfo[1]
+    },
+    calcWxVersion() {
+      const wxInfo = this.getWxVersion()
+      if (wxInfo && wxInfo >= '5.0') {
+        this.wxVersionCheck = true
+      } else {
+        this.wxVersionCheck = false
+      }
+    },
+    async toRewardPage() {
+      if (this.beforeLeavePage) {
+        await this.beforeLeavePage()
+      }
+      openAppOrWxPage(LINKS.打赏页面, {
+        query: {
+          id: this.id,
+          source: 'm'
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.user-reward {
+  padding: 20px 0;
+  text-align: center;
+  &-text {
+    margin-bottom: 16px;
+    font-size: 16px;
+    color: #686868;
+  }
+  &-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    padding: 0 22px;
+    color: #fff;
+    font-size: 15px;
+    background-color: #ffbb03;
+    border-radius: 15px;
+  }
+}
+</style>