style(KIP-7551): 缴费成功提示页面

src/crmPages/parkingReceipt/parkingApplication.vue

@@ -459,11 +459,6 @@ export default {
               uni.redirectTo({
                 url: '/pages/parkingFee/parkingReceipt/parkingReceipt',
               });
-              // uni.redirectTo({
-              //   url:
-              //     '/pages/parkingFee/parkingReceipt/parkingInvoiceApply?id=' +
-              //     res.data.data.id,
-              // })
             } else {
               this.parkingTrack.track(400);
               uni.showToast({

src/pages/parkingFee/components/base/parkingFeeSuccess.vue

@@ -0,0 +1,77 @@
+<template>
+  <scroll-view scroll-y="true" class="scroll-Y">
+<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <img :src="icon" />
+    <div style="font-weight:bold;font-size: 32px;">[支付成功]</div>
+    <div style="font-size: 30px;color: #888888;margin-top: 10px;">{{carno | formatCarno}}停车费支付成功</div>
+    <div style="font-size: 30px;color: #888888;margin-top: 10px;">请在<span style="color: red;">{{outParkCharging}}分钟</span>内离场</div>
+    <div :class="{'page_button': true, 'blue_page_button': custTypeId === 1, 'green_page_button': custTypeId === 2}" @click="page_button">查看缴费记录</div>
+    <div :class="{'page_button1': true, 'blue_page_button1': custTypeId === 1, 'green_page_button1': custTypeId === 2}" @click="page_button1">返回首页</div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeeSuccessJs from '../../mixins/parkingFeeSuccess'
+export default {
+  mixins:[parkingFeeSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+//@import '../../styles/common.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #fff;
+  text-align: center;
+  img {
+    width: 160px;
+    height: 160px;
+    //margin-top: 250px;
+    margin: 250px auto 0;
+  }
+}
+.page_button {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #fff;
+  background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
+}
+.blue_page_button {
+  .color-background-color('blue')
+}
+.green_page_button {
+  .color-background-color('green')
+}
+.page_button1 {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #7e4fa1;
+  border:1px solid  #7e4fa1;
+}
+.style-color(@value) {
+  @color: 'color-@{value}';
+  color: @@color;
+  border-color: @@color;
+}
+.blue_page_button1 {
+  .style-color('blue')
+}
+.green_page_button1 {
+  .style-color('green')
+}
+</style>
+

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

@@ -138,6 +138,7 @@
         </div>
         <div class="part-item default-email top" @click="changeDefaultEMail">
           <van-checkbox v-model="isDefaultEMail" icon-size="30PX"
+                        checked-color="#ed1c24"
             ><span class="text">保存电子邮箱为默认邮箱</span></van-checkbox
           >
         </div>

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

@@ -273,7 +273,7 @@ export default {
   }
 }
 
-.invoice-header {
+.invoice-header,.invoice-more {
   .van-radio--horizontal {
     margin-right: 0;
   }

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

@@ -4,23 +4,22 @@
 
     <div class="choose-invoice-header" v-if="list.length">
       <van-radio-group class="radios">
-        <label
+        <div
           class="uni-list-cell uni-list-cell-pd radio-label lines"
           v-for="(item, index) in list"
           :key="index"
-          :index="item.id"
         >
           <div
             class="invoice-header-info"
-            @click.native="chooseHeader(item, index)"
+            @click="chooseHeader(item, index)"
           >
             <!-- <div><radio :value="item.id" :checked="index === current" /></div> -->
             <div class="invoice-header-text">
               <div class="invoice-header-name">
                 <div class="invoice-header-name-text">
                   {{ item.invoiceTitleName
-                  }}<text class="isDefault" v-if="item.setDefault === 1"
-                >默认</text
+                  }}<span class="isDefault" v-if="item.setDefault === 1"
+                >默认</span
                 >
                 </div>
                 <div class="invoice-header-name-icon">
@@ -48,9 +47,10 @@
               </div>
             </div>
           </div>
-        </label>
+        </div>
       </van-radio-group>
     </div>
+
     <div class="choose-invoice-header noData" v-else>
       <img class="noDataImg" :src="noDataIcon" mode="widthFix" />
       <div class="">您还没添加发票抬头</div>

src/pages/parkingFee/components/officeBlue/parkingFeeSuccess.vue

@@ -0,0 +1,98 @@
+<template>
+  <scroll-view scroll-y="true" class="scroll-Y">
+    <img :src="greenIcon" style="margin: 30px auto; display: block" />
+    <div style="font-weight: bold; color: #333; font-size: 34px">
+      [支付成功]
+    </div>
+    <div style="font-size: 34px; color: #999; margin-top: 10px">
+      {{ carno | formatCarno }}停车费支付成功
+    </div>
+    <div style="font-size: 34px; color: #999; margin-top: 10px">
+      请在<span style="color: #064c8a">{{ outParkCharging }}分钟</span>内离场
+    </div>
+    <div
+      :class="{
+        page_button: true,
+        blue_page_button: custTypeId === 1,
+        green_page_button: custTypeId === 2,
+      }"
+      @click="page_button"
+    >
+      查看缴费记录
+    </div>
+    <div
+      :class="{
+        page_button1: true,
+        blue_page_button1: custTypeId === 1,
+        green_page_button1: custTypeId === 2,
+      }"
+      @click="page_button1"
+    >
+      返回首页
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeeSuccessJs from '../../mixins/parkingFeeSuccess'
+export default {
+  mixins:[parkingFeeSuccessJs]
+}
+</script>
+
+<style lang="less" scoped>
+// @import '../../styles/mixins.less';
+.scroll-Y {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  background: #f4f7ff;
+  text-align: center;
+  img {
+    width: 160px;
+    height: 160px;
+    margin-top: 250px;
+  }
+}
+.page_button {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #fff;
+  //   background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+  background-color: #064c8a;
+}
+.blue_page_button {
+  .color-background-color('blue');
+}
+.green_page_button {
+  .color-background-color('green');
+}
+.page_button1 {
+  width: 86%;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 40px;
+  margin-top: 40px;
+  margin-left: 7%;
+  font-size: 30px;
+  color: #064c8a;
+  border: 1px solid #064c8a;
+}
+.style-color(@value) {
+  @color: 'color-@{value}';
+  color: @@color;
+  border-color: @@color;
+}
+.blue_page_button1 {
+  .style-color('blue');
+}
+.green_page_button1 {
+  .style-color('green');
+}
+</style>

src/pages/parkingFee/mixins/parkingFeeSuccess.js

@@ -0,0 +1,51 @@
+import payIcon from '../static/images/hint.png';
+import { mapState } from 'vuex';
+
+export default {
+  onLoad(params) {
+    const parkInfo = JSON.parse(uni.getStorageSync('parkinfo'));
+    this.carno = params.carno;
+    if (parkInfo && parkInfo.outParkCharging) {
+      this.outParkCharging = parkInfo.outParkCharging;
+    }
+  },
+  data() {
+    return {
+      carno: '',
+      outParkCharging: 15,
+      blueIcon: this.$picUrl + '/images/icon-success-blue.png',
+      greenIcon: this.$picUrl + '/images/icon-success-green.png',
+    };
+  },
+  computed: {
+    ...mapState({
+      custTypeId: (state) => state.custTypeId,
+    }),
+    icon() {
+      return this.custTypeId === 0
+        ? payIcon
+        : this.custTypeId === 1
+        ? this.blueIcon
+        : this.greenIcon;
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '提示',
+      });
+    }, 300);
+  },
+  methods: {
+    page_button() {
+      this.$router.replace({
+        path: 'parkingFeeList',
+      });
+    },
+    page_button1() {
+      this.$router.replace({
+        path: 'home',
+      });
+    },
+  },
+};

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

