dvcp_v2_wxcp_app/src/apps/AppWalkask/AppWalkask.vue

<template>
  <div class="AppWalkask">
    <template v-if="isList">
      <u-navbar title="走访慰问" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :border-bottom="false" :background="backgroundNavbar"> </u-navbar>

      <div class="header-top">
        <u-tabs :list="tabList" :is-scroll="false" :current="current" 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="current == 0">
          <div class="currentLeft-top">
            <div class="left">
              <u-icon name="map"></u-icon>
              <div class="btns" style="display: inline-block" @click="show = true">
                <u-icon name="arrow-down"></u-icon>
              </div>
            </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-select v-model="show" :list="areaList"></u-select>
          </div>

          <!-- v-if="data.length > 0" -->
          <div @click.stop="btnHide" class="datas" v-if="data.length > 0">
            <div class="cards" @click.stop="toDetail" v-for="(item, i) in 4" :key="i">
              <div class="cards-top">
                <div class="cards-left">
                  <span class="walkName">走访对象：李伟民</span>
                  <span class="tags">残疾人</span>
                  <span class="tags">居家看护</span>
                </div>

                <div class="cards-right" @click.stop="showHide">
                  <img src="../AppWalkask/components/images/1.png" alt="" />
                </div>

                <div class="btn" v-if="showBtn">
                  <span @click="toAdd">编辑</span>
                  <span @click="deletShow = true">删除</span>
                </div>
              </div>

              <div class="cards-hint">脱贫攻坚走脱贫攻坚脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家走访—徐家棚街道脱贫攻坚走访徐家访—徐家棚街脱贫攻坚脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家走访—徐家棚街道脱贫攻脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家坚走访徐家道脱贫攻坚走访徐家脱贫攻坚走访—徐家棚街道脱贫攻脱贫攻坚走访—徐家棚街道脱贫攻坚走访徐家坚走访徐家</div>

              <div class="imgs">
                <img src="../AppWalkask/components/images/天使彦5.jpg" alt="" v-for="(item, i) in 4" :key="i" />
              </div>

              <div class="cards-bottom">
                <span>走访人：林珊珊</span>
                <span>2021-12-18 13:45:36</span>
              </div>
            </div>
          </div>

          <div v-else>
            <ai-empty description="您还未添加过入户调查走访" class="emptyWrap"> </ai-empty>

            <div class="addBtn">点击<span class="toAdd" @click="toAdd">新增按钮</span>试试试吧~</div>
          </div>
        </div>

        <div class="currentRight" v-if="current == 1">1</div>
      </div>

      <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>

      <img src="../AppWalkask/components/images/add@2x.png" class="fixedImg" alt="" @click="toAdd" />
    </template>

    <component v-else :is="comp" :params="params"></component>
  </div>
</template>

<script>
import AiEmpty from '../../components/AiEmpty.vue'
import add from './components/add.vue'
import detail from './components/detail.vue'

export default {
  name: 'AppWalkask',
  appName: '走访慰问',
  components: { AiEmpty, add, detail },
  props: {},
  data() {
    return {
      data: [],
      backgroundNavbar: {
        backgroundColor: '#3975C6',
      },
      tabList: [
        {
          name: '全部',
        },
        {
          name: '我的走访',
        },
      ],
      current: 0,
      show: false,
      areaList: [
        {
          value: '0',
          label: '武汉',
        },
        {
          value: '1',
          label: '襄阳',
        },
      ],
      current: 0,
      keyword: '',
      showBtn: false,
      deletShow: false,
      isList: true,
      comp: '',
      params: null,
    }
  },
  computed: {},
  onLoad() {},
  onShow() {},
  methods: {
    change(index) {
      this.current = index
    },

    toAdd(item) {
      console.log('编辑', '添加')
      // const { id } = item.id
      this.isList = false
      this.comp = 'add'
      this.params = 12313
      // if (id) {
      //   this.comp = 'add'
      //   this.params = id
      //   this.isList = false
      // }
    },

    toDetail(item) {
      // const { id } = item.id
      this.isList = false
      this.comp = 'detail'
      this.params = detail
    },

    delet() {
      console.log('delet')
    },

    showHide() {
      if (this.showBtn == false) {
        this.showBtn = true
      } else {
        this.showBtn = false
      }
    },

    btnHide() {
      this.showBtn = false
    },

    handerSearch(e) {
      this.keyword = e
      this.current = 1
      // this.getList()
    },

    handerClear() {
      this.keyword = ''
      this.current = 1
      // this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.AppWalkask {
  height: 100%;
  .header-middle {
    .currentLeft {
      padding-bottom: 56px;
      background: #fff;
      .currentLeft-top {
        display: flex;
        align-items: center;
        background: #3975c6;
        padding: 24px 30px;
        .left {
          width: 50%;
        }
      }

      .datas {
        .cards {
          margin: 30px 30px 24px 30px;
          border-bottom: 1px solid #dddddd;
          .cards-top {
            display: flex;
            justify-content: space-between;
            .cards-left {
              .walkName {
                font-size: 32px;
                font-weight: 500;
                margin-right: 16px;
              }
              .tags {
                display: inline-block;
                padding: 6px 16px;
                background: #f3f4f7;
                border-radius: 4px;
                font-size: 12px;
                color: #999999;
                margin-left: 16px;
              }
            }
            .cards-right {
              position: relative;
              width: 32px;
              margin-top: 1%;
            }
            .btn {
              position: absolute;
              z-index: 99;
              right: 45px;
              top: 350px;
              width: 224px;
              height: 204px;
              background: #ffffff;
              box-shadow: 0px 4px 12px 4px rgba(162, 162, 162, 0.5);
              border-radius: 4px;
            }
          }

          .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: 224px;
              height: 224px;
              margin-right: 8px;
            }
            img:nth-child(3n + 0) {
              margin-right: 0;
            }
          }

          .cards-bottom {
            margin: 24px 0 16px 0;
            font-size: 24px;
            color: #999999;
          }
        }
      }

      .addBtn {
        text-align: center;
        color: #b7b7b7;
        margin-top: 5px;
        font-weight: 800;
        .toAdd {
          color: #467dfe;
        }
      }
    }
  }

  .fixedImg {
    position: fixed;
    right: 0;
    top: 1004px;
    width: 128px;
    height: 128px;
  }
}
</style>