特殊人群
This commit is contained in:
		
							
								
								
									
										44
									
								
								src/apps/AppSpecialPeople/AppSpecialPeople.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										44
									
								
								src/apps/AppSpecialPeople/AppSpecialPeople.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,44 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="AppSpecialPeople">
 | 
			
		||||
    <component
 | 
			
		||||
        :is="component"
 | 
			
		||||
        @change="onChange"
 | 
			
		||||
        :params="params">
 | 
			
		||||
    </component>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import Detail from './components/detail'
 | 
			
		||||
import Add from './components/add'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'AppSpecialPeople',
 | 
			
		||||
  appName: '特殊人群',
 | 
			
		||||
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      component: 'add',
 | 
			
		||||
      params: {}
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  components: { Detail, Add },
 | 
			
		||||
 | 
			
		||||
  methods: {
 | 
			
		||||
    onChange(e) {
 | 
			
		||||
      this.params = e.params
 | 
			
		||||
      this.component = e.type
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
uni-page-body{
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
.AppSpecialPeople{
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										196
									
								
								src/apps/AppSpecialPeople/components/add.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										196
									
								
								src/apps/AppSpecialPeople/components/add.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,196 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="add">
 | 
			
		||||
    <div class="pad-l32">
 | 
			
		||||
      <div class="item">
 | 
			
		||||
        <span class="label"><span class="tips">*</span>类型</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 class="tips">*</span>姓名</span>
 | 
			
		||||
        <div class="value">
 | 
			
		||||
          <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" />
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="item">
 | 
			
		||||
        <span class="label"><span class="tips">*</span>身份证号</span>
 | 
			
		||||
        <div class="value">
 | 
			
		||||
          <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" />
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="item">
 | 
			
		||||
        <span class="label"><span class="tips">*</span>性别</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 class="tips">*</span>出生日期</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 class="tips">*</span>联系电话</span>
 | 
			
		||||
        <div class="value">
 | 
			
		||||
          <u-input type="text" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48" />
 | 
			
		||||
        </div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <div class="item">
 | 
			
		||||
        <span class="label"><span class="tips">*</span>所属区域</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 class="tips">*</span>村</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 class="tips"></span>所属网格</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 class="tips"></span>小区</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 class="tips"></span>详细地址</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;
 | 
			
		||||
    }
 | 
			
		||||
    .tips{
 | 
			
		||||
      display: inline-block;
 | 
			
		||||
      width: 16px;
 | 
			
		||||
      height: 44px;
 | 
			
		||||
      font-size: 32px;
 | 
			
		||||
      font-family: PingFangSC-Regular, PingFang SC;
 | 
			
		||||
      color: #F46;
 | 
			
		||||
      line-height: 44px;
 | 
			
		||||
    }
 | 
			
		||||
    .value{
 | 
			
		||||
      .u-icon{
 | 
			
		||||
        margin-left: 16px;
 | 
			
		||||
      }
 | 
			
		||||
      ::v-deep .u-input{
 | 
			
		||||
        font-size: 32px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .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>
 | 
			
		||||
							
								
								
									
										32
									
								
								src/apps/AppSpecialPeople/components/detail.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										32
									
								
								src/apps/AppSpecialPeople/components/detail.vue
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,32 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="detail">
 | 
			
		||||
    
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { mapState } from 'vuex'
 | 
			
		||||
export default {
 | 
			
		||||
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: { ...mapState(['user']) },
 | 
			
		||||
  mounted() {
 | 
			
		||||
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  methods: {
 | 
			
		||||
   
 | 
			
		||||
    
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.detail {
 | 
			
		||||
  
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user