program/src/pages/agent/settlement_center/index/index.vue

<template>
  <div id="agent_settlement_center_index_container">

    <!--    头部-->
    <div class="header text-center">
      <img src="https://img.shuimuai.com/web/happy_shuimu.png" class="main_icon" alt="">
      <view>
        <text class="text-white text-sm">可提现金额(元)</text>
      </view>
      <view>
        <text class="text-white text-bold text-sl">{{ total_price }}.00</text>
      </view>
    </div>

    <view class="cu-bar">
      <view class="action">
        <text class="text-sm ">提现到微信钱包</text>
      </view>
    </view>
    <!--    提现金额输入框-->
    <van-field
      :value='price'
      placeholder="输入提现金额"
      :custom-style='custom_style'
      center
      clearable
    >
      <text class="text-xxl" slot="label">&yen;</text>
      <view slot="button" @click="price=total_price">
        <text class="under_line text-sm text-orange">全部提现</text>
      </view>
    </van-field>

    <view class="cu-bar">
      <view class="action">
        <text class="text-xs text-gray">提现单笔手续费1%，预计1个工作日内到账</text>
      </view>
    </view>

    <!--    提现按钮-->
    <div class="padding-lr margin-top-xl">
      <van-button type="primary" size="large" color="#FFB400" @click="do_submit">立即提现</van-button>
    </div>

    <!--    提现规则-->
    <view class="bottom_text">
      <text class="text-gray under_line text-sm" @click="to_rule">提现规则</text>
    </view>
  </div>
</template>

<script>


export default {
  name: "agent_settlement_center_index_container",
  components: {},
  data() {
    return {
      price: "",
      total_price: 15,
      custom_style: `width: 330px;
            height: 49px;
            background: #F2F3FF;
            box-shadow: 0px 3px 7px 0px rgba(159, 159, 159, 0.84);
            border-radius: 10px;
            margin: 20px auto 0px;
      `,
    }
  },
  methods: {
    //  跳转规则
    to_rule() {

    },
    //  提交提现的功能
    do_submit() {

    }
  },
  mounted() {
  }
}
</script>

<style scoped>
@import "index.css";
</style>