From 4942b0f8d2528d0bbf40b2bf3fa6e0f12fb9ee41 Mon Sep 17 00:00:00 2001
From: mengxiaolong <meng.xiaolong@ebiz-digits.com>
Date: Wed, 12 Aug 2020 14:59:00 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F,=20=E8=B0=83=E8=AF=95=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ebiz/renewalManage/renewalManage.js |   8 +-
 src/views/ebiz/renewalManage/Detail.vue     | 156 +++++++++++---------
 src/views/ebiz/renewalManage/List.vue       | 154 ++++++++-----------
 3 files changed, 154 insertions(+), 164 deletions(-)

diff --git a/src/api/ebiz/renewalManage/renewalManage.js b/src/api/ebiz/renewalManage/renewalManage.js
index 91efe9624..489b5f755 100644
--- a/src/api/ebiz/renewalManage/renewalManage.js
+++ b/src/api/ebiz/renewalManage/renewalManage.js
@@ -4,7 +4,7 @@ import getUrl from '@/assets/js/utils/get-url'
 //获取续期列表
 export function getList(data) {
   return request({
-    url: getUrl('/renewal/getRenewalList', 0), //0=》mock数据 1=》正式数据
+    url: getUrl('/renewal/renewal/getRenewalList', 1), //0=》mock数据 1=》正式数据
     method: 'post',
     data
   })
@@ -13,7 +13,7 @@ export function getList(data) {
 //获取续期扣款详情
 export function getDetail(data) {
   return request({
-    url: getUrl('/renewal/getRenewalDetail', 0), //0=》mock数据 1=》正式数据
+    url: getUrl('/renewal/renewal/getRenewalDetail', 1), //0=》mock数据 1=》正式数据
     method: 'post',
     data
   })
@@ -22,7 +22,7 @@ export function getDetail(data) {
 //获取短信模板
 export function getMsg(data) {
   return request({
-    url: getUrl('/renewal/msgTemplate', 0),
+    url: getUrl('/renewal/renewal/msgTemplate', 1),
     method: 'post',
     data
   })
@@ -31,7 +31,7 @@ export function getMsg(data) {
 //发送短信
 export function sendMsg(data) {
   return request({
-    url: getUrl('/renewal/sendSms', 0),
+    url: getUrl('/renewal/renewal/sendSms', 1),
     method: 'post',
     data
   })
diff --git a/src/views/ebiz/renewalManage/Detail.vue b/src/views/ebiz/renewalManage/Detail.vue
index 5087d8b6c..9aeb68bbc 100644
--- a/src/views/ebiz/renewalManage/Detail.vue
+++ b/src/views/ebiz/renewalManage/Detail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="detail-container pl5 pr5">
+  <div class="detail-container">
     <div>
       <div v-if="renewalDTO.deductionStatus == '0'" class="status">
         <img src="@/assets/images/renewalManage/u51770.png" alt="" />
@@ -14,58 +14,75 @@
         <div>续期扣款失败</div>
       </div>
     </div>
-    <van-cell-group>
-      <van-cell title="保单号" :value="renewalDTO.contNo" />
-      <van-cell title="产品名称" :value="renewalDTO.riskName" />
-      <van-cell title="投保人" :value="renewalDTO.applicant" />
-      <van-cell title="金额" :value="renewalDTO.duePayMoney" />
-      <van-cell title="账号" :value="renewalDTO.accountNo" />
-      <van-cell title="缴费次数" :value="renewalDTO.currentPeriod" />
-      <van-cell title="扣款日" :value="renewalDTO.duePayDate" />
-    </van-cell-group>
-    <div class="flex justify-content-s bottom-btn">
-      <div>
-        <img :src="$assetsUrl + 'images/phone.png'" @click="callSystem(renewalDTO.receiveMobile)" width="24" height="23" class="ml10 mr10" />
-        <span class="mt8 fs14">拨打电话</span>
+    <div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">保单号</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
       </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">产品名称</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">投保人</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">金额</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">账号</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">缴费次数</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+      <div class="cell">
+        <div class="wrapper">
+          <div class="cellLeft">扣款日</div>
+          <div class="cellRight">xxxxx</div>
+        </div>
+      </div>
+    </div>
+    <div class="phone">
       <div>
-        <img :src="$assetsUrl + 'images/ms.png'" @click="sendMsg" width="24" height="23" class="ml10 mr10" />
-        <span class="mt8 fs14">发送短信</span>
+        <van-icon name="phone" class="phoneIcon" />
+        <span class="mt8 fs14">拨打电话</span>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { Cell, CellGroup } from 'vant'
-// import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
+import { Cell, CellGroup, Icon } from 'vant'
 import { getDetail } from '@/api/ebiz/renewalManage/renewalManage'
 export default {
   name: 'renewalDetail',
   components: {
     [Cell.name]: Cell,
-    [CellGroup.name]: CellGroup
+    [CellGroup.name]: CellGroup,
+    [Icon.name]: Icon
   },
   data() {
     return {
       renewalDTO: {}, //续期保单详情
-      contNo: '' //保单号
-      //   renewalDTO: {
-      //     deductionStatus: '', //扣款状态
-      //     contNo: '6200987623439759',
-      //     riskName: '重大疾病保险',
-      //     duePayMoney: '2888.00',
-      //     currentPeriod: '2',
-      //     duePayDate: '应缴费日期',
-      //     applicant: '李四',
-      //     failReason: '扣款金额不足',
-      //     accountNo: '1233465768686',
-      //     receiveMobile: '13700020000' //客户电话号
-      //   } //续期保单详情
+      contNo: ''
     }
   },
-  created() {
-    document.body.style.backgroundColor = '#fff'
-  },
+  created() {},
   mounted() {
     this.getDetail()
     this.contNo = this.$route.query.contNo
@@ -76,9 +93,10 @@ export default {
   },
   methods: {
     async getDetail() {
-      getDetail({ contNo: '6200987623439759' }).then(res => {
-        // getDetail({ contNo: this.contNo }).then(res => {
+      let contNo = this.$route.query.contNo
+      getDetail({ contNo: contNo, payToDate: '2020-07-22', payFlag: '1' }).then(res => {
         if (res.result == '0') {
+          console.log(res)
           this.renewalDTO = res.content
         }
       })
@@ -90,48 +108,44 @@ export default {
         system: 'tel',
         number: value
       })
-    },
-
-    //发送短信
-    sendMsg() {
-      // let param = {
-      //   deductionStatus: '',
-      //   agentName: '',
-      //   contNo: '',
-      //   riskName: '',
-      //   accountNo: '',
-      //   duePayMoney: '',
-      //   failReason: ''
-      // }
-      // param = this.renewalDTO
-      this.$store.commit('updateRenewalMsgParam', this.renewalDTO)
-      this.$jump({
-        flag: 'h5',
-        extra: {
-          url: location.origin + `/#/renewalManage/msgTemplate`
-        },
-        routerInfo: { path: `/renewalManage/msgTemplate` }
-      })
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-.detail-container > div:first-child {
-  text-align: center;
-  .status {
-    margin: 40px 0;
-    div {
-      margin-top: 10px;
-      font-weight: bold;
-    }
-  }
+.detail-container {
+  position: relative;
+  height: 100vh;
+  background-color: #fff;
 }
-.justify-content-s > div {
+
+.cell {
+  padding: 0 1em;
+}
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #d7d7d7;
+  padding: 1em 0;
+}
+
+.phoneIcon {
+  font-size: 35px;
+  color: #1296db;
+}
+
+.phone {
+  position: absolute;
+  bottom: 70px;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.phone > div {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin: 20px 0;
-  width: 50%;
 }
 </style>
diff --git a/src/views/ebiz/renewalManage/List.vue b/src/views/ebiz/renewalManage/List.vue
index d36ec8ca9..7a87d2ddb 100644
--- a/src/views/ebiz/renewalManage/List.vue
+++ b/src/views/ebiz/renewalManage/List.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="renewal-manage bg-white">
-    <div v-if="!isShow">
+    <div>
       <van-sticky>
-        <!-- <van-field v-model="searchVal" label="保单号/投保人" placeholder="请输入" sticky /> -->
         <div class="list-header">
           <van-search placeholder="请输入保单号/投保人" v-model="searchVal" @search="search" />
         </div>
@@ -15,46 +14,43 @@
           type="year-month"
           :flag="true"
         ></FieldDatePicter>
-        <van-tabs v-model="active" sticky @change="tabChange">
-          <van-tab title="待扣款" name="wait"></van-tab>
-          <van-tab title="扣款成功" name="success"></van-tab>
-          <van-tab title="扣款失败" name="fail"></van-tab>
+        <van-tabs v-model="active" sticky @change="tabChange" class="changeTab">
+          <van-tab title="待扣款" :name="0"></van-tab>
+          <van-tab title="扣款成功" :name="1"></van-tab>
+          <van-tab title="扣款失败" :name="2"></van-tab>
+          <van-tab title="正在扣款" :name="3"></van-tab>
         </van-tabs>
       </van-sticky>
-      <div class="list-container fs12 pb10 pt10 pl20 pr20" v-for="(item, index) in searchList" :key="index" @click="goDetail(item)">
+      <div class="list-container fs12 pb10 pt10 pl20 pr20" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
         <div class="flex justify-content-s">
           <div>
             <span>保单号：</span><span>{{ item.contNo }}</span>
           </div>
           <div>
-            <span>金额：</span><span class="green">{{ item.duePayMoney }}</span>
+            <span>金额：</span><span class="green">{{ item.money }}</span>
           </div>
         </div>
         <div>
-          投保人：<span>{{ item.applicant }}</span>
+          投保人：<span>{{ item.appntName }}</span>
         </div>
         <div>
-          被保人：<span>{{ item.insured }}</span>
+          被保人：<span>{{ item.insuredName }}</span>
         </div>
         <div>
-          扣款日：<span>{{ item.duePayDate }}</span>
+          扣款日：<span>{{ item.payToDate }}</span>
         </div>
       </div>
-      <div v-if="searchList.length == 0" class="list  text-center">
+      <div v-if="list.length === 0" class="list  text-center">
         <img :src="src" />
         <div class="mt20">暂无续期保单</div>
       </div>
     </div>
-    <div v-else class="list  text-center">
-      <img :src="src" />
-      <div class="mt20" v-if="errMessage != ''">{{ errMessage }}</div>
-    </div>
   </div>
 </template>
 <script>
-import { Sticky, Tabs, Tab, Col, Row, Search, Field, Cell } from 'vant'
+import { Sticky, Tabs, Tab, Col, Row, Search, Field } from 'vant'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
-import { getList, getDetail } from '@/api/ebiz/renewalManage/renewalManage'
+import { getList } from '@/api/ebiz/renewalManage/renewalManage'
 import formatDate from '@/assets/js/utils/date-utils'
 
 export default {
@@ -67,111 +63,82 @@ export default {
     [Row.name]: Row,
     [Search.name]: Search,
     [Sticky.name]: Sticky,
-    [Cell.name]: Cell,
     [FieldDatePicter.name]: FieldDatePicter
   },
   data() {
     return {
-      payDate: formatDate.formatDate(new Date(), 'yyyy-MM'), //扣款日期
-      searchVal: '', //搜索内容
-      // list: [] //列表数据
-      list: [
-        // {
-        //   riskName: '重大疾病保险',
-        //   duePayMoney: '2888.00',
-        //   currentPeriod: '2',
-        //   contNo: '6200987623439788',
-        //   duePayDate: '2020-04-01',
-        //   applicant: '李四',
-        //   insured: '张三',
-        //   failReason: '扣款金额不足',
-        //   accountNo: '1233465768686',
-        //   deductionStatus: '1'
-        // },
-        // {
-        //   riskName: '重大疾病保险',
-        //   duePayMoney: '122888.00',
-        //   currentPeriod: '2',
-        //   contNo: '6200987623439759',
-        //   duePayDate: '2020-04-01',
-        //   applicant: '李四',
-        //   insured: '张三',
-        //   failReason: '扣款金额不足',
-        //   accountNo: '1233465768686',
-        //   deductionStatus: '0'
-        // }
-      ],
-      searchList: [], //搜索列表
-      active: 'wait', //扣款类型 wait-待扣款 success-扣款成功 fail-扣款失败
-      isShow: false, //无数据时显示
+      // 扣款日期
+      payDate: formatDate.formatDate(new Date(), 'yyyy-MM'),
+      // 搜索内容
+      searchVal: '',
+      list: [],
+      searchList: [],
+      active: 'wait',
+      isShow: false,
       maxDate: new Date(),
-      errMessage: '', //错误提示
-      src: this.$assetsUrl + 'images/background.png' //图片路径
+      errMessage: '',
+      src: this.$assetsUrl + 'images/background.png'
     }
   },
-  created() {},
+  created() {
+    // for (let i = 0; i < 10; i++) {
+    //   this.list.push({
+    //     contNo: '6200987623439759',
+    //     riskName: '重大疾病保险',
+    //     money: '2888.00',
+    //     payToDate: '2020-07-20',
+    //     appntName: '李四',
+    //     insuredName: '张三',
+    //     payFlag: '1'
+    //   })
+    // }
+  },
   mounted() {
-    this.getpolicyList() //获取续期保单列表
-    document.body.style.backgroundColor = '#fff'
-    if (this.list.length > 0) {
-      this.searchList = this.NewItems(this.active)
-    }
-  },
-  beforeRouteLeave(to, from, next) {
-    document.body.style.backgroundColor = ''
-    next()
+    this.getpolicyList()
   },
   methods: {
-    //获取续期保单列表
+    // 获取续期保单列表
     async getpolicyList() {
-      let param = { deductionMonth: '2019-06' }
-      // let param = { deductionMonth: this.payDate }
-      getList(param).then(res => {
-        this.$toast.clear()
-        if (res.result == 0) {
-          this.list = res.content
-          this.searchList = this.NewItems(this.active)
-          this.isShow = false
-        } else {
-          this.isShow = true
-          this.errMessage = res.resultMessage || '暂无续期保单'
-        }
-      })
+      let param = {
+        payDate: '2020-07',
+        otherNo: '',
+        payFlag: '0'
+      }
+      let result = await getList(param)
+      console.log(result)
     },
-
-    //搜索
+    // 搜索
     search(val) {
       this.searchVal = val
       this.searchList = this.NewItems(this.active)
     },
-    //选定日期
+    // 选定日期
     onDateConfirm(val) {
       this.payDate = val
       this.getpolicyList()
     },
-    //去保单详情页
+    // 去保单详情页
     goDetail(val) {
       this.$jump({
         flag: 'h5',
         extra: {
-          // url: location.origin + `/#/renewalManage/detail`
           url: location.origin + `/#/renewalManage/detail?contNo=${val.contNo}`
         },
         routerInfo: {
-          // path: `/renewalManage/detail`
           path: `/renewalManage/detail?contNo=${val.contNo}`
         }
       })
     },
-    //切换扣款状态tab
+    // 切换扣款状态tab
     tabChange(name) {
-      this.active = name
-      this.searchList = this.NewItems(name)
+      console.log(name)
+      // this.active = name
+      // this.searchList = this.NewItems(name)
     },
-    //筛选排序list
+    // 筛选排序list
     NewItems(name) {
       let _this = this
-      let type = '' //扣款状态标识 0：待扣款；1：扣款成功；2：扣款失败
+      let type = ''
       switch (name) {
         case 'wait':
           type = '0'
@@ -196,19 +163,28 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.changeTab {
+  margin-top: -1px;
+}
+
+/deep/ .mb1 {
+  margin-bottom: 1px !important;
+}
 .renewal-manage {
   background: rgba(236, 249, 255, 1);
+  min-height: 100vh;
   img {
     width: 253px;
     height: 201px;
   }
 }
+
 /deep/ .van-field__label {
   width: 50%;
 }
+
 .list-container {
   border-bottom: 1px solid #ebedf0;
-  border-top: 1px solid #ebedf0;
   .flex {
     div:first-child {
       width: 62%;