微信小程序商城项目实战(第七篇:生成订单支付页)

微信小程序商城项目实战(第七篇:生成订单支付页)订单支付分析代码实现效果图展示分析顶部改为”支付”上方为地址,跳转至地址管理,可修改下方为订单信息最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页如果不支付则可以在我的订单内容查看该订单并且继续支付代码实现改变顶部导航内容”navigationBarTitleText”:”支付”界面:<navigatorurl=”/pages/addressList/addressList”class=”user_info_row”wx:if=”{{statu!=’待发

大家好,又见面了,我是你们的朋友全栈君。

分析

顶部改为”支付”
上方为地址,跳转至地址管理,可修改
下方为订单信息
最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页
如果不支付则可以在我的订单内容查看该订单并且继续支付

代码实现

改变顶部导航内容"navigationBarTitleText": "支付"
界面:

<navigator url="/pages/addressList/addressList" class="user_info_row" wx:if="{ 
    {statu!='待发货'}}">
  <view class="user_info" wx:for="{ 
    {addressList}}" wx:if="{ 
    {item.statu==true}}" wx:key="index">
    <view>{
  
  {item.name}}</view>
    <view>{
  
  {item.city}}{
  
  {item.address}}</view>
  </view>
  <view class="user_phone">{
  
  {item.tel}}</view>
</navigator>

<view class="user_info_row" wx:if="{ 
    {statu=='待发货'}}">
  <view class="user_info" wx:for="{ 
    {address}}" wx:key="index">
    <view>{
  
  {item.name}}</view>
    <view>{
  
  {item.city}}{
  
  {item.address}}</view>
  </view>
  <view class="user_phone">{
  
  {item.tel}}</view>
</view>

<!--购物车的内容-->
<view class="cart_content">
  <view class="cart_title">订单</view>
  <view class="cart_main">
    <!--当cart数组不为0显示 -->

    <view class="cart_item" wx:for="{ 
    {payList}}" wx:key="index">

      <!--商品图片-->
      <navigator class="cart_img_wrap">
        <image src="{ 
    {item.goods.goods_small_logo}}" mode="widthFix" />
      </navigator>
      <!--商品信息-->
      <view class="cart_info_wrap">
        <view class="goods_name">
          {
  
  {item.goods.goods_name}}
        </view>
        <view class="goods_price_wrap">
          <view class="goods_price">¥{
  
  {item.goods.goods_price}}</view>
          <view class="cart_num_tool">
            <view class="goods_num">X {
  
  {item.shu}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!--底部工具栏-->
<view class="footer_tool" wx:if="{ 
    {statu!='待发货'}}">

  <!--总价格-->
  <view class="total_price_wrap">
    <view class="total_price">
      合计
      <text class="total_price_text">¥{
  
  {sum}}</text>
    </view>
    <view>
      包含运费
    </view>

  </view>
  <!--结算-->
  <view class="order_pay_wrap" bindtap="payshop">支付({
  
  {num}})</view>
</view>

js

  • payList:支付的信息,即支付的商品列表
  • addressList:所有的收货地址
  • sum:总金额
  • num:数量
  • orderid:订单id
  • statu:订单状态
  • address:所选择的收货地址

函数:

  • onLoad(options)页面加载执行,主要是提供订单信息
  • onshow()页面显示时执行,主要是进行判断该订单的状态并且进行赋值
  • payshop():支付函数
