refactor(create-order): 重构订单详情页面的活动商品展示逻辑

- 提取 showActivityCardRateModule 函数到 utils 文件中
- 优化活动商品信息的展示格式和样式
- 调整订单详情数据的处理方式，使用计算属性替代手动更新
- 修复部分组件中的错误处理和数据传递问题

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/store/order.js

@@ -276,6 +276,9 @@ export default {
         try {
           const { error_code: code, error_msg: msg, data } = await ajaxGetOrderDetail({ orderCode: id })
           if (code === 0 && data) {
+            const { pageFormValue, productArr } = sortOrderInfo(data)
+            data._pageFormValue = pageFormValue
+            data._productArr = productArr
             commit('setOrderDetail', data)
             return data
           } else {

src/views/create-order/components/ProductInfoCardList.vue

@@ -46,7 +46,7 @@ import ProductInfoCard from './ProductInfoCard.vue'
 import ProductCard from '../ui/ProductCard.vue'
 import { mapState } from 'vuex'
 import { pageFormState } from '@/views/create-order/mixins'
-import { getCardTotalAmount } from "@/views/create-order/hooks/utils"
+import { showActivityCardRateModule } from "@/views/create-order/hooks/utils"
 import ContractMoneyTotalDesc from '@/views/create-order/components/contractMoneyTotalDesc.vue'
 
 export default {
@@ -82,7 +82,7 @@ export default {
       return this.pageForm.buySubject
     },
     activityCardList() {
-      return this.productCardList.map(product => this.showActivityCardRateModule(product))
+      return this.productCardList.map(product => showActivityCardRateModule(this.productCardList, product))
     },
   },
   watch: {
@@ -103,29 +103,6 @@ export default {
     addProduct() {
       this.$store.commit('order/addOrderProductItem')
     },
-    showActivityCardRateModule(product) {
-      // 找到产品列表中当前活动code最后一个的id。
-      const lastActivityItem = this.productCardList.findLast(p => {
-        return p.productCardInfo.activityId === product.productCardInfo.activityId && p.productCardInfo.activityId
-      })
-      if (lastActivityItem) {
-        const activityGroupId = lastActivityItem.productCardInfo.activityGroupId
-        const activityId = lastActivityItem.productCardInfo.activityId
-        const activityList = this.productCardList.filter(p => p.productCardInfo.activityId === activityId && activityId)
-        if (product.productCardInfo.activityGroupId === activityGroupId && activityGroupId) {
-          const moneyList = activityList.map(product => product.productCardInfo.form?.contractAmount)
-          const contractInfo = getCardTotalAmount(moneyList)
-          const activityConf = lastActivityItem.productCardInfo?.activityConf
-
-          return {
-            label: activityConf?._activity_name || activityConf?.activityName,
-            ...contractInfo,
-            show: true
-          }
-        }
-      }
-      return { show: false }
-    },
     removeProduct(index) {
       const activityProduct = this.isActivityProduct(index)
       if (activityProduct) {

src/views/create-order/components/order-detail-submodule/ContractInfoElectronModule.vue

@@ -48,7 +48,6 @@
         ref="editContractArchiveModule"
         :orderDetail="orderDetail"
         :isAdmin="isAdmin"
-        :contractFeedbackInfo="contractFeedbackInfo"
       ></EditContractInfo>
     </Dialog>
     <new-d-model :data="orderDetail"  ref="detailModelContract" @refresh="doRefresh"></new-d-model>
@@ -60,7 +59,6 @@ import InfoCard from '../../ui/InfoCard.vue';
 import { signUnitOptions } from '@/views/create-order/data/index.js'
 import EditContractInfo from './EditContractInfo.vue';
 import Dialog from '@/components/Dialog.vue';
-import { sortOrderInfo } from '@/views/create-order/components/schema-form/resort/'
 import { dateFormatter } from '@/assets/js/date'
 import { calcShowOnlineContractForm } from "@/views/create-order/hooks/utils"
 import { ajaxEditOrderContract } from '@/api/modules/'
@@ -95,13 +93,11 @@ export default {
   data() {
     return {
       editContractArchiveDialogVisible: false,
-      contractFeedbackInfo: {},
       showContract: false,
     }
   },
   mounted() {
-    this.contractFeedbackInfo = sortOrderInfo(this.orderDetail)
-    const res = this.getOnlineContractFormShow(this.contractFeedbackInfo.pageFormValue, this.contractFeedbackInfo.productArr)
+    const res = this.getOnlineContractFormShow(this.orderDetail._pageFormValue, this.orderDetail._productArr)
     this.showContract = res || false
   },
   methods: {

src/views/create-order/components/order-detail-submodule/EditContractInfo.vue

@@ -81,12 +81,6 @@ export default {
         return {}
       }
     },
-    contractFeedbackInfo: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
   },
   data() {
     return {
@@ -195,7 +189,7 @@ export default {
   },
   created() {
     this.initSignTime()
-    const { pageFormValue, productArr } = this.contractFeedbackInfo || {}
+    const { _pageFormValue: pageFormValue, _productArr: productArr } = this.orderDetail || {}
     if (pageFormValue) {
       for (const key in pageFormValue) {
         this.setPageForm({ key, data: pageFormValue[key] })

src/views/create-order/components/order-detail-submodule/OrderActions.vue

@@ -353,10 +353,21 @@ export default {
           this.resetPageInfo()
           break;
         case 'submit':
+          this.$refs.editOrderRef.submit().then(() => {
+            this.editdialogVisible = false;
+            this.$emit('refresh')
+          })
+          .catch(e => {
+            console.warn(e);
+            // 这里可以根据需要处理错误，例如显示错误信息
+          })
+          .finally(() => {
+            this.dialogSubmitLoading = false;
+          })
+          break;
         case 'stash':
           this.dialogSubmitLoading = true;
-          const method = type === 'submit' ? 'submit' : 'stash';
-          this.$refs.editOrderRef[method]()
+          this.$refs.editOrderRef['stash']()
               .then(() => {
                 this.editdialogVisible = false;
               })

src/views/create-order/components/order-detail-submodule/OrderDetailCardProductList.vue

@@ -70,25 +70,15 @@
           </div>
         </div>
         <template #activity>
-          <div v-if="product.activity_code" class="order-detail-product-activity">
-            <div class="order-detail-product-activity-title">
-              <span>活动商品：</span>
-              <span>{{ product.activity_code || '买2年大会员送：1年大会员+人脉管理+阳光直采+1000条数据流量包高级字段包+腾讯视频年卡' }}</span>
-            </div>
-            <div class="order-detail-product-activity-item">
-              <div class="order-detail-product-activity-item-title">
-                <span>合同金额合计：</span>
-                <span>￥{{ product.final_price }}</span>
-              </div>
-              <div class="order-detail-product-activity-item-title">
-                <span>标准售价合计：</span>
-                <span>￥{{ product.original_price }}</span>
-              </div>
-              <div class="order-detail-product-activity-item-title">
-                <span>折扣率：</span>
-                <span>{{ product.rate }}</span>
-              </div>
-            </div>
+          <div class="activity-product-container product-module" v-if="product._a.show">
+            <div class="highlight-text">活动商品：{{ product._a.label }}</div>
+            <ContractMoneyTotalDesc
+              class="contract-info-container"
+              :hasContract="product._a.hasContract"
+              :contract="product._a.contract"
+              :standard="product._a.standard"
+              :rate="product._a.rate"
+            />
           </div>
         </template>
       </ProductCard>
@@ -105,6 +95,8 @@ import { div, calcDiscountRate, roundToTwoDecimals } from '@/utils/number/';
 import TableCard from '../../ui/TableCard.vue';
 import newDetailModel from '@/views/order/components/new-detailModel.vue';
 import ServiceList from '../product-info-submodule/ServiceList.vue';
+import { showActivityCardRateModule } from "@/views/create-order/hooks/utils"
+import ContractMoneyTotalDesc from '@/views/create-order/components/contractMoneyTotalDesc.vue'
 import { mapState } from 'vuex';
 export default {
   name: 'OrderDetailCardProduct',
@@ -112,7 +104,8 @@ export default {
     ProductCard,
     TableCard,
     newDetailModel,
-    ServiceList
+    ServiceList,
+    ContractMoneyTotalDesc
   },
   props: {
     // orderDetail: {
@@ -134,7 +127,7 @@ export default {
         { label: '标准售价', key: 'original_price', span: 3},
         { label: '折扣率', key: 'rate', span: 3},
         { label: '子账号数量', key: 'subAccountCount', span: 1, condition: () => this.parsedFilter.buyAccountCount && this.parsedFilter.giftAccountCount },
-        { label: '主账号数量', key: 'mainAccountCount', span: 1, condition: (product) => product.product_type === 'VIP订阅' },
+        { label: '主账号数量', key: 'mainAccountCount', span: 1 },
         { label: '关联订单', key: 'linkedOrder', span: 1},
         { label: '开通权益手机号', key: 'phone', span: 3},
         { label: '服务开始时间', key: 'service_starttime', span: 3},
@@ -201,11 +194,12 @@ export default {
     async init() {
       this.orderData = this.orderDetailInfo?.orderData || {};
       let productData = this.orderDetailInfo?.productData || [];
+      const { _productArr } = this.orderDetailInfo || {}
 
       if (productData.length > 0) {
         // 使用 Promise.all 来并行处理每个 product 的异步操作
         productData = await Promise.all(
-          productData.map(async (product) => {
+          productData.map(async (product, index) => {
             try {
               const parsedFilter = this.parseProductFilter(product);
               const serviceIds = parsedFilter.serviceIds || [];
@@ -226,7 +220,8 @@ export default {
               const finalPrice = this.formatNumber(product.final_price);
               let originalPrice = this.formatNumber(product.original_price);
               this.parsedFilter = parsedFilter;
-              return {
+
+              const newProduct = {
                 ...product,
                 filter: parsedFilter,
                 rate,
@@ -236,8 +231,13 @@ export default {
                 linkedOrder,
                 bigServiceNames,
                 final_price: finalPrice,
-                original_price: originalPrice
+                original_price: originalPrice,
+                ..._productArr[index] || {},
               };
+
+              newProduct._a = showActivityCardRateModule(_productArr, newProduct)
+              
+              return newProduct
             } catch (error) {
               console.error('产品信息初始化失败:', error);
               return product;
@@ -245,7 +245,7 @@ export default {
           })
         );
       }
-
+      console.log('productData', productData)
       this.setTotalAmounts(productData);
       this.productData = productData;
     },
@@ -534,30 +534,24 @@ export default {
   .no_open_root {
     color: $red_light;
   }
-  .order-detail-product-activity {
+  .activity-product-container {
     padding: 14px 20px;
-    border: 1px solid $color_main;
-    background: rgba(42, 190, 209, 0.08);
     border-radius: 8px;
-    &-title {
-      font-size: 14px;
-      line-height: 22px;
-      color: $color_main;
-    }
-    &-item {
-      display: flex;
-      align-items: center;
+    border: 1px solid $main;
+    background-color: rgba($main, 0.08);
+    .desc-detail-info-list  {
       margin-top: 8px;
     }
-    &-item-title {
-      margin-right: 24px;
-      &>span {
+    ::v-deep {
+      .desc-label {
         font-size: 14px;
         line-height: 22px;
         color: #686868;
       }
-      &>span:last-child {
-        color: #1D1D1D; 
+      .desc-value  {
+        font-size: 14px;
+        line-height: 22px;
+        color: #1D1D1D;
       }
     }
   }

src/views/create-order/components/order-detail-submodule/OrderDetailCardProductSummarize.vue

@@ -57,7 +57,6 @@ export default {
   watch: {
     orderDetail: {
       async handler(newVal) {
-        this.orderData = await newVal?.orderData || {};
         await this.init(newVal);
       },
       deep: true,
@@ -67,7 +66,7 @@ export default {
   computed: {
     ...mapState({
       orderDetail: state => state.order.orderDetail,
-    })
+    }),
   },
   methods: {
     async init(val) {
@@ -212,13 +211,17 @@ export default {
 
     // 设置合同金额合计和标准售价合计，以及计算折扣率总和。
     setTotalAmounts(productData) {
+      this.orderData = this.orderDetail.orderData || {};
       const totalFinalPrice = productData.reduce((acc, cur) => acc + Number(cur.final_price), 0).toFixed(2);
       const totalOriginalPrice = productData.reduce((acc, cur) => acc + Number(cur.original_price), 0).toFixed(2);
       const rateTotal = div(totalFinalPrice, totalOriginalPrice) ? (div(totalFinalPrice, totalOriginalPrice) * 100).toFixed(2) + '%' : '无法计算';
 
-      this.orderData.final_price_total = totalFinalPrice;
-      this.orderData.original_price_total = Number(totalOriginalPrice) ? '￥' + totalOriginalPrice : '无法计算';
-      this.orderData.rate_total = Number(totalOriginalPrice) ? rateTotal : '无法计算';
+      this.orderData = {
+        ...this.orderData,
+        final_price_total: totalFinalPrice,
+        original_price_total: Number(totalOriginalPrice)? '￥' + totalOriginalPrice : '无法计算',
+        rate_total: Number(totalOriginalPrice)? rateTotal : '无法计算'
+      }
     },
 
     flattenLinkOrderList(linkOrderList) {

src/views/create-order/components/order-detail-submodule/PaymentInfo.vue

@@ -97,8 +97,11 @@ export default {
         },
         {
           label: '手续费',
-          prop: 'commission',
-          width: '90'
+          prop: 'procedures_money',
+          width: '90',
+          render: (row) => {
+             return row.procedures_money ? '￥' + this.returnAmount(row.procedures_money) : this.returnAmount(0) 
+          }
         },
         {
           label: '回款银行',

src/views/create-order/hooks/utils.js

@@ -191,3 +191,31 @@ export function getCardTotalAmount(moneyList) {
     rate,
   }
 }
+
+// 提取产品卡片的活动卡片展示 product: OrderProductCardItem
+export function showActivityCardRateModule(productList, product) {
+  // 找到产品列表中当前活动code最后一个的id。
+  console.log('product', product)
+  const lastActivityItem = productList.findLast(p => {
+    return p.productCardInfo.activityId === product.productCardInfo.activityId && p.productCardInfo.activityId
+  })
+  if (lastActivityItem) {
+    const activityGroupId = lastActivityItem.productCardInfo.activityGroupId
+    const activityId = lastActivityItem.productCardInfo.activityId
+    const activityList = productList.filter(p => p.productCardInfo.activityId === activityId && activityId)
+    if (product.productCardInfo.activityGroupId === activityGroupId && activityGroupId) {
+      const moneyList = activityList.map(product => {
+        return product.productCardInfo.form?.contractAmount || product.productCardInfo.waitingRestoreForm?.contractAmount
+      })
+      const contractInfo = getCardTotalAmount(moneyList)
+      const activityConf = lastActivityItem.productCardInfo?.activityConf
+
+      return {
+        label: activityConf?._activity_name || activityConf?.activityName,
+        ...contractInfo,
+        show: true
+      }
+    }
+  }
+  return { show: false }
+}