需求调整

app.json

@@ -11,7 +11,8 @@
     "page/component/search/search",
     "page/component/myOrders/myOrder",
     "page/component/refund/refund",
-    "page/component/invoice/invoice"
+    "page/component/invoice/invoice",
+    "page/component/myOrders2/myOrder2"
   ],
   "window": {
     "navigationBarTextStyle": "white",

page/component/details/details.js

@@ -1,6 +1,15 @@
-// page/component/details/details.js
 Page({
-  onLoad: function (options) {
+  data: {
+    goods: {},
+    specList: [],
+    selectedSpecs: [], // 用户选择的规格
+    buyNum: 1, // 购买数量
+    showPopup: false, // 控制弹出层显示
+    userInfo: {}, // 用户信息
+    viewGood: "",
+  },
+
+  onLoad(options) {
     const goods = {
       id: options.id,
       goodName: options.goodName,
@@ -8,99 +17,101 @@ Page({
       goodDetail: options.goodDetail,
       goodImage: decodeURIComponent(options.goodImage).split(','),
     };
-    this.setData({ goods });
+    const specList = [
-  },
+      {
-  data: {
+        specId: 1,
-    goods: {},
+        title: "枕头类型",
-    list: [
+        specValueList: [
-      '/image/beizi1.jpg',
+          { specValueId: 1, specValue: "普通蓬松枕", isSelected: false, goodImage: "/image/zhentou1.jpg" },
-      '/image/beizi1.jpg'
+          { specValueId: 2, specValue: "压缩高级枕", isSelected: false, goodImage: "/image/zhentou2.jpg" }
-    ],
+        ]
-    num: 1,
-    totalNum: 0,
-    hasCarts: false,
-    curIndex: 0,
-    show: false,
-    scaleCart: false,
-    userInfo: {},
-    interval: 3000,
-    duration: 800,
-  },
-
-  onBuyClick() {
-    const self = this;
-    // 获取用户信息
-    wx.getUserProfile({
-      desc: '用于完善会员资料', // 提示信息，表明获取用户信息的用途
-      success: (res) => {
-        console.log('用户信息:', res.userInfo);
-
-        // 将用户信息保存到data中（或发送给服务器）
-        self.setData({
-          userInfo: res.userInfo
-        });
-
-        // 构建订单信息的 URL
-        const { id, title, image, price } = self.data.goods;
-        const num = self.data.num;
-        const url = `../orders/orders?id=${id}&title=${title}&image=${image[0]}&price=${price}&num=${num}`;
-
-        // 跳转到订单页面
-        wx.navigateTo({
-          url: url,
-        });
       },
-      fail: (err) => {
+      {
-        console.error('获取用户信息失败:', err);
+        specId: 2,
+        title: "枕被套 、床单颜色",
+        specValueList: [
+          { specValueId: 3, specValue: "贝诺灰", isSelected: false, goodImage: "/image/beizi2.jpg" },
+          { specValueId: 4, specValue: "开心日记", isSelected: false, goodImage: "/image/beizi3.jpg" },
+          { specValueId: 5, specValue: "草莓熊", isSelected: false, goodImage: "/image/beizi4.jpg" },
+          { specValueId: 6, specValue: "乖乖狗", isSelected: false, goodImage: "/image/beizi5.jpg" },
+          { specValueId: 7, specValue: "蓝心小熊", isSelected: false, goodImage: "/image/beizi6.jpg" },
+          { specValueId: 8, specValue: "初夏-紫", isSelected: false, goodImage: "/image/beizi7.jpg" }
+        ]
       }
+    ];
+    this.setData({ goods, specList, viewGood: goods.goodImage[0] });
+  },
+
+  openPopup() {
+    this.setData({ showPopup: true });
+  },
+
+  handlePopupHide() {
+    this.setData({ showPopup: false });
+  },
+
+  selectSpec(e) {
+    const { specid, id } = e.currentTarget.dataset;
+    let specList = this.data.specList.map(spec => {
+      if (spec.specId === specid) {
+        spec.specValueList = spec.specValueList.map(item => {
+          item.isSelected = item.specValueId == id;
+          return item;
+        });
+      }
+      return spec;
+    });
+    this.setData({ specList, viewGood: e.currentTarget.dataset.goodimage });
+    this.updateSelectedSpecs();
+  },
+  goToHome() {
+    wx.switchTab({
+      url: '/page/component/index' // 使用switchTab跳转到首页（tabbar页面）
     });
   },
-  addCount() {
+  updateSelectedSpecs() {
-    let num = this.data.num;
+    const selectedSpecs = this.data.specList.map(spec => {
-    num++;
+      const selectedItem = spec.specValueList.find(item => item.isSelected);
-    this.setData({
+      return selectedItem ? selectedItem.specValue : null;
-      num: num
+    }).filter(item => item);
-    })
+    this.setData({ selectedSpecs });
   },
-  reduceCount() {
+
-    let num = this.data.num;
+  handleBuyNumChange(e) {
-    if (num > 1) {
+    this.setData({
-      num--;
+      buyNum: e.detail.value
+    });
+  },
+
+  confirmSpecs() {
+    console.log(this.data.selectedSpecs)
+    if (this.data.selectedSpecs.length < this.data.specList.length) {
+      wx.showToast({
+        title: '请选择所有规格',
+        icon: 'none'
+      });
+      return;
     }
-    this.setData({
-      num: num
-    })
-  },
 
-  addToCart() {
+    this.setData({ showPopup: false });
-    const self = this;
-    const num = this.data.num;
-    let total = this.data.totalNum;
 
-    self.setData({
+    // wx.getUserProfile({
-      show: true
+    //   desc: '用于完善会员资料',
-    })
+    //   success: (res) => {
-    setTimeout(function () {
+    // this.setData({ userInfo: res.userInfo });
-      self.setData({
-        show: false,
-        scaleCart: true
-      })
-      setTimeout(function () {
-        self.setData({
-          scaleCart: false,
-          hasCarts: true,
-          totalNum: num + total
-        })
-      }, 200)
-    }, 300)
 
-  },
+    const { id, goodName, goodImage, goodPrice } = this.data.goods;
+    const num = this.data.buyNum;
+    const url = `../orders/orders?id=${id}&title=${goodName}&image=${goodImage[0]}&price=${goodPrice}&num=${num}&specs=${this.data.selectedSpecs.join(',')}`;
 
-  bindTap(e) {
+    wx.navigateTo({ url });
-    const index = parseInt(e.currentTarget.dataset.index);
+    //   },
-    this.setData({
+    //   fail: (err) => {
-      curIndex: index
+    //     wx.showToast({
-    })
+    //       title: '获取用户信息失败',
+    //       icon: 'none'
+    //     });
+    //   }
+    // });
   }
-
+});
-})

page/component/details/details.json

@@ -2,6 +2,10 @@
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
     "t-tag": "tdesign-miniprogram/tag/tag",
-    "t-icon": "tdesign-miniprogram/icon/icon"
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-popup": "tdesign-miniprogram/popup/popup",
+    "t-image": "tdesign-miniprogram/image/image",
+    "t-stepper": "tdesign-miniprogram/stepper/stepper",
+    "t-toast": "tdesign-miniprogram/toast/toast"
   }
 }

page/component/details/details.wxml

@@ -1,6 +1,5 @@
 <view class="main">
   <view class="goods-box">
-    <!-- <image src="{{goods.image}}" class="goods-thumb"></image> -->
     <swiper class="banner" indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true">
       <block wx:for="{{goods.goodImage}}" wx:key="index">
         <swiper-item>
@@ -8,18 +7,11 @@
         </swiper-item>
       </block>
     </swiper>
-    <!-- <navigator open-type="switchTab" url="../cart/cart">
-            <view class="carts-icon {{scaleCart?'on':''}}">
-                <image src="/image/cart2.png"></image>
-                <text class="carts-icon-num" wx:if="{{hasCarts}}">{{totalNum}}</text>
-            </view>
-        </navigator> -->
-
-    <!-- <view class="goods-operation"> -->
     <view class="goods-info">
       <view class="left-section">
         <view class="goods-price">￥ {{goods.goodPrice}}</view>
         <view class="goods-title">{{goods.goodName}}</view>
+        <view class="goods-detail">{{goods.goodDetail}}</view>
       </view>
       <view class="right-section">
         <t-button open-type="share" t-class="shareBtn" variant="text">
@@ -31,35 +23,63 @@
       </view>
     </view>
     <view class="goods-buy">
-      <navigator>
+      <view class="left" bindtap="goToHome">
         <t-icon class="left-return" name="home"></t-icon>
         <view>首页</view>
-      </navigator>
+      </view>
-      <t-button class="right-buy" theme="light" variant="outline" size="large" shape="round">立即购买</t-button>
+      <!-- 绑定点击事件，显示规格选择弹出框 -->
+      <t-button class="right-buy" theme="light" variant="outline" size="large" shape="round" bindtap="openPopup">立即购买</t-button>
     </view>
-
-
-
-    <!-- <text class="goods-operation-add" bindtap="reduceCount">-</text>
-      <text class="goods-operation-num">数量 {{num}}</text>
-      <text class="goods-operation-add" bindtap="addCount">+</text> -->
-    <!-- <navigator url="javascript:void(0);" open-type="false">
-        <button class="goods-to-buy" bindtap="onBuyClick">购买</button>
-      </navigator> -->
-    <!-- <text class="goods-to-cart" bindtap="addToBuy">购买</text> -->
-    <!-- <image src="/image/cart1.png"  class="goods-cart-img" bindtap="addToCart"></image> -->
-    <!-- </view> -->
-    <image wx:if="{{show}}" src="/image/cart1.png" class="to-carts-icon"></image>
-    <!-- <view class="goods-stock">{{goods.stock}}</view> -->
   </view>
-  <!-- <view class="goods-tab-box">
+  <!-- 规格选择弹出框 -->
-    <view class="goods-tab-nav {{curIndex === 0 ?'on':''}}" bindtap="bindTap" data-index="0">商品详情</view>
+  <t-popup visible="{{showPopup}}" placement="bottom" bind:visible-change="handlePopupHide">
-    <view class="goods-tab-nav {{curIndex === 1 ?'on':''}}" bindtap="bindTap" data-index="1">产品参数</view>
+    <view class="popup-container">
-    <view class="goods-tab-nav {{curIndex === 2 ?'on':''}}" bindtap="bindTap" data-index="2">售后保障</view>
+      <view class="popup-close" bindtap="handlePopupHide">
-    <view class="goods-content">
+        <t-icon name="close" size="36rpx" />
-      <view wx:if="{{curIndex === 0}}">{{goods.goodDetail}}</view>
+      </view>
-      <view wx:if="{{curIndex === 1}}">{{goods.parameter}}</view>
+      <view class="popup-sku-header">
-      <view wx:if="{{curIndex === 2}}">{{goods.service}}</view>
+        <t-image t-class="popup-sku-header__img" src="{{viewGood}}" />
+        <view class="popup-sku-header__goods-info">
+          <view class="popup-sku__goods-name">{{goods.goodName}}</view>
+          <view class="goods-price-container">
+            <view class="goods-price">￥ {{goods.goodPrice}}</view>
+          </view>
+          <!-- 已选规格 -->
+          <view class="popup-sku__selected-spec">
+            <view>选择：</view>
+            <view wx:for="{{selectedSpecs}}" wx:key="index">
+              <view class="popup-sku__selected-item">{{item}}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="popup-sku-body">
+        <view class="goods-size">默认统一被褥1.5m*2.0m</view>
+        <view class="popup-sku-group-container">
+          <view class="popup-sku-row" wx:for="{{specList}}" wx:key="specId">
+            <view class="popup-sku-row__title">{{item.title}}</view>
+            <view class="popup-sku-row__item-container">
+              <block wx:for="{{item.specValueList}}" wx:key="specValueId" wx:for-item="valueItem">
+                <view class="popup-sku-row__item {{valueItem.isSelected ? 'popup-sku-row__item--active' : ''}}" data-specid="{{item.specId}}" data-id="{{valueItem.specValueId}}" data-val="{{valueItem.specValue}}" data-goodImage="{{valueItem.goodImage}}" bindtap="selectSpec">
+                  {{valueItem.specValue}}
+                </view>
+              </block>
+            </view>
+          </view>
+        </view>
+        <view class="popup-sku-stepper-stock">
+          <view class="popup-sku-stepper-container">
+            <view class="popup-sku__stepper-title">购买数量</view>
+            <t-stepper value="{{buyNum}}" min="1" max="10" theme="filled" bind:change="handleBuyNumChange" />
+          </view>
+        </view>
+      </view>
+      <!-- 绑定点击事件，确认选择规格并跳转到订单页面 -->
+      <view class="single-confirm-btn" bindtap="confirmSpecs">
+        确定
+      </view>
     </view>
-  </view> -->
+  </t-popup>
 </view>
+
+<t-toast id="t-toast" />

page/component/details/details.wxss

@@ -4,125 +4,6 @@
   position: relative;
   padding: 40rpx 45rpx;
   color: #454552;
-  /* border-bottom: 30rpx solid #ededed; */
-}
-
-.goods-box .goods-thumb {
-  width: 300rpx;
-  height: 300rpx;
-  margin: 35rpx 0 125rpx;
-}
-
-.to-carts-icon {
-  position: absolute;
-  right: 70rpx;
-  top: 70rpx;
-  width: 10rpx;
-  height: 10rpx;
-  border-radius: 50%;
-  opacity: .6;
-  -webkit-animation: to_cart .3s ease-out;
-  animation: to_cart .3s ease-out;
-}
-
-@-webkit-keyframes to_cart {
-  0% {
-    right: 100rpx;
-    top: 530rpx;
-    -webkit-transform: scale(4);
-  }
-
-  /*60%{
-        top: 20rpx;
-    }*/
-}
-
-@keyframes to_cart {
-  0% {
-    right: 100rpx;
-    top: 530rpx;
-    transform: scale(4);
-  }
-
-  /*60%{
-        top: 20rpx;
-    }*/
-}
-
-.carts-icon {
-  position: absolute;
-  right: 40rpx;
-  top: 40rpx;
-  width: 75rpx;
-  height: 75rpx;
-}
-
-.carts-icon image {
-  width: 100%;
-  height: 100%;
-}
-
-.carts-icon.on {
-  -webkit-animation: to_cart_scale .3s ease;
-  animation: to_cart_scale .3s ease;
-}
-
-@-webkit-keyframes to_cart_scale {
-  50% {
-    -webkit-transform: scale(1.2);
-  }
-}
-
-@keyframes to_cart_scale {
-  50% {
-    transform: scale(1.2);
-  }
-}
-
-.carts-icon-num {
-  position: absolute;
-  left: -15rpx;
-  width: 40rpx;
-  height: 40rpx;
-  line-height: 40rpx;
-  border-radius: 50%;
-  background: #AB956D;
-  color: #fff;
-  font-size: 24rpx;
-}
-
-.goods-box .goods-operation {
-  position: relative;
-  width: 100%;
-  height: 100rpx;
-  line-height: 100rpx;
-  padding: 0 50rpx;
-  margin-bottom: 60rpx;
-  box-sizing: border-box;
-  border-radius: 50rpx;
-  background: #AB956D;
-  color: #fff;
-  font-size: 14px;
-}
-
-.goods-operation text {
-  display: inline-block;
-  height: 100rpx;
-}
-
-.goods-to-buy {
-  margin-top: 5px;
-  width: 80px;
-  height: 40px;
-  font-size: 16px;
-  color: #fff;
-  background-color: rgb(243, 106, 96);
-  box-sizing: border-box;
-  border-radius: 50rpx;
-}
-
-.goods-operation-num {
-  width: 160rpx;
 }
 
 .banner {
@@ -131,37 +12,11 @@
   text-align: center;
 }
 
-.goods-operation-add {
-  font-weight: bold;
-  width: 80rpx;
-  height: 80rpx;
-  margin-right: 15rpx;
-}
-
-.goods-to-cart {
-  width: 210rpx;
-  /* padding-right: 75rpx; */
-  color: black;
-}
-
-.goods-cart-img {
-  position: absolute;
-  right: 50rpx;
-  top: 28rpx;
-  width: 45rpx;
-  height: 45rpx;
-}
-
-.goods-stock {
-  font-size: 28rpx;
-  margin-bottom: 20rpx;
-  margin-top: 50px;
-}
-
 .goods-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 20rpx;
 }
 
 .left-section {
@@ -171,6 +26,7 @@
 
 .goods-title {
   font-size: 40rpx;
+  margin-bottom: 10rpx;
 }
 
 .goods-price {
@@ -185,52 +41,186 @@
 }
 
 .btn-icon {
-  font-size: 20rpx;
+  font-size: 30rpx;
 }
 
 .share-text {
-  padding-left: 8rpx;
+  padding-left: 6rpx;
   padding-top: 8rpx;
-  font-size: 20rpx;
+  font-size: 25rpx;
   line-height: 24rpx;
 }
+.goods-detail{
+  padding-top: 10px;
+}
+.goods-size{
+  font-size: 14px;
+  padding-bottom: 10px;
+}
 .goods-buy {
-  position: fixed; /* 固定在页面底部 */
+  position: fixed;
-  bottom: 0; /* 距离底部为0 */
+  bottom: 0;
-  left: 0; /* 左侧对齐 */
+  left: 0;
-  width: 100%; /* 宽度占满屏幕 */
+  width: 100%;
   display: flex;
   justify-content: space-between;
-  padding: 10rpx 20rpx; /* 添加一些内边距 */
+  padding: 10rpx 20rpx;
-  background-color: #fff; /* 设置背景颜色 */
+  background-color: #fff;
-  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加一个阴影 */
+  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+}
+
+.left {
+  padding-left: 60px;
+  display: flex;
+  align-items: center;
 }
 
 .left-return {
   font-size: 32px;
-  flex-grow: 0; /* 防止按钮拉伸 */
 }
 
 .right-buy {
-  flex-grow: 0; /* 防止按钮拉伸 */
+  flex-grow: 0;
 }
 
-.goods-tab-nav {
+.popup-container {
-  display: inline-block;
+  padding: 20rpx;
-  width: 33.33%;
+  background-color: #fff;
-  height: 90rpx;
+}
-  line-height: 90rpx;
+
-  border-bottom: 1rpx solid #ededed;
+.popup-close {
+  position: absolute;
+  top: 10rpx;
+  right: 10rpx;
+}
+
+.popup-sku-header {
+  display: flex;
+  margin-bottom: 20rpx;
+}
+
+.popup-sku-header__goods-info {
+  margin-left: 20rpx;
+  flex-grow: 1;
+}
+
+.popup-sku-header__img {
+  width: 100px;
+  height: 100px;
+}
+
+.popup-sku__goods-name {
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+
+.goods-price-container {
+  font-size: 30rpx;
+  color: red;
+  margin-bottom: 20rpx;
+}
+
+.popup-sku__selected-spec {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.popup-sku-body {
+  margin-top: 20rpx;
+}
+
+.popup-sku-row__item-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.popup-sku-row__item {
+  flex-basis: 30%;
   box-sizing: border-box;
   text-align: center;
-  color: #c7c7cb;
+  padding: 5rpx;
+  margin-bottom: 10rpx;
+  background-color: #f5f5f5;
+  border-radius: 4rpx;
 }
 
-.goods-tab-nav.on {
+.popup-sku-row__item {
-  color: #bcaa8a;
+  padding: 5rpx;
-  border-bottom: 5rpx solid #bcaa8a;
+  margin: 5rpx;
+  text-align: center;
+  border: 1rpx solid #ccc;
+  border-radius: 5rpx;
+  cursor: pointer;
 }
 
-.goods-content {
+.popup-sku-row__item--active {
-  padding: 40rpx;
+  border-color: #bcaa8a;
+  border: 1rpx solid rgb(238, 84, 84);
+}
+
+
+.popup-sku-row {
+  margin-bottom: 20rpx;
+}
+
+.popup-sku-row__title {
+  font-size: 28rpx;
+  margin-bottom: 10rpx;
+}
+
+.popup-sku-row__item {
+  display: inline-block;
+  padding: 10rpx 20rpx;
+  margin-right: 10rpx;
+  background-color: #f5f5f5;
+  border-radius: 4rpx;
+  font-size: 28rpx;
+  cursor: pointer;
+}
+
+
+.popup-sku-stepper-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.popup-sku__stepper-title {
+  font-size: 28rpx;
+}
+
+.single-confirm-btn {
+  background-color: #bcaa8a;
+  color: #fff;
+  text-align: center;
+  padding: 20rpx 0;
+  margin-top: 20rpx;
+  border-radius: 4rpx;
+  font-size: 32rpx;
+}
+
+.popup-sku-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.selected-sku-btn {
+  padding: 20rpx;
+  border-radius: 4rpx;
+  font-size: 28rpx;
+  background-color: #bcaa8a;
+  color: #fff;
+  text-align: center;
+}
+
+.popup-sku-disabled {
+  background-color: #ccc;
+}
+
+.disabled-sku-selected {
+  color: #ccc;
+  cursor: not-allowed;
 }

page/component/myOrders/myOrder.js

@@ -15,12 +15,13 @@ Page({
   },
   onLoad() {
     var self = this
-    // 获取地址信息
+    // 获取订单status为1的待付款订单
     wx.request({
       url: baseUrl + "/order/loadData",
       method: "POST",
       data: {
         userId: 1,
+        status: 1
       },
       success(res) {
         self.setData({
@@ -31,7 +32,6 @@ Page({
     })
   },
   onReady() {
-    this.getTotalPrice()
   },
 
   onShow: function () {
@@ -47,69 +47,4 @@ Page({
     })
   },
 
-  /**
-   * 计算总价
-   */
-  getTotalPrice() {
-    let orders = this.data.orders
-    let total = 0
-    for (let i = 0; i < orders.length; i++) {
-      total += orders[i].num * orders[i].price
-    }
-    this.setData({
-      total: total,
-    })
-  },
-
-  toPay() {
-    const self = this
-
-    // 假设订单信息在 this.data.orders 中
-    const orderData = this.data.orders
-
-    wx.showModal({
-      title: "提示",
-      content: "本系统只做演示，支付系统已屏蔽",
-      text: "center",
-      complete() {
-        // 发送订单数据到后端
-        wx.request({
-          url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
-          method: "POST",
-          data: {
-            ...orderData,
-          },
-          header: {
-            "Content-Type": "application/json", // 设置请求头
-          },
-          success(res) {
-            if (res.statusCode === 200) {
-              wx.showToast({
-                title: "订单已提交",
-                icon: "success",
-                duration: 2000,
-              })
-              // 跳转到用户页面
-              wx.switchTab({
-                url: "/page/component/user/user",
-              })
-            } else {
-              wx.showToast({
-                title: "提交失败",
-                icon: "none",
-                duration: 2000,
-              })
-            }
-          },
-          fail() {
-            wx.showToast({
-              title: "请求失败",
-              icon: "none",
-              duration: 2000,
-            })
-          },
-        })
-      },
-    })
-  },
 })

page/component/myOrders/myOrder.json

@@ -1,3 +1,3 @@
 {
-  "navigationBarTitleText": "订单详情"
+  "navigationBarTitleText": "待付款订单"
 }

page/component/myOrders/myOrder.wxml

@@ -1,21 +1,19 @@
 <view class="main">
-  <navigator url="../refund/refund">
-    <view class="orders-no-refund">退款 / 售后</view>
-  </navigator>
-  <!-- <view class="orders-no-address">待收货</view> -->
-
-
   <view class="orders-box">
-    <view wx:for="{{orders}}" wx:key="id" class="orders-list">
+    <navigator wx:for="{{orders}}" wx:key="id" url="../orders/orders?id={{item.id}}&title={{item.title}}&price={{item.price}}&num={{item.num}}&image={{item.image}}&specs={{item.specs}}">
-      <image class="orders-thumb" src="{{item.image}}"></image>
+      <view class="orders-list">
-      <view class="orders-pro-name">{{item.title}}</view>
+        <image class="orders-thumb" src="{{item.image}}"></image>
-      <view class="orders-pro-price">￥{{item.price}}</view>
+        <view class="orders-info">
-      <view class="orders-count-num">×{{item.num}}</view>
+          <view class="orders-info-left">
-    </view>
+            <view class="orders-pro-name">{{item.title}}</view>
+            <view class="order-specs">{{item.specs}}</view>
+          </view>
+          <view class="orders-info-right">
+            <view class="orders-pro-price">￥{{item.price}}</view>
+            <view class="orders-count-num">×{{item.num}}</view>
+          </view>
+        </view>
+      </view>
+    </navigator>
   </view>
-
-  <!-- <view class="orders-footer">
-        <view class="orders-footer-total">付款合计：￥{{total}}</view>
-        <view class="orders-footer-btn" bindtap="toPay">去付款</view>
-    </view> -->
 </view>

page/component/myOrders/myOrder.wxss

@@ -1,31 +1,59 @@
-@import '../../common/common.wxss';
+.orders-list {
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  height: 180rpx;
+  border-bottom: 10rpx solid #ededed;
+}
 
-.orders-address{
+.orders-thumb {
-    position: relative;
+  width: 180rpx;
-    padding: 20rpx 50rpx 20rpx 35rpx;
+  height: 180rpx;
-    font-size: 14px;
+  margin-right: 20rpx;
-    line-height: 25px;
-    border-bottom: 20rpx solid #ededed;
-    color: #adadad;
 }
-.orders-address::after{
+
-    position: absolute;
+.orders-info {
-    right: 30rpx;
+  flex: 1;
-    top: 60rpx;
+  display: flex;
-    content: '';
+  justify-content: space-between;
-    width: 8px;
-    height: 8px;
-    border-top: 4rpx solid #7f7f7f;
-    border-right: 4rpx solid #7f7f7f;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
 }
-.orders-address-name{
+
-    display: inline-block;
+.orders-info-left {
-    width: 300rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
-.orders-no-refund{
+
-  position: relative;
+.orders-pro-name {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.order-specs {
+  font-size: 28rpx;
+  color: #888;
+  margin-top: 5rpx;
+}
+
+.orders-info-right {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.orders-pro-price {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #AB956D;
+}
+
+.orders-count-num {
+  font-size: 28rpx;
+  color: #888;
+}
+
+.orders-no-refund {
   height: 90rpx;
   line-height: 90rpx;
   font-size: 16px;
@@ -34,73 +62,19 @@
   border-bottom: 20rpx solid #ededed;
   text-align: center;
 }
-.orders-no-address{
+
-    position: relative;
+.orders-no-refund::after {
-    height: 90rpx;
+  position: absolute;
-    line-height: 90rpx;
+  right: 30rpx;
-    font-size: 16px;
+  top: 34rpx;
-    color: #f56464;
+  content: '';
-    border-bottom: 20rpx solid #ededed;
+  width: 16rpx;
-    text-align: center;
+  height: 16rpx;
-}
+  border-top: 4rpx solid #7f7f7f;
-.orders-no-refund::after{
+  border-right: 4rpx solid #7f7f7f;
-    position: absolute;
+  transform: rotate(45deg);
-    right: 30rpx;
-    top: 34rpx;
-    content: '';
-    width: 16rpx;
-    height: 16rpx;
-    border-top: 4rpx solid #7f7f7f;
-    border-right: 4rpx solid #7f7f7f;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
 }
 
-.orders-box{
+.orders-box {
-    padding-bottom: 105rpx;
+  padding-bottom: 105rpx;
-}
-.orders-list{
-    position: relative;
-    padding:20rpx 20rpx 20rpx 220rpx;
-    height: 180rpx;
-    border-bottom: 1rpx solid #ededed;
-}
-.orders-thumb{
-    position: absolute;
-    top: 20rpx;
-    left: 20rpx;
-    width: 180rpx;
-    height: 180rpx;
-}
-.orders-list view{
-    line-height: 60rpx;
-}
-.orders-pro-price{
-  font-size: 14px;
-  font-weight: bold;
-  color:red
-}
-
-.orders-footer{
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 95rpx;
-    line-height: 95rpx;
-    border-top: 1rpx solid #ededed;
-}
-.orders-footer .orders-footer-total{
-    display: inline-block;
-    width: 510rpx;
-    padding-left: 30rpx;
-    box-sizing: border-box;
-    color: #a55350;
-}
-.orders-footer .orders-footer-btn{
-    display: inline-block;
-    width: 240rpx;
-    text-align: center;
-    color: #fff;
-    background: #AB956D;
 }

page/component/orders/orders.js

@@ -9,8 +9,10 @@ Page({
       price: options.price,
       num: options.num,
       image: options.image,
+      specs: options.specs
     }
     this.setData({ orders })
+    console.log(this.data.orders)
   },
   data: {
     address: {},
@@ -44,63 +46,63 @@ Page({
   getTotalPrice() {
     let orders = this.data.orders
     let total = 0
-    for (let i = 0; i < orders.length; i++) {
+    total += orders.num * orders.price
-      total += orders[i].num * orders[i].price
-    }
     this.setData({
       total: total,
     })
   },
-
   toPay() {
     const self = this
-
     // 假设订单信息在 this.data.orders 中
     const orderData = this.data.orders
-
+    // TODO 用户id暂时写死
+    orderData.userId = 1
+    orderData.status = 1
+    console.log(orderData)
+    //先生成订单
+    wx.request({
+      // TODO 未测试
+      url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
+      method: "POST",
+      data: {
+        ...orderData,
+      },
+      header: {
+        "Content-Type": "application/json", // 设置请求头
+      },
+      success(res) {
+        if (res.statusCode === 200) {
+          wx.showToast({
+            title: "订单已提交",
+            icon: "success",
+            duration: 2000,
+          })
+          // 跳转到用户页面
+          wx.switchTab({
+            url: "/page/component/user/user",
+          })
+        } else {
+          wx.showToast({
+            title: "提交失败",
+            icon: "none",
+            duration: 2000,
+          })
+        }
+      },
+      fail() {
+        wx.showToast({
+          title: "请求失败",
+          icon: "none",
+          duration: 2000,
+        })
+      },
+    })
     wx.showModal({
       title: "提示",
       content: "本系统只做演示，支付系统已屏蔽",
       text: "center",
       complete() {
         // 发送订单数据到后端
-        wx.request({
-          // TODO 未测试
-          url: baseUrl + "/order/addOrUpdate", // 替换为你的后端API地址
-          method: "POST",
-          data: {
-            ...orderData,
-          },
-          header: {
-            "Content-Type": "application/json", // 设置请求头
-          },
-          success(res) {
-            if (res.statusCode === 200) {
-              wx.showToast({
-                title: "订单已提交",
-                icon: "success",
-                duration: 2000,
-              })
-              // 跳转到用户页面
-              wx.switchTab({
-                url: "/page/component/user/user",
-              })
-            } else {
-              wx.showToast({
-                title: "提交失败",
-                icon: "none",
-                duration: 2000,
-              })
-            }
-          },
-          fail() {
-            wx.showToast({
-              title: "请求失败",
-              icon: "none",
-              duration: 2000,
-            })
-          },
-        })
       },
     })
   },

page/component/orders/orders.wxml

@@ -11,10 +11,19 @@
   <view class="orders-box">
     <view class="orders-list">
       <image class="orders-thumb" src="{{orders.image}}"></image>
-      <view class="orders-pro-name">{{orders.title}}</view>
+      <view class="orders-info">
-      <view class="orders-pro-price">￥{{orders.price}} ×{{orders.num}}</view>
+        <view class="orders-info-left">
-      <view class="orders-count-num">免运费</view>
+          <view class="orders-pro-name">{{orders.title}}</view>
+          <view class="order-specs">{{orders.specs}}</view>
+          <view class="order-yunf">免运费</view>
+        </view>
+        <view class="orders-info-right">
+          <view class="orders-pro-price">￥{{orders.price}}</view>
+          <view class="orders-count-num">×{{orders.num}}</view>
+        </view>
+      </view>
     </view>
+
     <view>
       <navigator url="../invoice/invoice">
         <view class="orders-no-address">发票</view>

page/component/orders/orders.wxss

@@ -1,4 +1,79 @@
-@import '../../common/common.wxss';
+.orders-list {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 20rpx;
+  height: 180rpx;
+  border-bottom: 10rpx solid #ededed;
+}
+
+.orders-thumb {
+  width: 180rpx;
+  height: 180rpx;
+  margin-right: 20rpx;
+}
+
+.orders-info {
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+}
+
+.orders-info-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.order-notes-label {
+  font-size: 16px;
+  color: #333;
+  margin-right: 10px;
+  /* 标签和输入框之间的间距 */
+}
+
+.order-notes-input {
+  flex: 1;
+  /* 输入框占据剩余空间 */
+  padding-left: 10px;
+  margin-right: 10px;
+  font-size: 14px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.orders-pro-name {
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.order-yunf{
+  font-size: 12px;
+  padding-top: 10px;
+}
+.order-specs {
+  padding-top: 8px;
+  font-size: 28rpx;
+  color: #888;
+  margin-top: 5rpx;
+}
+
+.orders-info-right {
+  text-align: right;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.orders-pro-price {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #AB956D;
+}
+
+.orders-count-num {
+  font-size: 28rpx;
+  color: #888;
+}
 
 .orders-address {
   position: relative;
@@ -53,61 +128,11 @@
   padding-bottom: 105rpx;
 }
 
-.orders-list {
-  position: relative;
-  padding: 20rpx 20rpx 20rpx 220rpx;
-  height: 180rpx;
-  border-bottom: 10rpx solid #ededed;
-}
-
-.orders-thumb {
-  position: absolute;
-  top: 20rpx;
-  left: 20rpx;
-  width: 180rpx;
-  height: 180rpx;
-}
-
-.orders-list view {
-  line-height: 60rpx;
-}
-
 .order-notes {
   display: flex;
   align-items: center;
-  /* 垂直居中对齐 */
   padding-left: 10px;
-  /* background-color: #f9f9f9; */
-  border-radius: 8px;
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
   margin: 20px 0;
-  /* border-bottom: 10rpx solid #ededed; */
-}
-.orders-count-num{
-  font-size: 14px;
-  font-weight: bold;
-}
-
-.order-notes-label {
-  font-size: 16px;
-  color: #333;
-  margin-right: 10px;
-  /* 标签和输入框之间的间距 */
-}
-
-.order-notes-input {
-  flex: 1;
-  /* 输入框占据剩余空间 */
-  padding-left: 10px;
-  margin-right: 10px;
-  font-size: 14px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.order-notes-input::placeholder {
-  color: #aaa;
 }
 
 .orders-footer {

page/component/user/user.wxml

@@ -20,7 +20,10 @@
   <view class="address-box">
     <!-- <view class="orders">我的订单</view> -->
     <view class="address-manage">
-      <navigator url="/page/component/myOrders/myOrder">我的订单</navigator>
+      <navigator url="/page/component/myOrders/myOrder">待付款订单</navigator>
+    </view>
+    <view class="address-manage2">
+      <navigator url="/page/component/myOrders2/myOrder2">待收货订单</navigator>
     </view>
     <!-- <view class="orders-list" wx:for="{{orders}}" wx:key="index">
       <view class="orders-number">订单编号：{{item.number}}</view>

page/component/user/user.wxss

@@ -1,120 +1,157 @@
 @import '../../common/common.wxss';
 
-.header{
+.header {
-    position: relative;
+  position: relative;
-    height: 160rpx;
+  height: 160rpx;
-    line-height: 100rpx;
+  line-height: 100rpx;
-    padding:30rpx 30rpx 30rpx 150rpx;
+  padding: 30rpx 30rpx 30rpx 150rpx;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    background: #AB956D;
+  background: #AB956D;
-    font-size: 28rpx;
+  font-size: 28rpx;
-    color: #fff;
+  color: #fff;
-}
-.header .thumb{
-    position: absolute;
-    left: 30rpx;
-    top: 30rpx;
-    width: 100rpx;
-    height: 100rpx;
-    border-radius: 50%;
-}
-.header .about{
-    float: right;
 }
 
-.address-box{
+.header .thumb {
-    border-bottom: 10rpx solid #ededed;
+  position: absolute;
-    color: #999;
+  left: 30rpx;
-    line-height: 90rpx;
+  top: 30rpx;
-    font-size: 28rpx;
+  width: 100rpx;
-}
+  height: 100rpx;
-.address-box .address-manage{
+  border-radius: 50%;
-    position: relative;
-    height: 90rpx;
-    border-bottom: 1rpx solid #e9e9e9;
-    text-align: center;
-}
-.address-box .address-manage::after{
-    position: absolute;
-    right: 30rpx;
-    top: 34rpx;
-    content: '';
-    width: 16rpx;
-    height: 16rpx;
-    border-top: 4rpx solid #7f7f7f;
-    border-right: 4rpx solid #7f7f7f;
-    -webkit-transform: rotate(45deg);
-    transform: rotate(45deg);
-}
-.address-box .address-list{
-    padding-left: 30rpx;
-}
-.address-box .address-list view{
-    height: 90rpx;
-    border-bottom: 1rpx solid #e9e9e9;
-}
-.address-box .address-list view:last-child{
-    border-bottom: 0;
 }
 
-.orders-box{
+.header .about {
-    color: #999;
+  float: right;
-    font-size: 28rpx;
 }
-.orders{
+
-    height: 90rpx;
+.address-box {
-    line-height: 90rpx;
+  /* border-bottom: 10rpx solid #ededed; */
-    border-bottom: 1rpx solid #e9e9e9;
+  color: #999;
-    text-align: center;
+  line-height: 90rpx;
+  font-size: 28rpx;
 }
-.orders-list{
+
-    padding-left: 30rpx;
+.address-box .address-manage {
-    border-bottom: 20rpx solid #ededed;
+  position: relative;
+  height: 90rpx;
+  border-bottom: 10rpx solid #e9e9e9;
+  text-align: center;
 }
-.orders-list:last-child{
+
-    border-bottom: 0;
+.address-box .address-manage2 {
+  position: relative;
+  height: 90rpx;
+  border-bottom: 1rpx solid #e9e9e9;
+  text-align: center;
 }
-.orders-number{
+
-    height: 90rpx;
+.address-box .address-manage::after {
-    line-height: 90rpx;
+  position: absolute;
-    border-bottom: 1rpx solid #e9e9e9;
+  right: 30rpx;
+  top: 34rpx;
+  content: '';
+  width: 16rpx;
+  height: 16rpx;
+  border-top: 4rpx solid #7f7f7f;
+  border-right: 4rpx solid #7f7f7f;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
-.orders-detail{
+
-    position: relative;
+.address-box .address-manage2::after {
-    height: 120rpx;
+  position: absolute;
-    padding: 35rpx 20rpx 35rpx 170rpx;
+  right: 30rpx;
-    border-bottom: 1rpx solid #e9e9e9;
+  top: 34rpx;
+  content: '';
+  width: 16rpx;
+  height: 16rpx;
+  border-top: 4rpx solid #7f7f7f;
+  border-right: 4rpx solid #7f7f7f;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
 }
-.orders-detail image{
+
-    position: absolute;
+.address-box .address-list {
-    left: 0;
+  padding-left: 30rpx;
-    top: 20rpx;
-    width: 150rpx;
-    height: 150rpx;
 }
-.orders-detail view{
+
-    line-height: 60rpx;
+.address-box .address-list view {
+  height: 90rpx;
+  border-bottom: 1rpx solid #e9e9e9;
 }
-.orders-detail .orders-status{
+
-    position: absolute;
+.address-box .address-list view:last-child {
-    right: 20rpx;
+  border-bottom: 0;
-    top: 35rpx;
-    height: 120rpx;
-    line-height: 120rpx;
-    color: #b42f2d;
 }
-.orders-footer{
+
-    height: 60rpx;
+.orders-box {
-    line-height: 60rpx;
+  color: #999;
-    color: #2f2f2f;
+  font-size: 28rpx;
-    padding:15rpx 30rpx 15rpx 0;
 }
-.orders-footer .orders-btn{
+
-    float: right;
+.orders {
-    width: 170rpx;
+  height: 90rpx;
-    height: 60rpx;
+  line-height: 90rpx;
-    line-height:60rpx;
+  border-bottom: 1rpx solid #e9e9e9;
-    border-radius: 6rpx;
+  text-align: center;
-    background: #b42f2d;
+}
-    color: #fff;
+
+.orders-list {
+  padding-left: 30rpx;
+  border-bottom: 20rpx solid #ededed;
+}
+
+.orders-list:last-child {
+  border-bottom: 0;
+}
+
+.orders-number {
+  height: 90rpx;
+  line-height: 90rpx;
+  border-bottom: 1rpx solid #e9e9e9;
+}
+
+.orders-detail {
+  position: relative;
+  height: 120rpx;
+  padding: 35rpx 20rpx 35rpx 170rpx;
+  border-bottom: 1rpx solid #e9e9e9;
+}
+
+.orders-detail image {
+  position: absolute;
+  left: 0;
+  top: 20rpx;
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.orders-detail view {
+  line-height: 60rpx;
+}
+
+.orders-detail .orders-status {
+  position: absolute;
+  right: 20rpx;
+  top: 35rpx;
+  height: 120rpx;
+  line-height: 120rpx;
+  color: #b42f2d;
+}
+
+.orders-footer {
+  height: 60rpx;
+  line-height: 60rpx;
+  color: #2f2f2f;
+  padding: 15rpx 30rpx 15rpx 0;
+}
+
+.orders-footer .orders-btn {
+  float: right;
+  width: 170rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  border-radius: 6rpx;
+  background: #b42f2d;
+  color: #fff;
 }