第三十章 订单结算页和微信支付

此博客用于个人学习,来源于网上,对知识点进行一个整理。1. 订单结算页:1.1 页面跳转:在购物车页面的最下方,有一个去结算按钮:当点击结算,我们应该跳转到订单结算页,即:getOrderInfo.html。查看购物车的结算按钮:可以看到,地址是正确的。但是只有登录用户才可以去结算付款,因此我们不能直接跳转,而是在跳转前校验用户的登录状态,如果发现是未登录,应该重定向到登录页。我们给这个按钮绑定点击事件:事件中判断登录状态,进行页面跳转:toOrderInfo() { // 判
摘要由CSDN通过智能技术生成

此博客用于个人学习,来源于网上,对知识点进行一个整理。

1. 订单结算页:

1.1 页面跳转:

在购物车页面的最下方,有一个去结算按钮:

在这里插入图片描述
当点击结算,我们应该跳转到订单结算页,即:getOrderInfo.html。

查看购物车的结算按钮:

在这里插入图片描述
可以看到,地址是正确的。但是只有登录用户才可以去结算付款,因此我们不能直接跳转,而是在跳转前校验用户的登录状态,如果发现是未登录,应该重定向到登录页。我们给这个按钮绑定点击事件:

在这里插入图片描述
事件中判断登录状态,进行页面跳转:

toOrderInfo() {
   
    // 判断是否登录
    ly.verifyUser().then(() => {
   
        // 已登录
        window.location.href = "/getOrderInfo.html"
    }).catch(() => {
   
        // 未登录
        window.location.href = "/login.html?returnUrl=" + window.location.href;
    })
}

1.2 支付方式:

支付方式有2种:

  • 微信支付
  • 货到付款

与我们订单数据中的 paymentType 关联:

在这里插入图片描述
所以我们可以在 Vue 实例中定义一个属性来记录支付方式:

在这里插入图片描述

然后在页面渲染时与这个变量关联:

在这里插入图片描述

1.3 商品列表:

送货清单,其实就是购物车中用户选择的要付款的商品。因此,我们需要在购物车跳转过来的同时,携带选中的购物车的信息。

1)购物车信息获取:

我们修改 cart.html 中的页面跳转逻辑,把用户选中的购物车信息传递过来:

在这里插入图片描述
然后在 created 钩子函数中获取购物车数据,保存到本地属性,要注意的是,我们应该在获取数据前校验用户登录状态,如果发现未登录,则直接重定向到登录页:

在这里插入图片描述
2)页面渲染:

要修改的页面位置:每一个 li 就是一件商品

在这里插入图片描述
修改为:

<ul class="send-detail">
    <li v-for="(cart,index) in carts" :key="index">
        <div class="sendGoods">
            <ul class="yui3-g">
                <li class="yui3-u-1-6">
                    <span><img width="70px" height="70px" :src="cart.image"/></span>
                </li>
                <li class="yui3-u-7-12"</
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CLPHP 订单系统 2018 WEB、WAP 自适应版——竞价订单系统,快速下单,有邮件提醒,短信提醒。 功能强大、安全、稳定、防注入、不会空单、丢单等。本系统完全开源没有任何加密 CLPHP 订单系统 2018 WEB、WAP 自适应版主要功能: 1.颠覆传统,增加产品型号、产品尺寸、产品颜色等产品多选项选择,满足亲们多样需求 2.超乎想象,自带十六种可自适应电脑站和手机站的样式,一套源码解决亲 PC 端、WAP 端使用订单系统问题,全部为全新界面,更加美观、大气 3.带邮件提醒+手机短信提醒{手机邮箱开启短信提示功能即可},特别增强对将 QQ 邮箱设置为订单发件箱的支持;邮件标题进一步优化,显示订单编号、姓名、联系电话 4.产品套餐选择支持单选、复选、下拉选择,迎合亲们的各种喜好 5.带订单来路页面和下单页面地址检测 6.支持下单人 IP 追踪 7.支持设置同一 IP 下单间隔时间,防重复提交;增强恶意空单拦截,有效应对恶意客户拦截传递过程中的订单信息后提交空单行为 8.升级优化邮件系统内核到最新 9.对空间要求更宽泛,fsockopen、pfsockopen 和 stream_socket_client 三个函数只需要开一个即可使用,支持绝大多数的 PHP 空间 10.相关提示更加人性化,拥有本订单系统的亲们能根据错误提示快速明了订单系统无法正常工作的原因,方便对症下药,迅速安装配置 11、增强支付宝付款接口,在支付宝业务调整,免签接口失效后,本店第一时间升级了订单系统,提供了收款码收款(支付宝收款码获取方法及替换方法见附送的 WORD 文档)及支付宝商户(即时到账、担保交易)双接口,方便买家根据自己的需求切换使用 12、新增微信付款接口,客户无需加好友,直接扫描二维码(微信支付付款二维码获取方法及替换方法见附送的 WORD 文档)完成支付。 13、加入伪数据库功能,订单提交失败自动写入设置好的数据文件中,确保不漏一单 请注意您空间要支持 PHP 或全能空间,空间不能禁用 SMTP.纯 ASP 空间不能使用本订单系统。 请注册一个 163 邮箱用来发信,(当然也可用其它邮箱发信,只是麻烦些)再注册一个手机邮箱用来收订单,同时手机邮箱请设置手机通知邮件到达免费提醒功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值