pages/moneyRecharge/moneyRecharge.vue

<template>
    <view>
       
        <view class="rechargeTop">
            <view class="toDetail uni-list-cell-pd uni-right" @click="detailCell">明细 ></view>
            <view class="rechargeNum uni-center">¥{{acctBalance}}</view>
        </view>
				
        <uni-section title="充值金额" type="line" padding>
            <uni-grid :column="3" :highlight="true" :showBorder="false" :square="false" @change="change">
                <uni-grid-item v-for="(item, index) in ListData" :index="index" :key="index">
                    <view class="grid-item-box" style="background-color: #fff;">
                        <view class="text" :class="currentIndex==index?'itemActive':''">{{item.text}}</view>
                    </view>
                </uni-grid-item>
            </uni-grid>
        </uni-section>
        <view class="uni-list-cell-pd">
            温馨提示：暂不支持退款，请谨慎选择充值金额！
        </view>
        <view class="border-bg"></view>
        <view class="order-title">
            支付方法
        </view>
        <view class="order-line"></view>
        <view class="orderwaysview">
            <image src="../../static/orderInfo/orderinfo-wechat.png" class="orderways"></image>
            <view class="order-info" style="margin-left: 8px;">
                微信支付
            </view>
            <image src="../../static/orderInfo/orderinfo-sel.png" class="orderwaysSel"></image>
        </view>
        <button @click="payClick" class="button-sp-area" type="primary" plain="true">确认充值</button>
      
    </view>
</template>
<script>
import common from "../../common/common.js";
export default {
  data() {
    return {
			acctBalance:'0.00',
      ListData: [
        {
          text: '100元'
        },
        {
          text: '200元'
        },
        {
          text: '300元'
        },
        {
          text: '600元'
        },
        {
          text: '1000元'
        },
        {
          text: '其他'
        },
      ],
      currentIndex: 0,
    }
  },
  onLoad() {
  
  },
  mounted() {
    this.recharge()
  },
  methods: {
		recharge() {
			let that = this;
			that.$myRequest({
				url: that.$common.walletAccount,
				method: 'POST',
				data: that.$common.requestSign()
			}).then(res => {
		
				console.log(res)
				let data = res.data;
				that.acctBalance = data.acctBalance;
				
			})
		},
		
    change(e) {
      let {
        index
      } = e.detail
      
      this.currentIndex = index
			console.log(index+1)
     
    },
   
	 }
}
</script>
<style scoped lang="scss">
    .rechargeTop{
        height: 100px;
        background: #007AFF;
        color: #fff;
        position: relative;
    }
    .toDetail{
        /*text-align: right;*/
    }
    .rechargeNum{
        font-size: 30px;
    }
    .text {
        width: 80%;
        height: 60px;
        line-height: 60px;
        margin: 10px auto;
        border: 1px solid #ccc;
        text-align: center;
    }
    .itemActive {
        background: #f0ad4e;
    }
    .order-title {
        font-size: 18px;
        margin-left: 16px;
        margin-top: 15px;
        font-weight: bold;
        color: #404040;
    }
    .order-info {
        font-size: 14px;
        margin-left: 15px;
        margin-top: 12px;
        color: #404040;
    }
    .order-line {
        background: #D9D9D9;
        height: 1px;
        margin-top: 12px;
        margin-left: 15px;
        padding: 0px;
        overflow: hidden;
        /* 透明度 */
        opacity: 0.5;
    }
    .order-line-bold {
        background: #FAFAFA;
        height: 12px;
        margin-top: 12px;
        padding: 0px;
        overflow: hidden;
    }
    .flex-row-justify-between {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .flex-row-justify-end {
        display: flex;
        flex-direction: row;
        /* 水平对齐*/
        align-items: baseline;
    }
    .order-discount {
        color: #C8C7CC;
        margin-right: 20 upx;
        /* margin-right: 12px ; */
        /* margin-top:12px ; */
    }
    .orderwaysview {
        display: flex;
        flex-direction: row;
    }
    .orderways {
        width: 18px;
        height: 18px;
        margin-left: 15px;
        margin-top: 14px;
    }
    .orderwaysSel {
        width: 16px;
        height: 16px;
        margin-left: auto;
        margin-right: 14px;
        margin-top: 14px;
        /* justify-content:flex-end; */
    }
    .button-sp-area {
        margin: 0 auto;
        width: 60%;
        margin-top: 40px;
    }
</style>