添加编辑走访慰问

src/App.vue

@@ -47,7 +47,7 @@ body {
 }
 
 uni-page-body {
-  min-height: 100%;
+  // min-height: 100%;
   background: #f5f5f5;
   position: relative;
 }

src/apps/AppWalkask/AppWalkask.vue

@@ -1,30 +1,93 @@
 <template>
   <div class="AppWalkask">
-    <u-navbar title="走访慰问" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :background="backgroundNavbar"> </u-navbar>
+    <template v-if="isList">
+      <u-navbar title="走访慰问" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :background="backgroundNavbar"> </u-navbar>
 
-    <div class="header-top">
+      <div class="header-top">
-      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+        <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>
 
-    <div>
+      <div class="header-middle">
-      <div v-if="current == 0">0</div>
+        <div class="currentLeft" v-if="current == 0">
-      <div v-if="current == 1">1</div>
+          <div class="currentLeft-top">
-    </div>
+            <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="btnHide" class="datas">
+            <div class="cards" 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>
+
+          <!-- <ai-empty description="您还未添加过入户调查走访" class="emptyWrap" v-else> </ai-empty> -->
+
+          <div class="addBtn">点击<span class="toAdd">新增按钮</span>试试试吧~</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'
+
 export default {
   name: 'AppWalkask',
   appName: '走访慰问',
-  computed: {},
+  components: { AiEmpty, add },
-  components: {},
+  props: {},
   data() {
     return {
+      data: [],
       backgroundNavbar: {
         backgroundColor: '#3975C6',
       },
-      list: [
+      tabList: [
         {
           name: '全部',
         },
@@ -33,19 +96,188 @@ export default {
         },
       ],
       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
+      // }
+    },
+
+    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%;
+  // background: #fff;
+  // padding: 0 0 100% 0;
+  .header-middle {
+    padding-bottom: 56px;
+    .currentLeft {
+      .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>

src/apps/AppWalkask/components/add.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="add">
+    <u-navbar title="新建走访" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :background="backgroundNavbar"> </u-navbar>
+
+    <div class="header-content">
+      <u-form :model="forms" ref="uForm" label-width="auto">
+        <u-form-item label="区域选择" prop="areaId" required style="position: relative">
+          <u-input v-model="forms.areaId" disabled placeholder="请选择区域" @click="showAreaId = true" />
+
+          <u-select v-model="showAreaId" :list="areaIdlist" @confirm="changeAreaId"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="走访对象" prop="object" style="position: relative">
+          <u-input v-model="forms.object" disabled placeholder="请选择走访对象" @click="showObject = true" />
+
+          <u-select v-model="showObject" :list="Objectlist" @confirm="changeObject"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="现实状态" prop="nowStstus" required style="position: relative">
+          <u-input v-model="forms.nowStstus" disabled placeholder="请选择走访对象" @click="showStstus = true" />
+
+          <u-select v-model="showStstus" :list="Objectlist" @confirm="changeStstus"></u-select>
+
+          <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="入户走访事项" prop="things" required label-position="top">
+          <u-input v-model="forms.things" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60" maxlength="30" />
+          <div>{{ forms.things.length }}/30</div>
+        </u-form-item>
+
+        <u-form-item label="入户走访内容" prop="content" label-position="top">
+          <u-input v-model="forms.content" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60" maxlength="500" />
+          <div>{{ forms.things.length }}/500</div>
+        </u-form-item>
+
+        <u-form-item label="图片" prop="avatar" required label-position="top">
+          <ai-uploader v-model="forms.avatar" multiple @change="change" placeholder="上传图片" :limit="5"></ai-uploader>
+        </u-form-item>
+      </u-form>
+    </div>
+
+    <div class="btn" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+import AiUploader from '../../../components/AiUploader.vue'
+
+export default {
+  name: 'add',
+  components: { AiUploader },
+  props: {},
+  data() {
+    return {
+      backgroundNavbar: {
+        backgroundColor: '#3975C6',
+      },
+      forms: {
+        areaId: '',
+        object: '',
+        nowStstus: '',
+        things: '',
+        content: '',
+        avatar: [],
+      },
+      showAreaId: false,
+      areaIdlist: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      Objectlist: [
+        {
+          value: '0',
+          label: '武汉',
+        },
+        {
+          value: '1',
+          label: '北京',
+        },
+      ],
+      showObject: false,
+      showStstus: false,
+      flag: false,
+    }
+  },
+  computed: {},
+  onLoad() {},
+  onShow() {},
+  methods: {
+    submit() {
+      if (this.flag) return
+
+      this.$refs.uForm.validate((valid) => {
+        if (valid) {
+          if (!this.form.areaId) {
+            return this.$u.toast('请选择走访对象')
+          }
+          if (!this.form.things) {
+            return this.$u.toast('请输入入户走访事项')
+          }
+
+          this.flag = true
+          this.$instance
+            .post(`/appjobresume/addOrUpdate`, {
+              areaId: this.forms.areaId,
+              object: this.forms.object,
+              nowStstus: this.forms.nowStstus,
+              things: this.forms.things,
+              content: this.forms.content,
+              avatar: this.forms.avatar[0],
+              // education: this.form.education == Number ? this.form.education : this.forms.educationValue,
+              id: this.id,
+            })
+            .then((res) => {
+              if (res.code == 0) {
+                this.$u.toast('保存成功')
+                this.flag = false
+                uni.navigateBack({})
+              }
+            })
+        } else {
+          this.$u.toast('保存失败')
+        }
+      })
+    },
+
+    changeAreaId(e) {
+      console.log(e)
+      this.forms.areaId = e[0].value
+      this.forms.areaIdValue = e[0].label
+    },
+
+    changeObject(e) {
+      console.log(e)
+      this.forms.object = e[0].value
+      this.forms.objectlabel = e[0].label
+    },
+
+    changeStstus(e) {
+      console.log(e)
+      this.forms.nowStstus = e[0].value
+      this.forms.nowStstuslabel = e[0].label
+    },
+
+    change(e) {
+      console.log(e)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  height: 100%;
+  padding-bottom: 112px;
+  .header-content {
+    ::v-deep .u-form {
+      .u-form-item {
+        margin-bottom: 16px;
+      }
+      .u-form-item:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .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;
+  }
+}
+</style>