首页选择项目绑定的项目改为绑定小组

src/views/GBC/customerDetail.vue

@@ -22,35 +22,77 @@
         </span>
       </div>
     </div>
-    <div v-for="(item,index) in dataList1" :key="index">
-      <div class="triangle"></div>
+    <div style="margin: 10px;overflow: auto;white-space: nowrap;">
+      <div v-for="(item,index) in dataList1" :key="index" style="display: inline-block;width: 80px;height: 80px;border-radius: 5px;background: #fff;margin-right: 10px;overflow: hidden;position: relative;">
+        <div v-if="item.sex=='女'" class="triangle1"></div>
+        <div v-if="item.sex=='男'" class="triangle2"></div>
+        <div style="position: absolute;right: 2px;top: 2px;font-size: 12px;color: #fff;">{{item.type}}</div>
+        <div style="position: absolute;top: 20px;left: 20px;">
+          <img :src="item.src" style="width: 40px;" />
+        </div>
+        <div style="position: absolute;bottom: 3px;width: 100%;text-align: center;font-size: 12px;">{{item.name}}</div>
+      </div>
     </div>
+    <div style="margin: 10px;border-radius: 5px;overflow: hidden;">
+      <van-collapse v-model="activeNames">
+        <van-collapse-item title="标题1" name="1">
+          <div style="display: flex;padding-bottom: 10px;border-bottom: 1px dashed #666;">
+            <div style="width: 30%;line-height: 30px;color: #666;">
+              <p>客户姓名：</p>
+              <p>年龄：</p>
+              <p>性别：</p>
+              <p>手机号码：</p>
+              <p>部门/科室：</p>
+            </div>
+            <div style="width: 70%;line-height: 30px;color: #000;">
+              <p>赵燕燕</p>
+              <p>39周岁</p>
+              <p>男</p>
+              <p>158****6959</p>
+              <p>财务部</p>
+            </div>
+          </div>
+          <van-field class="customerType" v-model="customerType" label="客户类型" name="客户类型" readonly right-icon="arrow" @click="toSelect('toChooseType')" placeholder="请输入"/>
+        </van-collapse-item>
+      </van-collapse>
+    </div>
+    <van-popup v-model="popupShow" position="bottom">
+      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="popupShow = false" />
+    </van-popup>
   </div>
 </template>
 
 <script>
