我的页面 50%

.env

+VUE_APP_BANK_CODE=105
\ No newline at end of file

src/components/Mine/Branch/branch.vue

 <template>
   <div class="outer bg-white pt-4 rounded-2xl">
-    <div class=" px-5 relative">
+    <div class="px-5 relative">
       <!-- 网点位置 -->
-      <div class=" pb-2 ">
-          <div class=" mb-2">
-            <img src="../../../assets/img/bank_logo.png" class=" w-6 h-6 inline-block m-auto align-text-bottom">
-            <span class="ml-2 text-gray-800 font-semibold text-base">杭州文辉支行</span>
-            <!-- 切换网点 -->
-            <div v-if="changeable" class=" switch absolute -right-2 -top-2">
-              <img src="../../../assets/icons/location.png" class="location w-3 absolute top-2 left-3 inline-block ">
-              <span class=" z-10 text-white inline-block text-xs absolute top-2 right-1">切换网点</span>
-              <img src="../../../assets/img/badge.png" class=" w-20 h-10 ">
-            </div>
-            <p v-else class=" bg-branch-bg text-branch-font text-sm px-2 rounded inline-block align-middle float-right">网点</p>
+      <div class="pb-2">
+        <div class="mb-2">
+          <img
+            src="../../../assets/img/bank_logo.png"
+            class="w-6 h-6 inline-block m-auto align-text-bottom"
+          />
+          <span class="ml-2 text-gray-800 font-semibold text-base">{{ name }}</span>
+          <!-- 切换网点 -->
+          <div v-if="changeable" class="switch absolute -right-2 -top-2">
+            <img
+              src="../../../assets/icons/location.png"
+              class="location w-3 absolute top-2 left-3 inline-block"
+            />
+            <span class="z-10 text-white inline-block text-xs absolute top-2 right-1">切换网点</span>
+            <img src="../../../assets/img/badge.png" class="w-20 h-10" />
           </div>
-          <span class=" text-gray-400 text-sm mt-2">浙江省杭州市文三路49号</span>
-          <span class=" text-gray-400 text-sm float-right">1.16KM</span>
+          <p
+            v-else
+            class="bg-branch-bg text-branch-font text-sm px-2 rounded inline-block align-middle float-right"
+          >网点</p>
+        </div>
+        <span class="text-gray-400 text-sm mt-2">{{ location }}</span>
+        <span class="text-gray-400 text-sm float-right">{{ distance }}</span>
       </div>
-      <div class=" border border-gray-100"></div>
+      <div class="border border-gray-100"></div>
       <!-- 营业时间 -->
-      <div class=" mt-2 pb-3">
-        <icon
-          name="icon-yingye"
-          color="#1B1F37"
-          size="14"
-          class=" inline-block align-middle mr-3"
-        />
-        <span v-if="isOpen" class=" text-app-blue border border-app-blue bg-indigo-100 text-sm px-2 rounded">营业中</span>
-        <span v-else class=" text-app-blue border border-app-blue bg-indigo-100 text-sm px-2 rounded">休息中</span>
-        <div class=" text-right h-3">
-          <icon
-            name="icon-ditu"
-            color="#3E4FAF"
-            size="14"
-            class="inline-block align-top"
-          />
+      <div class="mt-2 pb-3">
+        <icon name="icon-yingye" color="#1B1F37" size="14" class="inline-block align-middle mr-3" />
+        <span
+          v-if="isOpen"
+          class="text-app-blue border border-app-blue bg-indigo-100 text-sm px-2 rounded"
+        >营业中</span>
+        <span
+          v-else
+          class="text-app-blue border border-app-blue bg-indigo-100 text-sm px-2 rounded"
+        >休息中</span>
+        <div class="text-right h-3">
+          <icon name="icon-ditu" color="#3E4FAF" size="14" class="inline-block align-top" />
         </div>
         <icon
           name="icon-a-shijian"
           color="#1B1F37"
           size="14"
-          class=" inline-block align-text-top mr-3"
+          class="inline-block align-text-top mr-3"
         />
-        <span class=" text-gray-400 text-sm inline-block align-top">周一至周五 丨 08:30-17:00 </span>
+        <span class="text-gray-400 text-sm inline-block align-top">周一至周五 丨 08:30-17:00</span>
       </div>
     </div>
     <!-- 底部操作 -->
-    <div class=" flex text-center py-3 text-gray-800 bg-gray-50 rounded-b-2xl">
-      <p class=" w-1/2 border-r border-gray-300">联系客服</p>
-      <p class=" w-1/2" :class="isOpen? 'text-app-blue':'text-gray-800'" @click="toCall">电话咨询</p>
+    <div class="flex text-center py-3 text-gray-800 bg-gray-50 rounded-b-2xl">
+      <p class="w-1/2 border-r border-gray-300">联系客服</p>
+      <p class="w-1/2" :class="isOpen ? 'text-app-blue' : 'text-gray-800'" @click="toCall">电话咨询</p>
     </div>
-     <van-popup v-model:show="show" round teleport="body" :style="{ width:'90%'}">
-      <div class=" text-center py-4">
-          <icon
-            name="icon-a-dianhua"
-            color="#3E4FAF"
-            size="17"
-            class=" inline-block pr-3 align-text-bottom"
-            />
-          <span class=" text-app-blue text-sm align-middle font-semibold">呼叫95533</span>
+    <van-popup v-model:show="show" round teleport="body" :style="{ width: '90%' }">
+      <div class="text-center py-4">
+        <icon
+          name="icon-a-dianhua"
+          color="#3E4FAF"
+          size="17"
+          class="inline-block pr-3 align-text-bottom"
+        />
+        <span class="text-app-blue text-sm align-middle font-semibold">呼叫95533</span>
       </div>
     </van-popup>
