卡单第一次提交

src/api/ebiz/cardList/cardList.js

@@ -2,3 +2,39 @@
 
 import request from '@/assets/js/utils/request'
 import getUrl from '@/assets/js/utils/get-url'
+
+// 获取卡单列表
+export function getCardList(data) {
+  return request({
+    url: getUrl('/sale/product/getProList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 获取我的卡单列表
+export function getMyCardList(data) {
+  return request({
+    url: getUrl('/sale/card/getMyCardList', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 获取产品详情
+export function getProductDetails(data) {
+  return request({
+    url: getUrl('/sale/product/getItemDetail', 1),
+    method: 'post',
+    data
+  })
+}
+
+// 获取产品试算详情
+export function getProductInfo(data) {
+  return request({
+    url: getUrl('/sale/product/getDetail', 1),
+    method: 'post',
+    data
+  })
+}

src/config/cardList.js

@@ -1 +1,10 @@
 // 卡单
+let mockBaseUrl = 'http://mock-api.com/9KOlmpzk.mock'
+export default {
+  // 获取产品列表接口
+  '/sale/card/getCardList': mockBaseUrl + '/sale/card/getCardList',
+  // 获取我的卡单接口
+  getMyCardList: mockBaseUrl + '/sale/card/getMyCardList',
+  // 获取卡单详情接口
+  getProductInfo: mockBaseUrl + '/sale/card/getCardDetail'
+}

src/config/urlMap.js

@@ -10,6 +10,7 @@ import my from './my'
 import product from './product'
 import serve from './serve'
 import common from './common'
+import cardList from './cardList'
 const mockBaseUrl = 'http://rap2api.taobao.org/app/mock'
 
 let baseObj = {
@@ -17,6 +18,6 @@ let baseObj = {
   '/user/info': mockBaseUrl + '/223948/info',
   '/user/logout': mockBaseUrl + '/223948/logout'
 }
-Object.assign(baseObj, proposal, sale, customer, my, product, serve, common)
+Object.assign(baseObj, proposal, sale, customer, my, product, serve, common, cardList)
 
 export default baseObj

src/router/ebiz/cardList.js

@@ -1,8 +1,10 @@
 // 卡单路由
 const information = () => import('@/views/ebiz/cardList/information')
 const cardTotreasure = () => import('@/views/ebiz/cardList/CardTotreasure')
-const productDetails = () => import('@/views/ebiz/cardList/ProductDetails')
+const productDetails = () => import('@/views/ebiz/cardList/productDetails')
+const ShowPDF = () => import('@/views/ebiz/cardList/ShowPDF')
 const pay = () => import('@/views/ebiz/cardList/Pay')
+const payResult = () => import('@/views/ebiz/cardList/PayResult')
 const paySuccess = () => import('@/views/ebiz/cardList/PaySuccess')
 const payLoser = () => import('@/views/ebiz/cardList/PayLoser')
 export default [
@@ -25,7 +27,7 @@ export default [
     }
   },
   {
-    path: '/cardList/productDetails',
+    path: '/cardList/productDetails/:productDetailCode',
     name: 'productDetails',
     component: productDetails,
     meta: {
@@ -33,6 +35,15 @@ export default [
       index: 3
     }
   },
+  {
+    path: '/cardList/ShowPDF',
+    name: 'ShowPDF',
+    component: ShowPDF,
+    meta: {
+      title: '国富健康保终身重大疾病保险条款',
+      index: 3
+    }
+  },
   {
     path: '/cardList/pay',
     name: 'pay',
@@ -42,6 +53,15 @@ export default [
       index: 4
     }
   },
+  {
+    path: '/cardList/payResult',
+    name: 'payResult',
+    component: payResult,
+    meta: {
+      title: '支付结果',
+      index: 5
+    }
+  },
   {
     path: '/cardList/paySuccess',
     name: 'paySuccess',
@@ -60,6 +80,4 @@ export default [
       index: 6
     }
   }
- 
-  
 ]

src/views/ebiz/cardList/CardTotreasure.vue

@@ -1,46 +1,47 @@
 <template>
   <div class="card-Insurance">
-    <!-- <div class="header"><img src="../../static/shouye/u1.png" /></div> -->
     <div class="card-Insurance-box">
       <div class="card-Insurance-header">
-        <div class="nav">
-          <van-icon name="arrowLeft" />
-          <p>
-            <span>卡单产品</span>
-          </p>
-        </div>
         <div class="Tab">
           <div class="tab" v-for="(item,index) in arr" :key="index" @click="fnTab(index)">
             <span :class="{ac:iNow==index}">{{item}}</span>
           </div>
         </div>
-
         <div class="show">
           <ul
             class="card-Products"
             :style="(this.iNow==0) ? 'display:block':'display:none' "
-            
           >
-            <li v-for="(itemIcon,index) in list" :key="index" @click="formsD()">
+            <li v-for="(itemIcon,index) in list" :key="index" class="border-gb" @click="formsD(itemIcon.productCode)">
               <div>
-                <img src="../../../assets/images/u10247.png" alt="">
+                  <img :src="itemIcon.productImageUrl" class="ml10"  width="118" height="70" />   
-                          
-                <!-- <img :src="itemIcon.url" alt=""> -->
               </div>
               <div>
-                <p>{{itemIcon.p}}</p>
+                <p>{{itemIcon.productName}}</p>
-                <span>{{itemIcon.span}}</span>
+                <span>{{itemIcon.productDesc}}</span>
               </div>
             </li>
+            <template v-if="list.length === 0">
+              <li class="flex flex-direction-colunm align-items-c">
+                 <img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
+                 <p class="gray text-center pt20">暂无产品</p>
+              </li>
+            </template>
           </ul>
           <ul class="myCard" :style="(this.iNow==1) ? 'display:block':'display:none' ">
-            <li v-for="(itemiNow,index) in tAb" :key="index">
+            <li v-for="(itemiNow,index) in tAb" style=" border: 1px solid #dadada;box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35);" class="mb10 pl15 pt15" :key="index">
               <p>{{itemiNow.h}}</p>
               <span>{{itemiNow.span1}}</span>
               <span>{{itemiNow.span2}}</span>
               <span>{{itemiNow.span3}}</span>
               <span>{{itemiNow.span4}}</span>
             </li>
+             <template v-if="tAb.length === 0">
+              <li class="flex flex-direction-colunm align-items-c">
+                 <img src="@/assets/images/pic_page-non.png" class="mt50" alt="" />
+                 <p class="gray text-center pt20">暂无产品</p>
+              </li>
+            </template>
           </ul>
         </div>
       </div>
@@ -49,22 +50,24 @@
 </template>
 
 <script>
+import icon1 from '@/assets/images/u10247.png'
+import { getCardList } from '@/api/ebiz/cardList/cardList.js'
 export default {
   name: 'kadantoubao.vue',
   data() {
     return {
       arr: ['产品列表', '我的卡单'],
       list: [
-        {
+        // {
-         
+        //   headImgUrl: icon1,
-          p: '学生平安保险（小学，初中）',
+        //   p: '学生平安保险（小学，初中）',
-          span: '保险费地，为孩子提供全方位的风险保障'
+        //   span: '保险费地，为孩子提供全方位的风险保障'
-        },
+        // },
-        {
+        // {
-          
+        //   headImgUrl: icon1,
-          p: '学生平安保险（高中，高等教育）',
+        //   p: '学生平安保险（高中，高等教育）',
-          span: '保险费地，为孩子提供全方位的风险保障'
+        //   span: '保险费地，为孩子提供全方位的风险保障'
-        }
+        // }
       ],
       iNow: 0,
       tAb: [
@@ -92,32 +95,97 @@ export default {
       ]
     }
   },
+  created() {
+    this.getLists()
+  },
+  mounted() {
+    document.body.style.backgroundColor = '#fff'
+  },
   methods: {
     fnTab(index) {
       this.iNow = index
       console.log(this.iNow)
     },
-    formsD() {
+    formsD(productCode) {
-      this.$router.push('/cardList/productDetails')
+      localStorage.productDetailCode = productCode
+      //跳转到详情页
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + `/#/cardList/productDetails/${productCode}`
+        },
+        routerInfo: {
+          path: `/cardList/productDetails/${productCode}`
+        }
+      })
+    },
+    // getLists: function() {
+    //   var self = this
+    //   // 产品列表
+    //   getCardList({
+    //     type: 'app'
+    //   })
+    //     .then(res => {
+    //       console.log(res)
+    //       // if (res.result == 0) {
+    //       //   self.navList = res.productTypeList
+    //       //   window.localStorage.setItem('productList', JSON.stringify(res.productList))
+    //       //   let productList = window.localStorage.getItem('productList')
+    //       //   var resu = JSON.parse(productList).filter(function(obj) {
+    //       //     return obj.productType == '01'
+    //       //   })
+    //       //   self.dataList = resu
+    //       // } else {
+    //       //   Toast.fail(res.resultMessage)
+    //       // }
+    //     })
+    //     .then(function(err) {
+    //       console.log(err)
+    //     })
+    // }
+    getLists() {
+      // 获取卡单列表
+      let data = {
+        type: 'appCard'
+      }
+      getCardList(data)
+        .then(res => {
+          console.log('res', res)
+           if (res.result == 0) {
+            this.list = res.productList
+          } else {
+            Toast.fail(res.resultMessage)
+          }
+        })
+        .catch(err => {
+          console.log("errerr", err)
+        })
     }
   }
 }
 </script>
 
 <style scoped>
-.myCardl {
+/* .myCardl {
   width: 100%;
   display: flex;
   flex-direction: column;
+} */
+.product-list-default-bg {
+  left: 50%;
+  transform: translateX(-50%);
 }
 .myCard li {
   display: flex;
   flex-direction: column;
   width: 360px;
   height: 124px;
-  border: 1px solid #dadada;
+  /* border: 1px solid #dadada; */
-  padding-left: 15px;
+  /* box-shadow: 0 3px 9px 1px hsla(0, 0%, 80%, 0.35); */
-  padding-top: 15px;
+  margin: 0 auto;
+}
+.myCard li:nth-child(1) {
+  margin-top: 15px;
 }
 .myCard li p {
   font-size: 15px;
@@ -126,10 +194,10 @@ export default {
 .myCard li span {
   font-size: 11px;
   font-family: '微软雅黑';
-    font-weight: 400;
+  font-weight: 400;
-    font-style: normal;
+  font-style: normal;
-    font-size: 12px;
+  font-size: 12px;
-    color: #999999;
+  color: #999999;
 }
 .Tab {
   width: 100%;
@@ -145,7 +213,7 @@ export default {
   justify-content: center;
 }
 
-.card-Products{
+.card-Products {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -155,13 +223,13 @@ export default {
   width: 100%;
   display: flex;
   height: 100px;
-  border: 1px solid #cccccc;
+  /* border-bottom: 1px solid #cccccc; */
 }
 
 .card-Products > li img {
-  width: 117px;
+  /* width: 117px;
   height: 70px;
-  margin-left: 10px;
+  margin-left: 10px; */
 }
 
 .card-Products li div:nth-of-type(1) {
@@ -185,7 +253,7 @@ export default {
 
 .card-Products li > div:nth-of-type(2) span {
   color: #b5b5b5;
-  font-size:11px;
+  font-size: 11px;
 }
 
 .ac {
@@ -198,10 +266,10 @@ export default {
   display: flex;
   align-items: center;
   padding-left: 10px;
-  height:45px;
+  height: 45px;
 }
 
-.card-Insurance{
+.card-Insurance {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -212,7 +280,7 @@ export default {
 }
 
 .card-Insurance-box {
-  width: 95%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
@@ -228,6 +296,6 @@ export default {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-size: 13px;
+  font-size: 14px;
 }
 </style>

src/views/ebiz/cardList/Pay.vue

@@ -1,94 +1,201 @@
 <template>
   <div class="pay">
-    <!-- <van-cell-group> -->
       <div v-if="!isScan">
-        <van-field
+        <van-cell-group>
-        v-model="productName"
+          <van-field
-        clearable
+            v-model="underWriteData.appntName"
-        label="产品名称"
+            clearable
-        class="projuct"
+            label="产品名称"
-      />
+            class="projuct"
-      <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="请输入支付金额" />
+          />
+          <van-field :value="underWriteData.orderAmount == undefined ? '' : `${underWriteData.orderAmount} 元`" clearable label="支付金额" placeholder="请输入支付金额" />
+       </van-cell-group>
       <!-- 银行卡支付开始 -->
-      <van-cell-group>
+
-        <van-field  />
         <div class="money">
           <div>
             <img src="../../../assets/images/u10280.png" alt style="margin-top:-5px;margin-right:10px;" />
             <span class="oi">银行卡支付</span>
           </div>
-          <div class="i">
+          <div class="i mr20">
-            <van-checkbox v-model="checked" style="margin-right:1rem;margin-top:0.2rem;"></van-checkbox>
+            <van-radio-group v-model="radio" class="flex justify-content-fe">
+              <van-radio name="1"></van-radio>
+            </van-radio-group>
           </div>
         </div>
-      </van-cell-group>
-      <!-- </van-radio-group> -->
       <!-- 银行卡支付结束 -->
-      <van-field v-model="userName" type="text" label="账户姓名" placeholder="请输入" required />
-
       <van-cell-group>
-        <van-field v-model="sms" center clearable label="银行卡号" placeholder="请输入" required>
+        <van-field v-model="underWriteData.accountName" label="姓名" name="姓名" placeholder="请输入" v-validate="'required|name'" maxlength="6" clearable required />
-          <van-button slot="button" size="small" class="bankCard mr10 w110 h20" @click="cardScanning('0')" v-no-more-click="1000" type="info">银行卡扫描</van-button>
+        <van-field v-model="underWriteData.cardBookCode" maxlength="19" label="银行卡号" name="银行卡号" placeholder="请输入" required clearable v-validate="'required|bankCard'">
+          <van-button slot="button" size="small" type="danger" round @click="cardScanning('0')">银行卡扫描</van-button>
         </van-field>
-        <!-- <van-button type="danger" size="small"  >银行卡扫描</van-button> -->
+        <van-field
+          :value="underWriteData.bankName"
+          label="开户银行"
+          name="开户银行"
+          placeholder="请输入"
+          v-validate="'required'"
+          readonly
+          @click="focus"
+          right-icon="arrow"
+          data-vv-name="开户银行"
+          required
+        />
       </van-cell-group>
-      <van-field v-model="bankDeposit" type="text" label="开户银行" placeholder="请选择" required />
+      <!-- 第三方支付所需表单 -->
-    
+      <form ref="payForm" :action="formActionUrl" method="post">
-
+        <input name="TransSource" type="hidden" v-model="payParam.TransSource" />
-      <!-- </van-field> -->
+        <input name="TransDate" type="hidden" v-model="payParam.TransDate" />
-    <!-- </van-cell-group> -->
+        <input name="TransTime" type="hidden" v-model="payParam.TransTime" />
-
+        <input name="TransSeq" type="hidden" v-model="payParam.TransSeq" />
-    <van-button type="info" size="large" class="payBtn" @click="Pay()">支付</van-button>
+        <input name="Version" type="hidden" v-model="payParam.Version" />
-    <van-checkbox-group v-model="result" ref="checkboxGroup">
+        <input name="RdSeq" type="hidden" v-model="payParam.RdSeq" />
-  <van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
+        <input name="PaymentCode" type="hidden" v-model="payParam.PaymentCode" />
-</van-checkbox-group>
+        <input name="PayType" type="hidden" v-model="payParam.PayType" />
+        <input name="SettleMode" type="hidden" v-model="payParam.SettleMode" />
+        <input name="ApplyEntity" type="hidden" v-model="payParam.ApplyEntity" />
+        <input name="Cur" type="hidden" v-model="payParam.Cur" />
+        <input name="OurAmount" type="hidden" v-model="payParam.OurAmount" />
+        <input name="FixUser" type="hidden" v-model="payParam.FixUser" />
+        <input name="Insurer" type="hidden" v-model="payParam.Insurer" />
+        <input name="CertType" type="hidden" v-model="payParam.CertType" />
+        <input name="CertNum" type="hidden" v-model="payParam.CertNum" />
+        <input name="OppBank" type="hidden" v-model="payParam.OppBank" />
+        <input name="OppAct" type="hidden" v-model="payParam.OppAct" />
+        <input name="OppActName" type="hidden" v-model="payParam.OppActName" />
+        <input name="CellPhone" type="hidden" v-model="payParam.CellPhone" />
+        <input name="ExpireDate" type="hidden" v-model="payParam.ExpireDate" />
+        <input name="Purpose" type="hidden" v-model="payParam.Purpose" />
+        <input name="Memo" type="hidden" v-model="payParam.Memo" />
+        <input name="Description" type="hidden" v-model="payParam.Description" />
+        <input name="SourceNotecode" type="hidden" v-model="payParam.SourceNotecode" />
+        <input name="ReturnURL" type="hidden" v-model="payParam.ReturnURL" />
+        <input name="NotifyURL" type="hidden" v-model="payParam.NotifyURL" />
+        <input name="SaleChannel" type="hidden" v-model="payParam.SaleChannel" />
+        <input name="ReqReserved1" type="hidden" v-model="payParam.ReqReserved1" />
+        <input name="ReqReserved2" type="hidden" v-model="payParam.ReqReserved2" />
+        <input name="ReqReserved3" type="hidden" v-model="payParam.ReqReserved3" />
+        <input name="ReqReserved4" type="hidden" v-model="payParam.ReqReserved4" />
+        <input name="ReqReserved5" type="hidden" v-model="payParam.ReqReserved5" />
+        <input name="S3Sign" type="hidden" v-model="payParam.S3Sign" />
+      </form>
+      <div class="bg-white bottom-btn">
+        <van-button type="danger" size="large" @click="payMent" v-no-more-click="1000">支付</van-button>
       </div>
-
+      </div>
-<!-- 银行卡扫描按钮 -->
+      <!-- 银行卡扫描按钮 -->
+       <van-popup v-model="isScan" style="height:100vh" position="bottom">
           <BankCardScan :scanShow="isScan" :clear="isClear" @getScanInfo="getBankCardInfo"></BankCardScan>
-
+      </van-popup>
+      <!-- 开户银行选择 -->
+      <van-popup v-model="show" position="bottom" style="height:400px">
+        <van-list>
+          <van-cell v-for="item in bankList" :key="item.code" :title="item.bankName" class="text-center" @click="clickList(item.bankName, item.code)" />
+        </van-list>
+      </van-popup>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { Field } from 'vant'
+import { Field, Checkbox, CheckboxGroup, RadioGroup, Radio, Popup, CellGroup, Button, List, Cell } from 'vant'
-import { Checkbox, CheckboxGroup} from 'vant'
-import { Button } from 'vant'
 Vue.use(Checkbox).use(CheckboxGroup)
 Vue.use(Field)
 Vue.use(Button)
-import { saveInformation, getBankList, getOrderDetail } from '@/api/ebiz/sale/sale'
+import { acceptInsurance, getBankList, underWrite, getOrderDetail } from '@/api/ebiz/sale/sale'
 import BankCardScan from '@/components/ebiz/sale/BankCardScan'
+import config from '@/config'
 export default {
   name: 'pay',
   components: {
-    BankCardScan
+    BankCardScan,
+    [Popup.name]: Popup,
+    [CellGroup.name]: CellGroup,
+    [Field.name]: Field,
+    [List.name]: List,
+    [Cell.name]: Cell,
+    [RadioGroup.name]: RadioGroup,
+    [Radio.name]: Radio
   },
   data() {
     return {
-      productName: '国家安全富兴2.0',   //产品名称
+      // 核保数据
-      paymentAmount: '',               //支付金额
+      underWriteData: {
-      userName: '',                    //账户姓名
+        appntName: '国家安全富兴2.0', //产品名称
-      bankCardNumber: '',              //银行卡号
+        orderAmount: 200, //支付金额
-      bankDeposit: '',                 //开户银行
+        name: '',
-      checked: true,
+        bankCode: '', //银行卡号
-      result:[],
+        bankName: '' //开户银行
-      sms:'',
+      },
-      // 银行卡扫描是否显示
+      radio: '1',
-      isScan: false,
+      result: [],
-      //是否清空
+      isScan: false, //是否显示证件扫描组件
-      isClear: false,
+      isClear: false, //是否清空
+      show: false, // 银行列表弹框
+      bankList: [], // 银行卡列表
+      formActionUrl: config.payUrl, // 支付表单
+      payParam: {
+        TransSource: '', // 对接系统
+        TransDate: '', // 请求日期
+        TransTime: '', // 请求时间
+        TransSeq: '', // 时间戳
+        Version: '', // 版本号
+        RdSeq: '', // 指令流水号
+        PaymentCode: '', // 业务唯一号
+        PayType: '', // 交易类型
+        SettleMode: '', // 支付方式
+        ApplyEntity: '', // 业务发生机构
+        Cur: '', // 币种
+        OurAmount: '', // 金额
+        FixUser: '', // 实名认证标识
+        Insurer: '', // 对接系统
+        CertType: '', // 证件类型
+        CertNum: '', // 证件号码
+        OppBank: '', // 交易方银行
+        OppAct: '', // 交易方账号
+        OppActName: '', // 交易方名称
+        CellPhone: '', // 手机号码
+        ExpireDate: '', // 订单失效时间
+        Purpose: '', // 用途
+        Memo: '', // 备注
+        Description: '', // 描述
+        SourceNotecode: '', // 外部系统业务单据号
+        ReturnURL: '', // 页面跳转同步通知地址
+        NotifyURL: '', // 后台通知地址
+        SaleChannel: '', // 销售渠道
+        ReqReserved1: '', // 备用字段1
+        ReqReserved2: '', // 备用字段2
+        ReqReserved3: '', // 备用字段3
+        ReqReserved4: '', // 备用字段4
+        ReqReserved5: '', // 备用字段5
+        S3Sign: '', // 验签信息
+        tradeState: '' // 状态
+      },
+      gotPayParam: false, // 是否已正确获取支付参数,
+      payStatus: '' // 接口返回的支付状态
     }
   },
+  mounted() {
+    document.body.style.backgroundColor = '#fff'
+    window.appCallBack = this.appCallBack
+    // 获取银行卡
+    this.getBankList()
+    console.log('----保融form.action', config.payUrl)
+    if (localStorage.salelist == '1') {
+      // 第一次支付 调核保获取
+      this.underWrite()
+      this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
+    } else {
+      // 再次支付 调详情 获取信息
+      this.twounderWrite()
+      this.underWriteData = JSON.parse(window.localStorage.getItem('underWriteData'))
+    }
+    console.log('--自核结果--支付信息：', JSON.stringify(this.underWriteData))
+  },
   methods: {
-    Pay() {
-      this.$router.push('/cardList/PaySuccess');
-    },
     //获取身份证扫描信息
     getBankCardInfo(data) {
       this.bankId = data.name
-
       this.$jump({
         flag: 'navigation',
         extra: {
@@ -130,6 +237,170 @@ export default {
         }
       })
     },
+    appCallBack() {
+      // 筛选按钮的点击事件
+      this.$jump({
+        flag: 'navigation',
+        extra: {
+          title: '支付',
+          hiddenRight: '1'
+        }
+      })
+      this.isScan = false
+    },
+    // 获取银行列表的focus
+    focus() {
+      let that = this
+      that.show = true
+    },
+    // 获取银行卡列表
+    getBankList() {
+      let self = this
+      let data = {
+        operateType: 'enter_bank_type'
+      }
+      getBankList(data).then(res => {
+        if (res.result == '0') {
+          console.log('银行卡列表', res.content)
+          self.bankList = res.content
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 选择银行卡
+    clickList(item, bankCode) {
+      console.log('英航卡', item, bankCode)
+      let that = this
+      // that.userInfo.bankName = item
+      // that.userInfo.bankCode = bankCode
+      that.underWriteData.bankName = bankCode
+      that.show = false
+    },
+    // 再次支付
+    twounderWrite() {
+      let _this = this
+      getOrderDetail({ orderNo: window.localStorage.getItem('orderNo') }).then(res => {
+        console.log(res)
+        if (res.result == '0') {
+          this.$toast.clear()
+          console.log(res.orderDTO.orderAccountDTO.bankCode)
+          let underWriteData = {
+            accountName: res.orderDTO.orderAccountDTO.accountName,
+            appntName: res.orderDTO.appntDTO.name,
+            bankCode: _this.typebank[res.orderDTO.orderAccountDTO.bankCode],
+            bankName: res.orderDTO.orderAccountDTO.bankName,
+            cardBookCode: res.orderDTO.orderAccountDTO.cardBookCode,
+            orderAmount: res.orderDTO.orderInfoDTO.orderAmount,
+            orderNo: res.orderDTO.orderAccountDTO.orderNo,
+            result: '',
+            resultMessage: '交易处理成功',
+            uwResult: '02'
+          }
+          window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
+        } else {
+          let underWriteData = {
+            accountName: '',
+            appntName: '',
+            bankCode: '',
+            bankName: '',
+            cardBookCode: '',
+            orderAmount: '',
+            orderNo: '',
+            result: '',
+            resultMessage: '交易处理失败',
+            uwResult: '00'
+          }
+          window.localStorage.setItem('underWriteData', JSON.stringify(underWriteData))
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 获取支付信息
+    underWrite() {
+      let data = {
+        platform: 'app',
+        type: '1',
+        orderDTO: {
+          orderInfoDTO: {
+            orderNo: window.localStorage.getItem('orderNo')
+          }
+        }
+      }
+      underWrite(data).then(res => {
+        if (res.result == '0') {
+          this.$toast.clear()
+          if (res.uwResult == '02') {
+            // window.localStorage.setItem('uwResult', res.uwResult)
+            window.localStorage.setItem('underWriteData', JSON.stringify(res))
+          } else if (res.uwResult == '33') {
+            window.localStorage.setItem('underWriteData', JSON.stringify(res))
+            window.localStorage.setItem('uwResult', res.uwResult)
+            window.localStorage.setItem('resultMessage', res.message)
+          } else {
+            window.localStorage.setItem('uwResult', res.uwResult)
+            window.localStorage.setItem('underWriteData', JSON.stringify(res))
+            // window.localStorage.setItem('resultMessage', res.resultMessage)
+          }
+        } else {
+          this.$toast(res.resultMessage)
+        }
+      })
+    },
+    // 点击支付
+    payMent() {
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        forbidClick: true, // 禁用背景点击
+        loadingType: 'spinner',
+        message: '加载中……'
+      })
+      let that = this
+      let data = {
+        orderNo: window.localStorage.getItem('orderNo')
+      }
+      acceptInsurance(data).then(res => {
+        console.log('----取支付参数结果：', JSON.stringify(res))
+        // res = {'result':'0','resultMessage':'','content':null,'prtNo':'8186270000000008','payStatus':'4','amnt':'63700.00','appntName':'投保人','message':null,'brPayReturnData':{'result':'','resultMessage':'','content':null,'businessId':'1569125393518','businessNo':'8186270000000008','tradeSubType':'COMM','businessType':'SALE','systemType':'GF','money':63700,'businessSubType':'XDCB','thirdType':'0002','thirdName':null,'bankCode':'ABC','epayOrderNo':'1909221209536259999900','companyAccount':null,'tradeState':'TRADING','standardCode':'DEALING','standardMsg':null,'thirdOrderNo':null,'respRemark':null,'tradeTime':'2019-09-22T04:09:53.518+0000','description':'','version':'1','sourceNotecode':'8186270000000008','payType':'MIT01','expireDate':'20191010101010','transSeq':'20190922120953782','transSource':'MIT','applyEntity':'11860000','paymentCode':'8186270000000008','transDate':'20190922','rdSeq':'1909221209536259999900','settleMode':null,'cur':'CNY','transTime':'120953','ourAmount':63700,'fixUser':'1','insurer':'投保人','certType':'0','certNum':'110101199009210011','oppBank':'ABC','oppAct':'6228481200290317812','oppActName':'投保人','cellPhone':null,'purpose':null,'memo':null,'returnURL':'http://139.199.50.151/#/sale/payResult','notifyURL':'http://139.199.50.151:7000/api/v1/epay/epay/payResult','s3Sign':'e3f0581ec6b751337e8eca360a0746bc'}}
+        if (res.result == '0') {
+          // 1成 4支付中 2支付失败 8转批扣(无此情况）
+          this.payStatus = res.payStatus
+
+          if (this.payStatus == '1') {
+            this.$toast({ message: '当前投保单已支付成功，请返回列表页查询', duration: 5000 })
+            return
+          }
+
+          // 支付参数大小写转换
+          let keyMap = {}
+          for (let key in this.payParam) {
+            keyMap[key.toLowerCase()] = key
+          }
+          let paramKey
+          for (let rKey in res.brPayReturnData) {
+            if (keyMap.hasOwnProperty(rKey.toLowerCase())) {
+              paramKey = keyMap[rKey.toLowerCase()]
+              this.payParam[paramKey] = res.brPayReturnData[rKey]
+            }
+          }
+          console.log('----支付参数：this.payParam:', JSON.stringify(this.payParam))
+          this.gotPayParam = true
+          this.$forceUpdate()
+          let thisRef = this
+          this.$nextTick(() => {
+            thisRef.$refs.payForm.submit() // 表单提交，发起支付，跳至收银台
+          })
+
+          window.localStorage.setItem('resMessage', res.resultMessage)
+
+          window.localStorage.setItem('payStatus', res.payStatus)
+          window.localStorage.setItem('payInfo', JSON.stringify(res))
+        } else {
+          that.$toast.clear()
+          that.$toast(res.resultMessage)
+        }
+      })
+    }
   }
 }
 </script>
@@ -139,23 +410,17 @@ export default {
 * {
   box-sizing: border-box;
 }
-.bankCard{
+.oi {
-  border-radius: 10em;
-}
-.oi{
   font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
-    font-weight: 700;
+  font-weight: 700;
-    font-style: normal;
+  font-style: normal;
-    color: #666666;
+  color: #666666;
 }
 .money {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  position: absolute;
-  top: 90px;
-  left: 15px;
   z-index: 100;
   background: white;
   height: 40px;
@@ -175,15 +440,6 @@ export default {
   > div:nth-of-type(2) {
     display: flex;
     align-items: center;
-    // padding-bottom: 15px;
   }
 }
-.payBtn{
-  // margin-top: 10rem;
-  position: fixed;
-  bottom:0;
-}
-.bankCard{
-  padding-bottom:25px;
-}
 </style>

src/views/ebiz/cardList/PaySuccess.vue

@@ -1,30 +1,58 @@
 <template>
   <div class="paySuccess">
-   
+    <template v-if="payStatus == '1'">
-    <div class="paySucc">
+      <div class="paySucc">
-      <van-icon name="passed" size="100px" color="blue"/>
+        <van-icon name="passed" size="100px" color="#1296DB"/>
-      <span>支付成功</span>
+        <span>支付成功</span>
-    </div>
+      </div>
-    <van-cell-group>
+      <van-cell-group>
-      <van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
+        <van-field v-model="productName" clearable label="产品名称" placeholder="国富安全出行2.0" />
-      <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="100.00元" />
+        <van-field v-model="paymentAmount" clearable label="支付金额" placeholder="100.00元" />
-      <van-field v-model="bankCardNumber" clearable label="卡号" placeholder="1297793740298" />
+        <van-field v-model="bankCardNumber" clearable label="卡号" placeholder="1297793740298" />
-    </van-cell-group>
+      </van-cell-group>
+    </template>
+    <template v-else-if="payStatus == '2'">
+      <div class="flex flex-direction-colunm align-items-c pt100">
+       <img src="../../../assets/images/u10608.svg" class="w100 h100" alt="">
+       <p class="mt30">支付失败</p>
+       </div>
+       <div class="bg-white bottom-btn">
+          <van-button type="danger" size="large" class="payBtn">返回首页</van-button>
+       </div>
+    </template>
   </div>
+
 </template>
 
 <script>
-import Vue from 'vue';
+import Vue from 'vue'
-import { Field } from 'vant';
+import { Field } from 'vant'
 
-Vue.use(Field);
+Vue.use(Field)
 export default {
   name: 'paySuccess',
-  data () {
+  data() {
     return {
-      productName: "",
+      payStatus: '2',
-      paymentAmount: "",
+      productName: '',
-      bankCardNumber:""
+      paymentAmount: '',
+      bankCardNumber: '',
+      // 保融收银台返回的支付流水号
+      paySeqNo: '',
+      // 接口返回数据前，不做页面渲染
+      isReady: false,
+      // 是否已重新获取支付状态。（首次进入本页，立即查询支付结果。如果是‘支付中’，两秒后再次（最后一次）再次获取一次支付状态。）
+      isReloaded: false,
+      // 结果原因
+      resMessage: '',
+      // 支付结果
+      payStatus: '',
+      // 支付信息
+      payInfo: {
+        appntName: '', // 投保人
+        prtNo: '', // 投保单号
+        amnt: '' // 支付金额
+      },
     }
   }
 }
@@ -32,20 +60,20 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-.van-field__label span{
+.van-field__label span {
-    font-family: '微软雅黑';
+  font-family: '微软雅黑';
-    font-weight: 400;
+  font-weight: 400;
-    font-style: normal;
+  font-style: normal;
-    font-size: 12px;
+  font-size: 12px;
-    color: #666666;
+  color: #666666;
 }
 a {
   font-size: 16px;
 }
-.van-field__control{
+.van-field__control {
   margin-left: 30px;
 }
-.paySucc{
+.paySucc {
   margin: 0;
   padding: 0;
   display: flex;
@@ -57,5 +85,4 @@ a {
   border-top: 1px solid #ccc;
   border-bottom: 7.5px solid rgb(235, 233, 233);
 }
-
 </style>

src/views/ebiz/cardList/information.vue

@@ -27,10 +27,7 @@
         ref="birthday"
         :maxDate="maxDate"
       > 
-      
-      
       </FieldDatePicter>     
-      
       <van-field
         :value="userInfo.idType | idToText('insuredIdType')"
         v-validate="'required'"
@@ -73,8 +70,6 @@
         @click="toSelect('9')"
       />
       </van-cell-group>
-    <!-- </van-radio-group> -->
-
      <!-- 被保人信息 -->
     <van-cell-group class="mt10">
       <p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">被保人信息</p>
@@ -89,13 +84,13 @@
         @nameChange="nameChange"
         @on-click="selectClick('1','1')"
       ></customer-picker>
-       <select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.sex"></select-radio>
+       <select-radio required :radios="sexRadio" label="性别" name="性别" v-validate="'required'" :value.sync="userInfo.insuredSex"></select-radio>
         <FieldDatePicter
         v-validate="'required'"
         label="出生日期"
         name="出生日期"
         required
-        :value.sync="userInfo.birthday"
+        :value.sync="userInfo.insuredBirthday"
         type="date"
         :flag="true"
         @confirm="onDateConfirm($event, '2')"
@@ -118,19 +113,12 @@
         <van-button v-if="userInfo.idType == 1" slot="button" size="small" type="danger" round @click="selectClick('3')">证件扫描</van-button>
       </van-field>
       </van-cell-group>
-    <!-- </van-radio-group> -->
-
     <!-- 受益人信息 -->
     <van-cell-group class="mt10">
       <p style="border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">受益人信息</p>
         <van-field required v-model="userInfo.bnfType" clearable label="受益人类型"   v-validate="'required'"  style="border-bottom: 1px solid #ebedf0;"/>
       </van-cell-group>
-    <!-- </van-radio-group> -->
-   
-   
-          
       <p style="background:white;border-bottom: 1px solid #ebedf0" class="fs15 fwb pl10 pv12">产品信息</p> 
-     
     <FieldDatePicter
         v-validate="'required'"
         label="指定生效日期"
@@ -141,28 +129,15 @@
         :flag="true"
         @confirm="onDateConfirm($event, '2')"
         ref="birthday"
-        :maxDate="maxDate"
         input-align:right
       >   
-      
-      
       </FieldDatePicter>
-
+   <van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;" class="pl8 pt10 bg-white">
-
-
- 
- 
-   <van-checkbox-group v-model="result" ref="checkboxGroup" style="height:34px;box-sizing:border-box;padding-top:10px;background:white;">
   <van-checkbox name="a" shape="square" icon-size="13px">我已阅读并同意《投保须知》</van-checkbox>
 </van-checkbox-group> 
  
-
+<van-goods-action>
-
+   <van-button type="default" style="width:50%;font-size:14px;height:40px;background:white">总保费:<span style="color:red;font-weight:bold;font-size:18px;font-weight:400;">{{allPrice}}</span>元</van-button>
-   
-   <van-goods-action>
-  
-  
-   <van-button type="default" style="width:50%;font-size:14px;height:40px;">总保费:<span style="color:red;font-weight:bold;font-size:18px;font-weight:400;">{{allPrice}}</span>元</van-button>
    <van-goods-action-button type="danger" text="提交"  @click="nextStep" v-no-more-click="1000" style="border-radius:0em;width:50%;height:40px;" />
 </van-goods-action>
 
@@ -191,7 +166,7 @@
   </div>
 </template>
 <script>
-import { Field, CellGroup, Checkbox,CheckboxGroup, Popup, Picker, Area, RadioGroup, Radio } from 'vant'
+import { Field, CellGroup, Checkbox, CheckboxGroup, Popup, Picker, Area, RadioGroup, Radio } from 'vant'
 import SelectRadio from '@/components/ebiz/SelectRadio'
 import FieldDatePicter from '@/components/ebiz/FieldDatePicter'
 import OccupationPicker from '@/components/ebiz/occipation/OccupationPicker'
@@ -206,19 +181,13 @@ import idNoCheck from '@/assets/js/utils/idNoCheck'
 import beforeDate from '@/assets/js/utils/getBeforeDate.js'
 import { idToData } from './js/verification'
 import { selectComp } from './js/methods'
-import Vue from 'vue';
+import Vue from 'vue'
-import {
+import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
-  GoodsAction,
-  GoodsActionIcon,
-  GoodsActionButton
-} from 'vant';
-
 
 Vue.use(Checkbox).use(CheckboxGroup)
-Vue
+Vue.use(GoodsAction)
-  .use(GoodsAction)
   .use(GoodsActionIcon)
-  .use(GoodsActionButton);
+  .use(GoodsActionButton)
 export default {
   name: 'insuredInfo',
   components: {
@@ -239,9 +208,9 @@ export default {
   data() {
     return {
       isScan: false, //是否显示证件扫描组件
-      allPrice:'100',
+      allPrice: '100',
-       result:[],
+      result: [],
-       checked:true,
+      checked: true,
       sexRadio: [
         {
           label: '男',
@@ -274,12 +243,15 @@ export default {
         name: '', //投保人姓名
         insuredName: '', // 被保人姓名
         sex: '0', //投保人性别
+        insuredSex:'0', //被保人性别
         bnfType: '法定受益人', // 受益人类型
-        bnfSelec:'请选择',
+        bnfSelec: '请选择',
-        birthday: '',
+        birthday: '', //投保人出生日期
+        insuredBirthday:'', //被保人出生日期
         relationToAppnt: '',
         idType: '1', //证件类型
         idNo: '', //证件号码
+        insuredidNo:'', //被保人证件号码
         areaName: '', // 投保人地址
         mobile: '', //移动电话
         stature: '', //身高
@@ -404,13 +376,13 @@ export default {
       if (this.pickerType == '1') {
         this.userInfo.nativeplace = value.id
       } else if (this.pickerType == '2') {
-        //身份证以外的证件类型可以使用长期
+        // //身份证以外的证件类型可以使用长期
-        if (value.id != '1') {
+        // if (value.id != '1') {
-          this.effectiveDateTypeAble = false
+        //   this.effectiveDateTypeAble = false
-        } else {
+        // } else {
-          let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+        //   let age = utilsAge.getAge(this.userInfo.birthday, new Date())
-          this.effectiveDateTypeAble = !(age >= 45)
+        //   this.effectiveDateTypeAble = !(age >= 45)
-        }
+        // }
         this.userInfo.idType = value.id
       } else if (this.pickerType == '3') {
         this.userInfo.degree = value.id
@@ -440,12 +412,12 @@ export default {
               return this.$toast('证件起始日期填写错误')
             }
 
-            // 计算年龄
+            // // 计算年龄
-            if (this.userInfo.idType == '1') {
+            // if (this.userInfo.idType == '1') {
-              let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+            //   let age = utilsAge.getAge(this.userInfo.birthday, new Date())
-              // 长期按钮是否禁用
+            //   // 长期按钮是否禁用
-              this.effectiveDateTypeAble = age <= 45
+            //   this.effectiveDateTypeAble = age <= 45
-            }
+            // }
           }
           break
         case '1':
@@ -502,11 +474,11 @@ export default {
               this.$refs.birthday.date = ''
               return this.$toast('出生日期不晚于当日')
             }
-            //长判断
+            // //长判断
-            if (this.userInfo.idType == '1') {
+            // if (this.userInfo.idType == '1') {
-              let age = utilsAge.getAge(this.userInfo.birthday, new Date())
+            //   let age = utilsAge.getAge(this.userInfo.birthday, new Date())
-              this.effectiveDateTypeAble = !(age >= 45)
+            //   this.effectiveDateTypeAble = !(age >= 45)
-            }
+            // }
           }
           break
       }
@@ -922,7 +894,6 @@ export default {
 }
 </script>
 <style lang="scss">
-
 .insured-info-container {
   /deep/.van-checkbox {
     margin-left: auto;
@@ -931,7 +902,7 @@ export default {
     margin-left: auto;
   }
 }
-.van-checkbox__label{
+.van-checkbox__label {
   font-size: 13px;
 }
 </style>

src/views/ebiz/cardList/js/methods.js

@@ -52,29 +52,58 @@ function closeBtn(that) {
  * @param {*} type 1 投保人 2 被保人
  */
 export function getIdentityInfo(that, data, type) {
-  // 正面
+  if (type == '1') {
-  if (data.name && data.name != '待识别') {
+    // 正面
-    that.userInfo.name = data.name
+    if (data.name && data.name != '待识别') {
-    that.userInfo.idNo = data.idNo
+      that.userInfo.name = data.name
-    that.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
+      that.userInfo.idNo = data.idNo
-    that.userInfo.sex = data.gender == '男' ? '0' : '1'
+      that.userInfo.birthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
+      that.userInfo.sex = data.gender == '男' ? '0' : '1'
+    }
+    // 反面
+    if (data.startDate && data.startDate != '待识别') {
+      that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
+      //that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
+      // 是否为长期身份证
+      if (data.endDate != '长期') {
+        that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
+        // that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
+        that.effectiveDateTypeAble = true
+      } else {
+        // 勾选长期
+        that.userInfo.effectiveDateType = true
+        // 长期按钮不禁用
+        that.effectiveDateTypeAble = false
+        // 证件截止日期不需要校验
+        that.certiexpiredateRequired = false
+      }
+    }
   }
-  // 反面
+  if (type == '2') {
-  if (data.startDate && data.startDate != '待识别') {
+    // 正面
-    that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
+    if (data.name && data.name != '待识别') {
-    //that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
+      that.userInfo.insuredName = data.name
-    // 是否为长期身份证
+      that.userInfo.insuredidNo = data.idNo
-    if (data.endDate != '长期') {
+      that.userInfo.insuredBirthday = `${data.birthYear}-${data.birthMonth}-${data.birthDay}`
-      that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
+      that.userInfo.insuredSex = data.gender == '男' ? '0' : '1'
-      // that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
+    }
-      that.effectiveDateTypeAble = true
+    // 反面
-    } else {
+    if (data.startDate && data.startDate != '待识别') {
-      // 勾选长期
+      that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(5, 2)}-${data.startDate.substr(8, 2)}`
-      that.userInfo.effectiveDateType = true
+      //that.userInfo.certificateValidate = `${data.startDate.substr(0, 4)}-${data.startDate.substr(4, 2)}-${data.startDate.substr(6, 2)}`
-      // 长期按钮不禁用
+      // 是否为长期身份证
-      that.effectiveDateTypeAble = false
+      if (data.endDate != '长期') {
-      // 证件截止日期不需要校验
+        that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(5, 2)}-${data.endDate.substr(8, 2)}`
-      that.certiexpiredateRequired = false
+        // that.userInfo.certiexpiredate = `${data.endDate.substr(0, 4)}-${data.endDate.substr(4, 2)}-${data.endDate.substr(6, 2)}`
+        that.effectiveDateTypeAble = true
+      } else {
+        // 勾选长期
+        that.userInfo.effectiveDateType = true
+        // 长期按钮不禁用
+        that.effectiveDateTypeAble = false
+        // 证件截止日期不需要校验
+        that.certiexpiredateRequired = false
+      }
     }
   }
   that.isScan = false

src/views/ebiz/cardList/productDetails.vue

@@ -1,70 +1,147 @@
 <template>
   <div class="chanpingxiangqing-wxa">
-    
+    <div class="mt10">
-    <div class="header">
+      <img v-for="(items, id) in introductImages" :key="id" :src="items" alt="产品详情" width="100%" />
-      <img src="../../../assets/images/u10211.jpg" />
-      <img src="../../../assets/images/u10213.png" />
-      <img src="../../../assets/images/u10215.png" />
     </div>
-
+    <div class="pb50 pt10">
-    <footer>
+      <van-cell
-      <div>
+      class="product-detail-list-item p10 fs12 fw400 bg-white"
-        <span>保险条款</span>
+      :title="item.name"
-        <a href="javascipt:" to="/cardList/productDetails">查看</a>
+      is-link
+      v-for="(item, index) in docuList"
+      :key="index"
+      @click="goDocu(item.url, item.type, item.name)"
+      />
+    </div>
+      <div class="bottom-area bottom-btn">
+        <van-button type="danger" size="large" @click="gotoInformation">下一步</van-button>
       </div>
-      <van-button type="danger" size="large">下一步</van-button>
-    </footer>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import { Image } from 'vant'
+import icon1 from '@/assets/images/u10211.jpg'
-
+import icon2 from '@/assets/images/u10213.png'
-Vue.use(Image)
+import icon3 from '@/assets/images/u10215.png'
+import { Cell } from 'vant'
+import { getProductDetails, getProductInfo } from '@/api/ebiz/cardList/cardList.js'
 export default {
   name: 'Chanpingxiangqing.vue',
+  components: {
+    [Cell.name]: Cell
+  },
   data() {
-    return {}
+    return {
+      introductImages: [],
+      docuList: []
+    }
+  },
+  created() {
+    let code = this.$route.params.productDetailCode
+    console.log(code)
+    this.getData(code)
+    this.getProductDetail(code)
+  },
+  methods: {
+    goDocu(url, type, name) {
+      let pdfUrl = encodeURIComponent(url)
+      console.log('pdfUrl',pdfUrl)
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          title: name,
+          // url: 'http://47.96.143.111/pdfjs/web/viewer.html?file=' + url //测试代码
+          url: this.$mainUrl + '/pdfjs/web/viewer.html?file=' + pdfUrl
+        }
+      })
+      // 跳转到产品资料详情
+      // 保存url
+      // window.localStorage.setItem('documentInfo', JSON.stringify({ documentUrl: url, documentType: type }))
+      // // 保存文件类型
+      // // 0-图片, 1-pdf, 2-word, 3-excel
+      // window.localStorage.setItem('documentType', type)
+      // this.$jump({
+      //   flag: 'h5',
+      //   extra: {
+      //     url: location.origin + '/#/product/productDocument'
+      //   },
+      //   routerInfo: {
+      //     path: `/product/productDocument`
+      //   }
+      // })
+    },
+    //点击跳转到pdf展示页
+    handleClick(url) {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/cardList/ShowPDF'
+        },
+        routerInfo: {
+          path: '/cardList/ShowPDF'
+        }
+      })
+    },
+    gotoInformation() {
+      this.$jump({
+        flag: 'h5',
+        extra: {
+          url: location.origin + '/#/cardList/information'
+        },
+        routerInfo: {
+          path: '/cardList/information'
+        }
+      })
+    },
+    getProductDetail(code) {
+      // 获取卡单列表
+      let data = {
+        platform: 'app',
+        productCodes: [code],
+        type: '1'
+      }
+      getProductInfo(data)
+        .then(res => {
+          console.log('res', res)
+          // if (res.result == 0) {
+          //   this.list = res.productList
+          // } else {
+          //   Toast.fail(res.resultMessage)
+          // }
+        })
+        .catch(err => {
+          console.log('errerr', err)
+        })
+    },
+    getData(code) {
+      let data = {
+        itemCode: code,
+        platform: 'app'
+      }
+      getProductDetails(data)
+        .then(res => {
+          console.log('res', res)
+          if (res.result == 0) {
+            // 获取产品特色图片
+            this.introductImages = res.productShowInfo.introductImages
+            // 获取产品资料文件
+            this.docuList = res.productShowInfo.documents
+            console.log(this.docuList)
+          } else {
+            Toast.fail(res.resultMessage)
+          }
+        })
+        .catch(err => {
+          console.log('errerr', err)
+        })
+    }
   }
 }
 </script>
 
 <style  lang="scss" scoped>
-* {
-  margin: 0;
-  padding: 0;
-}
 img {
   width: 100%;
 }
-footer {
-  width: 100%;
-
-  display: flex;
-  flex-direction: column;
-}
-footer > div:nth-of-type(1) {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0px 20px;
-  span {
-    font-size: 14px;
-  }
-  a {
-    font-size: 14px;
-  }
-}
-.nav {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding-left: 0.2rem;
-  height: 0.9rem;
-}
-.header{
-margin-top:10px ;
-}
 </style>