diff --git a/src/components/AiPagePicker/AiPagePicker.vue b/src/components/AiPagePicker/AiPagePicker.vue
new file mode 100644
index 0000000..9c31a68
--- /dev/null
+++ b/src/components/AiPagePicker/AiPagePicker.vue
@@ -0,0 +1,68 @@
+<template>
+  <section class="AiPagePicker">
+    <div @click="handleJump">
+      <slot v-if="$slots.default"/>
+      <div v-else v-text="selectedLabel"/>
+    </div>
+  </section>
+</template>
+
+<script>
+import qs from 'query-string'
+
+export default {
+  name: "AiPagePicker",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    type: {default: "resident"},
+    nodeKey: {default: "idNumber"},
+    selected: {default: () => []},
+    placeholder: {default: "选择人员"}
+  },
+  data() {
+    return {
+      configList: {
+        resident: {url: "/components/pages/selectResident", label: "name"},
+        gird: {url: "/components/pages/selectGird", label: "girdName"}
+      },
+    }
+  },
+  computed: {
+    config() {
+      return this.configList[this.type] || {}
+    },
+    selectedLabel() {
+      let {placeholder, config: {label}} = this
+      return this.selected?.map(e => e[label])?.toString() || placeholder
+    }
+  },
+  methods: {
+    handleJump() {
+      let {config, nodeKey} = this,
+          selected = this.value || this.selected?.map(e => e[nodeKey])
+      uni.$once('pagePicker', data => {
+        this.$emit("update:selected", data)
+        this.$emit("select", data)
+        this.$emit("change", data.map(e => e[nodeKey]))
+      })
+      let url = `${config.url}`,
+          qsstr = qs.stringify({
+            selected, ...this.$attrs
+          })
+      if (!!qsstr) {
+        url += `?${qsstr}`
+      }
+      uni.navigateTo({url})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiPagePicker {
+}
+</style>
diff --git a/src/components/pages/img/gird--select-icon.png b/src/components/pages/img/gird--select-icon.png
new file mode 100644
index 0000000..205144d
Binary files /dev/null and b/src/components/pages/img/gird--select-icon.png differ
diff --git a/src/components/pages/img/user-img.png b/src/components/pages/img/user-img.png
new file mode 100644
index 0000000..d9620e0
Binary files /dev/null and b/src/components/pages/img/user-img.png differ
diff --git a/src/components/pages/img/xz.png b/src/components/pages/img/xz.png
new file mode 100644
index 0000000..98f78cd
Binary files /dev/null and b/src/components/pages/img/xz.png differ
diff --git a/src/components/pages/img/xzh.png b/src/components/pages/img/xzh.png
new file mode 100644
index 0000000..967fa39
Binary files /dev/null and b/src/components/pages/img/xzh.png differ
diff --git a/src/components/pages/selectGird.vue b/src/components/pages/selectGird.vue
new file mode 100644
index 0000000..3c9b8c6
--- /dev/null
+++ b/src/components/pages/selectGird.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="selectGird">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="name" :show-action="false"/>
+      <div class="hint">
+        <span v-for="(item, index) in selectList" :key="index"><span v-if="index" style="margin:0 4px;">/</span><span
+            style="color:#3F8DF5" @click="girdNameClick(item, index)">{{ item.girdName }}</span></span>
+      </div>
+    </AiTopFixed>
+    <div class="header-middle">
+      <div class="showTypes">
+        <div v-if="options.length > 0">
+          <div class="cards" v-for="(item, index) in options" :key="index" @click="itemClick(item)">
+            <div class="imges">
+              <img src="./img/xzh.png" alt="" class="imgselect" v-if="item.isChecked"
+                   @click.stop="girdClick(item, index)"/>
+              <img src="./img/xz.png" alt="" class="imgselect" v-else
+                   @click.stop="girdClick(item, index)"/>
+              <img src="./img/gird--select-icon.png" alt="" class="avatras"/>
+            </div>
+            <div class="rightes">
+              <div class="applicationNames fill">{{ item.girdName }}</div>
+              <u-icon v-if="item.girdLevel != 2" name="arrow-right" color="#ddd"/>
+            </div>
+          </div>
+        </div>
+        <AiEmpty description="暂无数据" class="emptyWrap" v-else/>
+      </div>
+    </div>
+    <div class="pad-b118"/>
+    <div class="footer">
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'selectGird',
+  appName: "网格选择",
+  data() {
+    return {
+      current: 1,
+      name: '',
+      list: [],
+      selected: [],
+      SelectGird: {},
+      allData: null,
+      treeList: [],
+      selectList: [],
+      userGird: {},
+      userList: [],
+      girdLevel: 0,
+      parentGirdId: '',
+      isMyGird: false, //是否只查询当前户对应的网格员管理的三级网格
+    }
+  },
+  computed: {
+    options() {
+      return this.treeList.filter(e => e.girdName?.indexOf(this.name) > -1 || !this.name) || []
+    }
+  },
+  onLoad(params) {
+    console.log(params)
+    if (params.girdLevel) {
+      this.girdLevel = params.girdLevel
+    }
+    if (params.isMyGird) {
+      this.isMyGird = params.isMyGird
+    }
+    this.isGirdUser()
+  },
+  methods: {
+    isGirdUser() {
+      this.$http.post('/app/appgirdmemberinfo/checkLogOnUser').then((res) => {
+        if (res?.data) {
+          if (res.data.checkType) {
+            this.userGird = res.data
+            if (this.isMyGird) {
+              this.getMyGird()
+            } else {
+              this.getTree()
+            }
+
+          } else {
+            this.$u.toast('当前人员不是网格员或网格管理员')
+          }
+        }
+      })
+    },
+    getMyGird() {
+      this.selectList = []
+      this.$http.post('/app/appgirdmemberinfo/queryMyGirdListByLevel2AndUser').then((res) => {
+        if (res.code == 0) {
+          this.allData = res.data
+          this.treeInit()
+        }
+      })
+    },
+    getTree() {
+      this.selectList = []
+      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${this.girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${this.parentGirdId}`).then((res) => {
+        if (res?.data) {
+          this.allData = res.data
+          this.treeInit()
+        }
+      })
+    },
+
+    treeInit() {
+      this.treeList = this.allData
+      this.treeList.map((item) => {
+        item.isChecked = false
+      })
+      let obj = {
+        girdName: '可选范围',
+        id: '',
+        girdLevel: ''
+      }
+      this.selectList.push(obj)
+    },
+
+    itemClick(row) {
+      if (row.girdLevel == 2) return
+      const obj = {
+        girdName: row.girdName,
+        id: row.id,
+        girdLevel: row.girdLevel
+      };
+      this.selectList.push(obj)
+      this.searckGird(row)
+    },
+
+    searckGird(row) {
+      if (row.girdLevel == 2) return
+      const girdLevel = Number(row.girdLevel) + 1;
+      this.$http.post(`/app/appgirdinfo/queryAppGirdInfoByGirdLevel?girdLevel=${girdLevel}&girdMemberId=${this.userGird.girdMemberId}&parentGirdId=${row.id}`).then((res) => {
+        if (res?.data) {
+          this.treeList = res.data
+        }
+      })
+    },
+
+    girdNameClick(row, index) {
+      this.userList = []
+      if (!index) { //第一级别
+        this.selectList = []
+        this.treeInit()
+      } else {
+        const list = [];
+        this.selectList.map((item, i) => {
+          if (i <= index) {
+            list.push(item)
+          }
+        })
+        this.selectList = list
+        this.searckGird(row)
+      }
+    },
+
+
+    girdClick(row, index) {
+      if (this.treeList[index].isChecked) {//取消
+        this.treeList[index].isChecked = false
+        this.SelectGird = {}
+      } else {
+        this.treeList.map((item) => {
+          item.isChecked = false
+        })
+        this.treeList[index].isChecked = true
+        this.SelectGird = row
+      }
+      this.$forceUpdate()
+    },
+    confirm() {
+      if (this.SelectGird.id != null) {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker", [this.SelectGird])
+          }
+        })
+      } else {
+        return this.$u.toast('请选择网格')
+      }
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.selectGird {
+  height: 100%;
+  background: #fff;
+  padding-bottom: 140px;
+
+  .hint {
+    padding-bottom: 28px;
+    line-height: 56px;
+    font-size: 30px;
+    font-weight: 500;
+    word-break: break-all;
+  }
+
+  .header-middle {
+    .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;
+
+        .imges {
+          display: flex;
+          align-items: center;
+          // width: 200px;
+          .imgselect {
+            width: 48px;
+            height: 48px;
+            vertical-align: middle;
+          }
+
+          .avatras {
+            width: 74px;
+            height: 74px;
+            border-radius: 8px;
+            margin-left: 36px;
+          }
+        }
+
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+        }
+
+        .rightes {
+          width: calc(100% - 188px);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-left: 32px;
+          border-bottom: 1px solid #e4e5e6;
+          padding-right: 16px;
+          box-sizing: border-box;
+
+          .applicationNames {
+            font-size: 36px;
+            font-weight: 500;
+            color: #333333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+  }
+
+  .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;
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/pages/selectResident.vue b/src/components/pages/selectResident.vue
new file mode 100644
index 0000000..612e0da
--- /dev/null
+++ b/src/components/pages/selectResident.vue
@@ -0,0 +1,171 @@
+<template>
+  <div class="selectResident">
+    <AiTopFixed>
+      <u-search placeholder="搜索" v-model="name" :show-action="false" @change="getList"></u-search>
+    </AiTopFixed>
+    <div class="user-list">
+      <template v-if="list.length>0">
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div class="select-img" @click="checkClick(index)">
+            <img :src="item.isCheck ? checkIcon : cirIcon" alt="">
+          </div>
+          <div class="user-info">
+            <img :src="item.photo" alt="" v-if="item.photo">
+            <img src="./img/user-img.png" alt="" v-else>{{ item.name }}
+          </div>
+        </div>
+      </template>
+      <AiEmpty v-else/>
+    </div>
+    <div class="pad-b118"></div>
+    <div class="footer">
+      <div class="btn" @click="confirm">确定选择</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  name: "selectResident",
+  appName: "人员选择器(居民档案)",
+  data() {
+    return {
+      current: 1,
+      name: '',
+      list: [],
+      cirIcon: require('./img/xz.png'),
+      checkIcon: require('./img/xzh.png'),
+      selected: []
+    }
+  },
+  computed: {...mapState(['user'])},
+  onLoad(query) {
+    if (query.selected) {
+      this.selected = query.selected?.split(",") || []
+    }
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.$http.post(`/app/appresident/list`, null, {
+        params: {
+          current: this.current,
+          size: 20,
+          areaId: this.user.areaId,
+          con: this.name
+        }
+      }).then(res => {
+        if (res?.data) {
+          res.data.records.forEach(e => {
+            e.isCheck = this.selected.includes(e.idNumber)
+          })
+          if (this.current > 1 && this.current > res.data.pages) {
+            return
+          }
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
+        }
+      })
+    },
+    checkClick(index) {
+      this.list[index].isCheck = !this.list[index].isCheck
+    },
+    confirm() {
+      let checkList = []
+      this.list.map((item) => {
+        if (item.isCheck) {
+          checkList.push(item)
+        }
+      })
+      if (!checkList.length) {
+        return this.$u.toast('请先选择人员')
+      } else {
+        uni.navigateBack({
+          success: () => {
+            uni.$emit("pagePicker", checkList)
+          }
+        })
+      }
+    }
+  },
+  onReachBottom() {
+    this.current++
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.selectResident {
+  ::v-deep .AiTopFixed .u-search {
+    margin-bottom: 0 !important;
+  }
+
+  .pad-b118 {
+    padding-bottom: 118px;
+  }
+
+  .user-list {
+    background-color: #fff;
+
+    .item {
+      .select-img {
+        display: inline-block;
+
+        img {
+          width: 48px;
+          height: 48px;
+          margin: 12px 36px 12px 30px;
+          vertical-align: middle;
+        }
+      }
+
+      .user-info {
+        display: inline-block;
+        padding: 20px 0 20px 0;
+        width: calc(100% - 114px);
+        height: 100%;
+        border-bottom: 1px solid #E4E5E6;
+        font-size: 36px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 74px;
+
+        img {
+          width: 74px;
+          height: 74px;
+          border-radius: 8px;
+          margin-right: 34px;
+          vertical-align: bottom;
+        }
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 118px;
+    background: #F4F8FB;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    text-align: right;
+
+    .btn {
+      display: inline-block;
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      background: #1365DD;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FFF;
+      margin: 20px 34px 0 0;
+    }
+  }
+}
+</style>
diff --git a/src/mods/AppActivityList/addContent.vue b/src/mods/AppActivityList/addContent.vue
index db2e60d..5c605ae 100644
--- a/src/mods/AppActivityList/addContent.vue
+++ b/src/mods/AppActivityList/addContent.vue
@@ -22,14 +22,10 @@
   </div>
 </template>
 <script>
-import AiUploader from '@/components/AiUploader/AiUploader'
 import {mapState} from 'vuex'
 
 export default {
   name: "addContent",
-  components: {
-    AiUploader
-  },
   computed: {
     ...mapState(['user'])
   },
diff --git a/src/mods/AppAddressBook/AppAddressBook.vue b/src/mods/AppAddressBook/AppAddressBook.vue
index b2e5cbe..fec8aab 100644
--- a/src/mods/AppAddressBook/AppAddressBook.vue
+++ b/src/mods/AppAddressBook/AppAddressBook.vue
@@ -9,13 +9,13 @@
     <!-- <div class="areaSelection">
       <div class="area">区域选择</div>
       <div class="select">
-        <ai-area-picker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
+        <AiAreaPicker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
           <div class="ai-area__wrapper">
             <span class="label" v-if="areaName">{{ areaName }}</span>
             <span v-else>请选择</span>
             <u-icon name="arrow-right"></u-icon>
           </div>
-        </ai-area-picker>
+        </AiAreaPicker>
       </div>
     </div> -->
 
@@ -153,7 +153,7 @@ export default {
   box-sizing: border-box;
   padding: 32px 48px;
   background: #ffffff;
-  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
 
   & > label {
     font-size: 32px;
diff --git a/src/mods/AppAgProducts/agAdd.vue b/src/mods/AppAgProducts/agAdd.vue
index 3dd684e..519e781 100644
--- a/src/mods/AppAgProducts/agAdd.vue
+++ b/src/mods/AppAgProducts/agAdd.vue
@@ -72,11 +72,8 @@
 
 <script>
 
-import AiUploader from '../../components/AiUploader/AiUploader'
-
 export default {
   name: "agAdd",
-  components: {AiUploader},
   data() {
     return {
       show: false,
diff --git a/src/mods/AppContent/contentDetail.vue b/src/mods/AppContent/contentDetail.vue
index e780506..b645651 100644
--- a/src/mods/AppContent/contentDetail.vue
+++ b/src/mods/AppContent/contentDetail.vue
@@ -5,11 +5,9 @@
 </template>
 
 <script>
-import AiDetail from "../../components/AiDetail/AiDetail";
 
 export default {
   name: "contentDetail",
-  components: {AiDetail},
   data() {
     return {
       detail: {title: "内容详情"},
diff --git a/src/mods/AppContent/contentManager.vue b/src/mods/AppContent/contentManager.vue
index 1a8c63d..76bca33 100644
--- a/src/mods/AppContent/contentManager.vue
+++ b/src/mods/AppContent/contentManager.vue
@@ -6,7 +6,7 @@
           <div class="search">
             <u-icon name="search" color="rgba(255,255,255,0.5)" size="40"></u-icon>
             <input placeholder="请输入需要搜索的内容" class="desc" placeholder-style="color:rgba(255,255,255,0.5);"
-                   confirm-type="search" @change="onChange"></input>
+                   confirm-type="search" @change="onChange"/>
           </div>
         </div>
       </template>
@@ -16,11 +16,9 @@
 
 <script>
 import {mapState} from "vuex";
-import AiNewsList from "../../components/AiNewsList/AiNewsList";
 
 export default {
   name: "contentManager",
-  components: {AiNewsList},
   computed: {
     ...mapState(['user']),
     loadmore() {
@@ -47,7 +45,7 @@ export default {
       this.getData(val.detail.value);
     },
     getData(title = "") {
-      let {current, search} = this
+      let {current} = this
       this.moduleId && this.$instance.post("/app/appcontentinfo/list", null, {
         params: {moduleId: this.moduleId, current, size: 10, title}
       }).then(res => {
diff --git a/src/mods/AppJob/pubJob.vue b/src/mods/AppJob/pubJob.vue
index efa74b1..ab7943d 100644
--- a/src/mods/AppJob/pubJob.vue
+++ b/src/mods/AppJob/pubJob.vue
@@ -50,11 +50,9 @@
   </div>
 </template>
 <script>
-import AiUploader from '../../components/AiUploader/AiUploader'
 
 export default {
   name: "pubJob",
-  components: {AiUploader},
   data() {
     return {
       form: {
diff --git a/src/mods/AppMarFuneral/marAdd.vue b/src/mods/AppMarFuneral/marAdd.vue
index d931203..893d3e5 100644
--- a/src/mods/AppMarFuneral/marAdd.vue
+++ b/src/mods/AppMarFuneral/marAdd.vue
@@ -62,11 +62,9 @@
 </template>
 
 <script>
-import AiUploader from '../../components/AiUploader/AiUploader'
 
 export default {
   name: "marAdd",
-  components: {AiUploader},
   data() {
     return {
       form: {
diff --git a/src/mods/AppPlease/detail.vue b/src/mods/AppPlease/detail.vue
index 6492f58..a042ef3 100644
--- a/src/mods/AppPlease/detail.vue
+++ b/src/mods/AppPlease/detail.vue
@@ -23,7 +23,7 @@
       <div class="detail-content">
         <p class="info-content">{{ detailInfo.content }}</p>
         <div class="img-list" v-if="detailInfo.iamgeList.length">
-          <img :src="item.url" alt="" v-for="(item,index) in detailInfo.iamgeList" key="index"
+          <img :src="item.url" alt="" v-for="(item,index) in detailInfo.iamgeList" :key="index"
                @click="previewdealListImage(index, detailInfo.iamgeList)">
         </div>
       </div>
diff --git a/src/mods/AppPlease/reply.vue b/src/mods/AppPlease/reply.vue
index bbb1a8e..74e4ac3 100644
--- a/src/mods/AppPlease/reply.vue
+++ b/src/mods/AppPlease/reply.vue
@@ -24,14 +24,10 @@
   </div>
 </template>
 <script>
-import AiUploader from '@/components/AiUploader/AiUploader'
 import {mapState} from 'vuex'
 
 export default {
   name: "my",
-  components: {
-    AiUploader
-  },
   computed: {
     ...mapState(['user', 'token'])
   },
diff --git a/src/mods/AppPolice/AppPolice.vue b/src/mods/AppPolice/AppPolice.vue
index ff22a61..ebc7147 100644
--- a/src/mods/AppPolice/AppPolice.vue
+++ b/src/mods/AppPolice/AppPolice.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="wrapper" v-if="pageShow">
     <div class="area">
-      <ai-area-picker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
+      <AiAreaPicker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId"
                       @select="handleSelect">
         <div class="ai-area__wrapper">
           <span class="label" v-if="areaName">{{ areaName }}</span>
           <span v-else>请选择</span>
           <image src="/static/img/area-bottom.png"/>
         </div>
-      </ai-area-picker>
+      </AiAreaPicker>
     </div>
     <tempate v-if="list.length">
       <header>
@@ -176,7 +176,7 @@ header {
     box-sizing: border-box;
     padding: 32px;
     background: #FFFFFF;
-    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
     border-radius: 16px;
     display: flex;
     align-items: center;
diff --git a/src/mods/AppServiceOnline/AppServiceOnline.vue b/src/mods/AppServiceOnline/AppServiceOnline.vue
new file mode 100644
index 0000000..d81d96a
--- /dev/null
+++ b/src/mods/AppServiceOnline/AppServiceOnline.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="servie">
+    <div class="serviceItem" v-for="(op,i) in list" :key="i" @click="toServiceList(op)" hover-class="bg-hover">
+      <img :src="op.icon"/>
+      <div class="fill flex1">
+        <div>{{ op.name }}</div>
+        <u-gap height="6"/>
+        <span>{{ op.desc }}</span>
+      </div>
+      <i class="iconfont">&#xe697;</i>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:"AppServiceOnline",
+    appName:"网上办事",
+    data () {
+      return {
+        list: []
+      }
+    },
+
+    onLoad () {
+      this.getList()
+    },
+
+    methods: {
+      toServiceList(item) {
+        this.$linkTo(`./serviceList?id=${item.id}&title=${item.name}&subTitle=${item.desc}`)
+      },
+
+      getList() {
+        let size = 999
+        this.$instance.post("/app/zwspapprovalclassification/list-xcx", null, {
+          params: {
+            size
+          },
+          withoutToken: true
+        }).then(res => {
+          if (res.code === 0) {
+            this.list = res.data.records
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .servie {
+    min-height: 100vh;
+    background: #fff;
+  }
+
+  .serviceItem {
+    width: 100%;
+    height: 160px;
+    padding: 28px 40px 28px;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+
+    img {
+      width: 80px;
+      height: 80px;
+    }
+
+    .fill {
+      display: flex;
+      flex-direction: column;
+      font-size: 30px;
+      font-weight: 600;
+      color: #3C435C;
+      margin: 0 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      span {
+        display: block;
+        width: 100%;
+        margin-right: 20px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #BEC1D0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    i {
+      font-size: 44px;
+      color: #979797;
+    }
+  }
+</style>
diff --git a/src/mods/AppServiceOnline/serviceForm.vue b/src/mods/AppServiceOnline/serviceForm.vue
new file mode 100644
index 0000000..79a94a2
--- /dev/null
+++ b/src/mods/AppServiceOnline/serviceForm.vue
@@ -0,0 +1,853 @@
+<template>
+  <div class="service-form" v-if="pageShow">
+    <div class="step">
+      <div class="step-item" :class="[currIndex > 0 ? 'active' : '']">
+        <i class="line" :class="[currIndex > 1 ? 'line-active' : '']"></i>
+        <span>1</span>
+        <div>办理须知</div>
+      </div>
+      <div class="step-item" :class="[currIndex > 1 ? 'active' : '']">
+        <i class="line" :class="[currIndex > 2 ? 'line-active' : '']"></i>
+        <span>2</span>
+        <div>资料上传</div>
+      </div>
+      <div class="step-item" :class="[currIndex > 2 ? 'active' : '']">
+        <i class="line" :class="[currIndex > 3 ? 'line-active' : '']"></i>
+        <span>3</span>
+        <div>表单填写</div>
+      </div>
+      <div class="step-item" :class="[currIndex > 3 ? 'active' : '']">
+        <span>4</span>
+        <div>完成提交</div>
+      </div>
+    </div>
+    <div class="step-item" v-if="currIndex === 2">
+      <div class="service-upload">
+        <div class="upload-item" v-for="(item, index) in info.processAnnexDefs" :key="index">
+          <div class="upload-item__title">
+            <i :style="{opacity: item.mustFill === '1' ? 1 : 0}">*</i>
+            <h2>请上传{{ item.annexName }}</h2>
+          </div>
+          <div class="upload-item__wrapper" @click="upload(index)">
+            <image v-if="item.src" mode="aspectFill" :src="item.src"/>
+            <i v-if="!item.src" class="iconfont">&#xe72c;</i>
+            <h2 v-if="!item.src">上传照片</h2>
+          </div>
+        </div>
+      </div>
+      <div class="service-example" v-if="exampleList.length">
+        <h2>上传样例</h2>
+        <div class="service-example__list">
+          <div class="service-example__item" v-for="(item, index) in exampleList" :key="index">
+            <image :src="item.exampleFile.url" mode="aspectFill" @click="preview(exampleList, item.exampleFile.url)"/>
+            <h2>{{ item.annexName }}</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="step-item" v-if="currIndex === 3">
+      <div class="step-item__form">
+        <h2>{{ info.tableInfo.tableName }}</h2>
+        <div class="step-item__form--group" :style="{'margin-top': index === 0 ? '20px' : '50px'}"
+             v-for="(item, index) in tableForm" :key="index">
+          <div class="group-title">
+            <span></span>
+            <h3>{{ item[0].groupName }}</h3>
+          </div>
+          <view v-for="(field, i) in item" :key="i">
+            <div class="form-item" v-if="field.fieldDataType === '1' || field.fieldDataType === '0'">
+              <div class="form-title">
+                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
+                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
+              </div>
+              <div class="form-item__wrapper">
+                <input placeholder="请输入" :maxlength="field.fieldLength ? field.fieldLength : -1"
+                       v-model="field.fieldValue" :type="field.fieldDataType === '0' ? 'number' : 'text'">
+              </div>
+            </div>
+            <div class="form-item" v-if="field.fieldDataType === '4'">
+              <div class="form-title">
+                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
+                <span>{{ field.fieldName }}</span>
+              </div>
+              <div class="form-check">
+                <u-radio-group v-model="field.fieldValue">
+                  <u-radio
+                      v-for="(dict, j) in $dict.getDict(field.dictionaryCode)" :key="j"
+                      :name="dict.dictValue">
+                    {{ dict.dictName }}
+                  </u-radio>
+                </u-radio-group>
+              </div>
+            </div>
+            <div class="form-item" v-if="field.fieldDataType === '5'">
+              <div class="form-title">
+                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
+                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
+              </div>
+              <div class="form-check">
+                <u-checkbox-group>
+                  <u-checkbox
+                      @change="e => checkChange(e, index, i, j)"
+                      :data-index="index"
+                      :data-i="i"
+                      :data-j="j"
+                      v-for="(dict, j) in field.dictionaryList"
+                      :key="j"
+                      v-model="dict.checked"
+                      :name="dict.dictValue">
+                    {{ dict.dictName }}
+                  </u-checkbox>
+                </u-checkbox-group>
+              </div>
+            </div>
+            <div class="form-item" v-if="field.fieldDataType === '8'">
+              <div class="form-title">
+                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
+                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
+              </div>
+              <div class="form-item__wrapper">
+                <input placeholder="请选择" disabled :value="field.fieldValue || ''">
+                <picker
+                    mode="date"
+                    :data-index="index"
+                    :data-i="i"
+                    @change="onDateChange">
+                  <div class="form-item__choose" hover-class="text-hover">选择</div>
+                </picker>
+              </div>
+            </div>
+            <div class="form-item" v-if="field.fieldDataType === '9'">
+              <div class="form-title">
+                <i :style="{opacity: field.mustFill === '1' ? 1 : 0}">*</i>
+                <span>{{ field.fieldName }}{{ field.fieldNameSuffix || '' }}</span>
+              </div>
+              <div class="form-item__wrapper">
+                <input placeholder="请选择" disabled :value="field.fieldDictName || ''">
+                <picker
+                    range-key="dictName"
+                    :range="$dict.getDict(field.dictionaryCode)"
+                    :data-index="index"
+                    :data-i="i"
+                    :data-dict="field.dictionaryCode"
+                    @change="onPickerChange">
+                  <div class="form-item__choose" hover-class="text-hover">选择</div>
+                </picker>
+              </div>
+            </div>
+          </view>
+        </div>
+      </div>
+    </div>
+    <div class="service-btn" @click="next">{{ currIndex === 3 ? '签名并提交' : '下一步' }}</div>
+    <u-popup v-model="isShow" mode="bottom" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.2)'}" @close="clear">
+      <div class="signature">
+        <div class="signature-header">
+          <div hover-class="text-hover" :hover-stay-time="100" @click="isShow = false, clear()">取消</div>
+        </div>
+        <div class="signature-canvas">
+          <canvas
+              class="handWriting"
+              disable-scroll="true"
+              @touchstart="uploadScaleStart"
+              @touchmove="uploadScaleMove"
+              @touchend="uploadScaleEnd"
+              canvas-id="handWriting">
+          </canvas>
+        </div>
+        <div class="signature-footer">
+          <div class="signature-footer__left" @click="clear" hover-class="text-hover" :hover-stay-time="100">
+            <i class="iconfont">&#xe72e;</i>
+            <span>重新签名</span>
+          </div>
+          <div class="signature-btn" hover-class="text-hover" :hover-stay-time="100" @click="submitSignature">提交</div>
+        </div>
+      </div>
+    </u-popup>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import Handwriting from '@/utils/signature.js'
+
+export default {
+  data() {
+    return {
+      pageShow: false,
+      currIndex: 2,
+      isShow: false,
+      id: '',
+      list: [],
+      handwriting: '',
+      isHasSignature: false,
+      tableForm: [],
+      info: {},
+      isTouch: false,
+      fileManage: null
+    }
+  },
+
+  computed: {
+    ...mapState(['user']),
+
+    exampleList() {
+      if (!this.info.processAnnexDefs) {
+        return []
+      }
+
+      return JSON.parse(JSON.stringify(this.info.processAnnexDefs)).filter(v => v.exampleFileId)
+    }
+  },
+
+  onLoad(query) {
+    this.id = query.id
+    this.getInfo(query.id)
+  },
+
+  onReady() {
+  },
+
+  methods: {
+    clear() {
+      this.isTouch = false
+      this.handwriting.retDraw()
+    },
+
+    uploadScaleStart(event) {
+      this.handwriting.uploadScaleStart(event)
+    },
+
+    uploadScaleMove(event) {
+      this.isTouch = true
+      this.handwriting.uploadScaleMove(event)
+    },
+
+    uploadScaleEnd(event) {
+      this.handwriting.uploadScaleEnd(event)
+    },
+
+    submitSignature() {
+      if (!this.isTouch) {
+        return this.$toast('签名不能为空')
+      }
+
+      this.handwriting.saveCanvas().then(res => {
+        uni.getFileSystemManager().readFile({
+          filePath: res,
+          encoding: 'base64',
+          success: res => {
+            this.$loading()
+            this.$instance.post(`/app/syssignaccount/xcx-draw-sign?openId=${this.user.openId}`, res.data, {
+              headers: {
+                'Content-Type': 'application/json'
+              }
+            }).then(res => {
+              if (res.code === 0) {
+                this.signatureId = res.data
+                this.isShow = false
+                this.$toast('签名成功')
+
+                this.$nextTick(() => {
+                  this.submitForm()
+                })
+              }
+            })
+          },
+          fail: () => {
+            this.$toast('签名生成失败')
+          }
+        })
+      }).catch(() => {
+        this.$toast('签名绘制失败')
+      })
+    },
+
+    IdCard(UUserCard, num) {
+      if (num == 1) {
+        return UUserCard.substring(6, 10) + '-' + UUserCard.substring(10, 12) + '-' + UUserCard.substring(12, 14)
+      }
+      if (num == 2) {
+        if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
+          return '1'
+        } else {
+          return '0'
+        }
+      }
+      if (num == 3) {
+        var myDate = new Date()
+        var month = myDate.getMonth() + 1
+        var day = myDate.getDate()
+        var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
+        if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
+          age++
+        }
+
+        return age
+      }
+    },
+
+    getInfo(id) {
+      this.$loading()
+      this.$instance.post(`/app/approval-process-def/info-id?id=${id}`,).then(res => {
+        if (res.code === 0) {
+          this.$hideLoading()
+          this.info = res.data
+          uni.setNavigationBarTitle({
+            title: res.data.processName
+          })
+          this.isHasSignature = !!res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType === '1').length
+          const groupFormIds = this.unique(res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType !== '1').map(v => v.groupIndex))
+          const dictKeys = res.data.tableInfo.tableFieldInfos.filter(v => !!v.dictionaryCode).map(v => v.dictionaryCode)
+          this.$dict.load(dictKeys).then(() => {
+            this.tableForm = groupFormIds.map(index => {
+              return res.data.tableInfo.tableFieldInfos.filter(v => v.fieldType !== '1' && v.groupIndex === index).map(item => {
+                if (item.dictionaryCode) {
+                  item.dictionaryList = this.$dict.getDict(item.dictionaryCode)
+                }
+
+                if (item.fieldDbName === 'name') {
+                  item.fieldValue = this.user.realName || ''
+                }
+
+                if (item.fieldDbName === 'phone') {
+                  item.fieldValue = this.user.phone || ''
+                }
+
+                // if (item.fieldDbName === 'sex') {
+                //   item.fieldValue = this.IdCard(this.user.idNumber, 2)
+                // }
+
+                if (item.fieldDbName === 'id_number') {
+                  item.fieldValue = this.user.idNumber || ''
+                }
+
+                if (item.fieldDbName === 'age') {
+                  item.fieldValue = this.IdCard(this.user.idNumber, 3)
+                }
+
+                if (item.fieldDbName === 'birthday') {
+                  item.fieldValue = this.IdCard(this.user.idNumber, 1)
+                }
+
+                return item
+              })
+            })
+          })
+          this.pageShow = true
+        }
+      })
+    },
+
+    checkChange(e, index, i) {
+      this.$forceUpdate()
+
+      this.$nextTick(() => {
+        const value = this.tableForm[index][i].dictionaryList.filter(v => v.checked).map(v => v.dictValue).join(',')
+
+        this.$set(this.tableForm[index][i], 'fieldValue', value)
+      })
+    },
+
+    onDateChange(e) {
+      const index = e.target.dataset.index
+      const i = e.target.dataset.i
+      const value = e.detail.value.split('-')
+
+      this.$set(this.tableForm[index][i], 'fieldValue', `${value[0]}年${value[1]}月${value[2]}日`)
+    },
+
+    onPickerChange(e) {
+      const index = e.target.dataset.index
+      const i = e.target.dataset.i
+      const dict = e.target.dataset.dict
+      const value = e.detail.value
+      const key = this.$dict.getLabel(dict, value)
+
+      this.$set(this.tableForm[index][i], 'fieldValue', value)
+      this.$set(this.tableForm[index][i], 'fieldDictName', key)
+    },
+
+    preview(list, url) {
+      const imgs = list.map(v => v.exampleFile.url)
+      uni.previewImage({
+        current: url,
+        urls: imgs
+      })
+    },
+
+    /**
+     * 数组去重
+     */
+    unique(arr) {
+      return arr.filter((item, index) => {
+        return arr.indexOf(item, 0) === index
+      })
+    },
+
+    /**
+     * 图片上传
+     */
+    upload(index) {
+      uni.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album', 'camera'],
+        success: res => {
+          const path = res.tempFilePaths[0]
+          this.$loading()
+          uni.uploadFile({
+            url: this.$instance.baseURL + '/admin/file/add',
+            filePath: path,
+            name: 'file',
+            header: {
+              'Content-Type': 'multipart/form-data',
+              Authorization: uni.getStorageSync('token')
+            },
+            success: res => {
+              const data = JSON.parse(res.data)
+
+              if (data.code === 0) {
+                this.$set(this.info.processAnnexDefs[index], 'src', data.data[0].split(';')[0])
+                this.$set(this.info.processAnnexDefs[index], 'annexFileId', data.data[0].split(';')[1])
+              } else {
+                this.$toast(data.msg)
+              }
+            },
+            complete: () => {
+              this.$hideLoading()
+            }
+          })
+        }
+      })
+    },
+
+    next() {
+      if (this.currIndex === 2) {
+        for (let item of this.info.processAnnexDefs) {
+          if (item.mustFill === '1' && !item.annexFileId) {
+            return this.$toast(`请上传${item.annexName}`)
+          }
+        }
+        this.currIndex = 3
+      } else if (this.currIndex === 3) {
+        this.submitForm()
+      }
+    },
+
+    submitForm() {
+      let list = []
+      let signature = ''
+
+      if (this.isHasSignature) {
+        signature = {
+          ...this.info.tableInfo.tableFieldInfos.filter(v => v.fieldType === '1')[0],
+          fieldValue: this.signatureId
+        }
+      }
+
+      this.tableForm.forEach(item => {
+        item.forEach(form => {
+          list.push(form)
+        })
+      })
+
+      for (let item of list) {
+        if (item.mustFill === '1' && !item.fieldValue) {
+          return this.$toast(`${item.fieldDataType === '0' || item.fieldDataType === '1' ? '请输入' : '请选择'}${item.fieldName}`)
+        }
+
+        if (item.mustFill === '1' && item.verifyType) {
+          // const reg = item.verifyType === '0' ? new RegExp('(^\d{15}$)|(^\d{17}(\d|X|x)$)')  : new RegExp('^1[0-9]{10,10}$')
+          const reg = item.verifyType === '0' ? /(^\d{15}$)|(^\d{17}(\d|X|x)$)/ : /^1[0-9]{10,10}$/
+
+          if (!reg.test(item.fieldValue)) {
+            return this.$toast(`请输入正确的${item.fieldName}`)
+          }
+        }
+      }
+
+      if (signature) {
+        list.push(signature)
+      }
+
+      if (this.isHasSignature && !this.signatureId) {
+        this.handwriting = new Handwriting({
+          lineColor: this.lineColor,
+          slideValue: this.slideValue,
+          canvasName: 'handWriting'
+        })
+
+        this.$nextTick(() => {
+          this.isShow = true
+        })
+
+        return false
+      }
+
+      const annexs = this.info.processAnnexDefs.map(item => {
+        return {
+          annexFileId: item.annexFileId,
+          emptyFileId: item.emptyFileId,
+          exampleFileId: item.exampleFileId,
+          processAnnexDefId: item.id,
+          annexName: item.annexName
+        }
+      }).filter(v => !!v.annexFileId)
+
+      const processNodeList = this.info.processNodeList
+      let tableInfo = this.info.tableInfo
+      tableInfo.tableFieldInfos = list
+
+      this.$loading()
+      this.$instance.post(`/app/approv-alapply-info/add`, {
+        processNodeList,
+        annexs,
+        tableInfo,
+        tableId: this.info.tableId,
+        processDefId: this.info.id,
+        processDefName: this.info.processName
+      }).then(res => {
+        if (res.code === 0) {
+          this.$toast('申请成功')
+          uni.reLaunch({
+            url: `./serviceResult?title=${this.info.processName}`
+          })
+        } else {
+          this.$hideLoading()
+        }
+      }).catch(() => {
+        this.$hideLoading()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.signature {
+  background: #fff;
+
+  .signature-header {
+    height: 120px;
+    line-height: 120px;
+    padding: 0 32px;
+
+    div {
+      color: #000000;
+      font-size: 30px;
+    }
+  }
+
+  .signature-canvas {
+    width: 686px;
+    height: 464px;
+    margin: 0 auto 40px;
+    background: #FAFAFA;
+    border-radius: 8px;
+    border: 1px solid #DDDDDD;
+
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .signature-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 128px;
+    padding: 0 32px;
+    border-top: 1px solid #DDDDDD;
+
+    .signature-footer__left {
+      display: flex;
+      align-items: center;
+
+      i {
+        margin-right: 4px;
+        font-size: 32px;
+        color: #4E8EEE;
+      }
+
+      span {
+        color: #4E8EEE;
+        font-size: 28px;
+      }
+    }
+
+    .signature-btn {
+      width: 192px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      color: #fff;
+      font-size: 32px;
+      background: #197DF0;
+      border-radius: 4px;
+    }
+  }
+}
+
+.service-form {
+  min-height: 100vh;
+  padding-bottom: 124px;
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.upload-item__title {
+  display: flex;
+  position: relative;
+  align-items: center;
+  left: -16px;
+
+  i {
+    font-size: 32px;
+    color: #FF4466;
+  }
+}
+
+.step-item__form {
+  padding-top: 40px;
+
+  .step-item__form--group {
+    margin-top: 50px;
+  }
+
+  .group-title {
+    display: flex;
+    align-items: center;
+    padding: 0 32px;
+
+    span {
+      width: 4px;
+      height: 32px;
+      margin-right: 6px;
+      background: #1365DD;
+    }
+
+    h3 {
+      color: #333333;
+      font-size: 32px;
+      font-weight: 600;
+    }
+  }
+
+  & > h2 {
+    padding: 0 32px;
+    color: #333333;
+    font-size: 34px;
+    font-weight: 600;
+  }
+
+  .form-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+
+    span {
+      font-size: 32px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    i {
+      margin-right: 2px;
+      color: #FF4466;
+      font-size: 32px;
+    }
+  }
+
+  .form-check {
+    margin-left: 16px;
+    margin-top: 20px;
+    overflow: hidden;
+  }
+
+  .form-item {
+    padding: 40px 0 0 0;
+    margin: 0 32px 0 16px;
+
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      height: 70px;
+      margin-left: 16px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid #DDDDDD;
+    }
+
+    input {
+      flex: 1;
+      line-height: 70px;
+      padding-right: 20px;
+      box-sizing: border-box;
+    }
+
+    .form-item__choose {
+      color: #4292F3;
+      font-size: 32px;
+    }
+  }
+}
+
+.service-btn {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 11;
+  width: 100%;
+  height: 114px;
+  line-height: 114px;
+  text-align: center;
+  color: #fff;
+  font-size: 34px;
+  background-color: #197DF0;
+}
+
+.service-example {
+  margin-top: 64px;
+  margin-bottom: 20px;
+
+  & > h2 {
+    padding: 0 32px;
+    color: #333333;
+    font-size: 30px;
+  }
+
+  .service-example__list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 32px;
+
+    .service-example__item {
+      width: 215px;
+      margin-top: 24px;
+      margin-right: 24px;
+
+      &:nth-of-type(3n) {
+        margin-right: 0;
+      }
+
+      image {
+        width: 216px;
+        height: 136px;
+        margin-bottom: 16px;
+      }
+
+      h2 {
+        color: #333333;
+        font-size: 30px;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
+
+.service-upload {
+  margin-top: 40px;
+  padding: 0 32px;
+
+  .upload-item {
+    margin-bottom: 64px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & > h2 {
+      color: #333333;
+      font-size: 30px;
+    }
+
+    .upload-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      width: 310px;
+      height: 180px;
+      margin-top: 48px;
+      border-radius: 8px;
+      border: 2px dashed #AAA8A8;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+
+      i {
+        margin-bottom: 8px;
+        color: #E4E4E4;
+        font-size: 68px;
+      }
+
+      h2 {
+        color: #666666;
+        font-size: 28px;
+      }
+    }
+  }
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  height: 176px;
+  background: #FFFFFF;
+  box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.05);
+
+  .step-item {
+    position: relative;
+    flex: 1;
+    text-align: center;
+
+    .line {
+      position: absolute;
+      top: 20px;
+      left: 70%;
+      width: 120px;
+      height: 2px;
+      background: #CCCCCC;
+
+      &.line-active {
+        background: #467DFE;
+      }
+    }
+
+    &.active {
+      div {
+        font-weight: 600;
+        color: #467DFE;
+      }
+
+      span {
+        background: #467DFE;
+      }
+    }
+
+    div {
+      font-size: 26px;
+      color: #999999;
+    }
+
+    span {
+      display: block;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      margin: 0 auto 18px;
+      text-align: center;
+      color: #fff;
+      font-size: 26px;
+      border-radius: 50%;
+      background: #D0D1D6;
+    }
+  }
+}
+</style>
diff --git a/src/mods/AppServiceOnline/serviceList.vue b/src/mods/AppServiceOnline/serviceList.vue
new file mode 100644
index 0000000..55e7703
--- /dev/null
+++ b/src/mods/AppServiceOnline/serviceList.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="service">
+    <div class="header-tab">
+      <span :class="[currIndex === 1 ? 'active' : '']" @click="changeTab(1)">办事指南</span>
+      <span :class="[currIndex === 0 ? 'active' : '']" @click="changeTab(0)">网上办事</span>
+    </div>
+    <div class="service-list">
+      <div class="service-item" hover-class="bg-hover" @click="toDetail('./serviceNotice?id=' + item.id)" v-for="(item, index) in list" :key="index">
+        <div class="service-item__wrapper">
+          <h2>{{ item.processName }}</h2>
+          <i class="iconfont">&#xe6ae;</i>
+        </div>
+      </div>
+    </div>
+    <u-loadmore :status="loadingStatus" :margin-top="30" :margin-bottom="30" color="#999" font-size="26"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        id: '',
+        currIndex: 1,
+        title: '',
+        subTitle: '',
+        current: 0,
+        list: [],
+        loadingStatus: 'loadmore'
+      }
+    },
+
+    onLoad (query) {
+      this.id = query.id
+      this.getList()
+      uni.setNavigationBarTitle({
+        title: query.title
+      })
+    },
+
+    methods: {
+      changeTab (index) {
+        this.currIndex = index
+        this.list = []
+
+        this.getList()
+      },
+
+      getList() {
+        this.loadingStatus = 'loading'
+        this.$instance.post(`/app/approval-process-def/list-xcx?processType=${this.currIndex === 0 ? 0 : 2}`, null, {
+          params: {
+            size: 10000,
+            classificationId: this.id
+          },
+          withoutToken: true
+        }).then(res => {
+          if (res.code === 0) {
+            if (!res.data.records.length) {
+              this.loadingStatus = 'nomore'
+              return false
+            }
+
+            const data = res.data.records.map(item => {
+              return item
+            })
+            if (this.current === 0) this.list = []
+
+            this.list.push(...data)
+            this.current = this.current + 1
+            this.loadingStatus = 'loadmore'
+
+            if (this.list.length < 10) {
+              this.loadingStatus = 'nomore'
+            }
+          }
+        })
+      },
+
+      toDetail (url) {
+        // if (!this.info.phone) {
+        //   this.$dialog.confirm({
+        //     confirmText: '去绑定',
+        //     content: '您还未绑定手机号'
+        //   }).then(() => {
+        //     console.log(456)
+        //     this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
+        //   })
+
+        //   return false
+        // }
+
+        // if (this.info.status !== '2') {
+        //   this.$dialog.confirm({
+        //     confirmText: '去认证',
+        //     content: '您还未进行实名认证'
+        //   }).then(() => {
+        //     this.$linkTo('/pages/auth/authenticationInfo')
+        //   })
+
+        //   return false
+        // }
+
+        this.$linkTo(url)
+      },
+
+      getCheckInfo() {
+        this.$instance.post(`/app/appwechatuser/check`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+          }
+        })
+      }
+    },
+
+    onReachBottom() {
+      this.getList()
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .service {
+    padding-bottom: 40px;
+  }
+
+  .header-tab {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    align-items: center;
+    height: 106px;
+    line-height: 106px;
+    background: #4181FF;
+
+    span {
+      position: relative;
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      color: rgba(#ffffff, 0.75);
+
+      &.active {
+        color: #fff;
+
+        &:after {
+          position: absolute;
+          bottom: 14px;
+          left: 50%;
+          width: 48px;
+          height: 4px;
+          background: #FFFFFF;
+          transform: translateX(-50%);
+          content: ' ';
+        }
+      }
+    }
+  }
+
+  .service-list {
+    padding-top: 106px;
+    background-color: #fff;
+
+    .service-item {
+      height: 116px;
+      padding: 0 32px;
+
+      &:last-child {
+        .service-item__wrapper {
+          border-bottom: none;
+        }
+      }
+
+      .service-item__wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 116px;
+        border-bottom: 1px solid #D8DDE6;
+
+
+        h2 {
+          color: #333333;
+          font-size: 32px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        i {
+          position: relative;
+          right: -4px;
+          font-size: 36px;
+          color: #C9C9CD;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/mods/AppServiceOnline/serviceNotice.vue b/src/mods/AppServiceOnline/serviceNotice.vue
new file mode 100644
index 0000000..0d8d148
--- /dev/null
+++ b/src/mods/AppServiceOnline/serviceNotice.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="service-notice" v-if="pageShow">
+    <h2>办理须知</h2>
+    <div class="service-content">
+      <AiWxparse :imageProp="imageProp" className="articalContent" :content="content"/>
+      <!-- <div v-html="content" class="articalContent"></div> -->
+      <!-- <u-parse className="articalContent" :html="content"></u-parse> -->
+    </div>
+    <div class="service-btn" v-if="processType != 2" @click="toSubmit">我已阅读并同意</div>
+    <AiLogin ref="login"></AiLogin>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+  data() {
+    return {
+      content: '',
+      imageProp: {
+        mode: 'widthFix',
+        padding: 0,
+        lazyLoad: false,
+        domain: ''
+      },
+      id: '',
+      title: '',
+      pageShow: false,
+      processType: ''
+    }
+  },
+  computed: {
+    ...mapState(['global', 'user', 'token'])
+  },
+  onLoad(query) {
+    this.id = query.id
+    this.getInfo(query.id)
+  },
+
+  methods: {
+    getInfo(id) {
+      this.$loading()
+      this.$instance.post(`/app/approval-process-def/info-id?id=${id}`, null, {
+        withoutToken: true
+      }).then(res => {
+        if (res.code === 0) {
+          this.title = res.data.processName
+          this.content = res.data.needToKnow
+          this.processType = res.data.processType
+          uni.setNavigationBarTitle({
+            title: res.data.processName
+          })
+          this.pageShow = true
+          this.$hideLoading()
+        }
+      })
+    },
+
+    handleGoto(url, type) {
+      if (type) {//判断是否需要登录
+        if (this.token) {//判断是否登录
+          if (type == 'token') {
+            this.$linkTo(url)
+          }
+          if (type == 'idNumber') {
+            if (this.user.status == 0) {
+              if (!this.user.phone) {//判断已经绑定手机
+                this.$linkTo('/pages/phone/bingPhoneNumber?from=auth')
+              } else {
+                this.$linkTo('/pages/auth/authenticationInfo')
+              }
+            } else {
+              this.$linkTo(url)
+            }
+          }
+        } else {
+          // this.$getUserProfile().then((v) => {
+          //   this.$autoLogin(v.userInfo).then(() => {
+          //     this.handleGoto(url, type)
+          //   })
+          // })
+          this.login()
+        }
+      } else {
+        this.$linkTo(url)
+      }
+    },
+    login() {
+      this.$refs.login.show()
+    },
+
+    toSubmit() {
+      this.handleGoto('./serviceForm?id=' + this.id, 'idNumber')
+    }
+  },
+  onShareAppMessage() {
+    return {
+      title: this.title,
+      path: `./serviceNotice?id=${this.id}`
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.service-notice {
+  min-height: 100vh;
+  padding-bottom: 122px;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .service-btn {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    font-size: 34px;
+    color: #fff;
+    background: #197DF0;
+  }
+
+  h2 {
+    padding: 40px 0;
+    text-align: center;
+    font-size: 34px;
+    color: #333;
+    font-weight: 600;
+  }
+
+  .service-content {
+    padding: 0 32px;
+  }
+}
+</style>
diff --git a/src/mods/AppServiceOnline/serviceResult.vue b/src/mods/AppServiceOnline/serviceResult.vue
new file mode 100644
index 0000000..c7aa16b
--- /dev/null
+++ b/src/mods/AppServiceOnline/serviceResult.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="service-result">
+    <image src="/static/img/service-success.png" />
+    <h2> 申请成功，等待审批！</h2>
+    <div class="text">
+      <span>可在</span>
+      <i>我的-办事进度</i>
+      <span>中查看</span>
+    </div>
+    <div class="service-btn" hover-class="text-hover" @click="back">确定</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+
+      }
+    },
+
+    onLoad (query) {
+      uni.setNavigationBarTitle({
+        title: query.title
+      })
+    },
+
+    methods: {
+      back () {
+        uni.reLaunch({
+          url: '/pages/home/home'
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .service-result {
+    min-height: 100vh;
+    padding-top: 96px;
+    text-align: center;
+    background: #fff;
+    box-sizing: border-box;
+
+    .service-btn {
+      width: 558px;
+      height: 88px;
+      line-height: 88px;
+      margin: 120px auto 0;
+      text-align: center;
+      background: #197DF0;
+      font-size: 36px;
+      color: #fff;
+      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
+      border-radius: 8px;
+    }
+
+    h2 {
+      margin-bottom: 32px;
+      color: #333333;
+      font-size: 36px;
+      font-weight: 600;
+    }
+
+    .text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      color: #333;
+
+      i {
+        color: #467DFE;
+      }
+    }
+
+    image {
+      width: 192px;
+      height: 192px;
+    }
+  }
+</style>
diff --git a/src/mods/AppVideoSurve/AppVideoSurve.vue b/src/mods/AppVideoSurve/AppVideoSurve.vue
index 0210faf..fa58e0c 100644
--- a/src/mods/AppVideoSurve/AppVideoSurve.vue
+++ b/src/mods/AppVideoSurve/AppVideoSurve.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="videoSurve">
     <div class="top">
-      <ai-area-picker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
+      <AiAreaPicker ref="area" class="ai-area" :value="areaId" :name.sync="areaName" :areaId="$areaId" @select="areaSelect">
         <div class="ai-area__wrapper">
           <span class="label" v-if="areaName">{{ areaName }}</span>
           <span v-else>请选择</span>
           <!-- <u-icon name="arrow-right"></u-icon> -->
         </div>
-      </ai-area-picker>
+      </AiAreaPicker>
 
       <div class="msgs">
         <div class="item">
diff --git a/src/mods/AppVillageActivity/AddDynamic.vue b/src/mods/AppVillageActivity/AddDynamic.vue
index 442113f..2ac1e53 100644
--- a/src/mods/AppVillageActivity/AddDynamic.vue
+++ b/src/mods/AppVillageActivity/AddDynamic.vue
@@ -19,7 +19,7 @@
           <span>(最多9张)</span>
         </div>
         <div class="form-item__img">
-          <ai-uploader v-model="images" :limit="9"></ai-uploader>
+          <AiUploader v-model="images" :limit="9"></AiUploader>
         </div>
       </div>
     </div>
@@ -30,103 +30,97 @@
 </template>
 
 <script>
-  import AiUploader from '@/components/AiUploader/AiUploader'
 
-  export default {
-    data () {
-      return {
-        content: '',
-        images: [],
-        id: '',
-        flag: false
+export default {
+  data() {
+    return {
+      content: '',
+      images: [],
+      id: '',
+      flag: false
+    }
+  },
+  onLoad(e) {
+    this.id = e.activityId
+  },
+
+  methods: {
+    submit() {
+      if (this.flag) return
+
+      if (!this.content && !this.images.length) {
+        return this.$u.toast('内容或图片不能为空')
       }
-    },
+      this.flag = true
 
-    components: {
-      AiUploader
-    },
 
-    onLoad (e) {
-      this.id = e.activityId
-    },
-
-    methods: {
-      submit () {
-        if (this.flag) return
-
-        if (!this.content && !this.images.length) {
-          return this.$u.toast('内容或图片不能为空')
+      this.$loading()
+      this.$instance.post('/app/appvillageactivitypost/addOrUpdate', {
+        content: this.content,
+        activityId: this.id,
+        avatar: this.$store.state.user.avatarUrl,
+        name: this.$store.state.user.nickName,
+        images: JSON.stringify(this.images)
+      }).then(res => {
+        if (res.code === 0) {
+          this.$toast('提交成功')
+          uni.$emit('update')
+          setTimeout(() => {
+            uni.navigateBack({
+              delta: 1
+            })
+          }, 800)
         }
-        this.flag = true
 
-
-        this.$loading()
-        this.$instance.post('/app/appvillageactivitypost/addOrUpdate', {
-          content: this.content,
-          activityId: this.id,
-          avatar: this.$store.state.user.avatarUrl,
-          name: this.$store.state.user.nickName,
-          images: JSON.stringify(this.images)
-        }).then(res => {
-          if (res.code === 0) {
-            this.$toast('提交成功')
-            uni.$emit('update')
-            setTimeout(() => {
-              uni.navigateBack({
-                delta: 1
-              })
-            }, 800)
-          }
-
-          this.$hideLoading()
-        })
-      }
+        this.$hideLoading()
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .dynamic {
-    .form-item {
-      margin-bottom: 24px;
-      padding-left: 32px;
-      padding-bottom: 20px;
-      background: #fff;
+.dynamic {
+  .form-item {
+    margin-bottom: 24px;
+    padding-left: 32px;
+    padding-bottom: 20px;
+    background: #fff;
 
-      .form-item__wrapper {
-        padding-right: 32px;
+    .form-item__wrapper {
+      padding-right: 32px;
+    }
+
+    .form-item__textarea, .form-item__img {
+      padding-left: 18px;
+
+      textarea {
+        width: 100%;
+      }
+    }
+
+    .form-item__title {
+      display: flex;
+      align-items: center;
+      padding: 32px 0;
+
+      i {
+        font-size: 32px;
+        color: #FF4466;
       }
 
-      .form-item__textarea, .form-item__img {
-        padding-left: 18px;
-
-        textarea {
-          width: 100%;
-        }
+      span {
+        font-size: 28px;
+        color: #999999;
       }
 
-      .form-item__title {
-        display: flex;
-        align-items: center;
-        padding: 32px 0;
-
-        i {
-          font-size: 32px;
-          color: #FF4466;
-        }
-
-        span {
-          font-size: 28px;
-          color: #999999;
-        }
-
-        h2 {
-          padding: 0 4px;
-          font-weight: 600;
-          font-size: 32px;
-          color: #333333;
-        }
+      h2 {
+        padding: 0 4px;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
       }
     }
   }
+}
 </style>
diff --git a/src/mods/service/AppHealthReport/AddReport.vue b/src/mods/service/AppHealthReport/AddReport.vue
index 8cf2b6b..8780679 100644
--- a/src/mods/service/AppHealthReport/AddReport.vue
+++ b/src/mods/service/AppHealthReport/AddReport.vue
@@ -9,7 +9,7 @@
             <h2>返乡人员姓名</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.name" disabled :maxlength="20" />
+            <input placeholder="请输入" v-model="form.name" disabled :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -20,7 +20,7 @@
             <h2>身份证号</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.idNumber" disabled :maxlength="20" />
+            <input placeholder="请输入" v-model="form.idNumber" disabled :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -33,7 +33,7 @@
             <h2>当前体温</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.temperature" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.temperature" :maxlength="20"/>
             <i>℃</i>
           </div>
         </div>
@@ -119,7 +119,7 @@
             <h2>本人健康码截图</h2>
           </div>
           <div class="form-item__right">
-            <ai-uploader v-model="form.checkPhoto" :limit="1"></ai-uploader>
+            <AiUploader v-model="form.checkPhoto" :limit="1"></AiUploader>
           </div>
         </div>
       </div>
@@ -132,304 +132,299 @@
 </template>
 
 <script>
-  import AiUploader from '@/components/AiUploader/AiUploader'
-  import AiSelect from '@/components/AiSelect/AiSelect'
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
-  export default {
-    data () {
-      return {
-        isShowDate: false,
-				dataParams: {
-					year: true,
-					month: true,
-					day: true
-				},
-        form: {
-          name: '',
-          idNumber: '',
-          checkPhoto: [],
-          checkResult: '',
-          health: '',
-          healthCode: '',
-          temperature: '',
-          vaccine: '',
-          checkTime: '',
-          memberId: ''
-        }
-      }
-    },
-
-    components: {
-      AiSelect,
-      AiUploader
-    },
-
-    computed: {
-      ...mapState(['user'])
-    },
-
-    onLoad (query) {
-      this.form.memberId = query.id
-      this.getInfo(query.id)
-    },
-
-    methods: {
-      getInfo (id) {
-        this.$instance.post(`/app/appepidemicreportmember/queryDetailById?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.form.name = res.data.name
-            this.form.idNumber = res.data.idNumber
-
-            this.form.checkTime = res.data.checkTime ? res.data.checkTime.split(' ')[0] : ''
-            this.form.checkResult = res.data.checkResult || ''
-            this.form.healthCode = res.data.healthCode || ''
-            this.form.vaccine = res.data.vaccine || ''
-          }
-
-          this.$hideLoading()
-        }).catch(() => {
-          this.$hideLoading()
-        })
+export default {
+  data() {
+    return {
+      isShowDate: false,
+      dataParams: {
+        year: true,
+        month: true,
+        day: true
       },
-
-      onDateChange (e) {
-        this.form.checkTime = `${e.year}-${e.month}-${e.day}`
-      },
-
-      submit () {
-        if (!this.form.temperature) {
-          return this.$toast('请输入当前体温')
-        }
-
-        if (!this.form.touchInFourteen) {
-          return this.$toast('请选择14天内是否接触新冠确诊或疑似患者')
-        }
-
-        if (!this.form.health.length) {
-          return this.$toast('请选择当前健康状况')
-        }
-        if (!this.form.checkTime) {
-          return this.$toast('请选择核酸检测日期')
-        }
-
-        if (!this.form.checkResult) {
-          return this.$toast('请选择核酸检测结果')
-        }
-
-        if (!this.form.healthCode) {
-          return this.$toast('请选择健康码类型')
-        }
-
-        if (!this.form.vaccine) {
-          return this.$toast('请选择已接种疫苗次数')
-        }
-
-        if (!this.form.checkPhoto.length) {
-          return this.$toast('请上传健康码截图')
-        }
-        this.$loading()
-        this.$instance.post(`/app/appepidemichealthreport/addOrUpdate`, {
-          ...this.form,
-          openid: this.user.openid,
-          health: this.form.health.join(','),
-          checkPhoto: JSON.stringify(this.form.checkPhoto),
-          checkTime: this.form.checkTime + ' 00:00:00'
-        }).then(res => {
-          if (res.code == 0) {
-            uni.$emit('update')
-            this.$toast('提交成功')
-            setTimeout(() => {
-              uni.navigateBack()
-            }, 400)
-          }
-          this.$hideLoading()
-        })
+      form: {
+        name: '',
+        idNumber: '',
+        checkPhoto: [],
+        checkResult: '',
+        health: '',
+        healthCode: '',
+        temperature: '',
+        vaccine: '',
+        checkTime: '',
+        memberId: ''
       }
     }
+  },
+
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  onLoad(query) {
+    this.form.memberId = query.id
+    this.getInfo(query.id)
+  },
+
+  methods: {
+    getInfo(id) {
+      this.$instance.post(`/app/appepidemicreportmember/queryDetailById?id=${id}`).then(res => {
+        if (res.code === 0) {
+          this.form.name = res.data.name
+          this.form.idNumber = res.data.idNumber
+
+          this.form.checkTime = res.data.checkTime ? res.data.checkTime.split(' ')[0] : ''
+          this.form.checkResult = res.data.checkResult || ''
+          this.form.healthCode = res.data.healthCode || ''
+          this.form.vaccine = res.data.vaccine || ''
+        }
+
+        this.$hideLoading()
+      }).catch(() => {
+        this.$hideLoading()
+      })
+    },
+
+    onDateChange(e) {
+      this.form.checkTime = `${e.year}-${e.month}-${e.day}`
+    },
+
+    submit() {
+      if (!this.form.temperature) {
+        return this.$toast('请输入当前体温')
+      }
+
+      if (!this.form.touchInFourteen) {
+        return this.$toast('请选择14天内是否接触新冠确诊或疑似患者')
+      }
+
+      if (!this.form.health.length) {
+        return this.$toast('请选择当前健康状况')
+      }
+      if (!this.form.checkTime) {
+        return this.$toast('请选择核酸检测日期')
+      }
+
+      if (!this.form.checkResult) {
+        return this.$toast('请选择核酸检测结果')
+      }
+
+      if (!this.form.healthCode) {
+        return this.$toast('请选择健康码类型')
+      }
+
+      if (!this.form.vaccine) {
+        return this.$toast('请选择已接种疫苗次数')
+      }
+
+      if (!this.form.checkPhoto.length) {
+        return this.$toast('请上传健康码截图')
+      }
+      this.$loading()
+      this.$instance.post(`/app/appepidemichealthreport/addOrUpdate`, {
+        ...this.form,
+        openid: this.user.openid,
+        health: this.form.health.join(','),
+        checkPhoto: JSON.stringify(this.form.checkPhoto),
+        checkTime: this.form.checkTime + ' 00:00:00'
+      }).then(res => {
+        if (res.code == 0) {
+          uni.$emit('update')
+          this.$toast('提交成功')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 400)
+        }
+        this.$hideLoading()
+      })
+    }
   }
+}
 </script>
 
 <style lang="scss">
-  .album {
-    padding-bottom: 140px;
+.album {
+  padding-bottom: 140px;
 
-    .tips {
-      line-height: 1.3;
-      padding: 32px 32px;
-      color: #FF883C;
-      font-size: 30px;
-      text-align: justify;
-      background: #FFF8F3;
-    }
+  .tips {
+    line-height: 1.3;
+    padding: 32px 32px;
+    color: #FF883C;
+    font-size: 30px;
+    text-align: justify;
+    background: #FFF8F3;
+  }
 
-    .form-item__group {
-      margin-bottom: 24px;
-      background: #fff;
-    }
+  .form-item__group {
+    margin-bottom: 24px;
+    background: #fff;
+  }
 
-    .form-item {
-      padding-left: 32px;
+  .form-item {
+    padding-left: 32px;
 
-      .form-item__checkbox {
+    .form-item__checkbox {
+      width: 100%;
+
+      div {
         width: 100%;
-        div {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          margin-bottom: 24px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
+        height: 80px;
+        line-height: 80px;
+        margin-bottom: 24px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
 
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
         }
       }
+    }
 
-      .form-item__radio {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
+    .form-item__radio {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
-        div {
-          width: 212px;
-          height: 80px;
-          line-height: 80px;
-          margin-right: 16px;
-          margin-bottom: 8px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
+      div {
+        width: 212px;
+        height: 80px;
+        line-height: 80px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
 
-          &:nth-of-type(3n) {
-            margin-right: 0;
-          }
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
 
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
         }
       }
+    }
 
-      .ai-area__wrapper {
+    .ai-area__wrapper {
+      display: flex;
+      align-items: center;
+      padding-left: 100px;
+
+      span {
+        color: #333;
+        font-size: 30px;
+      }
+
+      i {
+        color: #999;
+        font-size: 30px;
+      }
+
+      image {
+        width: 16px;
+        height: 8px;
+      }
+    }
+
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      padding-right: 28px;
+      border-bottom: 1px solid #DDDDDD;
+
+      input {
+        flex: 1;
+        height: 100%;
+        text-align: right;
+        color: #333;
+        padding-right: 10px;
+      }
+
+      .form-item__right {
         display: flex;
         align-items: center;
-        padding-left: 100px;
+        font-size: 32px;
 
         span {
-          color: #333;
-          font-size: 30px;
+          max-width: 400px;
+          margin-right: 8px;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         i {
-          color: #999;
-          font-size: 30px;
-        }
-
-        image {
-          width: 16px;
-          height: 8px;
+          margin-right: 8px;
+          color: #999999;
         }
       }
+    }
 
+    &:last-child {
       .form-item__wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 128px;
-        padding-right: 28px;
-        border-bottom: 1px solid #DDDDDD;
+        border-bottom: none;
+      }
+    }
 
-        input {
-          flex: 1;
-          height: 100%;
-          text-align: right;
-          color: #333;
-          padding-right: 10px;
-        }
+    .form-item__title {
+      display: flex;
+      align-items: center;
 
-        .form-item__right {
-          display: flex;
-          align-items: center;
-          font-size: 32px;
-
-          span {
-            max-width: 400px;
-            margin-right: 8px;
-            color: #333333;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-
-          i {
-            margin-right: 8px;
-            color: #999999;
-          }
-        }
+      i {
+        font-size: 32px;
+        color: #FF4466;
       }
 
-      &:last-child {
-        .form-item__wrapper {
-          border-bottom: none;
-        }
+      span {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      h2 {
+        padding: 0 4px;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
+      }
+    }
+
+
+    &.form-item__imgs, &.form-item__textarea {
+      .form-item__wrapper {
+        display: block;
+        height: auto;
+        padding-bottom: 32px;
+      }
+
+      textarea {
+        width: 100%;
+        height: 90px;
       }
 
       .form-item__title {
-        display: flex;
-        align-items: center;
-
-        i {
-          font-size: 32px;
-          color: #FF4466;
-        }
-
-        span {
-          font-size: 28px;
-          color: #999999;
-        }
-
-        h2 {
-          padding: 0 4px;
-          font-weight: 600;
-          font-size: 32px;
-          color: #333333;
-        }
+        padding: 32px 0;
       }
 
-
-      &.form-item__imgs, &.form-item__textarea {
-        .form-item__wrapper {
-          display: block;
-          height: auto;
-          padding-bottom: 32px;
-        }
-
-        textarea {
-          width: 100%;
-          height: 90px;
-        }
-
-        .form-item__title {
-          padding: 32px 0;
-        }
-
-        .form-item__right {
-          padding-left: 18px;
-        }
+      .form-item__right {
+        padding-left: 18px;
       }
     }
   }
+}
 </style>
diff --git a/src/mods/service/AppHealthReport/AddUser.vue b/src/mods/service/AppHealthReport/AddUser.vue
index 315606b..1cb1bfe 100644
--- a/src/mods/service/AppHealthReport/AddUser.vue
+++ b/src/mods/service/AppHealthReport/AddUser.vue
@@ -8,7 +8,7 @@
             <h2>上报人姓名</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.name" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -19,7 +19,7 @@
             <h2>身份证号</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20" />
+            <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -30,7 +30,7 @@
             <h2>手机号码</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11" />
+            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"/>
           </div>
         </div>
       </div>
@@ -41,13 +41,14 @@
             <h2>上报地区</h2>
           </div>
           <div class="form-item__right">
-            <ai-area-picker ref="area" class="ai-area" :value="form.areaId" :areaId="$areaId" :fullName.sync="form.areaName" all mode="custom" @select="v => form.areaId = v">
+            <AiAreaPicker ref="area" class="ai-area" :value="form.areaId" :areaId="$areaId"
+                          :fullName.sync="form.areaName" all mode="custom" @select="v => form.areaId = v">
               <div class="ai-area__wrapper">
                 <span class="label" v-if="form.areaName">{{ form.areaName }}</span>
                 <i v-else>请选择</i>
                 <u-icon name="arrow-right" color="#ddd"/>
               </div>
-            </ai-area-picker>
+            </AiAreaPicker>
           </div>
         </div>
       </div>
@@ -58,7 +59,8 @@
             <h2>详细地址</h2>
           </div>
           <div class="form-item__right">
-            <textarea auto-height v-model="form.address" :maxlength="500" placeholder="请输入详细地址" placeholder-style="font-size: 16px;"></textarea>
+            <textarea auto-height v-model="form.address" :maxlength="500" placeholder="请输入详细地址"
+                      placeholder-style="font-size: 16px;"></textarea>
           </div>
         </div>
       </div>
@@ -70,261 +72,256 @@
 </template>
 
 <script>
-  import AiSelect from '@/components/AiSelect/AiSelect'
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
-  export default {
-    data () {
-      return {
-        form: {
-          address: '',
-          areaId: '',
-          areaName: '',
-          idNumber: '',
-          name: '',
-          phone: ''
-        },
-        $areaId: '',
-        flag: false
+export default {
+  data() {
+    return {
+      form: {
+        address: '',
+        areaId: '',
+        areaName: '',
+        idNumber: '',
+        name: '',
+        phone: ''
+      },
+      $areaId: '',
+      flag: false
+    }
+  },
+  computed: {
+    ...mapState(['user'])
+  },
+
+  methods: {
+    submit() {
+      if (!this.form.name) {
+        return this.$toast('请输入上报人姓名')
       }
-    },
 
-    components: {
-      AiSelect
-    },
-
-    computed: {
-      ...mapState(['user'])
-    },
-
-    methods: {
-      submit () {
-        if (!this.form.name) {
-          return this.$toast('请输入上报人姓名')
-        }
-
-        if (!this.form.idNumber) {
-          return this.$toast('请输入上报人身份证号')
-        }
-
-        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
-          return this.$toast('请输入正确的身份证账号')
-        }
-        if (!this.form.phone) {
-          return this.$toast('请选择上报人手机号码')
-        }
-
-        if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
-          return this.$toast('请输入正确的手机号码')
-        }
-
-        if (!this.form.areaId) {
-          return this.$toast('请选择上报地区')
-        }
-
-        if (this.form.areaId.substr(this.form.areaId.length - 3, 3) === '000') {
-          return this.$toast('上报地区必须选到村或社区')
-        }
-
-        if (!this.form.address) {
-          return this.$toast('请输入详细地址')
-        }
-        if (this.flag) return
-        this.flag = true
-
-        this.$loading()
-        this.$instance.post(`/app/appepidemicreportmember/addOrUpdate`, {
-          ...this.form,
-          openid: this.user.openid
-        }).then(res => {
-          this.$hideLoading()
-          this.flag = false
-          if (res.code == 0) {
-            this.$toast('提交成功')
-            uni.$emit('update')
-            setTimeout(() => {
-              uni.redirectTo({
-                url: `./Result?id=${res.data.id}`
-              })
-            }, 400)
-          }
-        })
+      if (!this.form.idNumber) {
+        return this.$toast('请输入上报人身份证号')
       }
+
+      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
+        return this.$toast('请输入正确的身份证账号')
+      }
+      if (!this.form.phone) {
+        return this.$toast('请选择上报人手机号码')
+      }
+
+      if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
+        return this.$toast('请输入正确的手机号码')
+      }
+
+      if (!this.form.areaId) {
+        return this.$toast('请选择上报地区')
+      }
+
+      if (this.form.areaId.substr(this.form.areaId.length - 3, 3) === '000') {
+        return this.$toast('上报地区必须选到村或社区')
+      }
+
+      if (!this.form.address) {
+        return this.$toast('请输入详细地址')
+      }
+      if (this.flag) return
+      this.flag = true
+
+      this.$loading()
+      this.$instance.post(`/app/appepidemicreportmember/addOrUpdate`, {
+        ...this.form,
+        openid: this.user.openid
+      }).then(res => {
+        this.$hideLoading()
+        this.flag = false
+        if (res.code == 0) {
+          this.$toast('提交成功')
+          uni.$emit('update')
+          setTimeout(() => {
+            uni.redirectTo({
+              url: `./Result?id=${res.data.id}`
+            })
+          }, 400)
+        }
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .album {
-    padding-bottom: 140px;
+.album {
+  padding-bottom: 140px;
 
-    .form-item__group {
-      margin-bottom: 24px;
-      background: #fff;
+  .form-item__group {
+    margin-bottom: 24px;
+    background: #fff;
+  }
+
+  .form-item {
+    padding-left: 32px;
+
+    .form-item__checkbox {
+      width: 100%;
+
+      div {
+        width: 100%;
+        height: 80px;
+        line-height: 80px;
+        margin-bottom: 24px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
+
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
+        }
+      }
     }
 
-    .form-item {
-      padding-left: 32px;
+    .form-item__radio {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
-      .form-item__checkbox {
-        width: 100%;
-        div {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          margin-bottom: 24px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
+      div {
+        width: 212px;
+        height: 80px;
+        line-height: 80px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
 
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
+
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
         }
       }
+    }
 
-      .form-item__radio {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
+    .ai-area__wrapper {
+      display: flex;
+      align-items: center;
+      padding-left: 100px;
 
-        div {
-          width: 212px;
-          height: 80px;
-          line-height: 80px;
-          margin-right: 16px;
-          margin-bottom: 8px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
-
-          &:nth-of-type(3n) {
-            margin-right: 0;
-          }
-
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
-        }
+      span {
+        color: #333;
+        font-size: 30px;
       }
 
-      .ai-area__wrapper {
+      i {
+        color: #999;
+        font-size: 30px;
+      }
+
+      image {
+        width: 16px;
+        height: 8px;
+      }
+    }
+
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      padding-right: 28px;
+      border-bottom: 1px solid #DDDDDD;
+
+      input {
+        flex: 1;
+        height: 100%;
+        text-align: right;
+        color: #333;
+        padding-right: 10px;
+      }
+
+      .form-item__right {
         display: flex;
         align-items: center;
-        padding-left: 100px;
+        font-size: 32px;
 
         span {
-          color: #333;
-          font-size: 30px;
+          max-width: 400px;
+          margin-right: 8px;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         i {
-          color: #999;
-          font-size: 30px;
-        }
-
-        image {
-          width: 16px;
-          height: 8px;
+          margin-right: 8px;
+          color: #999999;
         }
       }
+    }
 
+    &:last-child {
       .form-item__wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 128px;
-        padding-right: 28px;
-        border-bottom: 1px solid #DDDDDD;
+        border-bottom: none;
+      }
+    }
 
-        input {
-          flex: 1;
-          height: 100%;
-          text-align: right;
-          color: #333;
-          padding-right: 10px;
-        }
+    .form-item__title {
+      display: flex;
+      align-items: center;
 
-        .form-item__right {
-          display: flex;
-          align-items: center;
-          font-size: 32px;
-
-          span {
-            max-width: 400px;
-            margin-right: 8px;
-            color: #333333;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-
-          i {
-            margin-right: 8px;
-            color: #999999;
-          }
-        }
+      i {
+        font-size: 32px;
+        color: #FF4466;
       }
 
-      &:last-child {
-        .form-item__wrapper {
-          border-bottom: none;
-        }
+      span {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      h2 {
+        padding: 0 4px;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
+      }
+    }
+
+
+    &.form-item__imgs, &.form-item__textarea {
+      .form-item__wrapper {
+        display: block;
+        height: auto;
+        padding-bottom: 32px;
+      }
+
+      textarea {
+        width: 100%;
+        height: 90px;
       }
 
       .form-item__title {
-        display: flex;
-        align-items: center;
-
-        i {
-          font-size: 32px;
-          color: #FF4466;
-        }
-
-        span {
-          font-size: 28px;
-          color: #999999;
-        }
-
-        h2 {
-          padding: 0 4px;
-          font-weight: 600;
-          font-size: 32px;
-          color: #333333;
-        }
+        padding: 32px 0;
       }
 
-
-      &.form-item__imgs, &.form-item__textarea {
-        .form-item__wrapper {
-          display: block;
-          height: auto;
-          padding-bottom: 32px;
-        }
-
-        textarea {
-          width: 100%;
-          height: 90px;
-        }
-
-        .form-item__title {
-          padding: 32px 0;
-        }
-
-        .form-item__right {
-          padding-left: 18px;
-        }
+      .form-item__right {
+        padding-left: 18px;
       }
     }
   }
+}
 </style>
diff --git a/src/mods/service/AppPhotoReport/PhotoForm.vue b/src/mods/service/AppPhotoReport/PhotoForm.vue
index 4344dc0..1079010 100644
--- a/src/mods/service/AppPhotoReport/PhotoForm.vue
+++ b/src/mods/service/AppPhotoReport/PhotoForm.vue
@@ -35,7 +35,7 @@
           <div class="form-item__right" @click="chooseAddress">
             <span v-if="form.address">{{ form.address }}</span>
             <i v-else>请选择</i>
-            <u-icon name="arrow-right" color="#ddd" />
+            <u-icon name="arrow-right" color="#ddd"/>
           </div>
         </div>
       </div>
@@ -45,13 +45,14 @@
             <i>*</i>
             <h2>所属网格</h2>
           </div>
-            <picker :range="gridList" mode="multiSelector" range-key="girdName" @columnchange="onColumnChange" @change="onChange">
-              <div class="form-item__right">
-                <span v-if="form.girdName">{{ form.girdName }}</span>
-                <i v-else>请选择</i>
-                <u-icon name="arrow-right" color="#ddd" />
-              </div>
-            </picker>
+          <picker :range="gridList" mode="multiSelector" range-key="girdName" @columnchange="onColumnChange"
+                  @change="onChange">
+            <div class="form-item__right">
+              <span v-if="form.girdName">{{ form.girdName }}</span>
+              <i v-else>请选择</i>
+              <u-icon name="arrow-right" color="#ddd"/>
+            </div>
+          </picker>
         </div>
       </div>
     </div>
@@ -64,7 +65,7 @@
             <span>(最多9张)</span>
           </div>
           <div class="form-item__right">
-            <ai-uploader v-model="form.files" :limit="9"></ai-uploader>
+            <AiUploader v-model="form.files" :limit="9"></AiUploader>
           </div>
         </div>
       </div>
@@ -77,7 +78,7 @@
             <h2>姓名</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.name" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -88,7 +89,7 @@
             <h2>联系方式</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.phone" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.phone" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -100,285 +101,277 @@
 </template>
 
 <script>
-  import AiUploader from '@/components/AiUploader/AiUploader'
-  import AiSelect from '@/components/AiSelect/AiSelect'
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
-  export default {
-    data () {
-      return {
-        isShowType: false,
-        form: {
-          content: '',
-          lat: '',
-          lng: '',
-          address: '',
-          name: '',
-          phone: '',
-          groupId: '',
-          groupName: '',
-          girdName: '',
-          girdId: '',
-          files: []
+export default {
+  data() {
+    return {
+      isShowType: false,
+      form: {
+        content: '',
+        lat: '',
+        lng: '',
+        address: '',
+        name: '',
+        phone: '',
+        groupId: '',
+        groupName: '',
+        girdName: '',
+        girdId: '',
+        files: []
+      },
+      dictList: [],
+      arr: [],
+      gridList: [[], []],
+      flag: false
+    }
+  },
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  onLoad() {
+    this.getDict()
+    this.form.phone = this.user.phone
+    this.form.name = this.user.realName || ''
+    this.getGirdList()
+  },
+
+  methods: {
+    chooseAddress() {
+      uni.authorize({
+        scope: 'scope.userLocation',
+        success: () => {
+          uni.chooseLocation({
+            success: res => {
+              this.form.address = res.address
+              this.form.lat = res.latitude
+              this.form.lng = res.longitude
+            }
+          })
         },
-        dictList: [],
-        arr: [],
-        gridList: [[], []],
-        flag: false
-      }
-    },
-
-    components: {
-      AiSelect,
-      AiUploader
-    },
-
-    computed: {
-      ...mapState(['user'])
-    },
-
-    onLoad () {
-      this.getDict()
-      this.form.phone = this.user.phone
-      this.form.name = this.user.realName || ''
-      this.getGirdList()
-    },
-
-    methods: {
-      chooseAddress () {
-        uni.authorize({
-          scope: 'scope.userLocation',
-          success: () => {
-            uni.chooseLocation({
+        fail: () => {
+          this.$dialog.confirm({
+            content: '您未授权定位权限，无法选择位置'
+          }).then(() => {
+            wx.openSetting({
               success: res => {
-                this.form.address = res.address
-                this.form.lat = res.latitude
-                this.form.lng = res.longitude
-              }
-            })
-          },
-          fail: () => {
-            this.$dialog.confirm({
-              content: '您未授权定位权限，无法选择位置'
-            }).then(() => {
-              wx.openSetting({
-                success: res => {
-                  if (!res.authSetting['scope.userLocation']) {
-                    this.$dialog.alert({
-                      content: '您未授权定位权限，无法选择位置'
-                    }).then(() => {
-                    })
-                  } else {
-                    console.log('设置定位权限')
-                  }
+                if (!res.authSetting['scope.userLocation']) {
+                  this.$dialog.alert({
+                    content: '您未授权定位权限，无法选择位置'
+                  }).then(() => {
+                  })
+                } else {
+                  console.log('设置定位权限')
                 }
-              })
-            })
-          }
-        })
-      },
-
-      getDict () {
-        this.$instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
-          if (res.code == 0) {
-            this.dictList = res.data.records.map(v => {
-              return {
-                value: v.id,
-                label: v.groupName
               }
             })
-          }
-        })
-      },
-
-      getGirdData (x) {
-        if (x > -1) {
-          this.$set(this.gridList, '1', this.arr[0].girdList[x].girdList)
+          })
         }
-      },
+      })
+    },
 
-      getGirdList () {
-        this.$instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
-          if (res.code == 0) {
-            this.arr = res.data
-            this.gridList[0] = res.data[0].girdList
-            this.gridList[1] = res.data[0].girdList[0].girdList
-          }
-        })
-      },
-
-      onColumnChange (e) {
-        const column = e.detail.column
-        const value = e.detail.value
-
-
-
-        if (column === column) {
-          this.getGirdData(value)
+    getDict() {
+      this.$instance.post(`/app/appclapeventgroup/list?current=1&size=100000`).then(res => {
+        if (res.code == 0) {
+          this.dictList = res.data.records.map(v => {
+            return {
+              value: v.id,
+              label: v.groupName
+            }
+          })
         }
-      },
+      })
+    },
 
-      onChange (e) {
-        console.log(e)
-        const v = e.detail.value[1]
-         console.log(v)
-        if (this.gridList[1][v]) {
-          this.form.girdName = this.gridList[1][v].girdName
-          this.form.girdId = this.gridList[1][v].id
-        } else {
-          return this.$toast('所属网格必须选第三级网格')
-          // this.form.girdName = this.gridList[e.detail.value[0].girdName
-          // this.form.girdId = this.gridList[e.detail.value[0].id
-        }
-      },
-
-      submit () {
-        if (!this.form.groupId) {
-          return this.$toast('请选择事件类型')
-        }
-
-        if (!this.form.content) {
-          return this.$toast('请输入事件描述')
-        }
-        if (!this.form.address) {
-          return this.$toast('请选择上报位置')
-        }
-
-        if (!this.form.girdName) {
-          return this.$toast('请选择所属网格')
-        }
-        if (!this.form.name) {
-          return this.$toast('请输入上报人姓名')
-        }
-
-        if (!this.form.girdName) {
-          return this.$toast('请输入上报人联系方式')
-        }
-        if(this.flag) return
-        this.flag = true
-
-        this.$loading()
-        this.$instance.post(`/app/appclapeventinfo/addOrUpdate`, {
-          ...this.form,
-          openid: this.user.openid,
-          portrait: this.user.avatarUrl,
-          files: this.form.files,
-          groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
-        }).then(res => {
-          this.$hideLoading()
-          this.flag = false
-          if (res.code == 0) {
-            uni.$emit('update')
-            setTimeout(() => {
-              uni.redirectTo({
-                url: './PhotoResult?id=' + res.data.id
-              })
-            }, 400)
-          }
-          this.$hideLoading()
-        })
+    getGirdData(x) {
+      if (x > -1) {
+        this.$set(this.gridList, '1', this.arr[0].girdList[x].girdList)
       }
+    },
+
+    getGirdList() {
+      this.$instance.post(`/app/appgirdinfo/listAllByTop`).then(res => {
+        if (res.code == 0) {
+          this.arr = res.data
+          this.gridList[0] = res.data[0].girdList
+          this.gridList[1] = res.data[0].girdList[0].girdList
+        }
+      })
+    },
+
+    onColumnChange(e) {
+      const column = e.detail.column
+      const value = e.detail.value
+
+
+      if (column === column) {
+        this.getGirdData(value)
+      }
+    },
+
+    onChange(e) {
+      console.log(e)
+      const v = e.detail.value[1]
+      console.log(v)
+      if (this.gridList[1][v]) {
+        this.form.girdName = this.gridList[1][v].girdName
+        this.form.girdId = this.gridList[1][v].id
+      } else {
+        return this.$toast('所属网格必须选第三级网格')
+        // this.form.girdName = this.gridList[e.detail.value[0].girdName
+        // this.form.girdId = this.gridList[e.detail.value[0].id
+      }
+    },
+
+    submit() {
+      if (!this.form.groupId) {
+        return this.$toast('请选择事件类型')
+      }
+
+      if (!this.form.content) {
+        return this.$toast('请输入事件描述')
+      }
+      if (!this.form.address) {
+        return this.$toast('请选择上报位置')
+      }
+
+      if (!this.form.girdName) {
+        return this.$toast('请选择所属网格')
+      }
+      if (!this.form.name) {
+        return this.$toast('请输入上报人姓名')
+      }
+
+      if (!this.form.girdName) {
+        return this.$toast('请输入上报人联系方式')
+      }
+      if (this.flag) return
+      this.flag = true
+
+      this.$loading()
+      this.$instance.post(`/app/appclapeventinfo/addOrUpdate`, {
+        ...this.form,
+        openid: this.user.openid,
+        portrait: this.user.avatarUrl,
+        files: this.form.files,
+        groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
+      }).then(res => {
+        this.$hideLoading()
+        this.flag = false
+        if (res.code == 0) {
+          uni.$emit('update')
+          setTimeout(() => {
+            uni.redirectTo({
+              url: './PhotoResult?id=' + res.data.id
+            })
+          }, 400)
+        }
+        this.$hideLoading()
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .album {
-    padding-bottom: 140px;
+.album {
+  padding-bottom: 140px;
 
-    .form-item__group {
-      margin-bottom: 24px;
-      background: #fff;
-    }
+  .form-item__group {
+    margin-bottom: 24px;
+    background: #fff;
+  }
 
-    .form-item {
-      padding-left: 32px;
+  .form-item {
+    padding-left: 32px;
 
-      .form-item__wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 128px;
-        padding-right: 28px;
-        border-bottom: 1px solid #DDDDDD;
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      padding-right: 28px;
+      border-bottom: 1px solid #DDDDDD;
 
-        input {
-          flex: 1;
-          height: 100%;
-          text-align: right;
-          padding-right: 10px;
-        }
-
-        .form-item__right {
-          display: flex;
-          align-items: center;
-          font-size: 32px;
-
-          span {
-            max-width: 400px;
-            margin-right: 8px;
-            color: #333333;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-
-          i {
-            margin-right: 8px;
-            color: #999999;
-          }
-        }
+      input {
+        flex: 1;
+        height: 100%;
+        text-align: right;
+        padding-right: 10px;
       }
 
-      &:last-child {
-        .form-item__wrapper {
-          border-bottom: none;
+      .form-item__right {
+        display: flex;
+        align-items: center;
+        font-size: 32px;
+
+        span {
+          max-width: 400px;
+          margin-right: 8px;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
+
+        i {
+          margin-right: 8px;
+          color: #999999;
+        }
+      }
+    }
+
+    &:last-child {
+      .form-item__wrapper {
+        border-bottom: none;
+      }
+    }
+
+    .form-item__title {
+      display: flex;
+      align-items: center;
+
+      i {
+        font-size: 32px;
+        color: #FF4466;
+      }
+
+      span {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      h2 {
+        padding: 0 4px;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
+      }
+    }
+
+
+    &.form-item__imgs, &.form-item__textarea {
+      .form-item__wrapper {
+        display: block;
+        height: auto;
+        padding-bottom: 32px;
+      }
+
+      textarea {
+        width: 100%;
+        height: 160px;
       }
 
       .form-item__title {
-        display: flex;
-        align-items: center;
-
-        i {
-          font-size: 32px;
-          color: #FF4466;
-        }
-
-        span {
-          font-size: 28px;
-          color: #999999;
-        }
-
-        h2 {
-          padding: 0 4px;
-          font-weight: 600;
-          font-size: 32px;
-          color: #333333;
-        }
+        padding: 32px 0;
       }
 
-
-      &.form-item__imgs, &.form-item__textarea {
-        .form-item__wrapper {
-          display: block;
-          height: auto;
-          padding-bottom: 32px;
-        }
-
-        textarea {
-          width: 100%;
-          height: 160px;
-        }
-
-        .form-item__title {
-          padding: 32px 0;
-        }
-
-        .form-item__right {
-          padding-left: 18px;
-        }
+      .form-item__right {
+        padding-left: 18px;
       }
     }
   }
+}
 </style>
diff --git a/src/mods/service/AppReturnHomeRegister/Add.vue b/src/mods/service/AppReturnHomeRegister/Add.vue
index 8d225b4..d119374 100644
--- a/src/mods/service/AppReturnHomeRegister/Add.vue
+++ b/src/mods/service/AppReturnHomeRegister/Add.vue
@@ -9,7 +9,7 @@
             <h2>返乡人员姓名</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.name" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -20,7 +20,7 @@
             <h2>身份证号</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20" />
+            <input placeholder="请输入" type="idcard" v-model="form.idNumber" :maxlength="20"/>
           </div>
         </div>
       </div>
@@ -31,7 +31,7 @@
             <h2>手机号码</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11" />
+            <input placeholder="请输入" type="number" v-model="form.phone" :maxlength="11"/>
           </div>
         </div>
       </div>
@@ -83,13 +83,14 @@
             <h2>出发地区</h2>
           </div>
           <div class="form-item__right">
-            <ai-area-picker ref="area" class="ai-area" :value="form.startAreaId" :fullName.sync="form.startAreaName" all mode="custom" @select="v => form.startAreaId = v">
+            <AiAreaPicker ref="area" class="ai-area" :value="form.startAreaId" :fullName.sync="form.startAreaName" all
+                          mode="custom" @select="v => form.startAreaId = v">
               <div class="ai-area__wrapper">
                 <span class="label" v-if="form.startAreaName">{{ form.startAreaName }}</span>
                 <i v-else>请选择</i>
                 <u-icon name="arrow-right" color="#ddd"/>
               </div>
-            </ai-area-picker>
+            </AiAreaPicker>
           </div>
         </div>
       </div>
@@ -100,7 +101,8 @@
             <h2>出发地址</h2>
           </div>
           <div class="form-item__right">
-            <textarea auto-height v-model="form.startAddress" :maxlength="500" placeholder="请输入详细的出发地址"  placeholder-style="font-size: 16px"></textarea>
+            <textarea auto-height v-model="form.startAddress" :maxlength="500" placeholder="请输入详细的出发地址"
+                      placeholder-style="font-size: 16px"></textarea>
           </div>
         </div>
       </div>
@@ -128,19 +130,19 @@
             <h2>到达地区</h2>
           </div>
           <div class="form-item__right">
-            <ai-area-picker
-              ref="area"
-              class="ai-area"
-              :value="form.arriveAreaId"
-              :fullName.sync="form.arriveAreaName"
-              :areaId="$areaId"
-              mode="custom" @select="v => form.arriveAreaId = v">
+            <AiAreaPicker
+                ref="area"
+                class="ai-area"
+                :value="form.arriveAreaId"
+                :fullName.sync="form.arriveAreaName"
+                :areaId="$areaId"
+                mode="custom" @select="v => form.arriveAreaId = v">
               <div class="ai-area__wrapper">
                 <span class="label" v-if="form.arriveAreaName">{{ form.arriveAreaName }}</span>
                 <i v-else>请选择</i>
                 <u-icon name="arrow-right" color="#ddd"/>
               </div>
-            </ai-area-picker>
+            </AiAreaPicker>
           </div>
         </div>
       </div>
@@ -151,7 +153,8 @@
             <h2>返乡地址</h2>
           </div>
           <div class="form-item__right">
-            <textarea auto-height v-model="form.arriveAddress" :maxlength="500" placeholder="请输入详细的返乡地址" placeholder-style="font-size: 16px"></textarea>
+            <textarea auto-height v-model="form.arriveAddress" :maxlength="500" placeholder="请输入详细的返乡地址"
+                      placeholder-style="font-size: 16px"></textarea>
           </div>
         </div>
       </div>
@@ -162,7 +165,8 @@
             <h2>行程描述</h2>
           </div>
           <div class="form-item__right">
-            <textarea auto-height style="height: 90px" v-model="form.description" :maxlength="500" placeholder="请输入行程描述"  placeholder-style="font-size: 16px"></textarea>
+            <textarea auto-height style="height: 90px" v-model="form.description" :maxlength="500" placeholder="请输入行程描述"
+                      placeholder-style="font-size: 16px"></textarea>
           </div>
         </div>
       </div>
@@ -192,7 +196,7 @@
             <h2>本人健康码截图或核酸检测报告</h2>
           </div>
           <div class="form-item__right">
-            <ai-uploader v-model="form.checkPhoto" :limit="1"></ai-uploader>
+            <AiUploader v-model="form.checkPhoto" :limit="1"></AiUploader>
           </div>
         </div>
       </div>
@@ -216,7 +220,7 @@
             <h2>当前体温</h2>
           </div>
           <div class="form-item__right">
-            <input placeholder="请输入" v-model="form.temperature" :maxlength="20" />
+            <input placeholder="请输入" v-model="form.temperature" :maxlength="20"/>
             <i>℃</i>
           </div>
         </div>
@@ -254,389 +258,384 @@
 </template>
 
 <script>
-  import AiUploader from '@/components/AiUploader/AiUploader'
-  import AiSelect from '@/components/AiSelect/AiSelect'
-  import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 
-  export default {
-    data () {
-      return {
-        isShowType: false,
-        isShowEndTime: false,
-        isShowStartTime: false,
-        isShowDate: false,
-				params: {
-					year: true,
-					month: true,
-					day: true,
-					hour: true,
-					minute: true
-				},
-				dataParams: {
-					year: true,
-					month: true,
-					day: true
-				},
-        form: {
-          arriveAddress: '',
-          arriveAreaId: '',
-          arriveAreaName: '',
-          arriveTime: '',
-          checkPhoto: [],
-          checkResult: '',
-          checkTime: '',
-          description: '',
-          health: [],
-          idNumber: '',
-          name: '',
-          phone: '',
-          startAddress: '',
-          startAreaId: '',
-          startAreaName: '',
-          startTime: '',
-          temperature: '',
-          touchInFourteen: '',
-          travelType: '',
-          type: '',
-          unusual: '',
-        },
-        dictList: [],
-        arr: [],
-        gridList: [[], [], []],
-        flag: false,
-        $areaId: ''
+export default {
+  data() {
+    return {
+      isShowType: false,
+      isShowEndTime: false,
+      isShowStartTime: false,
+      isShowDate: false,
+      params: {
+        year: true,
+        month: true,
+        day: true,
+        hour: true,
+        minute: true
+      },
+      dataParams: {
+        year: true,
+        month: true,
+        day: true
+      },
+      form: {
+        arriveAddress: '',
+        arriveAreaId: '',
+        arriveAreaName: '',
+        arriveTime: '',
+        checkPhoto: [],
+        checkResult: '',
+        checkTime: '',
+        description: '',
+        health: [],
+        idNumber: '',
+        name: '',
+        phone: '',
+        startAddress: '',
+        startAreaId: '',
+        startAreaName: '',
+        startTime: '',
+        temperature: '',
+        touchInFourteen: '',
+        travelType: '',
+        type: '',
+        unusual: '',
+      },
+      dictList: [],
+      arr: [],
+      gridList: [[], [], []],
+      flag: false,
+      $areaId: ''
+    }
+  },
+
+
+  computed: {
+    ...mapState(['user'])
+  },
+
+  onLoad() {
+    this.$areaId = this.user.$areaId
+  },
+
+  methods: {
+    onDateChange(e) {
+      this.form.checkTime = `${e.year}-${e.month}-${e.day}`
+    },
+
+    onStartChange(e) {
+      this.form.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
+    },
+
+    onEndChange(e) {
+      this.form.arriveTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
+    },
+
+    submit() {
+      if (!this.form.name) {
+        return this.$toast('请输入返乡人员姓名')
       }
-    },
 
-    components: {
-      AiSelect,
-      AiUploader
-    },
-
-    computed: {
-      ...mapState(['user'])
-    },
-
-    onLoad () {
-      this.$areaId = this.user.$areaId
-    },
-
-    methods: {
-      onDateChange (e) {
-        this.form.checkTime = `${e.year}-${e.month}-${e.day}`
-      },
-
-      onStartChange (e) {
-        this.form.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
-      },
-
-      onEndChange (e) {
-        this.form.arriveTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
-      },
-
-      submit () {
-        if (!this.form.name) {
-          return this.$toast('请输入返乡人员姓名')
-        }
-
-        if (!this.form.idNumber) {
-          return this.$toast('请输入返乡人员身份证号')
-        }
-
-        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
-          return this.$toast('请输入正确的身份证账号')
-        }
-
-        if (!this.form.phone) {
-          return this.$toast('请输入返乡人员手机号码')
-        }
-
-        if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
-          return this.$toast('请输入正确的手机号码')
-        }
-
-        if (!this.form.type) {
-          return this.$toast('请选择人员类别')
-        }
-
-        if (!this.form.travelType) {
-          return this.$toast('请选择出行方式')
-        }
-
-        if (!this.form.startTime) {
-          return this.$toast('请选择出发时间')
-        }
-
-        if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() > new Date().getTime()) {
-          return this.$toast('出发时间不得晚于当前时间')
-        }
-
-        if (!this.form.startAreaName) {
-          return this.$toast('请选择出发地区')
-        }
-
-        if (this.form.startAreaId.substr(this.form.startAreaId.length - 3, 3) === '000') {
-          return this.$toast('出发地区必须选到村或社区')
-        }
-        if (!this.form.startAddress) {
-          return this.$toast('请输入出发详细地址')
-        }
-
-        if (!this.form.arriveTime) {
-          return this.$toast('请选择到达时间')
-        }
-
-        if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() >= new Date(this.form.arriveTime.replace(/-/g, '/')).getTime()) {
-          return this.$toast('到达时间不得早于出发时间')
-        }
-
-        if (!this.form.arriveAreaName) {
-          return this.$toast('请选择到达地区')
-        }
-        if (this.form.arriveAreaId.substr(this.form.arriveAreaId.length - 3, 3) === '000') {
-          return this.$toast('到达地区必须选到村或社区')
-        }
-        if (!this.form.arriveAddress) {
-          return this.$toast('请输入返乡地址')
-        }
-
-        if (!this.form.description) {
-          return this.$toast('请输入行程描述')
-        }
-        if (!this.form.checkTime) {
-          return this.$toast('请选择核酸检测日期')
-        }
-        if (!this.form.checkPhoto.length) {
-          return this.$toast('请上传本人健康码截图或核酸检测报告')
-        }
-
-        if (!this.form.checkResult) {
-          return this.$toast('请选择核酸检测结果')
-        }
-        if (!this.form.temperature) {
-          return this.$toast('请输入当前体温')
-        }
-        if (!this.form.touchInFourteen) {
-          return this.$toast('请选择14天内是否接触新冠确诊或疑似患者')
-        }
-
-        if (!this.form.health.length) {
-          return this.$toast('请选择当前健康状况')
-        }
-        if (this.flag) return
-        this.flag = true
-
-        this.$loading()
-        this.$instance.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {
-          ...this.form,
-          openid: this.user.openid,
-          startTime: this.form.startTime + ':00',
-          arriveTime: this.form.arriveTime + ':00',
-          checkTime: this.form.checkTime + ' 00:00:00',
-          health: this.form.health.join(','),
-          checkPhoto: JSON.stringify(this.form.checkPhoto)
-        }).then(res => {
-          this.$hideLoading()
-          this.flag = false
-          if (res.code == 0) {
-            uni.$emit('update')
-            this.$toast('提交成功')
-            setTimeout(() => {
-              uni.navigateBack()
-            }, 400)
-          }
-        })
+      if (!this.form.idNumber) {
+        return this.$toast('请输入返乡人员身份证号')
       }
+
+      if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNumber)) {
+        return this.$toast('请输入正确的身份证账号')
+      }
+
+      if (!this.form.phone) {
+        return this.$toast('请输入返乡人员手机号码')
+      }
+
+      if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
+        return this.$toast('请输入正确的手机号码')
+      }
+
+      if (!this.form.type) {
+        return this.$toast('请选择人员类别')
+      }
+
+      if (!this.form.travelType) {
+        return this.$toast('请选择出行方式')
+      }
+
+      if (!this.form.startTime) {
+        return this.$toast('请选择出发时间')
+      }
+
+      if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() > new Date().getTime()) {
+        return this.$toast('出发时间不得晚于当前时间')
+      }
+
+      if (!this.form.startAreaName) {
+        return this.$toast('请选择出发地区')
+      }
+
+      if (this.form.startAreaId.substr(this.form.startAreaId.length - 3, 3) === '000') {
+        return this.$toast('出发地区必须选到村或社区')
+      }
+      if (!this.form.startAddress) {
+        return this.$toast('请输入出发详细地址')
+      }
+
+      if (!this.form.arriveTime) {
+        return this.$toast('请选择到达时间')
+      }
+
+      if (new Date(this.form.startTime.replace(/-/g, '/')).getTime() >= new Date(this.form.arriveTime.replace(/-/g, '/')).getTime()) {
+        return this.$toast('到达时间不得早于出发时间')
+      }
+
+      if (!this.form.arriveAreaName) {
+        return this.$toast('请选择到达地区')
+      }
+      if (this.form.arriveAreaId.substr(this.form.arriveAreaId.length - 3, 3) === '000') {
+        return this.$toast('到达地区必须选到村或社区')
+      }
+      if (!this.form.arriveAddress) {
+        return this.$toast('请输入返乡地址')
+      }
+
+      if (!this.form.description) {
+        return this.$toast('请输入行程描述')
+      }
+      if (!this.form.checkTime) {
+        return this.$toast('请选择核酸检测日期')
+      }
+      if (!this.form.checkPhoto.length) {
+        return this.$toast('请上传本人健康码截图或核酸检测报告')
+      }
+
+      if (!this.form.checkResult) {
+        return this.$toast('请选择核酸检测结果')
+      }
+      if (!this.form.temperature) {
+        return this.$toast('请输入当前体温')
+      }
+      if (!this.form.touchInFourteen) {
+        return this.$toast('请选择14天内是否接触新冠确诊或疑似患者')
+      }
+
+      if (!this.form.health.length) {
+        return this.$toast('请选择当前健康状况')
+      }
+      if (this.flag) return
+      this.flag = true
+
+      this.$loading()
+      this.$instance.post(`/app/appepidemicbackhomerecord/addOrUpdate`, {
+        ...this.form,
+        openid: this.user.openid,
+        startTime: this.form.startTime + ':00',
+        arriveTime: this.form.arriveTime + ':00',
+        checkTime: this.form.checkTime + ' 00:00:00',
+        health: this.form.health.join(','),
+        checkPhoto: JSON.stringify(this.form.checkPhoto)
+      }).then(res => {
+        this.$hideLoading()
+        this.flag = false
+        if (res.code == 0) {
+          uni.$emit('update')
+          this.$toast('提交成功')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 400)
+        }
+      })
     }
   }
+}
 </script>
 
 <style lang="scss">
-  .album {
-    padding-bottom: 140px;
+.album {
+  padding-bottom: 140px;
 
-    .tips {
-      line-height: 1.3;
-      padding: 32px 32px;
-      color: #FF883C;
-      font-size: 30px;
-      text-align: justify;
-      background: #FFF8F3;
-    }
+  .tips {
+    line-height: 1.3;
+    padding: 32px 32px;
+    color: #FF883C;
+    font-size: 30px;
+    text-align: justify;
+    background: #FFF8F3;
+  }
 
-    .form-item__group {
-      margin-bottom: 24px;
-      background: #fff;
-    }
+  .form-item__group {
+    margin-bottom: 24px;
+    background: #fff;
+  }
 
-    .form-item {
-      padding-left: 32px;
+  .form-item {
+    padding-left: 32px;
 
-      .form-item__checkbox {
+    .form-item__checkbox {
+      width: 100%;
+
+      div {
         width: 100%;
-        div {
-          width: 100%;
-          height: 80px;
-          line-height: 80px;
-          margin-bottom: 24px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
+        height: 80px;
+        line-height: 80px;
+        margin-bottom: 24px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
 
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
         }
       }
+    }
 
-      .form-item__radio {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
+    .form-item__radio {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
 
-        div {
-          width: 212px;
-          height: 80px;
-          line-height: 80px;
-          margin-right: 16px;
-          margin-bottom: 8px;
-          text-align: center;
-          background: #FFFFFF;
-          border-radius: 16px;
-          color: #333333;
-          font-size: 28px;
-          border: 1px solid #CCCCCC;
+      div {
+        width: 212px;
+        height: 80px;
+        line-height: 80px;
+        margin-right: 16px;
+        margin-bottom: 8px;
+        text-align: center;
+        background: #FFFFFF;
+        border-radius: 16px;
+        color: #333333;
+        font-size: 28px;
+        border: 1px solid #CCCCCC;
 
-          &:nth-of-type(3n) {
-            margin-right: 0;
-          }
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
 
-          &.active {
-            background: #4181FF;
-            color: #fff;
-            border-color: #4181FF;
-          }
+        &.active {
+          background: #4181FF;
+          color: #fff;
+          border-color: #4181FF;
         }
       }
+    }
 
-      .ai-area__wrapper {
+    .ai-area__wrapper {
+      display: flex;
+      align-items: center;
+      padding-left: 100px;
+
+      span {
+        color: #333;
+        font-size: 30px;
+      }
+
+      i {
+        color: #999;
+        font-size: 30px;
+      }
+
+      image {
+        width: 16px;
+        height: 8px;
+      }
+    }
+
+    .form-item__wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 128px;
+      padding-right: 28px;
+      border-bottom: 1px solid #DDDDDD;
+
+      input {
+        flex: 1;
+        height: 100%;
+        text-align: right;
+        color: #333;
+        padding-right: 10px;
+      }
+
+      .form-item__right {
         display: flex;
         align-items: center;
-        padding-left: 100px;
+        font-size: 32px;
+
+        .select {
+          ._i {
+            padding-left: 100px;
+          }
+        }
 
         span {
-          color: #333;
-          font-size: 30px;
+          max-width: 400px;
+          margin-right: 8px;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
 
         i {
-          color: #999;
-          font-size: 30px;
-        }
-
-        image {
-          width: 16px;
-          height: 8px;
+          margin-right: 8px;
+          color: #999999;
         }
       }
+    }
 
+    &:last-child {
       .form-item__wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: 128px;
-        padding-right: 28px;
-        border-bottom: 1px solid #DDDDDD;
+        border-bottom: none;
+      }
+    }
 
-        input {
-          flex: 1;
-          height: 100%;
-          text-align: right;
-          color: #333;
-          padding-right: 10px;
-        }
+    .form-item__title {
+      display: flex;
+      align-items: center;
 
-        .form-item__right {
-          display: flex;
-          align-items: center;
-          font-size: 32px;
-
-          .select {
-            ._i {
-              padding-left: 100px;
-            }
-          }
-
-          span {
-            max-width: 400px;
-            margin-right: 8px;
-            color: #333333;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-
-          i {
-            margin-right: 8px;
-            color: #999999;
-          }
-        }
+      i {
+        font-size: 32px;
+        color: #FF4466;
       }
 
-      &:last-child {
-        .form-item__wrapper {
-          border-bottom: none;
-        }
+      span {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      h2 {
+        padding: 0 4px;
+        font-weight: 600;
+        font-size: 32px;
+        color: #333333;
+      }
+    }
+
+
+    &.form-item__imgs, &.form-item__textarea {
+      .form-item__wrapper {
+        display: block;
+        height: auto;
+        padding-bottom: 32px;
+      }
+
+      textarea {
+        width: 100%;
+        height: 90px;
       }
 
       .form-item__title {
-        display: flex;
-        align-items: center;
-
-        i {
-          font-size: 32px;
-          color: #FF4466;
-        }
-
-        span {
-          font-size: 28px;
-          color: #999999;
-        }
-
-        h2 {
-          padding: 0 4px;
-          font-weight: 600;
-          font-size: 32px;
-          color: #333333;
-        }
+        padding: 32px 0;
       }
 
-
-      &.form-item__imgs, &.form-item__textarea {
-        .form-item__wrapper {
-          display: block;
-          height: auto;
-          padding-bottom: 32px;
-        }
-
-        textarea {
-          width: 100%;
-          height: 90px;
-        }
-
-        .form-item__title {
-          padding: 32px 0;
-        }
-
-        .form-item__right {
-          padding-left: 18px;
-        }
+      .form-item__right {
+        padding-left: 18px;
       }
     }
   }
+}
 </style>