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" v-focus="isNum">
					</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>
  import {Group, Cell} from 'vux'
  import axios from 'axios'
  import qs from 'qs'
  import config from '../config/config'
  export default {
    data () {
      return {
        isActive: false,
        isShow: -1,
        rechargeLists: [],
        rechargeItem: {},
        otherAmount: '',
        isNum: false
      }
    },
    components: {
      Group, Cell
    },
    computed: {},
    beforeCreate () {
      // 获取充值卡列表
      axios.get('o2o/recharge/rechargeList').then(res => {
        this.rechargeLists = res.data.data
      })
    },
    created () {
//      console.log(this.rechargeLists)
    },
    //  自定义指令
    directives: {
      //  听我瞎bb --north
      //  focus 对DOM层操作 自定义 v-focus 使用方法 v-focus="value" 传入值进入 focus 中判断 当value为true 时 选中focus
      focus: {
        update: function (el, {value}) {
          if (value) {
            el.focus()
          }
        }
      }
    },
    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 = ''
        } else {
          this.isNum = !this.isNum
        }
        if (this.isShow === index) {
          this.isShow = -1
        } else {
          this.isShow = index
        }
        this.rechargeItem = item
      },
      btnRecharge () {
        // 选择充值类型
        if (this.rechargeItem.id === undefined) {
          // 弹出提示框
          this.otherAmount = ''
          this.$vux.alert.show({
            title: '金额错误',
            content: '请您先选择充值金额'
          })
          return
        }
        if (this.rechargeItem.denomination === 1 && this.otherAmount === '') {
          // 弹出提示框
          this.otherAmount = ''
          this.$vux.alert.show({
            title: '重新输入',
            content: '请输入您需要充值的金额'
          })
          return
        }
        let addRechargeOrder = {
          user_id: config.userId,
          value: this.otherAmount,
          recharge_id: this.rechargeItem.id
        }
        let payRecharge = {}
        axios.post('o2o/recharge/addRechargeorder', qs.stringify(addRechargeOrder)).then(res => {
          if (res.data.success) {
            console.log(res.data.data.price)
            let payValue = ''
            if (this.otherAmount === '' && this.isShow !== 4) {
              payValue = this.rechargeItem.denomination
            } else {
              payValue = this.otherAmount
            }
            payRecharge = {
              final_price: res.data.data.price,
              pay_channel: 'wx_pub',
              order_id: res.data.data._id.$id,
              products: '充值' + payValue + '元'
            }
            this.$router.push({path: '/pay', query: {payRecharge: payRecharge}})
          }
        })
        // 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;
	}

	@media (max-width: 320px) {
		ul {
			li.media {
				&:nth-child(5) {
					padding: 10px 0;
					input{
						margin-top: -15px;
						width: 35%;
					}
				}
			}
		}
	}
	/*动画*/
	.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>