lishan

src/views/client/add-client.vue

@@ -21,7 +21,12 @@
           label="电话号码"
           placeholder="添加电话号码"
           class="mt-4">
-          <app-icon slot="prefix" icon-name="y-add" />
+          <app-icon  
+            slot="prefix"
+            type="png"
+            :path="require('@/assets/icons/y-add.png')"
+            class-name="w-7 h-7 mr-3"
+            />
         </input-cell>
         <input-cell
           v-model="address"
@@ -31,7 +36,12 @@
           class="mt-4"
         />
         <c-cell dot>
-          <app-icon  slot="prefix" icon-name="location"/>
+          <app-icon  
+            slot="prefix"
+            type="png"
+            :path="require('@/assets/icons/location.png')"
+            class-name="w-4 h-4 mb-2 mr-2"
+            />
           <div slot="prefix" class="text-text-secondary">支持地图定位</div>
         </c-cell>
         <input-cell

src/views/client/add-follow.vue

@@ -2,24 +2,33 @@
   <div class="add-client">
     <main-page left-arrow @click-left="handleClickLeft">
       <div class="px-4 pt-14">
-        <div class="bg-white">
-          <van-cell-group>
-            <van-field  placeholder="请输入用户名" border/>
-           
-            <van-uploader v-model="fileList" multiple accept=".doc, .docx, .xml, .xlsx, .pdf,audio/*,image/*"/>
-          </van-cell-group>
-         
-         
+        <div class="bg-white rounded-md ">
+          <div class="pt-1">
+            <textarea  placeholder="请填写具体描述" rows="4" class="px-4 pt-1 w-full"/>
+          </div>
+          <div >
+            <van-uploader v-model="fileList" multiple accept=".doc, .docx, .xml, .xlsx, .pdf,audio/*,image/*" class="mb-2 ml-4"/>
+          </div>
         </div>
-        <c-cell dot title="跟进方式" class="mt-4" @click="showPopup"/>
-        <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" >        
-            <van-cell value="远程沟通"/>
-            <van-cell value="外勤拜访" />
-            <van-cell value="取消" />
-        </van-popup>
-        <c-button
+        <div>
+          <c-cell dot title="跟进方式" class="mt-4 " @click="showPopup" :content="content1"/>
+          <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" class="bg-common-bg" >
+              <van-cell-group v-for="(item,index) in items" :key="index" class="text-center">
+                <van-cell @click="clickHandle(index)">
+                  <div class="text-center py-2">
+                    {{item.action}}
+                  </div>
+                </van-cell>
+              </van-cell-group>
+          </van-popup>
+        </div>
+        
+          <van-cell  v-show="isShow" :title="content2" center :icon="require('@/assets/icons/location.png')" class="rounded-md mt-4 background-color-common-bg" >
+          </van-cell>
+        
+        <c-button 
           round
-          class="mt-10"
+          class="mt-20"
           buttonBg="bg-color-primary"
         >
           完成
@@ -33,12 +42,10 @@
 import Vue from "vue";
 import { Popup } from 'vant';
 import { Uploader } from 'vant';
-import { Field } from 'vant';
 import { Cell, CellGroup } from 'vant';
 
 Vue.use(Cell);
 Vue.use(CellGroup);
-Vue.use(Field);
 Vue.use(Uploader);
 Vue.use(Popup);
 export default Vue.extend({
@@ -47,20 +54,30 @@ export default Vue.extend({
     "main-page": () => import("@/layout/main-page.vue"),
     "c-button": () => import("@/components/common/c-button.vue"),
     "c-cell": () => import("@/components/common/c-cell.vue"),
-    'group-cell': () => import('@/components/common/group-cell.vue')
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    //'group-cell': () => import('@/components/common/group-cell.vue')
   },
   created() {
     // console.log(Mock, 'mock')
   },
   data() {
     return {
-      show:false,
+     show:false,
+     isShow:false,
+     content1:'',
+     content2:'这里是定位地址么什么什么什么什么什么什么什么v什么什么什么什么什么什么v么v的',
+
      fileList: [
         // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
         // // Uploader 根据文件后缀来判断是否为图片文件
         // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
         // { url: 'https://cloud-image', isImage: true },
       ],
+        items:[
+          {action:'远程沟通'},
+          {action:'外勤拜访'},
+          {action:'取消'},
+        ],
     };
   },
   methods: {
@@ -74,8 +91,22 @@ export default Vue.extend({
     showPopup() {
       this.show = true;
     },
-     
+    clickHandle(index: number){
+      this.content1=this.items[index].action
+      this.show=!this.show
+      if(index==0){
+        this.isShow=false
+      }else if(index==1){
+        this.isShow=true
+      }else{
+        this.content1=''
+        this.isShow=false      
+      }
+    }, 
   },
+  computed:{
+    
+  }
 });
 </script>