// pages/pay/pay.js
Page({ 
   

    /** * 页面的初始数据 */
    data: { 
   
        payList:[],
        addressList:[],
        sum:0,
        num:0,
        orderid:0,
        statu:'待付款',
        address:[]
    },

    /** * 生命周期函数--监听页面加载 */
    onLoad: function (options) { 
   
        let order1=wx.getStorageSync('orderList')||[];
        var newpaylist=[];
        console.log(options.orderid);
        let sum=0;
        let num=0;
        let orid=0;
        let zt='待付款';
        if(options.orderid!=undefined){ 
   
            newpaylist=order1.filter((item)=>{ 
   
                return item.orderid==options.orderid;
            })
            sum=newpaylist[0].goods[0].sum;
            num=newpaylist[0].goods[0].num;
            orid=options.orderid;
            zt=newpaylist[0].statu;
            this.setData({ 
   
                payList:newpaylist[0].goods
            })
        }else{ 
   
            newpaylist=wx.getStorageSync('payList')||[];
            sum=newpaylist[0].sum;
            num=newpaylist[0].num;
            orid=newpaylist[0].orderid;
            this.setData({ 
   
                payList:newpaylist
            })
            
        }
        
        console.log(orid);
        this.setData({ 
   
            sum:sum,
            num:num,
            orderid:orid,
            statu:zt
        })
        console.log(this.data.payList);
        var order=wx.getStorageSync('orderList')||[];
        if(order.length==0){ 
   
            let ord=[];
            order={ 
   
                goods:this.data.payList,
                statu:'待付款',
                orderid:this.data.orderid
            };
            console.log(order);
            ord.push(order)
            wx.setStorageSync('orderList',ord)
        }else{ 
   
            
            let flag=order.findIndex((item)=>{ 
   
                return item.orderid==this.data.payList[0].orderid;
            })
            if(flag==-1){ 
   
                let ord={ 
   
                    goods:this.data.payList,
                    statu:'待付款',
                    orderid:this.data.orderid
                }
                order.push(ord)
                wx.setStorageSync('orderList',order)
            }else{ 
   
                console.log('已存在该订单');
            }
        }
    },

    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady: function () { 
   

    },

    /** * 生命周期函数--监听页面显示 */
    onShow: function () { 
   
        let addressList=wx.getStorageSync('address')||[];
        this.setData({ 
   
            addressList:addressList
        })
        let address=wx.getStorageSync('orderList')||[];
        console.log(this.data.orderid);
        let index=address.findIndex((item)=>{ 
   
            return item.orderid==this.data.orderid;
        })
        this.setData({ 
   
            address: address[index]
        })
    },
    //支付
    payshop(){ 
   
        let order=wx.getStorageSync('orderList')||[];
        let addressList=wx.getStorageSync('address')||[];
        let flag=order.findIndex((item)=>{ 
   
            return item.orderid==this.data.payList[0].orderid;
        })
        var address=addressList[0];
        for(let i=0;i<addressList.length;i++){ 
   
            if(addressList[i].statu==true){ 
   
                console.log(addressList);
                address=addressList[i];
            }
        }
        var sz=[];
        
        wx.showModal({ 
   
            title: '提示',
            content: '确认支付?',
            success (res) { 
   
              if (res.confirm) { 
   
                if(address.address==undefined){ 
   
                    for(let j=0;j<order.length;j++){ 
   
                        let new1={ 
   
                        goods:order[j].goods,
                        orderid:order[j].orderid,
                        statu:'待发货',
                        address:address
                        }
                        sz.push(new1)
                    }
                }else{ 
   
                    order[flag].address=address;
                    order[flag].statu='待发货'
                    console.log(order[flag]);
                    sz=order;
                }
                // sz[flag].statu='待发货';
                wx.setStorageSync('orderList', sz);//更新状态
                wx.showToast({ 
   
                    title: '正在支付',
                    icon:"loading",
                    duration: 800//持续的时间
                })
                wx.showToast({ 
   
                    title: '支付成功',
                    icon:"success",
                    duration: 800//持续的时间
                })
                wx.redirectTo({ 
   
                  url: '/pages/order/order',
                })
              } else if (res.cancel) { 
   
                wx.showToast({ 
   
                    title: '支付失败',
                    icon:"error",
                    duration: 800//持续的时间
                })
              }
            }
          })
          
    }
})

css样式

