Skip to content

G
gjjCode
Commit ff6a1f56 authored by tanjuanjuan's avatar tanjuanjuan
Browse files
Options

修改

parent 3abe8b10
Show whitespace changes
Inline Side-by-side
Showing with 472 additions and 88 deletions
src/pages.json
View file @ ff6a1f56
......@@ -5,11 +5,17 @@
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
}
},
"pages": [ // pages 数组中第一项表示应用启动页
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "小程序平台"
"navigationBarTitleText": "公积金"
}
},
{
"path": "pages/map/map",
"style": {
"navigationBarTitleText": "公积金地图"
}
}
],
......
src/pages/index/index.vue
View file @ ff6a1f56
<template>
<div class="main" v-if="apartments">
<div class="main" v-if="pInfo">
<div class="box1">
<div class="btxt">贵阳公积金中心地图</div>
<div class="stxt">您可拨打以下几个管理部门电话咨询公积金业务</div>
<div class="box1_house"></div>
<div class="inner">
<div class="name"><span id="userName">{{xing}}{{ch}}</span><span>，您好！</span>
</div>
<div class="welcome">欢迎使用贵阳公积金</div>
<div class="status"><span>账户状态：</span><span id="accountStatus">{{pInfo.hjstatus}}</span></div>
<div class="btngroup">
<router-link to="/account" class="goToDetail">
查看账户详情
</router-link>
<a href="#" class="goToDetail">查看其它公积金账户</a>
</div>
</div>
</div>
<div class="box2 inner">
<div class="item" v-for="item in apartments">
<div class="map1">
<div class="txt">{{item.glbmc}}</div>
<div class="copy" @click="copyText(item)">
<span class="iconfont icon-fuzhi"></span>
复制
<div class="item">
<div class="item_title">公积金余额</div>
<div class="item_box">
<div class="ibox">
<p>公积金余额（元）</p>
<div class="yefake" v-if="flag1" @click="toggleFlag1">
<span class="fakeStar">****</span>
<span class="iconfont icon-biyan"></span>
</div>
<div class="yefake" v-else @click="toggleFlag1">
<span class="fakeStar txt">{{pInfo.spmend}}</span>
<span class="iconfont icon-yanjing-zhengyan"></span>
</div>
</div>
<div class="iboxcommon">
<div class="thin-line-scaled"></div>
<router-link to="/list/0" class="iboxc">
<span>账户变动明细</span>
<span class="iconfont icon-jiantou2"></span>
</router-link>
</div>
</div>
</div>
<div class="item">
<div class="item_title">缴存</div>
<div class="item_box">
<div class="ibox">
<p>最近缴存{{YandM}}</p>
<div class="yefake" v-if="flag2" @click="toggleFlag2">
<span class="fakeStar">****</span>
<span class="iconfont icon-biyan"></span>
</div>
<div class="yefake" v-else @click="toggleFlag2">
<span class="fakeStar txt">{{pInfo.spmfact}}</span>
<span class="iconfont icon-yanjing-zhengyan"></span>
</div>
<router-link to="/list/1" class="getMore">
<span>更多</span>
<span class="iconfont icon-jiantou2"></span>
</router-link>
</div>
<div class="iboxcommon">
<div class="thin-line-scaled"></div>
<router-link to="/list/1" class="iboxc">
<span>个人缴存证明</span>
<span class="iconfont icon-jiantou2"></span>
</router-link>
</div>
</div>
</div>
<div class="item">
<div class="item_title">提取</div>
<div class="item_box">
<div class="iboxcommon">
<div class="iboxc">
<span>离退休提取</span>
<a href="#"><span class="iconfont icon-jiantou2"></span></a>
</div>
</div>
<div class="iboxcommon">
<div class="thin-line-scaled"></div>
<div class="iboxc">
<span>离职提取</span>
<a href="#"><span class="iconfont icon-jiantou2"></span></a>
</div>
<div class="map2">地址：{{item.wddz}}</div>
<div class="map3" @click="callNumber(item.bgdh)">电话：<span>{{item.bgdh}}</span></div>
</div>
<div class="iboxcommon">
<div class="thin-line-scaled"></div>
<div class="iboxc">
<span>提取进度查询</span>
<a href="#"><span class="iconfont icon-jiantou2"></span></a>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_title">贷款</div>
<div class="item_box">
<div class="ibox">
<p>贷款余额（元）</p>
<div class="yefake" v-if="flag4" @click="toggleFlag4">
<span class="fakeStar">****</span>
<span class="iconfont icon-biyan"></span>
</div>
<div class="yefake" v-else @click="toggleFlag4">
<span class="fakeStar txt">{{loadData.bjye}}</span>
<span class="iconfont icon-yanjing-zhengyan"></span>
</div>
<router-link to="/loan" class="getMore">
<span>更多</span>
<span class="iconfont icon-jiantou2"></span>
</router-link>
</div>
</div>
</div>
<div class="item">
<div class="item_title">更多服务</div>
<div class="item_box"><router-link to="/map">公积金地图</router-link></div>
</div>
<div class="cover" v-if="copyFlag">
<div class="alertinfo">复制成功</div>
</div>
</div>
</template>
<script setup>
import {
mapPinia
} from '@/store';
import axios from "axios"
import xh from 'xinhua-sdk'
import {
onMounted,
ref,
computed
} from 'vue'
const store = mapPinia()
const copyFlag = ref(false)
const copyText = (item) => {
let str = item.glbmc + "-" + item.wddz + "-" + item.bgdh;
navigator.clipboard.writeText(str);
copyFlag.value = true;
setTimeout(() => {
copyFlag.value = false;
}, 1500)
import {
mapPinia,personPinia
} from '@/store';
const personStore=personPinia()
const mapStore = mapPinia()
}
const callNumber = (number) => {
window.location.href = "tel:" + number
}
const apartments = computed(() => {
return store.mapList || []
})
const { person } = personStore();
const { mapList } = mapStore();
const getCurrentTimestamp = () => {
return Date.now();
}
const flag1 = ref(true)
const flag2 = ref(true)
const flag3 = ref(true)
const flag4 = ref(true)
//const pInfo = ref(store.state.pInfo||null)
const xing = ref(null)
const ch = ref(null)
const YandM = ref(null)
const toggleFlag1 = () => {
flag1.value = !flag1.value
}
const toggleFlag2 = () => {
flag2.value = !flag2.value
}
const toggleFlag3 = () => {
flag3.value = !flag3.value
}
const toggleFlag4 = () => {
flag4.value = !flag4.value
}
const pInfo = computed(() => {
return store.state.pInfo || null
})
const loadData = computed(() => {
return store.state.loadData || ""
})
xh.initRexma({
code: '5dd7bdcc8619335e543621040d9d34d5', // 端内小程序唯一 code
});
......@@ -74,7 +183,9 @@
}).then(response => {
const info = JSON.parse(response.data.data)
//store.commit('setPersonInfo', info.body.detail);
personStore.$patch(info.body.detail)
console.log("pinia person")
console.log(personStore.person)
//公积金地图
axios.get('https://onemoment.gywb.cn/back/sgy-gjj/gjj/gjjzx', {
params: {
......@@ -84,7 +195,9 @@
}).then(response => {
let data = JSON.parse(response.data.data)
//store.commit('setApartments', data.data);
mapStore.$patch(data.data);
console.log("pinia map")
console.log(mapStore.mapList)
}).catch(error => {
// 处理错误
console.error('Error fetching data:', error);
......@@ -98,8 +211,39 @@
},
});
</script>
onMounted(() => {
xing.value = computed(() => {
if (pInfo.value) {
return String(pInfo.value.spname).slice(0, 1)
} else {
return ""
}
})
ch.value = computed(() => {
if (pInfo.value) {
return pInfo.value.sex == "女" ? "女士" : "先生"
} else {
return ""
}
})
YandM.value = computed(() => {
if (pInfo.value) {
let year = String(pInfo.value.zghjny).slice(0, 4)
let month = String(pInfo.value.zghjny).slice(4, 6)
return year + "年" + month + "月"
} else {
return ""
}
})
})
</script>
<style scoped>
* {
padding: 0px;
......@@ -107,33 +251,13 @@
font-family: "Microsoft YaHei";
}
.cover {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.alertinfo {
font-size: 18px;
color: white;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.5);
}
.main {
width: 100%;
max-width: 750px;
box-sizing: border-box;
}
.inner {
width: 90%;
width: 88%;
margin: 20px auto;
}
......@@ -143,56 +267,147 @@
.box1 {
position: relative;
background-color: white;
padding: 40px 0 30px 9.5%;
width: 100%;
padding: 40px 0px 20px 0px;
color: white;
box-sizing: border-box;
margin-top: 15px
background: url('../assets/house.png') 88% 40% no-repeat;
background-size: 150px 153px;
}
.box1 .btxt {
font-size: 24px;
font-weight: bold;
.box1_house {
z-index: 9;
background: linear-gradient(to bottom, rgba(255, 121, 2, 1), rgba(255, 121, 2, 0.3));
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.box1 .inner {
z-index: 10;
position: relative;
}
.box1 .name {
margin-bottom: 5px;
font-weight: bold;
font-size: 22px;
}
.box1 .welcome {
margin-bottom: 35px;
}
.box1 .status {
margin-bottom: 30px;
}
.box1 .btngroup {
display: flex;
flex-direction: row;
align-items: space-between;
justify-content: space-between;
}
.box1 .stxt {
font-size: 14px;
color: #898989
.box1 .goToDetail {
font-size: 16px;
color: rgb(249, 99, 26);
padding: 10px 20px;
background-color: white;
border-radius: 10px;
}
.item {
margin-bottom: 20px;
}
.item .item_title {
font-size: 20px;
margin-bottom: 10px;
;
}
.item .item_box {
font-size: 16px;
border-radius: 6px;
background-color: white;
padding: 13px 10px 10px;
padding: 15px 10px;
box-sizing: border-box;
margin-bottom: 15px;
}
.map1 {
display: flex;
.item .item_box a {
color: black
}
.iboxcommon {
margin-bottom: 5px;
position: relative
}
.ibox {
position: relative;
}
.ibox .getMore {
position: absolute;
right: 0px;
bottom: 20px;
color: #a3a3a3
}
.iboxc {
display: inline-flex;
width: 100%;
box-sizing: border-box;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
padding: 10px 0px;
}
.map1 .txt {
font-size: 18px;
font-weight: bold;
.iboxc span,
.iboxc a {
display: inline-block
}
.iboxc a {
color: #a3a3a3
}
.map1 .copy {}
.thin-line-scaled {
width: 200%;
height: 1px;
background-color: rgb(168, 168, 168);
transform: scale(50%);
transform-origin: left center;
position: absolute;
left: 0px;
top: 0px;
.map1 .copy .iconfont {
color: #ff7902
}
.map2 {
margin-bottom: 5px;
.yefake {
margin-top: 5px;
padding-bottom: 20px;
display: flex;
align-items: center;
}
.yefake .fakeStar {
color: #ff4f0a;
margin-right: 5px;
}
.yefake .fakeStar.txt {
font-size: 18px;
font-weight: bold
}
.map3 span {
color: #ff7902
.norecord {
color: #8e8e8e;
font-size: 16px;
margin-bottom: 10px;
}
</style>
\ No newline at end of file
src/pages/map/map.vue 0 → 100644
View file @ ff6a1f56
<template>
<div class="main" v-if="apartments">
<div class="box1">
<div class="btxt">贵阳公积金中心地图</div>
<div class="stxt">您可拨打以下几个管理部门电话咨询公积金业务</div>
</div>
<div class="box2 inner">
<div class="item" v-for="item in apartments">
<div class="map1">
<div class="txt">{{item.glbmc}}</div>
<div class="copy" @click="copyText(item)">
<span class="iconfont icon-fuzhi"></span>
复制
</div>
</div>
<div class="map2">地址：{{item.wddz}}</div>
<div class="map3" @click="callNumber(item.bgdh)">电话：<span>{{item.bgdh}}</span></div>
</div>
</div>
<div class="cover" v-if="copyFlag">
<div class="alertinfo">复制成功</div>
</div>
</div>
</template>
<script setup>
import {
mapPinia
} from '@/store';
const { mapList } = mapStore();
import {
ref,
computed
} from 'vue'
const copyFlag = ref(false)
const copyText = (item) => {
let str = item.glbmc + "-" + item.wddz + "-" + item.bgdh;
navigator.clipboard.writeText(str);
copyFlag.value = true;
setTimeout(() => {
copyFlag.value = false;
}, 1500)
}
const callNumber = (number) => {
window.location.href = "tel:" + number
}
const apartments = computed(() => {
return mapStore.mapList || []
})
</script>
<style scoped>
* {
padding: 0px;
margin: 0px;
font-family: "Microsoft YaHei";
}
.cover {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
align-items: center;
justify-content: center;
}
.alertinfo {
font-size: 18px;
color: white;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.5);
}
.main {
width: 100%;
max-width: 750px;
box-sizing: border-box;
}
.inner {
width: 90%;
margin: 20px auto;
}
a {
text-decoration: none;
}
.box1 {
position: relative;
background-color: white;
padding: 40px 0 30px 9.5%;
box-sizing: border-box;
margin-top: 15px
}
.box1 .btxt {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}
.box1 .stxt {
font-size: 14px;
color: #898989
}
.item {
font-size: 16px;
border-radius: 6px;
background-color: white;
padding: 13px 10px 10px;
box-sizing: border-box;
margin-bottom: 15px;
}
.map1 {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.map1 .txt {
font-size: 18px;
font-weight: bold;
}
.map1 .copy {}
.map1 .copy .iconfont {
color: #ff7902
}
.map2 {
margin-bottom: 5px;
}
.map3 span {
color: #ff7902
}
</style>
\ No newline at end of file
src/store/index.ts
View file @ ff6a1f56
......@@ -5,6 +5,6 @@ const store = createPinia();
export default store;
// 模块统一导出
export * from './map';
export * from './person';
// 模块统一导出
//export * from './map';
export * from './map';
src/store/person.js 0 → 100644
View file @ ff6a1f56
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const personPinia = defineStore('person', () => {
const person = ref([])
return { person }
})
\ No newline at end of file
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