php/www/vue/src/components/recharge.vue

<template>
	<div class="recharge">
		<scroller>
			<img class="ad-hide" src="http://odulvej8l.bkt.clouddn.com/%E5%85%85%E5%80%BC%E5%8D%A1.jpg" style="width: 100%;">
			<div class="recharge-title">充值余额</div>
			<group>
				<cell
					:title="('充值有好礼')"
					is-link
					value-align="left"
					:border-intent="false"
					:arrow-direction="isActive ? 'up' : 'down'"
					@click.native="isActive = !isActive"></cell>
				<p class="slide" :class="isActive?'animate':''">
					<span>充值1000--赠送：一挂式空调清洗</span>
					<span>充值3000--赠送：一床一沙发除螨</span>
					<span>充值5000--赠送：二床一沙发除螨</span>
					<span>充值10000--赠送：一冰箱清洗一挂式空调清洗一洗衣机清洗二床一沙发除螨</span>
				</p>
			</group>
			<ul class="ad-hide list-content list-recharge" style="padding-top: 5px;padding-bottom: 5px;padding-left: 10%;">
				<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>
			</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" @click="btnRecharge">立即去充值</div>
			<div style="width: 100%;padding-bottom: 13%;"></div>
		</scroller>
	</div>
</template>

<script type="es6">
  import {Group, Cell} from 'vux'
  import axios from 'axios'
  export default {
    data () {
      return {
        isActive: false,
        isShow: -1,
        rechargeLists: this.$store.state.recharge.rechargeList,
        rechargeItem: {},
        otherAmount: ''
      }
    },
    components: {
      Group, Cell
    },
    beforeCreate () {},
    created () {
//      console.log(this.rechargeLists)
    },
    watch: {
      'otherAmount': function (val) {
        if (val !== undefined) {
          if (isNaN(val)) {
            // 弹出提示框
            this.otherAmount = ''
            this.$vux.alert.show({
              title: '输入错误',
              content: '请输入数字',
              onShow () {
              },
              onHide () {
              }
            })
          }
        }
      }
    },
    methods: {
      btnRechargeList (item, index) {
        if (index !== 4) {
          this.otherAmount = ''
        }
        if (this.isShow === index) {
          this.isShow = -1
        } else {
          this.isShow = index
        }
        this.rechargeItem = item
      },
      btnRecharge () {
        
        axios.post('o2o/recharge/addRechargeorder').then(res => {
          console.log(res)
        })
        // axios     1.创建充值卡订单  user_id: user.id,        value:inputVal,
        // 第二步
      },
      show (e) {
        if (this.index !== e) {
          this.isActive = e
          this.index = e
        } else {
          this.isActive = -1
          this.index = -1
        }
      },
      activity () {
        this.$router.push({path: '/activityText'})
      }
    }
  }
</script>

<style lang="less" scoped>
	img {
		display: block;
	}
	
	.recharge-title {
		padding-left: 15px;
		font-size: 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
		padding-bottom: 10px;
		padding-top: 11px;
		text-align: left;
		margin-bottom: -20px;
	}
	
	ul {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10%;
		align-content: flex-start;
		li.media.on {
			border: 2px solid rgba(146, 118, 3, 1);
			font-size: 12px;
		}
		li.media {
			margin: 2%;
			float: left;
			height: 2.5rem;
			padding: 10px 0;
			width: 25.33%;
			cursor: pointer;
			font-size: 13px;
			border: 1px solid;
			text-align: center;
			div {
				line-height: 1.5rem;
			}
			&:nth-child(5) {
				padding: 15px;
				width: 55%;
				padding-top: 0.4rem;
			}
			.input-title {
				line-height: 1.5rem;
				font-size: 12px;
				width: 35%;
				float: left;
			}
			.input-rmb {
				float: left;
				width: 25%;
			}
			input {
				margin: 0;
				padding: 0;
				width: 40%;
				height: 25px;
				margin-top: 2%;
				text-align: center;
			}
		}
		&, li, div, input {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			list-style: none;
			margin: 0;
			padding: 0;
		}
	}
	
	.btn-add-recharge {
		width: 80%;
		clear: both;
		color: white;
		padding: 15px;
		margin: 0 auto;
		border: 1px solid;
		text-align: center;
		background-color: rgba(146, 118, 3, 1);
		transition: all 2s;
		margin-top: 10px;
	}
	
	/*动画*/
	.slide {
		padding: 0 20px;
		overflow: hidden;
		max-height: 0;
		transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
		span {
			display: block;
			text-align: left;
			font-size: 15px;
		}
	}
	
	.animate {
		max-height: 9999px;
		transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
		transition-delay: 0s;
	}
</style>