@@ -344,11 +344,6 @@
   this.$router.replace({
   path: 'parkingReceipt',
 });
-  // this.$router.replace({
-  //   path:
-  //     '/pages/parkingFee/parkingReceipt/parkingInvoiceApply?id=' +
-  //     res.data.data.id,
-  // })
 } else {
   /* uni.showToast({
    title: res.data.msg,

src/pages/parkingFee/parkingFeeSuccess.vue

@@ -1,144 +1,18 @@
 <template>
-  <scroll-view scroll-y="true" class="scroll-Y">
-    <img :src="greenIcon" style="margin: 30px auto; display: block" />
-    <div style="font-weight: bold; color: #333; font-size: 34px">
-      [支付成功]
-    </div>
-    <div style="font-size: 34px; color: #999; margin-top: 10px">
-      {{ carno | formatCarno }}停车费支付成功
-    </div>
-    <div style="font-size: 34px; color: #999; margin-top: 10px">
-      请在<span style="color: #064c8a">{{ outParkCharging }}分钟</span>内离场
-    </div>
-    <div
-      :class="{
-        page_button: true,
-        blue_page_button: custTypeId === 1,
-        green_page_button: custTypeId === 2,
-      }"
-      @click="page_button"
-    >
-      查看缴费记录
-    </div>
-    <div
-      :class="{
-        page_button1: true,
-        blue_page_button1: custTypeId === 1,
-        green_page_button1: custTypeId === 2,
-      }"
-      @click="page_button1"
-    >
-      返回首页
-    </div>
-  </scroll-view>
+  <div>
+    <component :is="componentName"></component>
+  </div>
 </template>
 
 <script>
-import payIcon from './static/images/hint.png';
-import { mapState } from 'vuex';
+import officeBlueCom from './components/officeBlue/parkingFeeSuccess.vue';
+import baseParkingFeeCom from './components/base/parkingFeeSuccess.vue';
+import baseMixins from './mixins/base'
 export default {
-  onLoad(params) {
-    const parkInfo = JSON.parse(uni.getStorageSync('parkinfo'));
-    this.carno = params.carno;
-    if (parkInfo && parkInfo.outParkCharging) {
-      this.outParkCharging = parkInfo.outParkCharging;
-    }
-  },
-  data() {
-    return {
-      carno: '',
-      outParkCharging: 15,
-      blueIcon: this.$picUrl + '/images/icon-success-blue.png',
-      greenIcon: this.$picUrl + '/images/icon-success-green.png',
-    };
-  },
-  computed: {
-    ...mapState({
-      custTypeId: (state) => state.custTypeId,
-    }),
-    icon() {
-      return this.custTypeId === 0
-        ? payIcon
-        : this.custTypeId === 1
-        ? this.blueIcon
-        : this.greenIcon;
-    },
-  },
-  mounted() {
-    setTimeout(() => {
-      uni.setNavigationBarTitle({
-        title: '提示',
-      });
-    }, 300);
-  },
-  methods: {
-    page_button() {
-      this.$router.replace({
-        path: 'parkingFeeList',
-      });
-    },
-    page_button1() {
-      this.$router.replace({
-        path: 'home',
-      });
-    },
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
   },
 };
 </script>
-
-<style lang="less" scoped>
-// @import '../../styles/mixins.less';
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  background: #f4f7ff;
-  text-align: center;
-  img {
-    width: 160px;
-    height: 160px;
-    margin-top: 250px;
-  }
-}
-.page_button {
-  width: 86%;
-  height: 80px;
-  line-height: 80px;
-  border-radius: 40px;
-  margin-top: 40px;
-  margin-left: 7%;
-  font-size: 30px;
-  color: #fff;
-  //   background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-  background-color: #064c8a;
-}
-.blue_page_button {
-  .color-background-color('blue');
-}
-.green_page_button {
-  .color-background-color('green');
-}
-.page_button1 {
-  width: 86%;
-  height: 80px;
-  line-height: 80px;
-  border-radius: 40px;
-  margin-top: 40px;
-  margin-left: 7%;
-  font-size: 30px;
-  color: #064c8a;
-  border: 1px solid #064c8a;
-}
-.style-color(@value) {
-  @color: 'color-@{value}';
-  color: @@color;
-  border-color: @@color;
-}
-.blue_page_button1 {
-  .style-color('blue');
-}
-.green_page_button1 {
-  .style-color('green');
-}
-</style>

src/pages/parkingFee/parkingReceipt/parkingInvoiceApply.vue

@@ -1,179 +0,0 @@
-<template>
-  <scroll-view class="scroll-Y" scroll-y>
-    <div class="apply-success-box">
-      <div class="apply-success-img">
-        <img class="apply-image" mode="widthFix" :src="icon"/>
-      </div>
-      <div class="apply-success-text">【发票申请提交成功】</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 class="btn back-home-btn" @click="goToHome">返回首页</div>
-    </div>
-  </scroll-view>
-</template>
-
-<script>
-// const app = getApp()
-const app = {};
-import hintIcon from '../static/images/hint.png';
-import { mapState } from 'vuex'
-
-export default {
-  data() {
-    return {
-      picUrl: this.$picUrl,
-      globalData: app.globalData,
-      hintIcon: hintIcon,
-      id: '',
-      blueIcon: 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-blue.png',
-      greenIcon: 'https://cnsh-kerry-crm-le.oss-cn-shanghai.aliyuncs.com/images/icon-success-green.png'
-    }
-  },
-  onLoad( options ) {
-    this.id = options.id;
-    this.getInvoicedDetail(this.id);
-  },
-  computed: {
-    ...mapState({
-      custTypeId: state => state.custTypeId
-    }),
-    icon() {
-      return this.$store.state.custTypeId === 0 ? this.hintIcon : this.$store.state.custTypeId === 1 ? this.blueIcon : this.greenIcon
-    },
-  },
-  methods: {
-    showInvoiceDetail() {
-      this.$router.replace({path: '/pages/parkingFee/parkingReceipt/parkingInvoice?id=' + this.id});
-    },
-    goToHome() {
-      this.$router.replace({path: '/pages/parkingFee/parkingReceipt/parkingReceipt'});
-    },
-    // 根据发票id获取发票详情信息(含发票抬头信息),
-    getInvoicedDetail( 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;
-            if ( self.order.invoiceUrl ) { self.pushEmail(self.order); }
-          } else {
-            uni.showToast({
-              title: res.data.msg,
-              duration: 2000,
-              icon: 'none'
-            });
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none'
-          });
-        },
-      });
-    },
-    // 开票成功后推送发票至邮箱
-    pushEmail( item ) {
-      const self = this;
-      const data = {
-        attachments: [
-          {
-            name: '停车发票.pdf',
-            path: item.invoiceUrl
-          }
-        ],
-        html: true,
-        sendTo: "string",
-        sendTos: [item.mailbox],
-        subject: item.invoiceTitleName + "的电子发票",
-        text: "停车发票"
-      }
-      self.$md(data);
-      uni.request({
-        url: self.$baseURL + 'sms/email',
-        method: 'POST',
-        data: data,
-        header: JSON.parse(uni.getStorageSync('handleUser')),
-        success: ( res ) => {
-          console.log('推送',res.data)
-          if ( res.data.code === 0 ) {
-          }
-        },
-        fail: () => {
-          uni.showToast({
-            title: '服务器开小差了呢，请您稍后再试',
-            icon: 'none'
-          });
-        },
-      });
-    },
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import '../../../styles/common.less';
-
-.scroll-Y {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  // background: #f2f2f2;
-  .apply-success-box {
-    padding: 100px 0;
-    text-align: center;
-
-    .apply-image {
-      width: 30vw;
-    }
-
-    .apply-success-text {
-      margin-top: 50px;
-      font-weight: bold;
-    }
-  }
-
-  .footer {
-    width: 100%;
-
-    .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')
-    }
-
-    .back-home-btn {
-      background-color: #BDBDBD;
-    }
-  }
-
-}
-</style>
-
-
-