.

.env.production

@@ -5,7 +5,7 @@ VUE_APP_TITLE = 一七生活管理系统
 ENV = 'production'
 
 # 一七生活管理系统/生产环境
-VUE_APP_BASE_API_HOST = 'http://yiqi-test.xhmiracle.com'
+VUE_APP_BASE_API = 'http://localhost:9801'
 VUE_APP_BASE_API = '/prod-api'
 
 port=9900

public/index.html

@@ -8,7 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=BlxqGnImGVvHSKXN2xd7T1IP2LsqGA93"></script>
+    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=BlxqGnImGVvHSKXN2xd7T1IP2LsqGA93"></script> -->
 
     <style>
     html,

src/api/order/cloth.js

@@ -273,20 +273,29 @@ export function countFinancialStatisticsByFactoryOperateDetail(data) {
   })
 }
 
-// 支付
+// 获取订单信息
+export function getOrderInfo(data) {
+  return request({
+    url: '/order/cloth/info',
+    method: 'get',
+    params: data
+  })
+}
+
+// 订单支付
 export function clothOrderPay(data) {
   return request({
-    url: '/mapi/order/cloth/clothOrderPay',
+    url: '/order/cloth/pay',
     method: 'post',
-    data: data
+    data
   })
 }
 
-// 支付结果
-export function getOrderPayResult(params) {
+// 获取支付结果
+export function getOrderPayResult(data) {
   return request({
-    url: '/mapi/order/cloth/getOrderPayResult',
+    url: '/order/cloth/payResult',
     method: 'get',
-    params: params
+    params: data
   })
 }

src/components/payStatusPopup/index.vue

@@ -21,6 +21,7 @@
             <!-- 未支付 -->
             <div v-if="type === 2">
                 <div class="icon">
+                    
                     <i class="el-icon-warning warning"></i>
                 </div>
                 <div class="message">请支付后取衣</div>

src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: 'zparty管理系统',
+      title: '一七管理系统',
       logo: logoImg
     }
   }

src/router/modules/order.js

@@ -0,0 +1,26 @@
+import Layout from '@/layout'
+
+export default {
+  path: '/order',
+  component: Layout,
+  redirect: '/order/cloth',
+  name: 'Order',
+  meta: {
+    title: '订单管理',
+    icon: 'order'
+  },
+  children: [
+    {
+      path: 'cloth',
+      component: () => import('@/views/order/cloth/index'),
+      name: 'ClothOrder',
+      meta: { title: '衣物订单' }
+    },
+    {
+      path: 'collect',
+      component: () => import('@/views/order/cloth/collectCloth'),
+      name: 'CollectCloth',
+      meta: { title: '收银台' }
+    }
+  ]
+} 

src/utils/lodopUtils.js

@@ -1,8 +1,24 @@
 // lodopUtils.js
 var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;
+let CLODOP = null;
+let needCLodop = false;
+
+// CLodop 云打印服务主机
+const hostList = [
+  'localhost:8000',
+  'localhost:18000',
+  'localhost:8001'
+];
+
+// 安装提示
+const LODOP_INSTALL_GUIDE = {
+  DOWNLOAD_URL: 'https://www.lodop.net/download.html',
+  WIN_INSTALL_MSG: '请先下载和安装 Lodop 打印控件，\n 下载地址：https://www.lodop.net/download.html',
+  OTHER_OS_MSG: '对不起，目前仅支持在 Windows 系统下进行打印操作'
+};
 
 //判断是否需要CLodop(那些不支持插件的浏览器)
