style(KIP-7551): 提示页面

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="box">
+<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+
+    <img :src="custTypeId === 0 ? require('../../static/images/icon1.png') : `${picUrl}parkingFee/icon-car-${colorAry[custTypeId - 1]}.png`" v-if="custTypeId >= 0"/>
+    <div>{{carno | formatCarno}}<br/>{{msg}}</div>
+    <div :class="{'searchPrice': true, 'blueSearchPrice': custTypeId === 1, 'greenSearchPrice': custTypeId === 2}" @click="search">重新查询</div>
+  </div>
+</template>
+
+<script>
+import parkingFeePaymentJs from '../../mixins/parkingFeePayment'
+export default {
+  mixins:[parkingFeePaymentJs]
+}
+</script>
+
+<style lang="less" scoped>
+//@import '../../styles/common.less';
+.box {
+  text-align: center;
+  img {
+    width: 200px;
+    height: 200px;
+    margin-top: 200px;
+  }
+  div {
+    margin-top: 20px;
+  }
+  .searchPrice {
+    color: #fff !important;
+    margin: 0 auto;
+    margin-top: 40px;
+    height: 90px;
+    width: 80%;
+    line-height: 90px;
+    border-radius: 80px;
+    font-size: 34px;
+    background-image: linear-gradient(to right, #7e4fa1 , #433c7f);
+  }
+  .blueSearchPrice {
+    .colorSearchPrice('blue');
+  }
+  .greenSearchPrice {
+    .colorSearchPrice('green');
+  }
+  .colorSearchPrice(@value) {
+    @color: 'color-@{value}';
+    background-image: none;
+    background-color: @@color;
+  }
+}
+</style>

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

@@ -0,0 +1,86 @@
+<template>
+  <scroll-view class="box">
+    <div>
+      <img
+        :src="require('../../static/images/no-car.png')" />
+        <div class="carno">{{carno | formatCarno}}</div>
+      <div class="msg">{{msg}}</div>
+      <div class="searchPrice" @click="search">重新查询</div>
+    </div>
+  </scroll-view>
+</template>
+
+<script>
+import parkingFeePaymentJs from '../../mixins/parkingFeePayment'
+export default {
+  mixins:[parkingFeePaymentJs]
+}
+</script>
+
+<style lang="less" scoped>
+// @import '../../styles/mixins.less';
+
+.box {
+  text-align: center;
+  background-color: #F4F7FF;
+  opacity: 1;
+
+  img {
+    width: 80%;
+    // height: 200px;
+    margin-top: 200px;
+  }
+
+  div {
+    margin-top: 20px;
+  }
+
+  .carno {
+    font-size: 46px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 65px;
+  }
+
+  .msg {
+    font-size: 36px;
+    font-weight: 400;
+    color: #919BAA;
+    line-height: 36px;
+  }
+
+  .searchPrice {
+    color: #fff !important;
+    margin: 0 auto;
+    margin-top: 40px;
+    height: 90px;
+    width: 80%;
+    line-height: 90px;
+    // border-radius: 80px;
+    // font-size: 17px;
+    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
+
+    background-color: #064C8A;
+    border-radius: 45px;
+    font-size: 34px;
+    font-weight: 400;
+  }
+
+  // .blueSearchPrice {
+  // 	.colorSearchPrice('blue');
+  // }
+
+  // .greenSearchPrice {
+  // 	.colorSearchPrice('green');
+  // }
+
+  // .colorSearchPrice(@value) {
+  // 	@color: 'color-@{value}';
+  // 	background-image: none;
+  // 	background-color: @@color;
+  // }
+}
+</style>
+
+
+

src/pages/parkingFee/mixins/parkingFeePayment.js

@@ -0,0 +1,27 @@
+import { mapState } from 'vuex';
+
+export default {
+  created() {
+    const params = this.$route.query;
+    this.msg = params.msg;
+    this.carno = params.carno;
+  },
+  data() {
+    return {
+      msg: '',
+      carno: '',
+      picUrl: this.$picUrl,
+      colorAry: ['blue', 'green'],
+    };
+  },
+  computed: {
+    ...mapState({
+      custTypeId: (state) => state.custTypeId,
+    }),
+  },
+  methods: {
+    search() {
+      this.$router.back();
+    },
+  },
+};

src/pages/parkingFee/parkingFeePayment.vue

@@ -1,109 +1,18 @@
 <template>
-  <scroll-view class="box">
-    <div>
-      <img
-        :src="custTypeId === 0 ? require('./static/images/no-car.png') : `${picUrl}parkingFee/icon-car-${colorAry[custTypeId - 1]}.png`"
-        v-if="custTypeId >= 0" />
-        <div class="carno">{{carno | formatCarno}}</div>
-      <div class="msg">{{msg}}</div>
-      <div class="searchPrice" @click="search">重新查询</div>
-    </div>
-  </scroll-view>
+  <div>
+    <component :is="componentName"></component>
+  </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import officeBlueCom from './components/officeBlue/parkingFeePayment.vue';
+import baseParkingFeeCom from './components/base/parkingFeePayment.vue';
+import baseMixins from './mixins/base'
 export default {
-  created() {
-    const params = this.$route.query;
-    this.msg = params.msg;
-    this.carno = params.carno;
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
   },
-  data() {
-    return {
-      msg: '',
-      carno: '',
-      picUrl: this.$picUrl,
-      colorAry: ['blue', 'green']
-    }
-  },
-  computed: {
-    ...mapState({
-      custTypeId: state => state.custTypeId
-    })
-  },
-  methods: {
-    search() {
-      this.$router.back()
-    }
-  }
-}
+};
 </script>
