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

<template>
  <div class="wrapper">
    <img class="banner"
         :src="productInfo.productContentUrl"
         alt="">
    <!--合伙人推广-->
    <div class="footer myself" v-if="partnerId">
      <router-link class="btn-apply single"
                   :to="{path: '/loan/apply/' + orderProductId, query: { partnerId }}">点击预约办理
      </router-link>
    </div>
    <!--妥妥：本人-->
    <div class="footer myself" v-else-if="!recommendedUser.id">
      <!--可以分享-->
      <template v-if="userShareConfig.share">
        <router-link class="btn-apply double"
                     :to="{path: '/loan/apply/' + orderProductId}">点击申请
        </router-link>
        <a class="invite double"
           href="javascript:;"
           @click="booInvite = true">分享好礼</a>
      </template>
      <!--不能分享-->
      <router-link class="btn-apply single"
                   :to="{path: '/loan/apply/' + orderProductId}"
                   v-else>点击申请
      </router-link>
    </div>
    <!--妥妥：非本人-->
    <div class="footer other" v-else>
      <router-link class="btn-apply single"
                   :to="{path: '/loan/apply/' + orderProductId, query: { RId: recommendedUser.id }}">点击预约办理
      </router-link>
      <div class="partner-info">
        <div class="partner-avatar">
          <img :src="recommendedUser.userImgUrl" alt="">
        </div>
        <p class="name">{{ recommendedUser.userName }} 邀请你</p>
      </div>
    </div>
    <!--生成二维码使用-->
    <div id="ttyf-qrcode"
         style="display: none;"></div>
    <!--弹窗：邀请-->
    <van-popup class="ttyf-van-popup-invite"
               round
               v-model="booInvite">
      <p class="title">邀请好友申请贷款</p>
      <p class="tip">放款成功后，可获得超值奖励</p>
      <p class="btns">
        <a href="javascript:;" @click="funShareTip">微信好友 邀请</a>
        <a href="javascript:;" @click="funShareTip">微信朋友圈 邀请</a>
      </p>
      <p class="show-code"
         @click="funShowCode">
        <img src="./image/icon_00@2x.png" alt="">
        <span>面对面扫码邀请></span>
      </p>
    </van-popup>
    <!--弹窗：二维码-->
    <van-popup class="ttyf-van-popup-code"
               round
               v-model="booCode">
      <p>请扫码申请贷款</p>
      <div class="qrcode-wrap">
        <img :src="codeUrl" alt="">
      </div>
    </van-popup>
    <!--弹窗：分享提示-->
    <van-popup class="ttyf-van-popup-share"
               position="top"
               v-model="booShareTip">
      <img src="./image/icon_01@2x.png" alt="">
    </van-popup>
  </div>
</template>

<script>
import { Popup, Toast } from 'vant'
import { funWxShare } from '../../../utils/wxShareConfig'
import { getProductDetail } from '../../../api/common'
import QRCode from 'qrcodejs2'
import { getUserShare } from './api'

