[add] facebook share 逻辑

src/entry/background.js

@@ -16,6 +16,10 @@ import {
     onDisconnectHandler
 } from "@/logic/background/twitter";
 
+import {
+    facebookShareSuccess
+} from "@/logic/background/facebook";
+
 //加载bg.js 执行
 setMessageCount();
 
@@ -75,6 +79,9 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID':
                 saveDiscordAuthWindowId(req);
                 break;
+            case 'CONTENT_FACEBOOK_SHARE_SUCCESS':
+                facebookShareSuccess(req, sender);
+                break;
         }
     }
 }

src/entry/content.js

@@ -14,13 +14,19 @@ import {
     changeQueueNum
 } from "@/logic/content/twitter.js";
 
+import {
+    initFacebookContent,
+    setPublishString
+} from "@/logic/content/facebook.js"
+
 
 chrome.storage.onChanged.addListener(changes => {
     initExecuteScript(changes)
 })
 
 window.onload = () => {
-    init()
+    init();
+    initFacebookContent();
 };
 
 window.onmessage = (res) => {
@@ -53,6 +59,9 @@ chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
             console.log('BACK_TWITTER_SHORT_URL')
             changeQueueNum(1)
             break
+        case 'CONTENT_SET_PUBLISH_STRING':
+            setPublishString(req);
+            break
     }
 })
 

src/http/configAPI.js

@@ -25,3 +25,5 @@ export const logAPIUrl = logApi[process.env.NODE_ENV] + '/log-center'
 export const pageUrl = page[process.env.NODE_ENV] 
 
 export const discordAuthRedirectUri = `${pageUrl}/auth/discordCallback`;
+
+export const faceShareRedirectUrl = `${pageUrl}/facebook/shareCallback`;

src/logic/background/facebook.js

@@ -0,0 +1,36 @@
+import { fetchAddFinishEvent } from '@/logic/background/fetch/facebook'
+
+/**
+ * facebook分享成功逻辑
+ */
+export function facebookShareSuccess(params, sender) {
+    let {data} = params;
+    let {id} = sender.tab || {};
+    chrome.tabs.remove(id);
+
+    fetchAddFinishEvent({
+        eventType: data.type,
+        luckdropId: data.luckdropId
+    }).then(res => {
+        if (res.code == 0) {
+            setTimeout(() => {
+                sendActivetabMessage({
+                    actionType: 'BG_FACEBOOK_SHARE_SUCCESS',
+                    data: data
+                });
+            })
+        }
+    })
+}
+
+
+function sendActivetabMessage(message = {}) {
+    chrome.tabs.query({
+        active: true,
+        currentWindow: true
+    }, (tabs) => {
+        chrome.tabs.sendMessage(tabs[0].id, message, res => {
+            console.log(res)
+        })
+    })
+}

src/logic/background/fetch/facebook.js

@@ -0,0 +1,6 @@
+import { selfFetch } from '@/logic/background/fetch/fetch'
+
+
+export function fetchAddFinishEvent(params = {}) {
+    return selfFetch('/post/luckdrop/addFinishEvent', params);
+}

src/logic/background/fetch/fetch.js

@@ -0,0 +1,36 @@
+import { appVersionCode, baseAPIUrl } from '@/http/configAPI.js'
+import { getChromeStorage } from '@/uilts/chromeExtension.js'
+
+export async function selfFetch(url, params, config = {}) {
+    let { method = 'POST', contentType = 'application/json' } = config;
+    let _url = `${baseAPIUrl}${url}`;
+
+    let storage_mid = await getChromeStorage('mid') || ''
+    const { accessToken: token = '', uid = '' } = await getChromeStorage('userInfo') || {};
+    const { mid } = storage_mid || {};
+
+    let baseInfo = {
+        appVersionCode,
+        mid,
+        machineCode: mid,
+        token: token,
+        uid,
+        loginUid: uid,
+        appType: 1,
+    };
+
+    return fetch(_url, {
+        method, 
+        headers: {
+            'Content-Type': contentType,
+        },
+        body: JSON.stringify({
+            "baseInfo": baseInfo,
+            "params": params
+        })
+    }).then(response => {
+        return response.json();
+    }).catch((error) => {
+        return Promise.reject(error);
+    });
+}

src/logic/content/facebook.js

