12121

Web/src/assets/css/style.css

@@ -21,9 +21,6 @@ body {
 
 .main {}
 
-div {
-    margin: 5px 2px;
-}
 
 div img {
     margin-right: 2px;
@@ -38,13 +35,21 @@ div img {
     max-height: 120px;
 }
 
-.head {}
+.head {
+    margin: 5px 2px;
+}
 
-.title {}
+.title {
+    margin: 5px 2px;
+}
 
-.content {}
+.content {
+    margin: 5px 2px;
+}
 
-.item {}
+.item {
+    margin: 5px 2px;
+}
 
 .border {
     border-bottom: 1px dashed #9f8d8d;
@@ -54,7 +59,9 @@ div img {
     height: 5px;
 }
 
-.foot {}
+.foot {
+    margin: 5px 2px;
+}
 
 a {
     color: #1e5494;
@@ -91,7 +98,9 @@ a:focus {
     color: red;
 }
 
-.common {}
+.common {
+    margin: 5px 2px;
+}
 
 .common img {
     margin-right: 2px;

Web/src/pages/map/index.vue

@@ -31,7 +31,7 @@
     <div class="content" v-if="mapRes.length > 0">
         特产:<br>
         <div class="item" v-for="item in mapRes">
-            <Abutton>{{item.resName}}</Abutton>            
+            <Abutton @click="showResProp(item)">{{ item.resName }}({{ item.lev }}级)</Abutton>
         </div>
     </div>
 
@@ -89,6 +89,20 @@
 
         </div>
     </GamePopup>
+    <GamePopup v-model:show="showRes" title="【采集】" style="width: 60%;">
+        <!-- 自定义内容 -->
+        <div class="content">
+            物品名称：{{ showResData.resName }}<br>
+            采集要求：{{ showResData.lev }}级采集术<br>
+            消耗活力：{{ showResData.needVigour }}<br>
+            冷却时间：{{ showResData.gather }}秒<br>
+        </div>
+        <div class="content" style="max-height: 300px;text-align: center; margin-top: 15px;;">
+            <van-button type="success" :disabled="resLockDiff > 0 ? true : false" @click="CollectRes">
+                {{ resLockDiff > 0 ? `${resLockDiff}秒后可采集` : "立即采集" }}
+            </van-button>
+        </div>
+    </GamePopup>
 </template>
 <script setup lang="ts">
 definePageMeta({
@@ -132,8 +146,6 @@ const BindData = async (map: string): Promise<void> => {
         mapRes.value = result.data.mapRes;
         MapVent(result.data.mapInfo.near);
         onMap.value = mapInfo.value.mapId;
-        console.log(result.data);
-
     }
     else if (result.code == 103) {
         PageExtend.Redirect("/map/runing");
@@ -235,4 +247,46 @@ const StartToMap = () => {
 }
 
 
+/**采集相关 */
+const showRes = ref(false);
+const showResData = ref<any>({});
+const resLockDiff = ref(0);
+const reslockTimer = ref(0) // 定时器实例
+const showResProp = async (data: any) => {
+    showRes.value = true;
+    showResData.value = data;
+    resLockDiff.value = data.lockTime;
+    if (resLockDiff.value > 0) {
+        reslockTimer.value = setInterval(async () => {
+            resLockRun();
+        }, 1000)
+    }
+}
+const resLockRun = () => {
+    if (resLockDiff.value > 0) {
+        resLockDiff.value = resLockDiff.value - 1;
+    }
+    else {
+        clearInterval(reslockTimer.value);
+    }
+}
+
+const CollectRes = async () => {
+    MessageExtend.LoadingToast("采集中...");
+    let result = await MapService.CollectMapRes(showResData.value.resId);
+    MessageExtend.LoadingClose();
+    if (result.code == 0) {
+        resLockDiff.value = result.data;
+        MessageExtend.ShowToast(result.msg);
+        clearInterval(reslockTimer.value);
+        reslockTimer.value = setInterval(async () => {
+            resLockRun();
+        }, 1000)
+    }
+    else {
+        MessageExtend.ShowDialog("提示", result.msg);
+    }
+
+}
+
 </script>

Web/src/pages/user/skill/index.vue

@@ -1 +1,49 @@
-<template></template>
+<template>
+    <div class="content">【我的技能】</div>
+    <div class="content">
+    <div class="item" v-for="(item,index) in data" :key="index">
+        {{index+1}}.<Abutton @click="showView(item)">{{item.name}}({{item.lev}}级)</Abutton>
+    </div>
+        <span v-if="data.length==0">暂无技能.</span>
+    </div>
+    <GamePopup v-model:show="showInfo" title="【技能说明】" style="width: 50%;">
+        <!-- 自定义内容 -->
+        <div class="content" v-html="onShow.remark">
+        </div>
+    </GamePopup>
+</template>
+<script setup lang="ts">
+definePageMeta({
+    layout: layout.default,
+    middleware: middleware.loading
+})
+
+const data = ref<Array<any>>([]);
+const showInfo = ref(false);
+const onShow = ref<any>({});
+
+onMounted(async () => {
+    try {
+        await BindData();
+    }
+    finally {
+        PageLoading.Close();
+    }
+})
+
+const BindData = async () => {
+    let result = await UserService.GetUserSkill();
+    if (result.code == 0) {
+        data.value = result.data;        
+    }
+    else {
+        MessageExtend.ShowDialog("技能", result.msg);
+    }
+}
+
+const showView = (data: any) => {
+    showInfo.value = true;
+    onShow.value = data;
+}
+
+</script>

Web/src/services/map/MapService.ts

@@ -86,4 +86,12 @@ export class MapService {
     static async GetNpcInfo(npcId: number) {
         return await ApiService.Request("get", "/Map/Map/GetNpcInfo", { npcId });
     }
+
+    /**
+     * 采集接口
+     * GET /Map/Map/CollectMapRes
+     */
+    static async CollectMapRes(resId: string) {
+        return await ApiService.Request("get", "/Map/Map/CollectMapRes", { resId });
+    }
 }

Web/src/services/user/UserService.ts

@@ -57,4 +57,12 @@ export class UserService {
     static async UpdateUserSign(sign: string) {
         return await ApiService.Request("post", "/User/User/UpdateUserSign", { sign });
     }
+
+     /**
+     * 获取用户技能
+     * GET /User/User/GetUserSkill
+     */
+    static async GetUserSkill() {
+        return await ApiService.Request("get", "/User/User/GetUserSkill");
+    }
 }