feat: 订单详情交互调整

src/pages-order/order/components/GoodsInfo/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <view class="border-box bg-white p-12 rounded-12 mb-12">
+  <view
+    v-if="commodityTypeCode === '0'"
+    class="border-box bg-white p-12 rounded-12 mb-12"
+  >
     <!-- 酒店类型入住离店日期部分 -->
     <DateRangeSection
       v-if="orderData.commodityTypeCode === '0'"
@@ -10,22 +13,44 @@
       {{ orderData.commodityName }}
     </view>
 
-    <view class="border-box border-bottom">
-      <view class="font-size-12 color-99A0AE line-height-16 pb-12">
-        {{ orderData.commodityDescription }}
-      </view>
-
-      <!-- 权益部分 -->
-      <view class="flex flex-items-center mb-8">
-        <text
-          class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
-          v-for="(item, index) in orderData.commodityFacilityList"
-          :key="index"
-        >
-          {{ item }}
-        </text>
-      </view>
+    <view
+      class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
+    >
+      {{ orderData.commodityDescription }}
     </view>
+
+    <!-- 权益部分 -->
+    <view class="border-box flex flex-items-center pt-12">
+      <text
+        class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+        v-for="(item, index) in commodityFacilityList"
+        :key="index"
+      >
+        {{ item }}
+      </text>
+    </view>
+  </view>
+
+  <view
+    v-if="commodityTypeCode !== '0'"
+    class="border-box bg-white p-12 rounded-12 mb-12"
+  >
+    <view
+      class="font-size-16 font-500 color-000 line-height-24 ellipsis-1 mb-8"
+    >
+      {{ orderData.commodityName }}
+    </view>
+
+    <view class="flex font-size-12">
+      <text class="w-60 color-99A0AE">购买数量</text>
+      <text class="color-525866">{{ commodityAmount }}</text>
+    </view>
+
+    <view
+      v-if="orderData.orderStatus === '0'"
+      class="border-box border-top pt-12 font-size-14 font-500 color-171717 mt-12"
+      >凭[电子凭证]直接验证使用</view
+    >
   </view>
 </template>
 
@@ -54,6 +79,21 @@ const selectedDate = computed(() => {
     totalDays,
   };
 });
+
+const commodityTypeCode = computed(() => props.orderData.commodityTypeCode);
+
+const commodityAmount = computed(() => {
+  // 门票单位：张、餐饮单位：份
+  const { commodityAmount } = props.orderData;
+  return commodityTypeCode.value === "2"
+    ? `${parseInt(commodityAmount)}张`
+    : `${parseInt(commodityAmount)}份`;
+});
+
+// 取3个权益
+const commodityFacilityList = computed(() => {
+  return props.orderData.commodityFacilityList.slice(0, 3) || [];
+});
 </script>
 
 <style scoped lang="scss">