style(KIP-7551): 抬头详情页面

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

@@ -0,0 +1,92 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y >
+<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <div class="part" v-if="header.invoiceTitleType === 0">
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司税号</span>
+        <span class="part-item-value">{{ header.corporationTax }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司地址</span>
+        <span class="part-item-value">{{ header.companyAddress }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司电话</span>
+        <span class="part-item-value">{{ header.companyTel }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户银行</span>
+        <span class="part-item-value">{{ header.depositBank }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户账户</span>
+        <span class="part-item-value">{{ header.accountNumber }}</span>
+      </div>
+    </div>
+    <div class="part" v-else>
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">个人/非企业单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingHeaderDetailJs from '../../../mixins/parkingReceipt/parkingHeaderDetail';
+
+export default {
+  mixins: [parkingHeaderDetailJs],
+};
+</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;
+        > image {
+          width: 30px;
+        }
+      }
+    }
+  }
+
+}
+
+</style>

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

@@ -0,0 +1,102 @@
+<template>
+  <scroll-view class="scroll-Y" scroll-y>
+    <div class="part" v-if="header.invoiceTitleType === 0">
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司税号</span>
+        <span class="part-item-value">{{ header.corporationTax }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司地址</span>
+        <span class="part-item-value">{{ header.companyAddress }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">公司电话</span>
+        <span class="part-item-value">{{ header.companyTel }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户银行</span>
+        <span class="part-item-value">{{ header.depositBank }}</span>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">开户账户</span>
+        <span class="part-item-value">{{ header.accountNumber }}</span>
+      </div>
+    </div>
+    <div class="part" v-else>
+      <div class="part-item">
+        <span class="part-item-key">抬头类型</span>
+        <div class="part-item-value">个人/非企业单位</div>
+      </div>
+      <div class="part-item">
+        <span class="part-item-key">抬头名称</span>
+        <span class="part-item-value">{{ header.invoiceTitleName }}</span>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingHeaderDetailJs from '../../../mixins/parkingReceipt/parkingHeaderDetail';
+
+export default {
+  mixins: [parkingHeaderDetailJs],
+};
+</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;
+    background: #fafbff;
+    border-radius: 4px;
+    border: 1px solid #d8dae0;
+    padding-top: 30px;
+
+    .part-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-bottom: 30px;
+      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;
+        font-size: 30px;
+        font-weight: 400;
+        color: #333333;
+        line-height: 42px;
+
+        > img {
+          width: 30px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,21 @@
+import uni from '@/utils/uniHooks';
+
+export default {
+  data() {
+    return {
+      header: {},
+    };
+  },
+  created() {
+    // this.header = JSON.parse(options.header);
+    this.header = JSON.parse(this.$route.query.header);
+    console.log('获取的发票信息', this.header);
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '抬头详情',
+      });
+    }, 300);
+  },
+};

src/pages/parkingFee/parkingReceipt/parkingHeaderDetail.vue

@@ -1,117 +1,18 @@
-<template>
-    <scroll-view class="scroll-Y" scroll-y>
-        <div class="part" v-if="header.invoiceTitleType === 0">
-            <div class="part-item">
-                <span class="part-item-key">抬头类型</span>
-                <div class="part-item-value">单位</div>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">抬头名称</span>
-                <span class="part-item-value">{{ header.invoiceTitleName }}</span>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">公司税号</span>
-                <span class="part-item-value">{{ header.corporationTax }}</span>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">公司地址</span>
-                <span class="part-item-value">{{ header.companyAddress }}</span>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">公司电话</span>
-                <span class="part-item-value">{{ header.companyTel }}</span>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">开户银行</span>
-                <span class="part-item-value">{{ header.depositBank }}</span>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">开户账户</span>
-                <span class="part-item-value">{{ header.accountNumber }}</span>
-            </div>
-        </div>
-        <div class="part" v-else>
-            <div class="part-item">
-                <span class="part-item-key">抬头类型</span>
-                <div class="part-item-value">个人/非企业单位</div>
-            </div>
-            <div class="part-item">
-                <span class="part-item-key">抬头名称</span>
-                <span class="part-item-value">{{ header.invoiceTitleName }}</span>
-            </div>
-        </div>
-    </scroll-view>
-</template>
-
-<script>
-import uni from '@/utils/uniHooks'
-export default {
-    data() {
-        return {
-            header: {},
-        };
-    },
-    created() {
-        // this.header = JSON.parse(options.header);
-        this.header = JSON.parse(this.$route.query.header);
-        console.log('获取的发票信息', this.header);
-    },
-    mounted() {
-        setTimeout(() => {
-            uni.setNavigationBarTitle({
-                title: '抬头详情',
-            });
-        }, 300);
-    },
-};
-</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;
-        background: #fafbff;
-        border-radius: 4px;
-        border: 1px solid #d8dae0;
-        padding-top: 30px;
-
-        .part-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding-bottom: 30px;
-            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;
-                font-size: 30px;
-                font-weight: 400;
-                color: #333333;
-                line-height: 42px;
-
-                >img {
-                    width: 30px;
-                }
-            }
-        }
-    }
-}
-</style>
+<template>
+  <div>
+    <component :is="componentName"></component>
+  </div>
+</template>
+
+<script>
+import officeBlueCom from '../components/officeBlue/parkingReceipt/parkingHeaderDetail.vue';
+import baseParkingFeeCom from '../components/base/parkingReceipt/parkingHeaderDetail.vue';
+import baseMixins from '../mixins/base'
+export default {
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
+  },
+};
+</script>