style(KIP-7551): 月泊停车用户提示页面

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

@@ -0,0 +1,54 @@
+<template>
+  <div class="box">
+<!--    <wx-points-commit ref='wxPointsCommit'></wx-points-commit>-->
+    <img :src="custTypeId === 0 ? require('../../../static/images/rent.png') : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`" v-if="custTypeId >= 0"/>
+    <div>[月租车,可直接离场]</div>
+    <div :class="{'searchPrice': true, 'blueSearchPrice': custTypeId === 1, 'greenSearchPrice': custTypeId === 2}" @click="search">重新查询</div>
+  </div>
+</template>
+
+<script>
+import parkingFeeHintJs from '../../../mixins/parkingFeeHint/parkingFeeHint'
+export default {
+  mixins:[parkingFeeHintJs]
+}
+</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;
+    font-weight:bold;
+  }
+  .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);
+  }
+  .blueSearchPrice {
+    .colorSearchPrice('blue')
+  }
+  .greenSearchPrice {
+    .colorSearchPrice('green')
+  }
+  .colorSearchPrice(@value) {
+    @color: 'color-@{value}';
+    background-image: none;
+    background-color: @@color;
+  }
+}
+</style>

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="box">
+    <img
+      :src="
+        custTypeId === 0
+          ? require('../../../static/images/rent.png')
+          : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`
+      "
+      v-if="custTypeId >= 0"
+    />
+    <div>[月租车,可直接离场]</div>
+    <div
+      :class="{
+        searchPrice: true,
+        blueSearchPrice: custTypeId === 1,
+        greenSearchPrice: custTypeId === 2,
+      }"
+      @click="search"
+    >
+      重新查询
+    </div>
+  </div>
+</template>
+
+<script>
+import parkingFeeHintJs from '../../../mixins/parkingFeeHint/parkingFeeHint'
+export default {
+  mixins:[parkingFeeHintJs]
+}
+</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;
+    font-weight: bold;
+  }
+  .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);
+  }
+  .blueSearchPrice {
+    .colorSearchPrice('blue');
+  }
+  .greenSearchPrice {
+    .colorSearchPrice('green');
+  }
+  .colorSearchPrice(@value) {
+    @color: 'color-@{value}';
+    background-image: none;
+    background-color: @@color;
+  }
+}
+</style>

src/pages/parkingFee/mixins/parkingFeeHint/parkingFeeHint.js

@@ -0,0 +1,56 @@
+import uni from "@/utils/uniHooks";
+import { mapState } from 'vuex';
+// const app = getApp()
+const app = {};
+export default {
+  onLoad(params) {
+    this.carno = params.carno;
+  },
+  data() {
+    return {
+      carno: '',
+      picUrl: this.$picUrl,
+      colorAry: ['blue', 'green'],
+    };
+  },
+  computed: {
+    ...mapState({
+      custTypeId: (state) => state.custTypeId,
+    }),
+  },
+  mounted() {
+    setTimeout(() => {
+      uni.setNavigationBarTitle({
+        title: '提示',
+      });
+    }, 300);
+  },
+  methods: {
+    search() {
+      this.$router.back();
+      // const params = {
+      // 	carno: this.carno,
+      // 	mallid: app.globalData.mallid,
+      // 	openid: app.globalData.openId,
+      // 	vipcode: app.globalData.member.vipcode,
+      //   groupId: app.globalData.groupId,
+      //   createuser: "sys_miniprogram",
+      // }
+      // this.$md(params)
+      // uni.request({
+      // 	url: this.$baseURL + 'api/1.0/park/checkCarIsInPark',
+      // 	data: params,
+      // 	method: 'POST',
+      // 	header: JSON.parse(uni.getStorageSync('handleUser')),
+      // 	success: (res) => {
+      // 		uni.hideLoading();
+      // 		if (res.data.code === 0) {
+      // 			this.$router.push({
+      // 				path: '../parkingFeeDetail?carno=' + this.carno
+      // 			})
+      // 		}
+      // 	}
+      // });
+    },
+  },
+};

src/pages/parkingFee/parkingFeeHint/parkingFeeHint.vue

@@ -1,113 +1,18 @@
-<template>
-  <div class="box">
-    <img
-      :src="
-        custTypeId === 0
-          ? '../static/images/rent.png'
-          : `${picUrl}parkingFee/rent-${colorAry[custTypeId - 1]}.png`
-      "
-      v-if="custTypeId >= 0"
-    />
-    <div>[月租车,可直接离场]</div>
-    <button
-      type="primary"
-      :class="{
-        searchPrice: true,
-        blueSearchPrice: custTypeId === 1,
-        greenSearchPrice: custTypeId === 2,
-      }"
-      @click="search"
-    >
-      重新查询
-    </button>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex';
-// const app = getApp()
-const app = {};
-export default {
-  onLoad(params) {
-    this.carno = params.carno;
-  },
-  data() {
-    return {
-      carno: '',
-      picUrl: this.$picUrl,
-      colorAry: ['blue', 'green'],
-    };
-  },
-  computed: {
-    ...mapState({
-      custTypeId: (state) => state.custTypeId,
-    }),
-  },
-  methods: {
-    search() {
-      this.$router.back();
-      // const params = {
-      // 	carno: this.carno,
-      // 	mallid: app.globalData.mallid,
-      // 	openid: app.globalData.openId,
-      // 	vipcode: app.globalData.member.vipcode,
-      //   groupId: app.globalData.groupId,
-      //   createuser: "sys_miniprogram",
-      // }
-      // this.$md(params)
-      // uni.request({
-      // 	url: this.$baseURL + 'api/1.0/park/checkCarIsInPark',
-      // 	data: params,
-      // 	method: 'POST',
-      // 	header: JSON.parse(uni.getStorageSync('handleUser')),
-      // 	success: (res) => {
-      // 		uni.hideLoading();
-      // 		if (res.data.code === 0) {
-      // 			this.$router.push({
-      // 				path: '../parkingFeeDetail?carno=' + this.carno
-      // 			})
-      // 		}
-      // 	}
-      // });
-    },
-  },
-};
-</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;
-    font-weight: bold;
-  }
-  .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);
-  }
-  .blueSearchPrice {
-    .colorSearchPrice('blue');
-  }
-  .greenSearchPrice {
-    .colorSearchPrice('green');
-  }
-  .colorSearchPrice(@value) {
-    @color: 'color-@{value}';
-    background-image: none;
-    background-color: @@color;
-  }
-}
-</style>
+<template>
+  <div>
+    <component :is="componentName"></component>
+  </div>
+</template>
+
+<script>
+import officeBlueCom from '../components/officeBlue/parkingFeeHint/parkingFeeHint.vue';
+import baseParkingFeeCom from '../components/base/parkingFeeHint/parkingFeeHint.vue';
+import baseMixins from '../mixins/base'
+export default {
+  mixins:[baseMixins],
+  components: {
+    officeBlueCom,
+    baseParkingFeeCom,
+  },
+};
+</script>