From b8379ed118d0cbf7def4a8a5b6e39b30164e0491 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Fri, 1 Jul 2022 17:52:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E6=A0=BC=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../xicheng/AppMerchanGird/AddMerchan.vue     | 187 +++++++++---------
 ...{AppMerchanGrid.vue => AppMerchanGird.vue} |  17 +-
 .../xicheng/AppMerchanGird/merchanList.vue    | 117 ++++++-----
 3 files changed, 169 insertions(+), 152 deletions(-)
 rename src/project/xicheng/AppMerchanGird/{AppMerchanGrid.vue => AppMerchanGird.vue} (92%)

diff --git a/src/project/xicheng/AppMerchanGird/AddMerchan.vue b/src/project/xicheng/AppMerchanGird/AddMerchan.vue
index 8207bc80..cd90a105 100644
--- a/src/project/xicheng/AppMerchanGird/AddMerchan.vue
+++ b/src/project/xicheng/AppMerchanGird/AddMerchan.vue
@@ -1,16 +1,8 @@
 <template>
   <div class="AddMerchan">
-    <div class="search">
-      <div class="left">
-        <AiAreaPicker v-model="areaId" :areaId="user.areaId" @select="areaSelect" :name.sync="areaName" style="color: #666">
-          <u-icon name="map-fill" color="#3192F4" size="20px" style="vertical-align: text-bottom"></u-icon>
-          <span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
-          <span v-else>请选择</span>
-          <u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
-        </AiAreaPicker>
-      </div>
-      <u-search v-model="value" placeholder:clearabled="true" placeholder="请输入姓名/身份证/手机号" :show-action="false" bg-color="#F5F5F5" search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="value='',getListInit"></u-search>
-    </div>
+    <AiTopFixed>
+      <u-search placeholder="请输入店名、店主、电话" :show-action="false" v-model="keyword" @search="current=1,getList()"/>
+    </AiTopFixed>
     <div class="userList" v-if="list.length">
       <ul v-for="(item,index) in list" :key="index">
         <li class="main">
@@ -20,7 +12,7 @@
               <img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
             </div>
             <div class="userInfo">
-              <div>
+              <!-- <div>
                <img :src="item.photo" alt="" class="userImg"  v-if="item.photo">
                <img src="./components/img/user-img.png" alt="" class="userImg" v-else>
               </div>
