PC二维码(竞赛使用)

PC二维码(竞赛使用)

十一月 06, 2020

题目

1.商品购买后，进行订单结算时，单击【支付宝】图标，如图 3-1 所示，跳转至二维码支付页面，根据商品订单号、用户 ID、收货地址 Id、支付方式信息生成二维码，如图 3-2 所示（注：可以利用 vue-qr 插件技术实现二维码的生成，参阅 U 盘中“03 辅助文档\vue\vue-qr”，项目已集成该插件）。

2.二维码上方显示订单编号。

3.启动手机上的模拟支付宝 APP，输入 PC 端的用户和密码进行 APP 登录，扫描 PC 端支付二维码进行支付，支付成功后，页面显示“支付成功”字样，如图 3-3 所示（可以根据数据库订单状态变化，判断是否支付成功）

二维码模块：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 <qr
    v-if="qrcodeState"
    style="text-align: center"             			 
    :logoSrc="'../../static/images/pay/alipaypcnew.png'"
    :text="qrdata"
    :size="200"
    :margin="0"
></qr>


<script>
import qr from "vue-qr";
 export default {
  components: { qr } //挂载
  data() {
    return {
      payment: null, //订单
      selectContactId: null, //选择的支付方式
      qrcodeState: false, //二维码的显示
    };
  },
  methods: {
      qrcode() {
      this.qrcodeState = true;
          
      var vm = this,
          
      id = this.Storage.Local.get("User").id, //iD
          
      num = this.payment.orderNum;//订单
          
          //定时器检查订单是否支付
      this.check = setInterval(function() {
          
        vm.$post(vm.API.API_CHECK_ORDER, {
          userId: id,
          orderNum: num
        }).then(res => {
            
          if (res.data == 1
          ) {
            vm.Toastr.success("支付成功，2秒钟后跳转到订单历史");
         vm.$store.commit("setCartCount",vm.getCartCount());
              vm.$router.push({
              path: "/account/order/list",
              name: "OrderList"
            });
              
          }
        });
      }, 2000);
     
    },
      
  }
  computed: {//计算属性！！！
    qrdata() {
      return JSON.stringify({ //返回Json对象
        orderNum: this.payment.orderNum,
        userId: this.Storage.Local.get("User").id,
        id: this.selectContactId,
        paymentType: 1
      });
    }
  }，
   destroyed() {//销毁
    clearInterval(this.check);
  }
 }
</script>