-import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
+import { Collapse, CollapseItem } from 'vant'
 
 export default {
   components: {
-    [Tab.name]: Tab,
-    [Tabs.name]: Tabs,
-    [Search.name]: Search,
-    [DropdownMenu.name]: DropdownMenu,
-    [DropdownItem.name]: DropdownItem,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
   },
   data() {
     return {
       dataList1:[
-        {name:'刘亚丽',type:'妻子',src:"",sex:'女'},
-        {name:'刘桂芬',type:'母亲',src:"",sex:'女'},
-        {name:'谢居安',type:'父亲',src:"",sex:'女'},
-        {name:'谢危',type:'儿子',src:"",sex:'女'},
-        {name:'刘亚丽',type:'妻子',src:"",sex:'女'},
-        {name:'刘桂芬',type:'母亲',src:"",sex:'女'},
-        {name:'谢居安',type:'父亲',src:"",sex:'女'},
-        {name:'谢危',type:'儿子',src:"",sex:'女'},
+        {name:'刘亚丽',type:'妻子',src:require('@/assets/images/GBC/relation1.png'),sex:'女'},
+        {name:'刘桂芬',type:'母亲',src:require('@/assets/images/GBC/relation2.png'),sex:'女'},
+        {name:'谢居安',type:'父亲',src:require('@/assets/images/GBC/relation3.png'),sex:'男'},
+        {name:'谢危',type:'儿子',src:require('@/assets/images/GBC/relation4.png'),sex:'男'},
+        {name:'刘亚丽',type:'妻子',src:require('@/assets/images/GBC/relation5.png'),sex:'女'},
+        {name:'刘桂芬',type:'母亲',src:require('@/assets/images/GBC/relation6.png'),sex:'女'},
+        {name:'谢居安',type:'父亲',src:require('@/assets/images/GBC/relation1.png'),sex:'男'},
+        {name:'谢危',type:'儿子',src:require('@/assets/images/GBC/relation2.png'),sex:'男'},
       ],
+      activeNames:[],
+      popupShow:false,
+      columns:[],
+      customerType:'',
+      columns_toChooseType:[
+        {text:'A类',id:'A'},
+        {text:'B类',id:'B'},
+        {text:'C类',id:'C'},
+        {text:'D类',id:'D'},
+      ],
+
     }
   },
   created() {
@@ -60,6 +102,16 @@ export default {
 
   },
   methods: {
+    onConfirm(){
+
+    },
+    toSelect(pickerType){
+      switch (pickerType) {
+        case 'toChooseType':
+          this.columns = this.columns_toChooseType
+          break
+      }
+    },
   },
   beforeRouteLeave(to, from, next) {
     document.body.style.backgroundColor = ''
@@ -69,11 +121,31 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .triangle {
+  .triangle1 {
     width: 0;
     height: 0;
-    border-width: 15px; /* 设置边长 */
+    border-width:30px; /* 设置边长 */
     border-style: solid;
-    border-color: transparent transparent #000000 transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
+    transform: translateX(50px) translateY(-30px) rotate(45deg);
+    border-color: transparent transparent #FC7D5B transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
+  }
+  .triangle2 {
+    width: 0;
+    height: 0;
+    border-width:30px; /* 设置边长 */
+    border-style: solid;
+    transform: translateX(50px) translateY(-30px) rotate(45deg);
+    border-color: transparent transparent #3D72D0 transparent; /* 透明色为背景色，#000000为需要显示的颜色 */
+  }
+  /deep/ .van-cell:not(:last-child)::after {
+    border-bottom: 1px dashed #666 !important;
+  }
+  /deep/ .van-cell:not(:last-child)::after{
+    left:0px !important;
+  }
+  .customerType{
+    padding-left: 0px;
+    padding-right: 0px;
+    color: #666;
   }
 </style>

src/views/GBC/home.vue

@@ -44,8 +44,8 @@
         <p style="color: #E9332E;">请选择项目</p>
       </div>
       <div class="chooseProjectDialog" style="padding: 20px 30px 30px;font-size: 14px;">
-        <van-radio-group v-model="chooseProjectCode">
-          <van-radio v-for="(item,index) in projectList" :key="index" :name="item.projectCode" style="margin: 10px;">
+        <van-radio-group v-model="chooseTeamCode">
+          <van-radio v-for="(item,index) in projectList" :key="index" :name="item.teamCode" style="margin: 10px;">
             <span style="margin-left: 20px;">
               {{item.projectName}}
               <span v-if="item.teamName" style="margin-left: 10px;color: #a7a7a7;">
@@ -118,6 +118,7 @@ export default {
       ],
       projectList:[],
       chooseProjectDialogShow: false,
+      chooseTeamCode:'',
       chooseProjectCode:'',
       chooseProjectName: '',
       enableProjectDialogShow: false,
@@ -153,6 +154,7 @@ export default {
           this.projectList = res.content
           if(this.projectList.length == 1) {
             this.chooseProjectDialogShow = false
+            this.chooseTeamCode = this.projectList[0].TeamCode
             this.chooseProjectCode = this.projectList[0].projectCode
             this.chooseProjectName = this.projectList[0].projectName
             this.chooseProjectList()
@@ -167,20 +169,20 @@ export default {
     },
 
     chooseProjectList(){
-      if(!this.chooseProjectCode) {
+      if(!this.chooseTeamCode) {
         this.$toast('请选择项目')
         return false
       }
       if(this.projectList && this.projectList.length != 0) {
         this.projectList.forEach(item=>{
-          if(item.projectCode == this.chooseProjectCode){
+          if(item.teamCode == this.chooseTeamCode){
             this.chooseProjectName = item.projectName
           }
         })
       }
 
       let params = {
-        projectCode:this.chooseProjectCode
+        teamCode:this.chooseTeamCode
       }
       gbcProjectConfirm(params).then(res=>{
         if(res.result == '0') {