From 75290bf1b4f54a931d264c67dca65292530a9b87 Mon Sep 17 00:00:00 2001
From: linxi <linxi.jiang@jeeyor.com>
Date: Thu, 5 Sep 2024 14:58:42 +0800
Subject: [PATCH] =?UTF-8?q?Style(=E8=AE=A2=E5=8D=95)=EF=BC=9AUI=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/v12-style.less     |   8 +-
 pages/order/MyOrder/index.vue | 144 ++++++++++++++++++++++++----------
 2 files changed, 109 insertions(+), 43 deletions(-)

diff --git a/assets/css/v12-style.less b/assets/css/v12-style.less
index 94dc2f5..308fe4f 100644
--- a/assets/css/v12-style.less
+++ b/assets/css/v12-style.less
@@ -3,8 +3,8 @@
 @dark-color: #333333;
 @white-color: #fff;
 
-@colors: #C52733, #333333, #fff, #666, #F0F0F0;
-@classnames: primary, dark, white, secondary-dark, grey;
+@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999;
+@classnames: primary, dark, white, secondary-dark, grey, dark1;
 /*=====================================*/ 
 
 each(@colors, {
@@ -96,7 +96,7 @@ each(@colors, {
 .generateRadius(@n, @i: 0) when (@i <= @n) {
   @baseRadius: @i * 1rpx;
   .v12-radius-@{i} {
-    border-radius: @baseRadius
+    border-radius: @baseRadius !important;
   }
   .generateRadius(@n, (@i + 1))
 }
@@ -136,6 +136,8 @@ each(@colors, {
   grid-template-columns: 1fr 1fr;
 }
 
+/*==============v12 按钮样式======================*/
+
 
 
 
diff --git a/pages/order/MyOrder/index.vue b/pages/order/MyOrder/index.vue
index 530ab78..858595a 100644
--- a/pages/order/MyOrder/index.vue
+++ b/pages/order/MyOrder/index.vue
@@ -1,19 +1,33 @@
 <template>
-  <view class="my-order" ref="container">
+  <view class="my-order v12-mx-2" ref="container">
+    <!-- <view class="m-search-wrap v12-mb-2 v12-mt-3">
+      <u-search placeholder="请输入商品名/订单号" shape="round" :inputStyle="inputStyle" :showAction="false" bgColor="#FFF"></u-search>
+    </view> -->
+    <view class="m-tab-warp">
+      <u-tabs 
+        lineHeight="0" 
+        lineColor="#FF564A" 
+        :activeStyle="activeStyle" 
+        :inactiveStyle="inactiveStyle" 
+        :current="type" 
+        :list="tabList"
+        @click="tabChange">
+      </u-tabs>
+    </view>
+    <!-- <u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
+            @click="tabChange"></u-tabs> -->
 
-    <u-tabs lineColor="#FF564A" activeStyle="#FF564A" inactiveStyle="#C2C5CC" :current="type" :list="tabList"
-            @click="tabChange"></u-tabs>
-
-    <view class="list" style="padding: 80rpx 0 30rpx;">
+    <view class="list v12-ma-0" style="padding: 0rpx 0 30rpx;">
       <view class="item" v-for="(order,orderListIndex) in orderList" :key="orderListIndex">
         <view class="shop-info flex jc-between ai-center" v-if="order.merName">
           <view class="flex ai-center">
-            <image :src="webUrl+'/20221008152431059973.png'" style="width: 40rpx;height: 40rpx"/>
-            <text class="name">{{ order.merName }}</text>
+            <image :src="webUrl+'/orderIcon/shop.png'" style="width: 32rpx;height: 32rpx"/>
+            <text class="name v12-font-weight-400 v12-dark-text v12-font-24">{{ order.merName }}</text>
+            <image :src="webUrl+'/orderIcon/arrow.png'" style="width: 24rpx;height: 24rpx; margin-top: 5rpx"/>
           </view>
           <view class="flex ai-center">
-            <image :src="webUrl+'/20221008152418897577.png'" style="width: 24rpx;height: 24rpx"/>
-            <text class="address">{{ order.merCityName }}</text>
+            <image :src="webUrl+'/orderIcon/map.png'" style="width: 28rpx;height: 28rpx"/>
+            <text class="address v12-dark-text v12-font-bold v12-font-24">{{ order.merCityName }}</text>
           </view>
         </view>
 
@@ -26,10 +40,10 @@
             <span class="sign cart-color acea-row row-center-wrapper" v-if="order.storeId > 0">门店</span>
             订单号:{{ order.orderId }}
           </view>
-          <view class="font-color-white statusTag" v-if="order.isTickets===1 && order._status._type === 1">
+          <view class="font-color-white statusTag v12-primary" v-if="order.isTickets===1 && order._status._type === 1">
             待核销
           </view>
-          <view class="font-color-white statusTag" v-else>{{ getStatus(order) }}</view>
+          <view class="font-color-white statusTag v12-primary" v-else>{{ getStatus(order) }}</view>
         </view>
         <view @click="goOrderDetails(order)">
           <view class="item-info acea-row row-between row-top" v-for="(cart,cartInfoIndex) in order.cartInfo"
@@ -58,39 +72,48 @@
             </view>
             <view class="text">
               <view class="acea-row name-wrap">
-                <view class="name more-t">{{ cart.productInfo.storeName }}</view>
+                <view class="name more-t v12-font-bold">{{ cart.productInfo.storeName }}</view>
                 <view class="money">
-                  <view>￥{{ force2Decimal(cart.truePrice) }}</view>
+                  <view>
+                    <text class="v12-font-22">￥</text>
+                    <text class="v12-font-28">{{ force2Decimal(cart.truePrice) }}</text>
+                  </view>
                 </view>
               </view>
-              <view class="acea-row attr-wrap">
+              <view class="acea-row attr-wrap ">
                 <view
                   v-if="cart.productInfo.attrInfo"
-                  class="attr"
+                  class="attr v12-secondary-dark-text v12-font-24 "
                 >
                   规格：{{ cart.productInfo.attrInfo.sku }}
                 </view>
-                <view>x{{ cart.cartNum }}</view>
+                <view class="v12-dark-text v12-font-22">x{{ cart.cartNum }}</view>
               </view>
             </view>
           </view>
         </view>
         <view class="totalPrice acea-row row-between row-middle">
-          <view class="" v-if="order.createTime"><span class="orderTime">{{ order.createTime }}</span></view>
-          <view class="">共{{ order.totalNum || 0 }}件商品，总金额
-            <text class="money font-color-lightred">￥{{ force2Decimal(order.payPrice) }}</text>
+          <view class="" v-if="order.createTime"><span class="orderTime v12-font-24 v12-dark1-text">{{ order.createTime }}</span></view>
+          <view class="v12-font-24 v12-dark1-text">共{{ order.totalNum || 0 }}件商品，
+            <text class="v12-dark-text v12-font-28 v12-font-bold">
+              总金额
+            </text>
+            <text class="v12-font-22 v12-primary-text v12-font-bold">
+              ￥
+            </text>
+            <text class="money font-color-lightred v12-font-28 v12-primary-text v12-font-bold">{{ force2Decimal(order.payPrice) }}</text>
           </view>
         </view>
         <view class="bottom flex jc-between ai-center">
           <view class="group-btn"
                 v-if="(Number(order._status._type) === 2 || Number(order._status._type) === 3) &&
                     order.isTickets === 0">
-            <text class="btn-more" @click="tapShowMore(order,orderListIndex)">更多</text>
+            <text class="btn-more v12-font-24" @click="tapShowMore(order,orderListIndex)">更多</text>
             <view class="group-float" v-show="order.showMore">
-              <view class="btn btn-service flex jc-center ai-center" @click="goRoom(order)"
+              <view class="btn btn-service flex jc-center ai-center v12-font-24" @click="goRoom(order)"
                     v-if="order.merName">联系客服
               </view>
-              <view class="btn flex jc-center ai-center" @click="goRefund(order)">申请退款</view>
+              <view class="btn flex jc-center ai-center v12-font-24" @click="goRefund(order)">申请退款</view>
             </view>
           </view>
           <template v-else>
@@ -100,11 +123,11 @@
 
           <view class="flex">
             <template v-if="order._status._type == 0">
-              <view class="bnt cancelBnt" @click="cancelOrder(order)">取消订单</view>
-              <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即付款</view>
+              <view class="bnt cancelBnt " @click="cancelOrder(order)">取消订单</view>
+              <view class="bnt bg-color-lightred  v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">立即付款</view>
             </template>
             <template v-if="(order._status._type == 1 || order._status._type == 9) && order.isTickets==0">
-              <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看详情</view>
+              <view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">查看详情</view>
             </template>
             <template v-if="order._status._type == 1 && order.isTickets == 1">
               <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">立即核销</view>
@@ -113,11 +136,11 @@
               <view class="bnt default" v-if="order.isExtendedDelivery==0"
                     @click="toDelay(order.orderId)">延长收货
               </view>
-              <view class="bnt default" @click="goLogistics(order)">查看物流</view>
-              <view class="bnt bg-color-lightred" @click="takeOrder(order)">确认收货</view>
+              <view class="bnt default  v12-radius-40" @click="goLogistics(order)">查看物流</view>
+              <view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="takeOrder(order)">确认收货</view>
             </template>
             <template v-if="order._status._type == 3">
-              <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">去评价</view>
+              <view class="bnt bg-color-lightred v12-white v12-primary-text v12-primary-border v12-radius-40" @click="goOrderDetails(order)">去评价</view>
             </template>
             <template v-if="order._status._type === 4">
               <view class="bnt bg-color-lightred" @click="goOrderDetails(order)">查看订单</view>
@@ -152,6 +175,25 @@ export default {
   mixins: [pageListenMixins],
   data() {
     return {
+      inputStyle: {
+        height: '64rpx',
+      },
+      activeStyle: {
+        color: '#C52733',
+        background: 'rgba(197,39,51,0.39)',
+        borderRadius: '30rpx',
+        padding: '5rpx 20rpx',
+        fontWeight: '600'
+      },
+      inactiveStyle: {
+        height: '48rpx !important',
+        background: '#fff !important',
+        borderRadius: '30rpx !important',
+        color: '#333333 !important',
+        padding: '5rpx 15rpx',
+        fontSize: '28rpx !important',
+        lineHeight: '48rpx !important'
+      },
       webUrl: this.$VUE_APP_RESOURCES_URL,
       tabList: [
         {name: '全部'},
@@ -428,12 +470,28 @@ export default {
   }
 };
 </script>
+<style>
 
+.my-order .u-tabs{
+  background-color: transparent !important;
+  position: sticky !important;
+}
+.my-order .u-tabs__wrapper__nav__item{
+  padding: 0 8rpx !important;
+}
+.my-order .u-search__content{
+  box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
+}
+</style>
 <style scoped lang="less">
 page {
   background-color: #fff;
 }
-
+.m-tab-warp{
+  position: sticky;
+  top: 0;
+  background-color: #f5f5f5;
+}
 /deep/ .u-tabs {
   position: fixed;
   z-index: 1;
@@ -443,13 +501,16 @@ page {
 }
 
 .list {
+  .item:first-child{
+    margin-top: 0;
+  }
   .item {
     margin: 30rpx 0;
     border-radius: 12rpx;
 
     .shop-info {
       padding: 20rpx 16rpx;
-      border-bottom: 2rpx solid #eee;
+      // border-bottom: 2rpx solid #eee;
 
       .name {
         margin-left: 6rpx;
@@ -481,22 +542,25 @@ page {
     }
 
     .bottom {
-      border-top: 2rpx solid #eee;
+      border-top: 0rpx solid #eee;
 
       .bnt {
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 160rpx;
-        height: 56rpx;
-        box-sizing: border-box;
-        border-radius: 20rpx;
+        width: 128rpx;
+        height: 44rpx;
+        border-radius: 40rpx;
         font-size: 24rpx;
+        // font-weight: bold;
+        border: 1px solid #707070;
+        color: #333;
+        padding: 1px 3px;
       }
 
       .service {
-        border: 2rpx solid #0DC5C5;
-        color: #0DC5C5;
+        border: 1rpx solid #707070;
+        color: #333;
       }
     }
   }
@@ -520,13 +584,13 @@ page {
 }
 
 .statusTag {
-  font-size: 20rpx;
+  font-size: 24rpx;
   color: #fff;
-  padding: 0 20rpx;
+  padding: 4rpx 20rpx;
   background: #0DC5C5;
   height: 38rpx;
   line-height: 38rpx;
-  border-radius: 20rpx 0px 0px 20rpx;
+  border-radius: 60rpx 0px 0px 60rpx;
 }
 
 .group-btn {