贷款-产品介绍

htmldev/loan/src/views/loan/apply/index.vue

@@ -45,15 +45,17 @@
         <div class="value-wrap">
           <input type="tel" placeholder="请输入验证码" v-myBlur v-model.trim="postData.code" @input="funLimitLength">
         </div>
-        <button class="get-code" @click="funGetCode">{{[0, 60].includes(numCount) ? '获取': numCount + '秒'}}</button>
+        <button class="get-code" @click="funGetCode">{{ [0, 60].includes(numCount) ? '获取' : numCount + '秒' }}</button>
       </li>
       <li>
         <label>
           <span v-for="(str, index) in '所在城市：'" :key="index">{{ str }}</span>
         </label>
         <div class="value-wrap" @click="showPicker = true">
-          <p class="value-city" v-show="postData.orderProvince">{{ postData.orderProvince + postData.orderCity +
-            postData.orderDistrict}}</p>
+          <p class="value-city" v-show="postData.orderProvince">{{
+              postData.orderProvince + postData.orderCity +
+              postData.orderDistrict
+            }}</p>
           <p class="value-city init" v-show="!postData.orderProvince">请选择所在城市</p>
           <img src="./image/btn_next@2x.png" alt="">
         </div>
@@ -97,470 +99,467 @@
 </template>
 
 <script>
-  import Flow from './components/flow'
-  import { Popup, Picker, Toast } from 'vant'
-  import { createOrder } from './api'
-  import { getChinaArea, sendSMS, getProductDetail } from '../../../api/common'
-  import { funWxShare } from '../../../utils/wxShareConfig'
+import Flow from './components/flow'
+import { Popup, Picker, Toast } from 'vant'
+import { createOrder } from './api'
+import { getChinaArea, sendSMS, getProductDetail } from '../../../api/common'
+import { funWxShare } from '../../../utils/wxShareConfig'
 
