【银保app】保单详情 保单列表

src/api/YB_APP/index.js

@@ -47,4 +47,21 @@ export function getDeptPremYB(data) {
     method: 'post',
     data
   })
-}
+}
+
+// 保单查询接口
+export function YBpolicyListAgent(data) {
+  return request({
+    url: getUrl('/sale/policy/YBpolicyListAgent', 1,3),
+    method: 'post',
+    data
+  })
+}
+// 保单详情接口
+export function YBpolicyDetail(data) {
+  return request({
+    url: getUrl('/sale/policy/YBpolicyDetail', 1,3),
+    method: 'post',
+    data
+  })
+}

src/views/YB_APP/performanceQuery.vue

@@ -11,14 +11,13 @@
         <span @click="clickCalendar" class="headDate">{{calendarValue}} ▼</span>
       </div>
     </div>
-    <div v-if="premType == 'QJ'" class="mainContainerQJ">
+    <div v-show="premType == 'QJ'" class="mainContainerQJ">
       <p class="mainContainer_title">
         <img class="mainContainer_title_img" src="@/assets/YB_APP/images/33.png">
         <span class="mainContainer_title_span">首期规模保费</span>
       </p>
-
-      <div v-if="echartsData.length != 0 && premType == 'QJ'" class="echartsContent">
-        <div v-if="echartsData.length != 0 && premType == 'QJ'" class="incomeChart" ref="incomeChart" @click="parentsEvent"></div>
+      <div class="echartsContent">
+        <div class="incomeChart" ref="incomeChart" id="incomeChartId" @click="parentsEvent"></div>
       </div>
 
       <div v-if="echartsData.length == 0">
@@ -91,11 +90,11 @@
       </div>
     </div>
     
-    <div v-if="premType == 'QJ'" class="myFooter">
+    <div v-show="premType == 'QJ'" class="myFooter">
       <button class="myFooter_button">查询客户保单</button>
     </div>
 
-    <div v-if="premType == 'GM'" class="mainContainerGM">
+    <div v-show="premType == 'GM'" class="mainContainerGM">
       <p class="mainContainer_title">
         <img class="mainContainer_title_img" src="@/assets/YB_APP/images/33.png">
         <span class="mainContainer_title_span">网点数据</span>
@@ -124,13 +123,14 @@
       <div class="channelORnetween_list_head">
         <div class="channelORnetween_list_head_con">
           <div class="channelORnetween_list_head_button_con">
-            <button class="activeChannel">渠道业绩</button>
-            <button class="unActiveChannel">网点业绩</button>
+            <div :class="channelORnetworkType == 'channel'?'activeChannel':'unActiveChannel'" @click="changeChannelORnetworkType('channel')" >渠道业绩</div>
+            <div :class="channelORnetworkType == 'network'?'activeChannel':'unActiveChannel'" @click="changeChannelORnetworkType('network')">网点业绩</div>
           </div>
           <div class="channelORnetween_list_head_button_right">保费排序</div>
         </div>
       </div>
-      <div class="channelORnetween_list">
+
+      <div class="channelORnetween_list" >
         <div v-for="(item,index) in echartsData" >
           <div class="channelORnetween_list_con">
             <div class="channelORnetween_list_maincon">
