work-doc/developer/支付宝H5/index.vue

<template>
  <div class="container">
    <div v-if="result.code === 'success'" class="result">
      <img class="result-pic" :src="result.pic" alt="" />
      <div class="result-title">{{ result.title }}</div>
      <van-button type="primary" class="result-btn" @click="goUBOXBind">
        去绑定支付宝账号
      </van-button>
    </div>
    <div v-if="result.code === 'registered'" class="result">
      <img class="result-pic" :src="result.pic" alt="" />
      <div class="result-title">{{ result.title }}</div>
      <van-button type="primary" class="result-btn" @click="goUBOXBind">
        去绑定支付宝账号
      </van-button>
    </div>
    <div v-if="result.code === 'fail'" class="result">
      <img class="result-pic" :src="result.pic" alt="" />
      <div class="result-title">{{ result.title }}</div>
    </div>
  </div>
</template>

<script>
import { getURLParameters } from "@/utils";

const resultMap = {
  200: {
    code: "success",
    pic: require("@/assets/images/result_1.png"),
    title: "继续完成绑定支付宝账号，即可开门消费。",
  },
  fail: {
    code: "fail",
    pic: require("@/assets/images/result_2.png"),
    title: "系统异常，请勿重复操作。",
  },
  6010: {
    code: "registered",
    pic: require("@/assets/images/result_2.png"),
    title: "用户已注册，请勿重复操作。",
  },
};

export default {
  data() {
    return {
      result: {},
    };
  },
  created() {
    const { code: statusCode } = getURLParameters();
    this.result = resultMap[statusCode]
      ? resultMap[statusCode]
      : resultMap["fail"];
    // this.aliPayReady()
  },

  methods: {
    // aliPayReady() {
    //   function ready(callback) {
    //     // 如果jsbridge已经注入则直接调用
    //     if (window.AlipayJSBridge) {
    //       callback && callback()
    //     } else {
    //       // 如果没有注入则监听注入的事件
    //       document.addEventListener('AlipayJSBridgeReady', callback, false)
    //     }
    //   }
    //   ready(function () {
    //     console.log('AlipayJSBridge 初始化完毕')
    //   })
    // },
    // exitApp() {
    //   AlipayJSBridge.call('exitApp')
    // },
    // openScan() {
    //   AlipayJSBridge.call(
    //     'scan',
    //     {
    //       scanType: ['qrCode', 'barCode'],
    //       actionType: 'scanAndRoute',
    //     },
    //     function (result) {
    //       alert(JSON.stringify(result))
    //     },
    //   )
    // },
    /**
     * 跳转到友宝绑定支付宝页面
     */
    goUBOXBind() {
      location.href = `http://cashier.aicebox.com/user/bind/init/1036_100811_dt1`;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 24px;
}

.result {
  display: flex;
  flex-direction: column;
  align-items: center;

  &-pic {
    width: 200px;
    height: 170px;
  }

  &-title {
    margin-top: 24px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }

  &-tips {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
  }

  &-btn {
    margin-top: 30px;
    width: 100%;
    font-size: 15px;
    background: #4684ff;
    border-color: #4684ff;
    border-radius: 24px;
    overflow: hidden;
  }
}
</style>