export default {
  name: 'explain',
  components: {
    'van-popup': Popup
  },
  props: {
    // 产品ID
    orderProductId: {
      type: [String, Number],
      default: ''
    },
    partnerId: {
      type: String,
      default: ''
    },
    recommendedUser: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      productInfo: {},
      booInvite: false,
      booCode: false,
      qrcode: null,
      codeUrl: '', // 二维码地址
      showCode: false, // 是否显示二维码弹窗
      booShareTip: false, // 分享朋友、朋友圈提示
      userShareConfig: {
        share: false, // 是否有权限分享(true是false无)
        id: '', // 用户ID
        userName: '', // 用户名称
        userImgUrl: '' // 用户头像
      }
    }
  },
  async mounted () {
    await this.$nextTick()
    if (!this.partnerId) {
      this.fetchUserShare()
      this.funGetProductDetail()
    } else {
      this.$router.replace({
        path: '/loan/apply/' + this.orderProductId,
        query: {
          partnerId: this.partnerId
        }
      })
    }
  },
  methods: {
    // 获取用户分享权限
    fetchUserShare () {
      getUserShare().then(res => {
        let shareHref = `${location.origin}${location.pathname}`
        if (res.status) {
          if (Object.prototype.toString.call(res.data) === '[object Object]') {
            this.userShareConfig = res.data
          }
        } else {
          Toast(res.msg)
        }
        if (this.partnerId) { // 合伙人
          shareHref += `?partnerId=${this.partnerId}`
        } else if (this.recommendedUser.id) { // 打开含有推荐人信息链接
          shareHref += `?recommendedUser=${encodeURIComponent(JSON.stringify(this.recommendedUser))}`
        } else if (Object.keys(this.userShareConfig).length) { // 默认本人打开、且有分享权限
          shareHref += `?recommendedUser=${encodeURIComponent(JSON.stringify(this.userShareConfig))}`
        }
        funWxShare('驼驼银服', '家里用钱，就找驼驼银服，省心，省力，妥妥的！', shareHref, location.protocol + '//api.tuotuoyinfu.com/img/logo.jpg')
        this.$nextTick(() => {
          this.createQRCode(shareHref)
        })
      }).catch(err => {
        Toast(err)
      })
    },
    funShowCode () {
      this.booInvite = false
      this.booCode = true
    },
    funGetProductDetail () {
      getProductDetail(this.orderProductId).then(res => {
        if (res.status) {
          this.productInfo = res.data
          this.$nextTick(() => {
            this.$refreshTitle(res.data.productName)
          })
        }
      })
    },
    createQRCode (link) {
      if (!this.qrcode) {
        this.qrcode = new QRCode('ttyf-qrcode', {
          width: 140,
          height: 140,
          text: link,
          colorDark: '#000',
          colorLight: '#fff'
        })
      } else {
        this.qrcode.clear()
        this.qrcode.makeCode(link)
      }
      this.codeUrl = ''
      setTimeout(() => {
        const canvas = document.getElementById('ttyf-qrcode').getElementsByTagName('canvas')[0]
        this.codeUrl = canvas.toDataURL('image/png', 1)
      }, 500)
    },
    funShareTip () {
      this.booShareTip = true
      this.booInvite = false
    }
  }
}
</script>

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

.banner {
  display: block;
  width: 100%;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  padding: 14px 0;
  background: #FFFFFF;
  box-shadow: 0 -5px 10px 0 rgba(233, 234, 234, 1);

  &.myself {
    display: flex;
    justify-content: center;
  }

  &.other {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.btn-apply,
.invite {
  height: 45px;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  text-align: center;

  &.single {
    width: 326px;
  }

  &.double {
    width: 158px;
  }
}

.btn-apply {
  background: linear-gradient(180deg, #E0000B 0%, #CB0000 100%);
  color: #FFFFFF;
  line-height: 45px;
}

.invite {
  margin-left: 12px;
  border: 1px solid #CBB091;
  color: #C7AC8B;
  line-height: 45px;
}

.partner-info {
  display: flex;
  align-items: center;
  margin-top: 5px;

  .partner-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }

  .name {
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }
}

.ttyf-van-popup-invite {
  width: 327px;
  padding-top: 26px;
  border-radius: 9px;

  .title {
    padding-left: 24px;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 33px;
  }

  .tip {
    padding-left: 24px;
    margin-top: 4px;
    font-size: 16px;
    line-height: 22px;
    color: #666666;
  }

  .btns {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
  }

  a {
    width: 132px;
    height: 46px;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 46px;
    text-align: center;

    &:nth-of-type(1) {
      background: #5ACE8D;
    }

    &:nth-of-type(2) {
      margin-left: 16px;
      background: #FE9400;
    }
  }

  .show-code {
    font-size: 0;
    background: #FCFCFC;
    border-top: 1px solid #EBEBEB;
    padding: 17px 0 20px;
    margin-top: 16px;
    text-align: center;

    img {
      width: 20px;
      height: 20px;
      vertical-align: middle;
    }

    span {
      margin-left: 5px;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
      vertical-align: middle;
    }
  }
}

.ttyf-van-popup-code {
  width: 252px;
  padding-bottom: 26px;
  border-radius: 9px;

  p {
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 33px;
    text-align: center;
    padding: 26px 0;
    border-bottom: 1px solid #EBEBEB;
  }

  .qrcode-wrap {
    width: 140px;
    height: 140px;
    margin: 12px auto 0;
    overflow: hidden;

    img {
      display: block;
      width: 100%;
    }
  }
}

.ttyf-van-popup-share {
  background: transparent;

  img {
    display: block;
    width: 100%;
    height: 286px;
  }
}
</style>