Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
aixianling
45
src/apps/AppBuilding/AppBuilding.vue
Normal file
45
src/apps/AppBuilding/AppBuilding.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div class="AppBuilding">
|
||||
<component
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params">
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Detail from './components/detail'
|
||||
import Add from './components/add'
|
||||
import List from './components/list'
|
||||
|
||||
export default {
|
||||
name: 'AppBuilding',
|
||||
appName: '以房找人',
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'Add',
|
||||
params: {}
|
||||
}
|
||||
},
|
||||
|
||||
components: { Detail, Add, List },
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.AppBuilding{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
219
src/apps/AppBuilding/components/add.vue
Normal file
219
src/apps/AppBuilding/components/add.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="title">
|
||||
<span class="tips"></span>房屋信息
|
||||
<span class="select">选择人员</span>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item">
|
||||
<span class="label">房屋面积</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">居住现状</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">房屋用途</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">承租情况</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">起租日期</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">租房备案证明</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="title">
|
||||
<span class="tips"></span>房主信息
|
||||
<span class="select">选择人员</span>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item">
|
||||
<span class="label">林珊珊</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">李益民</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="title">
|
||||
<span class="tips"></span>承租人信息
|
||||
<span class="select">选择人员</span>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item">
|
||||
<span class="label">林珊珊</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">李益民</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="title">
|
||||
<span class="tips"></span>实际居住人员
|
||||
<span class="select">选择人员</span>
|
||||
</div>
|
||||
<div class="pad-l32">
|
||||
<div class="item">
|
||||
<span class="label">林珊珊</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">李益民</span>
|
||||
<div class="value">
|
||||
<span class="color-999">请选择</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="btn">保存</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
padding-bottom: 112px;
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 96px;
|
||||
line-height: 96px;
|
||||
background: #FFF;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #262B36;
|
||||
padding-right: 32px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
.tips{
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 32px;
|
||||
background: #4E75FE;
|
||||
box-shadow: 0px 8px 24px 2px #C9D8FA;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
margin-right: 22px;
|
||||
}
|
||||
.select{
|
||||
float: right;
|
||||
font-size: 30px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
width: 100%;
|
||||
padding: 34px 32px 34px 0;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
box-sizing: border-box;
|
||||
.color-999{
|
||||
color: #999;
|
||||
}
|
||||
.value{
|
||||
.u-icon{
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.btn{
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
background: #1365DD;
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
}
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
.pad-l32{
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
383
src/apps/AppBuilding/components/detail.vue
Normal file
383
src/apps/AppBuilding/components/detail.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<AiTopFixed>
|
||||
<div class="select-flex">
|
||||
<span class="name">后西一街新世纪花园小区新城区1栋后西一街新世纪花园小区</span>
|
||||
<span class="btn">切换</span>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="num-content">
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>6770</h2>
|
||||
<p>实有户数</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>677</h2>
|
||||
<p>实有人口</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="num-item">
|
||||
<div class="content">
|
||||
<h2>67</h2>
|
||||
<p>流动人口</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="left">
|
||||
<div class="item">
|
||||
<h2>101</h2>
|
||||
<p>无人</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>101</h2>
|
||||
<p>无人</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>101</h2>
|
||||
<p>无人</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<h2>101</h2>
|
||||
<p>无人</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item active">6-10 层</div>
|
||||
<div class="item">6-10 层</div>
|
||||
<div class="item">6-10 层</div>
|
||||
<div class="item">6-10 层</div>
|
||||
<div class="item">6-10 层</div>
|
||||
</div>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">新城区1栋102</div>
|
||||
<div class="row-info">
|
||||
<div class="row-item left">
|
||||
<h3>102 ㎡</h3>
|
||||
<p>房屋面积</p>
|
||||
</div>
|
||||
<div class="row-item center">
|
||||
<span class="right-line"></span>
|
||||
<span class="left-line"></span>
|
||||
<h3>居住</h3>
|
||||
<p>房屋用途</p>
|
||||
</div>
|
||||
<div class="row-item right">
|
||||
<h3>出租</h3>
|
||||
<p>居住现状</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-info">
|
||||
<div class="row-item left">
|
||||
<h3>整租</h3>
|
||||
<p>承租情况</p>
|
||||
</div>
|
||||
<div class="row-item center">
|
||||
<span class="right-line"></span>
|
||||
<span class="left-line"></span>
|
||||
<h3>2021-11-01</h3>
|
||||
<p>起租日期</p>
|
||||
</div>
|
||||
<div class="row-item right">
|
||||
<h3>有</h3>
|
||||
<p>租房备案证明</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="popup">
|
||||
<div class="title pad-t32">房主信息</div>
|
||||
<div class="info-flex">
|
||||
<div class="item">
|
||||
<span class="label">房主：</span>李维民
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>13891067541
|
||||
</div>
|
||||
</div>
|
||||
<div class="title pad-t32">承租人信息</div>
|
||||
<div class="info-flex">
|
||||
<div class="item">
|
||||
<span class="label">房主：</span>李维民
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>13891067541
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line-bg"></div>
|
||||
<div class="popup">
|
||||
<div class="title pad-t32">实际居住人员</div>
|
||||
<div class="info-flex">
|
||||
<div class="item">
|
||||
<span class="label">居住人：</span>李维民
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">联系方式：</span>13891067541
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-flex mar-t48">
|
||||
<div class="item">
|
||||
<span class="label">与户主关系：</span>兄弟
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pop-btn">编辑修改</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail {
|
||||
.select-flex{
|
||||
padding: 20px 40px 40px;
|
||||
box-sizing: border-box;
|
||||
line-height: 50px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
.name{
|
||||
width: 560px;
|
||||
word-break: break-all;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
.btn{
|
||||
width: 70px;
|
||||
color: #1365DD;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
.num-content{
|
||||
width: 100%;
|
||||
padding: 0 0 18px 40px;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
.num-item{
|
||||
flex: 1;
|
||||
.content{
|
||||
width: 120px;
|
||||
text-align: center;
|
||||
}
|
||||
h2{
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 42px;
|
||||
padding-top: 46px;
|
||||
}
|
||||
p{
|
||||
font-size: 26px;
|
||||
color: #666;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #F1F6F9;
|
||||
}
|
||||
.list-content{
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 48px 2px 0 32px;
|
||||
box-sizing: border-box;
|
||||
.left{
|
||||
width: 560px;
|
||||
overflow: hidden;
|
||||
.item{
|
||||
width: 264px;
|
||||
height: 158px;
|
||||
background: #FAFBFF;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #E7E7E7;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin: 0 32px 32px 0;
|
||||
float: left;
|
||||
h2{
|
||||
font-size: 38px;
|
||||
color: #5088FF;
|
||||
line-height: 44px;
|
||||
margin: 14px 0 26px 0;
|
||||
}
|
||||
p{
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
.item{
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding: 0 8px;
|
||||
background: #FAFBFF;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #E7E7E7;
|
||||
box-sizing: border-box;
|
||||
font-size: 30px;
|
||||
font-family: DINAlternate-Bold, DINAlternate;
|
||||
color: #787878;
|
||||
letter-spacing: -1px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.active{
|
||||
background: #5088FF;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #E7E7E7;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup{
|
||||
padding-left: 32px;
|
||||
.bg{
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
.title{
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.row-info{
|
||||
margin-bottom: 32px;
|
||||
.row-item{
|
||||
display: inline-block;
|
||||
width: 33%;
|
||||
h3{
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #4E75FE;
|
||||
line-height: 64px;
|
||||
}
|
||||
p{
|
||||
font-size: 28px;
|
||||
color: #666;
|
||||
line-height: 42px;
|
||||
}
|
||||
}
|
||||
.left{
|
||||
width: calc(28% - 70px);
|
||||
text-align: center;
|
||||
margin-right: 70px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.center{
|
||||
width: 36%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
.left-line{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 0;
|
||||
height: 64px;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
}
|
||||
.right-line{
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
height: 64px;
|
||||
border-left: 1px solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
.right{
|
||||
width: calc(33% - 40px);
|
||||
text-align: center;
|
||||
margin-left: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.info-flex{
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
padding-right: 70px;
|
||||
box-sizing: border-box;
|
||||
.item{
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
color: #333;
|
||||
line-height: 30px;
|
||||
.label{
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-bg{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: #F5F6FA;
|
||||
}
|
||||
.pad-t32{
|
||||
padding-top: 32px;
|
||||
}
|
||||
.mar-t48{
|
||||
margin-top: 48px;
|
||||
}
|
||||
.pop-btn{
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
line-height: 112px;
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
color: #FFF;
|
||||
background: #1365DD;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .content{
|
||||
padding: 0!important;
|
||||
}
|
||||
</style>
|
||||
128
src/apps/AppBuilding/components/list.vue
Normal file
128
src/apps/AppBuilding/components/list.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="list">
|
||||
<AiTopFixed>
|
||||
<u-search placeholder="楼栋名称" :show-action="false" v-model="search.title" @search="current=1,getList()"/>
|
||||
</AiTopFixed>
|
||||
<div class="list-content">
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<p class="title line-two">水果湖水岸华府小区水果湖水岸华府小区水果湖水岸华府小区水果湖水岸华府小区</p>
|
||||
<p class="address">山东省济南市历城区王舍人街道恒大商业广场蓝天城广场新区</p>
|
||||
<span class="status color0">已定位</span>
|
||||
</div>
|
||||
<div class="item-btn">
|
||||
<span>去定位</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
title: ''
|
||||
},
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
getList() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
.list-content{
|
||||
padding: 32px 32px 0;
|
||||
.item{
|
||||
width: 686px;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 32px;
|
||||
.item-content{
|
||||
padding: 32px 32px 42px 32px;
|
||||
}
|
||||
.title{
|
||||
width: 540px;
|
||||
word-break: break-all;
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
}
|
||||
.address{
|
||||
width: 100%;
|
||||
word-break: break-all;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
line-height: 40px;
|
||||
}
|
||||
.status{
|
||||
width: 160rpx;
|
||||
height: 40rpx;
|
||||
line-height: 36rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
position: absolute;
|
||||
right: -38rpx;
|
||||
top: 24rpx;
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(45deg);
|
||||
text-align: center;
|
||||
}
|
||||
.color0{
|
||||
background: #FFECEF;
|
||||
color: #f46;
|
||||
}
|
||||
.color1{
|
||||
background: #EEF5FF;
|
||||
color: #5A98F2;
|
||||
}
|
||||
.item-btn{
|
||||
width: 100%;
|
||||
padding: 20px 32px 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
border-radius: 28px;
|
||||
border: 1px solid #1365DD;
|
||||
font-size: 28px;
|
||||
color: #1365DD;
|
||||
}
|
||||
}
|
||||
}
|
||||
.line-two{
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
43
src/apps/AppGridManagement/AppGridManagement.vue
Normal file
43
src/apps/AppGridManagement/AppGridManagement.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="AppGridManagement">
|
||||
<component
|
||||
:is="component"
|
||||
@change="onChange"
|
||||
:params="params">
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Detail from './components/detail'
|
||||
|
||||
export default {
|
||||
name: 'AppGridManagement',
|
||||
appName: '网格管理',
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'Detail',
|
||||
params: {}
|
||||
}
|
||||
},
|
||||
|
||||
components: { Detail },
|
||||
|
||||
methods: {
|
||||
onChange(e) {
|
||||
this.params = e.params
|
||||
this.component = e.type
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.AppGridManagement{
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
195
src/apps/AppGridManagement/components/detail.vue
Normal file
195
src/apps/AppGridManagement/components/detail.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div class="detail">
|
||||
<div class="grid-select" @click="show=true">
|
||||
<span class="label">网格选择</span>
|
||||
<div class="value">
|
||||
<span>新里程社区居委会</span>
|
||||
<u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-content">
|
||||
<AiTMap :areaId="areaId" :map.sync="map" :lib.sync="lib" :ops="ops" :libraries="['service', 'tools']"></AiTMap>
|
||||
</div>
|
||||
<u-popup v-model="show" mode="bottom" border-radius="14">
|
||||
<div class="popup">
|
||||
<div class="bg"></div>
|
||||
<div class="title">恒大城西社区居委会</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格类型</span>
|
||||
<span class="value">基础网格</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格层级</span>
|
||||
<span class="value">村/社区</span>
|
||||
</div>
|
||||
<div class="info-flex">
|
||||
<span class="label">网格管理员</span>
|
||||
<span class="value">林珊珊 13782951281
|
||||
<img :src="$cdn + 'common/phone.png'" alt="" @click="call(item)" class="phone-icon">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</u-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
areaId: '',
|
||||
ops: {},
|
||||
lib: '',
|
||||
map: null,
|
||||
markerArr: [],
|
||||
show: false
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
mounted() {
|
||||
this.areaId = this.user.areaId
|
||||
this.initMap()
|
||||
},
|
||||
|
||||
methods: {
|
||||
initMap() {
|
||||
//初始化地图
|
||||
|
||||
this.$nextTick(() =>{
|
||||
let {lib: TMap, map} = this
|
||||
var center = new TMap.LatLng(40.040422, 116.273521)
|
||||
var marker = null;
|
||||
var points = []
|
||||
map.setCenter(center)
|
||||
map.setZoom(18)
|
||||
|
||||
marker = new TMap.MultiMarker({
|
||||
id: 'marker-layer', // 图层id
|
||||
map: map,
|
||||
styles: {
|
||||
// 点标注的相关样式
|
||||
marker: new TMap.MarkerStyle({
|
||||
width: 25,
|
||||
height: 35,
|
||||
anchor: { x: 16, y: 32 },
|
||||
src:'',
|
||||
}),
|
||||
},
|
||||
geometries: [
|
||||
{
|
||||
// 点标注数据数组
|
||||
id: 'demo',
|
||||
styleId: 'marker',
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
var infoWindow = null;
|
||||
var infoWindow2 = null
|
||||
var html = `<div style=" display: inline-block;padding: 6px 10px;line-height: 16px;border-radius: 24px; background: #5088FF;color: #fff;font-size: 12px;position: relative;">`
|
||||
+`腾讯大厦<span style=" width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #5088FF;position: absolute;bottom: -12px;left: 50%;margin-left:-6px;"></span></div>`
|
||||
|
||||
infoWindow = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.040422, 116.273521),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
|
||||
infoWindow2 = new TMap.InfoWindow(
|
||||
{
|
||||
map: map,
|
||||
enableCustom: true,
|
||||
position: new TMap.LatLng(40.03592, 116.27058),
|
||||
offset: { y: -70, x: -5 },
|
||||
content: html
|
||||
},
|
||||
);
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
height: 100%;
|
||||
}
|
||||
.detail {
|
||||
height: 100%;
|
||||
.grid-select{
|
||||
width: 100%;
|
||||
padding: 34px 32px;
|
||||
box-sizing: border-box;
|
||||
background: #FFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 44px;
|
||||
color: #333;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 140px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.value{
|
||||
font-size: 28px;
|
||||
.u-icon{
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-content{
|
||||
width: 100%;
|
||||
height: calc(100% - 112px);
|
||||
}
|
||||
.popup{
|
||||
padding: 0 32px 16px;
|
||||
.bg{
|
||||
width: 64px;
|
||||
height: 10px;
|
||||
background: #CCC;
|
||||
border-radius: 6px;
|
||||
margin: 32px 0 32px 344px;
|
||||
}
|
||||
.title{
|
||||
font-size: 36px;
|
||||
font-family: PingFang-SC-Heavy, PingFang-SC;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.info-flex{
|
||||
padding: 26px 0 30px 0;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #D8DDE6;
|
||||
line-height: 40px;
|
||||
font-size: 28px;
|
||||
.label{
|
||||
display: inline-block;
|
||||
width: 160px;
|
||||
font-weight: 800;
|
||||
color: #333;
|
||||
}
|
||||
.value{
|
||||
color: #666;
|
||||
font-size: 26px;
|
||||
.phone-icon{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: sub;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,23 +2,19 @@
|
||||
<div class="AppWalkask">
|
||||
<template v-if="isList">
|
||||
<div class="header-top">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6"
|
||||
inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
|
||||
</div>
|
||||
|
||||
<div class="header-middle">
|
||||
<div class="currentLeft" v-if="currentTabs == 0">
|
||||
<div class="currentLeft-top">
|
||||
<div class="left">
|
||||
<img src="./components/images/icon2.png" alt=""/>
|
||||
<img src="./components/images/icon2.png" alt="" />
|
||||
|
||||
<AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
|
||||
style="color: #fff"></AiAreaPicker>
|
||||
<AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
|
||||
</div>
|
||||
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
|
||||
search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
|
||||
@clear="handerClear"></u-search>
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
|
||||
</div>
|
||||
|
||||
<template v-if="data.length > 0">
|
||||
@@ -33,8 +29,7 @@
|
||||
<div class="cards-hint">{{ item.description }}</div>
|
||||
|
||||
<div class="imgs">
|
||||
<img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
|
||||
@click.stop="previewImage(item.images, items.url)"/>
|
||||
<img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
|
||||
</div>
|
||||
|
||||
<div class="cards-bottom">
|
||||
@@ -60,15 +55,12 @@
|
||||
<div class="currentRight" v-if="currentTabs == 1">
|
||||
<div class="currentLeft-top">
|
||||
<div class="left">
|
||||
<img src="./components/images/icon2.png" alt=""/>
|
||||
<img src="./components/images/icon2.png" alt="" />
|
||||
|
||||
<AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect"
|
||||
style="color: #fff"></AiAreaPicker>
|
||||
<AiAreaPicker v-model="areaId" ref="areaIds" :areaId="areaId" @select="areaSelect" style="color: #fff"></AiAreaPicker>
|
||||
</div>
|
||||
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF"
|
||||
search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch"
|
||||
@clear="handerClear"></u-search>
|
||||
<u-search v-model="keyword" :clearabled="true" placeholder="请输入标题" :show-action="false" bg-color="#1F5CAF" search-icon-color="#E2E8F1" color="#E2E8F1" height="58" @search="handerSearch" @clear="handerClear"></u-search>
|
||||
</div>
|
||||
|
||||
<template v-if="data.length > 0">
|
||||
@@ -83,8 +75,7 @@
|
||||
<div class="cards-hint">{{ item.description }}</div>
|
||||
|
||||
<div class="imgs">
|
||||
<img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i"
|
||||
@click.stop="previewImage(item.images, items.url)"/>
|
||||
<img :src="items.url" alt="" v-for="(items, i) in item.images" :key="i" @click.stop="previewImage(item.images, items.url)" />
|
||||
</div>
|
||||
|
||||
<div class="cards-bottom">
|
||||
@@ -108,11 +99,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true"
|
||||
:show-title="false" @confirm="delet"></u-modal>
|
||||
<u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
|
||||
|
||||
<AiFixedBtn>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()"/>
|
||||
<div class="addBtn iconfont iconfont-iconfangda" @tap.stop="goDetail()" />
|
||||
</AiFixedBtn>
|
||||
</template>
|
||||
|
||||
@@ -121,7 +111,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import { mapState } from 'vuex'
|
||||
import add from './add.vue'
|
||||
import detail from './detail.vue'
|
||||
|
||||
@@ -157,38 +147,38 @@ export default {
|
||||
deletId: '',
|
||||
}
|
||||
},
|
||||
computed: {...mapState(['user'])},
|
||||
computed: { ...mapState(['user']) },
|
||||
created() {
|
||||
this.areaId = this.user.areaId
|
||||
this.getList()
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
getList() {
|
||||
this.$http
|
||||
.post('/app/appvisitvondolence/list', null, {
|
||||
params: {
|
||||
size: 6,
|
||||
current: this.current,
|
||||
areaId: this.areaId,
|
||||
createUserId: this.currentTabs == 1 ? this.user.id : '',
|
||||
title: this.keyword,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.data = res.data.records
|
||||
if (this.data) {
|
||||
this.data.map((item) => {
|
||||
if (item.images) {
|
||||
item.images = JSON.parse(item.images || '[]')
|
||||
}
|
||||
return item
|
||||
})
|
||||
.post('/app/appvisitvondolence/list', null, {
|
||||
params: {
|
||||
size: 6,
|
||||
current: this.current,
|
||||
areaId: this.areaId,
|
||||
createUserId: this.currentTabs == 1 ? this.user.id : '',
|
||||
title: this.keyword,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code == 0) {
|
||||
this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
|
||||
|
||||
if (this.data) {
|
||||
this.data.map((item) => {
|
||||
if (item.images) {
|
||||
item.images = JSON.parse(item.images || '[]')
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
areaSelect(e) {
|
||||
|
||||
@@ -4,42 +4,61 @@
|
||||
<u-search class="serach_content" placeholder="请输入标题" :show-action="false" v-model="keyword" @clear="clearSearch" @search="search"></u-search>
|
||||
</div>
|
||||
|
||||
<template v-if="datas.length == 0">
|
||||
<u-card v-for="(items, index) in 4" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
|
||||
<u-tabs :list="list" :is-scroll="false" :current="currentType" @change="change"></u-tabs>
|
||||
|
||||
<template v-if="datas.length > 0">
|
||||
<u-card v-for="(item, index) in datas" :key="index" :foot-border-top="false" :head-border-bottom="false" :show-head="false" @click="goDetail(item, 1)">
|
||||
<view class="body" slot="body">
|
||||
<!-- 审批名称 -->
|
||||
<view class="u-body-item">
|
||||
<div class="title">基本养老保险灵活就业人员新参保业务</div>
|
||||
<div class="title">{{ item.processName }}</div>
|
||||
</view>
|
||||
|
||||
<view class="u-body-item">
|
||||
<div class="plan">
|
||||
<span>审批进度：</span>
|
||||
<span>审批中</span>
|
||||
|
||||
<span class="business_status" v-if="item.approvalStatus == 0"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
|
||||
|
||||
<!-- end -->
|
||||
<span class="business_status_blue" v-if="item.approvalStatus == 1"> {{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}</span>
|
||||
|
||||
<!-- false -->
|
||||
<span class="business_status_gray" v-if="item.approvalStatus == 2">
|
||||
{{ $dict.getLabel('listApprovalStatusHb', item.approvalStatus) }}
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="u-body-item">
|
||||
<div class="modetpye">
|
||||
<span>申请类型：</span>
|
||||
<span>社会保障</span>
|
||||
<span>{{ item.classificationName }}</span>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="u-body-item">
|
||||
<div class="applytime">
|
||||
<span>申请日期：</span>
|
||||
<span class="timeContent">2021-01-21 14:30</span>
|
||||
<span class="timeContent">{{ item.createTime }}</span>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<view class="u-body-item">
|
||||
<div class="overtime">
|
||||
<span>完成日期：</span>
|
||||
<span class="timeContent">2021-01-21 14:30</span>
|
||||
<span class="timeContent">{{ item.overTime }}</span>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<img src="../AppWorkonline/components/end.png" alt="" />
|
||||
<span class="icon">
|
||||
<!-- ing -->
|
||||
<img src="./components/ing.png" alt="" v-if="item.approvalStatus == 0" />
|
||||
<!-- end -->
|
||||
<img src="./components/end.png" alt="" v-if="item.approvalStatus == 1" />
|
||||
<!-- false -->
|
||||
<img src="./components/reject.png" alt="" v-if="item.approvalStatus == 2" />
|
||||
</span>
|
||||
</view>
|
||||
</u-card>
|
||||
|
||||
@@ -52,41 +71,75 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'workonline',
|
||||
name: 'WorkOnline',
|
||||
appName: '网上办事',
|
||||
// 组件
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
datas: [],
|
||||
list: [
|
||||
{ name: '待我审批', type: 0 },
|
||||
{ name: '我已审批', type: 1 },
|
||||
{ name: '抄送我的', type: 3 },
|
||||
{ name: '超时督办', type: 4 },
|
||||
],
|
||||
currentType: 0, // 0待我审批 1已审批 2抄送我的 3超时
|
||||
keyword: '',
|
||||
datas: {},
|
||||
listType: 0,
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
// 计算
|
||||
computed: {},
|
||||
// 监听
|
||||
watch: {},
|
||||
// 实例创建后
|
||||
created() {
|
||||
this.$dict.load('').then(() => {
|
||||
// 字典
|
||||
this.$dict.load('listApprovalStatusHb').then(() => {
|
||||
this.dictList = this.$dict.getDict('listApprovalStatusHb')
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
// 实例渲染后
|
||||
mounted() {},
|
||||
// 方法
|
||||
methods: {
|
||||
getList() {},
|
||||
getList() {
|
||||
this.$http.post(`/app/approv-alapply-info/list?listType=${this.listType}¤t=${this.current}¶m=${this.keyword}`).then((res) => {
|
||||
if (res?.code == 0) {
|
||||
this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 跳转页面的id
|
||||
goDetail(item) {
|
||||
console.log(1)
|
||||
uni.navigateTo({ url: `./detail?id=${item.id}&listType=${this.listType}` })
|
||||
},
|
||||
|
||||
change(index) {
|
||||
this.currentType = index
|
||||
this.listType = this.list[index].type
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
getListInit() {
|
||||
this.current = 1
|
||||
this.getList()
|
||||
},
|
||||
|
||||
search(e) {
|
||||
this.keyword = e
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.getListInit()
|
||||
},
|
||||
|
||||
clearSearch() {
|
||||
this.keyword = ''
|
||||
this.current = 1
|
||||
this.getList()
|
||||
this.getListInit()
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -94,10 +147,9 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workonline {
|
||||
height: 100%;
|
||||
.search {
|
||||
background-color: #fff;
|
||||
.serach_content {
|
||||
background-color: #fff;
|
||||
height: 104px;
|
||||
line-height: 104px;
|
||||
box-sizing: border-box;
|
||||
@@ -137,27 +189,5 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 32px 32px 0 32px;
|
||||
padding: 30px 0 40px 30px;
|
||||
background: #fff;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.plan,
|
||||
.modetpye,
|
||||
.applytime,
|
||||
.overtime {
|
||||
margin-top: 16px;
|
||||
font-size: 30px;
|
||||
color: #999999;
|
||||
.timeContent {
|
||||
color: #343d65;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/apps/AppWorkonline/components/Profile_Picture.png
Normal file
BIN
src/apps/AppWorkonline/components/Profile_Picture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 663 B |
BIN
src/apps/AppWorkonline/components/agree.png
Normal file
BIN
src/apps/AppWorkonline/components/agree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/apps/AppWorkonline/components/basic.png
Normal file
BIN
src/apps/AppWorkonline/components/basic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 858 B |
BIN
src/apps/AppWorkonline/components/clearn.png
Normal file
BIN
src/apps/AppWorkonline/components/clearn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 217 B |
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user