page { 
   
    padding-bottom: 90rpx;
  }
  .cart_content .cart_title { 
   
    padding: 20rpx;
    color: var(--themeColor);
    font-size: 36rpx;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .cart_content .cart_main .cart_item { 
   
    display: flex;
    padding: 10rpx;
    border-bottom: 1px solid #ccc;
  }
  .cart_content .cart_main .cart_item .cart_img_wrap { 
   
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
   
  }
  .cart_content .cart_main .cart_item .cart_img_wrap image{ 
   
    width: 80%;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap { 
   
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap .goods_name { 
   
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: #666;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap .goods_price_wrap { 
   
    display: flex;
    justify-content: space-between;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap .goods_price_wrap .goods_price { 
   
    color: var(--themeColor);
    font-size: 34rpx;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap .goods_price_wrap .cart_num_tool { 
   
    display: flex;
  }
  .cart_content .cart_main .cart_item .cart_info_wrap .goods_price_wrap .cart_num_tool .goods_num { 
   
    width: 50rpx;
    height: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .footer_tool { 
   
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90rpx;
    background-color: #fff;
    display: flex;
    border-top: 1px solid #ccc;
  }
  .footer_tool .total_price_wrap { 
   
    flex: 4;
    padding-left: 15rpx;
  }
  .footer_tool .total_price_wrap .total_price .total_price_text { 
   
    color: var(--themeColor);
    font-size: 34rpx;
    font-weight: 600;
  }
  .footer_tool .order_pay_wrap { 
   
    flex: 3;
    background-color: var(--themeColor);
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

效果图展示

订单生成
在这里插入图片描述

点击支付时:在这里插入图片描述

点击确认即可支付成功,取消则支付失败,
后续可在订单列表查看,这里还没有做,后续做~
完成~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/136871.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • PyTorch学习之归一化层(BatchNorm、LayerNorm、InstanceNorm、GroupNorm)[通俗易懂]

    PyTorch学习之归一化层(BatchNorm、LayerNorm、InstanceNorm、GroupNorm)[通俗易懂]BN,LN,IN,GN从学术化上解释差异:BatchNorm:batch方向做归一化,算NHW的均值LayerNorm:channel方向做归一化,算CHW的均值InstanceNorm:一个channel内做归一化,算H*W的均值GroupNorm:将channel方向分group,然后每个group内做归一化,算(C//G)HW的均值…

  • OpenGrok介绍「建议收藏」

    OpenGrok介绍「建议收藏」2019独角兽企业重金招聘Python工程师标准>>>…

  • git push到远程指定分支(git拉取指定分支代码)

    一、pull操作1、将远程指定分支拉取到本地指定分支上:gitpull&lt;远程仓库名&gt;&lt;远程分支名&gt;:&lt;本地分支名&gt;2、将远程指定分支拉取到本地当前分支上:gitpull&lt;远程仓库名&gt;&lt;远程分支名&gt;3、将与本地当前分支同名的远程分支拉取到本地当前分支上gitpull&lt;远程仓库名&…

  • TinyXML2使用方法及示例

    TinyXML2使用方法及示例转自https://blog.csdn.net/liang_baikai/article/details/78783839概述 TinyXML2是简单实用的开源的C++XML文件解析库,可以很方便的应用到现有的项目之中。  TinyXML2解析器相对TinyXML1在代码上是完全重写,使其更适合于游戏开发中使用。它使用更少的内存,更快,并使用更少的内存分配。说明 xml类似数据库,…

  • HttpCanary下载_Http是

    HttpCanary下载_Http是前言首先,我们无论学习哪个框架,都要带着问题,带着思考去学习思考1:HttpRunner是什么?思考2:HttpRunner的设计模式是什么?思考3:为什么我们要学习HttpRunner?他的

  • pandas 读取excel文件

    pandas 读取excel文件pandas读取excel文件一read_excel()的基本用法二read_excel()的常用的参数:三示例1.IO:路径2.sheet_name:指定工作表名3.header:指定标题行4.names:指定列名5.index_col:指定列索引6.skiprows:跳过指定行数的数据7.skipfooter:省略从尾部的行数据8.dtype指定某些列的数据类型pandas读取excel文件使用的是read_excel方法。本文将详细解析read_excel方法

    2022年10月23日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号