Feat(订单详情)：订单详情重构（未完成）

assets/css/style.less

@@ -3461,10 +3461,10 @@ page {
 }
 
 .order-details .footer .bnt {
-  width: 1.76*100rpx;
+  width: 1.36*100rpx;
-  height: 0.6*100rpx;
+  height: 0.5*100rpx;
   text-align: center;
-  line-height: 0.6*100rpx;
+  line-height: 0.5*100rpx;
   border-radius: 0.5*100rpx;
   color: #fff;
   font-size: 0.27*100rpx;

assets/css/v12-style.less

@@ -138,7 +138,9 @@ each(@colors, {
 
 /*==============v12 按钮样式======================*/
 
-
+.v12-text-right{
+  text-align: right;
+}
 
 
 

pages/order/OrderDetails/index.vue

@@ -1,24 +1,29 @@
 <template>
   <view class="order-details" style="padding: 30rpx;">
     <!-- 给header上与data上加on为退款订单-->
-    <view class="header acea-row row-middle" :class="refundOrder ? 'on' : ''"
+    <view class=" v12-pa-3 v12-white" :class="refundOrder ? 'on' : ''" style="border-radius: 20rpx;">
-          style="background: #0DC5C5;border-radius: 24rpx;">
+      <!-- <view class="status-img-box">
-      <view class="status-img-box">
         <image class="status-img" :src="getStatusImg(orderInfo)" mode=""></image>
-      </view>
+      </view> -->
-      <view class="data" :class="refundOrder ? 'on' : ''">
+      <view  :class="refundOrder ? 'on' : ''">
-        <view class="state" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
+        <view class="state v12-primary-text v12-font-32 v12-font-bold" v-if="orderInfo.isTickets===1 && orderInfo._status._type == 2">待核销</view>
-        <view class="state" v-else>{{ getStatus(orderInfo) }}</view>
+        <view class="state v12-primary-text v12-font-32 v12-font-bold" v-else>{{ getStatus(orderInfo) }}</view>
-        <view v-if="getStatus(orderInfo)!=='待付款'">{{ orderInfo._status._msg }}</view>
+        <view v-if="getStatus(orderInfo)!=='待付款'" class="v12-mt-2 v12-font-24 v12-secondary-dark-text">{{ orderInfo._status._msg }}</view>
-        <view class="pending-payments flex ai-center" v-else>
+        <!-- <view class="pending-payments flex ai-center" v-else>
           <text>请在</text>
           <u-count-down :time="$global.diffSSS(this.orderInfo.paymentTimeout)"/>
           <text>内支付，逾期订单将自动取消</text>
-        </view>
+        </view> -->
+        <u-divider></u-divider>
+        <div class="name v12-mb-3 v12-font-28 v12-font-bold">
+          <text class="v12-mr-3"> {{ orderInfo.realName }}</text>
+          <text class="phone">{{ orderInfo.userPhone }}</text>
+        </div>
+        <div class="v12-font-28 v12-secondary-dark-text more-t">{{ orderInfo.userAddress }}</div>
       </view>
     </view>
 
-    <view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view>
+    <!-- <view class="reject-reason" v-if="orderInfo._status._type==-3 && orderInfo.refundRejectReason">驳回原因：{{ orderInfo.refundRejectReason }}</view> -->
 
     <template v-if="!refundOrder">
       <view class="code-box flex jc-center ai-center" v-if="orderInfo.isTickets===1 && orderInfo._status._type==2">
@@ -61,28 +66,10 @@
             <span class="iconfont icon-weizhi"></span>查看位置
           </div>
         </div>
-        <view class="address acea-row row-middle" style="margin-top: 30rpx;border-radius: 24rpx;flex-wrap: nowrap;"
+        
-              v-if="orderInfo.shippingType === 1">
+        <div class="address" v-if="orderInfo.shippingType !== 1">
-          <view class="" style="flex-shrink: 0;margin-right: 20rpx;">
-            <image style="width: 48rpx;height: 48rpx;" :src="webUrl+'/20230304135530688212.png'" mode=""></image>
-          </view>
-          <view class="acea-row row-middle" style="flex-grow: 1;">
-            <view class="name acea-row row-middle row-between" style="flex-wrap: nowrap;width: 100%;">
-              <view class="acea-row row-middle">
-                {{ orderInfo.realName }}
-                <text class="phone">{{ orderInfo.userPhone }}</text>
-              </view>
-              <!-- <view class="acea-row row-middle">
-                <image style="width: 32rpx;height: 32rpx;" :src="webUrl+'/20210808005541949297.png'" mode=""
-                       @click="call(orderInfo.userPhone)"></image>
-              </view> -->
-            </view>
-            <view>{{ orderInfo.userAddress }}</view>
-          </view>
-        </view>
-        <div class="address" v-else>
           <div class="name">
-            {{ system_store.name }}
+            {{ system_store.name }} 
             <span class="phone">{{ system_store.phone }}</span>
             <span class="iconfont icon-tonghua font-color-red" :href="'tel:' + system_store.phone"></span>
           </div>
@@ -91,50 +78,139 @@
       </template>
     </template>
 
-    <view style="margin-top: 30rpx;border-radius:24rpx;overflow: hidden;">
+    <view style="margin-top: 30rpx;border-radius:20rpx;overflow: hidden;" class="v12-white">
-      <OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods>
+      <!-- <OrderGoods :evaluate="status.type || 0" :cartInfo="orderInfo.cartInfo || []" title="商品信息"></OrderGoods> -->
+      <view class="v12-radius-20 v12-pa-3" v-for="(cart, d) in orderInfo.cartInfo" :key="d">
+        <view class="v12-justify-between">
+          <view class="">
+            <image style="width: 120rpx; height: 120rpx" class="v12-radius-8" :src="cart.productInfo.image"></image>
+          </view>
+          <view class="v12-justify-between v12-flex-column v12-ml-2" style="flex: 2">
+            <view class="v12-font-28 v12-dark-text v12-font-bold more-t">
+              {{ cart.productInfo.storeName }} 
+            </view>
+            <view v-if="cart.productInfo.attrInfo" class="more-t v12-secondary-dark-text v12-font-24">
+              {{ cart.productInfo.attrInfo.sku }}
+            </view>
+          </view>
+          <view class="v12-justify-between v12-flex-column v12-dark-text v12-text-right">
+            <view class=" ">
+              <text class="v12-font-22">
+                ￥
+              </text>
+              <text class="v12-font-28">{{ cart.truePrice }}</text>
+            </view>
+            <view class="v12-font-22">
+              <text>x{{ cart.cartNum }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="" v-if="orderInfo.cartInfo &&( d === orderInfo.cartInfo.length - 1)">
+          <view class="v12-justify-between v12-mt-3 v12-dark-text">
+            <view class="v12-font-24 v12-dark-text">
+              商品总价
+            </view>
+            <view class="v12-text-right">
+              <text class="v12-font-22">￥</text>
+              <text class="v12-font-28">
+                {{ force2Decimal(orderInfo.totalPrice) }}
+              </text>
+            </view>
+          </view>
+          <view class="v12-justify-between v12-mt-3" v-if="orderInfo.payPostage > 0">
+            <view class="v12-font-24 v12-dark-text">
+              运费
+            </view>
+            <view class="v12-text-right">
+              <text class="v12-font-22">￥</text>
+            <text class="v12-font-28">
+              {{ force2Decimal(orderInfo.payPostage) }}
+            </text>
+            </view>
+          </view>
+          <view class="v12-justify-between v12-mt-3" v-if="orderInfo.couponPrice > 0">
+            <view class="v12-font-24 v12-dark-text">
+              满减优惠
+            </view>
+            <view class="v12-text-right">
+              -
+              <text class="v12-font-22">￥</text>
+              <text class="v12-font-28">
+                {{ force2Decimal(orderInfo.couponPrice) }}
+              </text>
+            </view>
+          </view>
+          <view class="v12-justify-between v12-mt-3"  v-if="orderInfo.useIntegral > 0">
+            <view class="v12-font-24 v12-dark-text">
+              积分抵扣
+            </view>
+            <view class="v12-text-right">
+              -
+              <text class="v12-font-22">￥</text>
+              <text class="v12-font-28">
+                {{ force2Decimal(orderInfo.deductionPrice) }}
+              </text>
+            </view>
+          </view>
+          <u-divider></u-divider>
+          <view class="v12-justify-between v12-mt-3">
+            <view class="v12-font-28 v12-font-bold v12-dark-text">
+              实付款
+            </view>
+            <view class="v12-text-right v12-font-bold  v12-primary-text">
+              <text class="v12-font-22">￥</text>
+              <text class="v12-font-28">
+                {{ force2Decimal(orderInfo.payPrice) }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
 
-    <view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
+    <view class="wrapper v12-radius-20 v12-mt-7" style="margin-top: 30rpx">
-      <view class="item acea-row row-middle"
+      <!-- <view class="item acea-row row-middle"
             style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
         <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003431044270.png'"
                mode=""></image>
         <text style="font-size: 26rpx;color: #080F1A;">订单信息</text>
-      </view>
+      </view> -->
-      <view class="item acea-row row-between">
+      <view class="item acea-row row-between  v12-font-24 v12-dark-text ">
-        <view class="flex-0">订单编号：</view>
+        <view class="flex-0">订单编号</view>
-        <view class="conter acea-row row-middle row-right">
+        <view class="v12-text-right ">
           {{ orderInfo.orderId }}
-          <image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
+          <text class="v12-px-2 v12-py-1 v12-ml-1 v12-primary-text v12-primary-border v12-radius-40" @click="copyClipboard(orderInfo.orderId)">
-                 :src="webUrl+'/20210808003517657208.png'" mode=""></image>
+            复制
+          </text>
+          <!-- <image @click="copyClipboard(orderInfo.orderId)" style="width: 28rpx;height: 28rpx;margin-left: 10rpx;"
+                 :src="webUrl+'/20210808003517657208.png'" mode=""></image> -->
         </view>
       </view>
-      <view class="item acea-row row-between">
+      <view class="item acea-row row-between  v12-font-24 v12-dark-text ">
-        <view class="flex-0">下单时间：</view>
+        <view class="flex-0">下单时间</view>
-        <view class="conter">
+        <view class="v12-text-right">
           <text>{{ orderInfo.createTime }}</text>
         </view>
       </view>
-      <view class="item acea-row row-between">
+      <view class="item acea-row row-between  v12-font-24 v12-dark-text ">
-        <view class="flex-0">订单类型：</view>
+        <view class="flex-0">订单类型</view>
-        <view class="conter">{{ orderTypeName }}</view>
+        <view class="v12-text-right">{{ orderTypeName }}</view>
       </view>
-      <view class="item acea-row row-between">
+      <view class="item acea-row row-between  v12-font-24 v12-dark-text ">
-        <view class="flex-0">支付状态：</view>
+        <view class="flex-0">支付状态</view>
-        <view class="conter">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
+        <view class="v12-text-right">{{ orderInfo.paid ? "已支付" : "未支付" }}</view>
       </view>
-      <view class="item acea-row row-between">
+      <view class="item acea-row row-between  v12-font-24 v12-dark-text ">
-        <view class="flex-0">支付方式：</view>
+        <view class="flex-0">支付方式</view>
-        <view class="conter">{{ orderInfo._status._payType }}</view>
+        <view class="v12-text-right">{{ orderInfo._status._payType }}</view>
       </view>
-      <view class="item acea-row row-between" v-if="orderInfo.mark">
+      <!-- <view class="item acea-row row-between" v-if="orderInfo.mark">
         <view class="flex-0">买家留言：</view>
-        <view class="conter conttent-left">{{ orderInfo.mark }}</view>
+        <view class="v12-text-right conttent-left">{{ orderInfo.mark }}</view>
-      </view>
+      </view> -->
     </view>
 
-    <view v-if="orderInfo.status != 0">
+    <view v-if="false">
       <view class="wrapper" v-if="true">
         <view class="item acea-row row-between">
           <view class="flex-0">配送方式：</view>
@@ -169,7 +245,7 @@
       </view>
     </view>
     <!--     退款订单详情 -->
-    <view class="wrapper" v-if="refundOrder">
+    <view class="wrapper" v-if="false">
       <view class="item acea-row row-between">
         <view>收货人：</view>
         <view class="conter">{{ orderInfo.realName }}</view>
@@ -183,7 +259,7 @@
         <view class="conter">{{ orderInfo.userAddress }}</view>
       </view>
     </view>
-    <view class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
+    <view v-if="false" class="wrapper" style="margin-top: 30rpx;border-radius: 24rpx;">
       <view class="item acea-row row-between" style="flex-wrap: nowrap;">
         <view class="acea-row row-middle" style="font-size: 40rpx;color: #080F1A;font-weight: bold;flex-wrap: nowrap;">
           <image style="width: 32rpx;height: 32rpx;margin-right: 12rpx;" :src="webUrl+'/20210808003453973795.png'"
@@ -212,36 +288,96 @@
     <view style="height:100rpx;" v-if="!refundOrder && offlineStatus"></view>
     <view class="footer acea-row row-right row-middle" v-if="!refundOrder && offlineStatus">
       <template v-if="status.type == 0">
-        <view class="bnt cancel" @click="cancelOrder">取消订单</view>
+        <view class="v12-justify-between v12-align-center full-width" style="width: 100%">
-        <view class="bnt bg-color-red" @click="subscribePay">立即付款</view>
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
+          <view class="v12-justify-between v12-align-center">
+            <view class="">
+              <text class="v12-font-22 v12-dark1-text">
+                共{{  orderInfo.totalNum }}件商品
+              </text>
+              <text class="v12-font-bold v12-dark-text v12-font-28 v12-mx-2">
+                实付款
+              </text>
+              <text class="v12-font-bold v12-primary-text v12-font-22">
+                ￥
+              </text>
+              <text class="v12-font-bold v12-primary-text v12-font-28">
+                {{ force2Decimal(orderInfo.payPrice) }}
+              </text>
+            </view>
+            <view class="bnt v12-primary-text v12-primary-border v12-ml-1" @click="subscribePay">立即付款</view>
+          </view>
+        </view>
       </template>
-      <template v-if="status.type == 1">
+      <template v-if="status.type == 1" >
-        <view class="bnt cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
+        <view class="v12-justify-between " style="width: 100%">
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
+          <view class="bnt v12-primary-text v12-primary-border cancel" @click="goGoodsReturn(orderInfo)">申请退款</view>
+        </view>
       </template>
       <template v-if="status.type == 2">
-        <view class="bnt default"
+        <view class="v12-justify-between " style="width: 100%">
-              @click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
-              v-if="orderInfo.isTickets!==1">查看物流
+          <view class="v12-justify-between">
+            <view class="" style="position: relative">
+              <text class="btn-more v12-font-24 v12-mr-2" @click="showMore = !showMore">更多</text>
+              <view class="group-float" v-show="showMore">
+                <view class="btn flex jc-center ai-center v12-font-24">延长收货</view>
+                <view class="btn flex jc-center ai-center v12-font-24" @click="goGoodsReturn(orderInfo)">申请退款</view>
+              </view>
+            </view>
+            <view class="bnt v12-dark-text v12-dark-border default"
+                  @click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
+                  v-if="orderInfo.isTickets!==1">查看物流
+            </view>
+            <view class="bnt v12-primary-text v12-primary-border" @click="takeOrder">确认收货</view>
+          </view>
         </view>
-        <view class="bnt bg-color-red" @click="takeOrder">确认收货</view>
       </template>
       <template v-if="status.type == 3">
-        <view class="bnt default" @click="
+        <view class="v12-justify-between " style="width: 100%">
-            $yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
-          " v-if="orderInfo.isTickets!==1">查看物流
+          <view class="v12-justify-between">
+            <view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
+            <view class="bnt v12-primary-text v12-primary-border" @click="routerGo(orderInfo.cartInfo[0])">立即评价</view>
+            <!-- <view class="bnt v12-dark-text v12-dark-border default" @click="
+                $yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})
+              " v-if="orderInfo.isTickets!==1">查看物流
+            </view> -->
+          </view>
+        </view>
+      </template>
+      <template v-if="status.type == -1">
+        <view style="width: 100%">
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
+        </view>
+      </template>
+      <template v-if="status.type == -2">
+        <view class="v12-justify-between " style="width: 100%">
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
+          <view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
+        </view>
+      </template>
+      <template v-if="status.type == -3">
+        <view class="v12-justify-between " style="width: 100%">
+          <view class="bnt v12-dark-text v12-dark-border cancel" @click="goRoom(orderInfo)">联系商家</view>
+          <view class="">
+            <view class="bnt v12-dark-text v12-dark-border cancel" >再买一单</view>
+            <view class="bnt v12-primary-text v12-primary-border">立即评价</view>
+          </view>
         </view>
       </template>
       <template v-if="status.type == 4">
-        <view class="bnt cancel" @click="delOrder">删除订单</view>
+        <view class="bnt v12-dark-text v12-dark-border cancel" @click="delOrder">删除订单</view>
         <view
           v-if="orderInfo.isTickets !== 1"
-          class="bnt default"
+          class="bnt v12-dark-text v12-dark-border default"
           @click="$yrouter.push({ path: '/pages/order/Logistics/index' ,query:{id:orderInfo.orderId }})"
         >查看物流
         </view>
       </template>
       <template v-if="status.type == 6">
-        <view class="bnt bg-color-red" @click="goGroupRule(orderInfo)">查看拼团</view>
+        <view class="bnt v12-primary-text v12-primary-border" @click="goGroupRule(orderInfo)">查看拼团</view>
       </template>
     </view>
     <Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
@@ -292,6 +428,7 @@ export default {
   mixins: [pageListenMixins],
   data: function () {
     return {
+      showMore: false,
       isShowPayPwdPop: false,
       offlinePayStatus: 2,
       orderTypeName: "普通订单",
@@ -329,6 +466,25 @@ export default {
   },
   methods: {
     copyClipboard,
+    routerGo(cart) {
+      this.$yrouter.push({
+        path: "/pages/shop/GoodsEvaluate/index",
+        query: { id: cart.unique }
+      });
+    },
+    goOrderDetails(order) {
+      this.$yrouter.push({
+        path: "/pages/order/OrderDetails/index",
+        query: {
+          id: order.orderId
+        }
+      });
+    },
+    goRoom(order) {
+      uni.navigateTo({
+        url: `/pkg_common/views/room?id=${order.merId}&name=${order.merName}`
+      })
+    },
     force2Decimal(v) {
       return this.$force2Decimal(v);
     },
@@ -590,6 +746,35 @@ export default {
 };
 </script>
 <style scoped lang="less">
+.footer{
+  height: 122rpx;
+  border-radius: 40rpx 40rpx 0rpx 0rpx;
+}
+.group-float {
+    position: absolute;
+    width: 196rpx;
+    box-sizing: border-box;
+    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.16);
+    padding: 0 20rpx;
+    background: #fff;
+    left: -40px;
+    right: 0;
+    top: -62px;
+    .btn {
+      box-sizing: border-box;
+      padding: 20rpx 0;
+      color: #333;
+      font-size: 32rpx;
+      line-height: 1;
+    }
+
+    .btn-service {
+      border-bottom: 1rpx solid #F0F0F0;
+    }
+  }
+.bnt{
+  font-size: 28rpx !important;
+}
 .geoPage {
   position: fixed;
   width: 100%;

pages/user/User/index.vue

@@ -525,6 +525,9 @@ export default {
 </script>
 
 <style lang="less">
+.full-width{
+  width: 100%;
+}
 .innTag {
   margin-left: -30rpx;
   width: 196rpx;