share.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view class="share-btn-box" :style="{padding:padding}">
  3. <view class="share-btn" @click.stop="onShare">
  4. <text class="share-icon iconfont_yige">&#xe69d;</text>
  5. <text>分享活动</text>
  6. </view>
  7. <sharePoster ref="sharePosterRef" :code-url="codeurl" :posterUrl="sharePoster" />
  8. </view>
  9. </template>
  10. <script>
  11. import CONFIG from "@/config/global.config.js"
  12. export default {
  13. props: {
  14. padding: {
  15. type: String,
  16. default: '20rpx 0'
  17. },
  18. sharePoster: {
  19. type: String,
  20. default: ""
  21. },
  22. taskId: {
  23. type: Number,
  24. default: ""
  25. }
  26. },
  27. data() {
  28. return {
  29. codeurl: null,
  30. }
  31. },
  32. methods: {
  33. onShare() {
  34. this.codeurl = `${CONFIG.hostUrl}?URLType=Task&taskId=${this.taskId}`
  35. this.$refs.sharePosterRef.open();
  36. },
  37. }
  38. }
  39. </script>
  40. <style lang="scss" scoped>
  41. .share-btn-box {
  42. width: 100%;
  43. .share-btn {
  44. display: inline-flex;
  45. align-items: center;
  46. font-size: 24rpx;
  47. font-weight: Light;
  48. color: #808080;
  49. line-height: 1;
  50. .share-icon {
  51. font-size: 40rpx;
  52. color: #3eb8d0;
  53. margin-right: 15rpx;
  54. }
  55. }
  56. }
  57. </style>