解决商品分类不同步数据问题，解决pc端添加发票问题

buyer/src/components/invoiceModal/index.vue

@@ -11,42 +11,37 @@
             </div> -->
       <!-- 普通发票 -->
       <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="ruleInline" :label-width="110">
           <FormItem label="发票类型">
-            <RadioGroup v-model="invoiceForm.type" type="button" button-style="solid">
+            <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="invoiceForm.type == 2"
-            prop="receiptTitle"
-          >
+          <FormItem label="个人名称" v-if="type === 1" prop="receiptTitle">
             <i-input v-model="invoiceForm.receiptTitle"></i-input>
           </FormItem>
-          <FormItem
-            label="纳税人识别号"
-            v-if="invoiceForm.type == 2"
-            prop="taxpayerId"
-          >
+          <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>
+              <Radio label="商品类别">商品类别</Radio>
             </RadioGroup>
           </FormItem>
         </Form>
         <div style="text-align: center">
-          <Button type="primary" :loading="loading" @click="save">保存发票信息</Button>
+          <Button type="primary" :loading="loading" @click="submit">保存发票信息</Button>
           <Button type="default" @click="invoiceAvailable = false">取消</Button>
         </div>
       </div>
@@ -54,100 +49,104 @@
   </div>
 </template>
 <script>
-import { saveReceipt } from '@/api/member.js';
-import { TINumber } from '@/plugins/RegExp.js';
+import { receiptSelect } from "@/api/cart.js";
+import { TINumber } from "@/plugins/RegExp.js";
 export default {
-  name: 'invoiceModal',
-  data () {
+  name: "invoiceModal",
+  data() {
     return {
+      invoice: 1,
       invoiceAvailable: false, // 模态框显隐
       loading: false, // 提交状态
-      invoiceForm: { // 发票表单
+      invoiceForm: {
+        // 发票表单
         // 普票表单
-        receiptTitle: '', // 发票抬头
-        taxpayerId: '', // 纳税人识别号
-        receiptContent: '不开发票', // 发票内容
-        type: 1 // 1 个人 2 单位
+        receiptTitle: "", // 发票抬头
+        taxpayerId: "", // 纳税人识别号
+        receiptContent: "商品明细", // 发票内容
       },
+      type: 1, // 1 个人 2 单位
       ruleInline: {
-        receiptTitle: [{ required: true, message: '请填写公司名称' }],
         taxpayerId: [
-          { required: true, message: '请填写纳税人识别号' },
-          { pattern: TINumber, message: '请填写正确的纳税人识别号' }
-        ]
-      }
+          { required: true, message: "请填写纳税人识别号" },
+          { pattern: TINumber, message: "请填写正确的纳税人识别号" },
+        ],
+      },
     };
   },
-  methods: {
-    save () {
-      if (this.invoiceForm.type === 1) {
-        // 个人
-        let flag = true;
-        this.receiptItems.forEach((e) => {
-          if (
-            e.receiptTitle === '个人' &&
-            e.receiptContent === this.invoiceForm.receiptContent
-          ) {
-            this.$emit('change', e);
-            flag = false;
-            this.invoiceAvailable = false;
-          }
-        });
+  props: ["invoiceData"],
+  watch: {
+    invoiceData: {
+      handler(val) {
+        this.invoiceForm = { ...val };
 
-        if (flag) {
-          let params = {
-            receiptTitle: '个人',
-            receiptContent: this.invoiceForm.receiptContent
-          };
-          this.loading = true;
-          saveReceipt(params)
-            .then((res) => {
-              this.loading = false;
-              if (res.success) {
-                this.$emit('change', res.result);
-                this.invoiceAvailable = false;
-              }
-            })
-            .catch(() => {
-              this.loading = false;
-            });
+        if (val.taxpayerId) {
+          this.type = 2;
+        } else {
+          this.type = 1;
         }
-      } else {
-        // 单位
+      },
+      deep: true,
+      immeadite: true,
+    },
+  },
+  methods: {
+    /**
+     *  选择发票抬头
+     */
+    changeInvoice(val) {
+      this.$nextTick(() => {
+        this.type = val;
+      });
+    },
+
+    /**
+     *  保存判断
+     */
+    save() {
+      let flage = true;
+
+      // 保存分为两种类型，个人以及企业
+      const { type, receiptTitle, receiptContent } = JSON.parse(
+        JSON.stringify(this.invoiceForm)
+      );
+
+      // 判断是否填写发票抬头
+      if (!receiptTitle) {
+        this.$Message.error("请填写发票抬头!");
+        flage = false;
+        return false;
+      }
+
+      if (type == 2) {
         this.$refs.form.validate((valid) => {
-          if (valid) {
-            this.loading = true;
-            let params = {
-              receiptTitle: this.invoiceForm.receiptTitle,
-              taxpayerId: this.invoiceForm.taxpayerId,
-              receiptContent: this.invoiceForm.receiptContent
-            };
-            let flag = true;
-            this.receiptItems.forEach((e) => {
-              if (e.taxpayerId === params.taxpayerId) {
-                flag = false;
-              }
-            });
-            if (!flag) {
-              this.$Message.error('已有当前税号的发票信息，请直接选择已有发票');
-            } else {
-              saveReceipt(params)
-                .then((res) => {
-                  this.loading = false;
-                  if (res.success) {
-                    this.$emit('change', res.result);
-                    this.invoiceAvailable = false;
-                  }
-                })
-                .catch(() => {
-                  this.loading = false;
-                });
-            }
+          if (!valid) {
+            flage = false;
           }
         });
+      } else {
+        delete this.invoiceForm.taxpayerId;
       }
-    }
-  }
+
+      return flage;
+    },
+
+    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;
+      }
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>