1

src/前端/src/pages/check.vue

@@ -0,0 +1,248 @@
+<script setup>
+// 导入request请求工具类
+import {
+  getBaseUrl,
+  requestUtil
+} from '../../utils/requestUtil.js';
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    baseUrl: '',
+    cart:[],
+    address:{},
+    totalPrice:0,
+    totalNum:0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    const baseUrl=getBaseUrl();
+    this.setData({
+      baseUrl
+    })
+  },
+
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    console.log("show")
+    const address=wx.getStorageSync('address');
+    let cart=wx.getStorageSync('cart')||[];
+    // 选中的商品显示
+    cart=cart.filter(v=>v.checked);
+    let totalPrice=0;
+    let totalNum=0;
+    cart.forEach(v=>{
+      totalPrice+=v.num*v.price;
+      totalNum+=v.num;
+    })
+
+    this.setData({
+      cart,
+      address,
+      totalNum,
+      totalPrice
+    })
+  }
+
+})
+
+</script>
+
+<template>
+  <!-- 收货地址 开始 -->
+  <view class="revice_address_row">
+
+    <view class="user_info">
+      <view class="user_info_item">{{address.provinceName+address.cityName+address.countyName}}</view>
+      <view class="user_info_item user_info_detail">{{address.detailInfo}}</view>
+      <text class="user_info_item" decode="{{true}}">{{address.userName}}&nbsp;&nbsp;{{address.telNumber}}</text>
+    </view>
+
+  </view>
+  <!-- 收货地址 结束 -->
+
+  <!-- 购物车清单 开始 -->
+  <view class="cart_content">
+    <view class="cart_main">
+
+      <view class="cart_item"
+            wx:for="{{cart}}"
+            wx:key="id"
+      >
+
+        <!-- 商品图片 开始 -->
+        <navigator class="cart_img_warp" url="/pages/product_detail/index?id={{item.id}}">
+          <image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
+        </navigator>
+        <!-- 商品图片 结束 -->
+
+        <!-- 商品信息 开始 -->
+        <view class="cart_info_warp">
+          <navigator url="/pages/product_detail/index?id={{item.id}}">
+            <view class="goods_name">{{item.name}}</view>
+          </navigator>
+          <view class="goods_price_warp">
+            <view class="goods_price">¥ {{item.price}}</view>
+            <view class="cart_num_tool">
+
+              <view class="goods_num">×{{item.num}}</view>
+
+            </view>
+          </view>
+        </view>
+        <!-- 商品信息 结束 -->
+      </view>
+
+    </view>
+  </view>
+  <!-- 购物车清单 结束 -->
+
+  <!-- 底部工具类 开始 -->
+  <view class="footer_tool">
+
+
+    <!-- 总价格 开始 -->
+    <view class="total_price_wrap">
+      <view class="total_price">
+        共{{totalNum}}件，合计<text class="total_price_text" decode="{{true}}">&nbsp;¥ {{totalPrice}}</text>
+      </view>
+    </view>
+    <!-- 总价格 结束 -->
+
+    <!-- 结算 开始 -->
+    <view class="order_pay_wrap" bindtap="handlePay">
+      去付款
+    </view>
+    <!-- 结算 结束 -->
+  </view>
+  <!-- 底部工具类 结束 -->
+
+</template>
+
+<style scoped>
+page{
+  padding-bottom: 70rpx;
+}
+
+.revice_address_row{
+  border-bottom: 1rpx dotted gray;
+  padding: 20rpx;
+  .user_info{
+    .user_info_item{
+      margin-top: 10rpx;
+    }
+    .user_info_detail{
+      font-size: 20px;
+      font-weight: bolder;
+      margin-bottom: 10rpx;
+    }
+  }
+}
+
+.cart_content{
+  background-color: #F5F5F5;
+  .cart_main{
+    padding: 2rpx 10rpx 10rpx 10rpx;
+    .cart_item{
+      display: flex;
+      background-color: white;
+      border-radius: 10px;
+      margin: 20rpx;
+      padding-right: 20rpx;
+
+      .cart_img_warp{
+        flex:2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 20rpx;
+        border-radius: 10px;
+        background-color: #F5F5F5;
+        image{
+          width: 80%;
+        }
+      }
+      .cart_info_warp{
+        flex:4;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        navigator{
+          .goods_name{
+            font-weight: bolder;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+          }
+        }
+        .goods_price_warp{
+          display: flex;
+          justify-content: space-between;
+          .goods_price{
+            color:var(--themeColor);
+            font-size:34rpx;
+          }
+          .cart_num_tool{
+            display: flex;
+
+            .goods_num{
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+.footer_tool{
+  display: flex;
+  width: 100%;
+  height: 90rpx;
+  background-color: #fff;
+  border-top: 1px solid #ccc;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  padding-left: 30rpx;
+  .total_price_wrap{
+    flex:5;
+    display: flex;
+
+    align-items: center;
+    .total_price{
+      .total_price_text{
+        color:var(--themeColor);
+        font-size: 34rpx;
+        font-weight: bold;
+      }
+    }
+  }
+  .order_pay_wrap{
+    flex:3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient(90deg,#FF740B,#FE6227);
+    margin: 10rpx;
+    color:#fff;
+    font-weight: 600;
+    font-size: 32rpx;
+    border-radius: 20px;
+  }
+}
+
+</style>