diff --git a/buyer/src/api/member.js b/buyer/src/api/member.js
index eeb7de21..28a6880f 100644
--- a/buyer/src/api/member.js
+++ b/buyer/src/api/member.js
@@ -180,6 +180,15 @@ export function receiptList () {
   });
 }
 
+// 发票详情
+export function receiptDetail (id) {
+  return request({
+    url: `/buyer/trade/receipt/${id}`,
+    method: Method.GET,
+    needToken: true
+  });
+}
+
 // 保存发票信息
 export function saveReceipt (params) {
   return request({
diff --git a/buyer/src/components/invoiceModal/index.vue b/buyer/src/components/invoiceModal/index.vue
index 2b5c0588..698b7bd1 100644
--- a/buyer/src/components/invoiceModal/index.vue
+++ b/buyer/src/components/invoiceModal/index.vue
@@ -1,39 +1,83 @@
 <template>
   <div class="invoice-modal">
-    <Modal v-model="invoiceAvailable" width="600" footer-hide>
+    <Modal v-model="invoiceAvailable" width="640" footer-hide>
       <p slot="header">
         <span>发票信息</span>
       </p>
-      <!-- 普通发票 -->
       <div class="nav-content">
-        <Form :model="invoiceForm" ref="form" label-position="left" :rules="ruleInline" :label-width="110">
+        <Form :model="invoiceForm" ref="form" label-position="left" :rules="formRules" :label-width="118">
           <FormItem label="发票类型">
-            <RadioGroup v-model="invoice" type="button" button-style="solid">
-              <Radio @on-change="changeInvoice" :label="1">电子普通发票</Radio>
-              <Radio :label="2" :disabled="true">增值税专用发票</Radio>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label="发票抬头">
-            <RadioGroup v-model="type" @on-change="changeInvoice" type="button" button-style="solid">
-              <Radio :label="1">个人</Radio>
-              <Radio :label="2">单位</Radio>
-            </RadioGroup>
-          </FormItem>
-          <FormItem label="个人名称" v-if="type === 1" prop="receiptTitle">
-            <i-input v-model="invoiceForm.receiptTitle"></i-input>
-          </FormItem>
-          <FormItem label="单位名称" v-if="type === 2" prop="receiptTitle">
-            <i-input v-model="invoiceForm.receiptTitle"></i-input>
-          </FormItem>
-          <FormItem label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
-            <i-input v-model="invoiceForm.taxpayerId"></i-input>
-          </FormItem>
-          <FormItem label="发票内容">
-            <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
-              <Radio label="商品明细">商品明细</Radio>
-              <Radio label="商品类别">商品类别</Radio>
+            <RadioGroup v-model="invoice" type="button" button-style="solid" @on-change="onInvoiceKindChange">
+              <Radio :label="1">电子普通发票</Radio>
+              <Radio :label="2">增值税专用发票</Radio>
             </RadioGroup>
           </FormItem>
+
+          <!-- 电子普通发票 -->
+          <div v-if="invoice === 1" key="invoice-normal">
+            <FormItem label="发票抬头">
+              <RadioGroup v-model="type" type="button" button-style="solid" @on-change="onHeaderTypeChange">
+                <Radio :label="1">个人</Radio>
+                <Radio :label="2">单位</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem :label="type === 1 ? '个人名称' : '单位名称'" :prop="type === 1 ? 'personalName' : 'companyName'">
+              <i-input v-if="type === 1" v-model="invoiceForm.personalName"></i-input>
+              <i-input v-else v-model="invoiceForm.companyName"></i-input>
+            </FormItem>
+
+            <FormItem label="纳税人识别号" v-if="type === 2" prop="taxpayerId">
+              <i-input v-model="invoiceForm.taxpayerId"></i-input>
+            </FormItem>
+            <FormItem label="发票内容">
+              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <Radio label="商品明细">商品明细</Radio>
+                <Radio label="商品类别">商品类别</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem label="收票人手机" prop="receiptPhone">
+              <i-input v-model="invoiceForm.receiptPhone"></i-input>
+            </FormItem>
+            <FormItem label="收票人邮箱" prop="receiptEmail">
+              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
+            </FormItem>
+          </div>
+
+          <!-- 增值税专用发票（固定为单位） -->
+          <div v-else key="invoice-vat">
+            <FormItem label="发票抬头">
+              <span class="inv-title-fixed">单位</span>
+            </FormItem>
+            <FormItem label="单位名称" prop="companyName">
+              <i-input v-model="invoiceForm.companyName" placeholder="与营业执照一致"></i-input>
+            </FormItem>
+            <FormItem label="纳税人识别号" prop="taxpayerId">
+              <i-input v-model="invoiceForm.taxpayerId"></i-input>
+            </FormItem>
+            <FormItem label="单位地址" prop="companyAddress">
+              <i-input v-model="invoiceForm.companyAddress" placeholder="注册地址"></i-input>
+            </FormItem>
+            <FormItem label="单位电话" prop="companyPhone">
+              <i-input v-model="invoiceForm.companyPhone" placeholder="固话或手机"></i-input>
+            </FormItem>
+            <FormItem label="开户银行" prop="bankName">
+              <i-input v-model="invoiceForm.bankName"></i-input>
+            </FormItem>
+            <FormItem label="银行账号" prop="bankAccount">
+              <i-input v-model="invoiceForm.bankAccount"></i-input>
+            </FormItem>
+            <FormItem label="发票内容">
+              <RadioGroup v-model="invoiceForm.receiptContent" type="button" button-style="solid">
+                <Radio label="商品明细">商品明细</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem label="收票人手机" prop="receiptPhone">
+              <i-input v-model="invoiceForm.receiptPhone"></i-input>
+            </FormItem>
+            <FormItem label="收票人邮箱" prop="receiptEmail">
+              <i-input v-model="invoiceForm.receiptEmail" placeholder="可选"></i-input>
+            </FormItem>
+          </div>
         </Form>
         <div style="text-align: center">
           <Button type="primary" :loading="loading" @click="submit">保存发票信息</Button>
@@ -45,106 +89,209 @@
 </template>
 <script>
 import { receiptSelect } from '@/api/cart.js';
-import { TINumber } from '@/plugins/RegExp.js';
+import { mobile, email } from '@/plugins/RegExp.js';
+
 export default {
   name: 'invoiceModal',
   data () {
     return {
-      invoice: 1, // 发票类型
-      invoiceAvailable: false, // 模态框显隐
-      loading: false, // 提交状态
+      invoice: 1, // 1 电子普通发票 2 增值税专用发票
+      invoiceAvailable: false,
+      loading: false,
       invoiceForm: {
-        // 普票表单
-        receiptTitle: '', // 发票抬头
-        taxpayerId: '', // 纳税人识别号
-        receiptContent: '商品明细' // 发票内容
+        receiptTitle: '',
+        personalName: '',
+        companyName: '',
+        taxpayerId: '',
+        receiptContent: '商品明细',
+        receiptPhone: '',
+        receiptEmail: '',
+        companyAddress: '',
+        companyPhone: '',
+        bankName: '',
+        bankAccount: ''
       },
-      type: 1, // 1 个人 2 单位
-      ruleInline: {
-        taxpayerId: [
-          { required: true, message: '请填写纳税人识别号' },
-          { pattern: TINumber, message: '请填写正确的纳税人识别号' }
-        ]
-      }
+      type: 1
     };
   },
   props: ['invoiceData'],
+  computed: {
+    formRules () {
+      const receiptPhoneRules = [
+        { required: true, message: '请填写收票人手机', trigger: 'blur' },
+        { pattern: mobile, message: '请填写正确的手机号码', trigger: 'blur' }
+      ];
+      // 收票人邮箱可选：仅校验格式；提示文案须与手机区分，避免误用「请填写收票人手机」
+      const receiptEmailRules = [
+        {
+          validator (rule, val, cb) {
+            const s = val != null ? String(val).trim() : '';
+            if (!s) {
+              cb();
+              return;
+            }
+            if (!email.test(s)) {
+              cb(new Error('请填写正确的收票人邮箱'));
+              return;
+            }
+            cb();
+          },
+          trigger: 'blur'
+        }
+      ];
+
+      if (this.invoice === 2) {
+        return {
+          companyName: [{ required: true, message: '请填写单位名称', trigger: 'blur' }],
+          taxpayerId: [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }],
+          companyAddress: [{ required: true, message: '请填写单位地址', trigger: 'blur' }],
+          companyPhone: [{ required: true, message: '请填写单位电话', trigger: 'blur' }],
+          bankName: [{ required: true, message: '请填写开户银行', trigger: 'blur' }],
+          bankAccount: [{ required: true, message: '请填写银行账号', trigger: 'blur' }],
+          receiptPhone: receiptPhoneRules,
+          receiptEmail: receiptEmailRules
+        };
+      }
+
+      const rules = {
+        receiptPhone: receiptPhoneRules,
+        receiptEmail: receiptEmailRules
+      };
+      if (this.type === 1) {
+        rules.personalName = [{ required: true, message: '请填写个人名称', trigger: 'blur' }];
+      } else {
+        rules.companyName = [{ required: true, message: '请填写单位名称', trigger: 'blur' }];
+        rules.taxpayerId = [{ required: true, message: '请填写纳税人识别号', trigger: 'blur' }];
+      }
+      return rules;
+    }
+  },
   watch: {
-    // 回显的发票信息
     invoiceData: {
       handler (val) {
-        this.invoiceForm = { ...val };
+        if (!val) return;
+        this.invoiceForm = { ...this.invoiceForm, ...val };
+        if (!this.invoiceForm.receiptPhone) this.invoiceForm.receiptPhone = '';
+        if (!this.invoiceForm.receiptEmail) this.invoiceForm.receiptEmail = '';
+        if (!this.invoiceForm.receiptContent) this.invoiceForm.receiptContent = '商品明细';
+        if (!this.invoiceForm.companyAddress) this.invoiceForm.companyAddress = '';
+        if (!this.invoiceForm.companyPhone) this.invoiceForm.companyPhone = '';
+        if (!this.invoiceForm.bankName) this.invoiceForm.bankName = '';
+        if (!this.invoiceForm.bankAccount) this.invoiceForm.bankAccount = '';
+        if (!this.invoiceForm.personalName) this.invoiceForm.personalName = '';
+        if (!this.invoiceForm.companyName) this.invoiceForm.companyName = '';
 
-        if (val.taxpayerId) {
+        const rt = val.receiptType;
+        if (rt === 2 || rt === '2' || val.invoiceKind === 'VAT_SPECIAL') {
+          this.invoice = 2;
           this.type = 2;
         } else {
-          this.type = 1;
+          this.invoice = 1;
+          if (val.taxpayerId) this.type = 2;
+          else this.type = 1;
+        }
+        // 兼容后端 receiptTitle 存「个人/单位」，实际名称在 personalName/companyName；旧数据名称可能只在 receiptTitle
+        const titleAsName = (t) => (t && t !== '个人' && t !== '单位' ? t : '');
+        if (this.invoice === 2) {
+          this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
+        } else if (this.type === 2) {
+          this.invoiceForm.companyName = val.companyName || titleAsName(val.receiptTitle) || '';
+          this.invoiceForm.personalName = val.personalName || '';
+        } else {
+          this.invoiceForm.personalName = val.personalName || titleAsName(val.receiptTitle) || '';
+          this.invoiceForm.companyName = val.companyName || '';
+        }
+        if (this.invoice === 1) {
+          this.invoiceForm.companyAddress = '';
+          this.invoiceForm.companyPhone = '';
+          this.invoiceForm.bankName = '';
+          this.invoiceForm.bankAccount = '';
+        }
+        if (this.invoice === 2) {
+          this.invoiceForm.personalName = '';
         }
       },
       deep: true,
-      immeadite: true
+      immediate: true
     }
   },
   methods: {
-    /**
-     *  选择发票抬头
-     */
-    changeInvoice (val) {
+    onHeaderTypeChange (val) {
+      if (this.invoice === 1 && val === 1 && this.invoiceForm.personalName === '个人') {
+        this.invoiceForm.personalName = '';
+      }
       this.$nextTick(() => {
-        this.type = val;
+        if (this.$refs.form) this.$refs.form.clearValidate();
+      });
+    },
+    onInvoiceKindChange (val) {
+      this.type = val === 2 ? 2 : 1;
+      this.invoiceForm = {
+        receiptTitle: '',
+        personalName: '',
+        companyName: '',
+        taxpayerId: '',
+        receiptContent: '商品明细',
+        receiptPhone: '',
+        receiptEmail: '',
+        companyAddress: '',
+        companyPhone: '',
+        bankName: '',
+        bankAccount: ''
+      };
+      this.$nextTick(() => {
+        if (this.$refs.form) this.$refs.form.clearValidate();
       });
     },
 
-    /**
-     *  保存判断
-     */
-    save () {
-      let flage = true;
-
-      // 保存分为两种类型，个人以及企业
-      const { receiptTitle } = JSON.parse(
-        JSON.stringify(this.invoiceForm)
-      );
-      // 判断是否填写发票抬头
-      if (!receiptTitle) {
-        this.$Message.error('请填写发票抬头!');
-        flage = false;
-        return false;
+    async save () {
+      if (this.invoice === 2) {
+        this.invoiceForm.receiptContent = '商品明细';
       }
 
-      if (this.type === 2) {
-        this.$refs.form.validate((valid) => {
-          if (!valid) {
-            flage = false;
-          }
-        });
-      } else {
-        delete this.invoiceForm.taxpayerId;
-      }
-
-      return flage;
+      return await new Promise(resolve => {
+        this.$refs.form.validate(valid => resolve(valid));
+      });
     },
-    // 保存发票信息
-    async submit () {
-      if (this.save()) {
-        this.loading = true;
-        let submit = {
-          way: this.$route.query.way,
-          ...this.invoiceForm
-        };
-        let receipt = await receiptSelect(submit);
-        if (receipt.success) {
-          this.$emit('change', true);
-        }
 
-        this.loading = false;
+    async submit () {
+      if (!await this.save()) return;
+      this.loading = true;
+      const raw = JSON.parse(JSON.stringify(this.invoiceForm));
+      if (this.invoice === 1) {
+        delete raw.companyAddress;
+        delete raw.companyPhone;
+        delete raw.bankName;
+        delete raw.bankAccount;
+        delete raw.invoiceAddress;
+        if (this.type === 1) {
+          delete raw.taxpayerId;
+        }
+      } else {
+        delete raw.personalName;
       }
+      const isCompanyTitle = this.invoice === 2 || this.type === 2;
+      const titleName = isCompanyTitle
+        ? (raw.companyName != null ? String(raw.companyName).trim() : '')
+        : (raw.personalName != null ? String(raw.personalName).trim() : '');
+      const submit = {
+        way: this.$route.query.way,
+        ...raw,
+        receiptType: this.invoice,
+        receiptTitle: isCompanyTitle ? '单位' : '个人',
+        personalName: isCompanyTitle ? '' : titleName,
+        companyName: isCompanyTitle ? titleName : ''
+      };
+      let receipt = await receiptSelect(submit);
+      if (receipt.success) {
+        this.$emit('change', true);
+      }
+      this.loading = false;
     }
   }
 };
 </script>
 <style lang="scss" scoped>
-/** 普票 */
 .inv-type {
   text-align: center;
 }
@@ -158,7 +305,12 @@ export default {
 }
 
 .nav-content {
-  width: 500px;
+  width: 520px;
   margin: 10px auto;
 }
+
+.inv-title-fixed {
+  line-height: 32px;
+  color: #515a6e;
+}
 </style>
diff --git a/buyer/src/pages/home/orderCenter/OrderDetail.vue b/buyer/src/pages/home/orderCenter/OrderDetail.vue
index 9a795ac1..cafa529c 100644
--- a/buyer/src/pages/home/orderCenter/OrderDetail.vue
+++ b/buyer/src/pages/home/orderCenter/OrderDetail.vue
@@ -95,12 +95,43 @@
     </div>
     <div class="order-card" v-if="order.order.payStatus === 'PAID'">
       <h3>发票信息</h3>
-      <template v-if="order.order.needReceipt && order.receipt">
-        <p>发票抬头：{{ order.receipt.receiptTitle }}</p>
-        <p>发票内容：{{ order.receipt.receiptContent }}</p>
+      <!-- 以 li_receipt 为准：needReceipt 可能为 null/false 导致有 receipt 仍显示「未开发票」 -->
+      <template v-if="hasValidReceipt()">
+        <p>发票类型：{{ formatReceiptType(order.receipt) }}</p>
+        <p>发票抬头：{{ formatReceiptHeaderType(order.receipt) }}</p>
+        <p v-if="isPersonalReceipt(order.receipt) && order.receipt.personalName">
+          个人名称：{{ order.receipt.personalName }}
+        </p>
+        <p v-if="order.receipt.companyName">
+          单位名称：{{ order.receipt.companyName }}
+        </p>
         <p v-if="order.receipt.taxpayerId">
           纳税人识别号：{{ order.receipt.taxpayerId }}
         </p>
+        <p v-if="order.receipt.companyAddress">
+          单位地址：{{ order.receipt.companyAddress }}
+        </p>
+        <p v-if="order.receipt.companyPhone">
+          单位电话：{{ order.receipt.companyPhone }}
+        </p>
+        <p v-if="order.receipt.bankName">
+          开户银行：{{ order.receipt.bankName }}
+        </p>
+        <p v-if="order.receipt.bankAccount">
+          银行账号：{{ order.receipt.bankAccount }}
+        </p>
+        <p>发票内容：{{ order.receipt.receiptContent }}</p>
+        <p v-if="order.receipt.receiptPhone">
+          收票人手机：{{ order.receipt.receiptPhone }}
+        </p>
+        <p v-if="order.receipt.receiptEmail">
+          收票人邮箱：{{ order.receipt.receiptEmail }}
+        </p>
+        <div v-if="Number(order.receipt.receiptStatus) === 1" class="receipt-action">
+          <Button size="small" type="primary" ghost @click="viewReceiptInvoice(order.receipt)">
+            查看发票
+          </Button>
+        </div>
       </template>
       <div v-else style="color: #999; margin-left: 5px">未开发票</div>
     </div>
@@ -307,7 +338,7 @@ import {
   cancelOrder,
   getPackage
 } from "@/api/order.js";
-import { afterSaleReason } from "@/api/member";
+import { afterSaleReason, receiptDetail } from "@/api/member";
 export default {
   name: "order-detail",
   data() {
@@ -328,6 +359,51 @@ export default {
     };
   },
   methods: {
+    isVatSpecialReceipt (receipt) {
+      if (!receipt) return false;
+      const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+      if (rt === "2" || rt === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL") {
+        return true;
+      }
+      return false;
+    },
+    isPersonalReceipt (receipt) {
+      return !this.isVatSpecialReceipt(receipt);
+    },
+    formatReceiptType (receipt) {
+      if (!receipt) return "";
+      const rt = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+      if (rt === "电子普通发票" || rt === "增值税专用发票") return rt;
+      return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
+    },
+    formatReceiptHeaderType (receipt) {
+      if (!receipt) return "";
+      if (this.isVatSpecialReceipt(receipt)) return "单位";
+      if (receipt.taxpayerId) return "单位";
+      return "个人";
+    },
+    hasValidReceipt () {
+      const receipt = this.order && this.order.receipt;
+      if (!receipt) return false;
+      const content = receipt.receiptContent ? String(receipt.receiptContent).trim() : '';
+      const title = receipt.receiptTitle ? String(receipt.receiptTitle).trim() : '';
+      const taxpayerId = receipt.taxpayerId ? String(receipt.taxpayerId).trim() : '';
+      // 后端有时会返回占位 receipt（如 receiptContent=不开发票），这里过滤掉
+      if (content === '不开发票') return false;
+      return Boolean(content || title || taxpayerId);
+    },
+    getInvoiceAddress (receipt) {
+      if (!receipt) return "";
+      return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
+    },
+    viewReceiptInvoice (receipt) {
+      const invoiceAddress = this.getInvoiceAddress(receipt);
+      if (!invoiceAddress) {
+        this.$Message.warning("暂无发票附件");
+        return;
+      }
+      window.open(invoiceAddress, "_blank");
+    },
     // 退款状态枚举
     refundPriceList(status) {
       switch (status) {
@@ -359,11 +435,21 @@ export default {
       });
       window.open(routeUrl.href, "_blank");
     },
-    getDetail() {
+    async getDetail() {
       // 获取订单详情
-      orderDetail(this.$route.query.sn).then((res) => {
+      orderDetail(this.$route.query.sn).then(async (res) => {
         if (res.success) {
           this.order = res.result;
+          const receiptId =
+            (res.result.order && res.result.order.receiptId) ||
+            res.result.receiptId ||
+            (res.result.receipt && res.result.receipt.id);
+          if (receiptId) {
+            const receiptRes = await receiptDetail(receiptId);
+            if (receiptRes && receiptRes.success && receiptRes.result) {
+              this.$set(this.order, "receipt", receiptRes.result);
+            }
+          }
           this.progressList = res.result.orderLogs;
           if (this.order.order.deliveryMethod === 'LOGISTICS') {
             this.getOrderPackage(this.order.order.sn);
@@ -625,6 +711,10 @@ table {
   overflow-x: auto;
 }
 
+.receipt-action {
+  margin-top: 12px;
+}
+
 .express-log {
   /*margin: 5px -10px 5px 5px;*/
   padding: 10px;
diff --git a/buyer/src/pages/payment/Pay.vue b/buyer/src/pages/payment/Pay.vue
index a9c3463b..019b5e67 100644
--- a/buyer/src/pages/payment/Pay.vue
+++ b/buyer/src/pages/payment/Pay.vue
@@ -157,8 +157,11 @@
             </span></span>
         </div>
         <div class="inovice-content">
-          <span>{{ invoiceData.receiptTitle }}</span>
-          <span>{{ invoiceData.receiptContent }}</span>
+          <template v-if="hasInvoiceInfo">
+            <span>{{ invoiceDisplayTitle }}</span>
+            <span>{{ invoiceData.receiptContent }}</span>
+          </template>
+          <span v-else>不开发票</span>
           <span @click="editInvoice">编辑</span>
         </div>
       </div>
@@ -258,6 +261,28 @@ import { canUseCouponList } from "@/api/member.js";
 export default {
   name: "Pay",
   components: { invoiceModal, addressManage },
+  computed: {
+    hasInvoiceInfo() {
+      const title =
+        this.invoiceData.personalName ||
+        this.invoiceData.companyName ||
+        this.invoiceData.receiptTitle;
+      const content = this.invoiceData.receiptContent;
+      if (content && String(content).trim() === "不开发票") return false;
+      return Boolean(
+        (title && String(title).trim()) ||
+        (content && String(content).trim())
+      );
+    },
+    invoiceDisplayTitle() {
+      return (
+        this.invoiceData.personalName ||
+        this.invoiceData.companyName ||
+        this.invoiceData.receiptTitle ||
+        ""
+      );
+    },
+  },
   data() {
     return {
       selectedStoreAddress: 'm',
@@ -270,8 +295,7 @@ export default {
       storeMoreAddr: false,
       invoiceData: {
         // 发票数据
-        receiptTitle: "个人",
-        receiptContent: "不开发票",
+        //receiptContent: "不开发票",
       },
       searchForm: {
         pageNumber: 1,
diff --git a/manager/src/views/sys/oss-manage/ossManage.vue b/manager/src/views/sys/oss-manage/ossManage.vue
index ec48b525..26def2b6 100644
--- a/manager/src/views/sys/oss-manage/ossManage.vue
+++ b/manager/src/views/sys/oss-manage/ossManage.vue
@@ -1,5 +1,6 @@
 <style lang="scss">
 @import "./ossManage.scss";
+
 .group-row {
   padding-top: 10px;
   border-top: 1px solid #ededed;
@@ -7,94 +8,111 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
   > * {
     margin-right: 10px;
   }
 }
+
 .article-category {
   flex: 2;
   min-width: 200px;
 }
+
 .table {
   flex: 11;
 }
+
 .ivu-card {
   width: 100%;
 }
+
 .modal-footer {
   text-align: center;
+
   > * {
     margin: 0 10px;
   }
 }
 
+.tab-empty {
+  padding: 48px 0;
+  color: #999;
+  text-align: center;
+}
+
+.tabs-card {
+  margin-bottom: 16px;
+}
+
 </style>
 <template>
   <div class="search">
+    <Card class="tabs-card">
+      <Tabs v-model="activeRoleTab" @on-click="handleRoleTabChange">
+        <TabPane label="管理员" name="MANAGER"></TabPane>
+        <TabPane label="商家" name="STORE"></TabPane>
+        <TabPane label="用户" name="MEMBER"></TabPane>
+        <TabPane label="客服" name="CUSTOMER"></TabPane>
+      </Tabs>
+    </Card>
     <Row>
       <Card>
-        <div class="operation">
-          <Row @keydown.enter.native="handleSearch">
-            <Form
-              ref="searchForm"
-              :label-width="85"
-              :model="searchForm"
-              class="search-form"
-              inline
-            >
-              <Form-item label="上传时间">
-                <DatePicker
-                  v-model="selectDate"
-                  clearable
-                  format="yyyy-MM-dd"
-                  placeholder="选择起始时间"
-                  style="width: 240px"
-                  type="daterange"
-                  @on-change="selectDateRange"
-                ></DatePicker>
-              </Form-item>
-              <Form-item label="上传人" prop="ownerName">
-                <Input
-                  type="text"
-                  v-model="searchForm.ownerName"
-                  placeholder="图片拥有者名称"
-                  clearable
-                  style="width: 240px"
-                />
-              </Form-item>
-              <Button
-                class="search-btn"
-                icon="ios-search"
-                type="primary"
-                @click="handleSearch"
-              >搜索
-              </Button>
-            </Form>
-          </Row>
-        </div></Card><Card><div>
+        <div>
+          <div class="operation">
+            <Row @keydown.enter.native="handleSearch">
+              <Form
+                ref="searchForm"
+                :label-width="85"
+                :model="searchForm"
+                class="search-form"
+                inline
+              >
+                <Form-item label="上传时间">
+                  <DatePicker
+                    v-model="selectDate"
+                    clearable
+                    format="yyyy-MM-dd"
+                    placeholder="选择起始时间"
+                    style="width: 240px"
+                    type="daterange"
+                    @on-change="selectDateRange"
+                  ></DatePicker>
+                </Form-item>
+                <Button
+                  class="search-btn"
+                  icon="ios-search"
+                  type="primary"
+                  @click="handleSearch"
+                >搜索
+                </Button>
+              </Form>
+            </Row>
+          </div>
           <Row class="oss-manage-box">
-            <Col :span="isComponent?5:4">
+            <Col v-if="canShowGroups" :span="isComponent?5:4">
               <div class="file-list">
                 <div class="article-category mr_10">
-                  <Tree :data="treeData" :render="renderContent" @on-select-change.self="handleCateChange" class="demo-tree-render"></Tree>
+                  <Tree :data="treeData" :render="renderContent" @on-select-change.self="handleCateChange"
+                        class="demo-tree-render"></Tree>
                   <div class="group-row flex" v-if="!isComponent">
                     <Button @click="handleClickAddGroup">添加分组</Button>
                   </div>
                 </div>
               </div>
             </Col>
-            <Col :span="isComponent?19:20">
+            <Col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
               <div class="pic-list">
                 <div>
                   <div class="oss-operation padding-row" style="display: flex;flex-direction: row-reverse;">
                     <div>
                       <Upload
+                        v-if="canUploadImages"
                         ref="up"
                         :action="commonUrl + '/common/common/upload/file'"
-                        :data="{
-                  directoryPath: searchForm.fileDirectoryId,
-                }"
+                        :data="uploadData"
                         :headers="accessToken"
+                        :before-upload="beforeUpload"
                         :max-size="20480"
                         :on-error="handleError"
                         :on-exceeded-size="handleMaxSize"
@@ -105,18 +123,7 @@
                       >
                         <Button>上传图片</Button>
                       </Upload>
-                      <Dropdown @on-click="handleDropdown" v-if="!isComponent">
-                        <Button>
-                          更多操作
-                          <Icon type="md-arrow-dropdown"/>
-                        </Button>
-                        <DropdownMenu slot="list">
-                          <DropdownItem name="refresh">刷新</DropdownItem>
-                          <DropdownItem v-show="showType == 'list'" name="removeAll"
-                          >批量删除
-                          </DropdownItem>
-                        </DropdownMenu>
-                      </Dropdown>
+                      <Button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</Button>
                     </div>
                   </div>
                 </div>
@@ -126,20 +133,33 @@
                       <div v-for="(item, index) in data" :key="index" class="img-item">
                         <Checkbox :label="item.id+','+item.url" class="check-box">
                           <template>
-                            <div class="card"  @mouseenter.active="onMouseOver(item, index)" @mouseleave.active="onMouseOut(item, index)">
+                            <div class="card" @mouseenter.active="onMouseOver(item, index)"
+                                 @mouseleave.active="onMouseOut(item, index)">
                               <!--<div class="custom-checkbox-card-mask"><div class="custom-checkbox-card-mask-dot"/></div>-->
-                              <img :src="item.url" alt="" />
+                              <img :src="item.url" alt=""/>
                               <div v-if="item.isShowPreview" class="preview">
-                                <div @click.prevent="download(item)"><Tooltip content="下载"><Icon type="md-cloud-download" size="18" /></Tooltip></div>
-                                <div @click.prevent="remove(item)"><Tooltip content="删除"><Icon type="md-trash" size="18" /></Tooltip></div>
-                                <div @click.prevent="showPic(item)"><Tooltip content="预览"><Icon type="ios-eye" size="22" /></Tooltip></div>
+                                <div @click.prevent="download(item)">
+                                  <Tooltip content="下载">
+                                    <Icon type="md-cloud-download" size="18"/>
+                                  </Tooltip>
+                                </div>
+                                <div @click.prevent="remove(item)">
+                                  <Tooltip content="删除">
+                                    <Icon type="md-trash" size="18"/>
+                                  </Tooltip>
+                                </div>
+                                <div @click.prevent="showPic(item)">
+                                  <Tooltip content="预览">
+                                    <Icon type="ios-eye" size="22"/>
+                                  </Tooltip>
+                                </div>
                               </div>
                             </div>
                           </template>
                         </Checkbox>
                         <div>
                           <Tooltip :content="item.name" placement="bottom">
-                            <div class="text">{{item.name}}</div>
+                            <div class="text">{{ item.name }}</div>
                           </Tooltip>
                         </div>
                       </div>
@@ -147,173 +167,172 @@
                   </CheckboxGroup>
                 </div>
                 <div class="page-box">
-                  <Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange" size="small" />
+                  <Page :total="total" :page-size="searchForm.pageSize" show-elevator @on-change="pageChange"
+                        size="small"/>
                 </div>
               </div>
             </Col>
           </Row>
 
 
-
-
           <!--<div class="oss-operation padding-row">-->
-            <!--<div>-->
-              <!--<Upload-->
-                <!--ref="up"-->
-                <!--:action="commonUrl + '/common/common/upload/file'"-->
-                <!--:data="{-->
-                  <!--directoryPath: searchForm.fileDirectoryId,-->
-                <!--}"-->
-                <!--:headers="accessToken"-->
-                <!--:max-size="20480"-->
-                <!--:on-error="handleError"-->
-                <!--:on-exceeded-size="handleMaxSize"-->
-                <!--:on-success="handleSuccess"-->
-                <!--:show-upload-list="false"-->
-                <!--multiple-->
-                <!--style="display: inline-block"-->
-              <!--&gt;-->
-                <!--<Button>上传图片</Button>-->
-              <!--</Upload>-->
-              <!--<Dropdown @on-click="handleDropdown" v-if="!isComponent">-->
-                <!--<Button>-->
-                  <!--更多操作-->
-                  <!--<Icon type="md-arrow-dropdown"/>-->
-                <!--</Button>-->
-                <!--<DropdownMenu slot="list">-->
-                  <!--<DropdownItem name="refresh">刷新</DropdownItem>-->
-                  <!--<DropdownItem v-show="showType == 'list'" name="removeAll"-->
-                  <!--&gt;批量删除-->
-                  <!--</DropdownItem>-->
-                <!--</DropdownMenu>-->
-              <!--</Dropdown>-->
-            <!--</div>-->
+          <!--<div>-->
+          <!--<Upload-->
+          <!--ref="up"-->
+          <!--:action="commonUrl + '/common/common/upload/file'"-->
+          <!--:data="{-->
+          <!--directoryPath: searchForm.fileDirectoryId,-->
+          <!--}"-->
+          <!--:headers="accessToken"-->
+          <!--:max-size="20480"-->
+          <!--:on-error="handleError"-->
+          <!--:on-exceeded-size="handleMaxSize"-->
+          <!--:on-success="handleSuccess"-->
+          <!--:show-upload-list="false"-->
+          <!--multiple-->
+          <!--style="display: inline-block"-->
+          <!--&gt;-->
+          <!--<Button>上传图片</Button>-->
+          <!--</Upload>-->
+          <!--<Dropdown @on-click="handleDropdown" v-if="!isComponent">-->
+          <!--<Button>-->
+          <!--更多操作-->
+          <!--<Icon type="md-arrow-dropdown"/>-->
+          <!--</Button>-->
+          <!--<DropdownMenu slot="list">-->
+          <!--<DropdownItem name="refresh">刷新</DropdownItem>-->
+          <!--<DropdownItem v-show="showType == 'list'" name="removeAll"-->
+          <!--&gt;批量删除-->
+          <!--</DropdownItem>-->
+          <!--</DropdownMenu>-->
+          <!--</Dropdown>-->
+          <!--</div>-->
           <!--</div>-->
         </div>
 
         <!--<Alert show-icon v-if="!isComponent">-->
-          <!--已选择-->
-          <!--<span>{{ selectCount }}</span> 项-->
-          <!--<a class="select-clear" @click="clearSelectAll">清空</a>-->
-          <!--<span v-if="selectCount > 0" style="margin-left: 15px"-->
-          <!--&gt;共计 {{ totalSize }} 存储量</span-->
-          <!--&gt;-->
+        <!--已选择-->
+        <!--<span>{{ selectCount }}</span> 项-->
+        <!--<a class="select-clear" @click="clearSelectAll">清空</a>-->
+        <!--<span v-if="selectCount > 0" style="margin-left: 15px"-->
+        <!--&gt;共计 {{ totalSize }} 存储量</span-->
+        <!--&gt;-->
         <!--</Alert>-->
 
         <!--<div v-show="showType === 'list'" >-->
-          <!--<div class="flex">-->
-            <!--<div class="article-category mr_10">-->
-              <!--<Tree-->
-                <!--:data="treeData"-->
-                <!--@on-contextmenu="handleContextMenu"-->
-                <!--@on-select-change="handleCateChange"-->
-              <!--&gt;-->
-                <!--<template slot="contextMenu" v-if="!isComponent">-->
-                  <!--<DropdownItem @click.native="handleContextMenuEdit"-->
-                  <!--&gt;编辑-->
-                  <!--</DropdownItem-->
-                  <!--&gt;-->
-                  <!--<DropdownItem-->
-                    <!--style="color: #ed4014"-->
-                    <!--@click.native="handleContextMenuDelete"-->
-                  <!--&gt;删除-->
-                  <!--</DropdownItem-->
-                  <!--&gt;-->
-                <!--</template>-->
-              <!--</Tree>-->
-              <!--<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>-->
-              <!--<div class="group-row flex" v-if="!isComponent">-->
-                <!--<Button @click="handleClickAddGroup">添加分组</Button>-->
-              <!--</div>-->
-            <!--</div>-->
+        <!--<div class="flex">-->
+        <!--<div class="article-category mr_10">-->
+        <!--<Tree-->
+        <!--:data="treeData"-->
+        <!--@on-contextmenu="handleContextMenu"-->
+        <!--@on-select-change="handleCateChange"-->
+        <!--&gt;-->
+        <!--<template slot="contextMenu" v-if="!isComponent">-->
+        <!--<DropdownItem @click.native="handleContextMenuEdit"-->
+        <!--&gt;编辑-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--<DropdownItem-->
+        <!--style="color: #ed4014"-->
+        <!--@click.native="handleContextMenuDelete"-->
+        <!--&gt;删除-->
+        <!--</DropdownItem-->
+        <!--&gt;-->
+        <!--</template>-->
+        <!--</Tree>-->
+        <!--<Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>-->
+        <!--<div class="group-row flex" v-if="!isComponent">-->
+        <!--<Button @click="handleClickAddGroup">添加分组</Button>-->
+        <!--</div>-->
+        <!--</div>-->
 
-            <!--<Table-->
-              <!--ref="table"-->
-              <!--:columns="isComponent ? viewColumns : columns"-->
-              <!--:data="data"-->
-              <!--:loading="loading"-->
-              <!--border-->
-              <!--class="table"-->
-              <!--sortable="custom"-->
-              <!--@on-sort-change="changeSort"-->
-              <!--@on-selection-change="changeSelect"-->
-            <!--&gt;-->
-              <!--<template slot="fileKey" slot-scope="{ row }">-->
-                <!--<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>-->
-              <!--</template>-->
-            <!--</Table>-->
-          <!--</div>-->
+        <!--<Table-->
+        <!--ref="table"-->
+        <!--:columns="isComponent ? viewColumns : columns"-->
+        <!--:data="data"-->
+        <!--:loading="loading"-->
+        <!--border-->
+        <!--class="table"-->
+        <!--sortable="custom"-->
+        <!--@on-sort-change="changeSort"-->
+        <!--@on-selection-change="changeSelect"-->
+        <!--&gt;-->
+        <!--<template slot="fileKey" slot-scope="{ row }">-->
+        <!--<a @click="copyFileUrl(row)">{{ row.fileKey }}</a>-->
+        <!--</template>-->
+        <!--</Table>-->
+        <!--</div>-->
         <!--</div>-->
 
         <!--<div v-show="showType === 'thumb'">-->
-          <!--<div class="oss-wrapper">-->
-            <!--<Card v-for="(item, i) in data" :key="i" class="oss-card">-->
-              <!--<div class="content">-->
-                <!--<img-->
-                  <!--v-if="item.fileType.indexOf('image') >= 0"-->
-                  <!--:src="item.url"-->
-                  <!--class="img"-->
-                  <!--@click="showPic(item)"-->
-                <!--/>-->
-                <!--<div-->
-                  <!--v-else-if="item.fileType.indexOf('video') >= 0"-->
-                  <!--class="video"-->
-                  <!--@click="showVideo(item)"-->
-                <!--&gt;-->
-                  <!--&lt;!&ndash; 文件小于5MB显示video &ndash;&gt;-->
-                  <!--<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">-->
-                    <!--<source :src="item.url"/>-->
-                  <!--</video>-->
-                  <!--<img class="play" src="@/assets/play.png"/>-->
-                <!--</div>-->
-                <!--<div v-else class="other">-->
-                  <!--<div class="name">{{ item.name }}</div>-->
-                  <!--<div class="key">{{ item.fileKey }}</div>-->
-                  <!--<div class="info">-->
-                    <!--文件类型：{{ item.fileType }} 文件大小：{{-->
-                      <!--((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)-->
-                    <!--}}-->
-                    <!--MB 创建时间：{{ item.createTime }}-->
-                  <!--</div>-->
-                <!--</div>-->
-                <!--<div class="actions">-->
-                  <!--<div class="btn">-->
-                    <!--<Tooltip content="下载" placement="top">-->
-                      <!--<Icon-->
-                        <!--size="16"-->
-                        <!--type="md-download"-->
-                        <!--@click="download(item)"-->
-                      <!--/>-->
-                    <!--</Tooltip>-->
-                  <!--</div>-->
-                  <!--<div class="btn">-->
-                    <!--<Tooltip content="重命名" placement="top">-->
-                      <!--<Icon size="16" type="md-create" @click="rename(item)"/>-->
-                    <!--</Tooltip>-->
-                  <!--</div>-->
-                  <!--<div class="btn-no">-->
-                    <!--<Tooltip content="删除" placement="top">-->
-                      <!--<Icon size="16" type="md-trash" @click="remove(item)"/>-->
-                    <!--</Tooltip>-->
-                  <!--</div>-->
-                <!--</div>-->
-              <!--</div>-->
-            <!--</Card>-->
-          <!--</div>-->
+        <!--<div class="oss-wrapper">-->
+        <!--<Card v-for="(item, i) in data" :key="i" class="oss-card">-->
+        <!--<div class="content">-->
+        <!--<img-->
+        <!--v-if="item.fileType.indexOf('image') >= 0"-->
+        <!--:src="item.url"-->
+        <!--class="img"-->
+        <!--@click="showPic(item)"-->
+        <!--/>-->
+        <!--<div-->
+        <!--v-else-if="item.fileType.indexOf('video') >= 0"-->
+        <!--class="video"-->
+        <!--@click="showVideo(item)"-->
+        <!--&gt;-->
+        <!--&lt;!&ndash; 文件小于5MB显示video &ndash;&gt;-->
+        <!--<video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">-->
+        <!--<source :src="item.url"/>-->
+        <!--</video>-->
+        <!--<img class="play" src="@/assets/play.png"/>-->
+        <!--</div>-->
+        <!--<div v-else class="other">-->
+        <!--<div class="name">{{ item.name }}</div>-->
+        <!--<div class="key">{{ item.fileKey }}</div>-->
+        <!--<div class="info">-->
+        <!--文件类型：{{ item.fileType }} 文件大小：{{-->
+        <!--((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)-->
+        <!--}}-->
+        <!--MB 创建时间：{{ item.createTime }}-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--<div class="actions">-->
+        <!--<div class="btn">-->
+        <!--<Tooltip content="下载" placement="top">-->
+        <!--<Icon-->
+        <!--size="16"-->
+        <!--type="md-download"-->
+        <!--@click="download(item)"-->
+        <!--/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn">-->
+        <!--<Tooltip content="重命名" placement="top">-->
+        <!--<Icon size="16" type="md-create" @click="rename(item)"/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--<div class="btn-no">-->
+        <!--<Tooltip content="删除" placement="top">-->
+        <!--<Icon size="16" type="md-trash" @click="remove(item)"/>-->
+        <!--</Tooltip>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</div>-->
+        <!--</Card>-->
+        <!--</div>-->
         <!--</div>-->
         <!--<Row class="mt_10" justify="end" type="flex">-->
-          <!--<Page-->
-            <!--:current="searchForm.pageNumber"-->
-            <!--:page-size="searchForm.pageSize"-->
-            <!--:page-size-opts="pageSizeOpts"-->
-            <!--:total="total"-->
-            <!--show-elevator-->
-            <!--show-sizer-->
-            <!--show-total-->
-            <!--size="small"-->
-            <!--@on-change="changePage"-->
-            <!--@on-page-size-change="changePageSize"-->
-          <!--&gt;</Page>-->
+        <!--<Page-->
+        <!--:current="searchForm.pageNumber"-->
+        <!--:page-size="searchForm.pageSize"-->
+        <!--:page-size-opts="pageSizeOpts"-->
+        <!--:total="total"-->
+        <!--show-elevator-->
+        <!--show-sizer-->
+        <!--show-total-->
+        <!--size="small"-->
+        <!--@on-change="changePage"-->
+        <!--@on-page-size-change="changePageSize"-->
+        <!--&gt;</Page>-->
         <!--</Row>-->
       </Card>
     </Row>
@@ -416,7 +435,7 @@ import {
   updateFileDirectory,
 } from "@/api/index";
 import DPlayer from "dplayer";
-import { commonUrl } from "@/libs/axios";
+import {commonUrl} from "@/libs/axios";
 
 const config = require("@/config/index");
 
@@ -478,12 +497,13 @@ export default {
       picTitle: "", // 图片title
       videoTitle: "", // 视频title
       modalTitle: "", // 添加或编辑标题
+      activeRoleTab: "MANAGER",
       searchForm: {
         // 搜索框对应data对象
         name: "",
         fileKey: "",
         fileType: "",
-        ownerName: "",
+        userEnums: "MANAGER",
         pageNumber: 1, // 当前页数
         pageSize: 20, // 页面大小
         sort: "createTime", // 默认排序字段
@@ -618,9 +638,11 @@ export default {
             if (params.row.userEnums == "MANAGER") {
               m = "[管理员]";
             } else if (params.row.userEnums == "STORE") {
-              m = "[店铺]";
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
             } else {
-              m = "[会员]";
+              m = "[用户]";
             }
             m += params.row.createBy;
             return h("span", m);
@@ -800,9 +822,11 @@ export default {
             if (params.row.userEnums == "MANAGER") {
               m = "[管理员]";
             } else if (params.row.userEnums == "STORE") {
-              m = "[店铺]";
+              m = "[商家]";
+            } else if (params.row.userEnums == "CUSTOMER") {
+              m = "[客服]";
             } else {
-              m = "[会员]";
+              m = "[用户]";
             }
             m += params.row.createBy;
             return h("span", m);
@@ -856,17 +880,33 @@ export default {
         {
           title: 'parent 1',
           expand: true,
-          render: (h, { root, node, data }) => {
+          render: (h, {root, node, data}) => {
             return h('span', {style: {display: 'inline-block', width: '100%'}}, [
               h('span', [h("Icon", {type: 'ios-folder-outline', style: {marginRight: '8px'}}), h('span', data.title)]),
               h('span', {style: {display: 'inline-block', float: 'right', marginRight: '32px'}},
-                [h("Button", {...this.buttonProps, icon: 'ios-add', type: 'primary', style: {width: '64px'}, onClick: () => { this.append(data) }})
-              ])
+                [h("Button", {
+                  ...this.buttonProps,
+                  icon: 'ios-add',
+                  type: 'primary',
+                  style: {width: '64px'},
+                  onClick: () => {
+                    this.append(data)
+                  }
+                })
+                ])
             ]);
           },
           children: [
-            {title: 'child 1-1', expand: true, children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]},
-            {title: 'child 1-2', expand: true, children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]}
+            {
+              title: 'child 1-1',
+              expand: true,
+              children: [{title: 'leaf 1-1-1', expand: true}, {title: 'leaf 1-1-2', expand: true}]
+            },
+            {
+              title: 'child 1-2',
+              expand: true,
+              children: [{title: 'leaf 1-2-1', expand: true}, {title: 'leaf 1-2-1', expand: true}]
+            }
           ]
         }
       ],
@@ -882,7 +922,7 @@ export default {
     },
     selectedOss(val) {
       if (val && val.length) {
-        this.$emit("callback", {url: val[val.length-1].split(',')[1]});
+        this.$emit("callback", {url: val[val.length - 1].split(',')[1]});
       }
     },
     // 初始化监听 是否清空所选图片
@@ -897,8 +937,30 @@ export default {
       }
     },
   },
+  computed: {
+    canShowGroups() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    canUploadImages() {
+      return this.activeRoleTab === "MANAGER";
+    },
+    uploadData() {
+      return {
+        directoryPath: this.searchForm.fileDirectoryId,
+        userEnums: this.activeRoleTab,
+        directoryType: this.activeRoleTab,
+      };
+    },
+  },
 
   methods: {
+    beforeUpload() {
+      if (!this.canUploadImages) {
+        this.$Message.warning("仅管理员模块支持上传图片");
+        return false;
+      }
+      return true;
+    },
     onMouseOver(item, index) {
       this.$set(this.data[index], 'isShowPreview', true);
       this.$forceUpdate();
@@ -906,10 +968,53 @@ export default {
     onMouseOut(item, index) {
       this.$set(this.data[index], 'isShowPreview', false);
     },
+    handleRoleTabChange(name) {
+      this.activeRoleTab = name;
+      this.searchForm.pageNumber = 1;
+      this.searchForm.userEnums = name;
+      delete this.searchForm.fileDirectoryId;
+      this.selectedGroupData = "";
+      this.defaultValue = [];
+      this.groupFormValidate.id = [];
+      this.groupFormValidate.level = 0;
+      this.$set(this, "selectedOss", []);
+      this.updateTreeDataByRole();
+      this.getDataList();
+    },
+    updateTreeDataByRole() {
+      const currentTree = this.filterTreeByRole(this.treeDataDefault, this.activeRoleTab);
+      this.treeData = [
+        {
+          title: "全部图片",
+          label: "全部分类",
+          value: "0",
+          type: this.activeRoleTab,
+          level: 0,
+          children: currentTree,
+          id: "0",
+          categoryId: 0,
+        },
+      ];
+    },
+    filterTreeByRole(tree = [], role) {
+      if (!tree || !tree.length) return [];
+      return tree.reduce((arr, item) => {
+        const children = this.filterTreeByRole(item.children || [], role);
+        if (item.type === role || children.length) {
+          arr.push({
+            ...item,
+            children,
+          });
+        }
+        return arr;
+      }, []);
+    },
     // 复选框值改变时触发
     selectOssChange(e) {
       if (e) {
-        this.selectList = e.map(item => {return { id: item.split(',')[0]}});
+        this.selectList = e.map(item => {
+          return {id: item.split(',')[0]}
+        });
         this.selectCount = e.length;
         // let size = 0;
         // e.forEach((item) => {size += item.fileSize * 1.0;});
@@ -924,7 +1029,7 @@ export default {
       this.getDataList();
     },
     // 自定义tree节点显示内容和交互
-    renderContent (h, { root, node, data }) {
+    renderContent(h, {root, node, data}) {
       if (data.value === '0') {
         return h('span', {style: {display: 'inline-block', width: '100%'}},
           [
@@ -940,11 +1045,31 @@ export default {
               [
                 h("Dropdown", {style: {marginLeft: "4px"}},
                   [
-                    h("Icon", {props: {type: 'ios-more', size: "20",}, style: {display: 'inline-block'}, on:{click: () => {}}}),
-                    h("DropdownMenu", {slot: "list"
+                    h("Icon", {
+                      props: {type: 'ios-more', size: "20",},
+                      style: {display: 'inline-block'},
+                      on: {
+                        click: () => {
+                        }
+                      }
+                    }),
+                    h("DropdownMenu", {
+                      slot: "list"
                     }, [
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuEdit(root, node, data)}} }, "编辑"),
-                      h("DropdownItem", { nativeOn:{click: () => {this.handleContextMenuDelete()}} }, "删除"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuEdit(root, node, data)
+                          }
+                        }
+                      }, "编辑"),
+                      h("DropdownItem", {
+                        nativeOn: {
+                          click: () => {
+                            this.handleContextMenuDelete()
+                          }
+                        }
+                      }, "删除"),
                     ])
                   ]),
               ])
@@ -955,8 +1080,6 @@ export default {
     },
 
 
-
-
     handleContextMenu(val) {
       console.log('handleContextMenu', val);
       this.selectedGroupData = val;
@@ -988,10 +1111,10 @@ export default {
     },
     treeDataChange(value, selectedData) {
       if (value && value.length) {
-        if (value[value.length -1] == '0') {
+        if (value[value.length - 1] == '0') {
           this.groupFormValidate.level = 0;
         } else {
-          this.groupFormValidate.level = Number(selectedData[selectedData.length -1].level) + 1;
+          this.groupFormValidate.level = Number(selectedData[selectedData.length - 1].level) + 1;
         }
       }
     },
@@ -1000,7 +1123,8 @@ export default {
       this.$refs["formValidate"].validate(async (valid) => {
         if (valid) {
           let res
-          const params = { ...this.groupFormValidate };
+          const params = {...this.groupFormValidate};
+          params.directoryType = (this.selectedGroupData && this.selectedGroupData.type) || this.activeRoleTab;
           if (this.insertOrUpdate === "insert") {
             params.parentId = params.id[params.id.length - 1];
             delete params.id;
@@ -1054,17 +1178,8 @@ export default {
       getFileDirectory(parent_id).then((res) => {
         this.loading = false;
         if (res.success) {
-          this.treeData = this.getTree(res.result);
           this.treeDataDefault = this.getTree(res.result);
-          this.treeData.unshift({
-            title: "全部图片",
-            label: "全部分类",
-            value: "0",
-            level: 0,
-            children: [],
-            id: "0",
-            categoryId: 0,
-          });
+          this.updateTreeDataByRole();
         }
       });
     },
@@ -1103,7 +1218,7 @@ export default {
         } else {
           this.groupFormValidate.level = Number(level) + 1;
         }
-        this.searchForm.userEnums = type;
+        this.searchForm.userEnums = type || this.activeRoleTab;
         this.getDataList();
         this.$set(this, 'selectedOss', []);
       }
@@ -1114,19 +1229,12 @@ export default {
     selectedParams(val) {
       this.$emit("callback", val);
     },
-    // 更多操作
-    handleDropdown(name) {
-      if (name === "refresh") {
-        this.getDataList('refresh');
-      } else if (name === "removeAll") {
-        this.removeAll();
-      }
-    },
     // 初始化数据
     init() {
       this.accessToken = {
         accessToken: this.getStore("accessToken"),
       };
+      this.searchForm.userEnums = this.activeRoleTab;
       this.getDataList();
       this.getAllList();
     },
@@ -1207,9 +1315,6 @@ export default {
 
         this.data = res.result.records;
         this.total = res.result.total;
-        if (type === 'refresh') {
-          this.$Message.success('刷新成功！');
-        }
       });
     },
     // 搜索
@@ -1244,6 +1349,10 @@ export default {
     },
     // 上传成功回调
     handleSuccess(res, file) {
+      if (!this.canUploadImages) {
+        this.$Message.warning("仅管理员模块支持上传图片");
+        return;
+      }
       if (res.success) {
         this.$Message.success("上传文件 " + file.name + " 成功");
         this.getDataList();
@@ -1281,7 +1390,9 @@ export default {
         loading: true,
         onOk: () => {
           let ids = "";
-          this.selectList.forEach(function (e) {ids += e.id + ",";});
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
           ids = ids.substring(0, ids.length - 1);
           deleteFile(ids).then((res) => {
             this.$Modal.remove();
@@ -1374,7 +1485,7 @@ export default {
       // 是组件的话，初始化不调用接口
       this.init();
     } else {
-      this.searchForm.pageSize =18; // 页面大小
+      this.searchForm.pageSize = 18; // 页面大小
     }
   },
 };
diff --git a/seller/src/api/order.js b/seller/src/api/order.js
index 90a820f3..601e18c4 100644
--- a/seller/src/api/order.js
+++ b/seller/src/api/order.js
@@ -147,9 +147,14 @@ export const getReceiptPage = params => {
   return getRequest(`/trade/receipt`, params);
 };
 
-//获取发票列表
-export const invoicing = id => {
-  return postRequest(`/trade/receipt/${id}/invoicing`);
+//获取发票详情
+export const getReceiptDetail = id => {
+  return getRequest(`/trade/receipt/get/${id}`);
+};
+
+//开发票
+export const invoicing = (id, params) => {
+  return postRequest(`/trade/receipt/${id}/invoicing`, params);
 };
 
 //查询包裹列表
diff --git a/seller/src/views/order/receiptManager/receipt.vue b/seller/src/views/order/receiptManager/receipt.vue
index 89517513..0ac57127 100644
--- a/seller/src/views/order/receiptManager/receipt.vue
+++ b/seller/src/views/order/receiptManager/receipt.vue
@@ -21,7 +21,11 @@
         <Button @click="handleReset" class="search-btn">重置</Button>
       </Form>
       </Card>
+
     <Card>
+      <div class="receipt-tip">
+          订单状态为已发货/已完成可开票
+      </div>
       <Table class="mt_10" :loading="loading" border :columns="columns" :data="data" ref="table">
         <!-- 订单详情格式化 -->
         <template slot="orderSlot" slot-scope="scope">
@@ -33,17 +37,135 @@
           show-total show-elevator show-sizer></Page>
       </Row>
     </Card>
+    <Modal
+      v-model="receiptModalVisible"
+      title="发票信息"
+      :mask-closable="false"
+      width="680"
+    >
+      <div v-if="receiptDetailLoading" class="receipt-modal-loading">
+        <Spin size="large" />
+      </div>
+      <div v-else class="receipt-modal-content">
+        <div v-if="hasValue(currentReceipt.orderSn)" class="receipt-item">
+          <span class="receipt-label">订单号：</span>
+          <span class="receipt-value">{{ currentReceipt.orderSn }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.memberName)" class="receipt-item">
+          <span class="receipt-label">会员名称：</span>
+          <span class="receipt-value">{{ currentReceipt.memberName }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.receiptType) || hasValue(currentReceipt.invoiceKind)" class="receipt-item">
+          <span class="receipt-label">发票类型：</span>
+          <span class="receipt-value">{{ formatReceiptType(currentReceipt) }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.receiptTitle)" class="receipt-item">
+          <span class="receipt-label">发票抬头：</span>
+          <span class="receipt-value">{{ currentReceipt.receiptTitle }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.companyName)" class="receipt-item">
+          <span class="receipt-label">单位名称：</span>
+          <span class="receipt-value">{{ currentReceipt.companyName }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.personalName)" class="receipt-item">
+          <span class="receipt-label">个人名称：</span>
+          <span class="receipt-value">{{ currentReceipt.personalName }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.taxpayerId)" class="receipt-item">
+          <span class="receipt-label">纳税人识别号：</span>
+          <span class="receipt-value">{{ currentReceipt.taxpayerId }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.companyAddress)" class="receipt-item">
+          <span class="receipt-label">单位地址：</span>
+          <span class="receipt-value">{{ currentReceipt.companyAddress }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.companyPhone)" class="receipt-item">
+          <span class="receipt-label">单位电话：</span>
+          <span class="receipt-value">{{ currentReceipt.companyPhone }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.bankName)" class="receipt-item">
+          <span class="receipt-label">开户银行：</span>
+          <span class="receipt-value">{{ currentReceipt.bankName }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.bankAccount)" class="receipt-item">
+          <span class="receipt-label">银行账号：</span>
+          <span class="receipt-value">{{ currentReceipt.bankAccount }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.receiptContent)" class="receipt-item">
+          <span class="receipt-label">发票内容：</span>
+          <span class="receipt-value">{{ currentReceipt.receiptContent }}</span>
+        </div>
+        <div v-if="hasPrice(currentReceipt.receiptPrice)" class="receipt-item">
+          <span class="receipt-label">发票金额：</span>
+          <span class="receipt-value">{{ formatPrice(currentReceipt.receiptPrice) }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.receiptPhone)" class="receipt-item">
+          <span class="receipt-label">收票人手机：</span>
+          <span class="receipt-value">{{ currentReceipt.receiptPhone }}</span>
+        </div>
+        <div v-if="hasValue(currentReceipt.receiptEmail)" class="receipt-item">
+          <span class="receipt-label">收票人邮箱：</span>
+          <span class="receipt-value">{{ currentReceipt.receiptEmail }}</span>
+        </div>
+        <div v-if="hasValue(getInvoiceAddress(currentReceipt))" class="receipt-item">
+          <span class="receipt-label">发票附件：</span>
+          <span class="receipt-value">
+            <a @click="viewInvoiceFile(getInvoiceAddress(currentReceipt))">查看附件</a>
+          </span>
+        </div>
+      </div>
+      <div slot="footer">
+        <template v-if="receiptModalMode === 'invoicing'">
+          <Upload
+            :action="uploadFileUrl"
+            :data="receiptUploadData"
+            :headers="{ ...accessToken }"
+            :format="['jpg', 'jpeg', 'png', 'pdf']"
+            :max-size="10240"
+            :on-success="handleInvoiceUploadSuccess"
+            :on-error="handleInvoiceUploadError"
+            :on-format-error="handleInvoiceFormatError"
+            :on-exceeded-size="handleInvoiceMaxSize"
+            :show-upload-list="false"
+            style="display: inline-block; margin-right: 8px"
+          >
+            <Button :disabled="receiptDetailLoading">上传发票</Button>
+          </Upload>
+          <Button @click="receiptModalVisible = false">取消</Button>
+          <Button
+            type="primary"
+            :loading="invoiceSubmitting"
+            @click="submitInvoicing"
+          >
+            确认开票
+          </Button>
+        </template>
+        <Button v-else @click="receiptModalVisible = false">关闭</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
 import * as API_Order from "@/api/order";
+import { uploadFile } from "@/libs/axios";
 
 export default {
   name: "receipt",
   data() {
     return {
       loading: true, // 表单加载状态
+      receiptModalVisible: false,
+      receiptDetailLoading: false,
+      invoiceSubmitting: false,
+      receiptModalMode: "detail",
+      uploadFileUrl: uploadFile,
+      accessToken: {},
+      receiptUploadData: {
+        directoryPath: "receipt"
+      },
+      currentReceipt: {},
+      selectedReceiptRow: null,
       searchForm: {
         // 搜索框初始化对象
         pageNumber: 1, // 当前页数
@@ -107,7 +229,7 @@ export default {
           width: 100,
           tooltip: true,
           render: (h, params) => {
-            if (params.row.receiptStatus === 0) {
+            if (Number(params.row.receiptStatus) === 0) {
               return h("div", [
                 h("tag", { props: { color: "volcano" } }, "未开票"),
               ]);
@@ -162,12 +284,21 @@ export default {
           fixed: 'right',
           width: 200,
           render: (h, params) => {
-            const disabled = !(((params.row.orderStatus === "COMPLETED" || params.row.orderStatus === "DELIVERED")) && params.row.receiptStatus === 0);
+            const disabled = !this.canInvoicing(params.row);
+            const detailStyle = { color: "#2d8cf0", cursor: "pointer", textDecoration: "none", marginRight: "12px" };
             const style = disabled
               ? { color: "#c5c8ce", cursor: "not-allowed", textDecoration: "none" }
               : { color: "#2d8cf0", cursor: "pointer", textDecoration: "none" };
-            const on = disabled ? {} : { click: () => { this.invoicing(params.row); } };
+            const on = disabled ? {} : { click: () => { this.openReceiptModal(params.row, "invoicing"); } };
             return h("div", [
+              h(
+                "a",
+                {
+                  style: detailStyle,
+                  on: { click: () => { this.openReceiptModal(params.row, "detail"); } },
+                },
+                "详情"
+              ),
               h(
                 "a",
                 {
@@ -185,6 +316,102 @@ export default {
     };
   },
   methods: {
+    canInvoicing(row) {
+      if (!row) return false;
+      const orderStatus = row.orderStatus;
+      const receiptStatus = Number(row.receiptStatus);
+      return (orderStatus === "COMPLETED" || orderStatus === "DELIVERED") && receiptStatus === 0;
+    },
+    initUploadAccessToken() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken")
+      };
+    },
+    hasValue(value) {
+      if (value === null || value === undefined) return false;
+      return String(value).trim() !== "";
+    },
+    hasPrice(value) {
+      return value !== null && value !== undefined && value !== "";
+    },
+    formatValue(value) {
+      if (value === null || value === undefined) return "暂无";
+      const text = String(value).trim();
+      return text ? text : "暂无";
+    },
+    formatPrice(value) {
+      if (value === null || value === undefined || value === "") return "暂无";
+      return `￥${value}`;
+    },
+    isVatSpecialReceipt(receipt) {
+      if (!receipt) return false;
+      const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+      return receiptType === "2" || receiptType === "增值税专用发票" || receipt.invoiceKind === "VAT_SPECIAL";
+    },
+    formatReceiptType(receipt) {
+      if (!receipt || (!receipt.receiptType && !receipt.invoiceKind)) return "电子普通发票";
+      const receiptType = receipt.receiptType != null ? String(receipt.receiptType).trim() : "";
+      if (receiptType === "电子普通发票" || receiptType === "增值税专用发票") return receiptType;
+      return this.isVatSpecialReceipt(receipt) ? "增值税专用发票" : "电子普通发票";
+    },
+    formatReceiptHeaderType(receipt) {
+      if (!receipt) return "暂无";
+      if (this.isVatSpecialReceipt(receipt)) return "单位";
+      if (receipt.companyName) return "单位";
+      if (receipt.personalName) return "个人";
+      const receiptTitle = receipt.receiptTitle != null ? String(receipt.receiptTitle).trim() : "";
+      if (receiptTitle === "单位" || receiptTitle === "个人") return receiptTitle;
+      return receipt.taxpayerId ? "单位" : "个人";
+    },
+    getReceiptTitleLabel(receipt) {
+      return this.formatReceiptHeaderType(receipt) === "单位" ? "单位名称" : "个人名称";
+    },
+    getReceiptTitleName(receipt) {
+      if (!receipt) return "";
+      if (receipt.companyName) return receipt.companyName;
+      if (receipt.personalName) return receipt.personalName;
+      const receiptTitle = receipt.receiptTitle != null ? String(receipt.receiptTitle).trim() : "";
+      if (receiptTitle === "单位" || receiptTitle === "个人") return "";
+      return receiptTitle;
+    },
+    getInvoiceAddress(receipt) {
+      if (!receipt) return "";
+      return receipt.invoiceAddress || receipt.invoiceFileUrl || "";
+    },
+    buildInvoicingPayload() {
+      const invoiceAddress = this.getInvoiceAddress(this.currentReceipt);
+      return invoiceAddress ? { invoiceAddress } : {};
+    },
+    handleInvoiceUploadSuccess(res) {
+      if (res && res.success && res.result) {
+        this.$set(this.currentReceipt, "invoiceAddress", res.result);
+        if (this.selectedReceiptRow) {
+          this.$set(this.selectedReceiptRow, "invoiceAddress", res.result);
+        }
+        this.$Message.success("发票上传成功");
+      } else {
+        this.$Message.error((res && res.message) || "发票上传失败");
+      }
+    },
+    handleInvoiceUploadError() {
+      this.$Message.error("发票上传失败");
+    },
+    handleInvoiceFormatError() {
+      this.$Notice.warning({
+        title: "文件格式不正确",
+        desc: "请上传 jpg、jpeg、png 或 pdf 格式文件"
+      });
+    },
+    handleInvoiceMaxSize() {
+      this.$Notice.warning({
+        title: "超过文件大小限制",
+        desc: "发票附件不能超过 10MB"
+      });
+    },
+    viewInvoiceFile(url) {
+      if (!url) return;
+      window.open(url, "_blank");
+    },
     // 初始化数据
     init() {
       this.getData();
@@ -232,25 +459,54 @@ export default {
       this.total = this.data.length;
       this.loading = false;
     },
-    //开发票
-    invoicing(params) {
-      this.$Modal.confirm({
-        title: "确认开票",
-        content: "您确认已经开具发票 ?",
-        loading: true,
-        onOk: () => {
-          API_Order.invoicing(params.id).then((res) => {
-            if (res.success) {
-              this.$Message.success("开票成功");
-            }
-            this.$Modal.remove();
-            this.getData();
-          });
-        },
-      });
+    async openReceiptModal(row, mode = "detail") {
+      if (!row) return;
+      this.receiptModalMode = mode;
+      this.selectedReceiptRow = row;
+      this.currentReceipt = { ...row };
+      this.receiptModalVisible = true;
+      this.receiptDetailLoading = true;
+      try {
+        const res = await API_Order.getReceiptDetail(row.id);
+        if (res.success && res.result) {
+          this.currentReceipt = { ...row, ...res.result };
+        } else {
+          this.$Message.warning("发票详情获取失败，已展示列表中的发票信息");
+        }
+      } catch (e) {
+        this.$Message.error("发票详情获取失败");
+      } finally {
+        this.receiptDetailLoading = false;
+      }
+    },
+    async submitInvoicing() {
+      if (!this.selectedReceiptRow) return;
+      if (!this.canInvoicing(this.selectedReceiptRow)) {
+        this.$Message.warning("当前订单状态不支持开票");
+        return;
+      }
+      const params = this.buildInvoicingPayload();
+      if (!params.invoiceAddress) {
+        this.$Message.warning("请先上传发票");
+        return;
+      }
+      this.invoiceSubmitting = true;
+      try {
+        const res = await API_Order.invoicing(this.selectedReceiptRow.id, params);
+        if (res.success) {
+          this.$Message.success("开票成功");
+          this.receiptModalVisible = false;
+          this.getData();
+        }
+      } catch (e) {
+        this.$Message.error("开票失败");
+      } finally {
+        this.invoiceSubmitting = false;
+      }
     },
   },
   mounted() {
+    this.initUploadAccessToken();
     this.init();
   },
 };
@@ -258,4 +514,44 @@ export default {
 <style lang="scss">
 // 建议引入通用样式 可删除下面样式代码
 @import "@/styles/table-common.scss";
+
+.receipt-modal-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 240px;
+}
+
+.receipt-modal-content {
+  max-height: 460px;
+  overflow-y: auto;
+}
+
+.receipt-item {
+  display: flex;
+  margin-bottom: 12px;
+  line-height: 22px;
+}
+
+.receipt-tip {
+  margin-bottom: 16px;
+  padding: 8px 12px;
+  color: #ff9900;
+  background: #fff7e6;
+  border: 1px solid #ffd591;
+  border-radius: 4px;
+}
+
+.receipt-label {
+  width: 110px;
+  color: #515a6e;
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.receipt-value {
+  flex: 1;
+  color: #17233d;
+  word-break: break-all;
+}
 </style>