便民通讯录

src/apps/AppMailList/AppMailList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="AppMailList">
+    <component
+      :is="component"
+      @change="onChange"
+      :params="params">
+    </component>
+  </div>
+</template>
+
+<script>
+import Add from './components/add'
+import List from './components/list'
+import MyAddList from './components/myAddList'
+
+export default {
+  name: 'AppMailList',
+  appName: '便民通讯录',
+
+  data() {
+    return {
+      component: 'List',
+      params: {}
+    }
+  },
+
+  components: { Add, List , MyAddList},
+
+  methods: {
+    onChange(e) {
+      this.params = e.params
+      this.component = e.type
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body{
+  height: 100%;
+}
+.AppMailList{
+  height: 100%;
+}
+</style>

src/apps/AppMailList/components/add.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="add">
+    <div class="pad-l32">
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>名称</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.name" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>类型</span>
+        <div class="value">
+          <u-input type="text" placeholder="请输入" v-model="userInfo.type" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>电话</span>
+        <div class="value">
+          <u-input type="number" placeholder="请输入" v-model="userInfo.phone" input-align="right" placeholder-style="color:#999;font-size:16px;" height="48"  :maxlength="7" />
+        </div>
+      </div>
+      <div class="item border">
+        <span class="label"><span class="tips">*</span>是否公开</span>
+        <div class="value" @click="showSelect=true">
+          <span :class="userInfo.isPublic === '' ? 'color-999' : ''">{{$dict.getLabel('yesOrNo', userInfo.isPublic) || '请选择'}}</span>
+          <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+        </div>
+      </div>
+      <div class="item">
+        <span class="label"><span class="tips">*</span>地区</span>
+        <div class="value">
+          <AiAreaPicker :areaId="user.areaId" v-model="userInfo.areaId" @select="areaSelect">
+            <span class="label" v-if="userInfo.areaName">{{ userInfo.areaName }}</span>
+            <span v-else class="color-999">请选择</span>
+            <u-icon name="arrow-right" color="#cccccc" size="14"></u-icon>
+          </AiAreaPicker>
+        </div>
+      </div>
+    </div>
+
+    
+    <div class="footer" @click="submit">
+      <div class="btn">保存</div>
+    </div>
+
+    <u-select v-model="showSelect" :list="$dict.getDict('yesOrNo')"  label-name="dictName" value-name="dictValue" @confirm="confirmSelect"></u-select>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  props: ['params'],
+  data() {
+    return {
+      id: '',
+      userInfo: {
+        id: '',
+        name: '',
+        phone: '',
+        type: '',
+        isPublic: '',
+        areaId: '',
+        areaName: ''
+      },
+      showSelect: false,
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {    
+    this.$dict.load('yesOrNo').then(() => {
+      if(this.params.id) {
+        this.userInfo.id = this.params.id
+        this.getDetail()
+      }
+    })
+  },
+
+  methods: {
+    areaSelect(e) {
+      this.userInfo.areaId = e.id
+      this.userInfo.areaName = e.name
+    },
+    confirmSelect(e) {
+      this.userInfo.isPublic = e[0].value
+    },
+    getDetail() {
+      this.$http.post(`/app/appconvenientaddressbook/queryDetailById?id=${this.userInfo.id}`).then(res => {
+        if (res.code == 0) {
+          this.userInfo = res.data
+        }
+      })
+    },
+    submit() {
+      if(!this.userInfo.name) {
+        return this.$u.toast('请输入名称')
+      }
+      if(!this.userInfo.type) {
+        return this.$u.toast('请输入类型')
+      }
+      if(!this.userInfo.phone) {
+        return this.$u.toast('请输入电话')
+      }
+      if(this.userInfo.isPublic === '') {
+        return this.$u.toast('请选择是否公开')
+      }
+      if(!this.userInfo.areaId) {
+        return this.$u.toast('请选择地区')
+      }
+      this.$http.post(`/app/appconvenientaddressbook/addOrUpdate`, this.userInfo).then(res => {
+        if (res.code == 0) {
+          this.$u.toast('提交成功')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add {
+  padding-bottom: 112px;
+  .border{
+    border-bottom: 1px solid #ddd;
+  }
+  .item{
+    width: 100%;
+    padding: 40px 32px 40px 0;
+    background: #FFFFFF;
+    display: flex;
+    justify-content: space-between;
+    font-size: 34px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #666;
+    line-height: 48px;
+    box-sizing: border-box;
+    .color-999{
+      color: #999;
+    }
+    .value{
+      color: #333;
+      .u-icon{
+        margin-left: 16px;
+      }
+    }
+    .tips{
+      display: inline-block;
+      width: 16px;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #FF4466;
+      line-height: 44px;
+      margin-right: 4px;
+    }
+  }
+  .footer{
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+  .btn{
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    text-align: center;
+    background: #3975C6;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+  }
+  .pad-l32{
+    padding-left: 32px;
+    background-color: #fff;
+  }
+}
+</style>

src/apps/AppMailList/components/list.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="list">
+    <div class="list-content">
+      <div class="item" :id="'id'+item.label"  v-for="(item, index) in list" :key="index">
+        <div class="title">{{item.label}}</div>
+        <div class="phone-list">
+          <div class="item-info" v-for="(e, indexs) in item.dataList" :key="indexs">
+            <p>{{e.name}}</p>
+            <div class="phone">
+              <span>{{e.type}}</span>{{e.phone}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="id-list">
+      <a class="item" :href="'#id'+item.label" v-for="(item, index) in list" :key="index">{{item.label}}</a>
+    </div>
+    <div class="footer-btn" @click="toAddList">我添加的</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          var list = []
+          var data = []
+          res.data.records.map((item) => {
+            if(list.indexOf(item.nameInitials)) {
+              list.push(item.nameInitials)
+            }
+          })
+          list.map((item) => {
+            var obj = {
+              label: item,
+              dataList: []
+            }
+            data.push(obj)
+          })
+          data.map((item, index) => {
+            res.data.records.map((items) => {
+              if(item.label == items.nameInitials) {
+                data[index].dataList.push(items)
+              }
+            })
+          })
+          this.list = data
+        }
+      })
+    },
+    toAddList() {
+      this.$emit('change', {
+        type: 'MyAddList',
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    .title{
+      padding-left: 48px;
+      line-height: 64px;
+      font-size: 26px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #999;
+    }
+    .phone-list{
+      background-color: #fff;
+      width: 100%;
+      .item-info{
+        width: 100%;
+        padding: 32px 48px;
+        box-sizing: border-box;
+        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
+        p{
+          font-size: 32px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          line-height: 44px;
+          word-break: break-all;
+          margin-bottom: 8px;
+        }
+        .phone{
+          font-size: 26px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          color: #333;
+          line-height: 36px;
+          span{
+            display: inline-block;
+            margin-right: 16px;
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+  .id-list{
+    width: 50px;
+    text-align: center;
+    position: fixed;
+    top: 160px;
+    right: 32px;
+    z-index: 99;
+    .item{
+      display: block;
+      font-size: 24px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #CCC;
+      line-height: 40px;
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+  a {
+    text-decoration: none;
+  }
+}
+</style>

src/apps/AppMailList/components/myAddList.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="myAddList">
+    <div class="list-content" v-if="list.length">
+      <div class="item-info" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <p>{{item.name}}</p>
+          <div class="phone">
+            <span>{{item.type}}</span>{{item.phone}}
+          </div>
+        </div>
+        <div class="right">
+          <img src="./img/edit-icon.png" alt="" @click="edit(item)">
+          <img src="./img/del-icon.png" alt="" @click="del(item)">
+        </div>
+      </div>
+    </div>
+    <div class="empty" v-else>
+      <img src="./img/empty.png" alt="">
+      <p>您还未添加便民通讯录<br/>点击<span>新增按钮</span>试试吧</p>
+    </div>
+    <div class="footer-btn" @click="edit('')">新增</div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: { ...mapState(['user']) },
+  mounted() {
+    this.getList()
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appconvenientaddressbook/list`, null, {
+        params: {
+          areaId: this.user.areaId,
+          createUserId: this.user.id
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.list = res.data.records
+        }
+      })
+    },
+    edit(id) {
+      this.$emit('change', {
+        type: 'Add',
+        params: {
+          id: id,
+        }
+      })
+    },
+    del(item) {
+      this.$confirm("是否确认删除该发布信息？").then(() => {
+        this.$http.post("/app/appconvenientaddressbook/delete", null, {
+          params: {ids: item.id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$u.toast("删除成功!")
+            this.getList()
+          }
+        })
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.myAddList {
+  height: 100%;
+  background-color: #F3F6F9;
+  .list-content{
+    padding-bottom: 112px;
+    .item-info{
+      width: 100%;
+      padding: 32px 48px;
+      box-sizing: border-box;
+      background-color: #fff;
+      margin-bottom: 4px;
+      p{
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333;
+        line-height: 44px;
+        word-break: break-all;
+        margin-bottom: 8px;
+      }
+      .phone{
+        font-size: 26px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #333;
+        line-height: 36px;
+        span{
+          display: inline-block;
+          margin-right: 16px;
+          color: #999;
+        }
+      }
+      .left{
+        display: inline-block;
+        width: calc(100% - 176px);
+      }
+      .right{
+        display: inline-block;
+        width: 176px;
+        img{
+          width: 56px;
+          height: 56px;
+          margin-left: 32px;
+          vertical-align: super;
+        }
+      }
+    }
+  }
+  .empty{
+    height: 100%;
+    background-color: #fff;
+    img{
+      width: 282px;
+      height: 306px;
+      margin: 168px 0 0 234px;
+    }
+    p{
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 44px;
+      span{
+        color: #467DFE;
+      }
+    }
+  }
+  .footer-btn{
+    width: 100%;
+    text-align: center;
+    height: 112px;
+    line-height: 112px;
+    background: #3975C6;
+    box-shadow: 0px 1px 0px 0px #EEEEEE;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    font-size: 32px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFF;
+    z-index: 999;
+  }
+}
+</style>