GBC项目列表页面基础功能开发 组件编写 客户列表页面基础功能开发 组件编写

src/router/GBC/index.js

@@ -1,5 +1,8 @@
 //数据报表 定义相关组件
 const GBC_home = () => import('@/views/GBC/home')
+const GBC_projectList = () => import('@/views/GBC/projectList')
+const GBC_projectDetail = () => import('@/views/GBC/projectDetail')
+const GBC_customerDetail = () => import('@/views/GBC/customerDetail')
 
 export default [
   {
@@ -11,4 +14,31 @@ export default [
       index: 1
     }
   },
+  {
+    path: '/GBC/projectList',
+    name: 'GBC_projectList',
+    component: GBC_projectList,
+    meta: {
+      title: '项目列表',
+      index: 1
+    }
+  },
+  {
+    path: '/GBC/projectDetail',
+    name: 'GBC_projectDetail',
+    component: GBC_projectDetail,
+    meta: {
+      title: '项目详情',
+      index: 1
+    }
+  },
+  {
+    path: '/GBC/customerDetail',
+    name: 'GBC_customerDetail',
+    component: GBC_customerDetail,
+    meta: {
+      title: '编辑客户信息',
+      index: 1
+    }
+  },
 ]

src/views/GBC/customerDetail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    编辑客户信息
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
+
+export default {
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Search.name]: Search,
+    [DropdownMenu.name]: DropdownMenu,
+    [DropdownItem.name]: DropdownItem,
+  },
+  data() {
+    return {
+
+    }
+  },
+  created() {
+
+  },
+  mounted(){
+
+  },
+  methods: {
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/GBC/projectDetail.vue

@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <van-tabs v-model="tabActive">
+      <van-tab title="客户列表" name="customerList"></van-tab>
+      <van-tab title="数据看板" name="dataBoard"></van-tab>
+      <van-tab title="产品列表" name="productList"></van-tab>
+    </van-tabs>
+    <div v-if="tabActive == 'customerList'">
+      <div style="display: flex;align-items: center;margin-left: 10px;">
+        <div style="width: 30%;">
+          <van-dropdown-menu :overlay="dropdownmenuoverlay">
+            <van-dropdown-item v-model="chooseType" :options="chooseTypeOption" />
+          </van-dropdown-menu>
+        </div>
+        <van-search v-model="searchvalue" shape="round" background="#f5f5f5" placeholder="搜索客户姓名/部门/科室/服务人员" style="width: 70%;"/>
+      </div>
+      <div style="padding: 0px 10px 10px;">
+        <div v-for="item in customerList">
+          <div style="padding: 20px 20px 10px;border-radius: 5px;background: #fff;margin-top: 20px;">
+            <div style="display: flex;font-size: 14px;line-height: 30px;border-bottom: 1px solid #eee;padding-bottom: 10px;">
+              <div style="width: 55%;overflow: hidden;">
+                <p>客户姓名：{{item.name}}</p>
+                <p>手机号码：{{item.phone}}</p>
+                <p>服务组长：{{item.leader}}</p>
+              </div>
+              <div style="width: 45%;overflow: hidden;">
+                <p>部门/科室：{{item.department}}</p>
+                <p>承包保单：{{item.policyNums}}</p>
+                <p>服务组员：{{item.serviceName}}</p>
+              </div>
+            </div>
+            <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
+              <van-button @click="goCustomerDetail(item)" type="danger" size="small" style="border-radius:5px;">查看编辑</van-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="tabActive == 'dataBoard'">
+      <div>数据看板</div>
+    </div>
+    <div v-if="tabActive == 'productList'">
+      <div>产品列表</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tab, Tabs, Search, DropdownMenu, DropdownItem } from 'vant'
+
+export default {
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [Search.name]: Search,
+    [DropdownMenu.name]: DropdownMenu,
+    [DropdownItem.name]: DropdownItem,
+  },
+  data() {
+    return {
+      tabActive:1,
+      searchvalue:'',
+      chooseType: 0,
+      chooseTypeOption: [
+        { text: '请选择', value: 0 },
+        { text: '按客户', value: 1 },
+        { text: '按科室', value: 2 },
+        { text: '按小组', value: 3 },
+        { text: '按日期', value: 4 },
+      ],
+      dropdownmenuoverlay:false,
+      customerList:[
+        {
+          name:'赵燕燕',
+          department:'财务部',
+          phone:'15825826959',
+          policyNums:'10份',
+          leader:'李斯',
+          serviceName:'刘艺'
+        },
+        {
+          name:'赵燕燕',
+          department:'财务部',
+          phone:'15825826959',
+          policyNums:'10份',
+          leader:'李斯',
+          serviceName:'刘艺'
+        },
+        {
+          name:'赵燕燕',
+          department:'财务部',
+          phone:'15825826959',
+          policyNums:'10份',
+          leader:'李斯',
+          serviceName:'刘艺'
+        },
+        {
+          name:'赵燕燕',
+          department:'财务部',
+          phone:'15825826959',
+          policyNums:'10份',
+          leader:'李斯',
+          serviceName:'刘艺'
+        },
+        {
+          name:'赵燕燕',
+          department:'财务部',
+          phone:'15825826959',
+          policyNums:'10份',
+          leader:'李斯',
+          serviceName:'刘艺'
+        },
+      ],
+    }
+  },
+  created() {
+
+  },
+  mounted(){
+
+  },
+  methods: {
+    goCustomerDetail(data){
+      this.$router.push({
+        path:'/GBC/customerDetail',
+        query:{
+          serviceName:data.serviceName
+        },
+      })
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .van-search__content{
+    background: #fff;
+  }
+  /deep/ .van-dropdown-menu{
+    height: 34px;
+  }
+  /deep/ .van-dropdown-item__content{
+    width: 40%;
+    left: 10px;
+  }
+  /deep/ .van-dropdown-menu{
+    background: #f5f5f5;
+  }
+</style>

src/views/GBC/projectList.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <van-search v-model="searchvalue" shape="round" background="#fff" placeholder="搜索项目名称"/>
+    <div style="padding: 10px;">
+      <van-collapse v-for="item in yearList" :key="item.year" v-model="activeNames" style="margin-top: 10px;border-radius: 5px;">
+        <van-collapse-item :title="item.year" :name="item.year">
+          <div v-for="(ii,iis) in item.projectList" @click="goprojectDetail(ii)" :key="iis" style="display: flex;justify-content: space-between;align-items: center;padding: 10px;border-bottom: 1px solid #eee;">
+            <div>
+              <p style="color:#323233;margin-bottom: 10px;">{{ii.projectName}}</p>
+              <p v-if="ii.enable == '1'">服务起止日期<span style="margin-left: 10px;">{{ii.startDate}}至{{ii.endDate}}</span></p>
+              <p v-if="ii.enable == '0'">服务起止日期<span style="margin-left: 10px;color: red;">{{ii.startDate}}至{{ii.endDate}}</span></p>
+            </div>
+            <van-icon name="arrow" />
+          </div>
+        </van-collapse-item>
+      </van-collapse>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Search, Collapse, CollapseItem, Icon } from 'vant'
+
+export default {
+  components: {
+    [Search.name]: Search,
+    [Collapse.name]: Collapse,
+    [CollapseItem.name]: CollapseItem,
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      searchvalue:'',
+      activeNames: [],
+      yearList:[
+        {
+          year:'2023年项目',
+          projectList:[
+            {projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
+          ],
+        },
+        {
+          year:'2022年项目',
+          projectList:[
+            {projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
+          ],
+        },
+        {
+          year:'2021年项目',
+          projectList:[
+            {projectName:'国富人寿AA项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿BB项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿CC项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'1'},
+            {projectName:'国富人寿DD项目',projectCode:'PID0000000',startDate:'2023-12-30',endDate:'2024-02-28',enable:'0'},
+          ],
+        },
+      ],
+    }
+  },
+  created() {
+
+  },
+  mounted(){
+
+  },
+  methods: {
+    goprojectDetail(data){
+      this.$router.push({
+        path:'/GBC/projectDetail',
+        query:{
+          projectCode:data.projectCode
+        },
+      })
+    },
+  },
+  beforeRouteLeave(to, from, next) {
+    document.body.style.backgroundColor = ''
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .van-search__content{
+    background: #f7f8fa;
+  }
+  /deep/ .van-cell__title{
+    font-weight: bold;
+  }
+  /deep/ .van-collapse-item__title{
+    border-radius: 5px;
+  }
+</style>