hlm_pl_mall_store/pages/seller/deposit/Index.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <seller-base :show="false">
    <view class="div container">
        <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="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div header">
            <view class="div title">应缴保证金</view>
            <view class="div amount">￥{{store_info.store_payable_deposit}}</view>
            <view class="div desc-wrapper">
                <view class="div desc">已缴：{{store_info.store_avaliable_deposit}}</view>
                <view class="div desc">审核：{{store_info.store_freeze_deposit}}</view>
            </view>
        </view>
        <view class="div main-content">
            <view class="div"  @click="goSellerDepositList">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">保证金明细</text></flex-line>
            </view>
            <view class="div"  @click="goSellerDepositWithdrawList">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">保证金审核</text></flex-line>
            </view>
            <view class="div" @click="addDeposit">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">补缴保证金</text></flex-line>
            </view>
            <view class="div" @click="reduceDeposit">
                <flex-line :is-link="true" :show-border="true"><text class="span line-name">取出保证金</text></flex-line>
            </view>
        </view>
    </view>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'

import { getSellerInfo } from '../../../api/seller'
import { addSellerDeposit, reduceSellerDeposit } from '../../../api/sellerDeposit'
import flexLine from '../../flexLine'
export default {
  name: 'Index',
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      dialog:{},
      store_info: {}
    }
  },
  components:{ TitleHeader, SellerBase, flexLine },
  created: function () {
    this.getSellerInfo()
  },
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().height
  // #endif
  },
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
      switch(this.dialog.condition){
        case 1:
        addSellerDeposit(value).then(res => {
          this.getSellerInfo()
          uni.showToast({icon:'none',title: res.message})
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
          break
        case 2:
        reduceSellerDeposit(value).then(res => {
          this.getSellerInfo()
          uni.showToast({icon:'none',title: res.message})
        }).catch(function (error) {
          uni.showToast({icon:'none',title: error.message})
        })
          break
      }
    },
    goBack(){uni.navigateBack({delta:1})},
    getSellerInfo () {
      getSellerInfo().then(response => {
        if (response && response.result) {
          this.store_info = response.result.store_info
        }
      }
      ).catch(function (error) {
        uni.showToast({icon:'none',title: error.message})
      })
    },
    // 店铺保证金明细
    goSellerDepositList () {
      uni.navigateTo({url:'/pages/seller/deposit/DepositList'})
    },
    // 保证金审核列表
    goSellerDepositWithdrawList () {
      uni.navigateTo({url:'/pages/seller/deposit/WithdrawList'})
    },
    // 申请提现
    addDeposit () {
      this.dialog={condition:1,mode:'input',content:'请输入补缴金额'}
      this.$refs.confirm.open()
    },
    reduceDeposit () {
      this.dialog={condition:2,mode:'input',content:'请输入取出金额'}
      this.$refs.confirm.open()
    }
  }
}
</script>

<style scoped lang="scss">
    .common-header-wrap .common-header{box-shadow: unset}
    .main-content{background: #fff;padding:0 $pageSpace}
    .header{background: $primaryColor;position: relative;color: #fff;padding:1rem $pageSpace;
        .title{font-size:$h2}
        .amount{font-size:1.6rem;text-align: center;padding:1rem 0;}
        .desc-wrapper{display: flex;
            .desc{flex:1;font-size:$h2 }
        }
    }
</style>