车场进出场支付

liuqimichale
1 parent 1bd5e162
Showing 14 changed files with 151 additions and 14 deletions
build/utils.js
build/webpack.dev.conf.js
favicon.ico
index.html
package-lock.json
package.json
src/assets/ali-icon.png
src/assets/checked-icon.png
src/assets/unchecked-icon.png
src/assets/wechat-icon.png
src/components/home.vue
src/components/inout.vue
src/components/pay.vue
src/main.js
@@ -18,6 +18,7 @@ exports.cssLoaders = function (options) {
   const cssLoader = {
     loader: 'css-loader',
     options: {
+      minimize: process.env.NODE_ENV === 'production',
       sourceMap: options.sourceMap
     }
   }
@@ -55,7 +55,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
-      inject: true
+      inject: true,
+      favicon: './favicon.ico'
     }),
     // copy custom static assets
     new CopyWebpackPlugin([
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
     <title>停车场进出场</title>
   </head>
   <body>
@@ -4042,6 +4042,11 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fastclick": {
+      "version": "1.0.6",
+      "resolved": "http://registry.npm.taobao.org/fastclick/download/fastclick-1.0.6.tgz",
+      "integrity": "sha1-FhYlsnsaWAZAWTa9qaLBkm0Gvmo="
+    },
     "fastparse": {
       "version": "1.1.2",
       "resolved": "http://registry.npm.taobao.org/fastparse/download/fastparse-1.1.2.tgz",
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "fastclick": "^1.0.6",
     "lib-flexible": "^0.3.2",
     "px2rem-loader": "^0.1.9",
     "qs": "^6.6.0",
 <template>
   <div class="wrap">
     <InOut v-if="inOutVal==='1'" :toflag = "0"/>
-    <div v-else-if="inOutVal==='2'&&_getPayFlag">pay</div>
+    <Pay v-else-if="inOutVal==='2'&&_getPayFlag" :title="title" :money="money"/>
     <InOut v-else :toflag = "1"/>
     <Loading v-show="_getshowflag"/>
   </div>
@@ -10,18 +10,21 @@
 <script>
 import Loading from './Loading'
 import InOut from './InOut'
+import Pay from './Pay'
 import { mapGetters, mapActions } from 'vuex'
  
 export default {
   name: 'HelloWorld',
   components: {
-    Loading, InOut
+    Loading, InOut, Pay
   },
   data() {
     return {
       payFlag: false,
-      inOutVal: this.$route.query.id
+      inOutVal: this.$route.query.id,
       // isShow: ''
+      title: '',
+      money: ''
     }
   },
   computed: {
@@ -37,8 +40,10 @@ export default {
       //   console.log(response)
       // })
       // },
-      // this.handlePayFlag()
+      this.handlePayFlag()
       console.log(this._getPayFlag)
+      this.title = '手机: 13911137584'
+      this.money = '¥100.00'
     }, 2000)
   },
   methods: {
@@ -162,13 +162,14 @@ export default {
       border: 0;
       outline: 0;
       width: 80%;
-      height: 47px;
-      line-height: 47px;
-      padding-left: 20px;
+      height: 1.253333rem;
+      line-height: 1.253333rem;
       background-color: #fff;
-      font-size: 18px;
+      font-size: 0.48rem;
       color: #4A4A4A;
-      border-radius: 4px;
+      border-radius: 0.106667rem;
+      text-align: center;
+      font-weight: 500;
     }
     .toggle-btn {
       height: 17px;
 <template>
-  <div>1</div>
+  <div class="pay-wrap">
+    <div class="title">订单支付</div>
+    <div class="tipstext">{{ title }}</div>
+    <div class="money">{{ money }}</div>
+    <div class="choosetext">选择支付方式</div>
+    <ul class="pay-way">
+      <li v-for="(item, index) in payArr" :key="index" :class="{checkedClass : index===currentId}" @click="currentId = index">
+        <span></span>
+        {{ item }}
+      </li>
+    </ul>
+    <div class="commit-btn" @click="commitsure">确认支付</div>
+  </div>
 </template>
  
 <script>
 export default {
-  name: 'pay'
+  name: 'Pay',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    money: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      payArr: ['支付宝支付', '微信支付'],
+      currentId: 0
+    }
+  },
+  methods: {
+    commitsure() {
+      alert(this.currentId)
+    }
+  }
 }
 </script>
  
-<style scoped>
-
+<style lang="scss" scoped>
+  .pay-wrap {
+    width: 100%;
+    height: 100%;
+    background-color: #eff4f5;
+    text-align: center;
+    .title {
+      height: 42px;
+      line-height: 42px;
+      background-color: rgba(255, 255, 255, .9);
+      font-size: 17px;
+      color: #4A4A4A;
+      font-weight: 500;
+    }
+    .tipstext {
+      margin: 35px auto 35px;
+      font-size: 18px;
+      font-weight: bold;
+      color: rgba(255, 7, 7, 1);
+    }
+    .money {
+      height: 48px;
+      line-height: 48px;
+      font-size: 48px;
+      font-weight: 400;
+      color: rgba(74, 74, 74, 1);
+    }
+    .choosetext {
+      padding-left: 10px;
+      margin: 60px 0 10px;
+      text-align: left;
+      font-size: 17px;
+      font-weight: 400;
+      color: rgba(74, 74, 74, 1);
+    }
+    .pay-way {
+      padding-left: 10px;
+      padding-right: 18px;
+      background-color: #fff;
+      text-align: left;
+      cursor: pointer;
+      li {
+        height: 43px;
+        line-height: 43px;
+        font-size: 14px;
+        font-weight: 400;
+        color: rgba(74, 74, 74, 1);
+        background-image: url("../assets/unchecked-icon.png");
+        background-repeat: no-repeat ;
+        background-position: right center ;
+        background-size: 18px 18px;
+        span {
+          width: 24px;
+          height: 24px;
+          display: inline-block;
+          margin-right: 11px;
+          vertical-align: middle;
+        }
+        &:nth-of-type(1) {
+          border-bottom: 1px solid rgba(240, 244, 245, 1);
+          span {
+            background: url("../assets/ali-icon.png") no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        &:nth-of-type(2) {
+          span {
+            background: url("../assets/wechat-icon.png") no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+      .checkedClass{
+        background-image: url("../assets/checked-icon.png");
+      }
+    }
+    .commit-btn {
+      width: 80%;
+      height: 42px;
+      line-height: 42px;
+      margin: 120px auto 0;
+      border-radius: 21px;
+      background-color: #75CBBE;
+      font-size: 18px;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 1);
+    }
+  }
 </style>
@@ -5,8 +5,11 @@ import App from &#39;./App&#39;
 import router from './router'
 import store from './store/store'
 import 'lib-flexible/flexible.js'
+import fastclick from 'fastclick'
 import './styles/reset.css'
  
+fastclick.attach(document.body)
+
 Vue.config.productionTip = false
  
 /* eslint-disable no-new */