@@ -0,0 +1,79 @@
+import { faceShareRedirectUrl } from '@/http/configAPI'
+
+let tempData = {
+    publishContentStr: ''
+}
+
+/**
+ * 初始化contentjs调用逻辑
+ */
+export function initFacebookContent() {
+    // window.location.href.indexOf('facebook.com') > -1;
+    injectShareCode();
+
+    shareCallback();
+};
+
+/**
+ * 设置发布内容字符串
+ */
+export function setPublishString(params) {
+    let { publishContentStr} = params.data || {};
+    tempData.publishContentStr = publishContentStr;
+}
+
+/**
+ * 注入分享页面逻辑
+ * @returns 
+ */
+function injectShareCode() {
+    const {href, pathname} = window.location;
+    if(!(href.indexOf('facebook.com') > -1 && pathname.indexOf('dialog/share'))) {
+        return;
+    }
+
+    // 设置分享内容
+    setShareInputContent();
+}
+
+/**
+ * 格式化发布内容字符串
+ */
+function formatContentStr(content) {
+    let str = content.replace(/(\r)/g,'\n');
+    return str;
+}
+
+
+/**
+ * 设置分享输入框内容
+ */
+function setShareInputContent() {
+    const contentStr = formatContentStr(tempData.publishContentStr);
+
+    if (!tempData.isSetContent && contentStr) {
+        tempData.isSetContent = true;
+        setTimeout(() => {
+            document.execCommand("insertText", false, contentStr);
+            setTimeout(() => {
+                tempData.isSetContent = false;
+            }, 800)
+        }, 600);
+    }
+}
+
+/**
+ * 分享回调
+ */
+function shareCallback() {
+    if (window.location.href.indexOf(faceShareRedirectUrl) > -1) {
+        tempData.publishContentStr = '';
+        const urlParams = new URLSearchParams(window.location.search);
+        let params = JSON.parse(urlParams.get('params'));
+        if (params) {
+            chrome.runtime.sendMessage({ actionType: "CONTENT_FACEBOOK_SHARE_SUCCESS", data: params }, () => { 
+
+            })
+        }
+    }
+}

src/manifest.json