-    <van-popup v-model:show="show" round :style="{ width: '90%',margin:'60px auto 0px auto' }" teleport="body" :overlay="false">
-      <div class="text-app-blue text-sm font-semibold border-t border-gray-200 text-center py-4" @click="show=false">取消</div>
+    <van-popup
+      v-model:show="show"
+      round
+      :style="{ width: '90%', margin: '60px auto 0px auto' }"
+      teleport="body"
+      :overlay="false"
+    >
+      <div
+        class="text-app-blue text-sm font-semibold border-t border-gray-200 text-center py-4"
+        @click="show = false"
+      >取消</div>
     </van-popup>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent,ref } from 'vue'
+<script lang="ts" setup>
+import { computed, defineComponent, PropType, ref } from 'vue'
 import Icon from "@/components/common/Icon.vue"
 
-export default defineComponent({
-  components:{
-    Icon,
+const props = defineProps({
+  changeable: {
+    type: Boolean,
+    default: false,
+    required: false,
   },
-  emits:[],
-  // computed:{
-  //   isOpen(){
-  //     return false
-  //   }
-  // },
-  props:{
-    changeable:{
-      type:Boolean,
-      default:false
-    },
-    isOpen:{
-      type:Boolean,
-      default:true
-    }
+  distance: {
+    type: String as PropType<string>,
   },
-  setup (props,context) {
-    let show = ref(false)
-    const toCall = ()=>{
-      if(props.isOpen){
-        show.value = true
-      }
-    }    
-    return {
-      toCall,
-      show
-    }
-  }
+  is_normal_work: Boolean,
+  latitude: String,
+  location: String,
+  longitude: String,
+  name: String as PropType<string>,
+  opening_hours: String,
 })
+
+const isOpen = computed(() => {
+  const splitedStr = props.opening_hours?.split(' ')
+  if (splitedStr?.length === 2) {
+    const [start, end] = splitedStr;
+    const newStart = start.replace('：', ':').replace('早上', '').replace('下午', '')
+    const newEnd = end.replace('：', ':').replace('下午', '').replace('早上', '')
+
+    return true;
+  } else return false;
+})
+
+let show = ref(false)
+const toCall = () => {
+  if (isOpen) {
+    show.value = true
+  }
+}
+
+
 </script>
 
 <style lang="less" scoped>
-/deep/ .van-popup--center{
-    top: 85%;
+/deep/ .van-popup--center {
+  top: 85%;
 }
-.switch{
-  right:-0.344rem;
-  .location{
-    width:0.8rem;
+.switch {
+  right: -0.344rem;
+  .location {
+    width: 0.8rem;
   }
 }
-
 </style>
\ No newline at end of file

src/service/AddressService/index.ts

+import baseAxios from '../index'
+import { iNearbyOutLet } from './types'
+class AddressService {
+  static instance: AddressService
+  static getInstance() {
+    if (!AddressService.instance) {
+      AddressService.instance = new AddressService()
+    }
+    return AddressService.instance
+  }
+
+  getNearby(data: {
+    bank_code: number
+    latitude: string
+    longitude: string
+    number: number
+  }) {
+    return baseAxios<iNearbyOutLet[]>({
+      method: 'post',
+      url: '/address/nearby',
+      data,
+    })
+  }
+}
+
+export default AddressService

src/service/AddressService/types.ts

+export interface iNearbyOutLet {
+  distance: number
+  is_normal_work: boolean
+  latitude: string
+  location: string
+  longitude: string
+  name: string
+  opening_hours: string
+}

src/views/withMenu/Mine/index.vue

@@ -38,18 +38,30 @@
     </div>
     <!-- 我的网点 -->
     <GroupTitle title="我的网点" @click="$router.push('branch')" class="mt-5" />
-    <branch class="mt-3 mx-5" />
+    <branch
+      class="mt-3 mx-5"
+      v-if="state.outletList[0]"
+      :name="state.outletList[0].name"
+      :distance="state.outletList[0].name"
+      :is_normal_work="state.outletList[0].is_normal_work"
+      :latitude="state.outletList[0].latitude"
+      :location="state.outletList[0].location"
+      :longitude="state.outletList[0].longitude"
+      :opening_hours="state.outletList[0].opening_hours"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue"
+import { defineComponent, onMounted, reactive, ref } from "vue"
 import Icon from "@/components/common/Icon.vue"
 import Service from '@/components/Mine/Service/index.vue'
 import Branch from '@/components/Mine/Branch/branch.vue'
 import GroupTitle from "@/components/GroupTitle/index.vue"
 import { getUserMsg } from "@/utils/userMsg"
 import filter from "@/filter"
+import AddressService from "@/service/AddressService"
+import { iNearbyOutLet } from "@/service/AddressService/types"
 
 export default defineComponent({
   name: "Mine",
@@ -66,9 +78,23 @@ export default defineComponent({
     },
   },
   setup(props, context) {
-
+    const state = reactive({
+      outletList: [] as iNearbyOutLet[],
+    })
+    onMounted(async () => {
+      const ret = await AddressService.getInstance().getNearby({
+        bank_code: Number(process.env.VUE_APP_BANK_CODE),
+        number: 1,
+        latitude: '120.156203',
+        longitude: '30.285618',
+      })
+      if (ret.code === 200) {
+        state.outletList = ret.data;
+      }
+    })
     return {
-      filter
+      filter,
+      state
     }
   },
   computed: {