style(KIP-7551): 发票详情页面

src/pages/parkingFee/components/base/parkingReceipt/parkingInvoice.vue

@@ -0,0 +1,161 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <div class="part top">
+      <div class="part-item lines header">
+        <span class="part-item-key">抬头</span>
+        <div class="part-item-value" @click="showHeader">
+          {{ order.invoiceTitleName }}
+          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+        </div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票订单号</span>
+        <span class="part-item-value">{{ order.orderno }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票类型</span>
+        <span class="part-item-value">增值税普通发票</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票日期</span>
+        <span class="part-item-value">{{
+          order.paperDrewDate ? order.paperDrewDate : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票号码</span>
+        <span class="part-item-value">{{
+          order.invoiceno ? order.invoiceno : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票代码</span>
+        <span class="part-item-value">{{
+          order.invoiceCode ? order.invoiceCode : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">备注</span>
+        <span class="part-item-value">{{ order.remark }}</span>
+      </div>
+    </div>
+    <div class="part middle">
+      <div class="part-item">
+        <span class="part-item-key">总金额</span>
+        <span class="part-item-value"
+          ><span class="purple">{{ order.invoiceAmount / 100 }}</span
+          >元</span
+        >
+      </div>
+      <div class="part-item">
+        <span class="part-item-key"
+          >共<span class="purple">{{ order.payNumber }}笔</span>缴费记录</span
+        >
+        <div class="part-item-value" @click="gotoRecordDetail">
+          <span>查看详情</span>
+          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div
+        :class="{
+          btn: true,
+          'push-again-btn': true,
+          'blue-push-again-btn': custTypeId === 1,
+          'green-push-again-btn': custTypeId === 2,
+        }"
+        @click="showInvoiceDetail"
+      >
+        查看发票
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingInvoiceJs from '../../../mixins/parkingReceipt/parkingInvoice';
+
+export default {
+  mixins: [parkingInvoiceJs],
+};
+</script>
+
+<style lang="less" scoped>
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f2f2f2;
+  padding: 20px;
+  box-sizing: border-box;
+  .part {
+    background-color: #ffffff;
+    padding: 0 30px;
+    border-radius: 20px;
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+      .part-item-key {
+        color: #4c4c4d;
+      }
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        > img {
+          width: 30px;
+        }
+      }
+    }
+    .tab-title {
+      color: #676767;
+      padding: 30px 0px;
+    }
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+  }
+  .top {
+    padding-top: 20px;
+  }
+  .middle {
+    margin: 20px 0;
+    > .part-item {
+      background-color: #ffffff;
+    }
+    .purple {
+      color: #ed1c24;
+    }
+  }
+  .footer {
+    padding-top: 20px;
+    .btn {
+      margin: 20px 60px;
+      color: #ffffff;
+      border-radius: 50px;
+      text-align: center;
+      padding: 20px 0;
+    }
+    .push-again-btn {
+      background-image: linear-gradient(to right, #7d4ea1, #40397c);
+    }
+    .blue-push-again-btn {
+      .color-background-color('blue');
+    }
+    .green-push-again-btn {
+      .color-background-color('green');
+    }
+  }
+}
+</style>

src/pages/parkingFee/components/officeBlue/parkingReceipt/parkingInvoice.vue

@@ -0,0 +1,175 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <div class="part top">
+      <div class="part-item lines header">
+        <span class="part-item-key">抬头</span>
+        <div class="part-item-value invoiceTitleName" @click="showHeader">
+          {{ order.invoiceTitleName || 'order' }}
+          <van-icon name="arrow" size="10" color="#D8DAE0" />
+        </div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票订单号</span>
+        <span class="part-item-value">{{ order.orderno }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票类型</span>
+        <span class="part-item-value">增值税普通发票</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开票日期</span>
+        <span class="part-item-value">{{
+          order.paperDrewDate ? order.paperDrewDate : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票号码</span>
+        <span class="part-item-value">{{
+          order.invoiceno ? order.invoiceno : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">发票代码</span>
+        <span class="part-item-value">{{
+          order.invoiceCode ? order.invoiceCode : '-'
+        }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">备注</span>
+        <span class="part-item-value">{{ order.remark }}</span>
+      </div>
+    </div>
+    <div class="part middle">
+      <div class="part-item">
+        <span class="part-item-key">总金额</span>
+        <span class="part-item-value"
+          ><span class="purple">¥{{ order.invoiceAmount / 100 }}</span></span
+        >
+      </div>
+      <div class="part-item">
+        <span class="part-item-key"
+          >共<span class="purple-order">{{ order.payNumber }}笔</span
+          >缴费记录</span
+        >
+        <div class="part-item-value" @click="gotoRecordDetail">
+          <span>查看详情</span>
+          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="btn" @click="showInvoiceDetail">查看发票</div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingInvoiceJs from '../../../mixins/parkingReceipt/parkingInvoice';
+
+export default {
+  mixins: [parkingInvoiceJs],
+};
+</script>
+
+<style lang="less" scoped>
+
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  padding: 20px;
+  box-sizing: border-box;
+
+  .part {
+    padding: 0 30px;
+    border-radius: 20px;
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid #d8dae0;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+
+      .part-item-key {
+        font-size: 30px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 42px;
+      }
+
+      .part-item-value {
+        color: #6f6f70;
+        text-align: right;
+        display: flex;
+        align-items: center;
+        &.invoiceTitleName {
+          font-size: 30px;
+          font-weight: 400;
+          color: #333333;
+          line-height: 42px;
+        }
+        > img {
+          width: 30px;
+        }
+      }
+    }
+
+    .tab-title {
+      color: #676767;
+      padding: 30px 0px;
+    }
+
+    .lines {
+      border-bottom: 2px solid #ececec;
+    }
+
+    .invoice-more {
+      padding-bottom: 8px;
+    }
+  }
+
+  .top {
+    padding-top: 20px;
+  }
+
+  .middle {
+    margin: 20px 0;
+
+    > .part-item {
+      // background-color: #ffffff;
+    }
+
+    .purple {
+      font-size: 30px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 42px;
+    }
+    .purple-order {
+      color: #064c8a;
+    }
+  }
+
+  .footer {
+    padding-top: 20px;
+    .btn {
+      // margin: 20px 60px;
+      text-align: center;
+      // padding: 20px 0;
+      height: 90px;
+      line-height: 90px;
+      background: #064c8a;
+      border-radius: 45px;
+      font-size: 34px;
+      font-weight: 400;
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/pages/parkingFee/mixins/parkingReceipt/parkingInvoice.js

@@ -0,0 +1,91 @@
+// const app = getApp()
+const app = {};
+import downloadBtnIcon from '../../static/images/download.png';
+import arrowIcon from '../../static/images/arrows.png';
+import { mapState } from 'vuex';
+import uni from '@/utils/uniHooks';
+
+export default {
+  data() {
+    return {
+      picUrl: this.$picUrl,
+      arrowIcon: arrowIcon,
+      downloadBtnIcon: downloadBtnIcon,
+      order: {},
+      webviewStyles: {
+        progress: {
+          color: '#FF3333',
+        },
+      },
+      id: '',
+    };
+  },
+  created() {
+    console.log('查看发票详情的id', this.$route.query);
+    this.id = this.$route.query.id;
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '发票详情',
+      });
+    }, 300);
+    this.getInvoicedDetail(this.id);
+  },
+  computed: {
+    ...mapState({
+      custTypeId: (state) => state.custTypeId,
+    }),
+  },
+  methods: {
+    // 根据发票id获取发票详情信息(含发票抬头信息),
+    getInvoicedDetail(id) {
+      //
+      // console.log('根据发票id获取发票详情信息(含发票抬头信息),', id);
+      const self = this;
+      const data = {
+        id: id,
+      };
+      self.$md(data);
+      uni.request({
+        url: self.$baseURL + 'api/1.0/invoice/getInvoicedDetail?id=' + id,
+        method: 'POST',
+        data: data,
+        header: JSON.parse(uni.getStorageSync('handleUser')),
+        success: (res) => {
+          console.log('获取发票详情信息', res.data);
+          if (res.data.code === 0) {
+            self.order = res.data.data;
+          } else {
+            uni.showToast({
+              title: res.data.msg,
+              duration: 2000,
+              icon: 'none',
+            });
+          }
+        },
+        fail: () => {
+          uni.showToast({
+            title: '服务器开小差了呢，请您稍后再试',
+            icon: 'none',
+          });
+        },
+      });
+    },
+    showHeader() {
+      this.$router.push({
+        path: 'parkingHeaderDetail?header=' + JSON.stringify(this.order),
+      });
+    },
+    gotoRecordDetail() {
+      this.$router.push({
+        path: 'parkingOrderDetail?id=' + this.order.id,
+      });
+    },
+    showInvoiceDetail() {
+      this.$router.push({
+        path: 'parkingInvoiceImage?order=' + JSON.stringify(this.order),
+      });
+    },
+  },
+};

src/pages/parkingFee/parkingReceipt/parkingInvoice.vue

@@ -1,261 +1,18 @@
 <template>
-  <scroll-view class="scroll-Y" scroll-y>
-    <div class="part top">
-      <div class="part-item lines header">
-        <span class="part-item-key">抬头</span>
-        <div class="part-item-value invoiceTitleName" @click="showHeader">
-          {{ order.invoiceTitleName || 'order' }}
-          <van-icon name="arrow" size="10" color="#D8DAE0" />
-        </div>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">开票订单号</span>
-        <span class="part-item-value">{{ order.orderno }}</span>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">发票类型</span>
-        <span class="part-item-value">增值税普通发票</span>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">开票日期</span>
-        <span class="part-item-value">{{
-          order.paperDrewDate ? order.paperDrewDate : '-'
-        }}</span>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">发票号码</span>
-        <span class="part-item-value">{{
-          order.invoiceno ? order.invoiceno : '-'
-        }}</span>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">发票代码</span>
-        <span class="part-item-value">{{
-          order.invoiceCode ? order.invoiceCode : '-'
-        }}</span>
-      </div>
-      <div class="part-item">
-        <span class="part-item-key">备注</span>
-        <span class="part-item-value">{{ order.remark }}</span>
-      </div>
-    </div>
-    <div class="part middle">
-      <div class="part-item">
-        <span class="part-item-key">总金额</span>
-        <span class="part-item-value"
-          ><span class="purple">¥{{ order.invoiceAmount / 100 }}</span></span
-        >
-      </div>
-      <div class="part-item">
-        <span class="part-item-key"
-          >共<span class="purple-order">{{ order.payNumber }}笔</span
-          >缴费记录</span
-        >
-        <div class="part-item-value" @click="gotoRecordDetail">
-          <span>查看详情</span>
-          <img class="invoice-header-arrow" :src="arrowIcon" mode="widthFix" />
-        </div>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="btn" @click="showInvoiceDetail">查看发票</div>
-    </div>
-  </scroll-view>
+  <div>
+    <component :is="componentName"></component>
+  </div>
 </template>
 
 <script>
-// const app = getApp()
-const app = {};
-import downloadBtnIcon from '../static/images/download.png';
-import arrowIcon from '../static/images/arrows.png';
-import { mapState } from 'vuex';
-import uni from '@/utils/uniHooks';
+import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingInvoice.vue';
+import baseParkingFeeCom from '../components/base/parkingReceipt/parkingInvoice.vue';
+import baseMixins from '../mixins/base'
 export default {
-  data() {
-    return {
-      picUrl: this.$picUrl,
-      arrowIcon: arrowIcon,
-      downloadBtnIcon: downloadBtnIcon,
-      order: {},
-      webviewStyles: {
-        progress: {
-          color: '#FF3333',
-        },
-      },
-      id: '',
-    };
-  },
-  created() {
-    console.log('查看发票详情的id', this.$route.query);
-    this.id = this.$route.query.id;
-  },
-  mounted() {
-    setTimeout(() => {
-      uni.setNavigationBarTitle({
-        title: '发票详情',
-      });
-    }, 300);
-    this.getInvoicedDetail(this.id);
-  },
-  computed: {
-    ...mapState({
-      custTypeId: (state) => state.custTypeId,
-    }),
-  },
-  methods: {
-    // 根据发票id获取发票详情信息(含发票抬头信息),
-    getInvoicedDetail(id) {
-      //
-      // console.log('根据发票id获取发票详情信息(含发票抬头信息),', id);
-      const self = this;
-      const data = {
-        id: id,
-      };
-      self.$md(data);
-      uni.request({
-        url: self.$baseURL + 'api/1.0/invoice/getInvoicedDetail?id=' + id,
-        method: 'POST',
-        data: data,
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: (res) => {
-          console.log('获取发票详情信息', res.data);
-          if (res.data.code === 0) {
-            self.order = res.data.data;
-          } else {
-            uni.showToast({
-              title: res.data.msg,
-              duration: 2000,
-              icon: 'none',
-            });
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none',
-          });
-        },
-      });
-    },
-    showHeader() {
-      this.$router.push({
-        path: 'parkingHeaderDetail?header=' + JSON.stringify(this.order),
-      });
-    },
-    gotoRecordDetail() {
-      this.$router.push({
-        path: 'parkingOrderDetail?id=' + this.order.id,
-      });
-    },
-    showInvoiceDetail() {
-      this.$router.push({
-        path: 'parkingInvoiceImage?order=' + JSON.stringify(this.order),
-      });
-    },
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
   },
 };
 </script>
-
-<style lang="less" scoped>
-@import '../../../styles/common.less';
-
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #f4f7ff;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .part {
-    padding: 0 30px;
-    border-radius: 20px;
-    background: #fafbff;
-    border-radius: 4px;
-    border: 1px solid #d8dae0;
-
-    .part-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20px 0;
-      box-sizing: border-box;
-
-      .part-item-key {
-        font-size: 30px;
-        font-weight: 400;
-        color: #999999;
-        line-height: 42px;
-      }
-
-      .part-item-value {
-        color: #6f6f70;
-        text-align: right;
-        display: flex;
-        align-items: center;
-        &.invoiceTitleName {
-          font-size: 30px;
-          font-weight: 400;
-          color: #333333;
-          line-height: 42px;
-        }
-        > img {
-          width: 30px;
-        }
-      }
-    }
-
-    .tab-title {
-      color: #676767;
-      padding: 30px 0px;
-    }
-
-    .lines {
-      border-bottom: 2px solid #ececec;
-    }
-
-    .invoice-more {
-      padding-bottom: 8px;
-    }
-  }
-
-  .top {
-    padding-top: 20px;
-  }
-
-  .middle {
-    margin: 20px 0;
-
-    > .part-item {
-      // background-color: #ffffff;
-    }
-
-    .purple {
-      font-size: 30px;
-      font-weight: 600;
-      color: #333333;
-      line-height: 42px;
-    }
-    .purple-order {
-      color: #064c8a;
-    }
-  }
-
-  .footer {
-    padding-top: 20px;
-    .btn {
-      // margin: 20px 60px;
-      text-align: center;
-      // padding: 20px 0;
-      height: 90px;
-      line-height: 90px;
-      background: #064c8a;
-      border-radius: 45px;
-      font-size: 34px;
-      font-weight: 400;
-      color: #ffffff;
-    }
-  }
-}
-</style>