report

components/MobileBuyNft.vue

@@ -84,7 +84,7 @@
             position="bottom">
             <div class="login">
                 <div class="title">In order to purchase the NFT, you need to</div>
-                <div class="btn">
+                <div class="btn" @click="login">
                     <button-login
                         @success="loginSuccess"
                         @error="loginError">
@@ -97,11 +97,12 @@
 </template>
 
 <script>
-import { postRequest } from '../http';
-import { Toast } from 'vant';
 import Api from '../http/api';
 import FontZoom from './FontZoom';
 import ButtonLogin from './buttonLogin';
+import Report from './../log-center/log';
+import { Toast } from 'vant';
+import { postRequest } from '../http';
 import { getStorage, storageKey } from '../utils/help';
 
 export default {
@@ -121,6 +122,18 @@ export default {
     },
     created() {
         this.getSaleInfo()
+        // report
+        Report.log({
+            pageSource: Report.pageSource.nftPurchasePage,
+            params: {
+                eventData: {
+                    businessType: Report.businessType.pageView,
+                },
+                extParams: {
+                    userAgent: window.navigator.userAgent,
+                }
+            }
+        })
     },
     methods: {
         select(item) {
@@ -149,12 +162,52 @@ export default {
 
             let userInfo = getStorage(storageKey.userInfo)
             if (!!userInfo) {
-                this.loginSuccess(userInfo)
+                this.loginSuccess(userInfo, false)
             } else {
                 this.loginLayer = true;
+                // report
+                Report.log({
+                    pageSource: Report.pageSource.nftLoginPage,
+                    params: {
+                        eventData: {
+                            businessType: Report.businessType.pageView,
+                        },
+                        extParams: {
+                            userAgent: window.navigator.userAgent,
+                        }
+                    }
+                })
             }
+
+            // report
+            Report.log({
+                pageSource: Report.pageSource.nftPurchasePage,
+                params: {
+                    eventData: {
+                        businessType: Report.businessType.buttonClick,
+                        objectType: Report.objectType.buyNftButton,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
+        },
+        login() {
+            Report.log({
+                pageSource: Report.pageSource.nftLoginPage,
+                params: {
+                    eventData: {
+                        businessType: Report.businessType.buttonClick,
+                        objectType: Report.objectType.loginTwitterButton,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
         },
-        loginSuccess(userInfo) {
+        loginSuccess(userInfo, isReport = true) {
             this.$router.push({
                 name: 'Payment',
                 query: {
@@ -162,9 +215,37 @@ export default {
                     account: this.$route.params.account,
                 }
             });
+            if (isReport) {
+                Report.log({
+                    pageSource: Report.pageSource.nftLoginPage,
+                    params: {
+                        eventData: {
+                            businessType: Report.businessType.buttonClick,
+                            objectType: Report.objectType.loginTwitterButton,
+                        },
+                        extParams: {
+                            'login-result': 'sucess',
+                            userAgent: window.navigator.userAgent,
+                        }
+                    }
+                })
+            }
         },
         loginError() {
             Toast('login fail');
+            Report.log({
+                pageSource: Report.pageSource.nftLoginPage,
+                params: {
+                    eventData: {
+                        businessType: Report.businessType.buttonClick,
+                        objectType: Report.objectType.loginTwitterButton,
+                    },
+                    extParams: {
+                        'login-result': 'fail',
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
         }
     }
 }

components/qrcode.vue

@@ -5,7 +5,7 @@
         </div>
         <div class="info">
             <div class="font">{{tokenRechargeAddress}}</div>
-            <div class="copy copy-btn" :data-clipboard-text="tokenRechargeAddress">Copy</div>
+            <div class="copy copy-btn" @click="copy" :data-clipboard-text="tokenRechargeAddress">Copy</div>
         </div>
     </div>
 </template>
@@ -76,7 +76,10 @@ export default {
             clipboard.on('error', function (e) {
                 Toast(`copy error`)
             });
-        }
+        },
+        copy() {
+            this.$emit('copy');
+        },
     }
 }
 </script>

log-center/logEnum.js

@@ -14,10 +14,26 @@ export const objectType = {
 	loginTwitterButton: 'login-twitter-button',
 	cliamRewardButton: 'cliam-reward-button',
 	rtButton: 'rt-button',
+	buyNftButton: 'buy-nft-button',
+	denetPayButton: 'denet-pay-button',
+	metamaskPayButton: 'metamask-pay-button',
+	mastercardPayButton: 'mastercard-pay-button',
+	visaPayButton: 'visa-pay-button',
+	redeemButton: 'redeem-button',
+	depositButtion: 'deposit-buttion',
+	purchaseNftButton: 'purchase-nft-button',
+	refreshBalanceButton: 'refresh-balance-button',
+	copyButtion: 'copy-buttion',
 };
 
 export const pageSource = {
 	newUserLandingPage: 'pc-landing-page',
 	mobileLandingPage: 'mobile-landing-page',
 	tutorialPage: 'tutorial-page',
+	nftPurchasePage: 'denet-web-NFT-purchase-page',
+	nftLoginPage: 'denet-web-twitter-login-page',
+	nftPaymentPage: 'denet-web-nft-payment-page',
+	nftRedeemPage: 'denet-web-NFT-redeem-page',
+	nftDepositCashPage: 'denet-web-NFT-deposit-cash-page',
+	nftDepositTokenPage: 'denet-web-NFT-deposit-token-page',
 };

log-center/logger.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import { logType } from './logEnum.js';
-import { getBrowser, getUserInfo, appVersionCode, denetExtensionId, detectExtension } from '../utils/help';
+import { getBrowser, getUserInfo, appType, appVersionCode, denetExtensionId, detectExtension, getMid } from '../utils/help';
 
 export const logApi = {
 	prod: 'https://log.denetme.net',
@@ -18,6 +18,30 @@ export function reportLog(params) {
 	paramsPretreatmentAndRequest(logType.denet, params);
 }
 
+// 精简后
+export function log(params) {
+	let pageSource = ``;
+	if (params?.pageSource) {
+		pageSource = params.pageSource;
+		delete params.pageSource;
+	}
+
+	let baseInfo = {
+		appVersionCode,
+		pageSource,
+		appType,
+		mid: getMid(),
+		machineCode: getMid(),
+	};
+
+	let data = {
+		baseInfo: baseInfo,
+		...params
+	}
+
+	paramsPretreatmentAndRequest(logType.denet, data);
+}
+
 function paramsPretreatmentAndRequest(logType, params) {
 	let { eventData = {}, extParams = {} } = params.params || {
 		params: {},

pages/payment/index.vue

@@ -46,11 +46,11 @@
                             Balance:{{currencyInfoData.balance}} {{currencyInfoData.tokenSymbol}}
                         </div>
                     </div>
-                    <div class="item" @click="achPay">
+                    <div class="item" @click="achPay(true, Report.objectType.mastercardPayButton)">
                         <img src="../../static/payment/icon_master_card.png" />
                         <span>MasterCard</span>
                     </div>
-                    <div class="item" @click="achPay">
+                    <div class="item" @click="achPay(true, Report.objectType.visaPayButton)">
                         <img src="../../static/payment/icon_visa.png" />
                         <span>VISA</span>
                     </div>
@@ -133,7 +133,7 @@
                         </div>
                         <div class="address">
                             <div class="title">Address</div>
-                            <QrCode :tokenChain="currencyInfoData.tokenChain" :rechargeAddress="rechargeAddress"></QrCode>
+                            <QrCode :tokenChain="currencyInfoData.tokenChain" :rechargeAddress="rechargeAddress" @copy="copyErCode"></QrCode>
                         </div>
                         <div class="notice">
                             <div class="icon"><img src="../../static/img/icon_warning.svg" /></div>
@@ -195,7 +195,7 @@
                             <div class="l">Deposit Amount</div>
                             <div class="r fontDeposit">${{ usdAmountData.rechargeAmountValue }}</div>
                         </div>
-                        <div class="deposit" @click="achPay(false)">Deposit</div>
+                        <div class="deposit" @click="achPay(false, '')">Deposit</div>
                     </div>
                     <div class="line"></div>
                     <div class="balance">
@@ -288,6 +288,7 @@ import { postRequest } from '../../http/index';
 import { maskUrl } from '../../utils/help';
 import { Dialog, Toast } from 'vant';
 import Api from '../../http/api';
+import Report from '../../log-center/log';
 
 export default {
     name: 'payment',
@@ -309,6 +310,7 @@ export default {
             achTimer: 0,
             maskUrlLink: ``,
             usdAmountData: {},
+            Report: Report,
         }
     },
     head() {
@@ -322,6 +324,7 @@ export default {
     },
     mounted() {
         this.saleInfo()
+        this.reportView(Report.pageSource.nftPaymentPage)
     },
     beforeDestroy() {
         clearTimeout(this.currencyTimer);
@@ -407,6 +410,9 @@ export default {
                 setTimeout(() => {
                     this.refreshRotate = false;
                 }, 1000)
+        
+                // report
+                this.reportDepositCashPageClick(Report.objectType.refreshBalanceButton)
             }
         },
         checkCurrencyInfo() {
@@ -416,6 +422,9 @@ export default {
                 setTimeout(() => {
                     this.refreshRotate = false;
                 }, 1000)
+
+                // report
+                this.reportDepositTokenPageClick(Report.objectType.refreshBalanceButton)
             }
         },
         checkWaitInfo() {
@@ -437,6 +446,8 @@ export default {
             this.$nextTick(() => {
                 this.$refs.input.focus();
             })
+            this.reportView(Report.pageSource.nftRedeemPage)
+            this.reportPaymentBtnClick(Report.objectType.redeemButton)
         },
         textInput(e) {
             let len = 16
@@ -492,6 +503,8 @@ export default {
             }).finally(() => {
                 this.redeemNext = true;
             })
+
+            this.reportRedeemBtnClick()
         },
         getAddress() {
             postRequest(Api.getTokenRechargeAddress, {
@@ -562,11 +575,13 @@ export default {
         payUSD() {
             if (Number(this.usdAmountData.rechargeAmountValue) <= 0) {
                 this.pay()
+                this.reportDepositCashPageClick(Report.objectType.purchaseNftButton)
             }
         },
         payToken() {
             if (Number(this.currencyInfoData.balance) >= Number(this.salePlans.price)) {
                 this.pay()
+                this.reportDepositTokenPageClick(Report.objectType.purchaseNftButton)
             }
         },
         payError(code) {
@@ -606,21 +621,26 @@ export default {
         deNetPay() {
             if (!this.salePlans) return;
 
-            let where;
+            let where, pageSource;
             if (this.salePlans.currencyCode === 'USD') {
                 where = Number(this.usdAmountData.rechargeAmountValue) > 0
+                pageSource = Report.pageSource.nftDepositCashPage
             } else {
                 where = Number(this.salePlans.price) > Number(this.currencyInfoData.balance)
+                pageSource = Report.pageSource.nftDepositTokenPage
             }
 
             if (where) {
                 // 余额不够
                 this.step = 3;
                 this.currencyInfoTimer();
+                // Report
+                this.reportView(pageSource);
             } else {
                 // 余额足够
                 this.step = 2;
             }
+            this.reportPaymentBtnClick(Report.objectType.denetPayButton)
         },
         maskPay() {
             if (Number(this.salePlans.price) > Number(this.currencyInfoData.balance)) {
@@ -642,8 +662,10 @@ export default {
             } else {
                 this.step = 2;
             }
+
+            this.reportPaymentBtnClick(Report.objectType.metamaskPayButton)
         },
-        achPay(modifyStep = true) {
+        achPay(modifyStep = true, objectType = '') {
             if (Number(this.usdAmountData.rechargeAmountValue) > 0) {
                 if (modifyStep) {
                     this.step = 2;
@@ -680,6 +702,85 @@ export default {
                     this.step = 2;
                 }
             }
+
+            if (objectType !== '') {
+                this.reportPaymentBtnClick(objectType)
+            } else {
+                this.reportDepositCashPageClick(Report.objectType.depositButtion)
+            }
+        },
+        copyErCode() {
+            this.reportDepositTokenPageClick(Report.objectType.copyButtion)
+        },
+
+        reportView(pageSource) {
+            Report.log({
+                pageSource,
+                params: {
+                    eventData: {
+                        businessType: Report.businessType.pageView,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
+        },
+        reportPaymentBtnClick(objectType) {
+            Report.log({
+                pageSource: Report.pageSource.nftPaymentPage,
+                params: {
+                    eventData: {
+                        objectType,
+                        businessType: Report.businessType.buttonClick,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
+        },
+        reportRedeemBtnClick() {
+            Report.log({
+                pageSource: Report.pageSource.nftRedeemPage,
+                params: {
+                    eventData: {
+                        objectType: Report.objectType.redeemButton,
+                        businessType: Report.businessType.buttonClick,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
+        },
+        reportDepositCashPageClick(objectType) {
+            Report.log({
+                pageSource: Report.pageSource.nftDepositCashPage,
+                params: {
+                    eventData: {
+                        objectType,
+                        businessType: Report.businessType.buttonClick,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
+        },
+        reportDepositTokenPageClick(objectType) {
+            Report.log({
+                pageSource: Report.pageSource.nftDepositTokenPage,
+                params: {
+                    eventData: {
+                        objectType,
+                        businessType: Report.businessType.buttonClick,
+                    },
+                    extParams: {
+                        userAgent: window.navigator.userAgent,
+                    }
+                }
+            })
         },
     }
 }

utils/help.js

@@ -84,21 +84,21 @@ export const getEnvConfig = () => {
 
 export function getBrowser() {
 	let browser;
-	let UserAgent = navigator.userAgent.toLowerCase();
-	if (UserAgent.indexOf('chrome') > -1 || UserAgent.indexOf('crios') > -1) {
-		browser = `Chrome`;
-	} else if (UserAgent.indexOf('firefox') > -1) {
-		browser = `Firefox`;
-	} else if (UserAgent.indexOf('opera') > -1) {
-		browser = `Opera`;
-	} else if (UserAgent.indexOf('safari') > -1 && UserAgent.indexOf('chrome') == -1) {
-		browser = `Safari`;
-	} else if (UserAgent.indexOf('edge') > -1) {
-		browser = `Edge`;
-	} else {
-		browser = `Other`;
-	}
-	return browser;
+    let UserAgent = navigator.userAgent.toLowerCase();
+    if (UserAgent.indexOf("chrome") > -1 && UserAgent.indexOf("safari") > -1) {
+        browser = `Chrome`;
+    } else if (UserAgent.indexOf("firefox") > -1) {
+        browser = `Firefox`;
+    } else if (UserAgent.indexOf("opera") > -1) {
+        browser = `Opera`;
+    } else if (UserAgent.indexOf("safari") > -1 && UserAgent.indexOf("chrome") == -1) {
+        browser = `Safari`;
+    } else if (UserAgent.indexOf("edge") > -1) {
+        browser = `Edge`;
+    } else {
+        browser = `Other`;
+    }
+    return browser;
 }
 
 export function formatSecondsAsTime(secs) {