[银保app]续期列表和详情接口字段对接修改.添加终止图片.

src/views/YB_APP/renewalDetail.vue

@@ -2,14 +2,27 @@
   <div class="public_container">
     <!-- 上方小图标 -->
     <div class="topTitle">
-      <div v-if="abc == 1">
+      <div v-if="(changestate == 0)">
         <van-icon name="underway-o" color="#EA070A" size="30" />
-        <p class="topTitleText">{{ ybOrderDTOList.defaultReson }}</p>
+        <p class="topTitleText">续期待扣款</p>
       </div>
-      <div v-if="abc == 2">
+      <div v-if="(changestate == 1)">
         <van-icon name="passed" color="#2451C1" size="30" />
         <p class="topTitleText">续期扣款成功</p>
       </div>
+      <div v-if="(changestate == 2)">
+        <van-icon name="underway-o" color="#EA070A" size="30" />
+        <p class="topTitleText">续期扣款中 </p>
+      </div>
+      <div v-if="(changestate == 3)">
+        <van-icon name="close" color="#EA070A" size="30" />
+        <p class="topTitleText">续期扣款失败 </p>
+      </div>
+      <div v-if="(changestate == 4)">
+        <p><img src="../../assets/YB_APP/images/changestate.png"  height="36px"></p>
+        <!-- <van-icon name="stop-circle-o" size="30"/> -->
+        <p class="topTitleText">已终止 </p>
+      </div>
     </div>
     <!-- 中间内容 -->
     <div class="listContent">
@@ -35,15 +48,15 @@
       <button class="bottomPhoneBut" @click="showDialog(ybOrderDTOList.appntPhone)">拨打电话</button>
     </div>
 
-<van-dialog
+    <van-dialog
       v-model="show"
-      title="拨打电话"
-      :message="`确认要拨打电话吗?(${ybOrderDTOList.appntPhone})`"
+      title="确认拨打电话"
+      :message="`(${ybOrderDTOList.appntPhone})`"
       show-cancel-button
       @cancel="cancel"
       @confirm="contact(ybOrderDTOList.appntPhone)"
     >
-  </van-dialog>
+    </van-dialog>
   </div>
 </template>
 
