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

<template>
  <div class="wrapper">
    <img class="cover-1" src="./image/cover1@2x.png" alt="">
    <img class="cover-2" src="./image/cover2@2x.png" alt="">
    <div class="footer">
      <a class="btn-apply" href="javascript:;" @click="funJumpJoin">在线申请</a>
    </div>
  </div>
</template>

<script>
import { getMyPartnerOrder } from './api'
import { Toast } from 'vant'

export default {
  name: 'explain',
  props: {
    inviteCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      myPartnerOrdeId: ''
    }
  },
  async mounted () {
    await this.$nextTick()
    this.$refreshTitle('成为合伙人')
  },
  methods: {
    funInit () {
      getMyPartnerOrder().then(res => {
        if (res.status) {
          const { id } = res.data
          if (id) {
            this.myPartnerOrdeId = id
          }
        }
      }).catch(err => {
        Toast(err)
      })
    },
    funJumpJoin () {
      if (this.myPartnerOrdeId) {
        this.$router.push({ path: `/partner/detail/${this.myPartnerOrdeId}` })
        return
      }
      this.$router.push({ path: '/partner/join?inviteCode=' + this.inviteCode })
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.funInit()
    })
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 91px;
  background: #fff;
}

.cover-1 {
  display: block;
  width: 100%;
  min-height: 200px;
}

.cover-2 {
  display: block;
  width: 336px;
  margin: 43px auto 0;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  // padding-bottom: constant(safe-area-inset-bottom);
  // padding-bottom: env(safe-area-inset-bottom);
  padding: 23px 0;
}

.btn-contact,
.btn-apply {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 327px;
  height: 45px;
  border-radius: 4px;
  background: linear-gradient(90deg, #DBC3A9 0%, #C7AB8A 100%);
  box-shadow: 0 14px 9px -10px rgba(219, 208, 194, 1);
}

.btn-contact {
  img {
    width: 29px;
    height: 29px;
  }

  span {
    margin-left: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }
}

.btn-apply {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
</style>