Skip to content

F
fns_front_2
Commit 83bcb3c1 authored by chenqikuai's avatar chenqikuai
Browse files
Options

我的页面 50%

parent dc98cde4
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 91 deletions
.env 0 → 100644
View file @ 83bcb3c1
VUE_APP_BANK_CODE=105
\ No newline at end of file
src/components/Mine/Branch/branch.vue
View file @ 83bcb3c1
<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 0 → 100644
View file @ 83bcb3c1
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 0 → 100644
View file @ 83bcb3c1
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
View file @ 83bcb3c1
......@@ -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: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment