零售端-订单列表、详情 界面修改

mallApp/src/components/order/order-item.vue

@@ -47,11 +47,12 @@
                 <text v-if="goods.seckillGoodsId > 0" class="goods-name-tag">秒杀</text>
                 <text class="goods-name">{{ goods.name || '商品' }}</text>
               </view>
-              <text class="goods-num">x{{ getGoodsNum(goods) }}</text>
             </view>
             <text v-if="getGoodsSpec(goods)" class="goods-spec">{{ getGoodsSpec(goods) }}</text>
             <text class="goods-price">¥{{ getGoodsPrice(goods) }}</text>
           </view>
+          <!-- 数量独立在整行右侧垂直居中 -->
+          <text class="goods-num">x{{ getGoodsNum(goods) }}</text>
         </view>
       </block>
       <block v-else>
@@ -69,17 +70,34 @@
       </block>
     </view>
 
-    <!-- 合计 -->
+    <!-- 合计（左）+ 操作按钮（右）同一行 -->
     <view class="card-footer">
       <text class="footer-text">
         共{{ info.goodsNum || goodsCount }}件商品 合计:
         <text class="footer-price">¥{{ totalPrice }}</text>
       </text>
+      <!-- 待付款：立即付款；待配送：联系客服 -->
+      <view v-if="showActionBar" class="card-actions" @click.stop>
+        <view
+          v-if="isWaitPay"
+          class="action-btn action-btn--primary"
+          @click.stop="onPay"
+        >立即付款</view>
+        <view
+          v-if="isWaitSend"
+          class="action-btn action-btn--outline"
+          @click.stop="onContactService"
+        >联系客服</view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
+/**
+ * 订单列表卡片
+ * 供 pages/home/order 使用；按状态展示立即付款 / 联系客服
+ */
 import { getSystemStatusDesc } from '@/utils/orderStatus'
 
 export default {
@@ -122,6 +140,18 @@ export default {
       };
       return map[String(this.info.status)] || '';
     },
+    /** 待付款 */
+    isWaitPay() {
+      return Number(this.info.status) === 1
+    },
+    /** 待配送 */
+    isWaitSend() {
+      return Number(this.info.status) === 2
+    },
+    /** 是否展示底部操作区 */
+    showActionBar() {
+      return this.isWaitPay || this.isWaitSend
+    },
     /** 创建时间展示 */
     formatAddTime() {
       if (!this.info.addTime) {
@@ -158,6 +188,14 @@ export default {
     clickItemEvent() {
       this.$emit("click", this.info);
     },
+    /** 待付款：立即付款 */
+    onPay() {
+      this.$emit('pay', this.info)
+    },
+    /** 待配送：联系客服 */
+    onContactService() {
+      this.$emit('contact-service', this.info)
+    },
     /** 商品封面图 */
     getGoodsCover(goods) {
       return goods.smallCoverUrl || goods.cover || goods.coverUrl || '';
@@ -337,7 +375,6 @@ export default {
 .goods-title-row {
   display: flex;
   align-items: flex-start;
-  justify-content: space-between;
 }
 
 .goods-name-wrap {
@@ -372,8 +409,10 @@ export default {
   vertical-align: middle;
 }
 
+/* 相对整行 goods-row 右侧垂直居中 */
 .goods-num {
   flex-shrink: 0;
+  align-self: center;
   margin-left: 16upx;
   font-size: 26upx;
   color: $fontColor3;
@@ -389,7 +428,7 @@ export default {
 
 .goods-price {
   display: block;
-  margin-top: 12upx;
+  margin-top: 32upx;
   font-size: 28upx;
   font-weight: 600;
   color: $redColor;
@@ -397,13 +436,17 @@ export default {
 
 .card-footer {
   display: flex;
-  justify-content: flex-end;
+  align-items: center;
+  justify-content: space-between;
   margin-top: 24upx;
   padding-top: 20upx;
   border-top: 1upx solid $borderColor;
 }
 
 .footer-text {
+  flex: 1;
+  min-width: 0;
+  margin-right: 16upx;
   font-size: 26upx;
   color: $fontColor2;
 }
@@ -414,4 +457,39 @@ export default {
   font-weight: 600;
   color: $redColor;
 }
+
+/* 操作按钮靠右：主按钮实心绿、次按钮描边 */
+.card-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.action-btn {
+  min-width: 160upx;
+  height: 50upx;
+  padding: 0 28upx;
+  margin-left: 16upx;
+  line-height: 50upx;
+  font-size: 26upx;
+  text-align: center;
+  border-radius: 10upx;
+  box-sizing: border-box;
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.action-btn--primary {
+  color: #fff;
+  background: #09c567;
+}
+
+.action-btn--outline {
+  color: $fontColorMain;
+  background: #fff;
+  border: 1upx solid #d9d9d9;
+}
 </style>

mallApp/src/pages/home/order.vue

@@ -33,6 +33,8 @@
             :key="index"
             :info="item"
             @click="goToDetail"
+            @pay="goPay"
+            @contact-service="contactService"
           />
         </view>
       </block>
@@ -89,6 +91,7 @@
 /**
  * 订单 Tab 页（主包）
  * 展示订单状态 Tab、店铺筛选与订单卡片列表
+ * 待付款「立即付款」、待配送「联系客服」由卡片事件在此处理
  * 店铺场景：query.shopNav=1 时隐藏原生 tabBar，改用 shop-tab-bar
  */
 import OrderItem from "@/components/order/order-item.vue";
@@ -98,6 +101,7 @@ import { list } from "@/mixins";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import { getList } from "@/api/order";
 import { getList as getHdList } from "@/api/hd";
+import { currentInfo } from "@/api/user";
 
 export default {
   components: {
@@ -136,7 +140,9 @@ export default {
       /** 是否店铺内导航（shop-tab-bar 跳转带入 shopNav=1） */
       shopNavMode: false,
       /** 当前店铺 account，供 shop-tab-bar 跳转使用 */
-      shopAccount: ""
+      shopAccount: "",
+      /** 当前登录用户（联系客服用，与 recent 一致） */
+      user: { name: "", smallAvatar: "", id: 0 }
     };
   },
 
@@ -343,10 +349,22 @@ export default {
         this.hdId = optionHdId;
         this.hdName = opt.hdName || opt.name || "";
       }
+      this.loadUserInfo();
       this.loadStoreList();
       this.getMyBuy();
     },
 
+    /** 拉取当前用户信息，供联系客服传 name/avatar（对齐 recent） */
+    loadUserInfo() {
+      currentInfo().then((res) => {
+        if (res.code == 1 && res.data && res.data.info) {
+          this.user = res.data.info;
+        } else {
+          this.user = { name: "", smallAvatar: "", id: 0 };
+        }
+      });
+    },
+
     getMyBuy() {
       const params = {
         status: this.status,
@@ -365,6 +383,59 @@ export default {
       uni.navigateTo({
         url: "/pages/order/detail?id=" + val.id + "&account=" + val.shopId + "&hdId=" + val.hdId
       });
+    },
+
+    /**
+     * 待付款：跳转支付页（与订单详情立即支付一致）
+     * @param {Object} order 列表订单行
+     */
+    goPay(order) {
+      if (!order || !order.id) {
+        return;
+      }
+      const account = order.shopId || 0;
+      const orderSn = order.orderSn || "";
+      const totalPrice = order.prePrice != null && order.prePrice !== ""
+        ? order.prePrice
+        : (order.actPrice || order.orderPrice || 0);
+      const id = order.id;
+      const hdId = order.hdId || 0;
+      this.$util.pageTo({
+        url:
+          "/pages/callback/pay?account=" +
+          account +
+          "&orderSn=" +
+          orderSn +
+          "&totalPrice=" +
+          totalPrice +
+          "&pageStatus=1&id=" +
+          id +
+          "&hdId=" +
+          hdId,
+        type: 2
+      });
+    },
+
+    /**
+     * 待配送：打开对应门店在线客服聊天（参数与 pages/home/recent 一致）
+     * @param {Object} order 列表订单行，需含 shopId、customId、hdName
+     */
+    contactService(order) {
+      if (!order) {
+        return;
+      }
+      uni.navigateTo({
+        url: "/pages/chat/chatPage",
+        success: (res) => {
+          res.eventChannel.emit("acceptDataFromOpenerPage", {
+            shopId: order.shopId,
+            customId: order.customId || "",
+            name: this.user.name || "",
+            avatar: this.user.smallAvatar || "",
+            chatPerson: order.hdName || ""
+          });
+        }
+      });
     }
   }
 };

mallApp/src/pages/order/detail.vue

@@ -1,9 +1,8 @@
 <template>
   <view class="app-content">
     <view class="page-top">
-      <view class="page-top-img">
-        <image mode="widthFix" :src="`${constant.imgUrl}/retail/order/bg.png`" alt />
-      </view>
+      <!-- 顶部状态区：绿色渐变背景（替代原 bg.png 纯色图） -->
+      <view class="page-top-img"></view>
       <view class="page-top-det">
         <view>
           <view class="page-status">{{ data.status | constantfilter('ORDER_STATUS') }}</view>
@@ -55,6 +54,11 @@
             </view>
           </view>
           <view class="order-msg-blo">
+            <!-- 配送方式：xhPsMethod.name（后端按 sendType 解析） -->
+            <view class="msg-list" v-if="!$util.isEmpty(data.psMethodName)">
+              <view class="label">配送方式</view>
+              <view class="value">{{ data.psMethodName }}</view>
+            </view>
             <view class="msg-list">
               <view class="label">配送时间</view>
               <view class="value">
@@ -69,12 +73,18 @@
               <view class="label">匿名派送</view>
               <view class="value">{{ data.anonymity == 1 ? '是' : '' }}</view>
             </view>
+            <!-- xhOrder.remark：匿名派送下方展示 -->
             <view class="msg-list" v-if="!$util.isEmpty(data.remark)">
-              <view class="label">备注信息</view>
+              <view class="label">备注</view>
               <view class="value">{{ data.remark }}</view>
             </view>
           </view>
           <view class="order-msg-blo">
+            <!-- xhOrder.packingFee：大于 0 时展示，排在订单运费前 -->
+            <view class="msg-list" v-if="Number(data.packingFee) > 0">
+              <view class="label">包装费</view>
+              <view class="value">￥{{ data.packingFee ? parseFloat(data.packingFee) : 0 }}</view>
+            </view>
             <view class="msg-list" v-if="Number(data.sendCost)>0">
               <view class="label">订单运费</view>
               <view class="value">￥{{ data.sendCost?parseFloat(data.sendCost):0 }}</view>
@@ -85,15 +95,15 @@
             </view>
             <view class="msg-list" v-if="data.orderReachDiscountPrice && Number(data.orderReachDiscountPrice) > 0">
               <view class="label">订单满减</view>
-              <view class="value">￥{{ data.orderReachDiscountPrice?parseFloat(data.orderReachDiscountPrice):0 }}</view>
+              <view class="value">-￥{{ data.orderReachDiscountPrice?parseFloat(data.orderReachDiscountPrice):0 }}</view>
             </view>
             <view class="msg-list" v-if="data.hbAmount && Number(data.hbAmount) > 0">
               <view class="label">红包减免</view>
-              <view class="value">￥{{ data.hbAmount?parseFloat(data.hbAmount):0 }}</view>
+              <view class="value">-￥{{ data.hbAmount?parseFloat(data.hbAmount):0 }}</view>
             </view>
             <view class="msg-list">
               <view class="label">订单合计</view>
-              <view class="value">￥{{ data.orderPrice?parseFloat(data.orderPrice):0 }}</view>
+              <view class="value">￥{{ data.mainPay?parseFloat(data.mainPay):0 }}</view>
             </view>
             <view class="msg-list" v-if="Number(data.remainDebtPrice)>0">
               <view class="label">订单待结</view>
@@ -118,13 +128,13 @@
     <view class="page-btn app-footer">
       <view class="flex-center" style="align-items: center; display: flex;">
         <span style="font-size:40upx; line-height: 1;"></span>
-        <span class="app-price" style="display: flex; align-items: center;">
-          <span style="font-size:40upx; line-height: 1;color:black;">{{data.forward==0?'':'售后收入 '}}￥</span>
-          <span style="font-size:40upx; line-height: 1;color:black;">{{ data.actPrice?parseFloat(data.actPrice):0 }}</span>
+        <span class="app-price">
+          <span class="app-price-text">{{data.forward==0?'':'售后收入 '}}￥</span>
+          <span class="app-price-text">{{ data.actPrice?parseFloat(data.actPrice):0 }}</span>
         </span>
       </view>
       <template v-if="data.status == 1">
-        <button class="button-com red big" @click="payFn">立即支付</button>
+        <button class="button-com green big" @click="payFn">立即支付</button>
       </template>
       <!-- 仅可售后时展示；不可售后（未付/取消/已退完/分销已结算/待审核等）隐藏 -->
       <template v-else-if="showRefundBtn">
@@ -276,10 +286,12 @@ export default {
 }
 .page-top {
   position: relative;
-  height: 160upx; // 进一步减小顶部区域高度
+  height: 160upx;
   .page-top-img {
-    height: 160upx; // 进一步减小背景图片高度
+    height: 160upx;
     overflow: hidden;
+    /* 与门店主色一致的斜向绿渐变 */
+    background: linear-gradient(135deg, #12c96b 0%, #09c567 55%, #00b894 100%);
   }
   .page-top-det {
     position: absolute;
@@ -347,14 +359,25 @@ export default {
   @include disFlex(center, space-between);
   padding: 0 30upx;
   .app-price {
+    display: flex;
+    align-items: center;
     margin-bottom: 8upx;
     margin-left: 4upx;
+    color: $greenColor;
+  }
+  .app-price-text {
+    font-size: 40upx;
+    line-height: 1;
+    color: $greenColor;
+  }
+  .green {
+	  width: 300upx;
   }
   .red {
-    width: 270upx;
+    width: 300upx;
   }
   .default {
-    width: 260upx;
+    width: 300upx;
   }
   /* 申请售后：描边主色，与「立即支付」实心区分 */
   .refund-btn {