@qywh/package 0.0.3-beta01 → 0.0.3-beta05

package/packages/qy-out-success-wechat-diversion/components/index.vue

@@ -1,782 +1,157 @@
 <template>
   <div class="qy-out-success-wechat-diversion">
-    <!-- 无灌班支付成功 -->
-    <div
-      v-show="!isShow"
-      class="daoliu-prompt-info"
-    >
-      <div class="info-content">
-        <img src="https://qy-toufang.cdnjtzy.com/uploadFile/qy_41bfcae7a622afc0da48f29e56c74f55.png" alt="">
-        <div class="text">报名成功</div>
-      </div>
+    <!-- 报名成功 -->
+    <div class="pay-success-step">
+      <div class="step-icon">&#10003;</div>
+      <div class="step-text">{{ bgText }}</div>
     </div>
-    <!-- 有灌班支付成功 -->
-    <div v-show="isShow" class="pay-success-qrcode-content">
-      <div class="title">
-        <span class="icon"></span>
-        <span class="title-text">{{ bgText }}</span>
-      </div>
-      <div class="diversion-info-content">
-        <!-- 实时灌班 -->
-        <div class="not-delay-info" v-if="[0, 1].includes(this.scence) ">
-          <div  class="not-delay-info-teacher">
-            <div class="teacher-pic">
-              <img
-                class="teacher-pic-url"
-                :src="teacherInfo.userPicUrl"
-                alt="教师头像"
-              />
-            </div>
-            <div class="teacher-wechat-content">
-              <div class="wechat-name">
-                <span class="name">{{ teacherInfo.lpcName }}</span
-                ><span class="header-teacher">专属辅导老师</span>
-              </div>
-              <div class="wechat-id" v-if="!hideWechatId(true, teacherInfo)">
-                微信号：<span class="wechar-number">{{ teacherInfo.wxId }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="no-delay-title">
-            <div class="main-title">{{ getTitle }}</div>
-            <div class="sub-title">{{ getTip }}</div>
-          </div>
-        </div>
-        <!-- 延时灌班-文字 -->
-        <div v-else class="delay-info">
-          <div class="sub-title">
-            {{ getTitle }}
-          </div>
-          <div class="delay-sub-title">
-            {{ isWx ? "长按识别二维码" : "截屏保存二维码" }}
-          </div>
-          <div class="delay-sub-title">
-            {{ getTip }}“{{ getName }}”
-          </div>
-        </div>
-        <!-- 二维码 -->
-        <div class="qr-code">
-          <img
-            @touchstart="gtouchstart()"
-            @touchend="gtouchend()"
-            class="qr-code-img"
-            :class="[isWx ? 'qr-code-img-wechat' : '']"
-            :src="getQrCode"
-            alt="二维码"
-          />
-        </div>
-        <div
-          v-show="isShowCopyButton && (isUseQyuss === '0' || !isUseQyuss)"
-          class="qr-code-button"
-          ref="copyButton"
-          @click="copyClick"
-          :data-clipboard-text="getName"
-        >
-          <a class="button weixin-btn-color" :style="`background-color:${themeColor};`" href="javascript:void(0);">{{
-             getCopyButtonText 
-          }}</a>
-        </div>
-        <div class="daoliu-success-info" v-if="getisShowGift">
-          <div class="image-sub-title">
-            添加成功，额外获得以下福利
-          </div>
-          <img v-if="getGiftPic[0].imageUrl" class="success-img" :src="getGiftPic[0].imageUrl" alt="" />
-        </div>
+    <!-- 加微二维码 -->
+    <div class="qrcode-section">
+      <p class="qrcode-tip">请务必添加企微二维码咨询</p>
+      <img
+        v-if="qrcode"
+        :src="qrcode"
+        class="qrcode-img"
+        @error="onQrcodeError"
+      />
+      <div v-else class="qrcode-placeholder">
+        <span>{{ isEdit ? '' : (error || '加载中...') }}</span>
       </div>
+      <p class="qrcode-sub">长按识别二维码添加</p>
+    </div>
+    <div class="notice">
+      <p>· 如二维码显示异常，请<span class="link" @click="fetchQrCode">点击此处</span>刷新</p>
+      <p>· 如无法添加请切换网络重试</p>
     </div>
   </div>
 </template>
-<script lang='ts'>
-import { Vue, Component, Prop, Watch, Mixins } from 'vue-property-decorator'
-// @ts-ignore: Unreachable code error
-import { platform, environment, getUserInfo } from '../../../lib/utils'
-import urlExt from '../../../lib/zyb-yike-utils/urlExt'
-import { service } from '../../../lib/request'
-// @ts-ignore: Unreachable code error
-import { toast as Toast, isMiniProgram } from '../../../lib/methods'
-// @ts-ignore: Unreachable code error
-import { getCommonWxXcxScheme } from '../../../lib/utils/weixin'
 
-import Clipboard from 'clipboard'
-const isEdit = process.env.VUE_APP_RUNTIME_PLATFORM === 'editor'
-const orderIds = urlExt.getQuery('orderIds')
-const lastfrom = urlExt.getQuery('lastfrom')
-const fromH5Wx = urlExt.getQuery('fromH5Wx')
-const pageData = (window as any).__PAGE_DATA__
-const actId = pageData?.actInfo?.actId
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator'
+import { service } from '../../../lib/request'
 
-@Component({
-  components: {
-  }
-})
+@Component
 export default class QyOutSuccessWechatDiversion extends Vue {
-  @Prop({ type: Array }) readonly actions!: any
-  // 组件uid
-  @Prop({ type: String, default: 0 }) readonly uid!: string
-  // 组件name
-  @Prop({ type: String, default: '' }) readonly componentName!: string
-  // 背景文案
-  @Prop({ type: String, default: '支付成功' }) readonly bgText!: string
-  // 当前编辑端选择的是 实时灌班-微信 0 / 实时灌班-非微信 1 / 延迟灌班-微信 2 / 延迟灌班-非微信 3
-  @Prop({ type: String, default: '0' }) guideType!: string
-  // 实时灌班-微信 标题
-  @Prop({ type: String, default: '添加老师微信，提前预习' }) readonly currentWxTitle!: string
-  // 实时灌班-微信 提示语
-  @Prop({ type: String, default: '长按识别二维码 即可添加' }) readonly currentWxTip!: string
-  // 主题色
-  @Prop({ type: String, default: '#FF5C34' }) readonly currentWxThemeColor!: string
-  // 实时灌班-微信 是否展示复制按钮
-  @Prop({ type: Number, default: 1 }) readonly currentWxisShowCopyButton!: number
-  // 实时灌班-微信 复制按钮文案
-  @Prop({ type: String, default: '复制微信号' }) readonly currentWxCopyButtonText!: string
-  // 实时灌班-微信 按钮功能 
-  @Prop({ type: Number, default: 1 }) readonly currentWxButtonFunc!: number
-  // 实时灌班-微信 跳转获客助手 按钮文案
-  @Prop({ type: String, default: '添加老师微信' }) readonly currentWxJumpWxUrlText!: string
-  // 实时灌班-微信 是否展示礼品图片
-  @Prop({ type: Number, default: 1 }) readonly currentWxisShowGift!: number
-  // 实时灌班-微信 礼品图片地址
-  @Prop({ type: Array, default: () => [{ imageUrl: 'https://qy-toufang.cdnjtzy.com/uploadFile/qy_d3ae11809f403da0ca6ea9bd473bc549.png' }] }) currentWxGiftPic!: any[]
+  @Prop({ type: String, default: '报名成功' }) readonly bgText!: string
 
-  // 实时灌班-非微信 标题
-  @Prop({ type: String, default: '添加老师微信，提前预习' }) readonly currentNotWxTitle!: string
-  // 实时灌班-非微信 提示语
-  @Prop({ type: String, default: '截屏保存二维码或在微信搜索老师微信号' }) readonly currentNotWxTip!: string
-  // 主题色
-  @Prop({ type: String, default: '#FF5C34' }) readonly currentNotWxThemeColor!: string
-  // 实时灌班-非微信 是否展示复制按钮
-  @Prop({ type: Number, default: 1 }) readonly currentNotWxisShowCopyButton!: number
-  // 实时灌班-微信 按钮功能 
-  @Prop({ type: Number, default: 1 }) readonly currentNotWxButtonFunc!: number
-  // 实时灌班-微信 跳转获客助手 按钮文案
-  @Prop({ type: String, default: '添加老师微信' }) readonly currentNotWxJumpWxUrlText!: string
-  // 实时灌班-非微信 复制按钮文案
-  @Prop({ type: String, default: '复制微信号，打开微信搜索' }) readonly currentNotWxCopyButtonText!: string
-  // 实时灌班-非微信 跳转小程序按钮文案
-  @Prop({ type: String, default: '打开微信' }) readonly currentNotWxJumpWxXcxText!: string
-  // 实时灌班-非微信 是否展示礼品图片
-  @Prop({ type: Number, default: 1 }) readonly currentNotWxisShowGift!: number
-  // 实时灌班-非微信 礼品图片
-  @Prop({ type: Array, default: () => [{ imageUrl: 'https://qy-toufang.cdnjtzy.com/uploadFile/qy_d3ae11809f403da0ca6ea9bd473bc549.png' }] }) currentNotWxGiftPic!: any[]
+  qrcode = ''
+  error = ''
 
-  // 延迟灌班-微信 标题
-  @Prop({ type: String, default: '关注微信公众号，获取上课信息' }) readonly delayWxTitle!: string
-  // 延迟灌班-微信 提示语
-  @Prop({ type: String, default: '即可关注' }) readonly delayWxTip!: string
-  // 主题色
-  @Prop({ type: String, default: '#FF5C34' }) readonly delayWxThemeColor!: string
-  // 延迟灌班-微信 公众号名称
-  @Prop({ type: String, default: '' }) readonly delayName!: string
-  // 延迟灌班-微信 自定义二维码
-  @Prop({ type: Array, default: () => [{ imageUrl: '' }] }) delayWxQrcode!: any[]
-  // 延迟灌班-微信 是否展复制按钮
-  @Prop({ type: Number, default: 1 }) readonly delayWxisShowCopyButton!: number
-  // 延迟灌班-微信 复制按钮文案
-  @Prop({ type: String, default: '复制公众号名称' }) readonly delayWxCopyButtonText!: string
-  // 延迟灌班-微信 是否展示礼品图片
-  @Prop({ type: Number, default: 1 }) readonly delayWxisShowGift!: number
-  // 延迟灌班-微信 礼品图片地址
-  @Prop({ type: Array, default: () => [{ imageUrl: 'https://qy-toufang.cdnjtzy.com/uploadFile/qy_d3ae11809f403da0ca6ea9bd473bc549.png' }] }) delayWxGiftPic!: any[]
-
-  // 延迟灌班-微信 标题
-  @Prop({ type: String, default: '关注微信公众号，获取上课信息' }) readonly delayNotWxTitle!: string
-  // 延迟灌班-微信 提示语
-  @Prop({ type: String, default: '或在微信搜索' }) readonly delayNotWxTip!: string
-  // 主题色
-  @Prop({ type: String, default: '#FF5C34' }) readonly delayNotWxThemeColor!: string
-  // 延迟灌班-微信 公众号名称
-  @Prop({ type: String, default: '' }) readonly delayNotName!: string
-  // 延迟灌班-微信 自定义二维码
-  @Prop({ type: Array, default: () => [{ imageUrl: '' }] }) delayNotWxQrcode!: any[]
-  // 延迟灌班-微信 是否展复制按钮
-  @Prop({ type: Number, default: 1 }) readonly delayNotWxisShowCopyButton!: number
-  // 延迟灌班-微信 按钮功能 
-  @Prop({ type: Number, default: 1 }) readonly delayNotWxButtonFunc!: number
-  // 延迟灌班-非微信 跳转小程序按钮文案
-  @Prop({ type: String, default: '打开微信' }) readonly delayNotWxJumpWxXcxText!: string
-  // 延迟灌班-微信 复制按钮文案
-  @Prop({ type: String, default: '复制公众号名称' }) readonly delayNotWxCopyButtonText!: string
-  // 延迟灌班-微信 是否展示礼品图片
-  @Prop({ type: Number, default: 1 }) readonly delayNotWxisShowGift!: number
-  // 延迟灌班-微信 礼品图片地址
-  @Prop({ type: Array, default: () => [{ imageUrl: 'https://qy-toufang.cdnjtzy.com/uploadFile/qy_d3ae11809f403da0ca6ea9bd473bc549.png' }] }) delayNotWxGiftPic!: any[]
-  // isWx: boolean = platform.isWechat
-  scenceArr: string[] = ['currentWx', 'currentNotWx', 'delayWx', 'delayNotWx']
-  addWxInfoList: any = []
-  timeOutEvent: any = ''
-  isUseQyuss: string = '0'
-  qyuss: string = ''
-  userId: number = 0 // 用户uid
-  xcxUrlScheme: string = '' // 小程序url短链
-  isMiniProgram: boolean = false
-
-  get isWx () {
-    if (isEdit) {
-      if (['0', '2'].includes(this.guideType)) {
-        return true
-      } else {
-        return false
-      }
-    } else {
-      return platform.isWechat
-    }
-  }
-  // 是否展示
-  get isShow () {
-    return isEdit || (orderIds && this.addWxInfoList.length)
-  }
-  // 根据环境判断，当前显示的场景  实时灌班-微信 0 / 实时灌班-非微信 1 / 延迟灌班-微信 2 / 延迟灌班-非微信 3
-  get scence () {
-    if (isEdit) {
-      return Number(this.guideType)
-    } else {
-      const isDelay = this.addWxInfoList[0] ? this.addWxInfoList[0].courseDelayStatus : 1
-      if (!isDelay && this.isWx) {
-        // 实时灌班-微信
-        return 0
-      }
-      if (!isDelay && !this.isWx) {
-        // 实时灌班-非微信
-        return 1
-      }
-      if (isDelay && this.isWx) {
-        // 延时灌班-微信
-        return 2
-      }
-      if (isDelay && !this.isWx) {
-        // 延时灌班-非微信
-        return 3
-      }
-      return -1
-    }
-  }
-  // 展示的公众号名称
-  get getName () {
-    const scenceName = this.scenceArr[this.scence]
-    if ([2, 3].includes(this.scence)) {
-      let nameScence = ''
-      if (Number(this.scence) === 2) {
-        nameScence = 'delay'
-      }
-      if (Number(this.scence) === 3) {
-        nameScence = 'delayNot'
-      }
-      // 延时灌班，展示名称
-      return this.$props[`${nameScence}Name`]
-    } else {
-      // 展示的是老师的微信号
-      return (this.addWxInfoList[0] ? this.addWxInfoList[0] : {}).wxId
-    }
-  }
-  // 教师信息
-  get teacherInfo () {
-    return this.addWxInfoList[0] ? this.addWxInfoList[0] : {}
-  }
-  // 标题
-  get getTitle () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}Title`]
-  }
-  // 提示语
-  get getTip () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}Tip`]
-  }
-  //  展示二维码
-  get getQrCode () {
-    const scenceName = this.scenceArr[this.scence]
-    if ([0, 1].includes(this.scence)) {
-      // 实时灌班
-      return (this.addWxInfoList[0] ? this.addWxInfoList[0] : {}).qrCode
-    } else {
-      // 延时灌班
-      return this.$props[`${scenceName}Qrcode`][0].imageUrl
-    }
-  }
-  // 是否展示复制按钮
-  get isShowCopyButton () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}isShowCopyButton`]
-  }
-  // 是否是跳转获客助手
-  get isJumpWxLink () {
-    const scenceName = this.scenceArr[this.scence]
-    const isJumpWxLink = this.$props[`${scenceName}ButtonFunc`]
-    return isJumpWxLink && isJumpWxLink === 2
-  }
-  // 是否是跳转小程序
-  get isJumpXcx () {
-    const scenceName = this.scenceArr[this.scence]
-    const isJumpWxLink = this.$props[`${scenceName}ButtonFunc`]
-    return isJumpWxLink && isJumpWxLink === 3
-  }
-  get buttonFuncType () {
-    if (this.isJumpWxLink) {
-      return 1
-    }
-    if (this.isJumpXcx) {
-      return 2
-    }
-    return 0
+  get isEdit () {
+    return (this as any).$attrs?.isEdit === true || location.href.includes('workbench')
   }
 
-  // 复制按钮文案
-  get getCopyButtonText () {
-    const scenceName = this.scenceArr[this.scence]
-    if (this.isJumpWxLink) {
-      return this.$props[`${scenceName}JumpWxUrlText`]
-    } else {
-      if (this.isJumpXcx) {
-        return this.$props[`${scenceName}JumpWxXcxText`]
-      } else {
-        return this.$props[`${scenceName}CopyButtonText`]
-      }
-    }
-  }
-  get getisShowGift () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}isShowGift`]
-  }
-  get getGiftPic () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}GiftPic`]
-  }
-  get themeColor () {
-    const scenceName = this.scenceArr[this.scence]
-    return this.$props[`${scenceName}ThemeColor`]
-  }
-
-  @Watch('scence', { immediate: true })
-  scenceChange (val: number) {
-    if (isEdit) {
-      if ([0, 1].includes(val)) {
-        this.addWxInfoList = [{
-          courseDelayStatus: 0,
-          userPicUrl: 'https://img.zuoyebang.cc/qy_8706f1e68115ac8fc5e956a064526bf7.jpg',
-          lpcName: '小鱼儿老师',
-          courseName: '【语文课】',
-          courseId: 1,
-          qrCode: 'https://img.zuoyebang.cc/qy_0901222f26448287d0aef0921675c35d.jpg',
-          wxId: '111111',
-          labelAppleId: 'gh_b9debf844820',
-          jumpUrl: 'pages/middlelink/middlelink?applyScene=app_middle_page&redirectUri=&sceneValue=1015',
-          customer_acquisition_link: '111'
-        }]
-      } else {
-        this.addWxInfoList = [{
-          courseDelayStatus: 1,
-          name: '公众号名称',
-          qrCode: 'https://qy-toufang.cdnjtzy.com/uploadFile/qy_d3ae11809f403da0ca6ea9bd473bc549.png'
-        }]
-      }
-    }
-  }
-  getChannel () {
-    const channel = Array.isArray(lastfrom) ? lastfrom[0].split('_')[2] : lastfrom.split('_')[2]
-    if (!channel) { return '' }
-    return channel
-  }
-  copyClick () {
-    // 复制按钮点击
-  }
-  initClipboard () {
-    const qrCodeButton = document.querySelectorAll('.qr-code-button')
-    const clipboard = new Clipboard(qrCodeButton)
-    clipboard.on('success', (e) => {
-      console.log('复制成功，请在微信粘贴添加')
-      let message = '微信号已复制～'
-      if (this.scence === 0) {
-        // 实时灌班-微信
-        message = '已复制微信号'
-        if (!isEdit && this.isJumpWxLink && this.teacherInfo.customer_acquisition_link) {
-          // 跳转获客助手
-          window.location.href = this.teacherInfo.customer_acquisition_link
-        }
-      }
-      if (this.scence === 1) {
-        // 实时灌班-非微信
-        message = '微信号已复制，去微信搜索老师并添加吧'
-        if (!isEdit && this.isJumpWxLink && this.teacherInfo.customer_acquisition_link) {
-          // 跳转获客助手
-          window.location.href = this.teacherInfo.customer_acquisition_link
-        } else {
-          if (this.isJumpXcx) {
-            message = ''
-            this.jumpXcx()
-          }
-        }
-      }
-      if (this.scence === 2) {
-        // 延时灌班-微信
-        message = '微信号已复制，去微信搜索老师并添加吧'
-      }
-      if (this.scence === 3) {
-        // 延时灌班-非微信
-        message = `公众号"${this.getName}"已复制`
-        if (this.isJumpXcx) {
-          message = ''
-          this.jumpXcx()
-        }
-      }
-      if (message) {
-        Toast(message)
-      }
-    })
-    clipboard.on('error', (e) => {
-      console.log('复制失败，请再次尝试')
-      Toast('复制失败，当前浏览器不支持复制')
-    })
-  }
-  gtouchstart (e: any) {
-    this.timeOutEvent = setTimeout(() => {
-      // 长按3秒
-      this.timeOutEvent = 0
-    }, 1500)
-  }
-  gtouchend () {
-    clearTimeout(this.timeOutEvent)
-    this.timeOutEvent = 0
-  }
-  hideWechatId (isNotDelay: boolean, wxInfo: any) {
-    if (!isNotDelay) return false
-    const wxTypeWeCom = '2' // 企业微信
-    if (wxInfo && wxInfo.wxType && wxInfo.wxType === wxTypeWeCom) {
-      return true
+  mounted () {
+    if (!this.isEdit) {
+      this.fetchQrCode()
     }
-    return false
   }
 
-  // 跳转小程序方法
-  async jumpXcx () {
-    if (this.xcxUrlScheme) {
-      location.href = this.xcxUrlScheme
-    } else {
-      await this.getUserInfo()
-      await this.getXcxScheme()
-      this.jumpXcx()
-    }
+  get pageQuery () {
+    return (this as any).$utils ? (this as any).$utils.getUrlParams() : {}
   }
 
-  // 获取小程序短链
-  async getXcxScheme () {
-    const pageId = urlExt.getQuery('pageId')
-    const groupId = urlExt.getQuery('groupId')
-    let successPageInfoParam: any = encodeURIComponent(JSON.stringify({ pageId, groupId }))
-    const schemeUrlRes: any = await getCommonWxXcxScheme({
-      appId: 'wx6ecf667b0a8527c2',
-      path: '/pages/webview/index',
-      ext: {
-        lastfrom,
-        successPageInfo: successPageInfoParam,
-        isUseQyuss: 1,
-        actId,
-        qyuss: this.qyuss,
-        orderIds
-      }
-    })
-    console.log('getCommonWxXcxScheme', schemeUrlRes)
-    if (schemeUrlRes && schemeUrlRes.openlink) {
-      this.xcxUrlScheme = schemeUrlRes.openlink
-    }
-  }
+  async fetchQrCode () {
+    if (this.isEdit) return
 
-  // 获取用户UID
-  async getUserInfo () {
-    const loginStatus: any = await getUserInfo()
-    if (loginStatus && loginStatus.uid) {
-      this.userId = loginStatus.uid
-      this.qyuss = loginStatus.qyuss
+    const { orderId, userId } = this.pageQuery
+    if (!orderId || !userId) {
+      this.error = '缺少订单参数'
+      return
     }
-  }
 
-  async getData () {
-    console.log('getData', this.isUseQyuss, this.isMiniProgram)
-    if (this.isUseQyuss && this.isMiniProgram && !isEdit) {
-      // 在小程序内，且拥有isUseQyuss参数
-      await service({
-        method: 'get',
-        url: '/cube/api/wx/v2/out/payresult',
-        params: {
-          orderIds,
-          qyuss: this.qyuss,
-          channelId: 14
+    for (let i = 0; i < 5; i++) {
+      try {
+        this.error = ''
+        const res: any = await service.get('/common/api/getOrderQrCode', {
+          params: { orderId, userId }
+        })
+        if (res && res.data && res.data.qrCode) {
+          this.qrcode = res.data.qrCode
+          return
         }
-      }).then((res:any) => {
-        this.addWxInfoList = res.data.list || []
-        // 复制初始化
-        // this.initClipboard()
-      }).catch((err: any) => {})
-    } else {
-      // fromH5Wx = 1 标识 可能是扩科从支付返回来的
-      if (!isEdit && Number(fromH5Wx) !== 1) {
-        await service({
-          method: 'get',
-          url: '/cube/api/wx/v2/payresult',
-          params: {
-            orderIds,
-            channelId: 14
-          }
-        }).then((res:any) => {
-          this.addWxInfoList = res.data.list || []
-          // 复制初始化
-          // this.initClipboard()
-        }).catch((err: any) => {})
+      } catch (e) {
+        console.error('获取二维码失败:', e)
       }
-    }
-  }
-  async created () {
-    this.isUseQyuss = urlExt.getQuery('isUseQyuss')
-    this.qyuss = urlExt.getQuery('qyuss')
-    const isMiniProgramRes: any = await isMiniProgram()
-    this.isMiniProgram = isMiniProgramRes
-    await this.getData()
-    await this.getUserInfo()
-    if (this.isJumpXcx && !this.isMiniProgram) {
-      await this.getXcxScheme()
-      // 选了跳小程序，拿到了短链直接跳
-      if (this.xcxUrlScheme) {
-        setTimeout(() => {
-          location.href = this.xcxUrlScheme
-        }, 1000)
+      if (i < 4) {
+        await new Promise(r => setTimeout(r, 3000))
       }
     }
+    this.error = '获取二维码失败，请点击刷新重试'
   }
-  async mounted () {
-    this.initClipboard()
+
+  onQrcodeError () {
+    this.qrcode = ''
+    this.error = '二维码加载失败，请点击刷新重试'
   }
 }
 </script>
+
 <style lang="less" scoped>
 .qy-out-success-wechat-diversion {
-  // background-color: #fff;
-  .daoliu-prompt-info {
-    padding-top: 2.5rem;
-    background-color: #FFF;
-    .info-content {
-      text-align: center;
-      img {
-        width: 1.28rem;
-        height: 1.28rem;
-      }
-      .text {
-        font-size: 0.4rem;
-        color: #333333;
-        text-align: center;
-        line-height: 0.58rem;
-        font-weight: 400;
-      }
-    }
+  padding: 30px 20px;
+  text-align: center;
+}
+
+.pay-success-step {
+  margin-bottom: 24px;
+  .step-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: #67C23A;
+    color: #fff;
+    font-size: 28px;
+    margin-bottom: 8px;
+  }
+  .step-text {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
   }
-  .pay-success-qrcode-content {
-    padding-top: .48rem;
-    width: 100%;
-    height: auto;
-    background-image: url('https://qy-toufang.cdnjtzy.com/uploadFile/qy_d4030e8617e52c8955b2c74db45d0cc6.png');
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: 100% auto;
-    overflow: hidden;
-    .title {
-      width: 100%;
-      text-align: center;
-      margin-bottom: 0.48rem;
-      height: 0.48rem;
-      overflow: hidden;
-      .icon {
-        overflow: hidden;
-        box-sizing: border-box;
-        display: inline-block;
-        width: 0.4rem;
-        height: 0.4rem;
-        margin-right: 0.16rem;
-        background-image: url('https://qy-toufang.cdnjtzy.com/uploadFile/qy_e6be485136581464241cb2ebfc200984.png');
-        background-repeat: no-repeat;
-        background-position: top left;
-        background-size: 100%;
-        vertical-align: top;
-      }
-      .title-text {
-        display: inline-block;
-        font-family: PingFangSC-Medium;
-        font-size: 0.4rem;
-        height: 0.4rem;
-        color: #FFFFFF;
-        line-height: 0.4rem;
-        font-weight: 500;
-      }
-    }
+}
+
+.qrcode-section {
+  margin-bottom: 24px;
+  .qrcode-tip {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 16px;
+  }
+  .qrcode-img {
+    width: 200px;
+    height: 200px;
+    border-radius: 8px;
+  }
+  .qrcode-placeholder {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 200px;
+    height: 200px;
+    border-radius: 8px;
+    background: #f5f5f5;
+    color: #999;
+    font-size: 14px;
+  }
+  .qrcode-sub {
+    font-size: 14px;
+    color: #999;
+    margin-top: 12px;
   }
-  .diversion-info-content {
-    width: 6.56rem;
-    background:rgba(255,255,255,1);
-    margin: 0 auto;
-    border-radius: 0.16rem;
-    padding: 0.32rem 0.32rem 0;
-    .not-delay-info {
-      width: 100%;
-      // padding-bottom: 0.32rem;
-      box-sizing: border-box;
-      // margin-bottom: 0.32rem;
-      .not-delay-info-teacher {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        border-bottom: 0.01rem dashed #E5E5E5;
-        padding-bottom: 0.32rem;
-        box-sizing: border-box;
-        margin-bottom: 0.32rem;
-        .teacher-pic {
-          width: 0.8rem;
-          height: 0.8rem;
-          border-radius: 0.4rem;
-          overflow: hidden;
-          .teacher-pic-url{
-            width: 100%;
-            height: 100%;
-          }
-        }
-        .teacher-wechat-content{
-          margin-left: 0.16rem;
-          box-sizing: border-box;
-          padding-bottom: 0.06rem;
-          .wechat-name {
-            .name {
-              // height: 0.28rem;
-              font-size: 0.28rem;
-              font-weight: 600;
-              line-height: 0.28rem;
-              font-family: PingFangSC-Semibold;
-              color: #333333;
-            }
-            .header-teacher {
-              box-sizing: border-box;
-              margin-left: 0.16rem;
-              width: 1.28rem;
-              height: 0.32rem;
-              border-radius: 0.04rem;
-              background-color: #FFF2EE;
-              font-size: 0.2rem;
-              font-family: PingFangSC-Medium;
-              font-weight:400;
-              color: #FF7F58;
-              line-height: 0.32rem;
-              text-align: center;
-              padding: 0 0.04rem;
-              vertical-align: text-bottom;
-            }
-          }
-          .wechat-id {
-            margin-top: .08rem;
-            height: 0.24rem;
-            font-size: 0.24rem;
-            font-weight:400;
-            color: #999;
-            line-height: 0.24rem;
-          }
-        }
-      }
-      .no-delay-title {
-        .main-title {
-          font-family: PingFangSC-Medium;
-          font-size: 0.32rem;
-          color: #333333;
-          text-align: center;
-          line-height: 0.32rem;
-          font-weight: 500;
-          margin-bottom: 0.24rem;
-        }
-        .sub-title {
-          font-family: PingFangSC-Regular;
-          font-size: 0.24rem;
-          color: #999999;
-          text-align: center;
-          line-height: 0.24rem;
-          font-weight: 400;
-        }
-      }
-    }
-    .delay-info {
-      width: 100%;
-      box-sizing: border-box;
-      padding-top: 0.08rem;
-      // padding-bottom: 0.32rem;
-      .sub-title {
-        font-family: PingFangSC-Medium;
-        width: 100%;
-        font-size: 0.32rem;
-        color: #333333;
-        text-align: center;
-        line-height: 0.32rem;
-        font-weight: 500;
-        margin-bottom: 0.2rem;
-      }
-      .delay-sub-title {
-        width: 100%;
-        font-family: PingFangSC-Regular;
-        font-size: 0.24rem;
-        color: #999999;
-        text-align: center;
-        line-height: 0.36rem;
-        font-weight: 400;
-      }
-    }
-    .qr-code {
-      font-size: 0;
-      width: 2.4rem;
-      height: 2.4rem;
-      background: #FFFFFF;
-      border: 0.01rem solid #EDEFF0;
-      border-radius: 0.08rem;
-      text-align: center;
-      padding: 0.16rem; 
-      box-sizing: border-box;
-      margin: 0 auto;
-      margin-bottom: 0.32rem;
-      margin-top: 0.32rem;
-      .qr-code-img {
-        display: inline-block;
-        width: 2.08rem;
-        height: 2.08rem;
-      }
-      .qr-code-img-wechat {
-        pointer-events: auto !important;
-      }
-    }
-    .qr-code-button {
-      width: 100%;
-      box-sizing: border-box;
-      padding-bottom: 0.32rem;
-      .button {
-        display: inline-block;
-        width: 100%;
-        height: 0.8rem;
-        line-height: 0.8rem;
-        text-align: center;
-        border-radius: 0.4rem;
-        font-size: 0.32rem;
-        text-decoration: none;
-        font-family: PingFangSC-Regular;
-        color: #FFFFFF;
-        text-align: center;
-        font-weight: 400;
-      }
-    }
-    .daoliu-success-info {
-      width: 100%;
-      .image-sub-title {
-        width: 100%;
-        font-size: .24rem;
-        font-family: PingFangSC-Regular;
-        color: rgba(0,0,0,0.60);
-        text-align: center;
-        line-height: 0.24rem;
-        font-weight: 400;
-      }
-      .success-img{
-        width: 100%;
-        height: auto;
-      }
-    }
+}
+
+.notice {
+  text-align: left;
+  font-size: 13px;
+  color: #666;
+  line-height: 1.8;
+  .link {
+    color: #2677F0;
+    cursor: pointer;
   }
 }
 </style>