-
-<style lang="less" scoped>
-// @import '../../styles/mixins.less';
-
-.box {
-  text-align: center;
-  background-color: #F4F7FF;
-  opacity: 1;
-
-  img {
-    width: 80%;
-    // height: 200px;
-    margin-top: 200px;
-  }
-
-  div {
-    margin-top: 20px;
-  }
-
-  .carno {
-    font-size: 46px;
-    font-weight: 500;
-    color: #333333;
-    line-height: 65px;
-  }
-
-  .msg {
-    font-size: 36px;
-    font-weight: 400;
-    color: #919BAA;
-    line-height: 36px;
-  }
-
-  .searchPrice {
-    color: #fff !important;
-    margin: 0 auto;
-    margin-top: 40px;
-    height: 90px;
-    width: 80%;
-    line-height: 90px;
-    // border-radius: 80px;
-    // font-size: 17px;
-    // background-image: linear-gradient(to right, #7e4fa1, #433c7f);
-
-    background-color: #064C8A;
-    border-radius: 45px;
-    font-size: 34px;
-    font-weight: 400;
-  }
-
-  // .blueSearchPrice {
-  // 	.colorSearchPrice('blue');
-  // }
-
-  // .greenSearchPrice {
-  // 	.colorSearchPrice('green');
-  // }
-
-  // .colorSearchPrice(@value) {
-  // 	@color: 'color-@{value}';
-  // 	background-image: none;
-  // 	background-color: @@color;
-  // }
-}
-</style>
-
-
-

src/styles/uni.less

@@ -39,38 +39,38 @@
 /* 尺寸变量 */
 
 /* 文字尺寸 */
-@uni-font-size-sm:24upx;
-@uni-font-size-base:28upx;
-@uni-font-size-lg:32upx;
+@uni-font-size-sm:24px;
+@uni-font-size-base:28px;
+@uni-font-size-lg:32px;
 
 /* 图片尺寸 */
-@uni-img-size-sm:40upx;
-@uni-img-size-base:52upx;
-@uni-img-size-lg:80upx;
+@uni-img-size-sm:40px;
+@uni-img-size-base:52px;
+@uni-img-size-lg:80px;
 
 /* Border Radius */
-@uni-border-radius-sm: 4upx;
-@uni-border-radius-base: 6upx;
-@uni-border-radius-lg: 12upx;
+@uni-border-radius-sm: 4px;
+@uni-border-radius-base: 6px;
+@uni-border-radius-lg: 12px;
 @uni-border-radius-circle: 50%;
 
 /* 水平间距 */
 @uni-spacing-row-sm: 10px;
-@uni-spacing-row-base: 20upx;
-@uni-spacing-row-lg: 30upx;
+@uni-spacing-row-base: 20px;
+@uni-spacing-row-lg: 30px;
 
 /* 垂直间距 */
-@uni-spacing-col-sm: 8upx;
-@uni-spacing-col-base: 16upx;
-@uni-spacing-col-lg: 24upx;
+@uni-spacing-col-sm: 8px;
+@uni-spacing-col-base: 16px;
+@uni-spacing-col-lg: 24px;
 
 /* 透明度 */
 @uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
 @uni-color-title: #2C405A; // 文章标题颜色
-@uni-font-size-title:40upx;
+@uni-font-size-title:40px;
 @uni-color-subtitle: #555555; // 二级标题颜色
-@uni-font-size-subtitle:36upx;
+@uni-font-size-subtitle:36px;
 @uni-color-paragraph: #3F536E; // 文章段落颜色
-@uni-font-size-paragraph:30upx;
+@uni-font-size-paragraph:30px;