|
@@ -0,0 +1,418 @@
|
|
|
+<template>
|
|
|
+ <div class="bg">
|
|
|
+ <m-nav-bar mode="white" title="提现"></m-nav-bar>
|
|
|
+
|
|
|
+ <img class="bg-img" :src="bgImgIcon">
|
|
|
+ <div class="text">
|
|
|
+ <div>可提现金额(元)</div>
|
|
|
+ <div class="text-money">{{ userInfo.profitPrice / 100 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="form">
|
|
|
+ <div class="head">提现金额</div>
|
|
|
+ <van-field class="form-input0" format-trigger="onBlur" v-model="amount" center clearable
|
|
|
+ placeholder="请输入金额">
|
|
|
+ <template #button>
|
|
|
+ <span @click="() => {
|
|
|
+ amount = userInfo.profitPrice / 100
|
|
|
+
|
|
|
+ }" class="font26" style="color:#498EF5">全部提现</span>
|
|
|
+ </template>
|
|
|
+ <template #left-icon>
|
|
|
+ <span class="font48">¥</span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </van-field>
|
|
|
+ <div class="button">
|
|
|
+ <van-button @click="cashToWx" class="cash-button" color="#01C18D" round icon="wechat" type="primary">
|
|
|
+ 提现到微信</van-button>
|
|
|
+ <van-button @click="() => {
|
|
|
+ cashToCardShow = true
|
|
|
+ }" class="cash-button" color="#498EF5" round icon="credit-pay" type="primary">提现到银行卡
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ <van-dialog @confirm="cashToCard" v-model:show="cashToCardShow" title="银行卡信息" show-cancel-button>
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-field v-model="encTrueName" label="收款人" placeholder="请收款人姓名" />
|
|
|
+ <van-field @click="() => {
|
|
|
+ bankPickerShow = true
|
|
|
+
|
|
|
+ }" is-link v-model="bankName" label="银行" placeholder="请选择银行">
|
|
|
+
|
|
|
+ </van-field>
|
|
|
+ <van-field type="digit" v-model="encBankNo" label="银行卡号" placeholder="请输入银行卡号" />
|
|
|
+ </van-cell-group>
|
|
|
+ </van-dialog>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <van-popup v-model:show="bankPickerShow" position="bottom">
|
|
|
+ <van-picker :columns-field-names="wxBankListFieldnames" :columns="wxBankList" @confirm="getBankCode"
|
|
|
+ @cancel="bankPickerShow = false" />
|
|
|
+ </van-popup>
|
|
|
+ <div class="record">
|
|
|
+ <div class="head">
|
|
|
+ <div class="head-rect1"></div>
|
|
|
+ <div class="head-text1">提现记录</div>
|
|
|
+ </div>
|
|
|
+ <div class="body">
|
|
|
+ <div v-for="(item, index) in wxCashoutList" :key="index" class="item">
|
|
|
+ <div class="item-row1">
|
|
|
+ <div>提现</div>
|
|
|
+ <div style="color:#FF4D53">¥{{ item.extractPrice / 100 }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item-row2">
|
|
|
+ <div>{{ item.createTime }}</div>
|
|
|
+ <div>状态:<span v-if="item.status == '1'" style="color:#01C18D">提现成功 </span>
|
|
|
+ <span v-if="item.status == '2'" style="color:red"> 提现失败</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import { computed, defineComponent, reactive, ref } from 'vue'
|
|
|
+import bgImgIcon from '@/assets/img/bgImg.png'
|
|
|
+import { useStore } from 'vuex'
|
|
|
+import api from '@/api'
|
|
|
+import { Dialog, Toast, PickerOption } from 'vant';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ setup() {
|
|
|
+ const store = useStore()
|
|
|
+ const amount = ref(0)
|
|
|
+ const userInfo = computed(() => {
|
|
|
+ return store.state.userInfo
|
|
|
+ })
|
|
|
+ const wxCashoutList = ref<any[]>([])
|
|
|
+ const cashToCardShow = ref(false)
|
|
|
+ const bankPickerShow = ref(false)
|
|
|
+ const bankCode = ref<number>()
|
|
|
+ const bankName = ref('')
|
|
|
+ const encBankNo = ref('')
|
|
|
+ const encTrueName = ref('')
|
|
|
+ const wxBankListFieldnames = { text: 'bankName', values: 'values', children: 'children' }
|
|
|
+ const wxBankList = reactive([
|
|
|
+ { bankName: "工商银行", bankCode: 1002 },
|
|
|
+ { bankName: "农业银行", bankCode: 1005 },
|
|
|
+ { bankName: "建设银行", bankCode: 1003 },
|
|
|
+ { bankName: "中国银行", bankCode: 1026 },
|
|
|
+ { bankName: "交通银行", bankCode: 1020 },
|
|
|
+ { bankName: "招商银行", bankCode: 1001 },
|
|
|
+ { bankName: "邮储银行", bankCode: 1066 },
|
|
|
+ { bankName: "民生银行", bankCode: 1006 },
|
|
|
+ { bankName: "平安银行", bankCode: 1010 },
|
|
|
+ { bankName: "中信银行", bankCode: 1021 },
|
|
|
+ { bankName: "浦发银行", bankCode: 1004 },
|
|
|
+ { bankName: "兴业银行", bankCode: 1009 },
|
|
|
+ { bankName: "光大银行", bankCode: 1022 },
|
|
|
+ { bankName: "广发银行", bankCode: 1027 },
|
|
|
+ { bankName: "华夏银行", bankCode: 1025 },
|
|
|
+ { bankName: "宁波银行", bankCode: 1056 },
|
|
|
+ { bankName: "北京银行", bankCode: 4836 },
|
|
|
+ { bankName: "上海银行", bankCode: 1024 },
|
|
|
+ { bankName: "南京银行", bankCode: 1054 },
|
|
|
+ { bankName: "长子县融汇村镇银行", bankCode: 475 },
|
|
|
+ { bankName: "长沙银行", bankCode: 4216 },
|
|
|
+ { bankName: "浙江泰隆商业银行", bankCode: 4051 },
|
|
|
+ { bankName: "中原银行", bankCode: 4753 },
|
|
|
+ { bankName: "企业银行(中国)", bankCode: 4761 },
|
|
|
+ { bankName: "顺德农商银行", bankCode: 4036 },
|
|
|
+ { bankName: "衡水银行", bankCode: 4752 },
|
|
|
+ { bankName: "长治银行", bankCode: 4756 },
|
|
|
+ { bankName: "大同银行", bankCode: 4767 },
|
|
|
+ { bankName: "河南省农村信用社", bankCode: 4115 },
|
|
|
+ { bankName: "宁夏黄河农村商业银行", bankCode: 4150 },
|
|
|
+ { bankName: "山西省农村信用社", bankCode: 4156 },
|
|
|
+ { bankName: "安徽省农村信用社", bankCode: 4166 },
|
|
|
+ { bankName: "甘肃省农村信用社", bankCode: 4157 },
|
|
|
+ { bankName: "天津农村商业银行", bankCode: 4153 },
|
|
|
+ { bankName: "广西壮族自治区农村信用社", bankCode: 4113 },
|
|
|
+ { bankName: "陕西省农村信用社", bankCode: 4108 },
|
|
|
+ { bankName: "深圳农村商业银行", bankCode: 4076 },
|
|
|
+ { bankName: "宁波鄞州农村商业银行", bankCode: 4052 },
|
|
|
+ { bankName: "浙江省农村信用社联合社", bankCode: 4764 },
|
|
|
+ { bankName: "江苏省农村信用社联合社", bankCode: 4217 },
|
|
|
+ { bankName: "江苏紫金农村商业银行股份有限公司", bankCode: 4072 },
|
|
|
+ { bankName: "北京中关村银行股份有限公司", bankCode: 4769 },
|
|
|
+ { bankName: "星展银行(中国)有限公司", bankCode: 4778 },
|
|
|
+ { bankName: "枣庄银行股份有限公司", bankCode: 4766 },
|
|
|
+ { bankName: "海口联合农村商业银行股份有限公司", bankCode: 4758 },
|
|
|
+ { bankName: "南洋商业银行(中国)有限公司", bankCode: 4763 },
|
|
|
+ ]);
|
|
|
+ const getBankCode = (val: {
|
|
|
+ bankCode: number,
|
|
|
+ bankName: string
|
|
|
+ }) => {
|
|
|
+ bankCode.value = val.bankCode
|
|
|
+ bankName.value = val.bankName
|
|
|
+ bankPickerShow.value = false
|
|
|
+
|
|
|
+ }
|
|
|
+ api.wx.studentWxExtractlist({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ }).then(res => {
|
|
|
+ wxCashoutList.value = res.data.rows
|
|
|
+
|
|
|
+ })
|
|
|
+ const cashToCard = () => {
|
|
|
+ if (amount.value < 0.3) {
|
|
|
+ Toast.fail('提现金额需要0.3元以上')
|
|
|
+
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ api.wx.studentWxExtractWxwithbankdrawal({
|
|
|
+ amount: amount.value * 100,
|
|
|
+ bankCode: bankCode.value,
|
|
|
+ encBankNo: encBankNo.value,
|
|
|
+ encTrueName: encTrueName.value
|
|
|
+
|
|
|
+ }).then(res => {
|
|
|
+ Toast.success('提现成功,到账有延迟')
|
|
|
+ store.dispatch('getUserInfo');
|
|
|
+ api.wx.studentWxExtractlist({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ }).then(res => {
|
|
|
+ wxCashoutList.value = res.data.rows
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ const cashToWx = () => {
|
|
|
+ Dialog.confirm({
|
|
|
+ title: '提现申请',
|
|
|
+ message:
|
|
|
+ '提现到微信',
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ if (amount.value < 1) {
|
|
|
+ Toast.fail('提现金额需要大于1元')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ api.wx.studentWxExtractWithdraw({
|
|
|
+ amount: amount.value * 100
|
|
|
+ }).then(res => {
|
|
|
+ Toast.success('提现成功,到账有延迟')
|
|
|
+ store.dispatch('getUserInfo');
|
|
|
+ api.wx.studentWxExtractlist({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000
|
|
|
+ }).then(res => {
|
|
|
+ wxCashoutList.value = res.data.rows
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ // on confirm
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // on cancel
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ wxBankList,
|
|
|
+ wxBankListFieldnames,
|
|
|
+ bankCode,
|
|
|
+ bankName,
|
|
|
+ encBankNo,
|
|
|
+ encTrueName,
|
|
|
+ wxCashoutList,
|
|
|
+
|
|
|
+ userInfo,
|
|
|
+ searchValue: "",
|
|
|
+ profitPrice: "0.00",
|
|
|
+ showCashout: ref(false),
|
|
|
+ bankPickerShow,
|
|
|
+ cashToCardShow,
|
|
|
+ bgImgIcon,
|
|
|
+ amount,
|
|
|
+ cashToWx,
|
|
|
+ cashToCard,
|
|
|
+ getBankCode
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.font48 {
|
|
|
+ font-size: 48px;
|
|
|
+}
|
|
|
+
|
|
|
+.font26 {
|
|
|
+ font-size: 26px;
|
|
|
+}
|
|
|
+
|
|
|
+.bg {
|
|
|
+
|
|
|
+ min-height: 100vh;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .bg-img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 750px;
|
|
|
+ height: 424px;
|
|
|
+ left: 0;
|
|
|
+ z-index: -10;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form {
|
|
|
+ width: 690px;
|
|
|
+ height: 334px;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 40px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 30px 30px 30px 30px;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .cash-button {
|
|
|
+ width: 300px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ color: #0A1A33;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input0 {
|
|
|
+ font-size: 48px;
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+ border-bottom: 2px #E8E8E8 solid;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.text {
|
|
|
+ margin-top: 58px;
|
|
|
+ color: #fff;
|
|
|
+ padding-left: 30px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 26px;
|
|
|
+
|
|
|
+ .text-money {
|
|
|
+ font-size: 80px;
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-money::before {
|
|
|
+ content: '¥ ';
|
|
|
+ font-size: 50px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.record {
|
|
|
+ width: 690px;
|
|
|
+ padding-left: 30px;
|
|
|
+ padding-right: 30px;
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 18px;
|
|
|
+
|
|
|
+ .head {
|
|
|
+ width: 100%;
|
|
|
+ height: 92px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 2px #E8E8E8 solid;
|
|
|
+
|
|
|
+ .head-rect1 {
|
|
|
+ width: 6px;
|
|
|
+ height: 30px;
|
|
|
+ background: #498EF5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head-text1 {
|
|
|
+ font-size: 34px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 138px;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-bottom: 2px #E8E8E8 solid;
|
|
|
+
|
|
|
+ .item-row1 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 30px;
|
|
|
+ vertical-align: baseline;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-row2 {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24px;
|
|
|
+ height: 34px;
|
|
|
+ line-height: 34px;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 14px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|