@@ -20,6 +20,7 @@
             "matches": [
                 "https://*.twitter.com/*",
                 "https://twitter.com/*",
+                "https://www.facebook.com/*",
                 "*://testh5.denetme.net/*",
                 "*://h5.denetme.net/*",
                 "*://preh5.denetme.net/*"
@@ -33,6 +34,7 @@
     "host_permissions": [
         "*://*.twitter.com/*",
         "*://twitter.com/*",
+        "https://www.facebook.com/*",
         "*://testh5.denetme.net/*",
         "*://h5.denetme.net/*",
         "*://preh5.denetme.net/*"

src/view/components/currency-list.vue

@@ -338,6 +338,11 @@ defineExpose({
 
             .right {
                 text-align: right;
+                max-width: calc(100% - 150px);
+                
+                .num, .amount {
+                    word-break: break-all;
+                }
 
                 .num {
                     font-weight: 500;

src/view/iframe/publish/give-dialog.vue

@@ -207,7 +207,7 @@
                                         </div>
                                     </div>
                                     <el-switch
-                                        v-if="item.type == 2 || item.type == 7"
+                                        v-if="item.type == 2 || item.type == 7 || item.type == 8"
                                         v-model="item.checked"
                                         @change="formSwitchChange($event, item, index)"
                                     />
@@ -451,7 +451,7 @@ let iptErrType = ''; //discord
 let formList = reactive([
     {
         label: "Follow",
-        icon: require("@/assets/svg/icon-follow.svg"),
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "textarea",
         type: 1,
         text: [],
@@ -459,18 +459,26 @@ let formList = reactive([
     },
     {
         label: "Retweet",
-        icon: require("@/assets/svg/icon-retweet.svg"),
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "div",
         type: 3,
         checked: true,
     },
     {
         label: "Like Tweet",
-        icon: require("@/assets/svg/icon-like.svg"),
+        icon: require("@/assets/svg/icon-task-twitter.svg"),
         nodeType: "div",
         type: 2,
         checked: true,
     },
+    {
+        label: "Repost to Facebook",
+        icon: require("@/assets/svg/icon-task-facebook.svg"),
+        nodeType: "div",
+        text: '',
+        type: 8,
+        checked: true,
+    },
     {
         label: "Join Discord",
         icon: require("@/assets/svg/icon-discord-mini.svg"),
@@ -1044,17 +1052,17 @@ const onIptSetErrorTxt = (params = {}) => {
  */
 const formSwitchChange = (val, params, index) => {
     console.log('formSwitchChange')
-    if(!val) {
-        if(params.type == 7) {
+    if(params.type == 7) {
+        if(!val) {
             //错误类型 discord 清空discord错误校验
             if(iptErrType == 'discord') {
                 iptErrMsgTxt.value = '';
                 formList[index]['text'] = '';
                 onIptSetErrorTxt();
             }
+        } else {
+            onIptSetErrorTxt();
         }
-    } else {
-        onIptSetErrorTxt();
     }
 }
 

src/view/iframe/red-packet/red-packet.vue

@@ -66,6 +66,18 @@
             <img v-if="state.done.retweet" :src="require('@/assets/svg/icon-true.svg')" alt />
             <div v-else class="btn" @click="clickRetweetBtn">Retweet</div>
           </template>
+          <!-- repost feacebook -->
+          <template v-if="item.type == 8">
+            <img :src="require('@/assets/svg/icon-task-facebook.svg')" alt />
+            <div class="item-content">
+              <div class="item-title">Repost to Facebook</div>
+            </div>
+            <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
+              v-show="!state.done.repost_facebook && state.done.repost_facebook_red" />
+            <img v-if="state.done.repost_facebook" :src="require('@/assets/svg/icon-true.svg')" alt />
+            <div v-else class="btn" @click="clickRepostFacebook(item)">Repost</div>
+          </template>
+          <!-- join discord  -->
           <template v-if="item.type == 7">
             <img :src="require('@/assets/svg/icon-discord-mini.svg')" alt />
             <div class="item-content">
@@ -306,7 +318,7 @@ import { getChromeStorage } from '@/uilts/chromeExtension.js'
 import Report from "@/log-center/log"
 import { srcPublishSuccess } from '@/http/publishApi'
 import { discordAuthUrl, checkGuildJoined } from '@/http/discordApi'
-import { discordAuthRedirectUri } from '@/http/configAPI'
+import { discordAuthRedirectUri, faceShareRedirectUrl} from '@/http/configAPI'
 
 var moment = require('moment');
 
@@ -314,6 +326,11 @@ let discordAuthorizeRequired = false;
 let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth
 let joinDiscordIng = ref(false);
 
+let facebookAppConfig = {
+  facebookAppId: "1040829453198385",
+  faceShareRedirectUrl
+};
+
 let state = reactive({
   status: '',
   loading_show: false,
@@ -330,7 +347,8 @@ let state = reactive({
     follow: false,
     like: false,
     retweet: false,
-    join_discord: false
+    join_discord: false,
+    repost_facebook: false,
   }
 })
 function clickRetry() {
@@ -445,6 +463,69 @@ async function clickRetweetBtn() {
   });
 }
 
+/**
+ * 点击repost facebook
+ */
+async function clickRepostFacebook(params) {
+    let _userInfo = await checkIsLogin()
+    if (!_userInfo) {
+      return
+    }
+
+    let shareUrlparams = {
+      href: state.postRedirectUrl, 
+      type: params.type,
+      taskLuckdropId: state.detail.taskLuckdropId
+    }
+
+    let shareUrl = feacebookShareUrl(shareUrlparams);
+    openShareFacebookWindow({url: shareUrl});
+    callEventPageMethod('CONTENT_SET_PUBLISH_STRING', {
+      publishContentStr: state.srcContent
+    })
+    
+}
+
+/**
+ * 分享到facebook
+ */
+function openShareFacebookWindow({url}) {
+  const width = 800;
+  chrome.windows.create({
+    width,
+    type: 'normal',
+    url
+  }, function (window) {
+
+  })
+}
+
+/**
+ * 分享fecebook 地址
+ */
+function feacebookShareUrl(params = {}) {
+  let { href = '', type = '', taskLuckdropId } = params;
+  let cbParams = JSON.stringify({
+    type,
+    taskLuckdropId
+  })
+  let shareUrl = `https://www.facebook.com/dialog/share?app_id=${facebookAppConfig.facebookAppId}&display=popup&href=${href}&redirect_uri=${facebookAppConfig.faceShareRedirectUrl}?params=${cbParams}`;
+
+  return shareUrl;
+}
+
+/**
+ * 分享成功
+ */
+function facebookShareSuccess(params) {
+  let {taskLuckdropId} = params;
+
+  if(taskLuckdropId == state.detail.taskLuckdropId) {
+    state.done.repost_facebook = true;
+    state.done.repost_facebook_red = false;
+  }
+}
+
 
 function getValidity() {
   let _d1, _d2, _d3, _h, _m, _s
@@ -722,6 +803,9 @@ function init() {
     // 如果金额是0
     //    显示没有领到钱
     if (res.code == 0) {
+      state.srcContent = res.data.srcContent;
+      state.postRedirectUrl = res.data.postRedirectUrl;
+
       // 判断推特id，绑定逻辑
       state.srcContentId = res.data.srcContentId
       if (!state.srcContentId) {
@@ -782,11 +866,7 @@ onMounted(() => {
 
 // 点击领取
 function clickOpenRedPacket() {
-  chrome.runtime.sendMessage({
-    actionType: 'CONTENT_GET_PINED'
-  }, res => {
-    console.log(res);
-  })
+  callEventPageMethod('CONTENT_GET_PINED', {})
   handleRedPacket()
 }
 
@@ -910,7 +990,17 @@ function handleFinishRedPacket() {
                 state.done.retweet = false
               }
               break
+            case '8':
+              //repost feacebook
+              if (_data[i].finished) {
+                state.done.repost_facebook = true
+                state.done.repost_facebook_red = false
+              } else {
+                state.done.repost_facebook = false;
+                state.done.repost_facebook_red = true
+              }
             case '7':
+              //join discord
               discordAuthorizeRequired = _data[i].discordAuthorizeRequired;
               if (_data[i].finished) {
                 state.done.join_discord = true
@@ -1114,6 +1204,9 @@ function onRuntimeMsg() {
       case 'BACK_DISCORD_LOGIN_SUCCESS':
         discordLoginSuccess();
         break;
+      case 'BG_FACEBOOK_SHARE_SUCCESS':
+        facebookShareSuccess(req.data);
+        break;
     }
   })
 }