theme: fancy

本文已參與「新人創作禮」活動，一起開啟掘金創作之路。

先說下原委：因為公司人員受限，一個前端對應了六個後端，迫不得已結合後端整理了一套配置多個公眾號的程式碼。

需求：

1：從總賽區登入的可以訪問每一個賽區（公眾號），其他賽區只能訪問本賽區
2:判斷使用者所在的賽區，找到了某個賽區直接進入，並且標記 
3:分賽區的的選手如果在不同的賽區賬戶有資金的都要在總賽區進行顯示 
4:登入進去，預設進入一級頁面，在一級頁面跳入二級頁面時是進入對應賽區的頁面的公眾號。 
5：一套程式碼配置不同的賽區。

如果是你接到這個需求你會怎麼處理呢？有一說一，開始拿到這個需求的時候我是很不樂意的，本來就忙的不可開交，還要額外加一些稀奇古怪耗時費力的需求，但是沒辦法，人在屋簷下不得不低頭，接了！

解決方案 - 驗證碼登入輪詢 >使用者輸入手機號進行輪詢手機號是否存在，存在方可以下一步。

```ts

env

測試環境（# 開發環境同理）

VUE_APP_SERVERS=[ {"name":"總賽區-out","url":"http://out.All.cn","money":0}, {"name":"A賽區-out","url":"http:////out.A.cn","money":0}, {"name":"B賽區-out","url":"http:////out.B.cn","money":0}, {"name":"C賽區-out","url":"http:////out.C.cn","money":0}, {"name":"D賽區-out","url":"http:////out.D.cn","money":0} ] ```

js // 資料 data(){ servers: JSON.parse(process.env.VUE_APP_SERVERS), isExist：false, index:0 } js // 方法 onChange () { if (this.mobilePhone) { this.doPhone() } }, doPhone () { this.$nextTick(function () { this.index = 0 this.isExist = false let length = this.servers.length for (var i = 0; i < length; i++) { this.requestPhone(this.servers[i], this.doTimes) } }) }, doTimes () { this.index++ if (this.servers.length === this.index) { if (!this.isExist) { this.showTip('選手不存在!') this.isCodeSending = true } else { this.isCodeSending = false } } }, //判斷手機號是否註冊 requestPhone (server, callback) { const vm = this vm.$axios .get( server.url + `/mobileExists/${vm.mobilePhone}` ) .then(function (response) { if (response.data.code === '200') { if (response.data.obj) { vm.isExist = true setLocalStorageItem('server', JSON.stringify(server)) } } callback() }) }

登入跳一級頁面

js Login () { const vm = this const params = { mobilePhone: vm.mobilePhone, smsCode: vm.smsCode } vm.loading = true vm.$axios .post(vm.useUrl + '/login', params) .then(function (response) { const { obj: loginInfo, code, msg } = response.data const token = loginInfo.newToken localStorage.setItem('newToken', token) vm.$router.push('pageIndex1') vm.loading = false }) }

重新整理token跳二級頁面（即對應的公眾號） ```html
{{ server.name }}總獎金
{{ server.money }}

js
clickReceive (url) {
const vm = this
vm.$axios
.get(url + '/getLoginToken', {
headers: { newToken: localStorage.getItem('newToken') }
})
.then(response => {
const token = response.data.obj.token
vm.login({ token });
localStorage.setItem('token',token)
window.location.href =
url + `/#/pageIndex2?serverUrl=${serverUrl}&token=${token}`
})
}

- 二級頁面退回一級頁面

js
goBack () {
const vm = this
window.location.href = decodeURIComponent(
getLocalStorageItem('serverUrl')
)
}

一個前端對應了六個後端寫的公眾號程式碼

theme: fancy

env

測試環境（# 開發環境同理）