从零玩转系列之微信支付实战PC端装修下单页面 | 技术创作特训营第一期

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue'; // 引入home页面
import About from './components/About.vue'; // 引入about页面

Vue.use(VueRouter); // 使用路由配置

// 编辑路由信息
const routes = [
  { path: '/', component: Home },// 如果访问 / 那么跳转到 home页面
  { path: '/about', component: About } // 如果访问 / about 即可跳转about页面 
];

// 创建路由对象将我们自定义的路由引入即可
const router = new VueRouter({
  routes
});

new Vue({
  router,
  el: '#app'
});

    <div class="app-container">
        <div class="container-wall">
            <header>
                <h2>
                    <span>课程列表</span>
                </h2>
            </header>
        </div>
    </div>

<style scoped lang="scss">
.container-wall {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 60px 0 rgb(392 390 288 / 70%);
  padding: 30px 80px;
}
</style>

    <div class="app-container">
        <div class="container-wall">
            <header>
                <h2>
                    <span>课程列表</span>
                </h2>
            </header>
            <!--  墙壁的广告~  -->
            <div class="container-wall-advertisement">
                本案例使用Native模式拉取二维码用户进行微信扫码支付指定商品操作。
            </div>


        </div>
    </div>

<style scoped lang="scss">
.container-wall {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 60px 0 rgb(392 390 288 / 70%);
  padding: 30px 80px;

  .container-wall-advertisement {
    margin-top: 10px;
    color: red;
    margin-bottom: 10px;
    font-size: 14px;
    height: auto !important;
    position: relative;
    padding-left: 30px;
    line-height: 25px;
    font-weight: 500;
  }
}
</style>

  .container-wall-advertisement:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% - 10px);
    width: 4px;
    height: 18px;
    background: #fa8919;
    border-radius: 0 4px 4px 0;
  }

  .container-wall-btn {
    text-align: right;
  }

<div :class="{ active: isActive }"></div>

const isActive = ref(true)
const hasError = ref(false)

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

<div class="static active"></div>

<script setup>
// 定义多个盒子对象
let productList = ref([
    {id: 1, "name": "我是盒子"},
    {id: 2, "name": "我是盒子"},
    {id: 3, "name": "我是盒子"},
    {id: 4, "name": "我是盒子"},
    {id: 5, "name": "我是盒子"},
])
</script>

// 定义当前选中的盒子
let payOrder = ref({
    productId: 1
})

// li 点击事件 将当前点击的id记录起来
function clickLi(id) {
    payOrder.value.productId = id
}

const axios = require('axios');

axios.get('https://api.example.com/data')
    .then(response => {
        console.log('Response:', response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

import axios from "axios";
import {ElMessage} from "element-plus";

// 创建axios实例
const service = axios.create({
    baseURL: "/wx-api", // 部署 api 的 base_url
    timeout: 20000, // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
    (config) => {
        return config;
    },
    (error) => {
        // Do something with request error
        Promise.reject(error);
    }
);

// response 拦截器
service.interceptors.response.use(
    (response) => {
        const res = response.data;

        // 201 表示请求成功自定义处理问题
        if (res.code === 201 || res.code === 200) {
            return response.data;
        } else {
            ElMessage({
                message: res.message,
                type: "error",
                duration: 5 * 1000,
            });
            return Promise.reject("error");
        }

    },
    (error) => {
        ElMessage({
            message: error.message,
            type: "error",
            duration: 5 * 1000,
        });
        return Promise.reject(error);
    }
);

export default service;

// 加载层
let loading = ref(false); 

// 弹出框宽度
let widthBox = ref("350px");
// 确认支付按钮是否禁用
let payBtnDisabled = ref(false);
// 微信支付二维码弹出
let codeDialogVisible = ref(true);
// 微信支付二维码地址
let codeUrl = ref("");

        <!-- 微信支付二维码 -->
        <el-dialog v-model="codeDialogVisible" :width="widthBox" center>
            <div style="display: flex">
                <div>
                    <qrcode-vue :value="codeUrl" :size="300" level="H" />
                    <div class="line">请打开手机微信，扫一扫完成支付</div>
                </div>

                <div class="comp-wxpay-qrcode-tip">
                    <img
                        src="https://qiniu.staticfile.org/static/wxpay_tip-ac45fc3d17795a22330c.png"
                        title=""
                        style=""
                    />
                </div>
            </div>
        </el-dialog>

// 微信支付二维码地址
let codeUrl = ref("weixin://wxpay/bizpayurl?pr=INYxOERzz");

// axios 发送ajax请求
import request from "@/utils/request";

export default {
    /**
     * NativeV3下单
     * @param productId 商品ID
     * @returns {*}
     */
    nativePay(productId) {
        return request({
            url: "/api/wx-pay/native/v3/" + productId,
            method: "post",
        });
    },

    /**
     * 取消接口
     * @param orderNo 订单号
     * @returns {*}
     */
    cancel(orderNo) {
        return request({
            url: "/api/wx-pay/cancel/v3/" + orderNo,
            method: "post",
        });
    },

    /**
     * 退款接口
     * @param orderNo 订单号
     * @param reason 退款理由
     * @param refundNo 支付成功后的交易单号
     * @returns {*}
     */
    refunds(orderNo, reason, refundNo) {
        return request({
            url: "/api/wx-pay/refunds/v3/" + orderNo + "/" + refundNo + "/" + reason,
            method: "post",
        });
    },
};

import request from "@/utils/request";

export default {
  queryOrderStatus(orderNo) {
    return request({
      url: "/api/orderInfo/queryOrderStatus/" + orderNo,
      method: "get",
    });
  },
};