41、支付页面_数据展示
1、修改标题
pages\pay\index.json
{
"usingComponents": {
},
"navigationBarTitleText": "商品支付"
}
2、快速将购物车的布局搬过来
复制内容pages\cart\index.wxml——>>>pages\pay\index.wxml
复制文件pages\cart\index.less——>>>pages\pay下
复制内容pages\cart\index.js———>>>pages\pay\index.js
修改布局（初步修改）
<!--收货地址-->
<view class="revice_address_row">
<view class="user_info_row">
<view class="user_info">
<view>{
{address.userName}}</view>
<!-- <view>{
{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view> -->
<!-- 将address.provinceName+address.cityName+address.countyName+address.detailInfo代码放入pages\cart\index.js进行拼接 -->
<view>{
{address.all}}</view>
</view>
<view class="user_phone">{
{address.telNumber}}</view>
</view>
</view>
<!-- 购物车内容-->
<view class="cart_content">
<view class="cart_title">购物车</view>
<view class="cart_main">
<!--当cart数组长度不为0显示商品信息-->
<view class="cart_item"
wx:for="{
{cart}}"
wx:key="goods_id">
<!--商品图片-->
<navigator class="cart_img_wrap">
<image mode="widthFix" src="{
{item.goods_small_logo}}"></image>
</navigator>
<!--商品信息-->
<view class="cart_info_wrap">
<view class="goods_name">{
{item.goods_name}}</view>
<view class="goods_price_wrap">
<view class="goods_price">￥{
{item.goods_price}}</view>
<view class="cart_num_tool">
<view class="goods_num">X {
{item.num}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!--底部工具栏-->
<view class="footer_tool">
<!--总价格-->
<view class="total_price_wrap">
<view class="total_price">
合计:<text class="total_price_text">￥{
{totalPrice}}</text>
</view>
<view>包含运费</view>
</view>
<!--支付-->
<view class="order_pay_wrap">
支付{
{totalNum}}
</view>
</view>
修改样式（初步修改）
pages\pay\index.less
page{
padding-bottom: 90rpx;
}
.revice_address_row{
.user_info_row{
display: flex;
padding: 20rpx;
.user_info{
flex: 5;
}
.user_phone{
flex:3;
text-align: right;
}
}
}
.cart_content {
.cart_title {
padding:20rpx;
font-size: 36rpx;
color: var(--themeColor);
border-top:1rpx solid currentColor;
border-bottom:1rpx solid currentColor;
}
.cart_main {
.cart_item {
display: flex;
padding: 10rpx;
border-bottom:1rpx solid#ccc;
.cart_img_wrap {
flex:2;
display: flex;
justify-content: center;
align-items: center;
image {
width: 80%;
}
}
.cart_info_wrap {
flex:4;
display: flex;
flex-direction: column;
justify-content: space-around;l
.goods_name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
color:#666;
}
.goods_price_wrap {
display: flex;
justify-content: space-between;
.goods_price {
color: var(--themeColor);
font-size: 34rpx;
}
.cart_num_tool {
display: flex;
.goods_num {
width: 55rpx;
height: 55rpx;
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: 1rpx solid #ccc;
.total_price_wrap {
flex: 5;
padding-right: 15rpx;
text-align: right;
.total_price {
.total_price_text {
color: var(--themeColor);
font-size: 34rpx;
font-weight: 600;
}
}
}
.order_pay_wrap {
flex: 3;
background-color: var(--themeColor);
color:#fff;
font-size: 32rpx;
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
}
}
修改业务逻辑js（初步修改）
pages\pay\index.js
import {
getSetting, chooseAddress, openSetting, showModal, showToast} from "../../utils/asyncWx.js";
// 在小程序代码里使用es7的async和await语法(引入解决报错的包)
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data:{
address:{
},
cart:[],
totalPrice:0,
totalNum:0
},
onShow(){
// 1 获取缓存中的收货地址信息
const address=wx.getStorageSync('address');
// 获取缓存中的购物车数据
const cart=wx.getStorageSync("cart")||[];
this.setData({
address});
this.setCart(cart);
},
// 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
setCart(cart){
let allChecked=true;
// 总价格 总数量
let totalPrice = 0;
let totalNum = 0;
cart.forEach(v=>{
if(v.checked){
totalPrice += v.num * v.goods_price;
totalNum += v.num;
} else {
allChecked = false;
}
})
// 判断数组是否为空
allChecked=cart.length !=0 ? allChecked : false;
this.setData({
cart,
totalPrice,
totalNum,
allChecked
});
wx.setStorageSync("cart", cart);
},
})
重新修改支付页面的业务逻辑
1 页面加载的时候
从缓存中获取购物车数据渲染到页面中
这些数据 checked = true
pages\pay\index.js
import {
getSetting, chooseAddress, openSetting, showModal, showToast} from "../../utils/asyncWx.js";
// 在小程序代码里使用es7的async和await语法(引入解决报错的包)
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data:{
address:{
},
cart:[],
totalPrice:0,
totalNum:0
},
onShow(){
// 1 获取缓存中的收货地址信息
const address=wx.getStorageSync('address');
// 获取缓存中的购物车数据
let cart=wx.getStorageSync("cart")||[];
// 过滤后的购物车数组
cart=cart.filter(v=>v.checked);
this.setData({
address});
// 总价格 总数量
let totalPrice = 0;
let totalNum = 0;
cart.forEach(v=>{
totalPrice += v.num * v.goods_price;
totalNum += v.num;
})
this.setData({
cart,
totalPrice,
totalNum,
address
});
}
})
点击结算
