续保列表与详情页面效果细节调整

src/views/ebiz/healthInsuranceRenewal/detail.vue

@@ -9,15 +9,32 @@
     <van-cell title="代理人" value="李晓娟" />
     <van-cell title="代理人工号" value="1534456456" />
     <van-collapse v-model="activeName1">
-      <van-collapse-item title="续保意见" name="1">
-        <div>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
+      <van-collapse-item name="1">
+        <template #title>
+          <div style="display: flex;width: 100%;justify-content: space-between">
+            <span style="width: 33%;">续保意见</span>
+            <p style="display: inline-block;width: 65%;overflow:hidden;text-overflow: ellipsis;color: #969799;white-space: nowrap;">不同的人，为你做同一件事，你会感到天壤之别。因为我们在意的，往往不是人做的事，而只是做事的人</p></div>
+        </template>
+        <div>不同的人，为你做同一件事，你会感到天壤之别。因为我们在意的，往往不是人做的事，而只是做事的人</div>
       </van-collapse-item>
     </van-collapse>
     <van-collapse v-model="activeName2">
-      <van-collapse-item title="未续保原因" name="1">
-        <div>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</div>
+      <van-collapse-item name="1">
+        <template #title>
+          <div style="display: flex;width: 100%;justify-content: space-between">
+            <span style="width: 33%;">未续保原因</span>
+            <p style="display: inline-block;width: 44%;overflow:hidden;text-overflow: ellipsis;color: #969799;white-space: nowrap;">{{dataInfo.aaa}}</p>
+            <van-button type="danger" round size="mini" @click="dialogshow = true" style="margin-right: 10px;">编辑</van-button>
+          </div>
+        </template>
+        <div>{{dataInfo.aaa}}</div>
       </van-collapse-item>
     </van-collapse>
+    <van-dialog v-model="dialogshow" title="未续保原因" show-cancel-button @confirm="dialogConfirm" @cancel="dialogCancel">
+      <div style="border: 1px solid #eee;margin: 0px 15px 5px 15px;" class="dialogtextarea">
+        <van-field v-model="message" rows="3" autosize label="留言" type="textarea" maxlength="200" placeholder="请输入" show-word-limit/>
+      </div>
+    </van-dialog>
   </div>
 </template>
 
@@ -31,9 +48,13 @@
     },
     data() {
       return {
-        dataInfo:{},
+        dataInfo:{
+          aaa:'靠山山会倒，靠人人会跑，只有自己最可靠.人要接受自己的有限性，我们只能做我们认为对的事情，然后接受它的事与愿违'
+        },
         activeName1:[],
-        activeName2:[]
+        activeName2:[],
+        dialogshow: false,
+        message:''
       }
     },
     created() {
@@ -43,7 +64,14 @@
 
     },
     methods:{
-
+      dialogConfirm(){
+        this.dataInfo.aaa = this.message
+        this.message = ''
+      },
+      dialogCancel(){
+        this.message = ''
+        this.dialogshow = false
+      }
     }
   }
 </script>
@@ -58,4 +86,18 @@
   /deep/ .van-cell__value {
     text-align: left !important;
   }
+  /deep/ .van-collapse-item__content{
+    word-break: break-word;
+  }
+  /deep/ .van-collapse-item{
+    width: 100%;
+    .van-cell__title{
+      width: calc(100% - 30px;);
+    }
+  }
+  .dialogtextarea{
+    /deep/ .van-cell__title{
+      display: none;
+    }
+  }
 </style>

src/views/ebiz/healthInsuranceRenewal/list.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="sale-list-container pb50">
-    <van-search placeholder="请选择客户经理姓名" v-model="searchName" @change="searchList" @keyup.enter="searchList" />
+    <van-search placeholder="请选择客户经理姓名" v-model="searchName" show-action @change="searchList" @keyup.enter="searchList">
+      <template #action>
+        <div style="display: flex;" @click="openshowDataPicker"><van-icon name="notes-o" size="24"/></div>
+      </template>
+    </van-search>
     <van-sticky>
       <van-tabs :line-width="45" v-model="active" @change="tabChange" sticky>
         <van-tab name="uncommit" title="未续保"></van-tab>
@@ -36,11 +40,13 @@
         <div class="fs17 mt40">暂无数据</div>
       </div>
     </van-list>
-  </div>
+    <van-popup v-model="showDataPicker" position="bottom">
+      <van-datetime-picker type="year-month" v-model="currentDate" title="选择日期" @confirm="onConfirmDate" @cancel="showDataPicker = false" :min-date="minDate" :max-date="maxDate"/>
+    </van-popup>  </div>
 </template>
 
 <script>
-import { Search, Tabs, Tab, List, Tag, Sticky, Field } from 'vant'
+import { Search, Tabs, Tab, List, Tag, Sticky, Field, Icon } from 'vant'
 
 export default {
   name: 'saleList',
@@ -52,6 +58,7 @@ export default {
     [List.name]: List,
     [Tag.name]: Tag,
     [Sticky.name]: Sticky,
+    [Icon.name]: Icon,
   },
   data() {
     return {
@@ -72,6 +79,10 @@ export default {
       error: false,
       finishedText: '没有更多了',
       pageSize: 5,
+      showDataPicker:false,
+      minDate: new Date(2000, 0),
+      maxDate: new Date(2100, 12),
+      currentDate: new Date(),
     }
   },
   mounted() {
@@ -109,6 +120,7 @@ export default {
       //   }
       // })
     },
+    //切换
     tabChange(name) {
       this.currentPage = 1
       this.active = name
@@ -117,6 +129,7 @@ export default {
       this.finishedText = '正在加载...'
       this.getOrderList()
     },
+    //搜索
     searchList() {
       this.currentPage = 1
       this.listData = []
@@ -132,6 +145,23 @@ export default {
           contNo: item.contNo
         }
       })
+    },
+    //打开日期选择
+    openshowDataPicker(){
+      this.currentDate = new Date()
+      this.showDataPicker = true
+    },
+    //日期选择
+    onConfirmDate(value){
+      let aaa = new Date(value)
+      let thisYear = aaa.getFullYear()
+      let thisMonth = aaa.getMonth()+1
+      if(thisMonth < 10){
+        thisMonth = '0'+thisMonth
+      }
+      this.currentDate = thisYear + '-' + thisMonth
+      console.log(this.currentDate)
+      this.showDataPicker = false
     }
   }
 }