支付接口

src/views/PersonalCenter/ExaminationPayment/PayDetails.vue

@@ -26,38 +26,92 @@
      <el-form-item label="考点：">
        {{ form.want_place_name }}
      </el-form-item>
      <el-form-item label="缴费方式：" v-if="form.pay_state == '未缴费'">
        <el-select v-model="payValue" placeholder="请选择">
          <el-option label="微信" value="1">微信</el-option>
          <el-option label="支付宝" value="2">支付宝</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="缴费方式：" v-if="form.pay_state != '未缴费'">
        微信
      </el-form-item>
    </el-form>
    <p slot="footer" class="dialog-footer" style="text-align: center;margin: 0;">
      <el-button v-if="form.pay_state == '未缴费'" type="primary" style="border-radius: 3rem;width: 4rem;margin-bottom:.4rem;">缴费</el-button>
      <el-button @click="toPay" v-if="form.pay_state == '未缴费'" type="primary" style="border-radius: 3rem;width: 4rem;margin-bottom:.4rem;">缴费</el-button>
    </p>
  </div>
</template>
<script>
import local from "@/utils/local";
import {
  getMyPayIsClose, //列表
} from "@/api/home";
export default {
  data() {
    return {
      form: {},
      payValue: ""
      payValue: "",
      payState: "",
    }
  },
  created() {
    this.form = local.get("payDetails");
    this.myPayIsClose();
  },
  methods: {
    // 缴费节点状态
    async myPayIsClose() {
      let res = await getMyPayIsClose({});
      // 解构数据
      let { code, data, msg } = res;
      // 赋值渲染
      if (code === 200) {
        this.payState = msg;
      }
    },
    goback() {
      this.$router.go(-1)
    }
    },
    toPay() {
      if(this.payState == 'true'){
        this.$message("考试缴费还未开启，请稍后操作");
      }else{
        const serverBaseUrl = window.serverUrl.url;
        var xhr = new XMLHttpRequest();
        var url = serverBaseUrl+'/easypay/pay';
        xhr.open("post", url, true);
        xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8')
        xhr.setRequestHeader('Authorization', 'Bearer 1');
        var data = {
            enroll_id:'0b716740f24544939d40685c02333ddb'
        };
        xhr.send(JSON.stringify(data));
        xhr.onreadystatechange = function () {
          if (xhr.readyState == XMLHttpRequest.DONE) {
            console.log('结果0：', xhr.responseText)
            try {
              if (xhr.responseText) {
                const response = JSON.parse(xhr.responseText);
                console.log('结果1：', response)
                if (xhr.status && xhr.status == 200) {
                  if (response.code == 500) {
                    //alert(response.msg);
                  } else if (response.code == 200) {
                    let url = response.data.redirectUrl;
                    window.open(url, '_blank').location;
                    let con;
                    con=confirm("是否已完成支付?"); //在页面上弹出对话框
                    if(con==true) window.location.reload();
                    else ;
                    // alert('信息显示为：是否已经完成支付? 已支付、未支付两个按钮!')
                    //TODO 点击"已支付"，刷新当前页面。  点击"未支付"，什么也不操作，弹框消失
                  }
                } else {
                    alert(response.msg);
                }
              }
            } catch (e) {
            }
          }
        };
      }
    },
  }
}
</script>

src/views/PersonalCenter/ExaminationPayment/index.vue

@@ -17,13 +17,11 @@
import local from "@/utils/local";
import {
  getPayList, //列表
  getMyPayIsClose,
} from "@/api/home";
export default {
  data() {
    return {
      tableData: [],
      payState: "",
    }
  },
  created() {
@@ -42,32 +40,13 @@ export default {
      // 赋值渲染
      if (code === 200) {
        this.tableData = data.myEnroll;
        this.myPayIsClose();
      }
    },
    // 缴费节点状态
    async myPayIsClose() {
      let res = await getMyPayIsClose({});
      // 解构数据
      let { code, data, msg } = res;
      // 赋值渲染
      if (code === 200) {
        this.payState = msg;
      }
    },
    detail(val) {
      if(this.payState == 'true'){
        if(val.pay_state == '未缴费'){
          this.$message("考试缴费还未开启，请稍后操作");
        }
      }else{
        local.set("payDetails", val);
        this.$router.push({
          path:"/pay_details",
        });
      }
      local.set("payDetails", val);
      this.$router.push({
        path:"/pay_details",
      });
    },
    goback() {
      this.$router.go(-1)

src/views/home/index.vue

@@ -90,7 +90,7 @@ export default {
    border-bottom: 1px solid #f2f2f2;
  }
  .home-search /deep/ .el-input {
    width: 75%;
    width: 74%;
    margin: 0 auto;
  }
  .home-search /deep/ .el-button {
@@ -119,7 +119,7 @@ export default {
  }
  .footer_img {
    width: 100%;
    margin: .2rem .15rem;
    text-align: center;
    img {
      margin: 0 .1rem;
      width: 170px;