@@ -31,6 +23,18 @@
                  </div>
                 <div class="idCard">{{item.idNumber && item.idNumber.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`)}}</div>
                 <div class="address">{{item.currentAreaName || '' }}{{ item.currentAddress || '' }}</div>
+              </div> -->
+              <div class="item-title">
+                <img src="./components/img/xz.png" alt="">
+                <p>采苓岩茶烟酒专营店</p>
+              </div>
+              <div class="info">
+                <img src="./components/img/xz.png" alt="">
+                <div>林轶峰 18600882921</div>
+              </div>
+              <div class="info">
+                <img src="./components/img/xz.png" alt="">
+                <div>陕西省西安市新城区中山门街道168号陕西省西安市新城区中山门街道168号</div>
               </div>
             </div>
           </div>
@@ -39,9 +43,10 @@
     </div>
     <AiEmpty description="暂无数据" class="emptyWrap" v-if="!list.length"></AiEmpty>
     <div style="height:70px;"></div>
-    <div class="btn">
+    <!-- <div class="btn">
       <div class="handleCheck" @click="confirm">确定选择</div>
-    </div>
+    </div> -->
+    <div class="footer" @click="confirm">确定选择</div>
   </div>
 </template>
 
@@ -123,7 +128,7 @@ export default {
     this.girdId = option.girdId
   },
   onShow() {
-    document.title = '新增责任家庭'
+    document.title = '责任商户'
     this.getList()
   },
   onReachBottom() {
@@ -135,100 +140,92 @@ export default {
 
 <style lang="scss" scoped>
 .AddMerchan {
-    .search{
-    width: 100%;
-    height: 112px;
-    padding: 32px;
-    box-sizing: border-box;
-    background: #FFF;
-    display: flex;
-    margin-bottom: 8px;
-    .left{
-      width: calc(100% - 450px);
-    }
-  }
   .userList {
     width: 100%;
-    background-color: #FFFFFF ;
-     ul {
-       padding-left: 0px;
-      li {
-        list-style-type: none;
-      .user {
-        display: flex;
-        justify-content: flex-start;
-        padding-top: 24px;
-        padding-left: 32px;
-        height: 100%;
-        .checkbox{
-          margin-top: 20px;
-          margin-right: 32px;
-          width: 48px;
-          height: 48px;
-        }
-        .userInfo {
+    margin-top: 24px;
+      ul {
+        padding: 0 32px 0 0;
+        li {
+          list-style-type: none;
+        .user {
           display: flex;
           justify-content: flex-start;
-          border-bottom: 1px solid #E4E5E6;
-          padding-right: 48px;
-          width: calc(100% - 100px);
-          .userImg {
-          margin-right: 32px;
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
+          padding-top: 24px;
+          padding-left: 32px;
+          height: 100%;
+          .checkbox{
+            margin-top: 20px;
+            margin-right: 32px;
+            width: 48px;
+            height: 48px;
           }
-          .info {
-          width: calc(100% - 120px);
-          padding-bottom: 32px;
-          .name {
-            display: flex;
-            justify-content: space-between;
-            font-size: 32px;
-            margin-bottom: 8px;
-            .user-name {
-              font-weight: 800;
+          .userInfo {
+            width: 100%;
+            background: #FFF;
+            border-radius: 16px;
+            padding: 32px 24px 32px 32px;
+            box-sizing: border-box;
+            margin-bottom: 30px;
+            .item-title{
+              margin-bottom: 32px;
+              img{
+                width: 72px;
+                height: 72px;
+                margin-right: 16px;
+                vertical-align: middle;
+              }
+              p{
+                display: inline-block;
+                width: 400px;
+                font-size: 32px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #000;
+                line-height: 32px;
+              }
+              span{
+                display: inline-block;
+                width: calc(100% - 488px);
+                text-align: right;
+                font-size: 24px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                color: #999;
+                line-height: 24px;
+              }
             }
-            .user-tel {
-              font-size: 26px;
-              color: #999999 ;
+            .info{
+              img{
+                width: 28px;
+                height: 28px;
+                margin-right: 16px;
+              }
+              div{
+                display: inline-block;
+                width: calc(100% - 44px);
+                word-break: break-all;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                color: #333;
+                line-height: 40px;
+                vertical-align: text-top;
+              }
             }
-         }
-         .idCard {
-           margin-bottom: 16px;
-           font-size: 26px;
-           color: #999999;
-         }
-         .address {
-           max-width: 100%;
-           word-break:break-all;
-           font-size: 26px;
-           color: #999999;
-         }
+          }
         }
-        }
-      }
       }
     }
   }
-  .btn {
+  .footer {
     position: fixed;
+    left: 0px;
     bottom: 0px;
-    right: 0px;
     width: 100%;
-    height: 120px;
-    background-color: #F3F6F9;
-    .handleCheck {
-      position: fixed;
-      bottom: 18px;
-      right: 34px;
-      width: 192px;
-      height: 80px;
-      line-height: 80px;
-      text-align: center;
-      background-color: #1365DD;
-      color: #FFFFFF;
-    }
+    height: 112px;
+    background-color: #1365DD;
+    line-height: 112px;
+    text-align: center;
+    font-size: 36px;
+    color: #FFFFFF;
   }
 }
 </style>
diff --git a/src/project/xicheng/AppMerchanGird/AppMerchanGrid.vue b/src/project/xicheng/AppMerchanGird/AppMerchanGird.vue
similarity index 92%
rename from src/project/xicheng/AppMerchanGird/AppMerchanGrid.vue
rename to src/project/xicheng/AppMerchanGird/AppMerchanGird.vue
index efd62e54..05e180be 100644
--- a/src/project/xicheng/AppMerchanGird/AppMerchanGrid.vue
+++ b/src/project/xicheng/AppMerchanGird/AppMerchanGird.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="AppMerchanGrid">
+  <div class="AppMerchanGird">
     <template v-if="isGridMember">
       <div class="pad-t32" />
       <div class="select-gird" flex>
@@ -19,8 +19,10 @@
           <img src="./components/img/big-user.png" alt="" v-else>
         </div>
         <div class="right">
-          <div class="name">{{ item.name }}</div>
-          <div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
+          <div class="name">{{ item.name }}
+            <div class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</div>
+            <span class="family-btn" @click.stop="linkTo(`./merchanList?id=${item.id}&girdId=${userGird.id}`)">责任商户 ></span>
+          </div>
           <p>{{ item.girdName }}</p>
         </div>
       </div>
@@ -33,7 +35,7 @@
         <div class="right">
           <div class="name">{{ item.name }}
             <span class="gird">{{ item.checkType == 2 ? '网格长' : '网格员' }}</span>
-            <span class="family-btn" @click.stop="linkTo(`./FamilyList?id=${item.id}&girdId=${userGird.id}`)" v-if="item.checkType == 1">责任家庭 ></span>
+            <span class="family-btn" @click.stop="linkTo(`./merchanList?id=${item.id}&girdId=${userGird.id}`)">责任商户 ></span>
           </div>
           <p>{{ item.girdName }} </p>
         </div>
@@ -53,6 +55,8 @@
 <script>
 import {mapState} from 'vuex'
 export default {
+  name: 'AppMerchanGird',
+  appName: '网格构成',
   data() {
     return {
       dataInfo: {},
@@ -72,8 +76,7 @@ export default {
     this.handleSelectGird(this.user.gridInfo)
   },
   onShow() {
-    document.title = '网格管理'
-
+    document.title = '网格构成'
   },
   mounted() {
     this.getGirdUserList()
@@ -107,7 +110,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AppMerchanGrid {
+.AppMerchanGird {
   background-color: #f5f5f5;
 
   .title {
diff --git a/src/project/xicheng/AppMerchanGird/merchanList.vue b/src/project/xicheng/AppMerchanGird/merchanList.vue
index 7ab1bf0f..09c24f9e 100644
--- a/src/project/xicheng/AppMerchanGird/merchanList.vue
+++ b/src/project/xicheng/AppMerchanGird/merchanList.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="merchanList">
+    <AiTopFixed>
+      <u-search placeholder="请输入店名、店主、电话" :show-action="false" v-model="keyword" @search="current=1,getList()"/>
+    </AiTopFixed>
     <div class="title">
-      <div>户主列表({{ total }})</div>
+      <div>商户列表({{ total }})</div>
       <div v-if="list.length">
         <span style="font-size: 14px; color: #2979ff;" @click="changeType" v-if="edit">修改</span>
         <span style="font-size: 14px; color: #2979ff;" @click="edit = true" v-else>取消</span>
@@ -15,8 +18,8 @@
               <img src="./components/img/xz.png" alt="" class="checkbox" v-if="!item.checked" @click="userClick(index)">
               <img src="./components/img/xzh.png" alt="" class="checkbox" v-else @click="userClick(index)">
             </div>
-            <div class="info">
-              <div>
+            <div class="item-info">
+              <!-- <div>
                 <img :src="item.photo" class="userImg" v-if="item.photo">
                 <img src="./components/img/user-img.png" alt="" class="userImg" v-else>
               </div>
@@ -27,6 +30,18 @@
                 </div>
                 <div class="idCard">{{ item.idNumber && item.idNumber.replace(/(.{6}).*(.{4})/, "$1********$2") }}</div>
                 <div class="address">{{ item.currentAreaName || '' }}{{ item.currentAddress || '' }}</div>
+              </div> -->
+              <div class="item-title">
+                <img src="./components/img/xz.png" alt="">
+                <p>采苓岩茶烟酒专营店</p>
+              </div>
+              <div class="info">
+                <img src="./components/img/xz.png" alt="">
+                <div>林轶峰 18600882921</div>
+              </div>
+              <div class="info">
+                <img src="./components/img/xz.png" alt="">
+                <div>陕西省西安市新城区中山门街道168号陕西省西安市新城区中山门街道168号</div>
               </div>
             </div>
           </div>
@@ -63,7 +78,7 @@ export default {
       })
     },
     toAddFamily() {
-      uni.navigateTo({url: `./AddFamily?id=${this.userId}&girdId=${this.girdId}`})
+      uni.navigateTo({url: `./AddMerchan?id=${this.userId}&girdId=${this.girdId}`})
     },
     userClick(index) {
       this.list[index].checked = !this.list[index].checked
@@ -103,7 +118,7 @@ export default {
     this.girdId = option.girdId
   },
   onShow() {
-    document.title = '责任家庭'
+    document.title = '责任商户'
     this.getList()
     uni.$on('updateList', () => {
       this.current = 1
@@ -133,8 +148,7 @@ export default {
     padding-bottom: 112px;
 
     ul {
-      padding-left: 32px;
-      background-color: #fff;
+      padding: 0 32px;
 
       li {
         list-style-type: none;
@@ -151,54 +165,57 @@ export default {
             height: 48px;
           }
 
-          .info {
-            display: flex;
-            justify-content: flex-start;
+          .item-info {
             width: 100%;
-
-            .userImg {
-              margin-right: 32px;
-              width: 80px;
-              height: 80px;
-              border-radius: 50%;
-            }
-
-            .userInfo {
-              width: 100%;
-              padding-right: 32px;
-              border-bottom: 1px solid #E4E5E6;
-
-              .name {
-                display: flex;
-                justify-content: space-between;
+            background: #FFF;
+            border-radius: 16px;
+            padding: 32px 24px 32px 32px;
+            box-sizing: border-box;
+            margin-bottom: 30px;
+            .item-title{
+              margin-bottom: 32px;
+              img{
+                width: 72px;
+                height: 72px;
+                margin-right: 16px;
+                vertical-align: middle;
+              }
+              p{
+                display: inline-block;
+                width: 400px;
                 font-size: 32px;
-                margin-bottom: 8px;
-
-                .user-name {
-                  font-weight: 800;
-                }
-
-                .user-tel {
-                  font-size: 26px;
-                  color: #999999;
-                }
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #000;
+                line-height: 32px;
               }
-
-              .idCard {
-                margin-bottom: 16px;
-                font-size: 26px;
-                color: #999999;
-              }
-
-              .address {
-                max-width: 100%;
-                word-break: break-all;
-                margin-bottom: 18px;
-                font-size: 26px;
-                color: #999999;
+              span{
+                display: inline-block;
+                width: calc(100% - 488px);
+                text-align: right;
+                font-size: 24px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                color: #999;
+                line-height: 24px;
+              }
+            }
+            .info{
+              img{
+                width: 28px;
+                height: 28px;
+                margin-right: 16px;
+              }
+              div{
+                display: inline-block;
+                width: calc(100% - 44px);
+                word-break: break-all;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                color: #333;
+                line-height: 40px;
+                vertical-align: text-top;
               }
             }
-
           }
         }
       }