From 2d81852c6fa11077cb45f6e9863c9e9e2edca3eb Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Tue, 21 Dec 2021 15:41:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=BF=E6=B0=91=E9=80=9A=E8=AE=AF=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apps/AppMailList/AppMailList.vue          |  45 +++++
 src/apps/AppMailList/components/add.vue       | 182 ++++++++++++++++++
 .../AppMailList/components/img/del-icon.png   | Bin 0 -> 1493 bytes
 .../AppMailList/components/img/edit-icon.png  | Bin 0 -> 1566 bytes
 src/apps/AppMailList/components/img/empty.png | Bin 0 -> 8368 bytes
 src/apps/AppMailList/components/list.vue      | 159 +++++++++++++++
 src/apps/AppMailList/components/myAddList.vue | 160 +++++++++++++++
 7 files changed, 546 insertions(+)
 create mode 100644 src/apps/AppMailList/AppMailList.vue
 create mode 100644 src/apps/AppMailList/components/add.vue
 create mode 100644 src/apps/AppMailList/components/img/del-icon.png
 create mode 100644 src/apps/AppMailList/components/img/edit-icon.png
 create mode 100644 src/apps/AppMailList/components/img/empty.png
 create mode 100644 src/apps/AppMailList/components/list.vue
 create mode 100644 src/apps/AppMailList/components/myAddList.vue

