https://www.ninthart.cc/static/js/faq.js

1const { createApp } = Vue
2createApp({
3    created(){
4        this.deleteMyAccount()
5        this.faqId = this.getQueryVariable("faqId")
6        this.initLang()
7    },
8    data() {
9        return {
10            isDelete:false,
11            isSearch:false,
12            langKey: '',
13            langName: '',
14            searchTitle: {
15                "ARB":"عنوان البحث",
16                "EN":"Search Title",
17                "HK":"搜尋標題",
18                "FR":"Titre de la recherche",
19                "DE":"Titel suchen",
20                "IT":"Titolo della ricerca",
21                "PT":"Título da pesquisa",
22                "ES":"Buscar título",
23                "TH":"ค้นหาชื่อ",
24            },
25            searchList:[],
26            recommendTitle: {
27                "ARB":"مقالات ذات صلة",
28                "EN":"Related articles",
29                "HK":"相關文章",
30                "FR":"Articles liés",
31                "DE":"Verwandte Artikel",
32                "IT":"Articoli Correlati",
33                "PT":"Artigos relacionados",
34                "ES":"Artículos relacionados",
35                "TH":"บทความที่เกี่ยวข้อง",
36            },
37            lang:[
38                {label:"اللغة العربية", value:"ARB"},
39                {label:"English", value:"EN"},
40                {label:"中文繁體", value:"HK"},
41                {label:"Français", value:"FR"},
42                {label:"Deutsch", value:"DE"},
43                {label:"Italiano", value:"IT"},
44                {label:"Português", value:"PT"},
45                {label:"Español", value:"ES"},
46                {label:"แบบไทย", value:"TH"},
47            ],
48            faqId:"",
49            title : "",
50            content : "",
51            cateName:"",
52            langArr:[],
53            recommend:[],
54            faqIdArr:[],
55        }
56    },
57    methods:{
58        deleteMyAccount(){
59            let t = this.getQueryVariable("t")
60            if (t > 0) {
61                this.isDelete = true
62            }
63        },
64        initLang(){
65            this.getFaqid()
66            this.getLangConfig(this.langKey)
67            const _this = this
68            setTimeout(function (){
69                _this.initHtml()
70            },1000)
71            this.langKey = this.getCookie("lang")
72            this.langName = this.getLangName()
73        },
74        setLang(item){
75            this.langName = item.label
76            this.langKey = item.value
77            this.setCookie("lang", item.value)
78            this.initLang()
79            window.location.reload();
80        },
81        initHtml(){
82            for (const i in this.langArr) {
83                const content = this.langArr[i]
84                if (i == this.faqId) {
85                    this.title = content.title
86                    this.content = content.content
87                    this.cateName = content.cate_title
88                }
89                this.faqIdArr.push(content.faq_id)
90            }
91            this.recommendContent()
92        },
93        recommendContent(){
94            this.recommend = []
95            const faqIdArr = this.shuffleArray(this.faqIdArr)
96            for (const k in faqIdArr) {
97                const faqId = faqIdArr[k]
98                if (faqId != this.faqId) {
99                    if ( this.recommend.length >7) {
100                        break
101                    }
102
103                    for (const i in this.langArr) {
104                        if (faqId == i) {
105                            const content = this.langArr[i]
106                            this.recommend.push({
107                                title:content.title,
108                                cateTitle:content.cate_title,
109                                faqId:content.faq_id
110                            })
111                        }
112                    }
113                }
114            }
115
116        },
117        readContent(faqId){
118            for (const i in this.langArr) {
119                if (i == faqId) {
120                    const content = this.langArr[i]
121                    this.title = content.title
122                    this.content = content.content
123                    this.cateName = content.cate_title
124                    this.faqId = content.faq_id
125                    this.setCookie("faqId",content.faq_id)
126                }
127            }
128            this.isSearch = false
129            this.recommendContent()
130        },
131        getFaqid(){
132            let faqId = this.faqId
133            if (!faqId) {
134                faqId = this.getCookie("faqId")
135            }
136
137            if (!faqId) {
138                faqId = "356"
139            }
140            this.faqId = faqId
141        },

142        setCookie(cname,value) {
143            window.document.cookie = `${cname}=${value};`
144        },
145        getCookie(cname) {
146            var name = cname + "=";
147            var ca = window.document.cookie.split(';');
148            for(var i=0; i<ca.length; i++)
149            {
150                var c = ca[i].trim();
151                if (c.indexOf(name)==0) return c.substring(name.length,c.length);
152            }
153            return "";
154        },
155        getLangName(){
156            for (const i in this.lang) {
157                const lang = this.lang[i]
158                if (this.langKey == lang.value) {
159                    return lang.label
160                }
161            }
162            return "English"
163        },
164        getLangConfig(name){
165            if (!name) {
166                const lang = this.getCookie("lang")
167                if (!lang) {
168                    this.setCookie("lang", "EN")
169                    name = "EN"
170                } else {
171                    name = lang
172                }
173            }
174            const jsonName = `https://www.ninthart.cc/${name}.json`
175            axios({
176                method: 'get',
177                url: jsonName,
178                data: {},
179                header:{}
180            }).then(res=>{
181                this.langArr = res.data
182            })
183        },
184        searchContent(e){
185            const keyword = e.target.value.trim()
186            this.searchList = []
187            this.isSearch = false
188            if (keyword) {
189                for (const i in this.langArr) {
190                    const content = this.langArr[i]
191                    if (content.key_word.indexOf(keyword) >= 0) {
192                        this.searchList.push({
193                            title:content.title,
194                            cateTitle:content.cate_title,
195                            faqId:content.faq_id
196                        })
197                    }
198                }
199
200                console.log(this.searchList)
201
202                if (this.searchList.length > 0) {
203                    this.isSearch = true
204                }
205
206            }
207        },
208        shuffleArray(array){
209            array.sort(() => Math.random() - 0.5);
210            return array;
211        },
212        getQueryVariable(variable)
213        {
214            var query = window.location.search.substring(1);
215            var vars = query.split("&");
216            for (var i=0;i<vars.length;i++) {
217                var pair = vars[i].split("=");
218                if(pair[0] == variable){return pair[1];}
219            }
220            return(false);
221        }
222    }
223}).mount('#app')
224
225