发票管理

src/views/bookShelf/articleDetail.vue

@@ -1510,6 +1510,9 @@ export default {
             setTimeout(() => {
               this_.inityuan();
             }, 100);
+            this.articleInfo.art_content = this.removeFontSize(
+              this.articleInfo.art_content
+            );
           }
         })
         .catch(() => {
@@ -1562,6 +1565,25 @@ export default {
           this.loading = false;
         });
     },
+    removeFontSize(html) {
+      const div = document.createElement("div");
+      div.innerHTML = html;
+      this.removeFontSizeFromElement(div);
+      return div.innerHTML;
+    },
+    removeFontSizeFromElement(element) {
+      if (element.style.fontSize) {
+        element.style.fontSize = null; // 移除内联样式
+      }
+      if (element.style.font) {
+        // 可能还有其他font相关的样式
+        element.style.font = null;
+      }
+      // 递归处理子元素
+      Array.from(element.children).forEach((child) =>
+        this.removeFontSizeFromElement(child)
+      );
+    },
     handleReadArticle() {
       let this_ = this;
       clearInterval(this_.timer);
@@ -2283,6 +2305,9 @@ export default {
     }
   }
 }
+:deep .para {
+  white-space: pre-wrap;
+}
 </style>
 <style lang="scss">
 .article-fontsize {

src/views/personalCenter/components/InvoiceList.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="my-share personal-info">
+    <div class="common-title-box">
+      <h2>发票管理</h2>
+    </div>
+    <div class="search-item">
+      <label>状态</label>
+      <el-select
+        v-model="searchStatus"
+        @change="getList(1)"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in searchStatusList"
+          :key="item.status"
+          :label="item.status_name"
+          :value="item.status"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <el-table
+      :data="invoiceList"
+      v-loading="tableLoading"
+      :max-height="tableHeight"
+    >
+      <el-table-column
+        type="index"
+        label="#"
+        sortable
+        width="54"
+        :index="(pageNumber - 1) * pageSize + 1"
+      >
+      </el-table-column>
+      <el-table-column prop="id" label="ID" width="250"> </el-table-column>
+      <el-table-column prop="sn" label="编号" width="190"> </el-table-column>
+      <el-table-column prop="invoice_type" label="发票类型" width="90">
+        <template slot-scope="scope">
+          <span>{{ goodsTypeListCss[scope.row.invoice_type].text }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="invoice_object" label="抬头类型" width="90">
+        <template slot-scope="scope">
+          <span>{{ goodsObjectListCss[scope.row.invoice_object].text }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="amount" label="金额" width="90">
+        <template slot-scope="scope">
+          <span class="currectPrice"
+            >￥{{ scope.row.amount | cutMoneyFiter }}</span
+          >
+        </template>
+      </el-table-column>
+      <el-table-column prop="submit_time" label="提交时间" width="180">
+      </el-table-column>
+
+      <el-table-column prop="status" label="状态" width="112">
+        <template slot-scope="scope">
+          <div class="status-box">
+            <span
+              :style="{
+                background: refundStatusList[scope.row.status].bg,
+              }"
+            ></span>
+            <b
+              :style="{
+                color: refundStatusList[scope.row.status].textColor,
+              }"
+              >{{ refundStatusList[scope.row.status].text }}</b
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="reject_reason" label="驳回原因" width="280">
+      </el-table-column>
+      <el-table-column prop="status" label="操作" width="80" fixed="right">
+        <template slot-scope="scope">
+          <a class="apply" @click="handleDetail(scope.row, scope.$index)">
+            详情
+          </a>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNumber"
+      :page-sizes="[10, 20, 30, 40, 50]"
+      :page-size="pageSize"
+      layout="total, prev, pager, next, sizes, jumper"
+      :total="total_count"
+    >
+    </el-pagination>
+    <div
+      class="kefu-box"
+      v-if="kefuShow"
+      @mouseover="kefuCode = true"
+      @mouseleave="kefuCode = false"
+    >
+      <div v-if="kefuCode" style="background: #ffffff">
+        <img src="../../../assets/21st-kefu-code.jpg" />
+        <span>扫一扫，添加客服微信</span>
+      </div>
+
+      <div v-else>
+        <img class="kefu-img" src="../../../assets/kefu.png" />
+        <span style="color: #ff3333; font-weight: bold; font-size: 16px"
+          >客服咨询入口</span
+        >
+      </div>
+    </div>
+    <el-dialog
+      title="发票申请信息"
+      :visible.sync="dialogVisible"
+      width="800px"
+      class="invoice-dialog"
+      v-if="ktjeInfo"
+    >
+      <h5>发票信息</h5>
+      <div class="item-info">
+        <label>发票类型：</label>
+        <b>{{ goodsTypeListCss[ktjeInfo.invoice_type].text }}</b>
+      </div>
+      <div class="item-info">
+        <label>抬头类型：</label>
+        <b>{{ goodsObjectListCss[ktjeInfo.invoice_object].text }}</b>
+      </div>
+      <div class="item-info">
+        <label>抬头名称：</label>
+        <b>{{ ktjeInfo.buyer_info_mc }}</b>
+      </div>
+      <template v-if="ktjeInfo.invoice_object === 1">
+        <div class="item-info">
+          <label>单位税号：</label>
+          <b>{{ ktjeInfo.buyer_info_sh }}</b>
+        </div>
+        <div class="item-info">
+          <label>注册地址：</label>
+          <b>{{ ktjeInfo.buyer_info_dz }}</b>
+        </div>
+        <div class="item-info">
+          <label>注册电话：</label>
+          <b>{{ ktjeInfo.buyer_info_dh }}</b>
+        </div>
+        <div class="item-info">
+          <label>开户银行：</label>
+          <b>{{ ktjeInfo.buyer_info_khh }}</b>
+        </div>
+        <div class="item-info">
+          <label>银行账号：</label>
+          <b>{{ ktjeInfo.buyer_info_zh }}</b>
+        </div>
+      </template>
+      <template v-else>
+        <div class="item-info">
+          <label>身份证号：</label>
+          <b>{{ ktjeInfo.buyer_info_sfzh }}</b>
+        </div>
+      </template>
+
+      <div class="item-info">
+        <label>金额：</label>
+        <b>{{ ktjeInfo.amount | cutMoneyFiter }}</b>
+      </div>
+      <template v-if="ktjeInfo.invoice_file_url">
+        <div class="item-info">
+          <label>发票地址：</label>
+          <b
+            ><a
+              style="text-decoration: underline; color: #165dff"
+              target="_blank"
+              :href="ktjeInfo.invoice_file_url"
+              >点击查看</a
+            ></b
+          >
+        </div>
+      </template>
+      <div class="item-info">
+        <label>审核状态：</label>
+        <b
+          :style="{
+            color: refundStatusList[ktjeInfo.status].bg,
+          }"
+          >{{ refundStatusList[ktjeInfo.status].text }}</b
+        >
+      </div>
+      <template v-if="ktjeInfo.reject_reason">
+        <div class="item-info">
+          <label>驳回原因：</label>
+          <b>{{ ktjeInfo.reject_reason }}</b>
+        </div>
+      </template>
+
+      <template v-if="ktje.length > 0">
+        <h5>订单列表</h5>
+        <el-table class="search-table" :data="ktje" style="width: 100%">
+          <el-table-column type="index" label="#" width="54"> </el-table-column>
+          <el-table-column prop="id" label="订单ID" width="250">
+          </el-table-column>
+          <el-table-column prop="sn" label="订单编号" width="190">
+          </el-table-column>
+
+          <el-table-column prop="name" label="订单名称"> </el-table-column>
+        </el-table>
+      </template>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="dialogVisible = false"
+          >关 闭</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》from ‘《组件路径》';
+import { cutMoneyFiter } from "@/utils/defined";
+import { getLogin } from "@/api/ajax";
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  props: [],
+  filters: {
+    cutMoneyFiter,
+  },
+  data() {
+    //这里存放数据
+    return {
+      pageSize: 10,
+      pageNumber: 1,
+
+      goodsTypeListCss: {
+        0: {
+          text: "普通发票",
+          color: "#722ED1",
+        },
+        1: {
+          text: "专用发票",
+          color: "#722ED1",
+        },
+      },
+      goodsObjectListCss: {
+        0: {
+          text: "个人",
+          color: "#722ED1",
+        },
+        1: {
+          text: "企业",
+          color: "#722ED1",
+        },
+      },
+      refundStatusList: {
+        2: {
+          text: "审核通过",
+          bg: "#00B42A",
+          textColor: "#1D2129",
+        },
+        0: {
+          text: "待审核",
+          bg: "#165DFF",
+          textColor: "#1D2129",
+        },
+        1: {
+          text: "驳回",
+          bg: "#FF7D00",
+          textColor: "#1D2129",
+        },
+      },
+      searchStatusList: [
+        {
+          status_name: "全部",
+          status: -1,
+        },
+        {
+          status_name: "审核通过",
+          status: 2,
+        },
+        {
+          status_name: "待审核",
+          status: 0,
+        },
+        {
+          status_name: "驳回",
+          status: 1,
+        },
+      ],
+
+      invoiceList: [],
+      total_count: 0,
+      searchStatus: -1, // 查询状态
+      tableLoading: false,
+      tableHeight: "", // 表格高度
+      kefuShow: true, // 是否显示客服
+      kefuCode: false, // 显示客服二维码
+      multipleSelection: [], // 选中的id
+      dialogVisible: false,
+      ktje: [],
+      refundId: "",
+      ktjeInfo: null,
+    };
+  },
+  //计算属性 类似于data概念
+  computed: {},
+  //监控data中数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //计算table高度(动态设置table高度)
+    getTableHeight() {
+      let tableH = 260; //距离页面下方的高度
+      let tableHeightDetil = window.innerHeight - tableH;
+      if (tableHeightDetil <= 300) {
+        this.tableHeight = 300;
+      } else {
+        this.tableHeight = window.innerHeight - tableH;
+      }
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.pageNumber = 1;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.pageNumber = val;
+      this.getList();
+    },
+    getList() {
+      this.tableLoading = true;
+      let MethodName =
+        "/ShopServer/Client/OrderManager/PageQueryMyInvoiceApplyList";
+      let data = {
+        page_capacity: this.pageSize,
+        cur_page: this.pageNumber,
+        status: this.searchStatus,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          this.tableLoading = false;
+          if (res.status === 1) {
+            this.invoiceList = res.invoice_apply_list;
+            this.total_count = res.total_count;
+          }
+        })
+        .catch(() => {
+          this.tableLoading = false;
+        });
+    },
+
+    // 发票申请详情
+    handleDetail(row) {
+      this.ktjeInfo = null;
+      let Mnames = "/ShopServer/Client/OrderManager/GetInvoiceApplyInfo";
+      let datas = {
+        id: row.id,
+      };
+      getLogin(Mnames, datas).then((res) => {
+        if (res.status === 1) {
+          this.ktje = res.order_list;
+          this.ktjeInfo = res.invoice_apply;
+          this.dialogVisible = true;
+        }
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getTableHeight();
+    this.getList();
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  //生命周期-创建之前
+  beforeCreated() {},
+  //生命周期-挂载之前
+  beforeMount() {},
+  //生命周期-更新之前
+  beforUpdate() {},
+  //生命周期-更新之后
+  updated() {},
+  //生命周期-销毁之前
+  beforeDestory() {},
+  //生命周期-销毁完成
+  destoryed() {},
+  //如果页面有keep-alive缓存功能，这个函数会触发
+  activated() {},
+};
+</script>
+<style lang="scss" scoped>
+/* @import url(); 引入css类 */
+.my-share {
+  background: #ffffff;
+  border-radius: 4px;
+  padding: 24px;
+  h2 {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+    color: #1d2129;
+    margin: 0;
+  }
+  .el-table {
+    margin: 24px 0;
+    max-width: 100%;
+  }
+  .el-pagination {
+    text-align: right;
+  }
+  .status-box {
+    display: flex;
+    align-items: center;
+    span {
+      width: 6px;
+      height: 6px;
+      border-radius: 3px;
+      margin-right: 8px;
+      margin-top: 2px;
+    }
+    b {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #1d2129;
+    }
+  }
+  .order-detail {
+    color: #165dff;
+    margin-right: 8px;
+  }
+  .apply {
+    font-size: 14px;
+    line-height: 22px;
+    color: #165dff;
+    margin-right: 10px;
+    font-weight: 500;
+  }
+  .items-type {
+    padding: 1px 8px;
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 22px;
+    border-radius: 2px;
+  }
+  .oldPrice {
+    color: #86909c;
+    margin-left: 8px;
+  }
+  .code {
+    color: #175dff;
+  }
+  .copy {
+    color: #c9cdd4;
+    margin-left: 8px;
+    cursor: pointer;
+  }
+  .kefu-box {
+    position: fixed;
+    right: 0;
+    bottom: 300px;
+    z-index: 3;
+    text-align: center;
+    cursor: pointer;
+    img {
+      width: 150px;
+    }
+    .kefu-img {
+      width: 70px;
+    }
+    span {
+      display: block;
+      text-align: center;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+  }
+}
+.common-title-box {
+  display: flex;
+  justify-content: space-between;
+}
+:deep .el-table-column--selection .cell {
+  padding: 0 10px !important;
+}
+.search-item {
+  padding-top: 16px;
+  label {
+    font-size: 14px;
+    line-height: 22px;
+    color: #4e5969;
+    font-weight: 400;
+    margin-right: 8px;
+  }
+  .el-select {
+    width: 160px;
+  }
+  :deep .el-input__inner {
+    height: 32px;
+    color: #1d2129;
+    background: #f2f3f5;
+    border: none;
+  }
+  :deep .el-input__icon {
+    line-height: 32px;
+    color: #4e5969 !important;
+  }
+}
+.invoice-dialog {
+  h5 {
+    font-size: 16px;
+    margin: 10px 0 15px 0;
+  }
+  :deep .el-dialog__body {
+    padding: 0px 20px;
+  }
+}
+.item-info {
+  display: flex;
+  width: 100%;
+  margin: 10px 0;
+  label {
+    width: 90px;
+    text-align: right;
+    flex-shrink: 0;
+  }
+}
+</style>

src/views/personalCenter/components/OrderList.vue

@@ -1,13 +1,22 @@
 <template>
   <div class="my-share personal-info">
-    <h2>订单管理</h2>
+    <div class="common-title-box">
+      <h2>订单管理</h2>
+      <div class="btn-box">
+        <el-button type="primary" size="small" @click="handInvoice"
+          >申请发票</el-button
+        >
+      </div>
+    </div>
     <el-table
       :data="orderList"
       @sort-change="handleSort"
       :default-sort="dataSort"
       v-loading="tableLoading"
       :max-height="tableHeight"
+      @selection-change="handleSelectionChange"
     >
+      <el-table-column type="selection" width="40" fixed> </el-table-column>
       <el-table-column
         type="index"
         label="#"
@@ -203,6 +212,102 @@
         >
       </div>
     </div>
+    <el-dialog
+      title="发票信息"
+      :visible.sync="dialogVisible"
+      width="700px"
+      class="invoice-dialog"
+    >
+      <el-form :model="invoiceForm" ref="ruleForm" label-width="90px">
+        <el-form-item label="创建模式" prop="create_model">
+          <el-radio-group v-model="invoiceForm.create_model">
+            <el-radio :label="0">多个订单合并申请一张汇总发票</el-radio>
+            <el-radio :label="1">每个订单申请一张发票</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="发票类型" prop="invoice_type">
+          <el-radio-group
+            v-model="invoiceForm.invoice_type"
+            @change="handleChangeType"
+          >
+            <el-radio :label="0">普通发票</el-radio>
+            <el-radio :label="1">专用发票</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="抬头类型" prop="invoice_type">
+          <el-radio-group
+            v-model="invoiceForm.invoice_object"
+            :disabled="disabled"
+          >
+            <el-radio :label="0">个人</el-radio>
+            <el-radio :label="1">企业</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="抬头名称" prop="buyer_info_mc">
+          <el-input
+            v-model="invoiceForm.buyer_info_mc"
+            placeholder="必填"
+            @blur="handleTrim('invoiceForm', 'buyer_info_mc')"
+          ></el-input>
+        </el-form-item>
+        <template v-if="invoiceForm.invoice_object === 1">
+          <el-form-item label="单位税号" prop="buyer_info_sh">
+            <el-input
+              v-model="invoiceForm.buyer_info_sh"
+              placeholder="必填"
+              @blur="handleTrim('invoiceForm', 'buyer_info_sh')"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="注册地址" prop="buyer_info_dz">
+            <el-input
+              v-model="invoiceForm.buyer_info_dz"
+              :placeholder="invoiceForm.invoice_type === 0 ? '选填' : '必填'"
+              @blur="handleTrim('invoiceForm', 'buyer_info_dz')"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="注册电话" prop="buyer_info_dh">
+            <el-input
+              v-model="invoiceForm.buyer_info_dh"
+              :placeholder="invoiceForm.invoice_type === 0 ? '选填' : '必填'"
+              @blur="handleTrim('invoiceForm', 'buyer_info_dh')"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="开户银行" prop="buyer_info_khh">
+            <el-input
+              v-model="invoiceForm.buyer_info_khh"
+              :placeholder="invoiceForm.invoice_type === 0 ? '选填' : '必填'"
+              @blur="handleTrim('invoiceForm', 'buyer_info_khh')"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="银行账号" prop="buyer_info_zh">
+            <el-input
+              v-model="invoiceForm.buyer_info_zh"
+              :placeholder="invoiceForm.invoice_type === 0 ? '选填' : '必填'"
+              @blur="handleTrim('invoiceForm', 'buyer_info_zh')"
+            ></el-input>
+          </el-form-item>
+        </template>
+        <template v-else>
+          <el-form-item label="身份证号" prop="buyer_info_sfzh">
+            <el-input
+              v-model="invoiceForm.buyer_info_sfzh"
+              placeholder="必填"
+              @blur="handleTrim('invoiceForm', 'buyer_info_sfzh')"
+            ></el-input>
+          </el-form-item>
+        </template>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          @click="handleSureInvoice"
+          :loading="invoiceLoading"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -319,6 +424,22 @@ export default {
       tableHeight: "", // 表格高度
       kefuShow: true, // 是否显示客服
       kefuCode: false, // 显示客服二维码
+      multipleSelection: [], // 选中的id
+      invoiceForm: {
+        create_model: 0,
+        invoice_type: 0,
+        invoice_object: 0,
+        buyer_info_mc: "",
+        buyer_info_sh: "",
+        buyer_info_dz: "",
+        buyer_info_dh: "",
+        buyer_info_zh: "",
+        buyer_info_khh: "",
+        buyer_info_sfzh: "",
+      },
+      dialogVisible: false,
+      disabled: false,
+      invoiceLoading: false,
     };
   },
   //计算属性 类似于data概念
@@ -327,6 +448,14 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    handleChangeType(val) {
+      if (val === 1) {
+        this.disabled = true;
+        this.invoiceForm.invoice_object = 1;
+      } else {
+        this.disabled = false;
+      }
+    },
     //计算table高度(动态设置table高度)
     getTableHeight() {
       let tableH = 260; //距离页面下方的高度
@@ -453,6 +582,82 @@ export default {
     handleToShlef() {
       this.$router.push({ path: "/bookShelf" });
     },
+    handInvoice() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.warning("请先选择需要开票的订单");
+        return;
+      }
+      this.dialogVisible = true;
+    },
+    // 复选框
+    handleSelectionChange(val) {
+      // this.multipleSelection = [];
+      val.forEach((item) => {
+        this.multipleSelection.push(item.id);
+      });
+      console.log(this.multipleSelection);
+    },
+    // 去掉前后空格
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
+    },
+    // 确定开票
+    handleSureInvoice() {
+      let MethodName = "/ShopServer/Client/OrderManager/SubmitInvoiceApply";
+
+      let data = {
+        order_id_list: this.multipleSelection,
+        create_model: this.invoiceForm.create_model,
+        invoice_type: this.invoiceForm.invoice_type,
+        invoice_object: this.invoiceForm.invoice_object,
+        buyer_info_mc: this.invoiceForm.buyer_info_mc,
+        buyer_info_sh: this.invoiceForm.buyer_info_sh,
+        buyer_info_dz:
+          this.invoiceForm.invoice_object === 1
+            ? this.invoiceForm.buyer_info_dz
+            : "",
+        buyer_info_dh:
+          this.invoiceForm.invoice_object === 1
+            ? this.invoiceForm.buyer_info_dh
+            : "",
+        buyer_info_zh:
+          this.invoiceForm.invoice_object === 1
+            ? this.invoiceForm.buyer_info_zh
+            : "",
+        buyer_info_khh:
+          this.invoiceForm.invoice_object === 1
+            ? this.invoiceForm.buyer_info_khh
+            : "",
+        buyer_info_sfzh:
+          this.invoiceForm.invoice_object === 1
+            ? ""
+            : this.invoiceForm.buyer_info_sfzh,
+      };
+      getLogin(MethodName, data)
+        .then((res) => {
+          this.invoiceLoading = false;
+          if (res.status === 1) {
+            this.$message.success("申请成功，稍后请到发票管理查看");
+            this.dialogVisible = false;
+            this.multipleSelection = [];
+            this.invoiceForm = {
+              create_model: 0,
+              invoice_type: 0,
+              invoice_object: 0,
+              buyer_info_mc: "",
+              buyer_info_sh: "",
+              buyer_info_dz: "",
+              buyer_info_dh: "",
+              buyer_info_zh: "",
+              buyer_info_khh: "",
+              buyer_info_sfzh: "",
+            };
+          }
+        })
+        .catch(() => {
+          this.invoiceLoading = false;
+        });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -565,4 +770,14 @@ export default {
     }
   }
 }
