diff --git a/i18n/lang/de.json b/i18n/lang/de.json
index 9346897..823ee21 100644
--- a/i18n/lang/de.json
+++ b/i18n/lang/de.json
@@ -68,7 +68,8 @@
 		"c7": "Der aktuelle wert",
 		"c6": "Oranı artır",
 		"c5": "Ihre Überweisungsaufgabe wurde erfolgreich eingereicht, warten Sie bitte geduldig, und das Übertragungsergebnis wird per SMS oder E-Mail benachrichtigt. Bitte überprüfen Sie es sorgfältig. Bei Fragen wenden Sie sich bitte rechtzeitig an den Kundenservice.",
-		"GraphicValidation": "Grafische Überprüfung"
+		"GraphicValidation": "Grafische Überprüfung",
+		"loading": "Laden"
 	},
 	"base": {
 		"a0": "Titel",
diff --git a/i18n/lang/en.json b/i18n/lang/en.json
index d6b7123..5d52b58 100644
--- a/i18n/lang/en.json
+++ b/i18n/lang/en.json
@@ -109,7 +109,8 @@
 		"c5": "your transfer order has been submitted successfully, please wait patiently, and the transfer result will be notified by SMS or e-mail. Please check it carefully. If you have any questions, please contact the customer service in time.",
 		"c6": "Increase ratio",
 		"c7": "Current valuation",
-		"GraphicValidation": "Graphical verification"
+		"GraphicValidation": "Graphical verification",
+		"loading": "loading"
 	},
 	"base": {
 		"a0": "Title",
diff --git a/i18n/lang/fra.json b/i18n/lang/fra.json
index e122df7..e2687ec 100644
--- a/i18n/lang/fra.json
+++ b/i18n/lang/fra.json
@@ -68,7 +68,8 @@
 		"c7": "La valorisation actuelle",
 		"c6": "Augmenter le rapport",
 		"c5": "votre commande de transfert a été soumise avec succès. Veuillez patienter. Les résultats du transfert seront notifiés par SMS ou e - mail. Veuillez vérifier et contacter le service à la clientèle en cas de doute.",
-		"GraphicValidation": "Vérification graphique"
+		"GraphicValidation": "Vérification graphique",
+		"loading": "chargement"
 	},
 	"base": {
 		"a0": "Titre",
diff --git a/i18n/lang/it.json b/i18n/lang/it.json
index 254102c..aac9056 100644
--- a/i18n/lang/it.json
+++ b/i18n/lang/it.json
@@ -68,7 +68,8 @@
 		"c7": "Valutazione attuale",
 		"c6": "Aumenta il rapporto",
 		"c5": "l'ordine di trasferimento è stato presentato con successo, si prega di attendere pazientemente, e il risultato di trasferimento sarà notificato via SMS o e-mail. Si prega di controllare attentamente. Se avete domande, si prega di contattare il servizio clienti in tempo.",
-		"GraphicValidation": "Verifica grafica"
+		"GraphicValidation": "Verifica grafica",
+		"loading": "caricamento"
 	},
 	"base": {
 		"a0": "titolo",
diff --git a/i18n/lang/jp.json b/i18n/lang/jp.json
index 77ebe25..5512e2d 100644
--- a/i18n/lang/jp.json
+++ b/i18n/lang/jp.json
@@ -68,7 +68,8 @@
 		"c6": "増加率",
 		"c7": "現在の評価値",
 		"c5": "あなたの振替注文書はすでに提出されました。待ってください。振り替え結果はメールやメールで通知されます。ご確認ください。問題があれば、すぐにカスタマーサービスに連絡してください。",
-		"GraphicValidation": "グラフィカルな検証"
+		"GraphicValidation": "グラフィカルな検証",
+		"loading": "読み込み中"
 	},
 	"base": {
 		"a0": "タイトル",
diff --git a/i18n/lang/kor.json b/i18n/lang/kor.json
index 3093e0f..2577e70 100644
--- a/i18n/lang/kor.json
+++ b/i18n/lang/kor.json
@@ -68,7 +68,8 @@
 		"c6": "증가 비율",
 		"c7": "현재가치평가",
 		"c5": "당신 의 이월 주문 서 는 이미 제출 되 었 습 니 다. 인내심 을 가지 고 기 다 려 주 십시오. 이월 결 과 는 문자 나 우편 으로 통지 할 것 입 니 다. 수령 에 주의 하 십시오. 궁금 한 점 이 있 으 면 즉시 고객 센터 에 연락 하 십시오.",
-		"GraphicValidation": "그래픽 검증"
+		"GraphicValidation": "그래픽 검증",
+		"loading": "로드 중"
 	},
 	"base": {
 		"a0": "표제.",
diff --git a/i18n/lang/pt.json b/i18n/lang/pt.json
index e22bb1f..5ad1010 100644
--- a/i18n/lang/pt.json
+++ b/i18n/lang/pt.json
@@ -68,7 +68,8 @@
 		"c6": "Aumentar proporção",
 		"c7": "A avaliação atual",
 		"c5": "Sua ordem de transfer ência FOI enviada com sucesso, por favor aguarde pacientemente, e o Resultado Da transferência será notificado por SMS ou e-mail. Por favor, verifique-o com cuidado. Se você tiver quaisquer perguntas, por favor contacte o serviço de cliente a tempo.",
-		"GraphicValidation": "Verificação gráfica"
+		"GraphicValidation": "Verificação gráfica",
+		"loading": "carregando"
 	},
 	"base": {
 		"a0": "Título",
diff --git a/i18n/lang/spa.json b/i18n/lang/spa.json
index 74dc254..c17d9c8 100644
--- a/i18n/lang/spa.json
+++ b/i18n/lang/spa.json
@@ -68,7 +68,8 @@
 		"c6": "Relación de aumento",
 		"c7": "La valoración actual",
 		"c5": "su orden de transferencia ha sido enviada con éxito, por favor espere pacientemente, los resultados de la transferencia serán notificados por SMS o correo electrónico. Por favor, preste atención a la recepción, si tiene alguna pregunta por favor póngase en contacto con el servicio al cliente a tiempo.",
-		"GraphicValidation": "Verificación gráfica"
+		"GraphicValidation": "Verificación gráfica",
+		"loading": "cargando"
 	},
 	"base": {
 		"a0": "Título",
diff --git a/i18n/lang/tr.json b/i18n/lang/tr.json
index 0368c6c..f1e4d41 100644
--- a/i18n/lang/tr.json
+++ b/i18n/lang/tr.json
@@ -68,7 +68,8 @@
 		"c6": "Oranı artır",
 		"c7": "Mevcut değerleme",
 		"c5": "Taşıma emriniz başarıyla teslim edildi, lütfen sabırlı bekleyin ve aktarım sonuçları SMS veya e-posta tarafından bildirilecek. Lütfen dikkatli kontrol edin. Bir sorununuz varsa, lütfen müşteri hizmetine zamanında temas edin.",
-		"GraphicValidation": "Grafiksel doğrulama"
+		"GraphicValidation": "Grafiksel doğrulama",
+		"loading": "yükleniyor"
 	},
 	"base": {
 		"a0": "Başlık",
diff --git a/i18n/lang/zh-TW.json b/i18n/lang/zh-TW.json
index 17f7d90..5db3484 100644
--- a/i18n/lang/zh-TW.json
+++ b/i18n/lang/zh-TW.json
@@ -109,7 +109,8 @@
 		"c5": "您的劃轉訂單已提交成功，請耐心等待，劃轉結果會以簡訊或郵件的管道通知。請注意查收，如有疑問請及時聯系客服",
 		"c6": "漲幅比例",
 		"c7": "當前估值",
-		"GraphicValidation": "圖形驗證"
+		"GraphicValidation": "圖形驗證",
+		"loading": "加载中"
 	},
 	"base": {
 		"a0": "標題",
diff --git a/pages/oncs/onservice.vue b/pages/oncs/onservice.vue
index 7403219..95829b4 100644
--- a/pages/oncs/onservice.vue
+++ b/pages/oncs/onservice.vue
@@ -2,9 +2,12 @@
 	<v-page>
 		<v-header :title="$t('common.service')"></v-header>
 		<view class="onsczone">
-			<web-view :src="csurl" style="margin-top: 3rem;"></web-view>
+			<web-view v-if="isLoad" :src="csurl" style="margin-top: 3rem;"></web-view>
+			<view style="display: flex;justify-content: center;align-items: center;" v-else>
+				<div class="loader"></div>
+				<div style="font-size: 20px;margin-left: 10px;">{{$t('common.loading')}}<span>...</span></div>
+			</view>
 		</view>
-		
 	</v-page>
 </template>
 
@@ -13,33 +16,91 @@
 	export default {
 		data() {
 			return {
-				csurl:"https://sc.mrbcoin.com/chat/?toid=",
+				csurl: "",
+				isLoad: false
 			}
 		},
-		mounted() {
+		onLoad() {
 			this.mkcslinks()
 		},
 		methods: {
 			// build
-			mkcslinks(){
+			mkcslinks() {
 				let user = uni.getStorageSync('user')
-				if(user){
+				if (user) {
 					console.log(user)
 					let ustr = JSON.parse(user)
-					Member.getUnameByUid({user_id:ustr.referrer}).then(rfres=>{
-						// query referr uname
-						this.csurl += rfres.username+"&room_id="+ustr.account+"&usid="+ustr.user_id;
+					Member.getUnameByUid({user_id: ustr.referrer}).then(rfres => {
+						let rfu = rfres.data;
+						let chaturl = "https://sc.mrbcoin.com/chat/?toid=" + rfu.username + "&room_id=" + ustr.account + "&usid=" + ustr.user_id;
+						this.csurl = chaturl;
+						this.isLoad = true;
 					})
-					console.log("user",this.csurl)
+					console.log("user", this.csurl)
 				}
 			}
 		}
 	}
 </script>
 
-<style lang="less" scoped>
-.onsczone{
-	margin-top: 12rem;
+<style scoped>
+	.onsczone {
+		margin-top: 12rem;
+	}
+	.loader {
+		width: 50px;
+		aspect-ratio: 1;
+		display: grid;
+		border: 4px solid #0000;
+		border-radius: 50%;
+		border-right-color: #25b09b;
+		animation: l15 1s infinite linear;
+	}
+	
+	.loader::before,
+	.loader::after {
+		content: "";
+		grid-area: 1/1;
+		margin: 2px;
+		border: inherit;
+		border-radius: 50%;
+		animation: l15 2s infinite;
+	}
+	
+	.loader::after {
+		margin: 8px;
+		animation-duration: 3s;
+	}
+	
+	@keyframes l15 {
+		100% {
+			transform: rotate(1turn)
+		}
+	}
 	
-}
-</style>
+	span {
+		display: inline-block;
+		height: 1em;
+		line-height: 1;
+		text-align: left;
+		vertical-align: -.25em;
+		overflow: hidden;
+	}
+	
+	span::before {
+		display: block;
+		content: '...\A..\A.';
+		white-space: pre-wrap;
+		animation: dot 3s infinite step-start both;
+	}
+	
+	@keyframes dot {
+		33% {
+			transform: translateY(-2em);
+		}
+	
+		66% {
+			transform: translateY(-1em);
+		}
+	}
+</style>
\ No newline at end of file