hlm_pl_mall_h5/pages/member/withdraw/WithdrawList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container member-withdraw-list">
    <view class="div common-header-wrap">
      <view class="status-holder"></view>
      <view :style="'height:'+navHeight+'px'"></view>
      <view class="common-header-holder"></view>
      <view class="common-header-fixed">
      <title-header />
      <uni-nav-bar title="提现明细" class="common-header" left-icon="back" @clickLeft="goBack()">
      </uni-nav-bar>
    </view>
    </view>
<view class="scroll-view div pb-30" style="position:relative">
    <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div" @scrolltolower="loadMore" scroll-y="true">
    <view
      class="div list-wrapper"
      v-if="withdraw_list && withdraw_list.length"

    >
      <view
        class="div container"
        v-for="(item, index) in withdraw_list"
        :key="item.pdc_id"
      >
        <view class="div top-wrapper">
          <view class="div left-wrapper">
            <label class="status">{{item.pdc_payment_state_text}}</label>
            <label class="title">{{ item.pdc_bank_user }}：{{ item.pdc_bank_no }}</label>
          </view>
          <view class="div right-wrapper">
            <label class="price">￥{{ item.pdc_amount }}</label>
            <label class="subtitle">提现金额</label>
          </view>
          <view class="div top-line"></view>
        </view>
        <view class="div center-wrapper">
          <label class="desc">申请时间：{{ item.pdc_addtime_text }}</label>
        </view>

      </view>
    </view>
    <empty-record v-else-if="withdraw_list && !withdraw_list.length"></empty-record>
  </scroll-view>
</view>
  <view class='common-add-btn-wrapper'><view class="div common-btn common-add-btn"  @click="goAdd">新增</view></view>
    <!--身份验证-->
    <uni-popup background-color="#fff" ref="sendAuthCode" type="right" >
      <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="身份验证" class="common-header" left-icon="back" @clickLeft="hidePopup('sendAuthCode')">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div common-popup-content">
		  <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
        <common-send-code @checkSuccess="checkSuccess" />
		</scroll-view>
      </view>
    </view>
    </uni-popup>

    <!--申请提现-->
    <uni-popup background-color="#fff" ref="addWithdrawVisible" type="right" >
      <view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
      <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="申请提现" class="common-header" left-icon="back" @clickLeft="hidePopup('addWithdrawVisible')">
        </uni-nav-bar>
      </view>
      </view>
      <view class="div common-popup-content">
		  <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" scroll-y="true">
        <view class="div main-content">
        <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">提现金额</text><view class="div field-line-right" slot="right"><input class="field-input" v-model="amount" /></view></flex-line>
        <flex-line class="field-line menu-item" :show-border="true"><text class="span field-name">支付密码</text><view class="div field-line-right" slot="right"><input class="field-input" type="password" v-model="password" /></view></flex-line>
        <flex-line class="field-line menu-item" v-if="bank_length > 0" :show-border="true">
        <text class="span field-name">收款银行</text>
        <view class="div" slot="right">
          <radio-group @change="radioChange" class='radio-wrapper'>
            <view class='radio-item' v-for="(item, index) in memberbankOptions" :key="index">
              <radio :value="item.value" :checked="memberbank_id==item.value" />
              <text>{{item.label}}</text>
            </view>
          </radio-group>
        </view>
        </flex-line>
        <view class="div common-btn ds-button-large" @click="addWithdraw"  v-if="bank_length > 0">提交</view>
        <view class="div common-btn ds-button-large" @click="goMemberbacklist"  v-else>请先添加收款账号</view>
        </view>
		</scroll-view>
      </view>
    </view>
    </uni-popup>
  </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import MemberBase from '../MemberBase'
