111

Web/src/assets/css/style.css

@@ -96,4 +96,60 @@ a:focus {
 .common img {
     margin-right: 2px;
     vertical-align: middle;
+}
+
+.input {
+    line-height: 30px;
+}
+
+.ipt {
+    width: 60%;
+    display: block;
+    padding: 6px 12px;
+    font-size: 14px;
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
+    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+}
+
+.btn {
+    display: inline-block;
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: middle;
+    -ms-touch-action: manipulation;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+}
+
+.btn-danger {
+    color: #fff;
+    background-color: #d9534f;
+    border-color: #d43f3a;
+}
+
+.btn-waring {
+    color: #fff;
+    background-color: #FE5E08;
+    border-color: #FE5E08;
+}
+
+.btn-ret {
+    border-color: #d2d2d2;
+    background: 0 0;
+    color: #666;
 }

Web/src/composables/ApiService.ts

@@ -11,7 +11,10 @@ export type HandledRedirectError = {
 
 export class ApiService {
     private static initialized = false;
-
+    
+    private static get userStore() {
+        return useUserStore()
+    }
     private static request = new RequestExtend({
         baseURL: BaseConfig.BaseUrl,
         timeout: 60000
@@ -43,7 +46,7 @@ export class ApiService {
 
         RequestExtend.addRequestInterceptor({
             onFulfilled: (config) => {
-                const token = typeof localStorage !== "undefined" ? localStorage.getItem("token") : "";
+                const token = this.userStore.token;
 
                 if (token) {
                     config.headers = {

Web/src/extends/MessageExtend.ts

@@ -11,6 +11,19 @@ export class MessageExtend {
     });
   }
 
+  static LoadingToast(message?: string) {
+    showLoadingToast({
+      message: message || '加载中',
+      forbidClick: true,
+      loadingType: 'spinner',
+      duration: 0
+    });
+  }
+
+  static LoadingClose() {
+    closeToast();
+  }
+
   //  提示弹窗
   static ShowDialog(title: string, message: string) {
     showDialog({ title: title, message: message })

Web/src/pages/area/my.vue

@@ -1 +1,64 @@
-<template></template>
+<template>
+
+    <div class="common">
+        <div class="title">
+            =====☆我的区服☆=====
+        </div>
+        <div class="content">
+            <div class="item" v-for="(item, index) in userData" :key="index">
+                ✧<a @click="loginGame(item.userId)">【{{ item.areaId }}区】{{ item.nick }}({{ (item.sex == null || item.sex == '') ?
+            "未知" : item.sex }})</a>
+            </div>
+             <span v-if="userData.length == 0">暂无角色.</span>
+        </div>
+    </div>
+
+    <Abar href="/">返回游戏首页</Abar>
+</template>
+<script setup lang="ts">
+
+definePageMeta({
+    layout: layout.empty,
+    middleware: 'page-loading'
+})
+let userData = ref<Array<any>>([]);
+
+const BindData = async (): Promise<void> => {    
+    var result = await PubService.GetMyGame(StateHelper.Sid);    
+    if (result.code == 0) {
+        userData.value = result.data;
+    }
+    else {
+        MessageExtend.ShowDialogEvent("提示", result.msg, () => {
+            PageExtend.Redirect("/");
+        }, "我知道了");
+    }
+};
+
+const loginGame = async (gameId: string): Promise<void> => {
+  let result = await LoginService.LoginGame(StateHelper.Sid, gameId);
+  if (result.code == 0) {
+    StateHelper.SetToken(result.data.userId, result.data.token, result.data.refToken);
+    if (result.data.regOk == 0) {
+      PageExtend.Redirect("/login/register");
+    }
+    else {
+      PageExtend.Redirect("/map");
+    }
+  }
+  else {
+    MessageExtend.ShowDialog("登录游戏", result.msg);
+  }
+};
+
+onMounted(async () => {
+    try {
+        await BindData();
+    }
+    finally {
+        PageLoading.Close();
+    }
+})
+
+
+</script>

Web/src/pages/index.vue

@@ -31,7 +31,8 @@
       </div>
       <div class="content">
         <div class="item" v-for="(item, index) in userData" :key="index">
-          <a @click="loginGame(item.userId)">【{{ item.areaId }}区】{{ item.nick }}({{ (item.sex == null||item.sex=='') ? "未知" : item.sex }})</a>
+          <a @click="loginGame(item.userId)">【{{ item.areaId }}区】{{ item.nick }}({{ (item.sex == null || item.sex == '') ?
+            "未知" : item.sex }})</a>
         </div>
       </div>
     </div>
@@ -125,8 +126,7 @@ const Initialize = async (): Promise<void> => {
 
 /**自动登录 */
 const login = async (code: string): Promise<void> => {
-  let result = await LoginService.TwLogin(code);
-  console.log(result);
+  let result = await LoginService.TwLogin(code);  
   if (result.code == 0) {
     StateHelper.SetSid(result.data.token);
     await Initialize();
@@ -142,7 +142,7 @@ const offOnline = async () => {
     let result = await PubService.GetMain(StateHelper.Sid);
     if (result.code == 0) {
       StateHelper.OffOnline();
-      isOnline.value = false;
+      await Initialize();
       MessageExtend.ShowToast("退出成功!", "success");
     }
     else {
@@ -153,7 +153,19 @@ const offOnline = async () => {
 
 /**登录到游戏 */
 const loginGame = async (gameId: string): Promise<void> => {
-  alert(gameId)
+  let result = await LoginService.LoginGame(StateHelper.Sid, gameId);
+  if (result.code == 0) {
+    StateHelper.SetToken(result.data.userId, result.data.token, result.data.refToken);
+    if (result.data.regOk == 0) {
+      PageExtend.Redirect("/login/register");
+    }
+    else {
+      PageExtend.Redirect("/map");
+    }
+  }
+  else {
+    MessageExtend.ShowDialog("注册角色", result.msg);
+  }
 };
 
 /**注册游戏 */

Web/src/pages/login/register.vue

@@ -1 +1,58 @@
-<template></template>
+<template>
+    <div class="content">
+        <img src="/images/logo.png" class="logo" />
+    </div>
+    <div class="content">
+        <div class="common">
+            <div class="input">
+                昵称:<input name="nick" placeholder="输入昵称(1-12个长度字符)" maxlength="12" class="ipt" type="text"
+                    v-model="nick" />
+            </div>
+            <div class="input">
+                性别:<select name="sex" class="ipt" v-model="sex">
+                    <option value="0">女</option>
+                    <option value="1">男</option>
+                </select>
+            </div>
+            <div class="input">
+                <input type="button"" class=" btn btn-danger" value="注册角色" @click="SubRegInfo" />.
+                <Abar href="/">返回首页</Abar>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    layout: layout.empty,
+    middleware: middleware.loading
+})
+
+const nick = ref('');
+const sex = ref(0);
+
+const SubRegInfo = async (): Promise<void> => {
+    if (nick.value == null || nick.value == '') {
+        MessageExtend.ShowToast("昵称不能为空!", "default");
+        return;
+    }
+    MessageExtend.LoadingToast("注册中...");
+    let result = await LoginService.RegisterInfo(nick.value, sex.value);
+    MessageExtend.LoadingClose();
+    if (result.code == 0) { 
+        PageExtend.Redirect("/map");
+    }
+    else {
+        MessageExtend.ShowDialog("注册角色", result.msg);
+    }
+}
+
+
+onMounted(async () => {
+    try {
+
+    }
+    finally {
+        PageLoading.Close();
+    }
+})
+</script>

Web/src/services/Index/PubService.ts

@@ -22,4 +22,12 @@ export class PubService {
     static async GetNoticeInfo(id: string) {
         return await ApiService.Request("get", "/Pub/GetNoticeInfo", { id });
     }
+
+    /**
+     * 获取用户游戏角色
+     * GET /Pub/GetMyGame
+     */
+    static async GetMyGame(sid: string) {
+        return await ApiService.Request("get", "/Pub/GetMyGame", { sid });
+    }
 }

Web/src/services/login/LoginService.ts

@@ -29,9 +29,27 @@ export class LoginService {
 
     /**
      * 注册基础账号信息
-     * GET /Login/Regist
+     * GET /Login/Register
      */
     static async Register(sid: string, area: number) {
         return await ApiService.Request("get", "/Login/Register", { sid, area });
     }
+
+    /**
+     * 登录到游戏
+     * GET /Login/LoginGame
+     */
+    static async LoginGame(sid: string, user: string) {
+        return await ApiService.Request("get", "/Login/LoginGame", { sid, user });
+    }
+
+    /**
+     * 注册角色信息
+     * POST /Login/RegisterInfo
+     * @param nick body
+     * @param sex body
+     */
+    static async RegisterInfo(nick: string, sex: number) {
+        return await ApiService.Request("post", "/Login/RegisterInfo", { nick, sex });
+    }
 }