走访慰问

src/project/pingchang/AppWalkask/AppWalkask.vue

@@ -0,0 +1,371 @@
+<template>
+  <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>
+      </div>
+
+      <div class="header-middle">
+        <div class="currentLeft">
+          <div class="currentLeft-top">
+            <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">
+            <AiCard v-for="(item, i) in data" :key="i" @click.native="goDetail(item, 1)" :ref="item.id">
+              <template #custom>
+                <div class="cards-left">
+                  <span class="walkName">走访对象：{{ item.name }}</span>
+                  <span class="tags" v-if="item.applicationId">{{ $dict.getLabel('appSpecialTypeFive', item.applicationId) }}</span>
+                  <span class="tags" v-if="item.reality">{{ $dict.getLabel('realityStatus', item.reality) }}</span>
+                </div>
+
+                <div class="cards-hint">{{ item.title }}</div>
+
+                <div class="imgs">
+                  <img :src="items.url" alt="" v-for="(items, i) in JSON.parse(item.images || '[]')" :key="i" @click.stop="previewImage(JSON.parse(item.images || '[]'), items.url)" v-if="i < 3" />
+                </div>
+
+                <div class="cards-bottom">
+                  <span>走访人：<AiOpenData v-if="item.createUserName" type="userName" :openid="item.createUserName" style="display: inline-block" /></span>
+                  <span style="margin-left: 8px">{{ item.visitTime }}</span>
+                </div>
+              </template>
+
+              <template #menu v-if="item.createUserId == user.id">
+                <div class="menu" @tap.stop="toAdd(item, 2)">编辑</div>
+                <div class="menu" @tap.stop="toDetele(item)">删除</div>
+              </template>
+            </AiCard>
+          </template>
+
+          <!-- <div v-else>
+            <AiEmpty description="您还未添加过入户走访慰问" class="emptyWrap"></AiEmpty>
+
+            <div class="addBtns">
+              <span> 点击</span>
+              <span class="toAdds" @click="toAdd()">新增按钮</span>
+              <span> 试试试吧~</span>
+            </div>
+          </div> -->
+          <div class="empty" v-else>
+            <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-data.png" alt="" />
+            <p>您还未添加过走访慰问<br />点击<span @click="toAdd()">新增按钮</span>试试吧</p>
+          </div>
+        </div>
+      </div>
+
+      <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="toAdd()"/>
+      </AiFixedBtn>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'AppWalkask',
+  appName: '走访慰问',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      tabList: [
+        {
+          name: '全部',
+        },
+        {
+          name: '我的走访',
+        },
+      ],
+      currentTabs: 0,
+      show: false,
+      keyword: '',
+      deletShow: false,
+      isList: true,
+      comp: '',
+      params: null,
+      current: 1,
+      areaId: '',
+      areaName: '',
+      deletId: '',
+      pages: 0,
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad() {
+    this.areaId = this.user.areaId
+    this.areaName = this.user.areaName
+    this.$dict.load('realityStatus', 'appSpecialTypeFive').then(() => {
+      this.getList()
+    })
+    uni.$on('updateList', () => {
+      this.getListInit()
+    })
+  },
+  onShow() {
+    document.title = '走访慰问'
+  },
+  mounted() {},
+  methods: {
+    getListInit() {
+      this.data = []
+      this.current = 1
+      this.getList()
+    },
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+            title: this.keyword,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            if (this.current > res.data.pages) {
+              return
+            }
+            this.data = this.current > 1 ? [...this.data, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    areaSelect(e) {
+      this.data = []
+      this.areaId = e
+      this.getListInit()
+    },
+
+    change(index) {
+      this.areaId = this.user.areaId
+      this.keyword = ''
+      this.currentTabs = index
+      this.getListInit()
+    },
+
+    goDetail(item, hint) {
+      if (item?.id) {
+        this.$refs?.[item.id]?.[0]?.handleClose()
+      }
+      if (hint == 1) {
+        uni.navigateTo({ url: `./detail?id=${item.id}` })
+      }
+    },
+
+    toAdd(item, hint) {
+      if (item?.id) {
+        this.$refs?.[item.id]?.[0]?.handleClose()
+      }
+      if (hint == 2) {
+        uni.navigateTo({ url: `./add?id=${item.id}` })
+      } else {
+        uni.navigateTo({ url: `./add` })
+      }
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+      this.$refs?.[item.id]?.[0]?.handleClose()
+    },
+
+    delet() {
+      this.$http.post(`/app/appvisitvondolence/delete?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getListInit()
+        }
+      })
+    },
+
+    handerSearch(e) {
+      this.keyword = e
+      this.getListInit()
+    },
+
+    handerClear() {
+      this.keyword = ''
+      this.getListInit()
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+  background: #fff;
+}
+
+.AppWalkask {
+  height: 100%;
+
+  .header-middle {
+    .currentLeft,
+    .currentRight {
+      padding-bottom: 56px;
+
+      .currentLeft-top {
+        display: flex;
+        align-items: center;
+        background: #3975c6;
+        padding: 24px 30px;
+
+        .left {
+          width: 40%;
+          display: flex;
+          align-items: center;
+
+          img {
+            width: 48px;
+            height: 48px;
+          }
+        }
+      }
+
+      .AiCard {
+        ::v-deep .start {
+          border-bottom: 1px solid #dddddd;
+
+          .fill {
+            .cards-left {
+              .walkName {
+                font-size: 32px;
+                font-weight: 500;
+                margin-right: 16px;
+                color: #333;
+              }
+
+              .tags {
+                display: inline-block;
+                padding: 6px 16px;
+                background: #f3f4f7;
+                border-radius: 4px;
+                font-size: 28px;
+                color: #999999;
+                margin-left: 16px;
+              }
+            }
+
+            .cards-hint {
+              margin-top: 16px;
+              font-size: 30px;
+              color: #666666;
+              line-height: 1.4;
+              text-overflow: -o-ellipsis-lastline;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+            }
+
+            .imgs {
+              margin-top: 20px;
+
+              img {
+                width: 221px;
+                height: 221px;
+                margin-right: 8px;
+              }
+
+              img:nth-child(3n + 0) {
+                margin-right: 0;
+              }
+            }
+
+            .cards-bottom {
+              margin: 24px 0 16px 0;
+              font-size: 24px;
+              color: #999999;
+            }
+          }
+        }
+
+        ::v-deep .mask {
+          .moreMenu {
+            .menu {
+              text-align: center;
+              line-height: 80px;
+              width: 192px;
+              height: 80px;
+              font-size: 28px;
+              font-weight: 400;
+              color: #333333;
+            }
+          }
+        }
+      }
+
+      .addBtns {
+        text-align: center;
+        color: #b7b7b7;
+        margin-top: 10px;
+        font-size: 28px;
+
+        .toAdds {
+          color: #467dfe;
+        }
+      }
+    }
+  }
+
+  .addBtn {
+    width: 96px;
+    height: 96px;
+    flex-shrink: 0;
+    background: $uni-color-primary;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    font-size: 48px;
+    color: #fff;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    position: fixed;
+    right: 6px;
+    bottom: 106px;
+    z-index: 9;
+  }
+  .empty {
+    height: 100%;
+    img {
+      width: 282px;
+      height: 306px;
+      margin: 168px 0 0 234px;
+    }
+    p {
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 44px;
+      span {
+        color: #467dfe;
+      }
+    }
+  }
+}
+</style>

src/project/pingchang/AppWalkask/add.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="add">
+    <div v-if="addList">
+      <div class="header-description">
+        <u-form :model="forms" ref="uForm" label-width="auto">
+          <u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
+            <AiAreaPicker :value="forms.areaId" :areaId="areaIdProps" @select="areaSelect" isForm/>
+          </u-form-item>
+
+          <div class="line"></div>
+
+          <u-form-item label="走访对象" prop="name" required :right-icon="id ? '' : ''" class="create_user_names">
+            <!-- <u-input v-model="forms.name" disabled placeholder="请选择走访对象" @click="toWalkObject" /> -->
+            <AiPagePicker single @select="handleSelectUser" type="resident" style="width:100%;text-align:right;">
+              <AiMore v-model="forms.name"/>
+            </AiPagePicker>
+          </u-form-item>
+          <u-form-item label="联系方式" prop="phone" required class="realitys">
+            <u-input v-model="forms.phone" type="number" placeholder="请输入" input-align="right" />
+          </u-form-item>
+          <div class="line"></div>
+
+          <u-form-item label="区域定位" prop="address" required :right-icon="id ? '' : 'arrow-right'" class="realitys">
+            <u-input v-model="forms.address" disabled placeholder="请点击" @click="chooseAddress" />
+          </u-form-item>
+
+          <div class="line"></div>
+
+          <u-form-item label="走访时间" prop="visitTime" required :right-icon="id ? '' : 'arrow-right'" class="realitys">
+            <u-input v-model="forms.visitTime" disabled placeholder="请选择走访时间" @click="showVisitTime = true" />
+
+            <u-picker v-model="showVisitTime" :params="params" mode="time" @confirm="change"></u-picker>
+          </u-form-item>
+
+          <div class="line"></div>
+
+          <u-form-item label="现实状态" prop="reality" :right-icon="id ? '' : 'arrow-right'" class="realitys">
+            <u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="realityClick" />
+
+            <u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="realityStstus"></u-select>
+          </u-form-item>
+
+          <div class="line"></div>
+
+          <u-form-item label="入户走访事项" prop="title" required label-position="top" :border-bottom="false">
+            <u-input v-model="forms.title" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60" :maxlength="30" />
+          </u-form-item>
+          <div class="hint">{{ forms.title.length }}/30</div>
+
+          <div class="line"></div>
+
+          <u-form-item label="入户走访内容" prop="description" label-position="top" :border-bottom="false">
+            <u-input v-model="forms.description" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60" :maxlength="500" />
+            <!-- <div>{{ forms.description.length }}/500</div> -->
+          </u-form-item>
+          <div class="hint">{{ forms.description.length }}/500</div>
+
+          <div class="line"></div>
+
+          <u-form-item label="图片(最多9张)" prop="images" class="avatars" label-position="top" :border-bottom="false">
+            <AiUploader :def.sync="forms.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
+          </u-form-item>
+        </u-form>
+      </div>
+
+      <div class="btn" @click="submit">保存</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'add',
+  components: {},
+  props: {},
+  data() {
+    return {
+      show: false,
+      forms: {
+        areaId: '',
+        areaName: '',
+
+        optionId: '',
+        name: '',
+        residentId: '',
+        address: '',
+        lng: '',
+        lat: '',
+        reality: '',
+        realityValue: '',
+        menuLevel3Name: '',
+        applicationId: '',
+        title: '',
+        description: '',
+        images: [],
+      },
+      showAreaId: false,
+      showStstus: false,
+      flag: false,
+      addList: true,
+      areaIdProps: '',
+      clickedUserSelect: false,
+      id: '',
+
+      name: '',
+      optionId: '',
+      showVisitTime: false,
+      params: {
+        year: true,
+        month: true,
+        day: true,
+        hour: true,
+        minute: true,
+        second: true,
+      },
+    }
+  },
+  computed: { ...mapState(['user']) },
+  onLoad(o) {
+    this.id = o.id ? o.id : ''
+    this.areaIdProps = this.user.areaId
+    if (!this.id) {
+      this.forms.areaId = this.user.areaId
+    }
+    this.$dict.load('realityStatus').then(() => {
+      this.getDetail()
+    })
+
+    // uni.$on('goBack', (data) => {
+    //   this.forms.menuLevel3Name = data.applicationName
+    //   this.forms.applicationId = data.applicationId
+    //   this.forms.name = data.selectUser.name
+    //   this.forms.optionId = data.selectUser.id
+    // })
+  },
+  onShow() {
+    document.title = '新建走访'
+  },
+  mounted() {},
+  methods: {
+    chooseAddress() {
+      uni.chooseLocation({
+        success: (res) => {
+          this.forms.address = res.address
+          this.forms.lat = res.latitude
+          this.forms.lng = res.longitude
+        },
+      })
+    },
+    handleSelectUser(v) {
+      console.log(v)
+      this.forms.residentId = v?.[0]?.id || ""
+      this.forms.name = v?.[0]?.name || ""
+    },
+    realityClick() {
+      if (this.id) return
+      if (!this.forms.name) {
+        return this.$u.toast('请选择走访对象')
+      }
+      this.showStstus = true
+    },
+
+    getDetail() {
+      if (this.id) {
+        this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
+          if (res?.data) {
+            this.forms = res.data
+            this.forms.create_user_name = res.data.name
+            this.forms.realityValue = res.data.reality
+            this.forms.areaId = res.data.areaId
+            this.forms.areaName = res.data.areaName
+            this.forms.reality = this.$dict.getLabel('realityStatus', res.data.reality)
+            if (res.data.images) {
+              this.forms.images = JSON.parse(res.data.images || '[]')
+            }
+          }
+        })
+      }
+    },
+
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.forms.name) {
+            return this.$u.toast('请选择走访对象')
+          }
+          if (!this.forms.phone) {
+            return this.$u.toast('请输入联系方式')
+          }
+          if (!this.forms.visitTime) {
+            return this.$u.toast('请选择走访时间')
+          }
+          if (!this.forms.title) {
+            return this.$u.toast('请输入入户走访事项')
+          }
+
+          const imgs = []
+          if (this.forms.images) {
+            this.forms.images.map((e) => {
+              imgs.push({ url: e.url, id: e.id })
+            })
+          }
+
+          this.flag = true
+          this.$http
+            .post(`/app/appvisitvondolence/addOrUpdate`, {
+              areaId: this.forms.areaId,
+              applicationId: this.forms.applicationId,
+              name: this.forms.name,
+              visitTime: this.forms.visitTime,
+              residentId: this.forms.residentId,
+              // menuLevel3Name: this.forms.menuLevel3Name,
+              applicationId: this.forms.applicationId,
+
+              reality: this.forms.realityValue ? this.forms.realityValue : this.forms.reality,
+              title: this.forms.title,
+              description: this.forms.description,
+              createUserId: this.user.id,
+              createUserName: this.user.name,
+              images: JSON.stringify(imgs) || [],
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('保存成功')
+                this.flag = false
+                uni.$emit('updateList')
+                setTimeout(() => {
+                  uni.navigateBack()
+                }, 600)
+              }
+            })
+        } else {
+          this.$u.toast('保存失败')
+        }
+      })
+    },
+
+    areaSelect(e) {
+      this.forms.areaId = e
+    },
+
+    change(e) {
+      this.forms.visitTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
+    },
+
+    realityStstus(e) {
+      this.forms.reality = e[0].label
+      this.forms.realityValue = e[0].value
+    },
+
+    toWalkObject() {
+      uni.navigateTo({ url: `./selectType` })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  background: #f3f6f9;
+
+  .header-description {
+    padding-bottom: 162px;
+    background: #f3f6f9;
+    ::v-deep .u-form {
+      background: #fff;
+      .u-form-item {
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            padding-bottom: 0;
+          }
+        }
+      }
+
+      .u-form-item:last-child {
+        margin-bottom: 0;
+        padding-bottom: 20px !important;
+      }
+
+      .areaIds {
+        .u-form-item__body {
+          .u-form-item--right {
+            .u-form-item--right__content {
+              .u-form-item--right__content__slot {
+                .AiAreaPicker {
+                  width: 100%;
+                  display: flex;
+                  justify-content: flex-end;
+
+                  .AiSearchPopup {
+                    .areaSelector {
+                      .location {
+                        opacity: 0;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      .create_user_names,
+      .realitys {
+        .u-form-item__body {
+          .u-form-item--right__content__slot {
+            .u-input {
+              text-align: right !important;
+            }
+          }
+        }
+      }
+
+      .line {
+        height: 16px;
+        background: #f3f6f9;
+      }
+
+      .hint {
+        padding: 4px 32px 8px 0;
+        text-align: right;
+        color: #999;
+      }
+
+      .avatars {
+        .u-form-item__body {
+          .default {
+            width: 160px;
+            height: 160px;
+          }
+        }
+      }
+    }
+  }
+
+  .btn {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #1365dd;
+    text-align: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #ffffff;
+    z-index: 999;
+  }
+  ::v-deep .uicon-arrow-right{
+    color: #999!important;
+  }
+}
+</style>

src/project/pingchang/AppWalkask/detail.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="detail">
+    <div class="header-top">
+      <div class="hint">{{ data.title }}</div>
+
+      <div class="walk-item">
+        <span>走访对象：</span>
+        <span class="info-value">
+          {{ data.name }}
+          <span v-if="data.labelList">
+            <span class="tags" v-for="(item, index) in data.labelList" :key="index">{{ item }}</span>
+          </span>
+
+        </span>
+      </div>
+      <div class="walk-item">
+        <span>联系方式：</span>
+        <span>{{ data.phone }} </span>
+      </div>
+      <div class="walk-item" v-if="data.reality">
+        <span>现实状态：</span>
+        <span>{{ $dict.getLabel('realityStatus', data.reality) }} </span>
+      </div>
+
+      <div class="walk-item">
+        <span>走访人员：</span>
+        <span><AiOpenData v-if="data.createUserName" type="userName" :openid="data.createUserName" style="display: inline-block" /></span>
+      </div>
+
+      <div class="walk-item">
+        <span>走访时间：</span>
+        <span>{{ data.visitTime }}</span>
+      </div>
+    </div>
+
+    <div class="header-middle">
+      <div class="hint-con" v-if="data.description">{{ data.description }}</div>
+
+      <div class="imgs">
+        <img :src="item.url" alt="" v-for="(item, index) in data.images" :key="index" @click.stop="previewImage(data.images, item.url)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detail',
+  components: {},
+  props: {
+    params: {},
+  },
+  data() {
+    return {
+      data: {},
+      id: '',
+    }
+  },
+  computed: {},
+  onLoad(o) {
+    this.id = o.id
+    this.$dict.load('realityStatus', 'appSpecialTypeFive').then(() => {
+      this.getDetail()
+    })
+  },
+  onShow() {
+    document.title = '走访详情'
+  },
+  mounted() {},
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
+        if (res?.data) {
+          this.data = res.data
+          if (this.data.images) {
+            this.data.images = JSON.parse(this.data.images || '[]')
+            this.data.labelList = this.data.labels.split(',') || []
+          }
+        }
+      })
+    },
+
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map((v) => v.url),
+        current: img,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  height: 100%;
+}
+.detail {
+  height: 100%;
+  background: #fff;
+
+  .header-top {
+    background: #3975c6;
+    padding: 24px 32px 32px;
+
+    .hint {
+      font-size: 40px;
+      font-weight: 500;
+      color: #ffffff;
+    }
+
+    .walk-item {
+      font-size: 28px;
+      color: #d7e3f3;
+      margin-top: 16px;
+      .tags {
+        display: inline-block;
+        padding: 0 12px;
+        height: 40px;
+        border-radius: 4px;
+        border: 1px solid #ffffff;
+        margin: 0 8px 0 0;
+      }
+      .tags:nth-of-type(1) {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .header-middle {
+    background: #fff;
+    padding: 32px 32px 32px 32px;
+
+    .hint-con {
+      font-size: 32px;
+      color: #666666;
+      line-height: 56px;
+    }
+
+    .imgs {
+      margin: 32px 0 48px 0;
+
+      img {
+        width: 218px;
+        height: 218px;
+        margin-right: 16px;
+      }
+
+      img:nth-child(3n + 0) {
+        margin-right: 0;
+      }
+    }
+  }
+  .info-value{
+    display: inline-block;
+    width: 540px;
+    overflow:hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: text-top;
+  }
+}
+</style>

src/project/pingchang/AppWalkask/selectType.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="selectType">
+    <div class="header-top" v-if="!showType">
+      <u-search v-model="keyword" placeholder="请输入姓名" :show-action="false" bg-color="#F5F5F5" search-icon-color="#CCCCCC" placeholder-color="#999999" @search="handerSearch" @clear="handerClear"></u-search>
+    </div>
+
+    <div class="header-middle">
+      <div class="hint">
+        <span :style="{ color: applicationName ? '#3F8DF5' : '' }" @click="back">可选范围</span>
+        <span> {{ applicationName ? ' / ' + applicationName : '' }}</span>
+      </div>
+
+      <div class="showTypes" v-if="showType">
+        <div class="empty-div"></div>
+
+        <div v-if="typeList.length > 0">
+          <div class="cards" v-for="(item, i) in typeList" :key="i" @click="toUserSelect(item)">
+            <img src="./img/tx@2x.png" alt="" />
+
+            <div class="rightes">
+              <div class="applicationNames">{{ item.dictName }}</div>
+
+              <img src="./img/2.png" alt="" class="imgs" />
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+
+      <div class="showUsers" v-else>
+        <div v-if="userList.length > 0">
+          <div class="cards" v-for="(e, index) in userList" :key="index">
+            <div class="imges">
+              <img src="./img/xzh.png" alt="" class="imgselect" v-if="e.isChecked" @click="userClick(e, index)" />
+              <img src="./img/xz.png" alt="" class="imgselect" v-else @click="userClick(e, index)" />
+
+              <img src="./img/tx@2x.png" alt="" class="avatras" />
+            </div>
+
+            <div class="rights">
+              <div class="applicationNames">{{ e.name }}</div>
+              <div class="idNumbers">{{ e.idNumber && e.idNumber.replace(/^(\w{6})\w{8}(.*)$/, '$1********$2') }}</div>
+            </div>
+          </div>
+        </div>
+
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else></AiEmpty>
+      </div>
+    </div>
+
+    <div class="subBtn" @click="submit">
+      <div>确定选择</div>
+    </div>
+    <AiFixedBtn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAdd()" />
+    </AiFixedBtn>
+
+    <!-- <AiBck /> -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selectType',
+  components: {},
+  props: {},
+  data() {
+    return {
+      typeList: [],
+      userList: [],
+      keyword: '',
+      current: 1,
+      showType: true,
+      applicationName: '',
+      applicationId: '',
+      selectUser: {},
+      type: '',
+    }
+  },
+  onLoad() {
+    this.$dict.load('appSpecialTypeFive').then(() => {
+      this.typeList = this.$dict.getDict('appSpecialTypeFive')
+    })
+    uni.$on('specialPeopleList', () => {
+      this.current = 1
+      this.getUsers()
+    })
+  },
+  methods: {
+    toAdd() {
+      uni.navigateTo({ url: '../AppSpecialPeople/add' })
+    },
+
+    userClick(row, index) {
+      if (this.userList[index].isChecked) {
+        this.userList[index].isChecked = false //取消
+        this.selectUser = {}
+      } else {
+        this.userList.map((item) => {
+          item.isChecked = false
+        })
+        this.userList[index].isChecked = true
+        this.selectUser = row
+      }
+    },
+    // getUser(data) {
+    //   this.applicationId = data.id
+    //   this.appId = data.id
+    //   this.getUsers()
+    // },
+
+    getUsers() {
+      this.$http.post(`/app/appspecialadjustment/allList?size=20&current=${this.current}`, { type: this.type, name: this.keyword }).then((res) => {
+        if (res.code == 0) {
+          if (this.current > res.data.pages) {
+            return
+          }
+          res.data.records.map((item) => {
+            item.isChecked = false
+          })
+          this.userList = this.current > 1 ? [...this.userList, ...res.data.records] : res.data.records
+        }
+      })
+    },
+
+    submit() {
+      if (this.selectUser.id != null) {
+        uni.$emit('goBack', { selectUser: this.selectUser, applicationName: this.applicationName, applicationId: this.type })
+        uni.navigateBack()
+      } else {
+        return this.$u.toast('请选择人员')
+      }
+    },
+
+    toUserSelect(item) {
+      this.applicationName = item.dictName
+      this.type = item.dictValue
+      this.getUsers()
+
+      this.showType = false
+    },
+
+    back() {
+      this.keyword = ''
+      this.typeList = this.$dict.getDict('appSpecialTypeFive')
+      this.userList = []
+      this.applicationName = ''
+      this.showType = true
+    },
+
+    handerSearch(e) {
+      if (!this.showType) {
+        this.keyword = e
+        this.current = 1
+        this.userList = []
+        // this.getUser()
+        this.getUsers()
+      }
+    },
+
+    handerClear() {
+      this.keyword = ''
+      this.current = 1
+      this.getUsers()
+    },
+  },
+  onReachBottom() {
+    this.current++
+    this.getUsers()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.selectType {
+  height: 100%;
+  background: #fff;
+  .header-top {
+    background: #fff;
+    padding: 20px 32px;
+  }
+
+  .header-middle {
+    padding-bottom: 140px;
+    .hint {
+      padding: 0 20px 0 32px;
+      height: 112px;
+      line-height: 112px;
+      box-shadow: 0px 1px 0px 0px #e4e5e6;
+      font-size: 30px;
+      font-weight: 500;
+    }
+
+    .showTypes {
+      .empty-div {
+        height: 16px;
+        background: #f5f5f5;
+      }
+
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+        }
+        .rightes {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .imgs {
+            width: 40px;
+            height: 40px;
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+
+    .showUsers {
+      .cards {
+        display: flex;
+        align-items: center;
+        height: 120px;
+        line-height: 120px;
+        // background: pink;
+        padding: 0 0 0 32px;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+
+        .rights {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 40px;
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+          }
+          .idNumbers {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+
+  .subBtn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 118px;
+    background: #f4f8fb;
+    div {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 4px;
+      font-size: 32px;
+      color: #fff;
+      margin: 20px 34px 0 0;
+      float: right;
+    }
+  }
+  .addBtn {
+    width: 96px;
+    height: 96px;
+    flex-shrink: 0;
+    background: $uni-color-primary;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    font-size: 48px;
+    color: #fff;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+}
+</style>