代码提交

pages/selectRefundGood/selectRefundGood.vue

@@ -20,21 +20,43 @@
         <card class="shopping-checkbox">
           <view
               v-for="(item, index) in goodsList"
-              class="shopping-checkbox-cell"
+              :key="item.id"
+              class="goods-row"
           >
             <uv-checkbox
                 :name="item.cartInfo.productAttrUnique"
                 :disabled="item.isAfterSales != 1"
             />
-            <goods
-                list
-                interval
-                showAction
-                model
-                :price="item.cartInfo.truePrice"
-                :data="item.cartInfo.productInfo"
-            >
-            </goods>
+            <view class="goods-col">
+              <Goods
+                  row
+                  imgWidth="200rpx"
+                  info-padding="10rpx 40rpx"
+                  :goods="item.cartInfo.productInfo"
+              >
+                <template #options>
+                  <view class="goods-options">
+                    <!-- sku select -->
+                    <view class="sku-row flex">
+                      <view
+                          class="sku-info flex flex-jc__sb flex-ai__center"
+                      >
+                        <view class="info">
+                          {{ item.cartInfo.productInfo &&item.cartInfo.productInfo.attrInfo && item.cartInfo.productInfo.attrInfo.sku }}
+                        </view>
+                      </view>
+                    </view>
+                    <!-- bottom -->
+                    <view class="price-row flex flex-ai__center flex-jc__sb">
+                      <!-- price -->
+                      <view class="price-box flex flex-ai__end">
+                        ￥{{item.cartInfo.truePrice }}
+                      </view>
+                    </view>
+                  </view>
+                </template>
+              </Goods>
+            </view>
           </view>
         </card>
       </space>
@@ -87,6 +109,7 @@ import { ref, watch } from 'vue'
 import { applyForAfterSalesInfo } from '@/api/order'
 import { onLoad } from '@dcloudio/uni-app'
 import { useRouter } from "@/hooks/useRouter";
+import Goods from "@/components/goodsComponents/Goods.vue";
 
 const {getParams, push, goBack} = useRouter()
 const goodsList = ref([])
@@ -118,7 +141,7 @@ watch(goodsSelect, (goodsSelect) => {
     price += item.cartInfo.truePrice * item.cartInfo.cartNum
   })
 
-  totalPrice.value = price
+  totalPrice.value = price.toFixed(2)
 })
 
 const handleOrderInfo = async (option) => {
@@ -140,7 +163,8 @@ const toRefund = (type) => {
       goods: goodsSelect.value.toString(),
       orderId: orderId.value,
       id: id.value
-    }
+    },
+    type:'redirectTo'
   })
 }
 
@@ -205,4 +229,95 @@ onLoad((options) => {
     background: $white-color;
   }
 }
+
+.goods-row{
+  @include useFlex(space-between,center);
+  @include usePadding(20,10);
+  width: 100%;
+  .goods-col{
+    width: 90%;
+  }
+}
+
+// 商品SKU 数量等操作条
+.goods-options {
+  width: 100%;
+
+  .sku-row {
+    margin-bottom: 30rpx;
+
+    .sku-info {
+      @include usePadding(10, 4);
+      border: 1rpx solid #ccc;
+      border-radius: 5rpx;
+      font-size: 24rpx;
+      transition: all .3s;
+      max-width: 100%;
+
+
+      .info {
+        width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      &:active {
+        scale: 1.1;
+      }
+
+      .icon {
+        margin-left: 15rpx;
+      }
+    }
+  }
+
+  .price-row {
+    width: 100%;
+
+    .price-box {
+      font-size: 30rpx;
+      color:$primary-color;
+
+      .old-price {
+        font-size: 20rpx;
+        color: $tips-color;
+        text-decoration: line-through;
+        margin-left: 10rpx;
+      }
+    }
+
+    .cart-num {
+      font-size: 24rpx;
+
+      .input {
+        width: 120rpx;
+
+
+        input {
+          width: 100%;
+          text-align: center;
+          color: #333;
+        }
+      }
+
+      .button {
+        font-size: 32rpx;
+        width: 34rpx;
+        aspect-ratio: 1/1;
+        border-radius: 5rpx;
+        border: 2rpx solid #cccccc;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all .3s;
+
+        &:active {
+          scale: 1.2;
+        }
+      }
+    }
+  }
+}
 </style>