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

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>