+.common-title-box {
+  display: flex;
+  justify-content: space-between;
+}
+:deep .el-table-column--selection .cell {
+  padding: 0 10px !important;
+}
+:deep .el-form-item {
+  margin-bottom: 10px;
+}
 </style>

src/views/personalCenter/index.vue

@@ -8,26 +8,39 @@
       :touxiang="newTouxiang"
     />
     <div class="main">
-        <ul class="main-left">
-            <li v-for="(itemM,indexM) in menuList" :key="indexM" :class="[menuType===itemM.type?'active':'']" @click="handleChangeMenu(itemM.type)">
-                <svg-icon :icon-class="itemM.icon"></svg-icon>
-                <span>{{itemM.label}}</span>
-            </li>
-        </ul>
-        <div class="main-right">
-            <!-- 个人中心 -->
-            <personal-info v-if="menuType==='user'"></personal-info>
-            <!-- 收藏夹 -->
-            <collect v-if="menuType==='like'"></collect>
-            <!-- 兑换码 -->
-            <conversion-code v-if="menuType==='duihuanma'"></conversion-code>
-            <!-- 我的分享 -->
-            <my-share :data="myShare.data" v-if="menuType==='share'"></my-share>
-            <!-- 我的订单 -->
-            <order-list :data="myShare.data" v-if="menuType==='order'"></order-list>
-            <!-- 个人设置 -->
-            <setting v-if="menuType==='setting'" @changeTouxiang="changeTouxiang"></setting>
-        </div>
+      <ul class="main-left">
+        <li
+          v-for="(itemM, indexM) in menuList"
+          :key="indexM"
+          :class="[menuType === itemM.type ? 'active' : '']"
+          @click="handleChangeMenu(itemM.type)"
+        >
+          <svg-icon :icon-class="itemM.icon"></svg-icon>
+          <span>{{ itemM.label }}</span>
+        </li>
+      </ul>
+      <div class="main-right">
+        <!-- 个人中心 -->
+        <personal-info v-if="menuType === 'user'"></personal-info>
+        <!-- 收藏夹 -->
+        <collect v-if="menuType === 'like'"></collect>
+        <!-- 兑换码 -->
+        <conversion-code v-if="menuType === 'duihuanma'"></conversion-code>
+        <!-- 我的分享 -->
+        <my-share :data="myShare.data" v-if="menuType === 'share'"></my-share>
+        <!-- 我的订单 -->
+        <order-list
+          :data="myShare.data"
+          v-if="menuType === 'order'"
+        ></order-list>
+        <!-- 发票管理 -->
+        <invoice-list v-if="menuType === 'invoice'"></invoice-list>
+        <!-- 个人设置 -->
+        <setting
+          v-if="menuType === 'setting'"
+          @changeTouxiang="changeTouxiang"
+        ></setting>
+      </div>
     </div>
   </div>
 </template>
