充值卡

www/vue/src/App.vue

@@ -1,45 +1,54 @@
 <template>
-  <div id="app">
-    <div class="router-view">
-      <router-view></router-view>
-    </div>
-  </div>
+	<div id="app">
+		<div class="router-view">
+			<router-view></router-view>
+		</div>
+	</div>
 </template>
 
 <script>
   export default {
     name: 'app',
+    data () {
+      return {
+        routerStart: []
+      }
+    },
     watch: {
       '$route' (to, from) {
-        const toDepth = to.path.split('/').length
-        const fromDepth = from.path.split('/').length
-        this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
-//        console.log('前一页 from = ' + from.name)
-//        console.log('准备进入的页面是  to = ' + to.name)
+//        if (this.routerStart.to !== '') {
+//          console.log(this.routerStart)
+//        }
+//        this.routerStart = {
+//          to: to.fullPath,
+//          from: from.fullPath
+//        }
+        console.log('前一页 from = ' + from.name)
+        console.log('准备进入的页面是  to = ' + to.name)
       }
     }
   }
 </script>
 
 <style>
-  #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-align: center;
-    color: #2c3e50;
-    background-color: #d3d3d3;
-  }
-
-  .router-view {
-    position: absolute;
-    overflow-y: auto;
-    width: 100%;
-    top: 0%;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /*background-color: rgba(211, 211, 211, 0.3);*/
-    background-color: white;
-  }
+	#app {
+		font-family: 'Avenir', Helvetica, Arial, sans-serif;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		text-align: center;
+		color: #2c3e50;
+		background-color: #d3d3d3;
+	}
+	
+	.router-view {
+		position: absolute;
+		overflow-y: auto;
+		width: 100%;
+		top: 0%;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		/*background-color: rgba(211, 211, 211, 0.3);*/
+		background-color: white;
+	}
 </style>

www/vue/src/components/recharge.vue

@@ -19,27 +19,21 @@
 				</p>
 			</group>
 			<ul class="ad-hide list-content list-recharge" style="padding-top: 5px;padding-bottom: 5px;padding-left: 10%;">
-				<li class="media" data-id="57f3485d9f5160bf048b4812" data-value="1000" data-index="0">
-					<div>RMB:1000</div>
+				<li v-for="(item,index) in rechargeLists" class="media" @click="btnRechargeList(item, index)" v-bind:class="{on: index === isShow}">
+					<div v-if="item.denomination ===1 ">
+						<div class="input-title">其他数额</div>
+						<div class="input-rmb">RMB:</div>
+						<input type="text" maxlength="8" name="" v-model="otherAmount" value="otherAmount" class="rechange-input">
+					</div>
+					<div v-else>
+						<div>RMB:{{ item.denomination }}</div>
+					</div>
 				</li>
-				<li class="media on" data-id="57f3486b9f5160c9048b47b2" data-value="3000" data-index="1">
-					<div>RMB:3000</div>
-				</li>
-				<li class="media" data-id="57f3487b9f5160c4048b4713" data-value="5000" data-index="2">
-					<div>RMB:5000</div>
-				</li>
-				<li class="media" data-id="582c38d49f5160ad048b56a1" data-value="10000" data-index="3">
-					<div>RMB:10000</div>
-				</li>
-				<li class="media" data-id="5911c0f89f5160b3048b6be9" data-value="1" data-index="4">
-					<div class="input-title">其他数额</div>
-					<div class="input-rmb">RMB:</div>
-					<input type="text" maxlength="8" name="" value="" class="rechange-input"></li>
 			</ul>
 			<div class="ad-hide" style="text-align: center;clear: both;margin-top: 9rem;"><span style="font-size: 0.6rem">点击立即充值，即表示您已经同意壹管家</span><span
 				style="font-size: 0.6rem;font-weight: 600;display: block;"></span><span style="font-size: 0.6rem;">《<span
 				class="pay-agreement" style="text-decoration: underline;color: #0A246A" @click="activity">充返活动协议</span>》</span></div>
-			<div class="btn-add-recharge">立即去充值</div>
+			<div class="btn-add-recharge" @click="btnRecharge">立即去充值</div>
 			<div style="width: 100%;padding-bottom: 13%;"></div>
 		</scroller>
 	</div>
@@ -47,16 +41,61 @@
 
 <script type="es6">
   import {Group, Cell} from 'vux'
+  import {mapState, mapActions} from 'vuex'
   export default {
     data () {
       return {
-        isActive: false
+        isActive: false,
+	      isShow: -1,
+        rechargeLists: this.$store.state.recharge.rechargeList,
+	      rechargeItem: {},
+        otherAmount: ''
       }
     },
     components: {
       Group, Cell
     },
+    computed: mapState({
+      rechargeList: state => state.rechargeList
+    }),
+	  beforeCreate () {
+      console.log(this.rechargeItem)
+	  },
+	  created () {
+      this.RECHARGELIST()
+	  },
+	  watch: {
+      'otherAmount': function(val) {
+        if(val !==undefined){
+          if (isNaN(val)) {
+            // 弹出提示框
+            $doc.trigger('spa:openpanel', ['simpleAlert', {
+              message: '请输入数字'
+            }]);
+            return;
+          }
+        }
+	      console.log(val)
+      }
+	  },
     methods: {
+	    ...mapActions([
+	      'RECHARGELIST'
+	    ]),
+      btnRechargeList (item, index) {
+	      if (index !== 4){
+	        this.otherAmount = ''
+	      }
+	      if (this.isShow === index) {
+          this.isShow = -1
+	      } else {
+          this.isShow = index
+        }
+        this.rechargeItem = item
+      },
+      btnRecharge () {
+	     
+      },
       show (e) {
         if (this.index !== e) {
           this.isActive = e

www/vue/src/config/api.js

@@ -25,6 +25,12 @@ export default ({
       cb(res.data)
     })
   },
+  // 获得充值卡列表 o2o/recharge/rechargeList
+  getRechargeList: function (cb) {
+    axios.get('o2o/recharge/rechargeList').then(res => {
+      cb(res.data)
+    })
+  },
   // 充值卡支付状态获取
   getPayCharge: function (cb) {
     axios.get('o2o/recharge/payRecharge', config.formData).then(function (res) {

www/vue/src/main.js

@@ -17,6 +17,9 @@ Vue.use(BaiduMap, {
   /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
   ak: 'qNIOsBk4Z1Eu1v0whVsnNe9nsikpDeY4'
 })
+// vux start
+import {AlertPlugin} from 'vux'
+Vue.use(AlertPlugin)
 
 // vux end
 Vue.use(VueAxios, axios)

www/vue/src/store/index.js

@@ -7,6 +7,7 @@ import user from './user'
 import PayCharge from './PayCharge'
 import order from './order'
 import product from './product'
+import recharge from './recharge'
 Vue.use(Vuex)
 const store = new Vuex.Store({
 
@@ -16,7 +17,8 @@ export default new Vuex.Store({
     user,
     PayCharge,
     order,
-    product
+    product,
+    recharge
   }
 })
 

www/vue/src/store/recharge.js

@@ -0,0 +1,18 @@
+import api from '../config/api'
+export default {
+  state: {
+    rechargeList: []
+  },
+  mutations: {
+    RECHARGELIST (state, res) {
+      state.rechargeList = res.data
+    }
+  },
+  actions: {
+    RECHARGELIST ({commit}) {
+      api.getRechargeList(function (res) {
+        commit('RECHARGELIST', res)
+      })
+    }
+  }
+}