@@ -201,6 +201,7 @@
     },
     data() {
       return {
+        buttonType:'',
         premType:'QJ',
         channelORnetworkType:'channel',
         activeProductIndex:'',
@@ -312,6 +313,11 @@
       this.incomeChart.setOption(this.incomeOption)
     },
     methods:{
+      changeChannelORnetworkType(type){
+        if(this.channelORnetworkType != type){
+          this.channelORnetworkType = type
+        }
+      },
       parentsEvent(){
         this.activeProductIndex = ''
       },
@@ -567,9 +573,10 @@
   }
   .activeChannel{
     color:#3749A9;background:#F4F6FF;padding:6px;border-radius:3px;font-weight:bold;font-size:14px;border:none;
+    margin:5px;
   }
   .unActiveChannel{
-    color:#333333;font-size:14px;margin-left:5px;border:none;background:#fff;
+    color:#333333;font-size:14px;margin:5px;border:none;background:#fff;padding:6px;
   }
   .channel_head_con_num{
     display:flex;justify-content:flex-start;margin-left:15px;

src/views/YB_APP/policyDetail.vue

@@ -1,29 +1,72 @@
 <template>
   <div class="public_container">
-    <span>保单详情</span>
+    <div style="height: 100%; width: 96%; background-color: white; margin: 2vh auto; overflow: hidden; border-radius: 12px">
+      <van-cell-group inset>
+        <van-cell title="产品名称" :value="ybOrderDTOList.riskName" />
+        <van-cell title="保单号" :value="ybOrderDTOList.riskCode" />
+        <van-cell title="投保人" :value="ybOrderDTOList.appentName" />
+        <van-cell title="被保险人" :value="ybOrderDTOList.insureName" />
+        <van-cell title="交费金额/元" :value="ybOrderDTOList.prem" />
+        <van-cell title="保险金额/元" :value="ybOrderDTOList.amt" />
+        <van-cell title="销售渠道" :value="ybOrderDTOList.bankChannel" />
+        <van-cell title="销售网点" :value="ybOrderDTOList.saleNet" />
+        <van-cell title="承保日期" :value="ybOrderDTOList.signDate" />
+        <van-cell title="保单状态" :value="ybOrderDTOList.state" />
+        <van-cell title="回访成功" :value="ybOrderDTOList.reSuccessDate" />
+        <van-cell title="回访完成" :value="ybOrderDTOList.reCallDate" />
+      </van-cell-group>
+    </div>
   </div>
 </template>
 
 <script>
-  import { Button } from 'vant'
-  export default {
-    name: 'policyDetail',
-    components: {
-      [Button.name]: Button,
-    },
-    data() {
-      return {
 
+import { YBpolicyDetail } from '@/api/YB_APP/index'
+export default {
+  name: 'policyDetail',
+  components: {},
+  data() {
+    return {
+      ybOrderDTOList:'',
+      policyNo:'',
+    }
+  },
+  mounted() {
+    this.policyNo = this.$route.query.policyNo
+    console.log(this.policyNo,'avc')
+    this.YBpolicyDetail()
+  },
+  methods: {
+    YBpolicyDetail(){
+      let params = {
+        policyNo : this.policyNo
       }
-    },
-    mounted(){
+      console.log('我是log');
+      YBpolicyDetail(params).then(res => {
+        console.log(res,'我是res')
+        if (res.result == 0) {
+          this.ybOrderDTOList = res.content.ybOrderDTO
+          console.log(this.ybOrderDTOList, '请求成功的res')
 
-    },
-    methods:{
-
-    },
+        }
+      })
+    }
   }
+}
 </script>
 <style lang="scss" scoped>
-
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+/deep/ .van-cell__title{
+  color:#0a0808;
+  max-width: 30%;
+}
+/deep/ .van-cell__value{
+  color: #777676;
+  // text-align: left;
+}
+// /deep/ .van-cell-group > 
 </style>

src/views/YB_APP/policyList.vue

@@ -1,40 +1,244 @@
 <template>
   <div class="public_container">
-    <span>保单列表</span>
-    <van-button type="primary" @click="goPolicyDetail">主要按钮</van-button>
+    <!-- 最上方的搜索框 -->
+    <div>
+      <van-search shape="round" v-model="findValue" placeholder="请输入保单号" />
+      <!-- 右侧搜索按钮 -->
+      <button
+        @click="keywordSearch(findValue)"
+        style="
+          position: absolute;
+          top: 10px;
+          right: 18px;
+          background-color: #2154cc;
+          color: #ffffff;
+          height: 39px;
+          width: 68px;
+          border-radius: 120px;
+          font-size: 14px;
+          border: 0px;
+        "
+      >
+        搜索
+      </button>
+    </div>
+    <!-- 无内容显示的背景 -->
+    <div v-if="filpolicyListDTOList == ''">
+      <img style="height: 216px; width: 285px; position: absolute; top: 18%; left: calc(50% - 142px)" src="../../assets/YB_APP/images/noguarantee.png" alt="" />
+      <p style="font-size: 9px; position: absolute; top: 37%; left: 44.5%; color: #b3b5ca">暂无保单</p>
+    </div>
+    <!-- 卡片列表 -->
+    <div v-if="filpolicyListDTOList != ''">
+      <div
+        v-for="(item, index) in filpolicyListDTOList"
+        :key="index"
+        style="height: 28vh; width: 96%; border-radius: 12px; background-color: white; margin: 2vh auto; overflow: hidden"
+      >
+        <div :class="[item.orderStatus == 0 ? 'topbackground1' : 'topbackground2']">
+          <img
+            v-if="item.orderStatus == 0"
+            style="height: 18px; width: 14px; margin: 12px 7px; position: absolute"
+            src="../../assets/YB_APP/images/sign1.png"
+          />
+          <!-- 字左边小对号图片  -->
+          <img
+            v-if="item.orderStatus != 0"
+            style="height: 18px; width: 14px; margin: 12px 7px; position: absolute"
+            src="../../assets/YB_APP/images/sign2.png"
+          />
+          <span style="line-height: 5vh; margin-left: 27px; font-weight: 600; font-size: 16px">{{ item.riskName }}</span>
+        </div>
+        <!-- 卡片内容 -->
+        <div style="height: 22.5vh; width: 100%; padding: 0px 20px; display: flex">
+          <div class="textList" style="height: 90%; width: 70%; color: #9d9d9d; padding-top: 14px; font-size: 12px">
+            <p style="font-size: 14px; font-weight: 600; margin-bottom: 13px; color: #535353">
+              <span>保单号</span><span>{{ item.policyNo }}</span>
+            </p>
+            <p>
+              <span>被保人</span><span>{{ item.insuredName }}</span>
+            </p>
+            <p>
+              <span>承保日期</span><span>{{ item.cvaliDate }}</span>
+            </p>
+            <p>
+              <span>销售渠道</span><span>{{ item.bankChannel }}</span>
+            </p>
+            <!-- 根据0,1状态判断显示是否和文字颜色 -->
+            <p v-if="item.visitSuccess == 0"><span>回访成功</span><span style="color: #f22220; font-weight: 600">否</span></p>
+            <p v-if="item.visitSuccess == 1"><span>回访成功</span><span>是</span></p>
+            <p v-if="item.visitFinish == 0"><span>回访完成</span><span style="color: #f22220; font-weight: 600">否</span></p>
+            <p v-if="item.visitFinish == 1"><span>回访完成</span><span>是</span></p>
+          </div>
+          <!-- 右边状态图片 -->
+          <div style="height: 100%; width: 30%; background-color: white">
+            <!-- 有效 -->
+            <img v-if="item.orderStatus == 0" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp1.png" alt="" />
+            <!-- 退保终止 -->
+            <img v-if="item.orderStatus == 1" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp2.png" alt="" />
+            <!-- 犹退终止 -->
+            <img v-if="item.orderStatus == 2" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp3.png" alt="" />
+            <!-- 协退终止 -->
+            <img v-if="item.orderStatus == 3" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp4.png" alt="" />
+            <!-- 当日撤单 -->
+            <img v-if="item.orderStatus == 4" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp5.png" alt="" />
+            <!-- 理赔终止 -->
+            <img v-if="item.orderStatus == 5" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp6.png" alt="" />
+            <!-- 失效终止 -->
+            <img v-if="item.orderStatus == 6" style="height: 100px; width: 100px" src="../../assets/YB_APP/images/stamp7.png" alt="" />
+            <button
+              @click="goPolicyDetail(item.policyNo)"
+              style="
+                height: 30px;
+                width: 80px;
+                color: #d7523b;
+                border: #d7523b 1px solid;
+                border-radius: 30px;
+                background-color: white;
+                margin-top: 36px;
+                margin-left: 10px;
+                font-size: 12px;
+              "
+            >
+              查看详情
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-  import { Button } from 'vant'
-  export default {
-    name: 'policyList',
-    components: {
-      [Button.name]: Button,
-    },
-    data() {
-      return {
+import { Button, Search  } from 'vant'
+import { ref } from 'vue'
+import { YBpolicyListAgent } from '@/api/YB_APP/index'
 
+export default {
+  name: 'policyList',
+  components: {
+    [Button.name]: Button,
+    [Search.name]: Search
+  },
+  setup() {
+    const value = ref('')
+    return { value }
+  },
+  data() {
+    return {
+      findValue: '', // 上面搜索框的value
+      policyListDTOList: [],
+      filpolicyListDTOList: [] // 结合watch过滤后的卡片数据
+    }
+  },
+  mounted() {
+    this.YBpolicyListAgent()
+  },
+  methods: { 
+    YBpolicyListAgent() {
+      let params = {
+        signDate: '2022-09',
+        appntName: '',
+        insureName: '',
+        riskCode: ''
       }
+      console.log('我是log')
+      YBpolicyListAgent(params).then((res) => {
+        console.log(res, '我是res')
+        if (res.result == 0) {
+          this.policyListDTOList = res.policyListDTOList
+          this.filpolicyListDTOList = res.policyListDTOList
+          console.log(this.policyListDTOList, 'data里的policyListDTOList')
+        }
+      })
     },
-    mounted(){
-
+    // (查看详情)按钮跳转
+    goPolicyDetail(data) {
+      console.log(data)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/YB_APP/policyDetail?policyNo=' + data
+        },
+        routerInfo: {
+          path: '/YB_APP/policyDetail?policyNo=' + data
+        }
+      })
     },
-    methods:{
-      goPolicyDetail(){
-        this.$jump({
-          flag: 'h5',
-          extra: {
-            url: location.origin + '/#/YB_APP/policyDetail',
-          },
-          routerInfo: {
-            path: '/YB_APP/policyDetail',
-          },
-        })
-      },
-    },
-  }
+    // 上方关键词搜索按钮
+    keywordSearch(value) {
+      console.log('点击搜索了')
+      this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
+        return p.policyNo.indexOf(value) !== -1
+      })
+    }
+  },
+  // 关键词搜索过滤
+  // watch: {
+    // findValue: {
+    //   handler(value) {
+        //       this.filpolicyListDTOList = this.policyListDTOList.filter((p) => {
+        //         // return p.policyNo.indexOf(value) !== -1  ||  p.insuredName.indexOf(value) !== -1
+        //         return p.policyNo.indexOf(value) !== -1
+        //       })
+        // if (value == '') {
+        //   this.filpolicyListDTOList = this.policyListDTOList
+        // }
+      // }
+    // }
+  // }
+}
 </script>
 <style lang="scss" scoped>
-
+.public_container {
+  font-size: 12px;
+  height: 100vh;
+  width: 100vw;
+}
+/deep/ .van-search {
+  // background-color: rgb(0, 255, 255);
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+  height: 7vh;
+}
+/deep/ .van-cell--borderless {
+  height: 5vh;
+  // background-color: #f7f7f7;
+  font-size: 12px;
+  line-height: 4vh;
+}
+.textList > p {
+  display: flex;
+  margin-bottom: 11px;
+}
+.textList > p > span:nth-of-type(1) {
+  display: block;
+  // float:left;
+  width: 50px;
+  // background-color: blueviolet;
+}
+.textList > p > span:nth-of-type(2) {
+  // width: 5vh;
+  // background-color: rgb(65, 214, 77);
+  margin-left: 10vw;
+  width: 164px;
+  // background-color: chartreuse;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+// .active {
+//   color: #f22220;
+// }
+.topbackground1 {
+  background: linear-gradient(to right, #435898, #6581c6);
+  height: 4.5vh;
+  width: 100%;
+  color: white;
+}
+.topbackground2 {
+  background: linear-gradient(to right, #fcfcfc, #e8e5e6);
+  height: 4.5vh;
+  width: 100%;
+  color: #323232;
+}
 </style>