-function needCLodop() {
+function checkNeedCLodop() {
     try {
         var ua = navigator.userAgent;
         if (ua.match(/Windows\sPhone/i))
@@ -59,39 +75,72 @@ function loadCLodop() {
     head.insertBefore(JS2, head.firstChild);
     CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
 }
-//加载
-if (needCLodop()){loadCLodop();}
 
-//获取LODOP对象主过程,判断是否安装、需否升级
-function getLodop(oOBJECT, oEMBED) {
-    var LODOP;
+/**
+ * 检查是否已安装 Lodop
+ */
+function checkLodopInstall() {
+  try {
+    const LODOP = window.getLodop();
+    if (!LODOP && typeof LODOP !== 'object') return false;
+    if (!LODOP.VERSION) return false;
+    return true;
+  } catch (err) {
+    console.error('检查 Lodop 安装状态出错:', err);
+    return false;
+  }
+}
+
+/**
+ * 显示安装提示信息
+ */
+function showInstallMessage(message) {
+  if (window.$message) {
+    window.$message.error(message);
+  } else {
+    alert(message);
+  }
+  return null;
+}
+
+/**
+ * 获取LODOP对象主过程
+ * @param {boolean} requirePrint 是否需要打印功能
+ * @returns {object|null} LODOP对象或null
+ */
+function getLodop(oOBJECT, oEMBED, requirePrint = false) {
+    let LODOP;
     try {
+        // 判断是否需要 CLodop
+        needCLodop = checkNeedCLodop();
+        
         var ua = navigator.userAgent;
         var isIE = !!(ua.match(/MSIE/i)) || !!(ua.match(/Trident/i));
-        if (needCLodop()) {
+        
+        if (needCLodop) {
             try {
                 // eslint-disable-next-line no-undef
                 LODOP = getCLodop();
                 // eslint-disable-next-line no-empty
             } catch (err) {}
+            
             if (!LODOP && CLodopJsState !== "complete") {
-                if (CLodopJsState == "loading") console.log("网页还没下载完毕，请稍等一下再操作."); else console.log("没有加载CLodop的主js，请先调用loadCLodop过程.");
-                return;
-            }
-            if (!LODOP) {
-                // eslint-disable-next-line no-undef
-                document.body.innerHTML = strCLodopInstall_1 + (CLodopIsLocal ? strCLodopInstall_2 : "") + strCLodopInstall_3 + document.body.innerHTML;
-                return;
-            } else {
-                // eslint-disable-next-line no-undef
-                if (CLODOP.CVERSION < "4.1.2.3") {
-                    // eslint-disable-next-line no-undef
-                    document.body.innerHTML = strCLodopUpdate + document.body.innerHTML;
+                if (CLodopJsState == "loading") {
+                    if (requirePrint) {
+                        return showInstallMessage("网页还没下载完毕，请稍等一下再操作.");
+                    }
+                    return null;
+                } else {
+                    loadCLodop();
+                    if (requirePrint) {
+                        return showInstallMessage(LODOP_INSTALL_GUIDE.WIN_INSTALL_MSG);
+                    }
+                    return null;
                 }
-                if (oEMBED && oEMBED.parentNode)
-                    oEMBED.parentNode.removeChild(oEMBED); //清理旧版无效元素
-                if (oOBJECT && oOBJECT.parentNode)
-                    oOBJECT.parentNode.removeChild(oOBJECT);
+            }
+            
+            if (!LODOP && requirePrint) {
+                return showInstallMessage(LODOP_INSTALL_GUIDE.WIN_INSTALL_MSG);
             }
         } else {
             var is64IE = isIE && !!(ua.match(/x64/i));
@@ -111,33 +160,71 @@ function getLodop(oOBJECT, oEMBED) {
                 else
                     LODOP.setAttribute("type", "application/x-print-lodop");
                 document.documentElement.appendChild(LODOP);
-                CreatedOKLodopObject = LODOP
+                CreatedOKLodopObject = LODOP;
             } else
                 LODOP = CreatedOKLodopObject;
-            //Lodop插件未安装时提示下载地址
-            if ((!LODOP) || (!LODOP.VERSION)) {
-                if (ua.indexOf('Chrome') >= 0)
-                    // eslint-disable-next-line no-undef
-                    document.body.innerHTML = strHtmChrome + document.body.innerHTML;
-                if (ua.indexOf('Firefox') >= 0)
-                    // eslint-disable-next-line no-undef
-                    document.body.innerHTML = strHtmFireFox + document.body.innerHTML;
-                // eslint-disable-next-line no-undef
-                document.body.innerHTML = (is64IE ? strHtm64_Install : strHtmInstall) + document.body.innerHTML;
-                return LODOP;
-            }
-        }
-        if (LODOP.VERSION < "6.2.2.6") {
-            if (!needCLodop())
-                // eslint-disable-next-line no-undef
-                document.body.innerHTML = (is64IE ? strHtm64_Update : strHtmUpdate) + document.body.innerHTML;
         }
 
         return LODOP;
     } catch (err) {
-        console.log("getLodop出错:" + err);
+        console.error('获取打印对象出错:', err);
+        if (requirePrint) {
+            return showInstallMessage('初始化打印对象失败，请检查打印服务是否正常运行');
+        }
+        return null;
     }
 }
 
-export {getLodop};
+/**
+ * 检查打印服务状态
+ */
+function checkPrinterService() {
+  const LODOP = getLodop(null, null, true);
+  if (!LODOP) return false;
+  
+  try {
+    const printers = LODOP.GET_PRINTER_LIST();
+    return printers && printers.length > 0;
+  } catch (err) {
+    console.error('检查打印服务状态出错:', err);
+    return false;
+  }
+}
+
+/**
+ * 获取默认打印机名称
+ */
+function getDefaultPrinter() {
+  const LODOP = getLodop(null, null, true);
+  if (!LODOP) return '';
+  
+  try {
+    return LODOP.GET_DEFAULT_PRINTER_NAME();
+  } catch (err) {
+    console.error('获取默认打印机出错:', err);
+    return '';
+  }
+}
+
+/**
+ * 获取打印机列表
+ */
+function getPrinterList() {
+  const LODOP = getLodop(null, null, true);
+  if (!LODOP) return [];
+  
+  try {
+    return LODOP.GET_PRINTER_LIST();
+  } catch (err) {
+    console.error('获取打印机列表出错:', err);
+    return [];
+  }
+}
+
+export {
+    getLodop,
+    checkPrinterService,
+    getDefaultPrinter,
+    getPrinterList
+};
 

src/views/activity/couponInfo/index.vue

@@ -15,12 +15,12 @@
                     <el-select v-model="queryParams.status" placeholder="请选择活动状态" clearable style="width: 180px">
                         <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
                     </el-select>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-            </el-form>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
         </el-card>
 
         <!-- 操作按钮区 -->
@@ -33,9 +33,9 @@
 
         <!-- 列表区域 -->
         <el-card shadow="never">
-            <Page uri="/mapi/activity/couponInfo/list" :request-params="queryParams" ref="pagination">
+        <Page uri="/mapi/activity/couponInfo/list" :request-params="queryParams" ref="pagination">
                 <el-table-column label="活动信息" min-width="250" align="left">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <div class="activity-card">
                             <div class="activity-main">
                                 <image-preview :src="scope.row.imgUrl" :width="80" :height="80" class="activity-img" />
@@ -47,43 +47,43 @@
                                 </div>
                             </div>
                         </div>
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <!-- 重要信息列 -->
                 <el-table-column label="活动价格" align="center" width="100">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <el-tag size="medium" type="danger">¥{{ scope.row.price }}</el-tag>
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <el-table-column label="活动时间" align="center" min-width="150">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         {{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }} 至 {{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <el-table-column label="优惠券数量" align="center" width="120">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <el-tag size="medium" type="primary">{{ scope.row.couponNum }}张</el-tag>
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <el-table-column label="使用范围" align="center" min-width="150">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <div class="tag-group">
                             <el-tag size="mini" effect="plain"  type="primary">{{ getUserScopeLabel(scope.row.userScope) }}</el-tag>
                             <el-tag size="mini" effect="plain" type="success">{{ getStoreScopeLabel(scope.row.storeScope) }}</el-tag>
                             <el-tag size="mini" effect="plain" type="warning">限购 {{ scope.row.maxBuyNum }} 张</el-tag>
                         </div>
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <el-table-column label="活动状态" align="center" width="100">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <div class="status-column">
                             <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
                         </div>
-                    </template>
-                </el-table-column>
+                </template>
+            </el-table-column>
                 <el-table-column label="创建时间" align="center" prop="createTime" width="150" />
                 <el-table-column label="操作" align="center" min-width="120" fixed="right">
-                    <template slot-scope="scope">
+                <template slot-scope="scope">
                         <el-dropdown trigger="click" @command="handleCommand($event, scope.row)">
                             <el-button type="primary" size="mini"> 操作<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
                             <el-dropdown-menu slot="dropdown">
@@ -92,9 +92,9 @@
                                 <el-dropdown-item command="delete" icon="el-icon-delete" class="dropdown-danger">删除活动</el-dropdown-item>
                             </el-dropdown-menu>
                         </el-dropdown>
-                    </template>
-                </el-table-column>
-            </Page>
+                </template>
+            </el-table-column>
+        </Page>
         </el-card>
 
         <!-- 编辑弹窗 -->
@@ -106,67 +106,67 @@
                             <el-col :span="14">
                                 <el-form-item label="活动标题" prop="title">
                                     <el-input v-model="form.title" placeholder="请输入活动标题" maxlength="200" show-word-limit />
-                                </el-form-item>
+                        </el-form-item>
                                 <el-form-item label="活动描述" prop="description">
                                     <el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入活动描述" maxlength="500" show-word-limit />
-                                </el-form-item>
+                        </el-form-item>
                                 <el-form-item label="活动时间" prop="duringDate" required>
                                     <el-date-picker v-model="form.duringDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 100%"> </el-date-picker>
-                                </el-form-item>
+                        </el-form-item>
                                 <el-row :gutter="20">
                                     <el-col :span="12">
                                         <el-form-item label="活动价格" prop="price">
                                             <el-input-number v-model="form.price" :precision="2" :step="0.1" :min="0" controls-position="right" style="width: 100%">
                                                 <template slot="prefix">¥</template>
                                             </el-input-number>
-                                        </el-form-item>
-                                    </el-col>
+                        </el-form-item>
+                    </el-col>
                                     <el-col :span="12">
                                         <el-form-item label="购买限制" prop="maxBuyNum">
                                             <el-input-number v-model="form.maxBuyNum" :min="1" :precision="0" controls-position="right" style="width: 100%">
                                                 <template slot="suffix">张</template>
                                             </el-input-number>
-                                        </el-form-item>
-                                    </el-col>
+                        </el-form-item>
+                    </el-col>
                                 </el-row>
-                            </el-col>
+                    </el-col>
                             <el-col :span="10">
                                 <el-form-item label="宣传图片" prop="imgUrl">
                                     <image-upload v-model="form.imgUrl" :limit="1" :is-show-tip="true" :file-size="5" accept=".jpg,.jpeg,.png" tip-text="建议尺寸：800x400px，大小不超过5MB" />
-                                </el-form-item>
-                            </el-col>
+                        </el-form-item>
+                    </el-col>
                         </el-row>
                     </el-tab-pane>
 
                     <el-tab-pane label="使用规则" name="rules">
                         <el-row :gutter="20">
                             <el-col :span="12">
-                                <el-form-item label="适用用户" prop="userScope">
+                        <el-form-item label="适用用户" prop="userScope">
                                     <el-radio-group v-model="form.userScope" class="radio-group-block">
                                         <el-radio-button v-for="dict in dict.type.activity_user_scope" :key="dict.value" :label="dict.value">
                                             {{ dict.label }}
                                         </el-radio-button>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
                             <el-col :span="12">
                                 <el-form-item label="使用范围" prop="storeScope">
                                     <el-radio-group v-model="form.storeScope" class="radio-group-block">
                                         <el-radio-button v-for="dict in dict.type.coupon_use_range" :key="dict.value" :label="parseInt(dict.value)">
                                             {{ dict.label }}
                                         </el-radio-button>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
                             <el-col :span="24">
                                 <el-form-item label="活动状态" prop="status">
                                     <el-radio-group v-model="form.status">
                                         <el-radio-button v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">
                                             {{ dict.label }}
                                         </el-radio-button>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
                         </el-row>
 
                         <el-form-item label="适用门店" prop="selectStoreIds" v-if="form.storeScope === 1">
@@ -180,7 +180,7 @@
                         </el-form-item>
                     </el-tab-pane>
                 </el-tabs>
-            </el-form>
+                </el-form>
             <div slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
                 <el-button @click="cancel">取 消</el-button>
@@ -360,25 +360,25 @@ export default {
                 }
 
                 // 重置表单数据
-                this.form = {
-                    id: null,
-                    duringDate: [],
-                    activityType: '1',
-                    status: '0',
-                    canMultiUse: 'N',
-                    maxUseCount: 1,
-                    isShowAppBuyPage: null,
-                    isShowWxBuyPage: null,
-                    isShowWxBuyPageFromQrcode: null,
-                    storeScope: null,
-                    couponFrom: null,
-                    maxBuyNum: null,
-                    createById: null,
-                    createBy: null,
-                    createTime: null,
-                    updateById: null,
-                    updateBy: null,
-                    updateTime: null,
+            this.form = {
+                id: null,
+                duringDate: [],
+                activityType: '1',
+                status: '0',
+                canMultiUse: 'N',
+                maxUseCount: 1,
+                isShowAppBuyPage: null,
+                isShowWxBuyPage: null,
+                isShowWxBuyPageFromQrcode: null,
+                storeScope: null,
+                couponFrom: null,
+                maxBuyNum: null,
+                createById: null,
+                createBy: null,
+                createTime: null,
+                updateById: null,
+                updateBy: null,
+                updateTime: null,
                     remark: null,
                     selectStoreIds: [],
                     content: '',
@@ -421,16 +421,16 @@ export default {
 
             getInfo()
                 .then((response) => {
-                    var duringDate = []
-                    response.data.duringDate = duringDate
-                    response.data.status = '0'
+                var duringDate = []
+                response.data.duringDate = duringDate
+                response.data.status = '0'
                     this.form = { ...this.form, ...response.data }
-                    this.open = true
+                this.open = true
                     this.title = '新增送券活动'
                 })
                 .catch((error) => {
                     this.$modal.msgError('获取数据失败：' + (error.message || '未知错误'))
-                })
+            })
         },
         /** 修改按钮操作 */
         handleUpdate(row) {
@@ -444,14 +444,14 @@ export default {
             const id = row.id || this.ids
             getInfo(id)
                 .then((response) => {
-                    var duringDate = []
-                    duringDate.push(response.data.startDate)
-                    duringDate.push(response.data.endDate)
-                    response.data.duringDate = duringDate
+                var duringDate = []
+                duringDate.push(response.data.startDate)
+                duringDate.push(response.data.endDate)
+                response.data.duringDate = duringDate
                     this.form = { ...this.form, ...response.data }
-                    this.open = true
-                    this.title = '修改送券活动'
-                })
+                this.open = true
+                this.title = '修改送券活动'
+            })
                 .catch((error) => {
                     this.$modal.msgError('获取数据失败：' + (error.message || '未知错误'))
                 })
@@ -465,13 +465,13 @@ export default {
                     this.loading = true
                     this.processing = true
 
-                    if (null != this.form.duringDate && this.form.duringDate.length > 0) {
-                        this.form['startDate'] = this.form.duringDate[0]
-                        this.form['endDate'] = this.form.duringDate[1]
-                    } else {
-                        delete this.form.startDate
-                        delete this.form.endDate
-                    }
+            if (null != this.form.duringDate && this.form.duringDate.length > 0) {
+                this.form['startDate'] = this.form.duringDate[0]
+                this.form['endDate'] = this.form.duringDate[1]
+            } else {
+                delete this.form.startDate
+                delete this.form.endDate
+            }
 
                     const submitRequest = this.form.id != null ? updateCouponInfo(this.form) : addCouponInfo(this.form)
 
@@ -479,8 +479,8 @@ export default {
                         .then((response) => {
                             this.$modal.msgSuccess(this.form.id != null ? '修改成功' : '新增成功')
                             this.$nextTick(() => {
-                                this.open = false
-                                this.getList()
+                            this.open = false
+                            this.getList()
                             })
                         })
                         .catch((error) => {

src/views/index.vue

@@ -82,7 +82,7 @@
       </el-col>
       <el-col :xs="24" :sm="24" :lg="12">
         <div class="chart-wrapper">
-          <div class="chart-title">工厂产能状态</div>
+          <div class="chart-title">订单状态</div>
           <div class="chart-content">
             <factory-status />
           </div>

src/views/login.vue

@@ -4,7 +4,7 @@
       <!-- 左侧信息区 -->
       <div class="login-left">
         <div class="left-content">
-          <h2>Zparty管理平台</h2>
+          <h2>管理平台</h2>
           <p>Professional Laundry Management System</p>
           <div class="feature-list">
             <div class="feature-item">

src/views/order/cloth/collectCloth.vue

@@ -1,193 +1,223 @@
 <template>
-    <div class="app-container" style="height: calc(100vh - 84px)">
-        <el-main style="height: calc(100vh - 180px - 84px)">
-            <el-row :gutter="20">
-                <el-col :span="6" :xs="24">
-                    <el-card class="box-card">
-                        <div slot="header" class="clearfix">
-                            <span>选择客户</span>
+    <div class="app-container collect-cloth-wrapper">
+        <!-- 左侧用户信息栏 -->
+        <div class="left-panel">
+            <el-card class="user-card">
+                <div slot="header" class="clearfix">
+                    <span>选择客户</span>
+                </div>
+                
+                <!-- 搜索区域 -->
+                <el-form :model="queryParams" ref="queryForm" @submit.native.prevent>
+                    <div class="search-box">
+                        <el-input
+                            v-model="queryParams.phoneNumber"
+                            placeholder="请输入手机号"
+                            clearable
+                            @keyup.enter.native="searchUser">
+                            <el-button slot="append" icon="el-icon-search" @click="searchUser">查询</el-button>
+                        </el-input>
+                        <el-button type="primary" icon="el-icon-full-screen" @click="qrcodeSearchUser">扫码</el-button>
+                    </div>
+                </el-form>
+
+                <!-- 用户信息展示 -->
+                <el-descriptions 
+                    v-if="appUserInfo" 
+                    class="user-info"
+                    :column="1" 
+                    border>
+                    <el-descriptions-item label="用户名">
+                        {{ appUserInfo.realName }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="手机号">
+                        {{ appUserInfo.phoneNumber }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="等级">
+                        {{ appUserInfo.level }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="现金余额">
+                        <span class="amount">{{ (appUserInfo.rechargeBalance * 100) / 100 }}</span>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="赠送余额">
+                        <span class="amount">{{ (appUserInfo.giveBalance * 100) / 100 }}</span>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="福利金">
+                        <span class="amount">{{ (appUserInfo.welfareBalance * 100) / 100 }}</span>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="地址">
+                        {{ appUserInfo.defaultAddress ? appUserInfo.defaultAddress.address + ' ' + appUserInfo.defaultAddress.addressDetail : '' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="预约订单">
+                        <div class="appointment-info">
+                            <template v-if="orderForm.orderNo">
+                                <a class="link-text">{{ orderForm.orderNo }}</a>
+                                <a class="link-text delete" @click="clearAppointment">删除</a>
+                            </template>
+                            <a v-else class="link-text" @click="showAdvanceOrder = true">选择预约订单</a>
                         </div>
-                        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px" @submit.native.prevent>
-                            <el-form-item prop="phoneNumber">
-                                <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable @keyup.enter.native="searchUser" />
-                            </el-form-item>
-                            <!--            <el-form-item label="姓名" prop="realName">-->
-                            <!--              <el-input-->
-                            <!--                v-model="queryParams.realName"-->
-                            <!--                placeholder="请输入姓名"-->
-                            <!--                clearable-->
-                            <!--                @keyup.enter.native="handleQuery"-->
-                            <!--              />-->
-                            <!--            </el-form-item>-->
-                            <el-form-item>
-                                <el-button type="primary" icon="el-icon-full-screen" @click="qrcodeSearchUser">扫码</el-button>
-                                <el-button type="primary" icon="el-icon-search" @click="searchUser">查询</el-button>
-                            </el-form-item>
-                        </el-form>
-
-                        <el-descriptions title="用户信息" v-if="appUserInfo" :column="2">
-                            <el-descriptions-item label="用户名">{{ appUserInfo.realName }}</el-descriptions-item>
-                            <el-descriptions-item label="手机号">{{ appUserInfo.phoneNumber }}</el-descriptions-item>
-                            <el-descriptions-item label="等级">{{ appUserInfo.level }}</el-descriptions-item>
-                            <el-descriptions-item label="现金余额">
-                                {{ (appUserInfo.rechargeBalance * 100) / 100 }}
-                            </el-descriptions-item>
-                            <el-descriptions-item label="赠送余额">
-                                {{ (appUserInfo.giveBalance * 100) / 100 }}
-                            </el-descriptions-item>
-                            <el-descriptions-item label="福利金">
-                                {{ (appUserInfo.welfareBalance * 100) / 100 }}
-                            </el-descriptions-item>
-                            <el-descriptions-item label="地址" :span="2">{{ appUserInfo.defaultAddress ? appUserInfo.defaultAddress.address + ' ' + appUserInfo.defaultAddress.addressDetail : '' }}</el-descriptions-item>
-                            <el-descriptions-item label="预约订单">
-                                <a style="color: #409eff;" @click="showAdvanceOrder = true" v-if="orderForm.orderNo">{{ orderForm.orderNo }}</a>
-                                <a style="color: #409eff;"  @click="showAdvanceOrder = true" v-if="!orderForm.orderNo">选择预约订单</a>
-                                <a style="color: #409eff; margin-left: 10px;" @click="clearAppointment" v-if="orderForm.orderNo">删除</a>
-                            </el-descriptions-item>
-                        </el-descriptions>
-                    </el-card>
-                </el-col>
-                <el-col :span="18" :xs="24">
-                    <div style="width: 100%" class="verticle-view">
-                        <el-form :inline="true" label-width="68px">
-                            <el-form-item>
-                                <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">添加衣物</el-button>
-                            </el-form-item>
-                        </el-form>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-card>
+        </div>
+
+        <!-- 右侧衣物操作区 -->
+        <div class="right-panel">
+            <div class="cloth-container">
+                <!-- 操作栏 -->
+                <div class="operation-bar">
+                    <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd">添加衣物</el-button>
+                </div>
 
-                        <el-table :data="orderClothItemDTOS" fit highlight-current-row border stripe ref="clothTable">
-                            <el-table-column label="序号" type="index" align="center" fixed="left" width="80"> </el-table-column>
-                            <el-table-column label="衣物名称" align="center" prop="name">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="updateClothItem(scope.$index, 0)">{{ calculateClothName(scope.$index) }}</el-button>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="颜色" align="center" width="120">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="updateClothItem(scope.$index, 2)">
-                                        <template v-for="(color, index) in scope.row.orderClothColorDTOS">
-                                            {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
-                                        </template>
+                <!-- 衣物列表 -->
+                <div class="cloth-list">
+                    <el-table 
+                        :data="orderClothItemDTOS"
+                        border
+                        stripe
+                        highlight-current-row>
+                        <el-table-column label="序号" type="index" width="60" align="center" fixed="left"/>
+                        <el-table-column label="衣物名称" min-width="180">
+                            <template slot-scope="scope">
+                                <el-button type="text" @click="updateClothItem(scope.$index, 0)">
+                                    {{ calculateClothName(scope.$index) }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="颜色" width="120">
+                            <template slot-scope="scope">
+                                <el-button type="text" @click="updateClothItem(scope.$index, 2)">
+                                    {{ scope.row.orderClothColorDTOS.map(c => c.clothColorName).join(',') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="衣服品牌" width="120">
+                            <template slot-scope="scope">
+                                <el-button type="text" @click="updateClothItem(scope.$index, 3)">
+                                    {{ scope.row.clothBrandName }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="瑕疵" min-width="120">
+                            <template slot-scope="scope">
+                                <el-button type="text" @click="updateClothItem(scope.$index, 4)">
+                                    {{ scope.row.orderClothFlawDTOS.map(f => f.clothFlawName).join(',') }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="洗涤方式" width="100">
+                            <template slot-scope="scope">
+                                <el-button type="text" @click="changeClothWashMode(scope.$index)">
+                                    {{ scope.row.clothWashModeName }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="特殊处理" width="120">
+                            <template slot-scope="scope">
+                                <el-button 
+                                    type="text" 
+                                    class="price-text"
+                                    @click="changeClothSpecialPriceEvent(scope.$index)">
+                                    ¥{{ calculateClothSpecialPrice(scope.$index) }}
+                                </el-button>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="单价" width="100">
+                            <template slot-scope="scope">
+                                <template v-if="scope.row.isChangePrice == 'Y'">
+                                    <el-button 
+                                        type="text" 
+                                        class="price-text"
+                                        @click="changeClothDefaultPriceEvent(scope.$index)">
+                                        ¥{{ scope.row.defaultPrice }}
                                     </el-button>
                                 </template>
-                            </el-table-column>
-                            <el-table-column label="衣服品牌" align="center" prop="name" width="120">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="updateClothItem(scope.$index, 3)">{{ scope.row.clothBrandName }}</el-button>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="瑕疵" align="center">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="updateClothItem(scope.$index, 4)">
-                                        <template v-for="(color, index) in scope.row.orderClothFlawDTOS">
-                                            {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
-                                        </template>
+                                <span v-else class="price-text">¥{{ scope.row.defaultPrice }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="操作" width="280" fixed="right">
+                            <template slot-scope="scope">
+                                <div class="operation-buttons">
+                                    <el-button type="text" @click="handleAddClothFlaw(scope.$index)">
+                                        附件({{ scope.row.orderClothAdjunctDTOS.length }})
+                                    </el-button>
+                                    <el-button type="text" icon="el-icon-camera" @click="handphotograph(scope.$index)">
+                                        拍照({{ scope.row.picNum }})
                                     </el-button>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="洗涤方式" align="center" width="80">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="changeClothWashMode(scope.$index)" style="color: #409eff">{{ scope.row.clothWashModeName }}</el-button>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="特殊处理（元）" align="center" prop="clothWashDayNum" width="120">
-                                <template slot-scope="scope">
-                                    <el-button type="text" style="color: #ff4949" @click="changeClothSpecialPriceEvent(scope.$index)">￥{{ calculateClothSpecialPrice(scope.$index) }}</el-button>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="单价（元）" align="center" prop="defaultPrice" width="100">
-                                <template slot-scope="scope">
-                                    <!-- style="color: #ff4949" -->
-                                    <el-button type="text" v-if="scope.row.isChangePrice == 'Y'" @click="changeClothDefaultPriceEvent(scope.$index)">￥{{ scope.row.defaultPrice }}</el-button>
-                                    <span v-else>￥{{ scope.row.defaultPrice }}</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
-                                <template slot-scope="scope">
-                                    <el-button type="text" @click="handleAddClothFlaw(scope.$index)">附件（{{ scope.row.orderClothAdjunctDTOS.length }}）</el-button>
-                                    <!-- <el-button
-
-                    type="text"
-                    @click="handleAddClothPics(scope.$index)"
-                  >
-                    {{'拍照（' + scope.row.picNum + '）'}}
-                  </el-button> -->
-                                    <el-button type="text" icon="el-icon-camera" @click="handphotograph(scope.$index)">{{ '拍照（' + scope.row.picNum + '）' }}</el-button>
-                                    <el-button type="text" style="color: #ff4949" @click="orderClothItemDTOS.splice(scope.$index, 1)">删除</el-button>
                                     <el-button type="text" @click="handleRemarkClothItem(scope.$index)">备注</el-button>
                                     <el-button type="text" @click="handleCopyClothItem(scope.$index)">复制</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </div>
-                </el-col>
-            </el-row>
-        </el-main>
-        <el-row :gutter="10" class="box-shadow">
-            <el-col :span="21">
-                <el-form label-width="100px" style="height: 180px; padding-top: 20px" :inline="true" size="medium" :model="orderForm" ref="orderForm">
-                    <el-form-item label="总件数:" prop="totalClothNum">
-                        <span>{{ orderClothItemDTOS.length }}</span>
-                    </el-form-item>
-                    <el-form-item label="总金额:" prop="totalPrice">
-                        <span>{{ calculateTotalPrice() }}</span>
-                    </el-form-item>
-                    <el-form-item label="实收金额:" prop="totalPrice">
-                        <span style="color: #ff4949">{{ calculateTotalPrice() }}</span>
-                    </el-form-item>
-
-                    <el-form-item label="订单加急" prop="orderSpeed">
-                        <el-select v-model="orderForm.speed" placeholder="请选择" clearable>
-                            <template v-for="(item, index) in clothSpeeds">
-                                <el-option v-if="index > 1" :key="item.id" :label="item.name" :value="item.id"> </el-option>
+                                    <el-button type="text" class="delete-btn" @click="orderClothItemDTOS.splice(scope.$index, 1)">
+                                        删除
+                                    </el-button>
+                                </div>
                             </template>
-                        </el-select>
-                    </el-form-item>
-
-                     <!-- <el-form-item label="是否关联预约" prop="isAppointment">
-                        <el-radio-group v-model="orderForm.isAppointment">
-                            <el-radio-button v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
-                        </el-radio-group>
-                    </el-form-item>
-                     <el-form-item label="预约单号" prop="orderNo" v-if="orderForm.isAppointment == 'Y'">
-                        <el-input v-model="orderForm.orderNo" placeholder="请输入预约单号" clearable required />
-                    </el-form-item>  -->
-                    <br />
-
-                    <el-form-item label="会员余额:" prop="userAmount">
-                        <span v-if="appUserInfo">{{ Math.round((appUserInfo.rechargeBalance + appUserInfo.giveBalance) * 100) / 100 }}</span>
-                        <span v-else>0</span>
-                    </el-form-item>
-
-                    <!-- <el-form-item label="取衣时间" prop="takeClothTime">
-            <el-date-picker
-              v-model="orderForm.takeClothTime"
-              format="yyyy-MM-dd HH:mm"
-              value-format="yyyy-MM-dd HH:mm"
-              :style="{width: '100%'}"
-              placeholder="请选择取衣时间"
-              clearable
-            ></el-date-picker>
-          </el-form-item> -->
-
-                    <!-- <el-form-item v-if="orderForm.isAppointment == 'Y'" label="取衣方式" prop="sendClothWay">
-                        <el-select v-model="orderForm.sendClothWay" placeholder="请选择" clearable>
-                            <el-option v-for="dict in dict.type.cloth_send_type" :key="dict.value" :label="dict.label" :value="dict.value" />
-                        </el-select>
-                    </el-form-item> -->
-
-                    <el-form-item label="备注" prop="remark">
-                        <el-input v-model="orderForm.remark" placeholder="请输入订单备注" clearable />
-                    </el-form-item>
-                </el-form>
-            </el-col>
-            <el-col :span="3">
-                <el-button type="danger" style="height: 100%; width: 80%; height: 120px; margin-top: 30px" icon="el-icon-shopping-cart-2" size="medium" @click="handleConfirmPay">收银</el-button>
-            </el-col>
-            <!--            <el-col :span="3">-->
-            <!--                <el-button type="primary" style="height: 100%; width: 80%; height: 120px; margin-top: 30px" icon="el-icon-sell">取衣付款</el-button>-->
-            <!--            </el-col>-->
-        </el-row>
+                        </el-table-column>
+                    </el-table>
+                </div>
+
+                <!-- 底部结算区 -->
+                <div class="settlement-bar">
+                    <div class="order-info">
+                        <div class="info-group">
+                            <div class="info-item">
+                                <span class="label">总件数:</span>
+                                <span class="value">{{ orderClothItemDTOS.length }}</span>
+                            </div>
+                            <div class="info-item">
+                                <span class="label">总金额:</span>
+                                <span class="value">¥{{ calculateTotalPrice() }}</span>
+                            </div>
+                            <div class="info-item highlight">
+                                <span class="label">实收金额:</span>
+                                <span class="value">¥{{ calculateTotalPrice() }}</span>
+                            </div>
+                        </div>
+
+                        <div class="order-settings">
+                            <el-form :model="orderForm" :inline="true" size="small">
+                                <el-form-item label="订单加急">
+                                    <el-select v-model="orderForm.speed" placeholder="请选择" clearable>
+                                        <el-option
+                                            v-for="item in clothSpeeds"
+                                            v-if="item.id > 1"
+                                            :key="item.id"
+                                            :label="item.name"
+                                            :value="item.id">
+                                        </el-option>
+                                    </el-select>
+                                </el-form-item>
+
+                                <el-form-item 
+                                    v-if="orderForm.isAppointment == 'Y'"
+                                    label="取衣方式">
+                                    <el-select v-model="orderForm.sendClothWay" placeholder="请选择" clearable>
+                                        <el-option
+                                            v-for="dict in dict.type.cloth_send_type"
+                                            :key="dict.value"
+                                            :label="dict.label"
+                                            :value="dict.value"/>
+                                    </el-select>
+                                </el-form-item>
+
+                                <el-form-item label="备注">
+                                    <el-input v-model="orderForm.remark" placeholder="请输入订单备注" clearable/>
+                                </el-form-item>
+                            </el-form>
+                        </div>
+                    </div>
+
+                    <div class="action-area">
+                        <el-button 
+                            type="danger"
+                            class="checkout-btn"
+                            icon="el-icon-shopping-cart-2"
+                            @click="handleConfirmPay">
+                            收银
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+        </div>
 
         <!-- 添加或修改洗衣订单衣服明细对话框 -->
         <el-dialog :title="title" :visible.sync="open" size="50%" append-to-body>
@@ -236,7 +266,7 @@
                         </el-tag>
                     </div>
                 </el-col>
-                <el-col :span="24" v-if="addClothActiveTab == 2">
+                <el-col :span="24" v-if="addClothActiveTab == 2" >
                     <div style="margin-left: 55px; margin-bottom: 10px">
                         <el-input v-model="defaultList.color" placeholder="请输入要搜索的衣服颜色" style="width: 300px" clearable>
                             <el-button slot="append" icon="el-icon-search" @click="searchCloth('color', 'clothColors')"></el-button>
@@ -516,11 +546,6 @@
     </div>
 </template>
 
-<style>
-/*.box-shadow .el-button--medium{*/
-/*  font-size: 18px;*/
-/*}*/
-</style>
 
 <script>
 import CashCloth from './component/cashCloth'
@@ -1450,9 +1475,9 @@ export default {
 
                 return
             }
-            // if (this.orderForm.isAppointment == 'Y' && !this.isEmpty(this.orderForm.orderNo) && !this.orderForm.sendClothWay) {
-            //   this.$message.error('请先选取衣方式')
-            //   return
+            // if (!this.orderForm.sendClothWay) {
+            //     this.$message.error('请先选取衣方式')
+            //     return
             // }
 
             if (this.orderForm.isAppointment == 'Y') {
@@ -1685,7 +1710,147 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
+.collect-cloth-wrapper {
+    height: 100vh;
+    display: flex;
+    background: #f5f7fa;
+    padding: 16px;
+    gap: 16px;
+
+    .left-panel {
+        width: 360px;
+        flex-shrink: 0;
+
+        .user-card {
+            height: 100%;
+
+            .search-box {
+                display: flex;
+                gap: 8px;
+                margin-bottom: 16px;
+
+                .el-input {
+                    flex: 1;
+                }
+            }
+
+            .user-info {
+                .amount {
+                    color: #f56c6c;
+                    font-weight: 500;
+                }
+
+                .appointment-info {
+                    .link-text {
+                        color: #409eff;
+                        cursor: pointer;
+                        margin-right: 8px;
+
+                        &.delete {
+                            color: #f56c6c;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .right-panel {
+        flex: 1;
+        min-width: 0;
+
+        .cloth-container {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            background: #fff;
+            border-radius: 4px;
+
+            .operation-bar {
+                padding: 16px;
+                border-bottom: 1px solid #ebeef5;
+            }
+
+            .cloth-list {
+                flex: 1;
+                overflow: auto;
+                padding: 0 16px;
+
+                .price-text {
+                    color: #f56c6c;
+                }
+
+                .operation-buttons {
+                    display: flex;
+                    gap: 8px;
+                    justify-content: center;
+
+                    .delete-btn {
+                        color: #f56c6c;
+                    }
+                }
+            }
+
+            .settlement-bar {
+                border-top: 1px solid #ebeef5;
+                padding: 16px;
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-end;
+                background: #fff;
+
+                .order-info {
+                    flex: 1;
+
+                    .info-group {
+                        display: flex;
+                        gap: 24px;
+                        margin-bottom: 16px;
+
+                        .info-item {
+                            display: flex;
+                            align-items: center;
+                            gap: 8px;
+
+                            .label {
+                                color: #606266;
+                            }
+
+                            .value {
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+
+                            &.highlight .value {
+                                color: #f56c6c;
+                                font-size: 20px;
+                            }
+                        }
+                    }
+
+                    .order-settings {
+                        .el-form {
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 16px;
+                        }
+                    }
+                }
+
+                .action-area {
+                    .checkout-btn {
+                        width: 120px;
+                        height: 48px;
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 保留原有的照片上传相关样式
 .photo_content {
     display: flex;
     .video_content {
@@ -1738,8 +1903,6 @@ export default {
                     left: 0;
                     bottom: 0;
                     width: 100%;
-                    // height: 25px;
-                    // line-height: 25px;
                     background-color: rgba(255, 255, 255, 0.3);
                     text-align: center;
                     color: #fff;
@@ -1753,4 +1916,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/views/order/cloth/component/cashCloth.vue

@@ -1,443 +1,289 @@
 <template>
-    <div v-loading="dialogLoading" :element-loading-text="loadingText">
-        <el-form :model="orderForm" :inline="true" ref="confirmPayForm">
-            <el-card>
-                <el-descriptions title="核对信息" border :column="3" :label-style="{ width: '120px' }">
-                    <el-descriptions-item label="总件数">{{ orderClothItemDTOS.length }}</el-descriptions-item>
-                    <el-descriptions-item label="总价格（元）">{{ calculateTotalPrice() + calculateDeliveryPrice() }}</el-descriptions-item>
-                    <el-descriptions-item label="卡余额（元）" v-if="appUserInfo">{{ Math.round((appUserInfo.rechargeBalance + appUserInfo.giveBalance) * 100) / 100 }}</el-descriptions-item>
-                    <el-descriptions-item label="卡余额（元）" v-else>0</el-descriptions-item>
-                    <el-descriptions-item label="衣服价格（元）">{{ calculateTotalPrice() }}</el-descriptions-item>
-                    <el-descriptions-item label="优惠金额（元）">{{ calculateTotalDiscountAmount() }}</el-descriptions-item>
-                    <el-descriptions-item label="现金余额（元）">{{ appUserInfo ? appUserInfo.rechargeBalance : '0' }}</el-descriptions-item>
-                    <el-descriptions-item label="配送费（元）">
-                        {{ calculateDeliveryPrice() }}
-                    </el-descriptions-item>
-                    <el-descriptions-item label="还需支付（元）">{{ Math.round((calculateTotalPrice() + calculateDeliveryPrice() - calculateTotalDiscountAmount()) * 100) / 100 }}</el-descriptions-item>
-                    <el-descriptions-item label="赠送余额">{{ appUserInfo ? appUserInfo.giveBalance : '0' }}</el-descriptions-item>
-                </el-descriptions>
-                <div style="margin-top: 20px"  v-if="orderForm.isAppointment === 'Y'">
-                    <el-button type="primary" @click="submitForm(3)" style="margin-right: 10px" >确认定价</el-button>
-                </div>
-            </el-card>
+    <div class="cash-cloth-container">
+        <div v-loading="dialogLoading" :element-loading-text="loadingText">
+            <el-form 
+                ref="payForm" 
+                :model="orderForm" 
+                :rules="rules"
+                label-width="100px"
+            >
+                <div class="cash-container">
+                    <!-- 左侧核对信息区域 -->
+                    <div class="info-section">
+                        <el-card class="info-card">
+                            <div class="card-header">
+                                <span class="title">订单信息</span>
+                                <el-tag v-if="orderForm.isAppointment === 'Y'" type="success">预约订单</el-tag>
+                            </div>
 
-            <el-card style="margin-top: 10px" v-if="orderForm.isAppointment === 'N'">
-                <div slot="header" class="clearfix">
-                    <span>优惠信息</span>
-                </div>
-                <el-tabs v-model="confirmCouponTabIndex" type="card" @tab-click="onCouponTabChange">
-                    <el-tab-pane label="优惠券" name="0">
-                        <el-form-item label="优惠券" prop="fullCoupon">
-                            <el-input ref="couponRef" v-model="orderForm.fullCoupon" placeholder="请输入优惠券兑换码" clearable />
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button type="primary">核销</el-button>
-                            <el-button type="primary" @click="onSelectCoupon">列表选券</el-button>
-                        </el-form-item>
-
-                        <el-tabs v-model="confirmDeductTabIndex" type="card" @tab-click="onCouponTabChange">
-                            <el-tab-pane label="优惠券使用明细" name="0">
-                                <el-table :data="selectCoupons">
-                                    <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />
-                                    <el-table-column label="优惠券类型" align="center" prop="discountWay">
-                                        <template slot-scope="scope">
-                                            <span v-if="scope.row.discountWay == '0'">抵扣券</span>
-                                            <span v-if="scope.row.discountWay == '1'">满减券</span>
-                                            <span v-if="scope.row.discountWay == '2'">折扣券</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="优惠内容" align="center">
-                                        <template slot-scope="scope">
-                                            <span v-if="scope.row.discountWay == '0'">抵扣{{ scope.row.deductAmount }}元</span>
-                                            <span v-if="scope.row.discountWay == '1'">满{{ parseInt(scope.row.minAmount) }}件减{{ scope.row.deductAmount }}件</span>
-                                            <span v-if="scope.row.discountWay == '2'">优惠{{ getDiscountStr(scope.row.discountRate) }}，最多折扣{{ scope.row.deductAmount }}元</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="是否单件" align="center" prop="isUnique">
-                                        <template slot-scope="scope">
-                                            <span v-if="scope.row.discountWay == '2'">
-                                                <span v-if="scope.row.isUnique == 'Y'">单件</span>
-                                                <span v-if="scope.row.isUnique == 'N'">非单件</span>
-                                            </span>
-                                            <span v-else>--</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="优惠衣服" align="center" prop="selectClothInfo" :width="350">
-                                        <template slot-scope="scope">
-                                            <template v-for="(item, index) in scope.row.orderCouponClothDTOS">
-                                                <br v-if="index != 0" />
-                                                <span>{{ '#' + (item.clothIndex + 1) + ' ' + item.clothName + '  优惠' + item.deductAmount + '元' }}</span>
-                                            </template>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
-                                        <template slot-scope="scope">
-                                            <el-button type="text" @click="changeCouponDiscountCloth(scope.$index)" v-if="scope.$index == selectCoupons.length - 1 && scope.row.discountWay == '2' && scope.row.isUnique == 'Y'">修改优惠衣服</el-button>
-                                            <el-button type="text" style="color: #ff4949" @click="removeSelectCoupon(scope.$index)" v-if="scope.$index == selectCoupons.length - 1">删除</el-button>
-                                        </template>
-                                    </el-table-column>
-                                </el-table>
-                            </el-tab-pane>
-                            <el-tab-pane label="衣服抵扣明细" name="1">
-                                <el-table :data="orderClothItemDTOS">
-                                    <el-table-column label="序号" type="index" align="center" fixed="left" width="80"> </el-table-column>
-                                    <el-table-column label="衣物名称" align="center" prop="name" width="250">
-                                        <template slot-scope="scope">
-                                            <span>{{ calculateClothName(scope.$index) }}</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="颜色" align="center" width="120">
-                                        <template slot-scope="scope">
-                                            <span>
-                                                <template v-for="(color, index) in scope.row.orderClothColorDTOS">
-                                                    {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
+                            <!-- 订单基本信息 -->
+                            <div class="order-info">
+                                <div class="info-item">
+                                    <span class="label">衣物件数:</span>
+                                    <span class="value highlight">{{ orderClothItemDTOS.length }}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="label">衣物总价:</span>
+                                    <span class="value price">¥{{ calculateTotalPrice() }}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="label">配送费用:</span>
+                                    <span class="value">¥{{ calculateDeliveryPrice() }}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="label">优惠金额:</span>
+                                    <span class="value discount">-¥{{ calculateTotalDiscountAmount() }}</span>
+                                </div>
+                                <div class="info-item total">
+                                    <span class="label">应付金额:</span>
+                                    <span class="value price">¥{{ calculateTotalPrice() + calculateDeliveryPrice() - calculateTotalDiscountAmount() }}</span>
+                                </div>
+                            </div>
+
+                            <!-- 客户信息 -->
+                            <div class="customer-info" v-if="appUserInfo">
+                                <div class="section-title">客户信息</div>
+                                <div class="info-item">
+                                    <span class="label">会员姓名:</span>
+                                    <span class="value">{{ appUserInfo.realName }}</span>
+                                </div>
+                                <div class="info-item">
+                                    <span class="label">可用余额:</span>
+                                    <span class="value balance">¥{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance }}</span>
+                                </div>
+                            </div>
+                        </el-card>
+
+                        <!-- 支付方式选择 -->
+                        <el-card class="payment-card" v-if="orderForm.isAppointment === 'N'">
+                            <div class="card-header">
+                                <span class="title">收款方式</span>
+                            </div>
+
+                            <div class="payment-methods">
+                                <el-radio-group v-model="orderForm.payType" size="large" @change="changePayType">
+                                    <el-radio-button label="3"> <i class="el-icon-wallet"></i> 余额 </el-radio-button>
+                                    <el-radio-button label="2"> <i class="el-icon-money"></i> 现金 </el-radio-button>
+                                    <el-radio-button label="0"> <i class="el-icon-mobile-phone"></i> 扫码 </el-radio-button>
+                                </el-radio-group>
+                            </div>
+
+                            <!-- 扫码支付输入框 -->
+                            <div class="scan-input" v-if="orderForm.payType == '0'">
+                                <el-input ref="autoFocus" v-model="orderForm.authCode" placeholder="请扫描客户付款码" prefix-icon="el-icon-camera" clearable autofocus> </el-input>
+                            </div>
+
+                            <!-- 支付按钮 -->
+                            <div class="payment-actions">
+                                <el-button type="primary" size="large" icon="el-icon-shopping-cart-2" style="width: 180px" @click="submitForm(0)"> 立即收款 </el-button>
+                                <el-button type="warning" size="large" icon="el-icon-time" style="width: 180px" @click="submitForm(1)"> 取衣付款 </el-button>
+                            </div>
+                        </el-card>
+                    </div>
+
+                    <!-- 右侧优惠信息区域 -->
+                    <div class="discount-section" v-if="orderForm.isAppointment === 'N'">
+                        <el-card class="discount-card">
+                            <el-tabs v-model="confirmCouponTabIndex" type="border-card">
+                                <!-- 优惠券 tab -->
+                                <el-tab-pane label="优惠券" name="0">
+                                    <div class="coupon-actions">
+                                        <el-button type="primary" plain @click="onSelectCoupon"> <i class="el-icon-ticket"></i> 选择优惠券 </el-button>
+                                    </div>
+                                    <!-- 已选优惠券列表 -->
+                                    <div class="selected-coupons">
+                                        <el-table :data="selectCoupons" size="small" border height="calc(100vh - 400px)" style="width: 100%">
+                                            <el-table-column label="优惠券" align="center" prop="couponTypeTitle" width="120" />
+                                            <el-table-column label="类型" align="center" width="80">
+                                                <template slot-scope="scope">
+                                                    <el-tag size="mini" :type="getTagType(scope.row.discountWay)">
+                                                        {{ getDiscountTypeLabel(scope.row.discountWay) }}
+                                                    </el-tag>
+                                                </template>
+                                            </el-table-column>
+                                            <el-table-column label="优惠内容" align="center" width="150">
+                                                <template slot-scope="scope">
+                                                    <div class="discount-content">
+                                                        <template v-if="scope.row.discountWay == '0'">
+                                                            <span class="amount">-¥{{ scope.row.deductAmount }}</span>
+                                                        </template>
+                                                        <template v-if="scope.row.discountWay == '1'">
+                                                            <div>满{{ scope.row.minAmount }}件</div>
+                                                            <div>减{{ scope.row.deductAmount }}件</div>
+                                                        </template>
+                                                        <template v-if="scope.row.discountWay == '2'">
+                                                            <div>{{ getDiscountStr(scope.row.discountRate) }}</div>
+                                                            <div>最多减{{ scope.row.deductAmount }}元</div>
+                                                        </template>
+                                                    </div>
                                                 </template>
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="衣服品牌" align="center" prop="name" width="120">
-                                        <template slot-scope="scope">
-                                            <span>{{ scope.row.clothBrandName }}</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="瑕疵" align="center">
-                                        <template slot-scope="scope">
-                                            <span>
-                                                <template v-for="(color, index) in scope.row.orderClothFlawDTOS">
-                                                    {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
+                                            </el-table-column>
+                                            <el-table-column label="优惠衣服" align="center">
+                                                <template slot-scope="scope">
+                                                    <el-popover placement="top" width="200" trigger="hover">
+                                                        <div class="cloth-list">
+                                                            <div v-for="(item, index) in scope.row.orderCouponClothDTOS" :key="index" class="cloth-item">
+                                                                <span class="index">#{{ item.clothIndex + 1 }}</span>
+                                                                <span class="name">{{ item.clothName }}</span>
+                                                                <span class="amount">-¥{{ item.deductAmount }}</span>
+                                                            </div>
+                                                        </div>
+                                                        <div slot="reference" class="cloth-summary">
+                                                            已选{{ scope.row.orderCouponClothDTOS.length }}件
+                                                            <i class="el-icon-more"></i>
+                                                        </div>
+                                                    </el-popover>
                                                 </template>
-                                            </span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="洗涤方式" align="center" width="80">
-                                        <template slot-scope="scope">
-                                            <span>{{ scope.row.clothWashModeName }}</span>
-                                        </template>
-                                    </el-table-column>
-                                    <el-table-column label="价格（元）" align="center" prop="totalPrice" width="100" />
-                                    <el-table-column label="优惠金额（元）" align="center" prop="deductAmount" width="130" />
-                                    <el-table-column label="还需支付（元）" align="center" width="130">
-                                        <template slot-scope="scope">
-                                            <span>{{ handelPrice(scope.row.totalPrice - scope.row.deductAmount) }}</span>
-                                        </template>
-                                    </el-table-column>
-                                </el-table>
-                            </el-tab-pane>
-                        </el-tabs>
-                    </el-tab-pane>
-                    <el-tab-pane label="平台折扣活动" name="1">
-                        <!-- <el-form-item label="折扣" prop="discountCouponId">
-                            <el-select v-model="orderForm.discountCouponId" placeholder="请选择" clearable @change="onDiscountCouponSelect">
-                                <template v-for="(item, i) in discountCouponVOS">
-                                    <el-option :key="i" :label="item.couponTypeTitle + '（' + item.deductAmount * 10 + '折）'" :value="item.id"> </el-option>
-                                </template>
-                            </el-select>
-                        </el-form-item> -->
-                        <el-table :data="discountCouponVOS" style="width: 100%">
-                            <el-table-column label="序号" type="index" align="center" fixed="left" width="80"> </el-table-column>
-                            <el-table-column label="活动名称" align="center" prop="title"> </el-table-column>
-                            <el-table-column label="适用衣服" align="center">
-                                <template slot-scope="scope">
-                                    <span v-if="scope.row.clothScope == 0">全部衣服 折扣{{ getDiscountStr(scope.row.discount * 100) }}</span>
-                                    <div v-if="scope.row.clothScope == 1">
-                                        <div v-for="(item, i) in scope.row.activityClothItemVOList" :key="i">#{{ i + 1 }} {{ item.clothItemName }} 折扣{{ getDiscountStr(item.discount * 100) }}</div>
+                                            </el-table-column>
+                                            <el-table-column label="操作" align="center" width="120" fixed="right">
+                                                <template slot-scope="scope">
+                                                    <el-button type="text" @click="changeCouponDiscountCloth(scope.$index)" v-if="canModifyCoupon(scope.row, scope.$index)"> 修改 </el-button>
+                                                    <el-button type="text" style="color: #ff4949" @click="removeSelectCoupon(scope.$index)" v-if="scope.$index == selectCoupons.length - 1"> 删除 </el-button>
+                                                </template>
+                                            </el-table-column>
+                                        </el-table>
                                     </div>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="适用支付方式" align="center">
-                                <template slot-scope="scope">
-                                    <span v-if="scope.row.payScope == 0">全部</span>
-                                    <span v-if="scope.row.payScope == 1">现金</span>
-                                    <span v-if="scope.row.payScope == 2">余额</span>
-                                </template>
-                            </el-table-column>
-                            <el-table-column label="可优惠金额(元)" align="center">
-                                <template slot-scope="scope">
-                                    <span>{{ calculateTotalDiscountByActivity(scope.row, scope.row.title) }}</span>
-                                </template>
-                            </el-table-column>
-                            <!-- <el-table-column label="衣服品牌" align="center" prop="name" width="120"> -->
-                            <!-- <template slot-scope="scope"> -->
-                            <!-- <span>{{ scope.row.clothBrandName }}</span> -->
-                            <!-- </template> -->
-                            <!-- </el-table-column> -->
-                            <!-- <el-table-column label="瑕疵" align="center"> -->
-                            <!-- <template slot-scope="scope"> -->
-                            <!-- <span> -->
-                            <!-- <template v-for="(color, index) in scope.row.orderClothFlawDTOS"> -->
-                            <!-- {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }} -->
-                            <!-- </template> -->
-                            <!-- </span> -->
-                            <!-- </template> -->
-                            <!-- </el-table-column> -->
-                            <!-- <el-table-column label="洗涤方式" align="center" width="80"> -->
-                            <!-- <template slot-scope="scope"> -->
-                            <!-- <span>{{ scope.row.clothWashModeName }}</span> -->
-                            <!-- </template> -->
-                            <!-- </el-table-column> -->
-                            <!-- <el-table-column label="原价（元）" align="center" prop="totalPrice" width="100" /> -->
-                            <!-- <el-table-column label="抵扣金额（元）" align="center" prop="deductAmount" width="130" /> -->
-                            <!-- <el-table-column label="折扣金额（元）" align="center" width="130">
-                                <template slot-scope="scope">
-                                    <span>{{ parseInt((scope.row.totalPrice - scope.row.deductAmount) * 100 * parseInt(100 - orderForm.discountCoupon.deductAmount * 100)) / 10000 }}</span>
-                                </template>
-                            </el-table-column> -->
-                            <el-table-column label="操作" align="center">
-                                <template slot-scope="scope">
-                                    <el-button type="text" style="color: #67c23a" @click="onSelectActivityItem({})" v-if="activity.id === scope.row.id">不使用</el-button>
-                                    <el-button type="text" @click="onSelectActivityItem(scope.row)" v-else>使用</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </el-tab-pane>
-                    <el-tab-pane label="现金券" name="2">
-                        <el-form-item label="现金券" prop="cashDeductAmount">
-                            <el-input-number
-                                style="text-align: left"
-                                v-model="orderForm.cashDeductAmount"
-                                placeholder="请输入现金券金额"
-                                :precision="2"
-                                clearable
-                                :controls="false"
-                                :max="(parseInt(calculateTotalPrice() * 100) + parseInt(calculateDeliveryPrice() * 100) - parseInt(calculateTotalDiscountAmountWithoutCashAmount() * 100)) / 100"
-                            />
-                        </el-form-item>
-                        <el-form-item label="是否特殊" prop="isSpecial">
-                            <el-checkbox v-model="orderForm.isSpecial"></el-checkbox>
-                        </el-form-item>
-                    </el-tab-pane>
-                </el-tabs>
-            </el-card>
-
-            <el-card style="margin-top: 10px" v-if="orderForm.isAppointment === 'N'">
-                <div slot="header" class="clearfix">
-                    <span>收款方式</span>
-                    <template v-if="calculateTotalDiscountAmountByCoupon()">
-                        <span style="margin-left: 10px">优惠券优惠</span>
-                        <span style="color: #ff4949">{{ calculateTotalDiscountAmountByCoupon() }}</span>
-                        <span>元</span>
-                    </template>
-
-                    <template v-if="calculateTotalDiscountByActivity(activity)">
-                        <span style="margin-left: 10px">平台折扣活动优惠</span>
-                        <span style="color: #ff4949">{{ calculateTotalDiscountByActivity(activity) }}</span>
-                        <span>元</span>
-                    </template>
-
-                    <template v-if="orderForm.cashDeductAmount">
-                        <span style="margin-left: 10px">现金券优惠</span>
-                        <span style="color: #ff4949">{{ orderForm.cashDeductAmount }}</span>
-                        <span>元</span>
-                    </template>
-
-                    <span style="margin-left: 10px">还需支付</span>
-                    <span style="color: #ff4949">{{ (parseInt(calculateTotalPrice() * 100) + parseInt(calculateDeliveryPrice() * 100) - parseInt(calculateTotalDiscountAmount() * 100)) / 100 }}</span>
-                    <span>元</span>
-                </div>
-                <el-form-item label="支付方式" prop="payType">
-                    <el-radio-group v-model="orderForm.payType" @change="changePayType">
-                        <el-radio-button label="3" name="3">余额</el-radio-button>
-                        <el-radio-button label="2" name="2">现金</el-radio-button>
-                        <el-radio-button label="0" name="0">微信/支付宝</el-radio-button>
-                        <!--                        <el-radio-button label="1" name="1">支付宝</el-radio-button>-->
-                    </el-radio-group>
-                </el-form-item>
-                <br />
-
-                <el-form-item label="付款码" prop="authCode" v-if="orderForm.payType == '0' || orderForm.payType == '1'">
-                    <el-input ref="autoFocus" v-model="orderForm.authCode" clearable placeholder="请选择付款码" />
-                </el-form-item>
-
-                <el-descriptions border :column="3" :labelStyle="{ width: '140px' }" v-if="orderForm.payType == '3'">
-                    <el-descriptions-item label="用户" v-if="appUserInfo">{{ appUserInfo.realName }}</el-descriptions-item>
-                    <el-descriptions-item label="当前余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance }}</el-descriptions-item>
-                    <el-descriptions-item label="支付后余额（元）" v-if="appUserInfo">{{ appUserInfo.rechargeBalance + appUserInfo.giveBalance - calculateTotalPrice() }}</el-descriptions-item>
-                </el-descriptions>
-
-                <div style="margin-top: 20px">
-                    <el-button type="primary" @click="submitForm(0)" style="margin-right: 10px">立即支付</el-button>
-                    <el-button type="primary" @click="submitForm(1)" style="margin-right: 5%">取衣支付</el-button>
+                                        </el-tab-pane>
+                                </el-tabs>
+                        </el-card>
+                    </div>
                 </div>
-            </el-card>
-        </el-form>
-
-        <el-dialog title="选择优惠券" :visible.sync="setCouponOpen" append-to-body width="55%">
-            <!--      :before-close="handleClose"-->
-
-            <el-table :data="deductCouponVOS" style="width: 100%">
-                <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />
-                <el-table-column label="优惠券类型" align="center" prop="discountType">
-                    <template slot-scope="scope">
-                        <span v-if="scope.row.discountWay == '0'">抵扣券</span>
-                        <span v-if="scope.row.discountWay == '1'">满减券</span>
-                        <span v-if="scope.row.discountWay == '2'">折扣券</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="优惠内容" align="center">
-                    <template slot-scope="scope">
-                        <span v-if="scope.row.discountWay == '0'">抵扣{{ scope.row.deductAmount }}元</span>
-                        <span v-if="scope.row.discountWay == '1'">满{{ parseInt(scope.row.minAmount) }}件减{{ scope.row.deductAmount }}件</span>
-                        <span v-if="scope.row.discountWay == '2'">优惠{{ getDiscountStr(scope.row.discountRate) }}，最多折扣{{ scope.row.deductAmount }}元</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="是否单件" align="center" prop="isUnique">
-                    <template slot-scope="scope">
-                        <span v-if="scope.row.discountWay == '2'">
-                            <span v-if="scope.row.isUnique == 'Y'">单件</span>
-                            <span v-if="scope.row.isUnique == 'N'">非单件</span>
-                        </span>
-                        <span v-else>--</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="适用衣服" align="center">
-                    <template slot-scope="scope">
-                        <template v-for="(item, index) in scope.row.appCouponTypeApplyClothVOS" v-key="index">
-                            <span>{{ index > 0 ? '、' : '' }}{{ item.clothItemName }}</span>
+            </el-form>
+        </div>
+
+        <!-- 弹窗区域 -->
+        <div class="dialog-container">
+            <!-- 选择优惠券弹窗 -->
+            <el-dialog title="选择优惠券" :visible.sync="setCouponOpen" append-to-body width="55%" :close-on-click-modal="false">
+                <el-table :data="deductCouponVOS" style="width: 100%">
+                    <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />
+                    <el-table-column label="优惠券类型" align="center" prop="discountType">
+                        <template slot-scope="scope">
+                            <span v-if="scope.row.discountWay == '0'">抵扣券</span>
+                            <span v-if="scope.row.discountWay == '1'">满减券</span>
+                            <span v-if="scope.row.discountWay == '2'">折扣券</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="优惠内容" align="center">
+                        <template slot-scope="scope">
+                            <span v-if="scope.row.discountWay == '0'">抵扣{{ scope.row.deductAmount }}元</span>
+                            <span v-if="scope.row.discountWay == '1'">满{{ parseInt(scope.row.minAmount) }}件减{{ scope.row.deductAmount }}件</span>
+                            <span v-if="scope.row.discountWay == '2'">优惠{{ getDiscountStr(scope.row.discountRate) }}，最多折扣{{ scope.row.deductAmount }}元</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="是否单件" align="center" prop="isUnique">
+                        <template slot-scope="scope">
+                            <span v-if="scope.row.discountWay == '2'">
+                                <span v-if="scope.row.isUnique == 'Y'">单件</span>
+                                <span v-if="scope.row.isUnique == 'N'">非单件</span>
+                            </span>
+                            <span v-else>--</span>
                         </template>
-                        <span v-if="!scope.row.appCouponTypeApplyClothVOS">全部衣服</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                        <el-button type="text" @click="onSelectCouponItem(scope.$index)">选择</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-dialog>
-
-        <el-dialog :title="changeDiscountCouponTitle" :visible.sync="changeDiscountCouponOpen" width="70%" append-to-body>
-            <!-- <span v-if="changeDiscountCouponOpen"> 共可抵扣{{ selectCoupons[changeDiscountCouponIndex].deductAmount }}元，已抵扣{{ calculateCouponDiscountInfo() }}元，剩余可抵扣{{ selectCoupons[changeDiscountCouponIndex].deductAmount - calculateCouponDiscountInfo() }}元 </span>
-            <br /> -->
-            <span>可选择衣物</span>
-            <br />
-            <el-table :data="changeDiscountCouponCanSelectCloths">
-                <el-table-column label="序号" align="center" fixed="left" width="80">
-                    <template slot-scope="scope">
-                        <span>#{{ scope.row.index + 1 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="衣物名称" align="center" prop="name" width="250">
-                    <template slot-scope="scope">
-                        <span>{{ calculateClothNameByInfo(scope.row) }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="颜色" align="center" width="120">
-                    <template slot-scope="scope">
-                        <span>
-                            <template v-for="(color, index) in scope.row.orderClothColorDTOS">
-                                {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
+                    </el-table-column>
+                    <el-table-column label="适用衣服" align="center">
+                        <template slot-scope="scope">
+                            <template v-for="(item, index) in scope.row.appCouponTypeApplyClothVOS" v-key="index">
+                                <span>{{ index > 0 ? '、' : '' }}{{ item.clothItemName }}</span>
+                            </template>
+                            <span v-if="!scope.row.appCouponTypeApplyClothVOS">全部衣服</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" align="center">
+                        <template slot-scope="scope">
+                            <el-button type="text" @click="onSelectCouponItem(scope.$index)">选择</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-dialog>
+
+            <!-- 修改优惠券弹窗 -->
+            <el-dialog :title="changeDiscountCouponTitle" :visible.sync="changeDiscountCouponOpen" width="70%" append-to-body :close-on-click-modal="false">
+                <div class="discount-cloth-dialog">
+                    <div class="dialog-header">可选择衣物</div>
+                    <el-table :data="changeDiscountCouponCanSelectCloths">
+                        <el-table-column label="序号" align="center" fixed="left" width="80">
+                            <template slot-scope="scope">
+                                <span>#{{ scope.row.index + 1 }}</span>
                             </template>
-                        </span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="衣服品牌" align="center" prop="name" width="120">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.clothBrandName }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="瑕疵" align="center">
-                    <template slot-scope="scope">
-                        <span>
-                            <template v-for="(color, index) in scope.row.orderClothFlawDTOS">
-                                {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
+                        </el-table-column>
+                        <el-table-column label="衣物名称" align="center" prop="name" width="250">
+                            <template slot-scope="scope">
+                                <span>{{ calculateClothNameByInfo(scope.row) }}</span>
                             </template>
-                        </span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="洗涤方式" align="center" width="80">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.clothWashModeName }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="价格（元）" align="center" prop="totalPrice" width="100" />
-                <el-table-column label="待优惠金额（元）" align="center" prop="deductAmount" width="130" />
-                <el-table-column label="还需支付（元）" align="center" width="130">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.totalPrice - scope.row.deductAmount }}</span>
-                    </template>
-                </el-table-column>
-
-                <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                        <el-button type="text" style="color: #67c23a" v-if="scope.row.isSelected">已选择</el-button>
-                        <el-button type="text" style="color: #ff4949" @click="addCouponRelateCloth(scope.$index)" v-else>选择</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <br />
-            <!-- <span>已选择衣物</span> -->
-            <!-- <br /> -->
-            <!-- <el-table :data="changeDiscountCouponSelectCloths" style="width: 100%">
-                <el-table-column label="序号" align="center" width="80">
-                    <template slot-scope="scope">
-                        <span>#{{ scope.row.clothIndex + 1 }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="衣服名称" align="center" prop="clothName" width="250" />
-                <el-table-column label="颜色" align="center" width="120">
-                    <template slot-scope="scope">
-                        <span>
-                            <template v-for="(color, index) in scope.row.cloth.orderClothColorDTOS">
-                                {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
+                        </el-table-column>
+                        <el-table-column label="颜色" align="center" width="120">
+                            <template slot-scope="scope">
+                                <span>
+                                    <template v-for="(color, index) in scope.row.orderClothColorDTOS">
+                                        {{ index == 0 ? color.clothColorName : ',' + color.clothColorName }}
+                                    </template>
+                                </span>
                             </template>
-                        </span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="衣服品牌" align="center" prop="name" width="120">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.cloth.clothBrandName }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="瑕疵" align="center">
-                    <template slot-scope="scope">
-                        <span>
-                            <template v-for="(color, index) in scope.row.cloth.orderClothFlawDTOS">
-                                {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
+                        </el-table-column>
+                        <el-table-column label="衣服品牌" align="center" prop="name" width="120">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.clothBrandName }}</span>
                             </template>
-                        </span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="洗涤方式" align="center" width="80">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.cloth.clothWashModeName }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="原价（元）" align="center" prop="totalPrice" width="100">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.cloth.totalPrice }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="已优惠金额（元）" align="center" prop="deductAmount" width="130">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.cloth.deductAmount }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="还需支付（元）" align="center" width="130">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.cloth.totalPrice - scope.row.cloth.deductAmount }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="本次优惠金额（元）" align="center" prop="deductAmount" width="180"> </el-table-column>
-                <el-table-column label="操作" align="center" fixed="right">
-                    <template slot-scope="scope">
-                        <el-button type="text" style="color: #ff4949" @click="removeCouponRelateCloth(scope.$index)">删除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table> -->
-
-            <span slot="footer" class="dialog-footer">
-                <el-button @click="changeDiscountCouponOpen = false">取 消</el-button>
-                <el-button type="primary" @click="submitChangeCouponRelateCloth">确 定</el-button>
-            </span>
-        </el-dialog>
+                        </el-table-column>
+                        <el-table-column label="瑕疵" align="center">
+                            <template slot-scope="scope">
+                                <span>
+                                    <template v-for="(color, index) in scope.row.orderClothFlawDTOS">
+                                        {{ index == 0 ? color.clothFlawName : ',' + color.clothFlawName }}
+                                    </template>
+                                </span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="洗涤方式" align="center" width="80">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.clothWashModeName }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column label="价格（元）" align="center" prop="totalPrice" width="100" />
+                        <el-table-column label="待优惠金额（元）" align="center" prop="deductAmount" width="130" />
+                        <el-table-column label="还需支付（元）" align="center" width="130">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.totalPrice - scope.row.deductAmount }}</span>
+                            </template>
+                        </el-table-column>
+
+                        <el-table-column label="操作" align="center">
+                            <template slot-scope="scope">
+                                <el-button type="text" style="color: #67c23a" v-if="scope.row.isSelected">已选择</el-button>
+                                <el-button type="text" style="color: #ff4949" @click="addCouponRelateCloth(scope.$index)" v-else>选择</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <div class="dialog-footer">
+                        <el-button @click="changeDiscountCouponOpen = false">取 消</el-button>
+                        <el-button type="primary" @click="submitChangeCouponRelateCloth">确 定</el-button>
+                    </div>
+                </div>
+            </el-dialog>
+        </div>
+
+        <!-- 修改支付状态弹窗的位置和样式 -->
+        <div class="payment-status-container">
+            <pay-status-popup 
+                ref="payStatusPopup"
+                :hide-pointer="false"
+                :hide-user="false"
+                @pay-success="handlePaySuccess"
+                @confirm="handleConfirm"
+            />
+        </div>
     </div>
 </template>
 
 <script>
+import PayStatusPopup from '@/components/payStatusPopup'
 import { collectCloth } from '../../../../api/order/cloth'
 
 export default {
     name: 'cashCloth',
+    components: {
+        PayStatusPopup
+    },
     props: {
         appUserInfo: {
             type: Object
@@ -477,7 +323,35 @@ export default {
             changeDiscountCouponTitle: '',
             changeDiscountCouponSelectCloths: [],
             changeDiscountCouponCanSelectCloths: [],
-            activity: {}
+            activity: {},
+            rules: {
+                payType: [
+                    { required: true, message: '请选择支付方式', trigger: 'change' }
+                ],
+                authCode: [
+                    { required: true, message: '请输入付款码', trigger: 'blur',
+                        validator: (rule, value, callback) => {
+                            if (this.orderForm.payType === '0' && !value) {
+                                callback(new Error('请输入付款码'));
+                            } else {
+                                callback();
+                            }
+                        }
+                    }
+                ],
+                cashDeductAmount: [
+                    { 
+                        validator: (rule, value, callback) => {
+                            if (value && value > this.calculateTotalPrice()) {
+                                callback(new Error('抵扣金额不能大于订单金额'));
+                            } else {
+                                callback();
+                            }
+                        },
+                        trigger: 'change'
+                    }
+                ]
+            }
         }
     },
     mounted() {
@@ -487,7 +361,7 @@ export default {
     },
     methods: {
         getDiscountStr(e) {
-            return Math.round(e / 10 * 100) / 100 + '折'
+            return Math.round((e / 10) * 100) / 100 + '折'
         },
         changePayType() {
             if (this.orderForm.payType == 0) {
@@ -547,7 +421,7 @@ export default {
                 totalDiscountAmount = totalDiscountAmount + cloth.deductAmount
             })
             if (this.activity.id) {
-                totalDiscountAmount = totalDiscountAmount + this.calculateTotalDiscountByActivity(this.activity)
+                totalDiscountAmount = totalDiscountAmount + this.calculateTotalDiscountByActivity(this.activity, 'A1')
             }
             return Math.round(totalDiscountAmount * 100) / 100
         },
@@ -579,11 +453,11 @@ export default {
                 for (let i = 0; i < e.activityClothItemVOList.length; i++) {
                     let cloth = e.activityClothItemVOList[i]
                     for (let j = 0; j < this.orderClothItemDTOS.length; j++) {
-                       let goods = this.orderClothItemDTOS[j]
-                       console.log(goods.id, Number(cloth.clothId))
-                       if (goods.id === cloth.clothId) {
-                        activityAmount += goods.totalPrice * (1 - cloth.discount)
-                       }
+                        let goods = this.orderClothItemDTOS[j]
+                        console.log(goods.id, Number(cloth.clothId))
+                        if (goods.id === cloth.clothId) {
+                            activityAmount += goods.totalPrice * (1 - cloth.discount)
+                        }
                     }
                 }
                 // let total = this.calculateTotalPrice() + this.calculateDeliveryPrice() - this.calculateTotalDiscountAmountByCoupon()
@@ -631,12 +505,6 @@ export default {
         },
         // 选择可优惠金额
         changeCouponDiscountCloth(index) {
-            // this.changeDiscountCouponSelectCloths = this.selectCoupons[index].orderCouponClothDTOS.concat()
-            // for (let i = 0; i < this.changeDiscountCouponSelectCloths.length; i++) {
-            //     var item = this.changeDiscountCouponSelectCloths[i]
-            //     item.cloth = JSON.parse(JSON.stringify(this.orderClothItemDTOS[item.clothIndex]))
-            // }
-            // this.changeDiscountCouponIndex = index
             this.changeDiscountCouponCanSelectCloths = this.selectCoupons[index].applyCloths.concat()
             this.changeDiscountCouponCanSelectCloths.forEach((item) => {
                 let deductAmount1 = this.handelPrice(item.totalPrice * (1 - this.selectCoupons[index].discountRate / 100))
@@ -644,28 +512,6 @@ export default {
                 item.deductAmount = deductAmount
                 item.isSelected = item.id == this.selectCoupons[index].orderCouponClothDTOS[0].id
             })
-            // this.orderClothItemDTOS.forEach((item) => {
-            //     //如果这件衣服已经被被抵扣完成，则不需要选择
-            //     if (item.totalPrice - item.deductAmount <= 0) {
-            //         return
-            //     }
-            //     //添加优惠券支持的衣服
-            //     console.log('A4')
-            //     if (this.selectCoupons[index].appCouponTypeApplyClothVOS) {
-            //         if (!this.selectCoupons[index].appCouponTypeApplyClothVOS.find((i) => i.clothItemId == item.id)) {
-            //             return
-            //         }
-            //     }
-
-            //     //如果这个优惠券已经被选择过，则跳过
-            //     console.log('A5')
-            //     if (this.selectCoupons[index].orderCouponClothDTOS) {
-            //         if (this.selectCoupons[index].orderCouponClothDTOS.find((i) => i.clothIndex == item.index)) {
-            //             return
-            //         }
-            //     }
-            //     this.changeDiscountCouponCanSelectCloths.push(item)
-            // })
             this.changeDiscountCouponTitle = '修改『' + this.selectCoupons[index].couponTypeTitle + '』可抵扣衣物'
             this.changeDiscountCouponOpen = true
         },
@@ -795,39 +641,39 @@ export default {
                 }
             }
             if (coupon.discountWay == '0') {
-                        //抵扣
-                        if (coupon.isUnique == 'Y') {
-                            //单件，只减一件
-                            var cloth = applyCloths[0]
-                            //抵扣所有衣服里金额最大的
-                            if (cloth.totalPrice - cloth.deductAmount >= coupon.deductAmount) {
-                                coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: coupon.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
-                                cloth.deductAmount += coupon.deductAmount
-                            } else {
-                                coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
-                                cloth.deductAmount = cloth.totalPrice
-                            }
-                        } else {
-                            //非单件，可减多件
-                var deductAmount = coupon.deductAmount
-                for (let i = 0; i < coupon.applyCloths.length; i++) {
-                    //如果优惠券可抵扣金额用完
-                    if (deductAmount <= 0) {
-                        break
-                    }
-                    var cloth = coupon.applyCloths[i]
-                    if (cloth.totalPrice - cloth.deductAmount >= deductAmount) {
-                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
-                        cloth.deductAmount += deductAmount
-                        deductAmount = 0
+                //抵扣
+                if (coupon.isUnique == 'Y') {
+                    //单件，只减一件
+                    var cloth = applyCloths[0]
+                    //抵扣所有衣服里金额最大的
+                    if (cloth.totalPrice - cloth.deductAmount >= coupon.deductAmount) {
+                        coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: coupon.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
+                        cloth.deductAmount += coupon.deductAmount
                     } else {
                         coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
                         cloth.deductAmount = cloth.totalPrice
-                        deductAmount -= cloth.totalPrice - cloth.deductAmount
+                    }
+                } else {
+                    //非单件，可减多件
+                    var deductAmount = coupon.deductAmount
+                    for (let i = 0; i < coupon.applyCloths.length; i++) {
+                        //如果优惠券可抵扣金额用完
+                        if (deductAmount <= 0) {
+                            break
+                        }
+                        var cloth = coupon.applyCloths[i]
+                        if (cloth.totalPrice - cloth.deductAmount >= deductAmount) {
+                            coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
+                            cloth.deductAmount += deductAmount
+                            deductAmount = 0
+                        } else {
+                            coupon.orderCouponClothDTOS.push({ clothIndex: cloth.index, id: cloth.id, deductAmount: cloth.totalPrice - cloth.deductAmount, clothName: this.calculateClothNameByInfo(cloth) })
+                            cloth.deductAmount = cloth.totalPrice
+                            deductAmount -= cloth.totalPrice - cloth.deductAmount
+                        }
                     }
                 }
             }
-            }
             // else
             if (coupon.discountWay == '1') {
                 //满减
@@ -881,55 +727,67 @@ export default {
             })
         },
         /** 提交按钮 */
-        async submitForm(payTimeType) {
-            this.$refs['confirmPayForm'].validate((valid) => {
+        submitForm(payTimeType) {
+            if (!this.$refs.payForm) {
+                this.$message.error('表单实例不存在');
+                return;
+            }
+
+            this.$refs.payForm.validate(valid => {
                 if (valid) {
-                    var params = { ...this.orderForm }
-                    params.appUserId = this.appUserInfo.id
-                    params.orderClothItemDTOS = this.orderClothItemDTOS.concat()
-                    params.orderClothItemDTOS.forEach((item) => {
-                        item.clothItemName = item.name
-                    })
-                    var orderCouponDTOS = this.selectCoupons.concat()
-                    if (this.orderForm.discountCouponId) {
-                        var coupon = this.discountCouponVOS.find((item) => (item.id = this.orderForm.discountCouponId))
-                        var orderCouponClothDTOS = []
-                        this.getDiscountClothList().forEach((item) => {
-                            var orderCouponClothDTO = { id: item.id, clothIndex: item.index, deductAmount: parseInt((item.totalPrice - item.deductAmount) * 100 * parseInt(100 - coupon.deductAmount * 100)) / 10000 }
-                            orderCouponClothDTOS.push(orderCouponClothDTO)
-                        })
-                        orderCouponDTOS.push({ id: coupon.id, ...{ orderCouponClothDTOS: orderCouponClothDTOS } })
+                    const params = { ...this.orderForm };
+                    params.appUserId = this.appUserInfo?.id;
+                    params.orderClothItemDTOS = this.orderClothItemDTOS.concat();
+                    params.orderClothItemDTOS.forEach(item => {
+                        item.clothItemName = item.name;
+                    });
+                    
+                    params.orderCouponDTOS = this.selectCoupons.concat();
+                    params.isSpecial = params.isSpecial ? 'Y' : 'N';
+                    params.payTimeType = payTimeType;
+                    
+                    if (payTimeType === 1) {
+                        params.payType = 0;
                     }
-                    params.orderCouponDTOS = orderCouponDTOS
-                    params.isSpecial = params.isSpecial ? 'Y' : 'N'
-                    params.payTimeType = payTimeType
-                    if (payTimeType == 1) {
-                        params.payType = 0
+                    
+                    if (this.calculateTotalDiscountByActivity(this.activity, 'A3')) {
+                        params.activityId = this.activity.id;
+                        params.activityDiscountAmount = this.calculateTotalDiscountByActivity(this.activity, 'A4');
                     }
-                    if (this.calculateTotalDiscountByActivity(this.activity)) {
-                        params.activityId = this.activity.id
-                        params.activityDiscountAmount = this.calculateTotalDiscountByActivity(this.activity)
-                    }
-                  params.sendClothWay = this.orderForm.sendClothWay
-                    console.log(params)
+                    
+                    params.sendClothWay = this.orderForm.sendClothWay;
+
+                    // 修改 loading 配置，只覆盖表单区域
                     const loading = this.$loading({
+                        target: '.cash-container', // 指定 loading 覆盖的目标元素
                         lock: true,
-                        text: 'Loading',
+                        text: '正在处理支付...',
                         spinner: 'el-icon-loading',
                         background: 'rgba(0, 0, 0, 0.7)'
-                    })
+                    });
+
                     collectCloth(params)
-                        .then((res) => {
-                            this.$message('提交成功')
-                            loading.close()
-                            this.$emit('onPaySuccess', { ...res.data, authCode: this.orderForm.authCode })
-                        })
-                        .catch((e) => {
-                            loading.close()
-                            this.$message.error(e.data.msg)
+                        .then(res => {
+                            loading.close();
+                            // 直接打开支付状态弹窗，不需要延时
+                            if (this.orderForm.payType === '0') {
+                                this.$refs.payStatusPopup.open(3, res.data, this.appUserInfo);
+                            } else if (this.orderForm.payType === '2') {
+                                this.$refs.payStatusPopup.open(1, res.data);
+                            } else if (this.orderForm.payType === '3') {
+                                if (this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance >= params.payAmount) {
+                                    this.$refs.payStatusPopup.open(1, res.data);
+                                } else {
+                                    this.$refs.payStatusPopup.open(4, { payMsg: '余额不足' });
+                                }
+                            }
                         })
+                        .catch(e => {
+                            loading.close();
+                            this.$refs.payStatusPopup.open(4, { payMsg: e.data.msg || '支付失败' });
+                        });
                 }
-            })
+            });
         },
         removeCouponRelateCloth(index) {
             var cloth = this.changeDiscountCouponSelectCloths[index].cloth
@@ -1017,9 +875,266 @@ export default {
                 })
                 .then(() => {})
                 .catch(() => {})
+        },
+        getTagType(discountWay) {
+            switch (discountWay) {
+                case '0':
+                    return 'success'
+                case '1':
+                    return 'warning'
+                case '2':
+                    return 'info'
+                default:
+                    return ''
+            }
+        },
+        getDiscountTypeLabel(discountWay) {
+            switch (discountWay) {
+                case '0':
+                    return '抵扣券'
+                case '1':
+                    return '满减券'
+                case '2':
+                    return '折扣券'
+                default:
+                    return ''
+            }
+        },
+        canModifyCoupon(coupon, index) {
+            return index === this.selectCoupons.length - 1 && coupon.discountWay === '2' && coupon.isUnique === 'Y'
+        },
+        // 处理支付成功
+        handlePaySuccess() {
+            // 通知父组件支付成功，但不关闭收银台
+            this.$emit('onPaySuccess', {
+                keepDialogOpen: true
+            });
+        },
+        // 处理确认
+        handleConfirm(orderInfo) {
+            // 处理确认事件
+            this.$emit('confirm', orderInfo);
         }
     }
 }
 </script>
 
-<style scoped></style>
+<style>
+
+
+</style>
+
+<style lang="scss" scoped>
+.cash-cloth-container {
+    height: 100%;
+    .dialog-container {
+        .discount-cloth-dialog {
+            .dialog-header {
+                font-size: 16px;
+                font-weight: bold;
+                margin-bottom: 15px;
+            }
+        }
+    }
+
+    .cash-container {
+        display: flex;
+        gap: 20px;
+        height: 100%;
+        padding: 20px;
+
+        .info-section {
+            width: 320px; /* 减小左侧宽度 */
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .discount-section {
+            flex: 1;
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+
+            .title {
+                font-size: 18px;
+                font-weight: bold;
+            }
+        }
+
+        .info-item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 15px;
+
+            .label {
+                color: #606266;
+            }
+
+            .value {
+                font-weight: bold;
+
+                &.price {
+                    color: #f56c6c;
+                    font-size: 20px;
+                }
+
+                &.discount {
+                    color: #67c23a;
+                }
+
+                &.balance {
+                    color: #409eff;
+                }
+            }
+        }
+
+        .total {
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px dashed #dcdfe6;
+
+            .label {
+                font-size: 16px;
+            }
+        }
+
+        .payment-methods {
+            margin: 20px 0;
+            text-align: center;
+        }
+
+        .payment-actions {
+            margin-top: 30px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .scan-input {
+            margin: 20px 0;
+        }
+
+        .coupon-actions {
+            margin-bottom: 20px;
+            text-align: right;
+        }
+    }
+
+    .selected-coupons {
+        .discount-content {
+            font-size: 13px;
+            .amount {
+                color: #f56c6c;
+                font-weight: bold;
+            }
+        }
+
+        .cloth-list {
+            max-height: 300px;
+            overflow-y: auto;
+
+            .cloth-item {
+                display: flex;
+                align-items: center;
+                padding: 5px 0;
+                border-bottom: 1px solid #ebeef5;
+
+                .index {
+                    width: 40px;
+                    color: #909399;
+                }
+
+                .name {
+                    flex: 1;
+                    margin: 0 10px;
+                }
+
+                .amount {
+                    color: #f56c6c;
+                }
+            }
+        }
+
+        .cloth-summary {
+            cursor: pointer;
+            color: #409eff;
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+
+    .payment-status-container {
+        position: relative;
+        z-index: 3000;
+    }
+}
+</style>
+
+<style>
+.payStatusPopup {
+    .el-dialog__wrapper {
+        z-index: 3000 !important;
+    }
+    .el-dialog {
+        z-index: 3001 !important;
+    }
+    .v-modal {
+        z-index: 2999 !important;
+        background-color: rgba(0, 0, 0, 0.5) !important;
+        opacity: 1 !important;
+    }
+}
+</style>
+
+<style>
+/* 主题色定义 */
+:root {
+  --primary-color: #409EFF;
+  --success-color: #67C23A;
+  --warning-color: #E6A23C;
+  --danger-color: #F56C6C;
+  --info-color: #909399;
+}
+
+/* 表格视觉优化 */
+.el-table {
+  /* 表头样式 */
+  th {
+    background-color: #F5F7FA !important;
+    color: #606266;
+    font-weight: 600;
+    height: 48px;
+  }
+  
+  /* 斑马纹 */
+  .el-table__row--striped {
+    background-color: #FAFAFA;
+  }
+  
+  /* 悬停效果 */
+  .el-table__row:hover {
+    background-color: #F5F7FA;
+  }
+}
+
+/* 按钮样式优化 */
+.el-button {
+  &--primary {
+    font-weight: 500;
+  }
+  
+  &--text {
+    padding: 4px 8px;
+    
+    &:hover {
+      background: rgba(64,158,255,0.1);
+      border-radius: 4px;
+    }
+  }
+}
+</style>

src/views/order/cloth/components/PayStatusPopup.vue

@@ -0,0 +1,848 @@
+/**
+ * @description 支付状态弹窗组件
+ */
+<template>
+    <div class="pay-status-popup">
+        <el-dialog 
+            :visible.sync="show" 
+            width="30%" 
+            :close-on-click-modal="false" 
+            :close-on-press-escape="false" 
+            :show-close="false"
+            custom-class="pay-dialog">
+            
+            <!-- 支付成功状态 -->
+            <template v-if="status === PAY_STATUS.SUCCESS">
+                <div class="status-icon">
+                    <i class="el-icon-success success"></i>
+                </div>
+                <div class="status-message">支付成功</div>
+                
+                <!-- 打印选项 -->
+                <div class="action-buttons" v-if="!hidePointer">
+                    <el-button type="primary" @click="handlePrint(PRINT_TYPE.RECEIPT)">
+                        <i class="el-icon-printer"></i> 打印小票
+                    </el-button>
+                    <el-button type="primary" @click="handlePrint(PRINT_TYPE.BARCODE)">
+                        <i class="el-icon-document"></i> 打印条码
+                    </el-button>
+                    <el-button @click="handleClose">关闭</el-button>
+                </div>
+                <div class="action-buttons" v-else>
+                    <el-button type="primary" @click="handleConfirm">确认</el-button>
+                </div>
+            </template>
+
+            <!-- 未支付状态 -->
+            <template v-if="status === PAY_STATUS.UNPAID">
+                <div class="status-icon">
+                    <i class="el-icon-warning warning"></i>
+                </div>
+                <div class="status-message">请支付后取衣</div>
+                
+                <!-- 支付金额 -->
+                <div class="payment-info">
+                    <div class="info-label">需支付金额</div>
+                    <div class="amount">
+                        <span class="currency">￥</span>
+                        <span class="value">{{ orderInfo.payAmount }}</span>
+                    </div>
+                </div>
+
+                <!-- 支付方式选择 -->
+                <div class="payment-method">
+                    <div class="info-label">支付方式</div>
+                    <el-radio-group v-model="payType" @change="handlePayTypeChange">
+                        <el-radio-button 
+                            v-if="!hideUser" 
+                            :label="PAY_TYPE.BALANCE">
+                            余额支付
+                        </el-radio-button>
+                        <el-radio-button :label="PAY_TYPE.CASH">现金支付</el-radio-button>
+                        <el-radio-button :label="PAY_TYPE.SCAN">扫码支付</el-radio-button>
+                    </el-radio-group>
+                </div>
+
+                <!-- 余额支付信息 -->
+                <div v-if="payType === PAY_TYPE.BALANCE && !hideUser" class="balance-info">
+                    <el-descriptions 
+                        border 
+                        direction="vertical" 
+                        :column="3" 
+                        :label-style="{ width: '140px' }">
+                        <el-descriptions-item label="用户">
+                            {{ appUserInfo.realName }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="当前余额（元）">
+                            {{ calculateTotalBalance }}
+                        </el-descriptions-item>
+                        <el-descriptions-item label="支付后余额（元）">
+                            {{ calculateBalanceAfterPay }}
+                        </el-descriptions-item>
+                    </el-descriptions>
+                </div>
+
+                <!-- 扫码支付输入框 -->
+                <div v-if="payType === PAY_TYPE.SCAN" class="scan-input">
+                    <div class="info-label">付款码</div>
+                    <el-input
+                        ref="scanInput"
+                        v-model="authCode"
+                        clearable
+                        placeholder="请扫描付款码"
+                        @keyup.enter.native="handlePay">
+                        <i slot="prefix" class="el-icon-camera"></i>
+                    </el-input>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="action-buttons">
+                    <el-button 
+                        type="primary" 
+                        :loading="paying"
+                        @click="handlePay">
+                        确认支付
+                    </el-button>
+                    <el-button @click="handleClose">取消</el-button>
+                </div>
+            </template>
+
+            <!-- 支付中状态 -->
+            <template v-if="status === PAY_STATUS.PAYING || status === PAY_STATUS.WAITING">
+                <div class="status-icon">
+                    <i class="el-icon-loading"></i>
+                </div>
+                <div class="status-message">支付确认中，请等待...</div>
+                <div class="action-buttons" v-if="showPaySuccessBtn">
+                    <el-button type="primary" @click="handlePaySuccess">
+                        已确认支付
+                    </el-button>
+                </div>
+            </template>
+
+            <!-- 支付失败状态 -->
+            <template v-if="status === PAY_STATUS.FAILED">
+                <div class="status-icon">
+                    <i class="el-icon-error error"></i>
+                </div>
+                <div class="status-message error-message">{{ errorMessage }}</div>
+                
+                <!-- 重试支付方式选择 -->
+                <div v-if="!hideUser" class="payment-method">
+                    <div class="info-label">重选支付方式</div>
+                    <el-radio-group v-model="payType" @change="handlePayTypeChange">
+                        <el-radio-button :label="PAY_TYPE.BALANCE">余额支付</el-radio-button>
+                        <el-radio-button :label="PAY_TYPE.CASH">现金支付</el-radio-button>
+                        <el-radio-button :label="PAY_TYPE.SCAN">扫码支付</el-radio-button>
+                    </el-radio-group>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="action-buttons">
+                    <el-button 
+                        v-if="!hideUser"
+                        type="primary" 
+                        @click="handleRetry">
+                        重试支付
+                    </el-button>
+                    <el-button @click="handleClose">关闭</el-button>
+                </div>
+            </template>
+
+            <!-- 定价成功状态 -->
+            <template v-if="status === PAY_STATUS.PRICE_SUCCESS">
+                <div class="status-icon">
+                    <i class="el-icon-success success"></i>
+                </div>
+                <div class="status-message">定价成功</div>
+                <div class="action-buttons">
+                    <el-button type="primary" @click="handleConfirm">确认</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { getLodop } from '@/utils/lodopUtils'
+import { getClothItem, listOrderClothItem } from '@/api/order/clothItem'
+import { getMemberInfoById } from '@/api/app/user'
+import { clothOrderPay, getOrderPayResult } from '@/api/order/cloth'
+import { PAY_STATUS, PAY_TYPE, PRINT_TYPE } from '../constants/payStatus'
+
+export default {
+    name: 'PayStatusPopup',
+    
+    props: {
+        hidePointer: {
+            type: Boolean,
+            default: false
+        },
+        hideUser: {
+            type: Boolean,
+            default: false
+        }
+    },
+
+    data() {
+        return {
+            show: false,
+            status: PAY_STATUS.UNPAID,
+            orderInfo: {},
+            // 打印相关
+            printerList: [],
+            printData: null,
+            // 支付相关
+            payType: PAY_TYPE.BALANCE,
+            paying: false,
+            appUserInfo: {},
+            authCode: '',
+            // 支付结果查询
+            payResultTimer: null,
+            showPaySuccessBtn: false,
+            resultQueryCount: 0,
+            errorMessage: '',
+            // 常量
+            PAY_STATUS,
+            PAY_TYPE,
+            PRINT_TYPE
+        }
+    },
+
+    computed: {
+        // 计算总余额
+        calculateTotalBalance() {
+            if (!this.appUserInfo) return 0
+            return this.appUserInfo.rechargeBalance + this.appUserInfo.giveBalance
+        },
+
+        // 计算支付后余额
+        calculateBalanceAfterPay() {
+            return this.calculateTotalBalance - (this.orderInfo.payAmount || 0)
+        }
+    },
+
+    mounted() {
+        // 初始化打印机
+        this.initPrinter()
+    },
+
+    beforeDestroy() {
+        // 清理定时器
+        this.clearPayResultTimer()
+    },
+
+    methods: {
+        /**
+         * 初始化打印机
+         */
+        initPrinter() {
+            // 获取打印机配置
+            this.printerList = JSON.parse(this.$cache.local.get('printerSeting') || '[]')
+        },
+
+        /**
+         * 打开弹窗
+         */
+        open(status, orderInfo, userInfo = null) {
+            this.orderInfo = orderInfo
+            this.status = status
+            this.errorMessage = ''
+            this.showPaySuccessBtn = false
+            this.paying = false
+            
+            // 根据状态处理
+            switch (status) {
+                case PAY_STATUS.SUCCESS:
+                    if (orderInfo.id && !this.hidePointer) {
+                        this.fetchPrintData(orderInfo)
+                    }
+                    break
+                    
+                case PAY_STATUS.UNPAID:
+                    this.initPayment(orderInfo, userInfo)
+                    break
+                    
+                case PAY_STATUS.PAYING:
+                    this.handlePayProcess(orderInfo, userInfo)
+                    break
+                    
+                case PAY_STATUS.FAILED:
+                    this.errorMessage = orderInfo.payMsg
+                    break
+            }
+            
+            this.show = true
+        },
+
+        /**
+         * 初始化支付
+         */
+        initPayment(orderInfo, userInfo) {
+            this.authCode = ''
+            this.appUserInfo = {}
+            
+            if (this.hideUser) {
+                this.payType = PAY_TYPE.CASH
+            } else {
+                this.payType = PAY_TYPE.BALANCE
+                if (orderInfo.appUserId) {
+                    this.fetchUserInfo(orderInfo.appUserId)
+                }
+            }
+        },
+
+        /**
+         * 获取用户信息
+         */
+        async fetchUserInfo(userId) {
+            try {
+                const response = await getMemberInfoById({ appUserId: userId })
+                this.appUserInfo = response.data
+            } catch (error) {
+                this.$message.error('获取用户信息失败')
+            }
+        },
+
+        /**
+         * 获取打印数据
+         */
+        async fetchPrintData(orderInfo) {
+            try {
+                const res = await getClothItem(orderInfo.id)
+                if (res) {
+                    this.printData = res.data
+                    // 获取订单衣物列表
+                    const clothList = await listOrderClothItem({
+                        pageSize: 99999,
+                        pageNum: 1,
+                        orderNo: orderInfo.orderNo
+                    })
+                    this.printData.orderClothDetails = clothList.data.records
+                }
+            } catch (error) {
+                this.$message.error('获取打印数据失败')
+            }
+        },
+
+        /**
+         * 处理支付方式变更
+         */
+        handlePayTypeChange(value) {
+            this.payType = value
+            this.authCode = ''
+            
+            if (value === PAY_TYPE.SCAN) {
+                this.$nextTick(() => {
+                    this.$refs.scanInput?.focus()
+                })
+            }
+        },
+
+        /**
+         * 处理支付
+         */
+        async handlePay() {
+            // 验证支付条件
+            if (!this.validatePayment()) return
+            
+            this.paying = true
+            try {
+                const res = await clothOrderPay({
+                    appUserId: this.orderInfo.appUserId,
+                    payType: this.payType,
+                    authCode: this.authCode,
+                    orderNo: this.orderInfo.orderNo,
+                    payAmount: this.orderInfo.payAmount
+                })
+
+                if (res) {
+                    this.handlePayResult(res.data)
+                }
+            } catch (error) {
+                this.handlePayError(error)
+            } finally {
+                this.paying = false
+            }
+        },
+
+        /**
+         * 验证支付条件
+         */
+        validatePayment() {
+            if (this.payType === PAY_TYPE.SCAN && !this.authCode) {
+                this.$message.warning('请先扫描付款码')
+                return false
+            }
+            
+            if (this.payType === PAY_TYPE.BALANCE) {
+                if (this.calculateTotalBalance < this.orderInfo.payAmount) {
+                    this.$message.warning('余额不足')
+                    return false
+                }
+            }
+            
+            return true
+        },
+
+        /**
+         * 处理支付结果
+         */
+        handlePayResult(result) {
+            switch (result.payResult) {
+                case 100: // 需要查询结果
+                    this.status = PAY_STATUS.WAITING
+                    this.startPayResultQuery()
+                    break
+                    
+                case 101:
+                case 0: // 支付失败
+                    this.status = PAY_STATUS.FAILED
+                    this.errorMessage = result.payMsg
+                    break
+                    
+                case 200: // 支付成功
+                    this.status = PAY_STATUS.SUCCESS
+                    this.$emit('paySuccess')
+                    break
+            }
+        },
+
+        /**
+         * 处理支付错误
+         */
+        handlePayError(error) {
+            this.status = PAY_STATUS.FAILED
+            this.errorMessage = error.data?.msg || '支付失败，请重试'
+            this.authCode = ''
+        },
+
+        /**
+         * 开始查询支付结果
+         */
+        startPayResultQuery() {
+            this.resultQueryCount = 0
+            this.queryPayResult()
+        },
+
+        /**
+         * 查询支付结果
+         */
+        async queryPayResult() {
+            try {
+                const res = await getOrderPayResult({
+                    orderNo: this.orderInfo.orderNo
+                })
+
+                if (res) {
+                    this.handlePayResult(res.data)
+                    
+                    // 继续查询
+                    if (res.data.payResult === 100) {
+                        this.resultQueryCount++
+                        if (this.resultQueryCount >= 6) {
+                            this.showPaySuccessBtn = true
+                        }
+                        this.payResultTimer = setTimeout(() => {
+                            this.queryPayResult()
+                        }, 5000)
+                    }
+                }
+            } catch (error) {
+                this.handlePayError(error)
+            }
+        },
+
+        /**
+         * 清理支付结果查询定时器
+         */
+        clearPayResultTimer() {
+            if (this.payResultTimer) {
+                clearTimeout(this.payResultTimer)
+                this.payResultTimer = null
+            }
+        },
+
+        /**
+         * 处理打印
+         */
+        handlePrint(type) {
+            const LODOP = getLodop(null, null, true)
+            if (!LODOP) {
+                return // 如果获取不到打印对象，getLodop 已经显示了错误信息
+            }
+
+            const printer = this.printerList.find(p => p.printType === type)
+            if (!printer) {
+                this.$message.error('未找到对应打印机配置')
+                return
+            }
+
+            if (type === PRINT_TYPE.RECEIPT) {
+                this.printReceipt(printer.printName)
+            } else {
+                this.printBarcode(printer.printName)
+            }
+
+            this.handleClose()
+        },
+
+        /**
+         * 打印小票
+         */
+        printReceipt(printerName) {
+            if (!this.printData) {
+                this.$message.error('打印数据不完整')
+                return false
+            }
+
+            try {
+                const LODOP = getLodop(null, null, true)
+                if (!LODOP) return false
+
+                LODOP.SET_PRINT_PAGESIZE(3, 580, 40, "")
+                LODOP.SET_PRINTER_INDEX(printerName)
+                
+                // 设置打印内容
+                let printContent = this.generateReceiptContent()
+                LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", printContent)
+                
+                // 直接打印
+                if (!LODOP.PRINT()) {
+                    this.$message.error('打印失败')
+                    return false
+                }
+                
+                return true
+            } catch (err) {
+                console.error('打印小票出错:', err)
+                this.$message.error('打印过程出现错误')
+                return false
+            }
+        },
+
+        /**
+         * 生成小票内容
+         */
+        generateReceiptContent() {
+            const { printData } = this
+            if (!printData) return ''
+
+            const styles = `
+                <style>
+                    .receipt-wrapper {
+                        font-family: Arial, sans-serif;
+                        font-size: 12px;
+                        width: 100%;
+                        text-align: center;
+                    }
+                    .shop-info {
+                        margin-bottom: 10px;
+                    }
+                    .shop-name {
+                        font-size: 14px;
+                        font-weight: bold;
+                    }
+                    .divider {
+                        border-top: 1px dashed #000;
+                        margin: 5px 0;
+                    }
+                    .order-info {
+                        text-align: left;
+                        margin: 5px 0;
+                    }
+                    .cloth-item {
+                        margin: 5px 0;
+                        padding: 5px 0;
+                        border-bottom: 1px dashed #ccc;
+                    }
+                    .cloth-name {
+                        font-weight: bold;
+                    }
+                    .total-info {
+                        margin-top: 10px;
+                        text-align: right;
+                    }
+                    .qrcode {
+                        margin: 10px auto;
+                        width: 100px;
+                        height: 100px;
+                    }
+                </style>
+            `
+
+            const content = `
+                <div class="receipt-wrapper">
+                    ${styles}
+                    <div class="shop-info">
+                        <div class="shop-name">${printData.shopName || '洗衣店'}</div>
+                        <div>${printData.shopAddress || ''}</div>
+                        <div>电话：${printData.shopPhone || ''}</div>
+                    </div>
+                    
+                    <div class="divider"></div>
+                    
+                    <div class="order-info">
+                        <div>订单号：${printData.orderNo}</div>
+                        <div>下单时间：${this.$parseTime(printData.createTime)}</div>
+                        <div>客户：${printData.customerName}</div>
+                        <div>电话：${printData.customerPhone}</div>
+                    </div>
+                    
+                    <div class="divider"></div>
+                    
+                    <div class="cloth-list">
+                        ${this.generateClothListHtml()}
+                    </div>
+                    
+                    <div class="divider"></div>
+                    
+                    <div class="total-info">
+                        <div>衣物总数：${printData.orderClothDetails?.length || 0}件</div>
+                        <div>合计金额：￥${printData.totalAmount || 0}</div>
+                        <div>实付金额：￥${printData.payAmount || 0}</div>
+                    </div>
+                    
+                    <div class="divider"></div>
+                    
+                    <div>
+                        <div>预计取衣时间：${this.$parseTime(printData.expectedPickTime)}</div>
+                        <div>注意事项：</div>
+                        <div>1. 请妥善保管此小票，取衣时请出示</div>
+                        <div>2. 超过30天未取的衣物，本店不负责保管</div>
+                    </div>
+                    
+                    <div class="qrcode">
+                        <!-- 这里可以添加二维码图片 -->
+                    </div>
+                </div>
+            `
+
+            return content
+        },
+
+        /**
+         * 生成衣物列表HTML
+         */
+        generateClothListHtml() {
+            const { orderClothDetails = [] } = this.printData
+            
+            return orderClothDetails.map((item, index) => `
+                <div class="cloth-item">
+                    <div class="cloth-name">${index + 1}. ${item.clothName}</div>
+                    <div>
+                        颜色：${item.orderClothColorDTOS?.map(c => c.clothColorName).join('/')}
+                        品牌：${item.clothBrandName || '无'}
+                    </div>
+                    <div>
+                        洗涤方式：${item.clothWashModeName || '普通洗涤'}
+                        ${item.orderClothFlawDTOS?.length ? `瑕疵：${item.orderClothFlawDTOS.map(f => f.clothFlawName).join('/')}` : ''}
+                    </div>
+                    <div style="text-align: right;">
+                        单价：￥${item.defaultPrice}
+                        ${item.specialPrice ? `特殊处理费：￥${item.specialPrice}` : ''}
+                    </div>
+                </div>
+            `).join('')
+        },
+
+        /**
+         * 打印条码
+         */
+        printBarcode(printerName) {
+            if (!this.printData?.orderNo) {
+                this.$message.error('订单号不能为空')
+                return false
+            }
+
+            try {
+                const LODOP = getLodop(null, null, true)
+                if (!LODOP) return false
+
+                LODOP.SET_PRINT_PAGESIZE(1, 800, 400, "")
+                LODOP.SET_PRINTER_INDEX(printerName)
+                
+                // 设置条码打印内容
+                const barcodeContent = this.generateBarcodeContent()
+                LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", barcodeContent)
+                
+                // 直接打印
+                if (!LODOP.PRINT()) {
+                    this.$message.error('打印失败')
+                    return false
+                }
+                
+                return true
+            } catch (err) {
+                console.error('打印条码出错:', err)
+                this.$message.error('打印过程出现错误')
+                return false
+            }
+        },
+
+        /**
+         * 生成条码内容
+         */
+        generateBarcodeContent() {
+            const { printData } = this
+            if (!printData) return ''
+
+            const styles = `
+                <style>
+                    .barcode-wrapper {
+                        font-family: Arial, sans-serif;
+                        font-size: 12px;
+                        width: 100%;
+                        text-align: center;
+                    }
+                    .barcode-info {
+                        margin: 5px 0;
+                    }
+                    .order-no {
+                        font-size: 14px;
+                        font-weight: bold;
+                    }
+                </style>
+            `
+
+            const content = `
+                <div class="barcode-wrapper">
+                    ${styles}
+                    <div class="barcode-info">
+                        <div class="order-no">${printData.orderNo}</div>
+                        <div>${printData.customerName} ${printData.customerPhone}</div>
+                        <div>${this.$parseTime(printData.createTime)}</div>
+                    </div>
+                    
+                    <!-- 这里可以添加条码图片 -->
+                </div>
+            `
+
+            return content
+        },
+
+        /**
+         * 处理确认
+         */
+        handleConfirm() {
+            this.show = false
+            this.$emit('confirm', this.orderInfo)
+        },
+
+        /**
+         * 处理支付成功
+         */
+        handlePaySuccess() {
+            this.show = false
+            this.clearPayResultTimer()
+            this.$emit('paySuccess')
+        },
+
+        /**
+         * 处理重试
+         */
+        handleRetry() {
+            this.handlePay()
+        },
+
+        /**
+         * 处理关闭
+         */
+        async handleClose() {
+            let confirmMessage = ''
+            switch (this.status) {
+                case PAY_STATUS.SUCCESS:
+                    confirmMessage = '是否关闭打印操作？'
+                    break
+                case PAY_STATUS.UNPAID:
+                    confirmMessage = '是否取消支付操作？'
+                    break
+                case PAY_STATUS.PAYING:
+                case PAY_STATUS.WAITING:
+                    confirmMessage = '请确认客户已完成付款再关闭？'
+                    break
+                default:
+                    this.show = false
+                    return
+            }
+
+            try {
+                await this.$confirm(confirmMessage)
+                this.show = false
+                if (this.status === PAY_STATUS.PAYING || this.status === PAY_STATUS.WAITING) {
+                    this.clearPayResultTimer()
+                    this.$emit('paySuccess')
+                }
+            } catch (error) {
+                // 用户取消关闭
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay-dialog {
+    .status-icon {
+        font-size: 100px;
+        text-align: center;
+        margin-bottom: 20px;
+
+        .success { color: #67c23a; }
+        .warning { color: #e6a23c; }
+        .error { color: #f56c6c; }
+        .loading { color: #409EFF; }
+    }
+
+    .status-message {
+        font-size: 20px;
+        text-align: center;
+        margin-bottom: 30px;
+        color: #606266;
+
+        &.error-message {
+            color: #f56c6c;
+        }
+    }
+
+    .payment-info,
+    .payment-method,
+    .scan-input {
+        padding: 0 40px 20px;
+        
+        .info-label {
+            font-size: 14px;
+            color: #606266;
+            margin-bottom: 10px;
+        }
+    }
+
+    .amount {
+        .currency {
+            font-size: 16px;
+            color: #f56c6c;
+        }
+        
+        .value {
+            font-size: 24px;
+            font-weight: bold;
+            color: #f56c6c;
+        }
+    }
+
+    .balance-info {
+        padding: 0 30px 20px;
+    }
+
+    .action-buttons {
+        text-align: center;
+        padding: 20px;
+        border-top: 1px solid #EBEEF5;
+        
+        .el-button {
+            min-width: 120px;
+            margin: 0 10px;
+        }
+    }
+}
+</style> 

src/views/order/cloth/constants/payStatus.js

@@ -0,0 +1,28 @@
+/**
+ * 支付状态枚举
+ */
+export const PAY_STATUS = {
+  SUCCESS: 'SUCCESS',       // 支付成功
+  UNPAID: 'UNPAID',        // 未支付
+  PAYING: 'PAYING',        // 支付中
+  FAILED: 'FAILED',        // 支付失败
+  WAITING: 'WAITING',      // 等待支付结果
+  PRICE_SUCCESS: 'PRICE_SUCCESS' // 定价成功
+}
+
+/**
+ * 支付方式枚举
+ */
+export const PAY_TYPE = {
+  BALANCE: 3,  // 余额支付
+  CASH: 2,     // 现金支付
+  SCAN: 0      // 扫码支付
+}
+
+/**
+ * 打印类型枚举
+ */
+export const PRINT_TYPE = {
+  RECEIPT: 0,  // 小票
+  BARCODE: 1   // 条码
+} 

src/views/order/cloth/sendCloth.vue

@@ -1,204 +1,300 @@
 <template>
     <div class="app-container">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
-            <el-form-item prop="orderStatus">
-                <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
-                    <el-option key="6" label="清洗中" value="6" />
-                    <el-option key="7" label="已上挂" value="7" />
-                    <el-option key="8" label="待送衣" value="8" />
-                    <el-option key="9" label="送衣中" value="9" />
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="orderSource">
-                <el-select v-model="queryParams.flowStatus" placeholder="请选择订单来源" clearable>
-                    <el-option key="0" label="线上" value="0" />
-                    <el-option key="1" label="线下" value="1" />
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="orderNo">
-                <el-input v-model="queryParams.orderNo" placeholder="请输入订单条码" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-                <el-date-picker v-model="createTimeRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-            </el-form-item>
-            <el-form-item prop="appUserPhoneNumber">
-                <el-input v-model="queryParams.appUserPhoneNumber" placeholder="请输入会员手机" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item prop="userId">
-                <el-input v-model="queryParams.userId" placeholder="会员条码" clearable @keyup.enter.native="handleQuery" />
-            </el-form-item>
-
-            <el-form-item>
-                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-row :gutter="10" class="mb8">
-            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-
-        <el-table v-loading="loading" fit highlight-current-row border stripe :data="clothOrderList">
-            <el-table-column label="订单编号" align="center" prop="orderNo" min-width="200" fixed="left" />
-            <el-table-column label="数量" align="center" prop="orderClothCount" width="100" />
-            <el-table-column label="合计" align="center" prop="clothItemName" width="200">
-                <template slot-scope="scope">
-                    <span>合计：{{ scope.row.payAmount }}元</span>
-                    <br />
-                    <span v-if="scope.row.payType == '0'">支付方式：微信</span>
-                    <span v-if="scope.row.payType == '1'">支付方式：支付宝</span>
-                    <span v-if="scope.row.payType == '2'">支付方式：现金</span>
-                    <span v-if="scope.row.payType == '3'">支付方式：余额</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="客户信息" align="center" width="200">
-                <template slot-scope="scope">
-                    <span v-if="scope.row.orderSource == 'OFFLINE'">订单来源：线下</span>
-                    <span v-else>订单来源：线上</span>
-                    <br />
-                    <span>{{ scope.row.appUserName + ' ' + scope.row.appUserPhoneNumber }}</span>
-                </template>
-            </el-table-column>
-            <el-table-column label="订单时间" align="center" prop="createTime" min-width="200" />
-            <el-table-column label="预计取衣时间" align="center" prop="planSendToUserTime" min-width="200" />
-            <el-table-column label="状态" align="center" width="150">
-                <template slot-scope="scope">
-                    <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
-                </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="250">
-                <template slot-scope="scope">
-                    <template v-if="scope.row.payTimeType == '1' && scope.row.payStatus != 1">
-                        <el-button type="text" icon="el-icon-s-order" @click="toPay(scope)">立刻支付</el-button>
-                    </template>
-                    <template v-else>
-                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.row)">取衣</el-button>
-                        <el-button type="text" icon="el-icon-price-tag" v-if="scope.row.orderStatus == '8' || scope.row.orderStatus == '9'" @click="selectDeliveryMan(scope)">分配派送员</el-button>
+        <!-- 搜索区域 -->
+        <el-card class="search-card">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
+                <el-form-item label="订单状态" prop="orderStatus">
+                    <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable style="width: 160px">
+                        <el-option key="6" label="清洗中" value="6" />
+                        <el-option key="7" label="已上挂" value="7" />
+                        <el-option key="8" label="待送衣" value="8" />
+                        <el-option key="9" label="送衣中" value="9" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="订单来源" prop="flowStatus">
+                    <el-select v-model="queryParams.flowStatus" placeholder="请选择订单来源" clearable style="width: 160px">
+                        <el-option key="0" label="线上" value="0" />
+                        <el-option key="1" label="线下" value="1" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="订单条码" prop="orderNo">
+                    <el-input v-model="queryParams.orderNo" placeholder="请扫描订单条码" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item label="时间范围">
+                    <el-date-picker v-model="createTimeRange" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 240px"> </el-date-picker>
+                </el-form-item>
+                <el-form-item label="会员手机" prop="appUserPhoneNumber">
+                    <el-input v-model="queryParams.appUserPhoneNumber" placeholder="请输入会员手机" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item label="会员条码" prop="userId">
+                    <el-input v-model="queryParams.userId" placeholder="请扫描会员条码" clearable @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+            </el-form>
+        </el-card>
+
+        <!-- 数据列表 -->
+        <el-card class="table-card">
+            <div class="table-operations" slot="header">
+                <div class="left">
+                    <span class="title">取衣列表</span>
+                </div>
+                <div class="right">
+                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+                </div>
+            </div>
 
-                        <el-button type="text" icon="el-icon-price-tag" v-if="scope.row.orderStatus == '9'" @click="confirmSend(scope)">确认送达</el-button>
+            <el-table v-loading="loading" :data="clothOrderList" border stripe highlight-current-row @row-click="handleRowClick">
+                <el-table-column label="订单编号" align="center" prop="orderNo" min-width="200" fixed="left" />
+                <el-table-column label="衣物数量" align="center" prop="orderClothCount" width="100" />
+                <el-table-column label="支付信息" align="center" width="200">
+                    <template slot-scope="scope">
+                        <div class="payment-info">
+                            <span class="amount">¥{{ scope.row.payAmount }}</span>
+                            <span class="payment-type">
+                                <i :class="getPaymentIcon(scope.row.payType)"></i>
+                                {{ getPaymentText(scope.row.payType) }}
+                            </span>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="客户信息" align="center" width="220">
+                    <template slot-scope="scope">
+                        <div class="customer-info">
+                            <div class="source">
+                                <el-tag size="small" :type="scope.row.orderSource === 'OFFLINE' ? 'warning' : 'success'">
+                                    {{ scope.row.orderSource === 'OFFLINE' ? '线下' : '线上' }}
+                                </el-tag>
+                            </div>
+                            <div class="user">
+                                <span class="name">{{ scope.row.appUserName }}</span>
+                                <span class="phone">{{ scope.row.appUserPhoneNumber }}</span>
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column label="订单时间" align="center" prop="createTime" width="180" />
+                <el-table-column label="预计取衣时间" align="center" prop="planSendToUserTime" width="180" />
+                <el-table-column label="状态" align="center" width="100">
+                    <template slot-scope="scope">
+                        <el-tag :type="getStatusType(scope.row.orderStatus)">
+                            <dict-tag :options="dict.type.cloth_order_status" :value="scope.row.orderStatus" />
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" align="center" fixed="right" width="200">
+                    <template slot-scope="scope">
+                        <template v-if="scope.row.payTimeType == '1' && scope.row.payStatus != 1">
+                            <el-button type="primary" size="mini" icon="el-icon-money" @click="toPay(scope)">立刻支付</el-button>
+                        </template>
+                        <template v-else>
+                            <el-button type="primary" size="mini" icon="el-icon-box" @click="handleDetail(scope.row)">取衣</el-button>
+                            <el-button v-if="scope.row.orderStatus == '8' || scope.row.orderStatus == '9'" type="warning" size="mini" icon="el-icon-user" @click="selectDeliveryMan(scope)"> 分配派送员 </el-button>
+                            <el-button v-if="scope.row.orderStatus == '9'" type="success" size="mini" icon="el-icon-check" @click="confirmSend(scope)"> 确认送达 </el-button>
+                        </template>
                     </template>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
-
-        <!-- 添加或修改洗衣订单衣服明细对话框 -->
-        <el-dialog :title="title" :visible.sync="open" size="70%" append-to-body>
-            <el-row :gutter="15" style="margin-bottom: 80px; margin-left: 20px; width: calc(100% - 20px)">
-                <el-col :span="24">
-                    <el-descriptions class="margin-top" :column="2" border>
-                        <el-descriptions-item>
-                            <template slot="label"> 订单号 </template>
-                            {{ orderDetail.orderNo }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 支付方式 </template>
-                            <template v-if="orderDetail.payType == '0'">微信</template>
-                            <template v-if="orderDetail.payType == '1'">支付宝</template>
-                            <template v-if="orderDetail.payType == '2'">现金</template>
-                            <template v-if="orderDetail.payType == '3'">余额</template>
-                            （{{ orderDetail.payAmount }}元）
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 姓名 </template>
-                            {{ orderDetail.appUserName }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 电话 </template>
-                            {{ orderDetail.appUserPhoneNumber }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 总金额（元） </template>
-                            {{ orderDetail.orderClothPrice }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 时间 </template>
-                            {{ orderDetail.createTime }}
-                        </el-descriptions-item>
-                        <el-descriptions-item>
-                            <template slot="label"> 订单备注 </template>
-                            {{ orderDetail.remark }}
-                        </el-descriptions-item>
-                    </el-descriptions>
-                </el-col>
-                <el-col :span="24" style="margin-top: 10px">
-                    <el-table :data="orderClothDetails" fit highlight-current-row border stripe @selection-change="handleSelectionChange">
-                        <el-table-column
-                            type="selection"
-                            width="55"
-                            align="center"
-                            :selectable="
-                                (row, index) => {
-                                    return row.flowStatus != '5'
-                                }
-                            "
-                        />
-                        <el-table-column label="衣物条码" align="center" prop="washCode" width="180" fixed="left" />
-                        <el-table-column label="衣服名称" align="center" prop="clothItemName" min-width="150" />
-                        <el-table-column label="品牌" align="center" prop="clothBrandName" min-width="120" />
-                        <el-table-column label="颜色" align="center" width="150">
+                </el-table-column>
+            </el-table>
+
+            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
+        </el-card>
+
+        <!-- 取衣详情弹窗 -->
+        <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal="false" class="take-clothes-dialog" append-to-body>
+            <div class="order-detail">
+                <!-- 订单基本信息 -->
+                <el-card class="info-card">
+                    <div class="order-info">
+                        <div class="info-item">
+                            <span class="label">订单号：</span>
+                            <span class="value">{{ orderDetail.orderNo }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">支付方式：</span>
+                            <span class="value">
+                                {{ getPaymentText(orderDetail.payType) }}
+                                <span class="amount">¥{{ orderDetail.payAmount }}</span>
+                            </span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">客户姓名：</span>
+                            <span class="value">{{ orderDetail.appUserName }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">联系电话：</span>
+                            <span class="value">{{ orderDetail.appUserPhoneNumber }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">下单时间：</span>
+                            <span class="value">{{ orderDetail.createTime }}</span>
+                        </div>
+                        <div class="info-item">
+                            <span class="label">备注信息：</span>
+                            <span class="value">{{ orderDetail.remark || '无' }}</span>
+                        </div>
+                    </div>
+                </el-card>
+
+                <!-- 衣物列表 -->
+                <el-card class="clothes-card">
+                    <div slot="header">
+                        <span>衣物列表</span>
+                        <el-button type="primary" size="small" icon="el-icon-printer" style="float: right" @click="printTicket" :disabled="!selectedClothes.length"> 打印小票 </el-button>
+                    </div>
+                    <el-table :data="orderClothDetails" border stripe @selection-change="handleSelectionChange">
+                        <el-table-column type="selection" width="55" align="center" :selectable="(row) => row.flowStatus != '5'" />
+                        <el-table-column label="衣物条码" prop="washCode" width="180" />
+                        <el-table-column label="衣服名称" prop="clothItemName" min-width="150" />
+                        <el-table-column label="品牌" prop="clothBrandName" width="120" />
+                        <el-table-column label="颜色" width="150">
                             <template slot-scope="scope">
-                                <template v-for="(item, index) in scope.row.orderClothColors">
-                                    {{ index == 0 ? item.clothColorName : ',' + item.clothColorName }}
-                                </template>
+                                <el-tag v-for="(item, index) in scope.row.orderClothColors" :key="item.id" size="small" style="margin-right: 4px">
+                                    {{ item.clothColorName }}
+                                </el-tag>
                             </template>
                         </el-table-column>
-                        <el-table-column label="瑕疵" align="center" width="100">
+                        <el-table-column label="瑕疵" width="150">
                             <template slot-scope="scope">
-                                <el-tag size="small" v-for="item in scope.row.orderClothFlaws" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.clothFlawName }}</el-tag>
+                                <el-tag v-for="item in scope.row.orderClothFlaws" :key="item.id" type="warning" size="small" style="margin: 2px">
+                                    {{ item.clothFlawName }}
+                                </el-tag>
                             </template>
                         </el-table-column>
-                        <el-table-column label="洗衣速度" align="center" prop="clothSpeedName" width="150" />
-                        <el-table-column label="附件" align="center" width="150">
+                        <el-table-column label="洗衣速度" prop="clothSpeedName" width="120" />
+                        <el-table-column label="附件" width="150">
                             <template slot-scope="scope">
-                                <el-tag size="small" v-for="item in scope.row.orderClothAdjuncts" style="margin-right: 10px; margin-bottom: 2.5px; margin-top: 2.5px">{{ item.adjunctName + '*' + item.num }}</el-tag>
+                                <el-tag v-for="item in scope.row.orderClothAdjuncts" :key="item.id" type="info" size="small" style="margin: 2px"> {{ item.adjunctName }}×{{ item.num }} </el-tag>
                             </template>
                         </el-table-column>
-                        <el-table-column label="挂衣号" align="center" width="150">
+                        <el-table-column label="挂衣号" width="120">
                             <template slot-scope="scope">
-                                <span v-if="scope.row.clothHanger">
-                                    {{ scope.row.clothHanger.name + '#' + scope.row.clothHangerCode }}
-                                </span>
+                                <span v-if="scope.row.clothHanger" class="hanger-code"> {{ scope.row.clothHanger.name }}#{{ scope.row.clothHangerCode }} </span>
                             </template>
                         </el-table-column>
-                        <el-table-column label="状态" align="center" prop="flowStatus" width="80">
+                        <el-table-column label="状态" width="100">
                             <template slot-scope="scope">
                                 <dict-tag :options="dict.type.order_cloth_flow_status" :value="scope.row.flowStatus" />
                             </template>
                         </el-table-column>
                     </el-table>
-                </el-col>
-            </el-row>
+                </el-card>
+            </div>
 
             <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitForm" style="margin-left: 5%">取衣</el-button>
-                <el-button @click="cancel">关 闭</el-button>
+                <el-button @click="cancel">取 消</el-button>
+                <el-button type="primary" @click="submitForm" :disabled="!selectedClothes.length"> 确认取衣 ({{ selectedClothes.length }}) </el-button>
             </div>
         </el-dialog>
 
-        <!-- 添加或修改洗衣订单对话框 -->
-        <el-dialog :title="title" :visible.sync="deliveryOpen" width="20%" append-to-body>
-            <el-row :gutter="15">
-                <el-form ref="form" :model="selectDeliveryForm" :rules="rules" label-width="70px">
-                    <el-col :span="24">
-                        <el-form-item label="派送员" prop="deliveryManId">
-                            <el-select v-model="selectDeliveryForm.deliveryManId" placeholder="请选择派送员" clearable>
-                                <el-option v-for="man in deliveryManList" :key="man.appUserId" :label="man.realName" :value="man.appUserId" />
-                            </el-select>
-                        </el-form-item>
-                    </el-col>
-                </el-form>
-            </el-row>
-
-            <div>
-                <el-button type="primary" @click="submitDelivery" style="margin-left: 40%">提交</el-button>
-            </div>
-        </el-dialog>
-        <pay-status-popup ref="payStatusPopup" hidePointer @paySuccess="handleQuery" @confirm="handleDetail"></pay-status-popup>
+        <!-- 支付状态弹窗组件 -->
+        <pay-status-popup ref="payStatusPopup" hidePointer @paySuccess="handlePaySuccess" @confirm="handlePayConfirm" @error="handlePayError"> </pay-status-popup>
     </div>
 </template>
 
+<style lang="scss" scoped>
+.app-container {
+    padding: 20px;
+
+    .search-card {
+        margin-bottom: 20px;
+    }
+
+    .table-card {
+        .table-operations {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .title {
+                font-size: 16px;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.take-clothes-dialog {
+    .order-detail {
+        .info-card {
+            margin-bottom: 20px;
+
+            .order-info {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 16px;
+
+                .info-item {
+                    .label {
+                        color: #909399;
+                        margin-right: 8px;
+                    }
+
+                    .value {
+                        color: #303133;
+                        font-weight: 500;
+
+                        .amount {
+                            color: #f56c6c;
+                            margin-left: 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .clothes-card {
+            .hanger-code {
+                color: #409eff;
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.payment-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .amount {
+        font-size: 16px;
+        font-weight: bold;
+        color: #f56c6c;
+    }
+
+    .payment-type {
+        color: #909399;
+
+        i {
+            margin-right: 4px;
+        }
+    }
+}
+
+.customer-info {
+    .source {
+        margin-bottom: 4px;
+    }
+
+    .user {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+
+        .name {
+            font-weight: 500;
+        }
+
+        .phone {
+            color: #909399;
+        }
+    }
+}
+</style>
+
 <script>
 import { getSendClothOrderList, refundOrderCloth, takeCloth, setSendDelivery, confirmSend, getInfoByOrderNo } from '../../../api/order/cloth'
 import { listOrderClothItem } from '../../../api/order/clothItem'
@@ -209,7 +305,9 @@ import payStatusPopup from '@/components/payStatusPopup'
 export default {
     name: 'ClothItem',
     dicts: ['sys_yes_no', 'order_cloth_flow_status', 'order_cloth_flow_action', 'cloth_order_status'],
-    components: { payStatusPopup },
+    components: {
+        payStatusPopup
+    },
     data() {
         return {
             // 遮罩层
@@ -247,7 +345,8 @@ export default {
             rules: {},
             LODOP: null,
             number: 1,
-            pointerList: []
+            pointerList: [],
+            selectedClothes: []
         }
     },
     created() {
@@ -298,6 +397,8 @@ export default {
         },
         // 表单重置
         reset() {
+            this.selectedClothes = []
+            this.form = {}
             this.resetForm('form')
         },
         /** 搜索按钮操作 */
@@ -312,6 +413,7 @@ export default {
         },
         // 多选框选中数据
         handleSelectionChange(selection) {
+            this.selectedClothes = selection
             this.ids = selection.map((item) => item.washCode)
             this.single = selection.length !== 1
             this.multiple = !selection.length
@@ -325,7 +427,16 @@ export default {
 
         // 去支付
         toPay(scope) {
-            this.$refs.payStatusPopup.open(2, scope.row)
+            if (!this.$refs.payStatusPopup) {
+                this.$message.error('支付组件加载失败')
+                return
+            }
+            try {
+                this.$refs.payStatusPopup.open(2, scope.row)
+            } catch (error) {
+                console.error('支付调用失败:', error)
+                this.$message.error('支付调用失败，请重试')
+            }
         },
 
         /** 详情按钮 */
@@ -378,37 +489,44 @@ export default {
                 .catch(() => {})
         },
         async submitForm() {
-            var _this = this
-            if (this.ids.length == 0) {
+            if (this.selectedClothes.length === 0) {
                 this.$message.error('请先选择衣服')
                 return
             }
-            var params = {}
-            params.washCodes = this.ids.join(',')
-            params.orderId = this.orderDetail.id
-
-            this.$modal.confirm('是否确认取衣衣服编号为"' + params.washCodes + '"的数据项？').then(function () {
-                takeCloth(params).then((res) => {
-                    _this.$message.success('取衣成功')
-                    _this.open = false
-                    _this.getList()
-                    if (!_this.LODOP) {
-                        _this.$modal.msgError('请安装打印机软件')
-                        return
-                    }
-                    _this.$modal.confirm('是否打印小票？').then(function () {
-                        getInfoByOrderNo({ orderNo: _this.orderDetail.orderNo }).then((res) => {
-                            let p_name = ''
-                            _this.pointerList.forEach((pointer) => {
-                                if (pointer.printType == 0) {
-                                    p_name = pointer.printName
-                                }
-                            })
-                            _this.sendClothPrinter(_this.LODOP, res.data, p_name)
+
+            const params = {
+                washCodes: this.ids.join(','),
+                orderId: this.orderDetail.id
+            }
+
+            try {
+                await this.$modal.confirm(`是否确认取衣衣服编号为"${params.washCodes}"的数据项？`)
+                const res = await takeCloth(params)
+                this.$message.success('取衣成功')
+                this.open = false
+                this.getList()
+
+                // 询问是否打印小票
+                if (this.LODOP) {
+                    try {
+                        await this.$modal.confirm('是否打印小票？')
+                        const orderInfo = await getInfoByOrderNo({ orderNo: this.orderDetail.orderNo })
+                        let p_name = ''
+                        this.pointerList.forEach((pointer) => {
+                            if (pointer.printType == 0) {
+                                p_name = pointer.printName
+                            }
                         })
-                    })
-                })
-            })
+                        this.sendClothPrinter(this.LODOP, orderInfo.data, p_name)
+                    } catch (e) {
+                        // 用户取消打印
+                    }
+                } else {
+                    this.$modal.msgError('请安装打印机软件')
+                }
+            } catch (e) {
+                // 用户取消操作或接口错误
+            }
         },
         submitDelivery() {
             if (this.isEmpty(this.selectDeliveryForm.deliveryManId)) {
@@ -430,6 +548,80 @@ export default {
                     })
                 })
                 .catch(() => {})
+        },
+        // 获取支付方式图标
+        getPaymentIcon(type) {
+            const icons = {
+                0: 'el-icon-mobile-phone',
+                1: 'el-icon-mobile-phone',
+                2: 'el-icon-money',
+                3: 'el-icon-wallet'
+            }
+            return icons[type] || 'el-icon-money'
+        },
+
+        // 获取支付方式文本
+        getPaymentText(type) {
+            const texts = {
+                0: '微信支付',
+                1: '支付宝',
+                2: '现金支付',
+                3: '余额支付'
+            }
+            return texts[type] || '其他'
+        },
+
+        // 获取状态类型
+        getStatusType(status) {
+            const types = {
+                6: 'warning',
+                7: 'info',
+                8: 'primary',
+                9: 'success'
+            }
+            return types[status] || ''
+        },
+
+        // 行点击事件
+        handleRowClick(row) {
+            if (row.payTimeType !== '1' || row.payStatus === 1) {
+                this.handleDetail(row)
+            }
+        },
+
+        // 打印小票
+        printTicket() {
+            if (!this.LODOP) {
+                this.$modal.msgError('请安装打印机软件')
+                return
+            }
+
+            this.$modal.confirm('是否打印小票？').then(() => {
+                getInfoByOrderNo({ orderNo: this.orderDetail.orderNo }).then((res) => {
+                    let p_name = ''
+                    this.pointerList.forEach((pointer) => {
+                        if (pointer.printType == 0) {
+                            p_name = pointer.printName
+                        }
+                    })
+                    this.sendClothPrinter(this.LODOP, res.data, p_name)
+                })
+            })
+        },
+        // 支付成功回调
+        handlePaySuccess() {
+            this.handleQuery()
+        },
+
+        // 确认回调
+        handlePayConfirm(data) {
+            this.handleDetail(data)
+        },
+
+        // 支付错误处理
+        handlePayError(error) {
+            console.error('支付错误:', error)
+            this.$message.error('支付失败，请重试')
         }
     }
 }

src/views/recharge/refund/index.vue

@@ -1,341 +1,296 @@
 <template>
-    <div class="app-container">
-        <!-- 搜索区域卡片 -->
-        <el-card class="box-card" shadow="never">
-            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
-                <el-form-item prop="orderNo">
-                    <el-input 
-                        v-model="queryParams.orderNo" 
-                        placeholder="请输入订单编号" 
-                        clearable 
-                        prefix-icon="el-icon-document"
-                        style="width: 240px"
-                        @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item prop="phoneNumber">
-                    <el-input 
-                        v-model="queryParams.phoneNumber" 
-                        placeholder="请输入手机号" 
-                        clearable 
-                        prefix-icon="el-icon-mobile-phone"
-                        style="width: 240px"
-                        @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item prop="realName">
-                    <el-input 
-                        v-model="queryParams.realName" 
-                        placeholder="请输入客户姓名" 
-                        clearable 
-                        prefix-icon="el-icon-user"
-                        style="width: 240px"
-                        @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item prop="storeName">
-                    <el-input 
-                        v-model="queryParams.storeName" 
-                        placeholder="请输入门店名称" 
-                        clearable 
-                        prefix-icon="el-icon-office-building"
-                        style="width: 240px"
-                        @keyup.enter.native="handleQuery" />
-                </el-form-item>
-                <el-form-item label="申请时间">
-                    <el-date-picker
-                        v-model="dateRange"
-                        type="daterange"
-                        range-separator="至"
-                        start-placeholder="开始日期"
-                        end-placeholder="结束日期"
-                        value-format="yyyy-MM-dd"
-                        style="width: 240px"
-                        :picker-options="pickerOptions"
-                        @change="handleDateChange">
-                    </el-date-picker>
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
+  <div class="app-container">
+    <!-- 搜索区域卡片 -->
+    <el-card class="box-card" shadow="never">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
+        <el-form-item prop="orderNo">
+          <el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable prefix-icon="el-icon-document" style="width: 240px"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item prop="phoneNumber">
+          <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号" clearable prefix-icon="el-icon-mobile-phone" style="width: 240px"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item prop="realName">
+          <el-input v-model="queryParams.realName" placeholder="请输入客户姓名" clearable prefix-icon="el-icon-user" style="width: 240px"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item prop="storeName">
+          <el-input v-model="queryParams.storeName" placeholder="请输入门店名称" clearable prefix-icon="el-icon-office-building" style="width: 240px"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="申请时间">
+          <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
+            value-format="yyyy-MM-dd" style="width: 240px" :picker-options="pickerOptions" @change="handleDateChange">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
 
-        <!-- 表格区域卡片 -->
-        <el-card class="box-card table-card" shadow="never">
-            <div slot="header" class="clearfix">
-                <el-row :gutter="10" class="mb8">
-                    <el-col :span="1.5">
-                        <el-button
-                            type="warning"
-                            plain
-                            icon="el-icon-download"
-                            @click="handleExport"
-                            v-hasPermi="['recharge:order:export']"
-                        >导出</el-button>
-                    </el-col>
-                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-                </el-row>
-            </div>
-
-            <Page uri="/mapi/recharge/refund/list" :request-params="queryParams" ref="pagination">
-                <el-table-column label="订单编号" align="center" prop="orderNo" min-width="130" fixed="left" :show-overflow-tooltip="true" />
-                <el-table-column label="储值卡号" align="center" prop="cardNo" min-width="130" :show-overflow-tooltip="true" />
-                <el-table-column label="储值门店" align="center" min-width="150" :show-overflow-tooltip="true">
-                    <template slot-scope="scope">
-                        {{ scope.row.storeName || '--' }}
-                    </template>
-                </el-table-column>
-                <el-table-column label="姓名" align="center" prop="appUserName" min-width="100" :show-overflow-tooltip="true" />
-                <el-table-column label="手机号" align="center" prop="appUserPhone" width="120" :show-overflow-tooltip="true" />
-                <el-table-column label="退款方式" align="center" prop="refundType" width="100">
-                    <template slot-scope="scope">
-                        <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.refundType" />
-                    </template>
-                </el-table-column>
-                <el-table-column label="退款金额" align="center" min-width="180">
-                    <template slot-scope="scope">
-                        <div class="amount-info">
-                            <el-tag size="mini" type="danger" v-if="scope.row.cashRefundAmount > 0">现金：¥{{ formatAmount(scope.row.cashRefundAmount) }}</el-tag>
-                            <el-tag size="mini" type="success" v-if="scope.row.wxRefundAmount > 0">微信：¥{{ formatAmount(scope.row.wxRefundAmount) }}</el-tag>
-                            <el-tag size="mini" type="primary" v-if="scope.row.aliRefundAmount > 0">支付宝：¥{{ formatAmount(scope.row.aliRefundAmount) }}</el-tag>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column label="卡内余额" align="center" min-width="180">
-                    <template slot-scope="scope">
-                        <div class="amount-info">
-                            <el-tag size="mini" type="success">现金：¥{{ formatAmount(scope.row.rechargeBalance) }}</el-tag>
-                            <el-tag size="mini" type="warning">赠送：¥{{ formatAmount(scope.row.giveBalance) }}</el-tag>
-                            <el-tag size="mini" type="info">福利：¥{{ formatAmount(scope.row.welfareBalance) }}</el-tag>
-                        </div>
-                    </template>
-                </el-table-column>
-                <el-table-column label="退款描述" align="center" prop="refundReason" min-width="150" :show-overflow-tooltip="true" />
-                <el-table-column label="退款申请时间" align="center" prop="refundApplyTime" width="160" :show-overflow-tooltip="true">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.refundApplyTime || '--' }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="退款时间" align="center" prop="refundTime" width="160" :show-overflow-tooltip="true">
-                    <template slot-scope="scope">
-                        <span>{{ scope.row.refundTime || '--' }}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="退卡状态" align="center" prop="refundStatus" width="100">
-                    <template slot-scope="scope">
-                        <dict-tag :options="dict.type.recharge_refund_status" :value="scope.row.refundStatus" />
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center" width="150" fixed="right">
-                    <template slot-scope="scope" v-if="scope.row.refundStatus == '1'">
-                        <el-button type="text" icon="el-icon-close" @click="handleApprovalNo(scope.row)" v-hasPermi="['recharge:order:edit']">拒绝</el-button>
-                        <el-button type="text" icon="el-icon-check" @click="handleApprovalYes(scope.row)" v-hasPermi="['recharge:order:edit']">同意</el-button>
-                    </template>
-                </el-table-column>
-            </Page>
-        </el-card>
+    <!-- 表格区域卡片 -->
+    <el-card class="box-card table-card" shadow="never">
+      <div slot="header" class="clearfix">
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPermi="['recharge:order:export']">导出</el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </div>
 
-        <!-- 退款审核确认对话框 -->
-        <el-dialog 
-            :title="approvalTitle" 
-            :visible.sync="approvalDialogVisible" 
-            width="500px" 
-            append-to-body 
-            destroy-on-close 
-            :close-on-click-modal="false">
-            <el-form ref="approvalForm" :model="approvalForm" :rules="approvalRules" label-width="100px">
-                <el-form-item label="退款原因" prop="reason" v-if="approvalType === 'reject'">
-                    <el-input
-                        v-model="approvalForm.reason"
-                        type="textarea"
-                        :rows="4"
-                        placeholder="请输入拒绝退款的原因"
-                        maxlength="500"
-                        show-word-limit>
-                    </el-input>
-                </el-form-item>
-                <div v-else class="approval-info">
-                    <p>退款信息确认：</p>
-                    <ul>
-                        <li>卡内现金余额：<span class="amount">¥{{ formatAmount(currentRecord.rechargeBalance) }}</span></li>
-                        <li>卡内赠送余额：<span class="amount">¥{{ formatAmount(currentRecord.giveBalance) }}</span></li>
-                        <li>可退金额：<span class="amount">¥{{ formatAmount(currentRecord.rechargeBalance) }}</span></li>
-                    </ul>
-                </div>
-            </el-form>
-            <div slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="submitApproval" :loading="approvalLoading">确 定</el-button>
-                <el-button @click="approvalDialogVisible = false">取 消</el-button>
+      <Page uri="/mapi/recharge/refund/list" :request-params="queryParams" ref="pagination">
+        <el-table-column label="订单编号" align="center" prop="orderNo" min-width="130" fixed="left" :show-overflow-tooltip="true" />
+        <el-table-column label="储值卡号" align="center" prop="cardNo" min-width="130" :show-overflow-tooltip="true" />
+        <el-table-column label="储值门店" align="center" min-width="150" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.storeName || '--' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="姓名" align="center" prop="appUserName" min-width="100" :show-overflow-tooltip="true" />
+        <el-table-column label="手机号" align="center" prop="appUserPhone" width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="退款方式" align="center" prop="refundType" width="100">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.recharge_pay_type" :value="scope.row.refundType" />
+          </template>
+        </el-table-column>
+        <el-table-column label="退款金额" align="center" min-width="180">
+          <template slot-scope="scope">
+            <div class="amount-info">
+              <el-tag size="mini" type="danger" v-if="scope.row.cashRefundAmount > 0">现金：¥{{ formatAmount(scope.row.cashRefundAmount) }}</el-tag>
+              <el-tag size="mini" type="success" v-if="scope.row.wxRefundAmount > 0">微信：¥{{ formatAmount(scope.row.wxRefundAmount) }}</el-tag>
+              <el-tag size="mini" type="primary" v-if="scope.row.aliRefundAmount > 0">支付宝：¥{{ formatAmount(scope.row.aliRefundAmount) }}</el-tag>
             </div>
-        </el-dialog>
-    </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="卡内余额" align="center" min-width="180">
+          <template slot-scope="scope">
+            <div class="amount-info">
+              <el-tag size="mini" type="success">现金：¥{{ formatAmount(scope.row.rechargeBalance) }}</el-tag>
+              <el-tag size="mini" type="warning">赠送：¥{{ formatAmount(scope.row.giveBalance) }}</el-tag>
+              <el-tag size="mini" type="info">福利：¥{{ formatAmount(scope.row.welfareBalance) }}</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="退款描述" align="center" prop="refundReason" min-width="150" :show-overflow-tooltip="true" />
+        <el-table-column label="退款申请时间" align="center" prop="refundApplyTime" width="160" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ scope.row.refundApplyTime || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="退款时间" align="center" prop="refundTime" width="160" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span>{{ scope.row.refundTime || '--' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="退卡状态" align="center" prop="refundStatus" width="100">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.recharge_refund_status" :value="scope.row.refundStatus" />
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template slot-scope="scope" v-if="scope.row.refundStatus == '1'">
+            <el-button type="text" icon="el-icon-close" @click="handleApprovalNo(scope.row)" v-hasPermi="['recharge:order:edit']">拒绝</el-button>
+            <el-button type="text" icon="el-icon-check" @click="handleApprovalYes(scope.row)" v-hasPermi="['recharge:order:edit']">同意</el-button>
+          </template>
+        </el-table-column>
+      </Page>
+    </el-card>
+
+    <!-- 退款审核确认对话框 -->
+    <el-dialog :title="approvalTitle" :visible.sync="approvalDialogVisible" width="500px" append-to-body destroy-on-close
+      :close-on-click-modal="false">
+      <el-form ref="approvalForm" :model="approvalForm" :rules="approvalRules" label-width="100px">
+        <el-form-item label="退款原因" prop="reason" v-if="approvalType === 'reject'">
+          <el-input v-model="approvalForm.reason" type="textarea" :rows="4" placeholder="请输入拒绝退款的原因" maxlength="500" show-word-limit>
+          </el-input>
+        </el-form-item>
+        <div v-else class="approval-info">
+          <p>退款信息确认：</p>
+          <ul>
+            <li>卡内现金余额：<span class="amount">¥{{ formatAmount(currentRecord.rechargeBalance) }}</span></li>
+            <li>卡内赠送余额：<span class="amount">¥{{ formatAmount(currentRecord.giveBalance) }}</span></li>
+            <li>可退金额：<span class="amount">¥{{ formatAmount(currentRecord.rechargeBalance) }}</span></li>
+          </ul>
+        </div>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitApproval" :loading="approvalLoading">确 定</el-button>
+        <el-button @click="approvalDialogVisible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 import { listRefund, refundApprovalNo, refundApprovalYes } from '@/api/recharge/refund'
 
 export default {
-    name: 'Refund',
-    dicts: ['recharge_use_status', 'recharge_refund_status', 'recharge_pay_type', 'recharge_order_status'],
-    data() {
-        return {
-            // 遮罩层
-            loading: true,
-            // 显示搜索条件
-            showSearch: true,
-            // 查询参数
-            queryParams: {
-                orderNo: null,
-                orgId: null,
-                storeName: null,
-                phoneNumber: null,
-                realName: null,
-                beginTime: null,
-                endTime: null
-            },
-            // 日期范围
-            dateRange: null,
-            // 日期选择器快捷选项
-            pickerOptions: {
-                shortcuts: [
-                    {
-                        text: '最近一周',
-                        onClick(picker) {
-                            const end = new Date()
-                            const start = new Date()
-                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-                            picker.$emit('pick', [start, end])
-                        }
-                    },
-                    {
-                        text: '最近一个月',
-                        onClick(picker) {
-                            const end = new Date()
-                            const start = new Date()
-                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
-                            picker.$emit('pick', [start, end])
-                        }
-                    },
-                    {
-                        text: '最近三个月',
-                        onClick(picker) {
-                            const end = new Date()
-                            const start = new Date()
-                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
-                            picker.$emit('pick', [start, end])
-                        }
-                    }
-                ]
-            },
-            // 审核相关
-            approvalDialogVisible: false,
-            approvalTitle: '',
-            approvalType: '',
-            approvalLoading: false,
-            currentRecord: {},
-            approvalForm: {
-                reason: ''
-            },
-            approvalRules: {
-                reason: [
-                    { required: true, message: '请输入拒绝原因', trigger: 'blur' },
-                    { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
-                ]
+  name: 'Refund',
+  dicts: ['recharge_use_status', 'recharge_refund_status', 'recharge_pay_type', 'recharge_order_status'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        orderNo: null,
+        orgId: null,
+        storeName: null,
+        phoneNumber: null,
+        realName: null,
+        beginTime: null,
+        endTime: null
+      },
+      // 日期范围
+      dateRange: null,
+      // 日期选择器快捷选项
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
             }
-        }
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      },
+      // 审核相关
+      approvalDialogVisible: false,
+      approvalTitle: '',
+      approvalType: '',
+      approvalLoading: false,
+      currentRecord: {},
+      approvalForm: {
+        reason: ''
+      },
+      approvalRules: {
+        reason: [
+          { required: true, message: '请输入拒绝原因', trigger: 'blur' },
+          { min: 2, max: 500, message: '长度在 2 到 500 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询列表 */
+    getList() {
+      this.$nextTick(() => {
+        this.$refs.pagination.handleSearch(true)
+      })
     },
-    created() {
-        this.getList()
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList()
     },
-    methods: {
-        /** 查询列表 */
-        getList() {
-            this.$nextTick(() => {
-                this.$refs.pagination.handleSearch(true)
-            })
-        },
-        /** 搜索按钮操作 */
-        handleQuery() {
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = null
+      this.queryParams.beginTime = null
+      this.queryParams.endTime = null
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    /** 日期范围变化 */
+    handleDateChange(dates) {
+      if (dates) {
+        this.queryParams.beginTime = dates[0]
+        this.queryParams.endTime = dates[1]
+      } else {
+        this.queryParams.beginTime = null
+        this.queryParams.endTime = null
+      }
+    },
+    /** 拒绝退卡 */
+    handleApprovalNo(row) {
+      this.currentRecord = row
+      this.approvalType = 'reject'
+      this.approvalTitle = '拒绝退卡确认'
+      this.approvalForm.reason = ''
+      this.approvalDialogVisible = true
+    },
+    /** 同意退卡 */
+    handleApprovalYes(row) {
+      this.currentRecord = row
+      this.approvalType = 'approve'
+      this.approvalTitle = '同意退卡确认'
+      this.approvalDialogVisible = true
+    },
+    /** 提交审核 */
+    submitApproval() {
+      if (this.approvalType === 'reject') {
+        this.$refs.approvalForm.validate(valid => {
+          if (valid) {
+            this.approvalLoading = true
+            refundApprovalNo(this.currentRecord.id, this.approvalForm.reason)
+              .then(() => {
+                this.$modal.msgSuccess('已拒绝退卡申请')
+                this.approvalDialogVisible = false
+                this.getList()
+              })
+              .finally(() => {
+                this.approvalLoading = false
+              })
+          }
+        })
+      } else {
+        this.approvalLoading = true
+        refundApprovalYes(this.currentRecord.id)
+          .then(() => {
+            this.$modal.msgSuccess('已同意退卡申请')
+            this.approvalDialogVisible = false
             this.getList()
+          })
+          .finally(() => {
+            this.approvalLoading = false
+          })
+      }
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        'mapi/recharge/refund/export',
+        {
+          ...this.queryParams
         },
-        /** 重置按钮操作 */
-        resetQuery() {
-            this.dateRange = null
-            this.queryParams.beginTime = null
-            this.queryParams.endTime = null
-            this.resetForm('queryForm')
-            this.handleQuery()
-        },
-        /** 日期范围变化 */
-        handleDateChange(dates) {
-            if (dates) {
-                this.queryParams.beginTime = dates[0]
-                this.queryParams.endTime = dates[1]
-            } else {
-                this.queryParams.beginTime = null
-                this.queryParams.endTime = null
-            }
-        },
-        /** 拒绝退卡 */
-        handleApprovalNo(row) {
-            this.currentRecord = row
-            this.approvalType = 'reject'
-            this.approvalTitle = '拒绝退卡确认'
-            this.approvalForm.reason = ''
-            this.approvalDialogVisible = true
-        },
-        /** 同意退卡 */
-        handleApprovalYes(row) {
-            this.currentRecord = row
-            this.approvalType = 'approve'
-            this.approvalTitle = '同意退卡确认'
-            this.approvalDialogVisible = true
-        },
-        /** 提交审核 */
-        submitApproval() {
-            if (this.approvalType === 'reject') {
-                this.$refs.approvalForm.validate(valid => {
-                    if (valid) {
-                        this.approvalLoading = true
-                        refundApprovalNo(this.currentRecord.id, this.approvalForm.reason)
-                            .then(() => {
-                                this.$modal.msgSuccess('已拒绝退卡申请')
-                                this.approvalDialogVisible = false
-                                this.getList()
-                            })
-                            .finally(() => {
-                                this.approvalLoading = false
-                            })
-                    }
-                })
-            } else {
-                this.approvalLoading = true
-                refundApprovalYes(this.currentRecord.id)
-                    .then(() => {
-                        this.$modal.msgSuccess('已同意退卡申请')
-                        this.approvalDialogVisible = false
-                        this.getList()
-                    })
-                    .finally(() => {
-                        this.approvalLoading = false
-                    })
-            }
-        },
-        /** 导出按钮操作 */
-        handleExport() {
-            this.download(
-                'mapi/recharge/refund/export',
-                {
-                    ...this.queryParams
-                },
-                `refund_${new Date().getTime()}.xlsx`
-            )
-        },
-        /** 格式化金额 */
-        formatAmount(amount) {
-            if (!amount) return '0.00'
-            return parseFloat(amount).toFixed(2)
-        }
+        `refund_${new Date().getTime()}.xlsx`
+      )
+    },
+    /** 格式化金额 */
+    formatAmount(amount) {
+      if (!amount) return '0.00'
+      return parseFloat(amount).toFixed(2)
     }
+  }
 }
 </script>
 
@@ -371,15 +326,15 @@ export default {
         .el-tag {
             margin: 0 4px;
             transition: all 0.3s ease;
-            
+
             &:first-child {
                 margin-left: 0;
             }
-            
+
             &:last-child {
                 margin-right: 0;
             }
-            
+
             &:hover {
                 transform: translateY(-1px);
             }
@@ -392,10 +347,10 @@ export default {
             color: #606266;
             font-weight: bold;
         }
-        
+
         .el-table__row {
             transition: all 0.3s ease;
-            
+
             &:hover {
                 background-color: #f5f7fa;
             }

src/views/workbench/workRecharge/index.vue

@@ -164,146 +164,101 @@
             <el-button type="primary" @click="submitSettlement" style="margin: 20px 80px 0; width: 200px; height: 40px">确认</el-button>
         </el-dialog>
         <!-- 支付方式 -->
-        <el-dialog :title="rechargeTitle" :visible.sync="openRecharge" width="75%" :before-close="checkClosePay">
-            <el-descriptions title="核对信息" v-if="rechargeInfo && appUserInfo" :column="4" border :contentStyle="{ 'text-align': 'center' }">
-                <el-descriptions-item label="本次充值金额" :labelStyle="{ width: '14%' }">{{ rechargeInfo.rechargeAmount }} </el-descriptions-item>
-                <el-descriptions-item label="本次赠送金额" :labelStyle="{ width: '14%' }">
-                    {{ activityAmount != null && activityAmount != '' ? activityAmount : rechargeInfo.giveAmount }}
-                </el-descriptions-item>
-                <el-descriptions-item label="本次赠送积分" :labelStyle="{ width: '14%' }">
-                    {{ rechargeInfo.givePointAmount }}
-                </el-descriptions-item>
-                <el-descriptions-item label="本次福利金额" :labelStyle="{ width: '14%' }">{{ rechargeInfo.welfareAmount }} </el-descriptions-item>
+        <el-dialog :title="rechargeTitle" :visible.sync="openRecharge" width="800px" :close-on-click-modal="false" class="cashier-dialog" :before-close="checkClosePay">
+            <!-- 订单信息 -->
+            <div class="order-info">
+                <div class="amount-section">
+                    <div class="total-amount">
+                        <span class="label">应付金额</span>
+                        <span class="value">¥{{ getOrderNeedAmount }}</span>
+                    </div>
+                    <div class="detail-list">
+                        <div class="detail-item">
+                            <span class="label">充值金额：</span>
+                            <span class="value">¥{{ rechargeInfo.rechargeAmount }}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">赠送金额：</span>
+                            <span class="value">¥{{ activityAmount || rechargeInfo.giveAmount }}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">赠送积分：</span>
+                            <span class="value">{{ rechargeInfo.givePointAmount }}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span class="label">福利金额：</span>
+                            <span class="value">¥{{ rechargeInfo.welfareAmount }}</span>
+                        </div>
+                    </div>
+                </div>
 
-                <el-descriptions-item label="充值余额">{{ appUserInfo.rechargeBalance }}</el-descriptions-item>
-                <el-descriptions-item label="赠送余额">{{ appUserInfo.giveBalance }}</el-descriptions-item>
-                <el-descriptions-item label="现有积分">{{ appUserInfo.pointBalance }}</el-descriptions-item>
-                <el-descriptions-item label="福利余额">{{ appUserInfo.welfareBalance }}</el-descriptions-item>
+                <!-- 支付方式选择 -->
+                <div class="payment-section">
+                    <div class="section-title">支付方式</div>
+                    <div class="payment-methods">
+                        <div v-for="(method, index) in paymentMethods" :key="index" :class="['payment-method', { 'is-active': payFrom.payType === method.value }]" @click="selectPaymentMethod(method.value)">
+                            <i :class="method.icon"></i>
+                            <span>{{ method.label }}</span>
+                        </div>
+                    </div>
 
-                <el-descriptions-item label="充值后余额">
-                    {{ (rechargeInfo.rechargeAmount * 100 + appUserInfo.rechargeBalance * 100) / 100 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="充值后赠送余额">
-                    {{ activityAmount != null && activityAmount != '' ? (activityAmount * 100 + appUserInfo.giveBalance * 100) / 100 : (rechargeInfo.giveAmount * 100 + appUserInfo.giveBalance * 100) / 100 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="充值后积分">
-                    {{ (rechargeInfo.givePointAmount * 100 + appUserInfo.pointBalance * 100) / 100 }}
-                </el-descriptions-item>
-                <el-descriptions-item label="充值后福利余额">
-                    {{ (rechargeInfo.welfareAmount * 100 + appUserInfo.welfareBalance * 100) / 100 }}
-                </el-descriptions-item>
-            </el-descriptions>
+                    <!-- 支付金额输入区域 -->
+                    <div class="payment-input" v-if="payFrom.payType === '0'">
+                        <div class="input-group">
+                            <div class="input-item">
+                                <span class="label">微信/支付宝</span>
+                                <div class="readonly-value">¥{{ getOrderNeedAmount }}</div>
+                            </div>
+                        </div>
+                        <!-- 增加条形码扫描框 -->
+                        <div class="scan-input">
+                            <el-input v-model="payFrom.wxBarcode" placeholder="请扫描付款码" prefix-icon="el-icon-camera" clearable autofocus> </el-input>
+                        </div>
+                    </div>
 
-            <template v-if="rechargeInfo">
-                <el-form ref="payFrom" :model="payFrom" label-width="80px" style="margin-top: 20px" @submit.native.prevent>
-                    <el-card>
-                        <!--                        <el-row :gutter="10" style="margin-top: 10px">-->
-                        <!--                            <el-col :span="24">-->
-                        <!--                                <el-checkbox v-model="payFrom.isUsedCoupon">是否使用优惠券</el-checkbox>-->
-                        <!--                                <el-button style="margin-left: 10px" v-if="payFrom.isUsedCoupon" type="primary" @click="openCouponList">选择优惠券列表</el-button>-->
-                        <!--                            </el-col>-->
-                        <!--                        </el-row>-->
-                        <el-row :gutter="10" style="margin-top: 10px">
-                            <el-col :span="12" style="margin-top: 10px">
-                                <el-form-item label="支付方式" label-width="150px" prop="payType">
-                                    <el-radio-group v-model="payFrom.payType" @input="changePayType">
-                                        <el-radio-button label="2">现金</el-radio-button>
-                                        <el-radio-button label="0">微信/支付宝</el-radio-button>
-                                        <!--                                        <el-radio-button label="1">支付宝</el-radio-button>-->
-                                        <el-radio-button label="9">组合支付</el-radio-button>
-                                    </el-radio-group>
-                                </el-form-item>
-                            </el-col>
-                            <!--                            <el-col :span="12">-->
-                            <!--                                <el-form-item label="是否分段支付" label-width="150px" prop="isInstalment">-->
-                            <!--                                    <el-radio-group v-model="payFrom.isInstalment" :disabled="alreadyPayTotal > 0">-->
-                            <!--                                        <el-radio-button label="Y">是</el-radio-button>-->
-                            <!--                                        <el-radio-button label="N">否</el-radio-button>-->
-                            <!--                                    </el-radio-group>-->
-                            <!--                                </el-form-item>-->
-                            <!--                            </el-col>-->
-                        </el-row>
-                        <el-row style="margin-top: 10px; margin-left: 20px">
-                            <div class="clearfix">
-                                <!--                                <span>已优惠<span style="color: #ff4949; font-size: 18px; font-weight: bold; margin: 0 4px">{{ getCouponAmount }}</span>元</span>-->
-                                <span style="margin-left: 20px"
-                                    >需支付<span style="color: #ff4949; font-size: 18px; font-weight: bold; margin: 0 4px">{{ (getOrderNeedAmount * 100 - parseFloat(alreadyPayTotal * 100)) / 100 }}</span
-                                    >元</span
-                                >
+                    <!-- 支付金额输入区域 -->
+                    <div class="payment-input" v-if="payFrom.payType === '2'">
+                        <div class="input-group">
+                            <div class="input-item">
+                                <span class="label">现金支付</span>
+                                <div class="readonly-value">¥{{ getOrderNeedAmount }}</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- 组合支付时显示输入框 -->
+                    <div v-if="payFrom.payType === '9'">
+                        <div class="payment-input">
+                            <div class="input-group">
+                                <div class="input-item">
+                                    <span class="label">现金支付</span>
+                                    <el-input v-model="payFrom.cashPayAmount" placeholder="请输入现金金额" @input="changeCashPayAmount">
+                                        <template slot="prepend">¥</template>
+                                    </el-input>
+                                </div>
+                                <div class="input-item">
+                                    <span class="label">电子支付</span>
+                                    <div class="readonly-value">¥{{ payFrom.otherPayAmount || 0 }}</div>
+                                </div>
                             </div>
-                        </el-row>
-                        <el-row :gutter="10" style="margin-top: 10px">
-                            <!--                            <el-col :span="8">-->
-                            <!--                                <el-form-item label="已经支付：" label-width="90px" v-if="payFrom.isInstalment == 'Y'">-->
-                            <!--                                    <span>{{ alreadyPayTotal }} 元</span>-->
-                            <!--                                </el-form-item>-->
-                            <!--                            </el-col>-->
-                            <el-col :span="8">
-                                <el-form-item label="本次收取金额（元）" label-width="150px" prop="thisPayMoney" v-if="payFrom.isInstalment == 'Y'">
-                                    <el-input style="width: 250px" v-model="payFrom.thisPayMoney"></el-input>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-button type="primary" @click="submitConfirm" v-if="(payFrom.payType == '0' || payFrom.payType == '1') && payFrom.isInstalment == 'Y' && payConfirm == false"> 确认 </el-button>
-                            </el-col>
-                        </el-row>
 
-                        <el-row :gutter="10" style="margin-top: 10px">
-                            <el-col :span="8">
-                                <el-form-item label="付款条形码" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '0'">
-                                    <el-input style="width: 250px" v-model="payFrom.wxBarcode" clearable placeholder="请输入付款码"></el-input>
-                                </el-form-item>
-                            </el-col>
-                            <!--                            <el-col :span="8">-->
-                            <!--                                <el-form-item label="实收现金（元）" label-width="150px" prop="thisPayMoney" v-if="payFrom.payType == '2'">-->
-                            <!--                                    <el-input-number style="width: 250px" :controls="false" v-model="payFrom.thisPayMoney"></el-input-number>-->
-                            <!--                                </el-form-item>-->
-                            <!--                            </el-col>-->
-                            <el-col :span="8">
-                                <el-form-item label="实收现金（元）" label-width="150px" prop="cashPayAmount" v-if="payFrom.payType == '9'">
-                                    <el-input style="width: 250px" :controls="false" v-model="payFrom.cashPayAmount" @input="changeCashPayAmount"></el-input>
-                                </el-form-item>
-                                <el-form-item label="微信/支付宝（元）" label-width="150px" prop="otherPayAmount" v-if="payFrom.payType == '9'">
-                                    <!--                                    <el-input-number style="width: 250px" :controls="false" disabled v-model="payFrom.otherPayAmount"></el-input-number>-->
-                                    <span style="font-size: 16px; font-weight: bold">￥{{ payFrom.otherPayAmount || 0 }}</span>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '9'">
-                                    <el-input-number style="width: 250px; opacity: 0" :controls="false" disabled v-model="payFrom.otherPayAmount"></el-input-number>
-                                </el-form-item>
-                                <el-form-item label="付款条形码" label-width="150px" prop="wxBarcode" v-if="payFrom.payType == '9'">
-                                    <el-input style="width: 250px" v-model="payFrom.wxBarcode" clearable placeholder="请输入付款码"></el-input>
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8"> </el-col>
-                        </el-row>
-                        <!--                        <el-row :gutter="10" style="margin-top: 10px">-->
-                        <!--                            <el-card>-->
-                        <!--                                <el-table :data="alreadySelectCouponList">-->
-                        <!--                                    &lt;!&ndash;      <el-table-column label="编号" align="center" prop="id" />&ndash;&gt;-->
-                        <!--                                    <el-table-column label="优惠券" align="center" prop="couponTypeTitle" />-->
-                        <!--                                    <el-table-column label="优惠内容" align="center" prop="clothItemTypeName">-->
-                        <!--                                        <template slot-scope="scope">-->
-                        <!--                                            <span>抵扣充值金额：{{ scope.row.deductRechargeAmount }}元</span>-->
-                        <!--                                        </template>-->
-                        <!--                                    </el-table-column>-->
-                        <!--                                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
-                        <!--                                        <template slot-scope="scope">-->
-                        <!--                                            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>-->
-                        <!--                                        </template>-->
-                        <!--                                    </el-table-column>-->
-                        <!--                                </el-table>-->
-                        <!--                            </el-card>-->
-                        <!--                        </el-row>-->
-                    </el-card>
-                    <el-row :gutter="10">
-                        <div>
-                            <el-button type="primary" @click="submitSettlement" style="margin-left: 5px; margin-top: 20px">结算 </el-button>
+                            <!-- 增加条形码扫描框 -->
+                            <div class="scan-input">
+                                <el-input v-model="payFrom.wxBarcode" placeholder="请扫描付款码" prefix-icon="el-icon-camera" clearable autofocus> </el-input>
+                            </div>
                         </div>
-                    </el-row>
-                </el-form>
-            </template>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 底部操作区 -->
+            <div slot="footer" class="dialog-footer">
+                <div class="payment-summary">
+                    <span class="label">应收</span>
+                    <span class="amount">¥{{ getOrderNeedAmount }}</span>
+                </div>
+                <el-button type="primary" size="large" :loading="isSubmitting" @click="submitSettlement"> 确认收款 </el-button>
+            </div>
         </el-dialog>
 
         <el-dialog title="选择优惠券" :visible.sync="openCoupon" width="60%">
@@ -424,7 +379,6 @@ export default {
             showSearch: true,
             // 总条数
             total: 0,
-            // 表格数据
             // 弹出层标题
             title: '',
             rechargeTitle: '',
@@ -513,7 +467,14 @@ export default {
             activityAmount: null,
             alreadySelectCouponList: [],
             //支付检测
-            isPaying: false
+            isPaying: false,
+            isSubmitting: false,
+            paymentMethods: [
+                { label: '现金支付', value: '2', icon: 'el-icon-money' },
+                { label: '微信/支付宝', value: '0', icon: 'el-icon-mobile-phone' },
+                { label: '组合支付', value: '9', icon: 'el-icon-wallet' }
+            ],
+            quickAmounts: ['100', '200', '500', '1000']
         }
     },
     created() {
@@ -629,7 +590,7 @@ export default {
         },
         // 关闭支付页面 二次确认
         checkClosePay(done) {
-            this.$confirm('退单金额如下:现金:' + this.alreadyPayInfo.alreadyPayCash + '，微信:' + this.alreadyPayInfo.alreadyPayWX + ',支付宝:' + this.alreadyPayInfo.alreadyPayAli + '  是否暂停支付?')
+            this.$confirm('是否确定取消支付?')
                 .then(function () {
                     done()
                 })
@@ -742,14 +703,6 @@ export default {
         },
         // 结算
         submitSettlement() {
-            // if (this.payFrom.payType == '2' && this.payFrom.isInstalment == 'N' && this.payFrom.thisPayMoney < this.orderNeedPayAmount) {
-            //     this.$message.error('支付金额小于需支付金额')
-            //     return
-            // }
-            // if (this.payFrom.payType == '2' && this.payFrom.isInstalment == 'N' && this.payFrom.thisPayMoney > this.orderNeedPayAmount) {
-            //     this.$message.error('支付金额大于需支付金额')
-            //     return
-            // }
             const orderRechargePayDTO = {
                 orderNo: this.orderNo,
                 appUserId: this.appUserInfo.id,
@@ -813,8 +766,6 @@ export default {
                         spinner: 'el-icon-loading',
                         background: 'rgba(0, 0, 0, 0.7)'
                     })
-                    // if (this.orderNo == null) {
-                    //     // 首次支付
                     addOrder(orderRechargePayDTO).then(
                         (response) => {
                             loading.close()
@@ -826,74 +777,17 @@ export default {
                                 }, 4000)
                             }
                             if (response.data.payResult == 200) {
-                                // this.$refs.payStatusPopup.open(5, response.data)
-                                // var intervalId = setInterval(() => {
-                                //     this.intervalCheckOrderStatus(intervalId, this.orderNo)
-                                // }, 4000)
                                 this.$refs.payStatusPopup.open(1, response.data)
                                 this.checkIsAllPay(this.orderNo)
                             }
                             if (response.data.payResult == 101 || response.data.payResult == 0) {
                                 this.$refs.payStatusPopup.open(4, response.data)
                             }
-                            //         // 第三方支付
-                            //         if (this.payFrom.payType == '0' || this.payFrom.payType == '1' || (this.payFrom.payType == '9' && this.payFrom.otherPayAmount)) {
-                            //             this.isPaying = true
-                            //             var intervalId = setInterval(() => {
-                            //                 this.intervalCheckOrderStatus(intervalId, this.orderNo)
-                            //             }, 4000)
-                            //         } else {
-                            //             this.checkIsAllPay(this.orderNo)
-                            //         }
-                            //         if (orderRechargePayDTO.isInstalment == 'Y') {
-                            //             this.$confirm('本次支付完成，是否继续支付')
-                            //                 .then(() => {
-                            //                     this.alreadyPayTotal = this.alreadyPayTotal + parseFloat(this.payFrom.thisPayMoney)
-                            //                     this.saveAlreadyPayAmount()
-                            //                 })
-                            //                 .catch(() => {
-                            //                     this.openRecharge = false
-                            //                     this.orderNo = null
-                            //                     this.$modal.msgWarning('确定关闭本次充值吗？关闭后如需完成支付请前往订单管理继续支付')
-                            //                 })
-                            //         }
                         },
                         (err) => {
                             loading.close()
                         }
                     )
-                    // } else {
-                    //     // 多次支付
-                    //     morePay(orderRechargePayDTO).then((response) => {
-                    //         loading.close()
-                    //         if (response.data.payResult != 200) {
-                    //             this.$message.error(response.data.payMsg)
-                    //             return
-                    //         }
-                    //         if (this.payFrom.payType == '0' || this.payFrom.payType == '1') {
-                    //             //第三方支付
-                    //             console.log('第三方支付')
-                    //             this.isPaying = true
-                    //             var intervalId = setInterval(() => {
-                    //                 this.intervalCheckOrderStatus(intervalId, response.data.orderNo)
-                    //             }, 4000)
-                    //         } else {
-                    //             this.checkIsAllPay(this.orderNo)
-                    //         }
-                    //         if (orderRechargePayDTO.isInstalment == 'Y') {
-                    //             this.$confirm('本次支付完成，是否继续支付')
-                    //                 .then(() => {
-                    //                     this.alreadyPayTotal = this.alreadyPayTotal + parseFloat(this.payFrom.thisPayMoney)
-                    //                     this.saveAlreadyPayAmount()
-                    //                 })
-                    //                 .catch(() => {
-                    //                     this.openRecharge = false
-                    //                     this.orderNo = null
-                    //                     this.$modal.msgWarning('确定关闭本次充值吗？关闭后如需完成支付请前往订单管理继续支付')
-                    //                 })
-                    //         }
-                    //     })
-                    // }
                 })
                 .catch(() => {})
         },
@@ -903,33 +797,13 @@ export default {
                     if (response.data.payResult == '100') {
                         return
                     }
-                    // this.isPaying = false
                     if (response.data.payResult == 101 || response.data.payResult == 0) {
-                        //已取消
-                        // this.$notify.error({
-                        //     title: '支付失败',
-                        //     message: '支付超时或客户已取消支付'
-                        // })
                         this.$refs.payStatusPopup.open(4, response.data)
                         clearInterval(intervalId)
                         return
                     }
-                    // if (response.data.payResult == 200) {
                     this.$refs.payStatusPopup.open(1, response.data)
                     this.checkIsAllPay(this.orderNo)
-                    // clearInterval(intervalId)
-                    // return
-                    // }
-                    // if (response.data.payResult == 101 || res.data.payResult == 0) {
-                    //     this.$refs.payStatusPopup.open(4, response.data)
-                    // }
-                    // this.$notify({
-                    //     title: '支付成功',
-                    //     message: '客户已成功支付订单',
-                    //     type: 'success'
-                    // })
-                    // this.openRecharge = false
-                    // this.searchUser()
                     clearInterval(intervalId)
                 })
                 .catch((e) => {
@@ -937,14 +811,9 @@ export default {
                 })
         },
         checkIsAllPay(orderNo) {
-            // getOrderIsAllPayByOrderNo({ orderNo: orderNo }).then((response) => {
-            //     if (response.data == true) {
-            // this.$modal.msgSuccess('支付成功')
             this.openRecharge = false
             this.openWelfareRecharge = false
             this.searchUser()
-            // }
-            // })
         },
         // 保存临时的  支付金额 用于取消支付提示信息
         saveAlreadyPayAmount() {
@@ -1039,8 +908,220 @@ export default {
         handleDelete(row) {
             this.alreadySelectCouponList = this.alreadySelectCouponList.filter((item) => item.id != row.id)
             this.$forceUpdate()
+        },
+        // 选择支付方式
+        selectPaymentMethod(type) {
+            this.payFrom.payType = type
+            this.payFrom.wxBarcode = ''
+
+            // 现金支付时，直接设置支付金额为应付金额
+            if (type === '2') {
+                this.payFrom.cashPayAmount = this.getOrderNeedAmount
+                this.payFrom.otherPayAmount = 0
+            } else {
+                this.payFrom.cashPayAmount = ''
+                this.payFrom.otherPayAmount = ''
+            }
+        },
+
+        // 选择快捷金额
+        selectQuickAmount(amount) {
+            // 确保快捷金额不超过应付金额
+            if (Number(amount) > Number(this.getOrderNeedAmount)) {
+                this.payFrom.cashPayAmount = this.getOrderNeedAmount
+            } else {
+                this.payFrom.cashPayAmount = amount
+            }
+            // 计算电子支付金额
+            this.payFrom.otherPayAmount = Math.round((Number(this.getOrderNeedAmount) - Number(this.payFrom.cashPayAmount)) * 100) / 100
         }
     }
 }
 </script>
-<style></style>
+<style lang="scss" scoped>
+.cashier-dialog {
+    :deep(.el-dialog__body) {
+        padding: 0;
+    }
+
+    .order-info {
+        background: #f8f9fb;
+        padding: 24px;
+
+        .amount-section {
+            text-align: center;
+            margin-bottom: 24px;
+            padding-bottom: 24px;
+            border-bottom: 1px solid #ebeef5;
+
+            .total-amount {
+                margin-bottom: 16px;
+
+                .label {
+                    font-size: 16px;
+                    color: #606266;
+                    margin-right: 8px;
+                }
+
+                .value {
+                    font-size: 32px;
+                    font-weight: bold;
+                    color: #f56c6c;
+                }
+            }
+
+            .detail-list {
+                display: flex;
+                justify-content: center;
+                flex-wrap: wrap;
+                gap: 24px;
+
+                .detail-item {
+                    .label {
+                        color: #909399;
+                    }
+
+                    .value {
+                        color: #606266;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+
+        .payment-section {
+            .section-title {
+                font-size: 16px;
+                font-weight: 500;
+                margin-bottom: 16px;
+            }
+
+            .payment-methods {
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 16px;
+                margin-bottom: 24px;
+
+                .payment-method {
+                    height: 80px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 8px;
+                    border: 1px solid #dcdfe6;
+                    border-radius: 4px;
+                    cursor: pointer;
+                    transition: all 0.3s;
+
+                    i {
+                        font-size: 24px;
+                        color: #909399;
+                    }
+
+                    &:hover {
+                        border-color: #409eff;
+                    }
+
+                    &.is-active {
+                        border-color: #409eff;
+                        background: #ecf5ff;
+
+                        i,
+                        span {
+                            color: #409eff;
+                        }
+                    }
+                }
+            }
+
+            .payment-input {
+                margin-bottom: 24px;
+
+                .input-group {
+                    display: grid;
+                    grid-template-columns: repeat(2, 1fr);
+                    gap: 16px;
+
+                    .input-item {
+                        .label {
+                            display: block;
+                            margin-bottom: 8px;
+                            color: #606266;
+                        }
+
+                        .readonly-value {
+                            height: 40px;
+                            line-height: 40px;
+                            padding: 0 16px;
+                            background: #f5f7fa;
+                            border: 1px solid #dcdfe6;
+                            border-radius: 4px;
+                            color: #606266;
+                            font-weight: bold;
+                        }
+                    }
+                }
+            }
+
+            .scan-input {
+                margin-top: 16px;
+            }
+        }
+    }
+
+    .quick-amount {
+        padding: 24px 0;
+
+        .section-title {
+            font-size: 14px;
+            color: #606266;
+            margin-bottom: 16px;
+        }
+
+        .amount-buttons {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 16px;
+
+            .amount-btn {
+                height: 40px;
+
+                &.is-active {
+                    color: #409eff;
+                    border-color: #409eff;
+                    background: #ecf5ff;
+                }
+            }
+        }
+    }
+
+    .dialog-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 16px 24px;
+        background: #f8f9fb;
+        border-top: 1px solid #ebeef5;
+
+        .payment-summary {
+            .label {
+                font-size: 16px;
+                color: #606266;
+                margin-right: 8px;
+            }
+
+            .amount {
+                font-size: 24px;
+                font-weight: bold;
+                color: #f56c6c;
+            }
+        }
+
+        .el-button {
+            width: 160px;
+            height: 48px;
+        }
+    }
+}
+</style>