diff --git a/src/apps/AppMailList/AppMailList.vue b/src/apps/AppMailList/AppMailList.vue
new file mode 100644
index 00000000..2df322bd
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/apps/AppMailList/components/add.vue b/src/apps/AppMailList/components/add.vue
new file mode 100644
index 00000000..fcc7272d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/apps/AppMailList/components/img/del-icon.png b/src/apps/AppMailList/components/img/del-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7362fa33ea2726ebf302cc2d7a876cf3fc2391a7
GIT binary patch
literal 1493
zcmV;`1uFW9P)<h;3K|Lk000e1NJLTq001}u001}$1^@s6sD?Wp00001b5ch_0Itp)
z=>Px)k4Z#9RA@upn|o{&RTRd5XBQ|Sv|DyTMdYCg1Yaa1V1jSZ7>$ULnkYdH8cF~a
zDMYji4Im%}im1@g1__afiPcy!7=oZ6l2{TVz6c~zKt!dx-3PChvU|<U?6$j0>F&-9
zrJ4KJW_Ip(&Nt`IdEGmL%|j{WCJ-5ka5qGUgA4<11nG^Uw=PaN4eB)T7pOzvK8Ruu
z-u(R{617t$u>(vg)s;Z#QD8Fg5Kv$eHw<hCHsSSb6_I9>I4#pG5mYB4Uh<-|a4{W)
z&#E#h^94UKDrj=AmI3(zv)HBxs*|cG-NL1yW&yp-3eR%h8IaXnC|D}}<y@9?%v(@3
zM8*?~egF*0RhY&5kKuB^EPe8~<bsp61(i~H1j6Nrwj5Q~^Kwxp<GmsZMFrl15)o<2
zc)#w?vKXrVY=7L%TZpNVS=@f*Z*j?fqFu*J-)l~05|)vms*eoC72Sqna3-)0{a-jr
z%>A(R%|G0p+;$1-<Rtb3sD2%)eAdF`6v}l^dn7MQP+yj=3qN)`%cYaoE!pj^%PrS7
z3F;0d7~b1y-nmQ`)!xa%f-!A5p0)}4Lu)|I$b{Ru{+G4l^US=|z-d?XIHzJYS1lBn
zeQH_=5!ZzDIGJKWBSQ)OaTS8NSz77yj&Z?rOLE4OO3)vA8`PV2NxM2YvP68Iw-T~j
z2<nM*_vq0M$Stol?=v*I2PYErR)Y1xMF{h4mF^G0%8gKWnS^7=4KU|9@Of+%i(;|#
zEnJ|1>IC(At|4^N){>|0Z&<Mr0$PdJ&hQq%+~+|fYuC_9tv;UqT0LnH^am#ZUz)-%
ztAIn=%Dw_)*kD*V-7N4E;w!945c~`%GKJK6308}*@F_8RC?Tz4Hrr+}^;|k&QW&qt
zD=HiwMRTmS0|a)wh_0^Dq5|RBs93pW>F;lby+2!q(E-McfLA72#}ZeGs6ay{N~T&y
zn_CVi{<93D0}SW~E9O|o5>+KC5Zs00Udw1p*TXOI+VjKL!B+^U&%)G2t<Y6v(7PvW
zsDW*Jjq8bP{vf>cj&bddp-}pwWt9+ii}DBSz=mplT{V2S&roV@DfEf^tf%L-D*EYi
z<9GFTsQ%XYow(Kzh8atZYY&WqY37`I+EY0yDiEqiDeFDWWTltC3WKgUWMxb6*gr7u
zJ!4MMgHWXPk1Y-nzbJpG5mcT<DA-vGm7g0h^NZoun{y-h`=7A5(wI{`5yp<TtP)6*
zeFP62f@L2WO3j`Ocix^G!JmGGRhx`CZ@d5_v@H#*LnCO{64gAY=1H|Nbs~(5TOivd
zx}z4V;wxZ92@JT_Dm&1ZXdrk5#SqJA=Nn;4nE~_6BQW9q+$>o0J#7BQn6qIa^yqF`
zC4@Tr!i1*Ilm&3U2_C->CTW{ZIXIb5w!&Atphq5TND3`hXzF3Yu0XFTGIu4MI0a)z
zL2=y8XS+lzt6}Fp`+~ftj}ho?O4T&LM6e%y8<aeon+3~1hT7lk3-UTaEmgBK*-ixe
z;Wt6qwA=_TTn7h_*cs#jE!noSTuKD{f!D#ivvVW(+A28yuYExtjB-iSLivN{3*KZW
zkO=mL`A`vW&Sm=!PG17Sh>bxWqu`AbG~cpFCV1d5EL#s<x<KW8h(@zZw%sl$UJMs6
z+8E?XYFXITbkZ73Gvf)fS@*uC6tqT^m66_b(yeG$+wkk%@Wl=|*O;4%J-fq`<KQvt
zmD?q4L!F@08^6Z8=-}49PSEL_FFHvlZ=WT+f^zZ(sBT54Z($o@!@-9TT9&GlkCCL1
zbm~E%R+0`r%GE;B$%pZhlS;=Pr%WN~<O8uOM4fu1IlT^Y?4k6w3O>EZ6N!xEV$x>?
vih+pqO8KlnsWS-2TRto3!XEPN|E%DDX3MzXd_H-&00000NkvXXu0mjf?H$LB

literal 0
HcmV?d00001

diff --git a/src/apps/AppMailList/components/img/edit-icon.png b/src/apps/AppMailList/components/img/edit-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..ff67d71d5c94d61ae2a0c15cdcf5a188f31d8a48
GIT binary patch
literal 1566
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
Qpa1{>07*qoM6N<$f=dM4P5=M^

literal 0
HcmV?d00001

diff --git a/src/apps/AppMailList/components/img/empty.png b/src/apps/AppMailList/components/img/empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..77bc8fe01fcd8ae72926018fb4790bf87e9d3ee0
GIT binary patch
literal 8368
zcmbVS^<Pu}{~bt5NQ0Dg$mjv1VN#>JL^?*NbTdSdl9bUgkZuV<1YwH6z#-kD45Uj$
z>a+Lb`yYIN*zQlS`#SgaI?r>@^So}dp}r=?edhZB0DuCjrDlw~rr~}CBt*D>nuk3C
zxC>sOu_gr2gl63V05||pHC5A4+x=pSP?Nc^*vSxdKV~Mwg~e$!%cW&7mNXMYz@V)i
zji{#Jah@>XTxs)}VD5EspS=mvn|*%X=3|u|>|N^PIqT&;m&L1sL4olg*(wl-C6`mG
zI8%#Wyq*}5Jk!#AThQUc>9e5ko}5c<(W$_LFm}bPy}%C<=n&f|to)ry8;2iyV|_5;
zgx<o2ng}3F*5>T$Ku+-yIje7Bkw5LxX>B87p$s6m`+fap@{!%Wd~yUDt)EowKFtfg
z&#oNZ7crW}TYlW`iTXlBp(_W{%wX@_!ea9Y6IA7$_MVhZhVZe_Ic#zIQ|K~-W@cv2
zZm$lTGkI!rj29)r;CW*sBk`P2^NBYL6>-qGt-r^cO3*9@hjLjgv5t<;QoA~ys}f&R
zTq<OGWo7?9QNkDrrw`-{aa|qJ*RNlR_)GL8)ur7zxTgs4@fNVB!uMi@NI9c&FkK4l
z22Z8wm&bKZn6>0V#l^*BQhM(R0YG@>&4yoSjr+5#<}xqc0%_Q4%w1G7a4dut;_8Ps
zuma{WcP*`Cr6o$A<{*fSUsU(^ub`OTXHx~-0}#k!<%x)h-i;SX^1rd39sj;i7nf7E
zv$uC$RaZCg0C1o4CzI2j8+%5L)KfCgEg?l_t^0`d^z<IU5k2574}AUTu9}u#|9X*i
zM$Z80{62?Nb$WU_TNwm8qXI0WWgp;wjD~y}2=8CLXzwp`y~WhT!OJ#^rnC7CqS*nr
zMN}1j=t*PkyOqsjF9|o~w8cXcbxikEM^~5K7*j+MRlFXC1A9%OH(hrV9rM{#u&QA4
z%)?$6CMPGCXQXY%3%56TOADy$w>_*ra~;f)o&kyRf%x@{-Vg(x;@R^96pW3HF;X-4
z!RFBydkcYtPJ4W2W-CRf*|-%OOQ9D^#~MGBG|KZYtkG3CGaidP?7whL{In5696Jd^
z5CN##tQ$E|^I_UM?b3z&OS!qZvgh}pHE2<JSn&Shb75qV5NA~;6^#fGs8Cv3>YJP@
zwbM%&8wfb+{=6AB6m%wv+HZ^BnvhvL!~dv+?qLB8MGwTxdvq=yOLG2HG&6huY2&Cy
zn1Kvk=<v675*r~_Jb<yud~T)M9*9NT1)vX~>>8Py2d}!e%i`H<3ebhyqf#IK(+c+X
z-oL0eD7{q)3+qV>6mdrcx33+>C^9~lf9BHdRTg&nD_@6B-CdLFJ{j3nzil(6E)+W2
zh$7sVl9IA8)@F%RvMZh2o#2Lhom@tGVvt8RnSl!`?NL{MuE5v<9ysh2JNZC6i^oVC
zo12rvDrx@no%d38BBb00n)RZo_xEEVKu~zUt(}NzaPL<?+{ov<v%dc5dV2Mp`noy@
zS=$Wuv@yl(zflZuNcp|L7bCA2H~W}RFC+g12`VuDw2_|rK0Et+ijJQC+}zakXCS&%
zKv?)D+>6&|weOO8PqsX;FZ9?^pG0=&^wM<;;!;yjo=*Y7!N2f8{PFVlKVGnEccrI-
zM6aJ--VVL}f<Q1oKz6*QGA=4DU9+&VN@m!3h^th)Ub+&p01*~gN!V5a<kbk~AfV?<
zh59R2cxIGR>7j>F^0q*Ioi!OiXX>!Fu8uhf%*u2qsZ{EFW!mVqe4+pXnWC5i$J$aS
z8gi)u2mnf2?{slE-j-3YNGp7my-WHvmS3O6BbbnokRdH2b7*4roDdLMKxGX7I9?>%
z9`o;PM+AN8i9{kxnRR+tWPF?@-O$6lO}T%$;M<~rkG08jI0}SVG*})RwbAEj$?Z{>
z$cOldWBZDX<;Vd^^78Ua)p~{REc0AYOrGsa`~3dPG%*BGQBnOO`JN$MZJQ%K4P~mx
zM!SLABo`N#i-`hBVoi8wQ&Us<!GTXxoyWXS*BE<7k|vPcr>Cc>p<$2Upvlmza|nR)
z!XxIa!j<3yqJVUfDfRLss*_OM!e&Uc68t&anU?WGKg#8)WdfL@EZ>M%dmv^h0BZqq
z#S~ncxaocLre`TBDQ`Qfs+>Q<UGbU!UQWhD-?X`meb@--QDPHaI64wL+}T->Q&0fn
zlqeAGMg`$<S~dcFs~o;IFr!1R`E->AykCh?_FnAhXjJ{Zz1>}G{Eq->TA5REK5QZr
z<abnTyg11eVQG|8Srmw@sllr1O|J@wh%^<(_KKv0TUjBhtNE}WKLVuL+Re<0ow}9=
zw*A0cDOL#^8x9g;Vr2u4pDZ)i;WZTkSbFtVffO2Zy2M2<>6QgAhgT!<yEP*n1S#qR
zJL#s6DW-#ig6L}Ndb5q|ICx0(ej=YTJNT1uHum@T;|k$S48RH$5m_zz-5yAZc=kS+
z-dI}*SGU$A8*VSRh7-~^)MBYx#8B}JuXx`Iq&T-PbXN!<W;}9PDL=OW$F{{XTGTd8
z#{&SN{JCE}y}fTt0HLM;Cjw1NRyYaZNOOu3Fz{GVFia%ZEv3VR2GO+^z2x1#FlD`M
zsK#oDM<mzoe?vw9$OR*2%5o?lr&Lt@GNMZqOp)+vwQLA}ulR-O(}B#$8Pn0qU#n~3
zLG2!5fUTC8&oWF{SlECTVov&s#yvfVj2rRT%nUg=IB0B@cQ>(nZeDYu;I!C~L?oOv
z<1tb~5u8ED(WG|$D%4L5MFeCZvurf?k^@Q?3JZ+2(XR<21sLb%)COM?I`<uN?Stuq
zWNuGPYKOPBwwO`#of=q+NDWy0V3{NnIRiZdLv-vE9UYxQ?$^_5a!{O#eQ&jU1Q-ib
zuW$g~;ir*1HQ433jCyoBPCIm3H_mrhQqiH_&=$V^)}SVLTLJ(>pCp7e*VjjUac$pN
z+<%%l?FlRCz^S6%r>(ZPZ{M<Er$BlU%lpB~F;*(=Zj&X4_#f@k9L4_u8D6DEzW|Og
zSmixoc%|NE3DhF^$5bi(Xa~S;eoIhTS5;0*fNximqvY0VSqE5`J+tHbKo;DNEHCFw
znsD94)mT4uX8fb5vu|vtTNCpBJt_(J3?DHjs)ssTQHCq9+bH~EZ4@j3+B@E`R3<+B
zytqsV7$|}965+=s$zq@D<cmbH5Yyvi(1RBWxjDj7k?{R0WzuE?a18vh=AwFN<LC}u
zBzxMLtmN77*J^*d?-VT$E@_#!1lV95JFQPq0cz9k(BVKF{h6P~I+cnKY8QxsA}$X4
zA!ai%HoZZD>}_R9y}iBig2=lBC$afo`7U8!);DoNJH=9?UmOm*Jo)9WNDKR_Lfa~V
zy^bF6<TB);u>iywzRai2BE^5LbtaFuKBC5z0*+HzS0>>Mg^xXu#UkOEPi3*8wi_l4
zuaNP^y?MrR+!)h+3$y1@CMMJEp0f=`{3k_fKU@_-MW=6(s!6lh(+&92OA+6_i*Mn|
zsp9dX1W)?Nc3;12%Sz+!{rBRG_Qlpp$l48;)83>k7M#&ZW<e)n)kfg<vyzjFWd40`
z?{~9$bC<K>^oAF%7Y8d5t@XmJ4top{{kCj~&@vJxDiUZ`h2Q!GK{#ksLfl90b<7iX
zB{G22Cf_)Q#OeVBR-rc%k9euiwpocsG?IdVOH?#tJ$4yM;MDMM1|<BB-wl#o`)K&7
zZ@-xV$>p0&(K2yqWp#D+`O2@R3>YrP^5oX^0WyH#Bp#AC5K1!Yp~GD!4l>|uo~x&g
zU$>_<wXrEuYvq?oCY|8<9WmGR?23fb;vrD)3-(lf;=c8pT0mNz?e<3!vQgQ)XV5HN
zoov!P0?-f!r!<K~LiTm4+(E-k@9zOTB+J`JGYe)WXd$0u=Y%QZ6Lw8-pn0NONz#_m
zu-0xNBuV~rhly09S8Q241yjxyi>r~R6GUiPcKb$RoAsZkmuJs~hA_JHuv90hES^T9
z*nElqyJa4VL{C8{VP&tDAT5>+V6Kzp49O-P3OQI#CRY8;=&uG$`+a)(#_-lOj*pHx
zESDa677Wd@MZ?j2Ph8EPGQ(d4vL~Wk+iPu`^GQpI%8x@8vde37O5&!NG!yk;#>UwB
z<dD7jxIiH?bztE{by&ZxM+aypo=8Y)wU=$vE4)p8gm71*^hIFw`wD?-B-Fgz3HbyD
z#xklpb%1zzc}bO-g(!&^hlLpE@Ls+d28kqU{pIxMx(_4ROKn}^fi7mHjO!Fg*BA2R
zr8%g*xr$U$oU|OAS4bnASYPKDtj6OMr)+uX@RE>c_0G6>8fTcfffSrSrPYmeVG^ph
zp3VI)G^2rHAcN)I5!xw{7N1UQ%|xQl8v3P5Y|p?_%;czZNevxZ-$AoB7rH5ud0wbB
zFO;U_N{07|`BTK4UCd2vwL5oNawo{PS*GbnD|GwdfSsOsQzB)4#G=+ZZ=ReJBrds9
zPp2+kK00i$HDh7t%>}oKYimtzTiR!|LVPP5+<IG6qiN@rNLz>s!GrRhuo`SlO-;RA
zr3EyY(zz@-D=M!{;>eXS<%fO_6I(~4EOj<dUG7F*Nz%Sy47K%O7`?X4i^8?*Ee>qt
zhrd2uOXnh8-)ai9r$|a)7>Cza2sAru`xfLC&g8jX{n;lb<z!Ul&dEqWa#rCE_eJ>^
zC8w_0i=tufe%XbjdM~D;f8|<GQbX#<C$g2&>^ne6WVe{|IS0zCC1Avjo2RwE*13$j
zB@pfVT&@_mW&MjHc^qZbxo%xcn&XP)$N~Y7<2VZZh0)DrMLnV@^{O<rlveQK@)WCS
z$qda>sucK|qnIU(+cF$`l<JU1bS}EEmZdb&J?IGKQ5sR){Gs!aa*&8|D+r&NlQu&v
zP_CE{lzjbzkJ)YMo%aMhGmJ<_(ovDZnt5RDkp(awGczOQsQJ^fY`75eas}-6_KcLC
z@BuXCVa;X7^v?AJ9PVuNv*8`+X_wDTx%gj@9B8OURY#H;<ml%MG#vh$=3h1mbH|t&
z;4|Z~0p3hi>GZS)yz^QJU}{zcK}@WznV<E@Fo3{mep}-O+hw+Wcpri?uG6cD;Y7lv
zq3p;rhMMVQnLm1?nKOABD%=SEq)+9(4%A<}7Q8C0nH$o;OAew?-t&u#-HGf$1Bvoc
zQ@y_HlQB&a&OmtN`xPZe8GLI*TU(p1qLOz2HFG6$qiD_8&`@kAue!dzo~GF@$E8O|
zRP;e}0jqv>rj@rl6*Ibr8sShnnbh@h$3<O7lD=$bcbCP%oyn;bXR(@jO&mt6-F<xr
zjI*ljw6lhfwP>JO!ScoE0bPyNoLJOU1ha^+aN5By4IN1*BKG6L6})nBYi7uon)~<f
z^U)*n^78mytUhRF@hHf8eQ|6hw`!d2lrHoh`n=*M1?ueV)a2$**fpKs4_?8LtO0~4
zOyf0v7K#T4+S;yGt(wm*FJF5@vu?qTE=S~$KBp+;(*8lwwt<hfijyB)v&cZwtV|Xs
zF(f+o05Xhpbh?lKYm(2CK5cln0U0^LsjYV>S2uScBm1DEY$(XeUD|hbIsWrF3+o2;
z)cpP*K?nE$WReP^WMygD?bLQAP?Es^&O|%^Y2z#!=j%8AlvP2@pO~1K&@wWM+b89@
zZjJ8^4AggZ$;@JGXkb}fJo*)0NkqOa#V)Xt7m-SjR;9`w<Zyz1{R$=34#sUOF$+cI
zv<%LL9E=~>WR$#bNWw8y$9ZkTj~u69>OnoNVTk)vMT!y9!D{nxKH32$g@X6h)kMM+
ztL;_FLpwpgr$}@pXUeEAXF>bbKYsjx11Z*8pKx8)kU1P9rVFM5B_!I1Fn;Kr!31L7
z{IQW2FJ3tJ?eH*>YZFtlhKdHvWhwFEYRWbGu_}&F4Lqp%w8X?jUmjzJzS}uM)e0##
z!^s>`tCL@^3x`_wZCkd&6n<C|p8Kx(M&j{@O0x5@F)O%748{|Z<EetFXi!WeVqmb=
zh}-q;!TZAxNO$X?5{?pN?c29sy0eU<K59OSqC0mt%;SNQK1n!EI3M`O%fIOKb>?Ed
z+YEH{!mcMGX(*yJGT3gXz4_gNuY3z<xQAt37`spusw{cA9)8v2uBl0E>obT;1J2~X
zQ>Wq@z}-XqEPE<Z)k|+CcJ^ut3JP$Z5%ZD)?k#c1TbwdQ1@XaIV*M`|`(G5Z%6Cb0
z>juK2(jrN}e{a`jJc+RDP5{&{tYI2gp582`zpJKjTJ0(j$;9BN0jips(i!OK#S14;
z|Ni}B!k3`dB9H*6eA*C$w3|(LY_sQD>fjhQcw>R`9xOU#S@yXoOg888UEC%o+95@c
zmM%2)xb<s=L{E}M(+_#a+)ek!JR8`Z?=pC_{Jr$;xakjG3X0XKMGR($l`@G^)7Q6|
zQtNT%x}xre-<#SxZ5OK-DjbHDxHTkm!4cjN3WauD{0x$-fg@F6sY(=_&XB3?S=YnU
z407U`X2MTrE6>~*!Y<Cu^Qg2(y*?+$JE_Jz0$dt8{#-Z$T&kWkItb7UpmYjBpzT7N
zzzHdRTytUZ7j+Iz)uXh|FchfzOq(}MLV8P~s%n2E`2j!fBcI;%(S6l#5zOLTsd=um
z4X}*JzBb#oyUjoL+#rBo|I$9H@;5DIk;U|C7d9#h5NWol_HQyTw~Bv{E0qTFu*pG#
zxRB~S>td9}!fI|{p0Ip=%Mq!DE;Dl^<)3i<5(QbkX%KIT0nO4f3DeQxYtImv7}Kz@
zppm_)+01}W7Cg_jzuNs<HdC>FP4syGk^2<JMjJN#jhBSrgWoJ$*B$CbkP5eR$<q1q
z@<&bj8L9n&(@Oy$wcpmyVlTU$+W`q73Pr24WT_ZQRR)^$5*iS--}?7jlaYJ(?h!hv
z#w(@75@keDl_t7~TQdcfNa<CcpP%0~x?3Mx=DGgaqs~Y3+8n8I|7a(qLxr>wq6GMr
zl^?nN5T!{Q(|6K<TXe4+bkR&a@#<5)WFJ6iJ2$sT{FCP$-rbHm${6cX)Q;7y9G94W
zzW;1xRLQ9!Nbm_ad^2|-6iIIT&b@;NCJWDqFMD~2&#E`w5_S*H!%&6e*`1-;^WIPm
z1)XdW*bytsa$p)6=2-Frnbr?BRhkGj(k*dnm>4?}#0z5&jgKK0sMV}|(NZ>&9D7>)
znZY|;M7Lv(bYu5^(^ceR69)*ABMmcz1qKF|toVEu<~N6b+OAv=@d}`#bbvZ?4j%rv
z`x|z++P`LDW;Src@Wj^E_Kbm{LCdQIgGT|u%+J4_q!@XBDEP-0m5`ZwRj!dhG&w5%
z50ry32vsQQ%I?Is3r)2Xw)(Ov02(;=l)l~Ow3P2YObk)so)mg@cx&4>`G!u1n?2xc
z+o%tAri~86!;j7536N@C<=F^{WK>F{rm5^4oW!|>D@HT3n&hp~Ujc+V+S(OL6ssSy
zC}Bs}Z|)IOs+Ch84S&cW%6VyFXh_u+rY!@yP(n4oGi<W}5A=5S0MNV2w~v=u8)C{|
z(B9?+oGTjWlfvK$k!RcAgj}pj9^$EWacJl`5)A(h32LI2i1dZQLUqk%;#+}wxHRHx
zIQ3Ln*)gJ`75J^gefq56Vm`L;PpVQ{wflc@kKQ6?`ARQZN*zYtUrho!RJ@rxk{|3B
zy(Xgy_}=#S;7;F4)}NrNGb|-{4TFi7>Lmco!!k+i34j%&DV7M|w{-~LSdD>0=vm1W
zrs^K^nF|7ObX`T}px}4Zpu9<zvGkeopfRN@|0@Z_SGUw>*yGS6<GHG#m5if$L6!vt
z2a^$jg}Z6ZjXK<<3WV??GlsPrE#n7F{6-q(gKk}&og3h>iK4*1KbBn_ueUtl=i)<L
z4bvZ@u5PW(%x-=JdsWzo%)QhZk|3l|dQkpRq$6~L!5;5xB6Y&>r&^O5N8*bnA>3m!
zBbM&=&KzAkXT%jYbQ~FN=}5#d-M58)yuORDhYAKtu6Dg!E5m^Wq2sAf60C6XYtY&G
z`3g$*vk61xL{5tYK8@2fJjN3S`>PFRMYD`y#tUdyHnKu%og5u69^O#G@i$Zq`R=1E
zA7mtIWL5oQ&%hQtODaSRVwFhM!u2pk1j8xM?BNpbo+g_a=Db2O--5F7^@fdGxHZ!w
znSE1U5x=5l#hbjnxtgo3`wapQ;cRV?O7`2ftmLFXeSU)y)^B_M==`gj+n?oD-CGWj
z^`wsvUrT8Uah5$W-w+>#A6-sN7;N%=N=>AmBB!J@7f1=<S||=l{&{k=@k!^H^%>+P
z@S63T*GPPO%-yZBsTqBtlw!9{)AmHb>qDNxa#edj`v;#RQ<FG02={PJLj=t?i#~8W
zW5W$K-U$^akJ`}J&n}KP%7BUo>VfEirRD3hxvbn`Ejc!3bXc?i-B27yk#!6%Q0RNp
z&Pk0oIxHKsO(n8-!wvW%BMlvz6SqV}eA@5}dMTx>976!wo*pk|QGCQv&`?!G)W|Uu
z=cL%m{rLwM#Re<Os`A0bRd$l=2EvXOzm&JA53|^@F?)GB=ODUstL322F8A}4_GF2d
zPLNSTBbHK6fUa)j^xw!G82gBlf<pM~<m4gr;$C9k?Ck8dz1UwD^rcs2;@~6^>;Nad
ze9|X&k72{6@l3oLOsSbn513!x)9P>^dO-aun+DX*&=hu$#AY&XZFaWXU&m~QF$K_Y
zMT!^oFu5*^UNilgXU9F|_&4jnt1DlJRPT)b@2r55Oqa{uO;W92ck;n|nYcG4BMGO>
z!$N_3pnBYVa|BLbCMPr4J>YB8?(Qu=(o9J3$&W=IE3h3Rs-GFz+NNVk`KWzzTt&}{
z_~B1><3w0E<<C8Lw<ey3&>{&8=CZ)p3>g{an=UAcfdJ{*+1Yh7547~NKM^+=Foo-*
z{sc!yDEmRU_}Ob)TaOtaU-AWz64)Y6P<OoJ-R+G`(kBOX@DL#(A$QpzlG@Dd+w=@7
zO6*V8@M{ln8UNNBI3YED>a8YMo>M#r+hZZ2rvL!sY=ka2GJV2YD?x>Xg;Lf1Y6Gi8
z$AyD*A%^^!1V3s=5baVvx*e@1ePzIb7Ze=)?n|4(Q*y(HgM$P2RG#7o7^mX|7W@cs
zn@$x^TRN}Sic>lpM#`i{0oFl5AdnT0!hHMs@>DZ*s3Im#g@fd;h|=eKPVu>H5u6bc
zYs${4jX3uzc=-y)KSfCF_y$6{eSf`rQ{$I~S>qKyfU99VJBjj!XJ3b>tiL~s0HpDX
zd#vpdK)*^?EgqkeP0kdgpm3cLTF7dRK%r2`azm}Pqm1&hG8J4J$JT03$oV;02Ty0*
zkzeuI<5{kP4nS<k<1Q2Jr(kR&U<w~F(FPniIK4#kzfCu)oUm>QmIPR_{j@gHoUVR#
zjlMj66q-r(7w?auEdLtJ=XO-N=AW)pI5>E3{(=|!?=fZE=6YTW&VtJT8OG9fA}zVv
z@Z(~EV<&Tf^(Gt~^$kDEBtA!Xk$6{7!Ki64&>kfi2i9W{c@kMl6|b^Rb^+^zf7+P!
z124a`AB?Y}B-d8cY-enWO7XkZY}8}%uMqN)l<{57SAq(ze32F8fUn`Yg`gp_h0kO6
z)*Cv2V+InagKU=`!@OUruSQNPrgtKl0O(YH4wJj)=H@#aPtRSGo12^I)I8MTg<T)W
zCr7smU!Q=+#&hX~Vc84^yd&iTcM^8N&A@B&m}vzAv^jMe+SvNfL8i-?nl}{+Lw~xU
zR964=BX!1nZj7zNKXDUX;JUpN)Yn`gU)@!xPV=p8<nf4SL_|bPwL2pEdz7l`U{70{
zM3l(mZ({7=9L(*@T-dLoT|cd??-g|(ySRj1u8!iV22GS}_2veVtXI$yLV8(owS5cy
zOy(wT68$%cqIutDDY7CWI>s&PtGtw^ipkTb@14$n&&=OUAPk>96VA=gUz?O|4wfsv
zq^GB6Y_4JD@5;fn&j*zuRqD&#t%aQS1f+R&@_;>JDCI=R&8xff2;M~L(TGoncU-T%
z3@${XW2w4##z%YCba-w<{WVlhF*>5&12=z`{G$bSheV@~$%wJnLbwR@M#n1eRoX+f
zvA6ElGWeVggx2>_Z*HS-r<VB*1$tdvHCIhx(AKYWLJaOvV;f!Ux@xze$saDJi4V|4
zwK`)DcxEy47R|QBZ6T#vs#$5YBm~ug=)2g!^n_?{BC+u7T-gx}-tiSZ=3CrV?|EGR
zC}p<vnBoGVWNE%E#hWQ-{VrLd1vsBuy>uX<Wcg^3PoQ}lsUF(g`!}I{#2>Hn8IK8E
z=L|k!qu>M8?n?9X;&dbOA>hL#(<c+T5?mNyM-a=wFbn77uUF`V6w5vTEdu#++Wn0A
z0q7&t0h$%P<p(~SiNg)vk--`VqJ?oMda%lzJT5UJST_%JZejmVh%PLkY0*Sz>Ui_>
z;d;>=i6sH}^+joqP16-Fw3_xuBYoW6FQt)ZEE<;Nb5iUAK%fmS7z>;!v5re;l|9kZ
z-f==jD2}*6vsQtRANLNz`J~veHou=FQTD3}_OEVFGF>C^P;VyTeAqh0OZ@%S{-v#e
zo^b!T7$Atq&quNxYWrC>UxJEc94EjDmi+VcrqHajSllw0MV%1J1@FBH__Mdbu3al^
zdrEh?RHF;an)BDMZm6%nVn&|HceC*5)0&ys+D6xq>gk(Dc_ezkVBO}^9q-M|o{<9d
zlRmW)hHNOEj!SlSyDs9u-E0N@UR+%CfP6`vskeCbiSX<MG4(U3v&I}ui}-#PVpT0&
z-UF;x?1cFKcYp@?xaB_FMBE;xt=BAD9KMN4V_5#y8+m!6>ZGa%3+P>xG{KD<-<GOD
z{&$;m*J?jLP{B7(eI2Rt(VgEDx*NE3t#Ym?&jXS@JyTdPgbO7#nq`G&;CwapGLnh7
zZBMlgw64Q}xA1knkIPvf_HT8V(jtn4qUaoO9|qX|_bouv>Np)5&L<f@;a<xJl6}@+
qAXr4I=X!>iHvSJp`2Q2c`5m5{E9H|z%@IP}OaQ35zFHH+KK_4yZtVB~

literal 0
HcmV?d00001

diff --git a/src/apps/AppMailList/components/list.vue b/src/apps/AppMailList/components/list.vue
new file mode 100644
index 00000000..430848f7
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/apps/AppMailList/components/myAddList.vue b/src/apps/AppMailList/components/myAddList.vue
new file mode 100644
index 00000000..65c1eac5
--- /dev/null
+++ b/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>
\ No newline at end of file