@@ -56,36 +69,39 @@ export default {
     return {
       ybOrderDTOList: '',
       policyNo: '',
-      abc: 2,
-      show: false,
+      changestate: 2,
+      show: false
     }
   },
   mounted() {
-    this.policyNo = this.$route.query.policyNo
+    this.policyNo = this.$route.query
     console.log(this.policyNo, 'avc')
+    console.log(this.$route.query,'我是router里参数');
     this.getYBRenewalInfo()
+    this.changestate = this.policyNo.payFlag
   },
   methods: {
-    cancel(){
+    cancel() {
       this.show = false
     },
-  showDialog() {
-      this.show = true;// 显示确认对话框
-  },
-   contact() {
-      const a = document.createElement("a");
-      a.href = "tel:8888410"
-      a.click();
-      this.show = false;
-   },
-    callPhone (phoneNumber) {
-     window.location.href = 'tel://' + phoneNumber},
+    showDialog() {
+      this.show = true // 显示确认对话框
+    },
+    contact() {
+      const a = document.createElement('a')
+      a.href = 'tel:8888410'
+      a.click()
+      this.show = false
+    },
+    callPhone(phoneNumber) {
+      window.location.href = 'tel://' + phoneNumber
+    },
     getYBRenewalInfo() {
-      let params = {
-        policyNo: this.policyNo
-      }
+      // let params = {
+      //   policyNo
+      // }
       console.log('我是log')
-      getYBRenewalInfo(params).then((res) => {
+      getYBRenewalInfo(this.policyNo).then((res) => {
         console.log(res, '我是res')
         if (res.result == 0) {
           this.ybOrderDTOList = res.content

src/views/YB_APP/renewalList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="public_container">
     <!-- 最上方的搜索框 -->
-    <div style="position:relative;">
+    <div style="position: relative">
       <van-search shape="round" v-model="findValue" placeholder="请输入保单号/客户身份证号" />
       <button class="searchButton" @click="keywordSearch(findValue)">搜索</button>
     </div>
@@ -28,59 +28,65 @@
       <!-- 应交月选择 -->
       <div class="beMonth">
         <p class="beMonthLeft">应交月 <span class="beMonthLeftSpan">(查询范围: 当前月份前期前溯3月~后推1月)</span></p>
-        <p class="beMonthRight" @click="clickCalendar"><span class="beMonthRightSpan">{{calendarValue}}</span>▼</p>
+        <p class="beMonthRight" @click="clickCalendar">
+          <span class="beMonthRightSpan">{{ calendarValue }}</span
+          >▼
+        </p>
       </div>
       <!-- 无内容显示的背景 -->
-      <div v-if="policyListDTOList == ''" style="position:relative">
+      <div v-if="policyListDTOList == ''" style="position: relative">
         <img class="noContentImg" src="../../assets/YB_APP/images/noguarantee.png" />
         <p class="noContentText">暂无保单</p>
       </div>
       <!-- 卡片列表 -->
       <div v-if="policyListDTOList != ''">
         <!-- <van-list v-model="loading" :finished="finished" :finished-text="noContentTip" @load="onLoad"> -->
-          <div :class="[active == 3 ? 'cardList2' : 'cardList']" v-for="(item, index) in policyListDTOList" :key="index">
-            <div class="topbackground1">
-              <img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
-              <span class="cardListText">{{ item.riskName }}</span>
+        <div :class="[active == 3 ? 'cardList2' : 'cardList']" v-for="(item, index) in policyListDTOList" :key="index">
+          <div class="topbackground1">
+            <img class="cardListImg" src="../../assets/YB_APP/images/sign1.png" />
+            <span class="cardListText">{{ item.riskName }}</span>
+          </div>
+          <div class="cardConetent">
+            <div class="textList">
+              <p>
+                <span>保单号</span><span>{{ item.contNo }}</span>
+              </p>
+              <p>
+                <span>被保人</span><span>{{ item.insuredName }}</span>
+              </p>
+              <p>
+                <span>被保险人</span><span>{{ item.appntName }}</span>
+              </p>
+              <p v-if="active == 3">
+                <span>转账银行</span><span>{{ item.bankName }}</span>
+              </p>
+              <p v-if="active == 3">
+                <span>转账帐号</span><span>{{ item.accNo }}</span>
+              </p>
+              <p>
+                <span>应交日</span><span>{{ item.payToDate }}</span>
+              </p>
+              <p v-if="active != 3">
+                <span>归属指标</span><span>{{ item.rnewIndex }}</span>
+              </p>
+              <p v-if="active == 3">
+                <span>所属渠道</span><span>{{ item.policySource }}</span>
+              </p>
+              <p>
+                <span>终止原因</span><span>{{ item.state }}</span>
+              </p>
+              <p>
+                <span>金额/元</span><span class="redword">{{ item.money }}</span>
+              </p>
+              <p>
+                <span>保单状态</span><span>{{ item.contState }}</span>
+              </p>
             </div>
-            <div class="cardConetent">
-              <div class="textList">
-                <p>
-                  <span>保单号</span><span>{{ item.contNo }}</span>
-                </p>
-                <p>
-                  <span>被保人</span><span>{{ item.insuredName }}</span>
-                </p>
-                <p>
-                  <span>被保险人</span><span>{{ item.appntName }}</span>
-                </p>
-                <p v-if="active == 3">
-                  <span>转账银行</span><span>{{ item.bankName }}</span>
-                </p>
-                <p v-if="active == 3">
-                  <span>转账帐号</span><span>{{ item.accNo }}</span>
-                </p>
-                <p>
-                  <span>应交日</span><span>{{ item.payToDate }}</span>
-                </p>
-                <p v-if="active != 3">
-                  <span>归属指标</span><span>{{ item.rnewIndex }}</span>
-                </p>
-                <p v-if="active == 3">
-                  <span>所属渠道</span><span>{{ item.policySource }}</span>
-                </p>
-                <p>
-                  <span>终止原因</span><span>{{ item.contState }}</span>
-                </p>
-                <p>
-                  <span>金额/元</span><span class="redword">{{ item.money }}</span>
-                </p>
-              </div>
-              <div class="rightState">
-                <button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item.contNo)">查看详情</button>
-              </div>
+            <div class="rightState">
+              <button :class="[active == 3 ? 'rightStateButton2' : 'rightStateButton']" @click="goPolicyDetail(item)">查看详情</button>
             </div>
           </div>
+        </div>
         <!-- </van-list> -->
       </div>
     </div>
@@ -119,38 +125,42 @@ export default {
       findValue: '', // 上面搜索框的value
       active: '', // 四个选项卡的v-model
       policyListDTOList: [], // 卡片列表内容
-      calendarValue:'',
-      calendarShow:false,
-      currentDate:new Date(),
+      calendarValue: '',
+      calendarShow: false,
+      currentDate: new Date(),
       minDate: '',
       maxDate: '',
       params: {
-        contNo: '', // 保单号
-        idNo: '', // 身份证号
-        payToDate: '', // 时间
-        state: '' // 状态
+        payDate: '', // 必传扣款日
+        // contNo: '', // 保单号
+        // idNo: '', // 身份证号
+        // payToDate: '', // 时间
+        state: '', // 状态
+        otherNo: '' ,// 搜索条件
+        // userModel: {
+        //   id: 'Y0000001'
+        // }
       }
     }
   },
   created() {},
   mounted() {
-    let aaa = new Date().getMonth()+1
+    let aaa = new Date().getMonth() + 1
     let bbb = aaa - 3
     let ccc = aaa + 1
-    this.minDate = new Date(2022,bbb,0)
-    this.maxDate = new Date(2022,ccc,0)
-    console.log(this.minDate,1111)
+    this.minDate = new Date(2022, bbb, 0)
+    this.maxDate = new Date(2022, ccc, 0)
+    console.log(this.minDate, 1111)
     let yearNum = new Date().getFullYear()
-      let monthNum = new Date().getMonth()+1
-      this.calendarValue = yearNum+'-'+monthNum
+    let monthNum = new Date().getMonth() + 1
+    this.calendarValue = yearNum + '-' + monthNum
     this.getYBRenewalsList()
   },
   methods: {
     // 上方关键词搜索按钮
     keywordSearch(value) {
       console.log('点击搜索了')
-      this.params.idNo = value
-      this.params.contNo = value
+      this.params.otherNo = value
       this.getYBRenewalsList()
     },
     getYBRenewalsList() {
@@ -167,32 +177,33 @@ export default {
     },
     // (查看详情)按钮跳转
     goPolicyDetail(data) {
-      console.log(data)
+      console.log(data, '我是date')
+
       this.$jump({
         flag: 'h5',
         extra: {
-          url: location.origin + '/#/YB_APP/renewalDetail?policyNo=' + data
+          url: location.origin + '/#/YB_APP/renewalDetail?policyNo='+data.contNo+'&payFlag='+data.payFlag+'&payToDate='+data.payToDate
         },
         routerInfo: {
-          path: '/YB_APP/renewalDetail?policyNo=' + data
+          path: `/YB_APP/renewalDetail?contNo=${data.contNo}&payFlag=${data.payFlag}+&payToDate=${data.payToDate}`
         }
       })
     },
-    clickCalendar(){
-        this.calendarShow = true
-      },
+    clickCalendar() {
+      this.calendarShow = true
+    },
     handleCurrentDateCancel() {
-        this.calendarShow = false
-      },
+      this.calendarShow = false
+    },
     handleCurrentDateConfirm(e) {
-        this.calendarShow = false
-        // let titleTime = utils.formatDate(e, 'yyyy-MM')
-        // this.calendarValue = utils.formatDate(e, 'MM-dd')
-        let yearNum = utils.formatDate(e, 'yyyy')
-        let monthNum = utils.formatDate(e, 'MM')
-        this.calendarValue = yearNum+'-'+monthNum
-        // this.getYBRenewalsList()
-      },
+      this.calendarShow = false
+      // let titleTime = utils.formatDate(e, 'yyyy-MM')
+      // this.calendarValue = utils.formatDate(e, 'MM-dd')
+      let yearNum = utils.formatDate(e, 'yyyy')
+      let monthNum = utils.formatDate(e, 'MM')
+      this.calendarValue = yearNum + '-' + monthNum
+      // this.getYBRenewalsList()
+    }
   },
   watch: {
     active: {
@@ -205,7 +216,7 @@ export default {
     calendarValue: {
       deep: true,
       handler(newvalue) {
-        this.params.payToDate = newvalue
+        this.params.payDate = newvalue
         this.getYBRenewalsList()
       }
     }
@@ -263,8 +274,7 @@ export default {
   padding: 2px 5px;
   margin-top: 12px;
   line-height: 24px;
-  white-space:nowrap; 
-  
+  white-space: nowrap;
 }
 .beMonthRightSpan {
   margin-right: 5px;
@@ -295,7 +305,7 @@ export default {
 }
 .cardList2 {
   // height: 244px;
-  height: 300px;
+  // height: 300px;
   width: 96%;
   border-radius: 12px;
   background-color: white;
@@ -330,8 +340,7 @@ export default {
   // margin-top: 113px;
   margin-left: 4px;
   font-size: 12px;
-  align-self:flex-end;
-
+  align-self: flex-end;
 }
 .rightStateButton2 {
   height: 30px;
@@ -341,11 +350,10 @@ export default {
   border-radius: 30px;
   background-color: white;
   // margin-top: 57px;
-  margin-bottom:14px;
+  margin-bottom: 14px;
   margin-left: 4px;
   font-size: 12px;
-  align-self:flex-end;
-
+  align-self: flex-end;
 }
 .cardListText {
   line-height: 34px;
@@ -375,6 +383,8 @@ export default {
   display: block;
   // float:left;
   width: 50px;
+  overflow: hidden;
+  white-space: nowrap;
   // background-color: blueviolet;
   color: #373737;
 }