@@ -36,122 +49,139 @@
 //这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》from ‘《组件路径》';
 import Header from "../../components/Header.vue";
-import PersonalInfo from "./components/PersonalInfo.vue"
-import MyShare from "./components/MyShare.vue"
-import ConversionCode from "./components/ConversionCode.vue"
-import Collect from "./components/Collect.vue"
-import OrderList from "./components/OrderList.vue"
-import Setting from "./components/Setting.vue"
+import PersonalInfo from "./components/PersonalInfo.vue";
+import MyShare from "./components/MyShare.vue";
+import ConversionCode from "./components/ConversionCode.vue";
+import Collect from "./components/Collect.vue";
+import OrderList from "./components/OrderList.vue";
+import Setting from "./components/Setting.vue";
+import InvoiceList from "./components/InvoiceList.vue";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, PersonalInfo, MyShare, ConversionCode, Collect, OrderList, Setting},
+  components: {
+    Header,
+    PersonalInfo,
+    MyShare,
+    ConversionCode,
+    Collect,
+    OrderList,
+    Setting,
+    InvoiceList,
+  },
   props: {},
   data() {
     //这里存放数据
     return {
-      menuList:[
+      menuList: [
         {
-            icon: 'read-record',
-            label: '我的阅读记录',
-            type: 'user'
+          icon: "read-record",
+          label: "我的阅读记录",
+          type: "user",
         },
         {
-            icon: 'like-line',
-            label: '我的收藏',
-            type: 'like'
+          icon: "like-line",
+          label: "我的收藏",
+          type: "like",
         },
         {
-            icon: 'duihuanma',
-            label: '我的兑换码',
-            type: 'duihuanma'
+          icon: "duihuanma",
+          label: "我的兑换码",
+          type: "duihuanma",
         },
         {
-            icon: 'share-box-line',
-            label: '我的分享',
-            type: 'share'
+          icon: "share-box-line",
+          label: "我的分享",
+          type: "share",
         },
         {
-            icon: 'order-personal',
-            label: '订单管理',
-            type: 'order'
+          icon: "order-personal",
+          label: "订单管理",
+          type: "order",
         },
         {
-            icon: 'setting',
-            label: '个人设置',
-            type: 'setting'
-        }
+          icon: "invoice",
+          label: "发票管理",
+          type: "invoice",
+        },
+        {
+          icon: "setting",
+          label: "个人设置",
+          type: "setting",
+        },
       ],
-      menuType: this.$route.query.type?decodeURIComponent(this.$route.query.type):'user', // 菜单类型
+      menuType: this.$route.query.type
+        ? decodeURIComponent(this.$route.query.type)
+        : "user", // 菜单类型
       personalInfo: {
-        name:'张平方',
-        school:'北京市第二中学',
-        class:'3年1班',
-        avatar: require('../../assets/avatar.png'),
-        totalArticle: '416', // 共阅读文章
-        totalTime: '237', // 累计阅读时长
-        totalWords: '4621', // 共阅读词数
-        totalLength: '23768' //累计阅读长度
+        name: "张平方",
+        school: "北京市第二中学",
+        class: "3年1班",
+        avatar: require("../../assets/avatar.png"),
+        totalArticle: "416", // 共阅读文章
+        totalTime: "237", // 累计阅读时长
+        totalWords: "4621", // 共阅读词数
+        totalLength: "23768", //累计阅读长度
       },
-      myShare:{
-        data:[
-            {
-                number:'461',
-                title:'Making room for the pet boom',
-                study:'高一',
-                source:'第865期',
-                useTimes:'1',
-                totalTimes:'3',
-                deadline:'2021.3.12 15:23',
-                status:'sharing'
-            },
-            {
-                number:'460',
-                title:'KEY NOTIONS IN 2023 GOVERNMENT WORK REPORT',
-                study:'高一',
-                source:'第865期',
-                useTimes:'3',
-                totalTimes:'3',
-                deadline:'2021.3.12 15:23',
-                status:'ended'
-            },
-            {
-                number:'459',
-                title:'每日一练',
-                study:'高一',
-                source:'第865期',
-                useTimes:'2',
-                totalTimes:'3',
-                deadline:'2021.3.12 15:23',
-                status:'sharing'
-            },
-            {
-                number:'458',
-                title:'JUST ASK 成长不烦恼 ',
-                study:'高一',
-                source:'第865期',
-                useTimes:'0',
-                totalTimes:'3',
-                deadline:'2021.3.12 15:23',
-                status:'sharing'
-            },
-        ]
+      myShare: {
+        data: [
+          {
+            number: "461",
+            title: "Making room for the pet boom",
+            study: "高一",
+            source: "第865期",
+            useTimes: "1",
+            totalTimes: "3",
+            deadline: "2021.3.12 15:23",
+            status: "sharing",
+          },
+          {
+            number: "460",
+            title: "KEY NOTIONS IN 2023 GOVERNMENT WORK REPORT",
+            study: "高一",
+            source: "第865期",
+            useTimes: "3",
+            totalTimes: "3",
+            deadline: "2021.3.12 15:23",
+            status: "ended",
+          },
+          {
+            number: "459",
+            title: "每日一练",
+            study: "高一",
+            source: "第865期",
+            useTimes: "2",
+            totalTimes: "3",
+            deadline: "2021.3.12 15:23",
+            status: "sharing",
+          },
+          {
+            number: "458",
+            title: "JUST ASK 成长不烦恼 ",
+            study: "高一",
+            source: "第865期",
+            useTimes: "0",
+            totalTimes: "3",
+            deadline: "2021.3.12 15:23",
+            status: "sharing",
+          },
+        ],
       },
-      newTouxiang: ''
-    }
+      newTouxiang: "",
+    };
   },
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
   watch: {
-    '$route': {
+    $route: {
       handler(val, oldVal) {
         const _this = this;
         if (val) {
-          if(this.$route.query.type){
-            _this.menuType = decodeURIComponent(this.$route.query.type)
-          }else{
-            _this.menuType = 'user'
+          if (this.$route.query.type) {
+            _this.menuType = decodeURIComponent(this.$route.query.type);
+          } else {
+            _this.menuType = "user";
           }
         }
       },
@@ -162,93 +192,91 @@ export default {
   //方法集合
   methods: {
     // 切换菜单
-    handleChangeMenu(value){
-        this.menuType = value
-        this.$router.push({
-            path: '/peraonal',
-            query: {
-                headerConfig: this.$route.query.headerConfig,
-                type:encodeURIComponent(value)
-            },
-        }); 
+    handleChangeMenu(value) {
+      this.menuType = value;
+      this.$router.push({
+        path: "/peraonal",
+        query: {
+          headerConfig: this.$route.query.headerConfig,
+          type: encodeURIComponent(value),
+        },
+      });
+    },
+    changeTouxiang(img) {
+      this.newTouxiang = img;
     },
-    changeTouxiang(img){
-        this.newTouxiang = img
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-  },
+  created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
-.peraonal{
-    min-height: calc(100vh - 64px);
+.peraonal {
+  min-height: calc(100vh - 64px);
 }
-.main{
-    background: #F7F8FA;
-    height: calc(100vh - 64px);
-    display: flex;
-    ul{
-        margin: 0;
-        background: #FFFFFF;
-        padding: 8px;
-        width: 200px;
-        list-style: none;
-        flex-shrink: 0;
-        li{
-            margin-bottom: 4px;
-            padding: 9px 12px;
-            display: flex;
-            align-items: center;
-            border-radius: 2px;
-            cursor: pointer;
-            .svg-icon{
-                width: 14px;
-                height: 14px;
-                color: #4E5969;
-            }
-            span{
-                padding-left: 16px;
-                font-size: 14px;
-                line-height: 22px;
-                color: #4E5969;
-            }
-            &:hover{
-                background: #F2F3F5;
-            }
-            &.active{
-                background: #F2F3F5;
-                .svg-icon,span{
-                    color: #165DFF;
-                    font-weight: 500;
-                }
-            }
+.main {
+  background: #f7f8fa;
+  height: calc(100vh - 64px);
+  display: flex;
+  ul {
+    margin: 0;
+    background: #ffffff;
+    padding: 8px;
+    width: 200px;
+    list-style: none;
+    flex-shrink: 0;
+    li {
+      margin-bottom: 4px;
+      padding: 9px 12px;
+      display: flex;
+      align-items: center;
+      border-radius: 2px;
+      cursor: pointer;
+      .svg-icon {
+        width: 14px;
+        height: 14px;
+        color: #4e5969;
+      }
+      span {
+        padding-left: 16px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #4e5969;
+      }
+      &:hover {
+        background: #f2f3f5;
+      }
+      &.active {
+        background: #f2f3f5;
+        .svg-icon,
+        span {
+          color: #165dff;
+          font-weight: 500;
         }
+      }
     }
-    &-right{
-        flex: 1;
-        margin: 16px;
-        overflow: auto; // 订单管理的表格
-    }
+  }
+  &-right {
+    flex: 1;
+    margin: 16px;
+    overflow: auto; // 订单管理的表格
+  }
 }
-</style>
+</style>

src/views/userAgreement.vue

@@ -55,12 +55,18 @@
       <div class="userAgreement-item userAgreement-item-little">
         <b style="color: red">1.</b>
         <p style="color: red">
-          报刊/画刊/精读课：单期订阅不退款；多期预定退款依照发行时间执行，已发行的部分不退，未发行的部分退款。
+          报刊/画刊：退款规则依照发行时间，已发行的部分不进行退款，未发行的部分可退款。
         </p>
       </div>
       <div class="userAgreement-item userAgreement-item-little">
         <b style="color: red">2.</b>
-        <p style="color: red">视频课：原则上不退款。</p>
+        <p style="color: red">
+          精读课堂：单期购买不进行退款；年订阅下单后30天内可退款，逾期不进行退款。
+        </p>
+      </div>
+      <div class="userAgreement-item userAgreement-item-little">
+        <b style="color: red">3.</b>
+        <p style="color: red">视频课：原则上不进行退款。</p>
       </div>
       <div class="userAgreement-item">
         <b>用户义务：</b>