diff --git a/src/components/charge/OrderDetail.vue b/src/components/charge/OrderDetail.vue
new file mode 100644
index 0000000..af87f6a
--- /dev/null
+++ b/src/components/charge/OrderDetail.vue
@@ -0,0 +1,388 @@
+<template>
+  <Mask :width="1000" :height="560" :is-show="show" @close="show = false" title="订单详情">
+    <div class="container">
+      <div class="title">
+        <CloseBtn @click="show = false"></CloseBtn>
+      </div>
+      <div class="content">
+        <div class="left">
+          <div class="goods-detail">
+            <div class="title">药品详情</div>
+          <el-table border  :header-cell-style="{ backgroundColor: '#f5f7fa' }"  :data="orderInfo.goodsDetail" style="height: 100%">
+            <el-table-column label="商品" prop="name"  width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="单价"  width="100"  show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.preUnitPrice }}元
+              </template>
+            </el-table-column >
+            <el-table-column label="实价" width="100" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.unitPrice }}元
+              </template>
+            </el-table-column>
+            <el-table-column label="小计" width="100" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.subTotalPrice }}元
+              </template>
+            </el-table-column>
+            <el-table-column label="追溯码"  show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.traceabilityCode?.length ==2 ?"未绑定追溯码":scope.row.traceabilityCode}}
+              </template>
+            </el-table-column>
+          </el-table>
+          </div>
+          <div class="service-detail">
+          <div class="title">服务详情</div>
+          <el-table border  :header-cell-style="{ backgroundColor: '#f5f7fa' }" :data="orderInfo.serviceDetail" style="height: 100%">
+            <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
+            <el-table-column label="单价" width="100" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.preUnitPrice }}元
+              </template>
+            </el-table-column >
+            <el-table-column label="实价" width="100" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.unitPrice }}元
+              </template>
+            </el-table-column>
+            <el-table-column label="小计" width="100" show-overflow-tooltip>
+              <template #default="scope">
+                {{ scope.row.subTotalPrice }}元
+              </template>
+            </el-table-column>
+            <el-table-column label="追溯码"  show-overflow-tooltip>
+              <template #default="scope">
+                -
+              </template>
+            </el-table-column>
+          </el-table>
+          </div>
+        </div>
+        <div class="right">
+          <div class="right_head">
+            <div class="title">支付信息</div>
+            <div class="info">
+              <div class="item">
+                <div class="label">开单时间</div>
+                <div class="value">{{formatDate(orderInfo.createDatetime)}}</div>
+              </div>
+              <div class="item">
+                <div class="label">完成时间</div>
+                <div class="value">{{ formatDate(orderInfo.payTime)}}</div>
+              </div>
+              <div class="item">
+                <div class="label">收费员</div>
+                <div class="value">{{ orderInfo.salePersonName }}</div>
+              </div>
+              <div class="item">
+                <div class="label">药师</div>
+                <div class="value">{{ orderInfo.dockerName}}</div>
+              </div>
+              <div class="item">
+                <div class="label">销售人</div>
+                <div class="value">{{ orderInfo.salePersonName }}</div>
+              </div>
+              <div class="item">
+                <div class="label">原价</div>
+                <div class="value">￥{{ orderInfo.preTotalPrice }}</div>
+              </div>
+              <div class="item">
+                <div class="label">优惠</div>
+                <div class="value">￥{{ (orderInfo.preTotalPrice-orderInfo.totalPrice).toFixed(2)}}</div>
+              </div>
+              <div class="item">
+                <div class="label">应收</div>
+                <div class="value">￥{{ orderInfo.totalPrice }}</div>
+              </div>
+              <div class="item">
+                <div class="label">实收</div>
+                <div class="value">￥{{ orderInfo.totalPrice }}</div>
+              </div>
+              <div class="item">
+                <div class="label">支付方式</div>
+                <div class="value">{{ orderInfo.orderId }}</div>
+              </div>
+              <div class="item">
+                <div class="label">零售备注</div>
+                <div class="value">{{ orderInfo.orderId }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="right_body">
+            <div class="label">发票状态</div>
+            <div class="value">未开票</div>
+          </div>
+          <div class="right_foot">
+            <div class="label">
+              <div class="pay">收-{{ orderInfo.payType ? getPayTypeStr(orderInfo.payType) : "" }}</div>
+              <div class="name">{{ orderInfo.salePersonName }}</div>
+              <div>备注：-</div>
+            </div>
+            <div class="value">￥{{orderInfo.totalPrice}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+<!--       <el-button type="primary" plain>追溯码</el-button>-->
+      <div>
+<!--        <el-button type="danger" plain @click="cancel" v-if="orderInfo.status == 0">取消</el-button>-->
+        <el-button type="danger" plain @click="refund" v-if="orderInfo.status == 1">退款</el-button>
+        <el-button type="primary" @click="print" v-if="orderInfo.status == 1">
+          打印<el-icon class="el-icon--right"><Upload /></el-icon>
+        </el-button>
+      </div>
+      </div>
+    </div>
+  </Mask>
+
+</template>
+<script setup lang="ts">
+import {onMounted, onUnmounted, ref} from "vue";
+import Mask from "@/components/common/Mask.vue";
+import CloseBtn from "@/components/CloseBtn.vue";
+import {Upload} from "@element-plus/icons-vue";
+import {post} from "@/utils/request.ts";
+import {useWsStore} from "@/stores/wsStore.ts";
+import type {Request, Response} from "@/utils/ws.ts";
+import {ElMessage} from "element-plus";
+import {medTypeJson} from "@/assets/config/constants.ts";
+
+const show = ref<boolean>(false);
+const orderInfo = ref<any>({});
+
+const init = (code: any) => {
+  show.value = true;
+  post("charge/getByCode", {code: code}).then((res: any)=>{
+    orderInfo.value = res;
+  })
+
+}
+//修改时间格式化
+const formatDate = (isoStr: any) => {
+  if (!isoStr) {
+    return ""
+  }
+  const date = new Date(isoStr);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+}
+const payTypeObj = {
+  0: "微信",
+  1: "支付宝",
+  2: "现金",
+  3: "医保"
+}
+type PayTypeKey = 0 | 1 | 2 | 3;
+const emit = defineEmits(['updateOrderList'])
+
+const getPayTypeStr = (payType: number): string => {
+  if (Object.keys(payTypeObj).includes(String(payType))) {
+    return payTypeObj[payType as PayTypeKey] || "未知";
+  }
+  return "未知";
+};
+const close = () => {
+  show.value = false;
+  emit('updateOrderList')
+}
+defineExpose({init})
+const refund = () => {
+  console.log(orderInfo.value)
+  post("retail/refund",{orderId:orderInfo.value.id}).then((res:any)=>{
+    close()
+  })
+}
+const cancel = () => {
+  post("retail/cancelOrder",{orderId:orderInfo.value.id}).then((res:any)=>{
+    close()
+  })
+
+}
+const wsStore = useWsStore();
+// 定义 medType 的合法键类型
+type MedTypeKey = keyof typeof medTypeJson;
+
+const print = () => {
+  if (!orderInfo.value.code){
+    return
+  }
+  let code = orderInfo.value.code;
+  
+  const printConfig = {} as any;
+  post("common/config/getPrintConfig").then((res:any)=>{
+    printConfig.printName=res.printName
+    printConfig.pageType=res.pageType
+    if (!printConfig.printName || !printConfig.pageType){
+      ElMessage.error("打印机未设置，请先到设置-打印管理中设置")
+      return;
+    }
+    post("charge/getPrintInfoByCode", {code}).then((res: any) => {
+      res.printerName = printConfig.printName
+      res.pageType = printConfig.pageType
+      if (res.chargeSocialPayLog){
+        res.chargeSocialPayLog.medTypeStr = medTypeJson[res.chargeSocialPayLog.medType as MedTypeKey];
+      }
+      console.log(res)
+      wsStore.sendMessage({
+        type: "PrintReceipt",
+        config: null,
+        data: res
+      })
+    })
+
+  })
+}
+
+
+let request: Request = {
+  type: "getPrintList",
+  config: null,
+  data: null
+}
+wsStore.sendMessage(request);
+const reciceMessage = (response: Response) => {
+}
+onMounted(async () => {
+  wsStore.setMessageCallback(reciceMessage)
+})
+onUnmounted(() => {
+  wsStore.removeAllMessageCallback()
+})
+
+</script>
+<style scoped lang="scss">
+@use "@/assets/scss/base";
+:deep(.el-scrollbar__view){
+  height: 100%;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding:0 24px;
+
+  .title {
+    height: 35px;
+  }
+  .content {
+    flex: 1;
+    display: flex;
+    .left {
+      flex: 2;
+      height: 100%;
+      margin-right: 10px;
+      min-height: 0;
+      .goods-detail{
+
+        height: 40%;
+        .title{
+          font-weight: bold;
+        }
+      }
+      .service-detail{
+        height: 40%;
+        margin-top: 50px;
+        .title{
+          font-weight: bold;
+        }
+      }
+    }
+
+    .right {
+      min-width: 100px;
+      height: 100%;
+      flex: 1;
+      min-height: 0;
+      border: solid 1px #e6e6e6;
+      display: flex;
+      flex-direction: column;
+      .right_head {
+        padding: 10px;
+
+        .title {
+          font-size: 12px;
+          font-weight: 600;
+          height: 25px;
+        }
+
+        .info {
+          font-size: 12px;
+          font-weight: 400;
+          color: #999ca1;
+
+          .item {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .value {
+              color: #000;
+            }
+          }
+        }
+      }
+
+      .right_body {
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        height: 30px;
+        color: #999ca1;
+        border-top: 1px solid #e6e6e6;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .value {
+          color: base.$warning-color;
+        }
+      }
+      .right_foot {
+        flex: 1;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #999ca1;
+        border-top: 1px solid #e6e6e6;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .label {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          height: 100%;
+          .pay{
+            color: #000;
+          }
+          .name{
+            margin: 5px 0;
+          }
+        }
+        .value {
+          color: #000;
+        }
+      }
+    }
+  }
+  .footer {
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 15px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
index 6258f7f..464bd09 100644
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@@ -171,7 +171,7 @@ import Mask from "@/components/common/Mask.vue";
 import Grant from "@/components/member/memberProfile/Grant.vue";
 import Exchange from "@/components/member/memberProfile/Exchange.vue";
 import FlowingWater from "@/components/member/memberProfile/FlowingWater.vue";
-import OrderDetail from "@/components/retail/OrderDetail.vue";
+import OrderDetail from "@/components/charge/OrderDetail.vue";
 import VipEdit from "@/components/member/memberProfile/VipEdit.vue";
 import VipLevelEdit from "@/components/member/memberProfile/VipLevelEdit.vue";
 import Panel from "@/components/common/Panel.vue";
@@ -331,13 +331,14 @@ const statusObj = {
   3: "已退款"
 }
 const payTypeObj = {
-  0: "微信",
-  1: "支付宝",
-  2: "现金",
-  3: "医保"
+  1: "医保",
+  2: "微信",
+  3: "支付宝",
+  4: "现金",
+  5: "其他"
 }
 type StatusKey = 0 | 1 | 2 | 3;
-type PayTypeKey = 0 | 1 | 2 | 3;
+type PayTypeKey = 1 | 2 | 3 | 4 | 5;
 //修改时间格式化
 const formatDate = (isoStr: any) => {
   const date = new Date(isoStr);
@@ -604,10 +605,12 @@ const certTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => (
       display: flex;
       flex-direction: column;
       min-height: 0;
+
       .list {
         flex: 1;
         min-height: 0;
       }
+
       .bottom {
         width: 100%;
         height: 60px;