-  const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
-  export default {
-    name: 'apply',
-    components: {
-      Flow,
-      'van-popup': Popup,
-      'van-picker': Picker
+const STRCAPTURE = process.env.API_DOMAIN + '/api/captcha'
+export default {
+  name: 'apply',
+  components: {
+    Flow,
+    'van-popup': Popup,
+    'van-picker': Picker
+  },
+  props: {
+    // 产品ID
+    orderProductId: {
+      type: String,
+      default: ''
     },
-    props: {
-      // 产品ID
-      orderProductId: {
-        type: String,
-        default: ''
+    partnerId: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      postData: {
+        orderUserName: '', // 用户名称
+        orderUserSex: '男',
+        orderUserPhone: '', // 手机号码
+        code: '', // 验证码
+        capture: '',
+        orderPrice: '', // 申请金额
+        orderProvince: '', // 省份
+        orderCity: '', // 城市
+        orderDistrict: '', // 区域
+        orderAddress: '' // 详细地址
       },
-      partnerId: {
-        type: String,
-        default: ''
-      }
-    },
-    data () {
-      return {
-        postData: {
-          orderUserName: '', // 用户名称
-          orderUserSex: '男',
-          orderUserPhone: '', // 手机号码
-          code: '', // 验证码
-          capture: '',
-          orderPrice: '', // 申请金额
-          orderProvince: '', // 省份
-          orderCity: '', // 城市
-          orderDistrict: '', // 区域
-          orderAddress: '' // 详细地址
-        },
-        numCount: 60,
-        arrErrorList: [],
-        strCapture: STRCAPTURE,
-        showPicker: false,
-        columns: [],
-        productInfo: {},
-        timer: null
-      }
-    },
-    computed: {
-      amount: {
-        get () {
-          return this.postData.orderPrice * 1 ? this.postData.orderPrice : ''
-        },
-        set (value) {
-          this.postData.orderPrice = value
-        }
+      numCount: 60,
+      arrErrorList: [],
+      strCapture: STRCAPTURE,
+      showPicker: false,
+      columns: [],
+      productInfo: {},
+      timer: null
+    }
+  },
+  computed: {
+    amount: {
+      get () {
+        return this.postData.orderPrice * 1 ? this.postData.orderPrice : ''
+      },
+      set (value) {
+        this.postData.orderPrice = value
       }
-    },
-    async mounted () {
-      this.funGetChinaArea()
-      this.funGetProductDetail()
-      await this.$nextTick()
-      const textarea = this.$refs.myTextarea
-      if (textarea) {
-        this.handleTextarea(textarea)
+    }
+  },
+  async mounted () {
+    this.funGetChinaArea()
+    this.funGetProductDetail()
+    await this.$nextTick()
+    const textarea = this.$refs.myTextarea
+    if (textarea) {
+      this.handleTextarea(textarea)
+      textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
+      this.$once('hook:beforeDestroy', () => {
         textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
-        this.$once('hook:beforeDestroy', () => {
-          textarea.addEventListener('input', this.handleTextarea(textarea, 1), false)
-        })
+      })
+    }
+  },
+  activated () {
+    if (!this.$route.meta.isUseCache) {
+      this.postData = {
+        orderUserName: '',
+        orderUserSex: '男',
+        orderUserPhone: '',
+        code: '',
+        capture: '',
+        orderPrice: '',
+        orderProvince: '',
+        orderCity: '',
+        orderDistrict: '',
+        orderAddress: ''
       }
-    },
-    activated () {
-      if (!this.$route.meta.isUseCache) {
-        this.postData = {
-          orderUserName: '',
-          orderUserSex: '男',
-          orderUserPhone: '',
-          code: '',
-          capture: '',
-          orderPrice: '',
-          orderProvince: '',
-          orderCity: '',
-          orderDistrict: '',
-          orderAddress: ''
-        }
-        this.numCount = 60
-        this.arrErrorList = []
-        this.showPicker = false
-        this.timer = null
-      } else {
-        if (this.timer) {
-          clearInterval(this.timer)
-        }
+      this.numCount = 60
+      this.arrErrorList = []
+      this.showPicker = false
+      this.timer = null
+    } else {
+      if (this.timer) {
+        clearInterval(this.timer)
       }
-      this.$nextTick(() => {
-        this.$refreshTitle('家装分期')
+    }
+    this.$route.meta.isUseCache = false
+    funWxShare('驼驼银服', '家里用钱，就找驼驼银服，省心，省力，妥妥的！', location.href, location.protocol + '//api.tuotuoyinfu.com/img/logo.jpg')
+  },
+  methods: {
+    funGetChinaArea () {
+      getChinaArea().then(res => {
+        if (res.status) {
+          this.columns = res.data.filter(province => province.text === '浙江')
+        } else {
+          Toast(res.msg)
+        }
+      }).catch(err => {
+        Toast(err)
       })
-      this.$route.meta.isUseCache = false
-      funWxShare('驼驼银服', '家里用钱，就找驼驼银服，省心，省力，妥妥的！', location.href, location.protocol + '//api.tuotuoyinfu.com/img/logo.jpg')
     },
-    methods: {
-      funGetChinaArea () {
-        getChinaArea().then(res => {
-          if (res.status) {
-            this.columns = res.data.filter(province => province.text === '浙江')
-          } else {
-            Toast(res.msg)
-          }
-        }).catch(err => {
-          Toast(err)
-        })
-      },
-      funGetProductDetail () {
-        getProductDetail(this.orderProductId).then(res => {
-          if (res.status) {
-            this.productInfo = res.data
-            this.$nextTick(() => {
-              this.$refreshTitle(res.data.productName)
-            })
-          }
-        })
-      },
-      handleTextarea (el, auto) {
-        return () => {
-          if (auto) {
-            el.style.height = 'auto'
-          }
-          el.style.height = el.scrollHeight + 'px'
+    funGetProductDetail () {
+      getProductDetail(this.orderProductId).then(res => {
+        if (res.status) {
+          this.productInfo = res.data
+          this.$nextTick(() => {
+            this.$refreshTitle(res.data.productName)
+          })
         }
-      },
-      onConfirm (value) {
-        this.showPicker = false
-        this.$set(this.postData, 'orderProvince', value[0])
-        this.$set(this.postData, 'orderCity', value[1])
-        this.$set(this.postData, 'orderDistrict', value[2])
-      },
-      funLimitLength () {
-        const { orderUserPhone, code } = this.postData
-        this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
-        this.postData.code = code.length > 4 ? code.slice(0, 4) : code
-      },
-      funCutDown () {
-        clearInterval(this.timer)
-        this.timer = setInterval(() => {
-          if (this.numCount === 0) {
-            clearInterval(this.timer)
-            this.numCount = 0
-            return
-          }
-          this.numCount--
-        }, 1000)
-      },
-      // 获取验证码
-      funGetCode () {
-        const numCount = this.numCount
-        const { orderUserPhone, capture } = this.postData
-        if (numCount < 60 && numCount > 0) {
-          return
+      })
+    },
+    handleTextarea (el, auto) {
+      return () => {
+        if (auto) {
+          el.style.height = 'auto'
         }
-        this.numCount = 60
-        if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
-          Toast('请输入手机号码')
+        el.style.height = el.scrollHeight + 'px'
+      }
+    },
+    onConfirm (value) {
+      this.showPicker = false
+      this.$set(this.postData, 'orderProvince', value[0])
+      this.$set(this.postData, 'orderCity', value[1])
+      this.$set(this.postData, 'orderDistrict', value[2])
+    },
+    funLimitLength () {
+      const { orderUserPhone, code } = this.postData
+      this.postData.orderUserPhone = orderUserPhone.length > 11 ? orderUserPhone.slice(0, 11) : orderUserPhone
+      this.postData.code = code.length > 4 ? code.slice(0, 4) : code
+    },
+    funCutDown () {
+      clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        if (this.numCount === 0) {
+          clearInterval(this.timer)
+          this.numCount = 0
           return
         }
+        this.numCount--
+      }, 1000)
+    },
+    // 获取验证码
+    funGetCode () {
+      const numCount = this.numCount
+      const { orderUserPhone, capture } = this.postData
+      if (numCount < 60 && numCount > 0) {
+        return
+      }
+      this.numCount = 60
+      if (!(/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone))) {
+        Toast('请输入手机号码')
+        return
+      }
 
-        // if (!capture) {
-        //   Toast('请输入图片验证码')
-        //   return
-        // }
-        this.funCutDown()
-        sendSMS(orderUserPhone, 0, capture).then(res => {
-          if (res.status) {
-            Toast('发送成功')
-          } else {
-            Toast(res.msg)
-            this.funUpdateCapture()
-            clearInterval(this.timer)
-            this.numCount = 60
-          }
-        }).catch(err => {
-          Toast(err.msg)
+      // if (!capture) {
+      //   Toast('请输入图片验证码')
+      //   return
+      // }
+      this.funCutDown()
+      sendSMS(orderUserPhone, 0, capture).then(res => {
+        if (res.status) {
+          Toast('发送成功')
+        } else {
+          Toast(res.msg)
           this.funUpdateCapture()
           clearInterval(this.timer)
           this.numCount = 60
-        })
-      },
-      verifyData () {
-        const { orderUserName, orderUserSex, orderUserPhone, code, orderProvince, orderCity, orderDistrict, orderAddress, orderPrice } = this.postData
-        this.arrErrorList = []
-        if (!orderUserName) {
-          this.arrErrorList.push('请输入姓名')
-        }
-        if (!orderUserSex) {
-          this.arrErrorList.push('请选择性别')
-        }
-        if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
-          this.arrErrorList.push('请输入手机号码')
-        }
-        if (!(/^\d{4}$/.test(code))) {
-          this.arrErrorList.push('请输入验证码')
-        }
-        if (!orderProvince || !orderCity || !orderDistrict) {
-          this.arrErrorList.push('请选择所在城市')
-        }
-        if (!orderAddress) {
-          this.arrErrorList.push('请输入房产地址')
-        }
-        if (orderPrice * 1 <= 0) {
-          this.arrErrorList.push('请输入需求金额')
         }
-        return this.arrErrorList.length <= 0
-      },
-      funUpdateCapture () {
-        this.strCapture = STRCAPTURE + '?' + new Date().getTime()
-      },
-      funSubmit () {
-        const postData = {
-          orderProductId: this.orderProductId,
-          partnerId: this.partnerId,
-          ...this.postData
-        }
-        delete postData.capture
-        if (!this.verifyData()) {
+      }).catch(err => {
+        Toast(err.msg)
+        this.funUpdateCapture()
+        clearInterval(this.timer)
+        this.numCount = 60
+      })
+    },
+    verifyData () {
+      const { orderUserName, orderUserSex, orderUserPhone, code, orderProvince, orderCity, orderDistrict, orderAddress, orderPrice } = this.postData
+      this.arrErrorList = []
+      if (!orderUserName) {
+        this.arrErrorList.push('请输入姓名')
+      }
+      if (!orderUserSex) {
+        this.arrErrorList.push('请选择性别')
+      }
+      if (!/^1[2|3|4|5|6|7|8|9]\d{9}$/.test(orderUserPhone)) {
+        this.arrErrorList.push('请输入手机号码')
+      }
+      if (!(/^\d{4}$/.test(code))) {
+        this.arrErrorList.push('请输入验证码')
+      }
+      if (!orderProvince || !orderCity || !orderDistrict) {
+        this.arrErrorList.push('请选择所在城市')
+      }
+      if (!orderAddress) {
+        this.arrErrorList.push('请输入房产地址')
+      }
+      if (orderPrice * 1 <= 0) {
+        this.arrErrorList.push('请输入需求金额')
+      }
+      return this.arrErrorList.length <= 0
+    },
+    funUpdateCapture () {
+      this.strCapture = STRCAPTURE + '?' + new Date().getTime()
+    },
+    funSubmit () {
+      const postData = {
+        orderProductId: this.orderProductId,
+        partnerId: this.partnerId,
+        ...this.postData
+      }
+      delete postData.capture
+      if (!this.verifyData()) {
+        Toast({
+          message: this.arrErrorList[0],
+          forbidClick: true
+        })
+        return
+      }
+      const myToast = Toast.loading({
+        message: '提交中...',
+        duration: 1000 * 100,
+        forbidClick: true
+      })
+      createOrder(postData).then(res => {
+        myToast.clear()
+        if (res.status) {
+          const { id } = res.data
           Toast({
-            message: this.arrErrorList[0],
-            forbidClick: true
+            type: 'success',
+            message: '提交成功',
+            forbidClick: true,
+            onClose: () => {
+              this.$router.replace({ path: '/loan/detail/' + id })
+            }
           })
           return
         }
-        const myToast = Toast.loading({
-          message: '提交中...',
-          duration: 1000 * 100,
-          forbidClick: true
-        })
-        createOrder(postData).then(res => {
-          myToast.clear()
-          if (res.status) {
-            const { id } = res.data
-            Toast({
-              type: 'success',
-              message: '提交成功',
-              forbidClick: true,
-              onClose: () => {
-                this.$router.replace({ path: '/loan/detail/' + id })
-              }
-            })
-            return
-          }
-          Toast(res.msg)
-        }).catch(err => {
-          myToast.clear()
-          Toast(err)
-        })
-      }
-    },
-    beforeRouteLeave (to, from, next) {
-      if (['loanPrivacy', 'loanAgreement'].includes(to.name)) {
-        from.meta.isUseCache = true
-      }
-      next()
+        Toast(res.msg)
+      }).catch(err => {
+        myToast.clear()
+        Toast(err)
+      })
+    }
+  },
+  beforeRouteLeave (to, from, next) {
+    if (['loanPrivacy', 'loanAgreement'].includes(to.name)) {
+      from.meta.isUseCache = true
     }
+    next()
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
+.wrapper {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 110px 0 200px;
+  background: #fff;
+}
+
+.goods-cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  display: block;
+  width: 100%;
+  min-height: 147px;
+}
+
+.form-wrap {
+  li {
     position: relative;
     left: 0;
     top: 0;
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    min-height: 100vh;
-    padding: 110px 0 200px;
-    background: #fff;
-  }
-
-  .goods-cover {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    display: block;
-    width: 100%;
-    min-height: 147px;
-  }
-
-  .form-wrap {
-    li {
-      position: relative;
-      left: 0;
-      top: 0;
-      display: flex;
-      align-items: flex-start;
-      width: 327px;
-      padding: 13px 14px;
-      margin-top: 8px;
-      border: 1px solid #E8E8E8;
-      border-radius: 4px;
+    align-items: flex-start;
+    width: 327px;
+    padding: 13px 14px;
+    margin-top: 8px;
+    border: 1px solid #E8E8E8;
+    border-radius: 4px;
 
-      &:nth-of-type(1) {
-        margin-top: 37px;
-      }
+    &:nth-of-type(1) {
+      margin-top: 37px;
     }
+  }
 
-    label {
-      display: flex;
+  label {
+    display: flex;
 
-      span {
-        line-height: 22px;
-        font-size: 16px;
-        font-weight: 500;
-        color: #333;
+    span {
+      line-height: 22px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
 
-        &.label-name:nth-of-type(4),
-        &.label-name:nth-of-type(5),
-        &.label-code:nth-of-type(5), {
-          visibility: hidden;
-        }
+      &.label-name:nth-of-type(4),
+      &.label-name:nth-of-type(5),
+      &.label-code:nth-of-type(5), {
+        visibility: hidden;
       }
     }
+  }
 
-    .value-wrap {
-      flex: 1;
-      display: flex;
-      margin-left: 9px;
-    }
+  .value-wrap {
+    flex: 1;
+    display: flex;
+    margin-left: 9px;
+  }
 
-    .amount-wrap {
-      position: relative;
+  .amount-wrap {
+    position: relative;
+    left: 0;
+    top: 0;
+
+    input {
+      position: absolute;
       left: 0;
       top: 0;
+      z-index: 1;
 
-      input {
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 1;
-
-        &.opacity-0 {
-          opacity: 0;
-        }
-      }
-
-      p {
-        width: 100%;
-        padding-top: 2px;
-        line-height: 20px;
-        font-size: 15px;
-        color: #333;
+      &.opacity-0 {
+        opacity: 0;
       }
     }
 
-    input,
-    textarea {
+    p {
       width: 100%;
-      min-height: 20px;
       padding-top: 2px;
       line-height: 20px;
       font-size: 15px;
       color: #333;
-      word-break: break-all;
-      resize: none;
-      outline: 0 none;
-      overflow: hidden;
-      background: transparent;
-      -webkit-text-fill-color: #333;
-      opacity: 1;
-
-      &::-webkit-input-placeholder {
-        color: #999;
-        -webkit-text-fill-color: #999;
-        opacity: 1;
-      }
     }
+  }
 
-    .value-name {
-      display: flex;
-      width: 100%;
+  input,
+  textarea {
+    width: 100%;
+    min-height: 20px;
+    padding-top: 2px;
+    line-height: 20px;
+    font-size: 15px;
+    color: #333;
+    word-break: break-all;
+    resize: none;
+    outline: 0 none;
+    overflow: hidden;
+    background: transparent;
+    -webkit-text-fill-color: #333;
+    opacity: 1;
+
+    &::-webkit-input-placeholder {
+      color: #999;
+      -webkit-text-fill-color: #999;
+      opacity: 1;
     }
+  }
 
-    .value-gender {
-      display: flex;
+  .value-name {
+    display: flex;
+    width: 100%;
+  }
 
-      p {
-        display: flex;
+  .value-gender {
+    display: flex;
 
-        &:nth-of-type(2) {
-          margin-left: 15px;
-        }
-      }
+    p {
+      display: flex;
 
-      span {
-        margin-left: 4px;
-        line-height: 22px;
-        font-size: 16px;
-        color: #333;
+      &:nth-of-type(2) {
+        margin-left: 15px;
       }
     }
 
-    .value-city {
-      flex: 1;
+    span {
+      margin-left: 4px;
       line-height: 22px;
-      font-size: 15px;
+      font-size: 16px;
       color: #333;
-
-      &.init {
-        color: #999;
-      }
     }
+  }
 
-    img {
-      width: 22px;
-      height: 22px;
-    }
+  .value-city {
+    flex: 1;
+    line-height: 22px;
+    font-size: 15px;
+    color: #333;
 
-    .capture-img {
-      @include vertical-center;
-      right: 14px;
-      z-index: 1;
-      display: block;
-      width: 125px;
-      height: 31px;
-      border-radius: 4px;
-      overflow: hidden;
+    &.init {
+      color: #999;
     }
+  }
 
-    .get-code {
-      @include vertical-center;
-      right: 0;
-      z-index: 1;
-      display: block;
-      min-width: 87px;
-      padding: 6px;
-      line-height: 22px;
-      font-size: 16px;
-      font-weight: 500;
-      color: #C9A585;
-    }
+  img {
+    width: 22px;
+    height: 22px;
   }
 
-  .submit {
-    width: 327px;
-    height: 45px;
-    margin-top: 36px;
+  .capture-img {
+    @include vertical-center;
+    right: 14px;
+    z-index: 1;
+    display: block;
+    width: 125px;
+    height: 31px;
     border-radius: 4px;
-    line-height: 20px;
-    font-size: 14px;
+    overflow: hidden;
+  }
+
+  .get-code {
+    @include vertical-center;
+    right: 0;
+    z-index: 1;
+    display: block;
+    min-width: 87px;
+    padding: 6px;
+    line-height: 22px;
+    font-size: 16px;
     font-weight: 500;
-    color: #fff;
-    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
-    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+    color: #C9A585;
   }
+}
 
-  .explain {
-    display: flex;
-    margin-top: 12px;
+.submit {
+  width: 327px;
+  height: 45px;
+  margin-top: 36px;
+  border-radius: 4px;
+  line-height: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
+  box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
+}
 
-    span,
-    a {
-      line-height: 17px;
-      font-size: 12px;
-      color: #666;
-    }
+.explain {
+  display: flex;
+  margin-top: 12px;
+
+  span,
+  a {
+    line-height: 17px;
+    font-size: 12px;
+    color: #666;
   }
+}
 </style>

htmldev/loan/src/views/loan/explain/components/btnApply.vue

@@ -0,0 +1,35 @@
+<template>
+  <router-link class="btn-apply" :to="{path: '/loan/apply/' + orderProductId + '?partnerId=' + partnerId}">点击预约办理
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'btnApply',
+  props: {
+    // 产品ID
+    orderProductId: {
+      type: String,
+      default: ''
+    },
+    partnerId: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-apply {
+  display: block;
+  width: 196px;
+  height: 45px;
+  border-radius: 4px;
+  line-height: 45px;
+  font-size: 14px;
+  text-align: center;
+  color: #fff;
+  background: #074E96;
+}
+</style>

htmldev/loan/src/views/loan/explain/index.vue

@@ -1,128 +1,93 @@
 <template>
   <div class="wrapper">
-    <div class="footer">
-      <div class="invite-info">
-        <div class="avatar" v-show="partnerImgUrl">
-          <img :src="partnerImgUrl" alt="">
-        </div>
-        <p class="partner-name" v-show="partnerName">{{ partnerName }}</p>
-        <p class="label">邀请您</p>
-      </div>
-      <router-link class="btn-apply" :to="{path: '/loan/apply/' + orderProductId + '?partnerId=' + partnerId}">免费在线申请
-      </router-link>
-    </div>
+    <img class="banner min-h500" src="./image/jiansheyinhang/1@2x.png" alt="">
+    <BtnApply class="m-0" :orderProductId="orderProductId"
+              :partnerId="partnerId"/>
+    <img class="banner min-h300" src="./image/jiansheyinhang/2@2x.png" alt="">
+    <BtnApply class="m-1" :orderProductId="orderProductId"
+              :partnerId="partnerId"/>
+    <img class="banner min-h500" src="./image/jiansheyinhang/3@2x.png" alt="">
+    <BtnApply class="m-2" :orderProductId="orderProductId"
+              :partnerId="partnerId"/>
   </div>
 </template>
 
 <script>
-  import { funWxShare } from '../../../utils/wxShareConfig'
-  import { getProductDetail } from '../../../api/common'
+import BtnApply from './components/btnApply'
+import { funWxShare } from '../../../utils/wxShareConfig'
+import { getProductDetail } from '../../../api/common'
 
-  export default {
-    name: 'explain',
-    props: {
-      // 产品ID
-      orderProductId: {
-        type: String,
-        default: ''
-      },
-      partnerId: {
-        type: String,
-        default: ''
-      },
-      partnerName: {
-        type: String,
-        default: ''
-      },
-      partnerImgUrl: {
-        type: String,
-        default: ''
-      }
+export default {
+  name: 'explain',
+  components: {
+    BtnApply
+  },
+  props: {
+    // 产品ID
+    orderProductId: {
+      type: String,
+      default: ''
     },
-    data () {
-      return {
-        productInfo: {}
-      }
-    },
-    async mounted () {
-      funWxShare('驼驼银服', '家里用钱，就找驼驼银服，省心，省力，妥妥的！', location.href, location.protocol + '//api.tuotuoyinfu.com/img/logo.jpg')
-      await this.$nextTick()
-      this.funGetProductDetail()
-    },
-    methods: {
-      funGetProductDetail () {
-        getProductDetail(this.orderProductId).then(res => {
-          if (res.status) {
-            this.productInfo = res.data
-            this.$nextTick(() => {
-              this.$refreshTitle(res.data.productName)
-            })
-          }
-        })
-      }
+    partnerId: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      productInfo: {}
+    }
+  },
+  async mounted () {
+    funWxShare('驼驼银服', '家里用钱，就找驼驼银服，省心，省力，妥妥的！', location.href, location.protocol + '//api.tuotuoyinfu.com/img/logo.jpg')
+    await this.$nextTick()
+    this.funGetProductDetail()
+  },
+  methods: {
+    funGetProductDetail () {
+      getProductDetail(this.orderProductId).then(res => {
+        if (res.status) {
+          this.productInfo = res.data
+          this.$nextTick(() => {
+            this.$refreshTitle(res.data.productName)
+          })
+        }
+      })
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .wrapper {
-    width: 100%;
-    min-height: 100vh;
-    padding-bottom: 138px;
-  }
+.wrapper {
+  width: 100%;
+  min-height: 100vh;
+  padding-bottom: 138px;
+  background: #fff;
+}
 
-  .footer {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 99;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 22px 0 24px;
-    background: #fff;
-  }
+.min-h300 {
+  min-height: 300px;
+}
 
-  .invite-info {
-    display: flex;
-    align-items: center;
-    width: 327px;
-  }
+.min-h500 {
+  min-height: 500px;
+}
 
-  .avatar {
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    overflow: hidden;
+.banner {
+  display: block;
+  width: 100%;
+}
 
-    img {
-      display: block;
-      width: 100%;
-    }
-  }
+.m-0 {
+  margin: 22px auto 31px;
+}
 
-  .partner-name,
-  .label {
-    margin-left: 12px;
-    line-height: 20px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-  }
+.m-1 {
+  margin: 17px auto 43px;
+}
 
-  .btn-apply {
-    width: 327px;
-    height: 45px;
-    margin-top: 22px;
-    border-radius: 4px;
-    line-height: 45px;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    color: #fff;
-    background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
-    box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
-  }
+.m-2 {
+  margin: 35px auto 0;
+}
 </style>