fix: 订单详情调整、弹窗功能补全、作废订单功能、下载电子协议功能

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

src/components/Dialog.vue

@@ -14,8 +14,8 @@
     <slot name="default"></slot>
     <span slot="footer" v-if="showFooter" class="dialog-footer">
       <slot name="footer">
-        <button class="action-button cancel" @click="onClickCancel">取消</button>
-        <button class="action-button confirm"  :disabled="disabled" @click="onClickConfirm">确定</button>
+        <button v-if="showCancelButton" class="action-button cancel" @click="onClickCancel">{{ cancelButtonText }}</button>
+        <button class="action-button confirm"  :disabled="disabled" @click="onClickConfirm">{{ confirmButtonText }}</button>
       </slot>
     </span>
     </el-dialog>
@@ -60,6 +60,18 @@ export default {
       type: String,
       default: ''
     },
+    showCancelButton: {
+      type: Boolean,
+      default: true
+    },
+    confirmButtonText: {
+      type: String,
+      default: '确定'
+    },
+    cancelButtonText: {
+      type: String,
+      default: '取消'
+    },
     disabled: Boolean
   },
   methods: {
@@ -98,6 +110,7 @@ export default {
     flex: 1;
     height: 36px;
     border-radius: 6px;
+    cursor: pointer;
     &.cancel {
       border: 1px solid #e0e0e0;
       background-color: #fff;

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

@@ -5,13 +5,47 @@
         <div class="order-action-text" @click="item.action">{{ item.text }}</div>
       </div>
     </div>
+    <Dialog
+      ref="cancelOrderDialog"
+      customClass="cancel-order-dialog"
+      title="作废订单"
+      :visible.sync="cancelOrderVisible"
+      center
+      width="360px"
+      @confirm="cancelOrderConfirm"
+      @cancel="cancelOrderCancel"
+    >
+      <div class="cancel-order-content">
+        <span>确认作废订单吗？</span>
+      </div>
+    </Dialog>
+    <Dialog
+      ref="downloadProtocolDialog"
+      customClass="download-protocol-dialog"
+      title="不支持下载电子协议"
+      :visible.sync="downloadProtocolVisible"
+      :show-cancel-button="false"
+      confirm-button-text="我知道了"
+      center
+      width="360px"
+      @confirm="downloadProtocolConfirm"
+      @cancel="downloadProtocolCancel"
+    >
+      <div class="cancel-order-content">
+        <span>该订单不支持下载电子协议</span>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script>
+import Dialog from '@/components/Dialog'
+
 export default {
   name: 'OrderActions',
-  components: {},
+  components: {
+    Dialog
+  },
   props: { 
     orders: {
       type: Object,
@@ -66,46 +100,41 @@ export default {
         //   } 
         // }
       ],
-      orDetails: {},
-      book: {}
+      cancelOrderVisible: false,
+      downloadProtocolVisible: false
     }
   },
   computed: {},
-  mounted() {
-    this.orDetails = this.orders?.res
-    this.book = this.orders?.filterData
-  },
   methods: {
     editOrder() {
-        // const source = this.book?.source
-        // const product_type = this.orDetails?.product_type
-        // if (this.orDetails?.payType) {
-        //     if (this.orders.res.payType === '微信') {
-        //         this.orders.res.payTypes = 'wx'
-        //     } else if (this.orders.res.payType === '支付宝') {
-        //         this.orders.res.payTypes = 'ali'
-        //     } else {
-        //         this.orders.res.payTypes = 'transferAccounts'
-        //     }
-        // } else {
-        //     this.orders.res?.payTypes = 'transferAccounts'
-        // }
-        // if (source == 'qmx') { //线下
-        //     if (product_type && product_type.indexOf('大会员') != -1) {
-        //         // this.$refs.bigOrderEdit.show(this.orders)
-        //     } else {
-        //         // this.$refs.otherOrderEdit.show(this.orders)
-        //     }
-        // } else { //线上
-        //     // this.$refs.onlineOrderEdit.show(this.orders)
-        // }
     },
+
+    // 作废订单相关逻辑开始
     cancelOrder() {
-      console.log('cancelOrder') 
+      console.log('cancelOrder')
+      this.cancelOrderVisible = true
+    },
+
+    cancelOrderConfirm() {
+      this.cancelOrderVisible = false
     },
+    cancelOrderCancel() {
+      this.cancelOrderVisible = false
+    },
+    // 作废订单相关逻辑结束
+
+    // 下载电子协议相关逻辑开始
     downloadProtocol() {
       console.log('downloadProtocol') 
+      this.downloadProtocolVisible = true 
+    },
+    downloadProtocolConfirm() {
+      this.downloadProtocolVisible = false 
     },
+    downloadProtocolCancel() {
+      this.downloadProtocolVisible = false 
+    },
+    // 下载电子协议相关逻辑结束
     wxAliPay() {
       console.log('wxAliPay')
     },
@@ -142,6 +171,26 @@ export default {
       color: #2ABED1;
     }
   }
- } 
+ }
+ .cancel-order-dialog {
+  .cancel-order-content {
+    text-align: center;
+    font-size: 14px;
+    color: #686868; 
+  }
+ }
+::v-deep {
+  .download-protocol-dialog.el-dialog {
+    .dialog-footer {
+      display: flex;
+      justify-content: center;
+    }
+    .action-button.confirm {
+      flex: none;
+      width: 120px;
+    }
+  }
+}
+ 
 }
 </style>

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

@@ -14,7 +14,7 @@
             {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '-' }}
           </div>
           <div v-else-if="item.key === 'commission'">
-            {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '-' }}
+            {{ item.label }}：￥{{ formatNumber(orderData[item.key]) || '0.00' }}
           </div>
           <div v-else-if="item.key === 'zero_type'">
             <span v-if="shouldRenderItem(item)">
@@ -96,7 +96,7 @@
 import InfoCard from '../../ui/InfoCard.vue';
 import ProductCard from '../../ui/ProductCard.vue';
 import { paymentTypeOptions } from '../../data/options.js';
-import { div } from '@/utils/number/';
+import { div, calcDiscountRate, roundToTwoDecimals } from '@/utils/number/';
 import TableCard from '../../ui/TableCard.vue';
 export default {
   name: 'OrderDetailCard',
@@ -261,7 +261,7 @@ export default {
     calculateDiscountRate(product) {
       let rate = '无法计算';
       if (product.original_price && Number(product.original_price) !== 0) {
-        rate = (div(product.final_price, product.original_price) * 100).toFixed(2) + '%';
+        rate = (calcDiscountRate(product.final_price, product.original_price)) + '%';
       }
       return rate;
     },
@@ -307,8 +307,10 @@ export default {
 
     flattenLinkOrderList(linkOrderList) {
       const result = [];
+      if (!linkOrderList || linkOrderList.length === 0) return result;
       linkOrderList.forEach(item => {
         const { orderArr, ...rest } = item; // 拆分 orderArr 和其他字段
+        if (!orderArr || orderArr.length === 0) return;
         orderArr.forEach(order => {
           result.push({
             ...rest,           // 非 orderArr 的字段（如 name, empowerCount 等）
@@ -393,9 +395,10 @@ export default {
       const tactics = product.tactics === '2' ? '【赠送】' : '【售卖】';
       return `${index + 1}.${tactics}${product.product_type}`;
     },
+    // 格式化数字，保留两位小数
     formatNumber(num, x = 2) {
-      num = Number(num) || 0
-      return (num / 100).toFixed(x)
+      if(!num) return 0.00
+      return roundToTwoDecimals(num, x)
     },
     orderCoursed(val) {
         if (val == 0) {