import { mapState } from 'vuex'
import { getWithdrawList, addWithdraw } from '../../../api/memberWithdraw'
import { getBankList } from '../../../api/memberBank'
import EmptyRecord from '../../EmptyRecord'
import CommonSendCode from '../common/CommonSendCode'
import flexLine from '../../flexLine'
export default {
  name: 'BalanceHistory',
  components:{
    TitleHeader,
    MemberBase,
    flexLine,
    EmptyRecord,
    CommonSendCode
  },
  data(){
    return {
      navHeight: 0,
      screenWidth:0,
      params: { 'page': 0, 'per_page': 10 },
      loading: false, // 是否加载更多
      isMore: true, // 是否有更多
      bank_length:0,
      amount: '',
      memberbankOptions: [],
      memberbank_id: '',
      password: '',
      wrapperHeight: 0,
      withdraw_list: false
    }
  },
  created () {
    getBankList().then(res => {
      let temp = res.result.bank_list
      this.bank_length = temp.length
      for (var i in temp) {
        let item = temp[i]
        if(item.memberbank_type=='alipay'){
        item.memberbank_name='支付宝'
        }else if(item.memberbank_type=='weixin'){
        item.memberbank_name='微信'
        }
        this.memberbankOptions.push({
          label: item.memberbank_name+item.memberbank_no,
          value: item.memberbank_id
        })
      }
    }).catch(function (error) {
      uni.showToast({icon:'none',title: error.message})
    })
    this.loadMore()
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    ...mapState({
      user: state => state.member.info
    })
  },
  mounted(){
      // #ifdef  MP-WEIXIN
      this.navHeight = uni.getMenuButtonBoundingClientRect().top
      // #endif
      this.screenWidth=uni.getSystemInfoSync().screenWidth
    this.wrapperHeight = uni.getSystemInfoSync().windowHeight - 130
  },
  methods:{
    radioChange(e){
      this.memberbank_id=e.detail.value
    },
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    addWithdraw () {
      addWithdraw(this.amount, this.memberbank_id, this.password).then(res => {
        uni.showToast({icon:'none',title: res.message})
        this.hidePopup('addWithdrawVisible')
        this.reload()
      }).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    checkSuccess () {
      this.hidePopup('sendAuthCode')
      this.showPopup('addWithdrawVisible')
    },
    goAdd () {
      if (!this.user.member_mobilebind && !this.user.member_emailbind) {
        uni.showToast({icon:'none',title: '请先绑定手机或邮箱'})
        uni.navigateTo({url:'/pages/member/setting/AccountSet'})
      } else {
        this.showPopup('sendAuthCode')
      }
    },
    goBack () {
      uni.navigateBack({delta:1})
    },
    goMemberbacklist(){
         uni.navigateTo({url:'/pages/member/bank/BankList'})
    },
    loadMore () {
      this.loading = true
      this.params.page = ++this.params.page
      if (this.isMore) {
        this.loading = false
        this.getWithdrawList(true)
      }
    },
    reload () {
      // 重新加载数据
      this.params.page = 0
      this.isMore = true
      this.loading = false
      this.withdraw_list = false
      this.loadMore()
    },
    getWithdrawList () {
      uni.showLoading({ title: '加载中' })

      getWithdrawList(this.params).then(res => {
        uni.hideLoading()
        if (res.result.hasmore) {
          this.isMore = true
        } else {
          this.isMore = false
        }

        let temp = res.result.list
        if (temp) {
          if (!this.withdraw_list) {
            this.withdraw_list = temp
          } else {
            this.withdraw_list = this.withdraw_list.concat(temp)
          }
        }
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>
<style lang="scss">
  .member-withdraw-list{
    .mint-radiolist {
      display: flex;
      .mint-cell {
        flex: 1;
        .mint-radio-input:checked + .mint-radio-core {
          background-color: $primaryColor !important;
          border-color: $primaryColor !important;
        }
        &:after{display: none}
      }
    }
  }
</style>
<style scoped lang="scss">
.scroll-view-wrapper{display: flex;flex-direction: column;}
.scroll-view{flex:1}
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
.main-content{background: #fff;padding:0 $pageSpace}
.container {
  height: 100%;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;

}
.header {
  border-bottom: 1px solid #e8eaed;
}
.list-wrapper {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
  }
  .top-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
  }
  .left-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .right-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  .status {
    font-size:$subFontSize;
    color: #5296db;
    margin-left:0.75rem;
    margin-top:0.65rem;
  }
  .title {
    font-size:$fontSize;
    color: #666666;
    margin-left:0.75rem;
    margin-top:0.25rem;
    margin-right:0.5rem;
    margin-bottom:0.2rem;
  }
  .price {
    font-size:$h1;
    color:$primaryColor;
    margin-right:0.75rem;
    margin-top:0.5rem;
    text-align: right;
  }
  .subtitle {
    font-size:$fontSize;
    color: #999999;
    margin-right:0.75rem;
    margin-top:0.25rem;
    margin-bottom:0.5rem;
    text-align: right;
  }
  .top-line {
    position: absolute;
    left:0.75rem;
    bottom: 0;
    right: 0;
    height: 1px;
    background-color: #e8eaed;
  }
  .desc {
    color: #999999;
    font-size:$fontSize;
    margin-left:0.75rem;
    margin-top:0.25rem;
  }
  .center-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-bottom: 1px solid #e8eaed;
    padding-bottom:0.25rem;
  }
}
.radio-wrapper{
	display: block;
	padding: 0 $pageSpace;
	.radio-item{
		padding: .5rem 0;
		border-bottom: 1px dashed #f5f5f5;
		text{
			word-break: break-all;
		}
	}
}

</style>