123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375 |
- <template>
- <view class="pos-r padding-lr-sm" v-if="fetch && fetch.info" @click="Dever.close()">
- <use-tabbar :tabbar="false" />
- <view class="border-radius bg-main padding margin-top-sm">
-
- <u-popover position="right" width="200px">
- <view class="fwbd fs">{{fetch.info.name}}提现
- <view style="margin-left:5px;display: inline-block;">
- <u-icon name="question-circle"></u-icon>
- </view>
- </view>
-
- <template v-slot:content>
- <view style="color: white;">
- <u-parse :content="fetch.info.exp_tip"></u-parse>
- </view>
-
- </template>
- </u-popover>
- <text class="link cur_color" style="float:right" @click="open">修改账户</text>
-
- <!-- 金额选项 -->
- <view class="dflex money-area flex-wrap">
- <view class="item dflex-c dflex-flow-c" :class="{ active: config === index }"
- v-for="(item, index) in fetch.config" :key="index" @click="setConfig(index)">
- <view class="price">{{ item.name }}</view>
- <text class="fs-xs">{{ item.tip }}</text>
- </view>
- </view>
- <!-- 输入其他金额 -->
- <input class="w-full padding border-radius-sm bg-drak" type="number" placeholder="请输入提现数值" v-model="number" @input="setValue"
- maxlength="140"/>
- <text class="margin-left-xs tip padding-tb">余额:{{fetch.user.yue_text}}</text>
- <text class="margin-left-xs tip padding-tb">手续费:{{fetch.info.withdraw_fee}}%</text>
- <text class="margin-left-xs tip padding-tb">到账金额:{{value}}</text>
- <!-- 马上充值按钮 -->
- <view class="dflex-c w-full margin-tb" @click="act">
- <view class="dflex-c dflex-flow-c border-radius-lg padding-tb-sm fwb line-height-1 cur_bgcolor"
- style="width: 70vw;">
- <text>马上提现</text>
- <text class="fs-xxs margin-top-xs ft-dark-4">并同意积分服务协议</text>
- </view>
- </view>
- <!-- 协议提示 -->
- <view class="margin-top dflex-c" @click="Dever.location('tool/page?title=积分服务协议')">
- <text class="cur_color margin-left-xs fs-xs padding-tb">积分服务协议</text>
- </view>
- </view>
- <!-- 记录列表 -->
- <view class="record-list margin-top-sm" v-if="fetch">
- <view class="record-title fs fwbd ft-black margin-bottom-sm">提现记录</view>
- <view v-if="fetch['list_' + current] && fetch['list_' + current].length > 0">
- <view class="record-item" v-for="(item, index) in fetch['list_' + current]" :key="index">
- <view class="record-left">
- <view class="record-name">{{ item.action_name }}</view>
- <view class="record-desc" v-if="item.desc">{{ item.desc }}</view>
- <view class="record-time">{{ item.cdate }}</view>
- </view>
- <view class="record-amount" :class="{ income: item.amount > 0, expense: item.amount < 0 }">
- {{ item.amount > 0 ? '+' : '' }}{{ item.amount }}
- </view>
- </view>
- </view>
- <view v-else class="empty-record">
- <u-empty mode="data"></u-empty>
- </view>
- </view>
-
- <u-popup mode="center" @close="close" :show="show" round="14" :closeable="true">
- <view class="alert-area border-radius bg-main pos-r">
- <view class="dflex-b ft-dark margin-bottom-sm margin-lr-xs">
- <view>绑定{{fetch.config[config].name}}提现账户:</view>
- </view>
-
- <view class="dflex border-radius-sm field set-input">
- <u--input placeholder="请输入真实姓名" v-model="fetch.config[config].realname"
- class="fwb fs-sm" border="none" :focus="true" clearable
- style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
- </view>
- <view class="dflex border-radius-sm field set-input">
- <u--input :placeholder="`请输入`+fetch.config[config].name+`账号`" v-model="fetch.config[config].account"
- class="fwb fs-sm" border="none" clearable
- style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
- </view>
- <view class="dflex border-radius-sm field set-input" v-if="fetch.config[config].id == 3">
- <u--input :placeholder="`请输入`+fetch.config[config].name+`开户行`" v-model="fetch.config[config].bank"
- class="fwb fs-sm" border="none" clearable
- style="max-height: 76px; min-height: 19px; height: auto; font: initial;"></u--input>
- </view>
-
- <view class="dflex-b ft-base margin-bottom-sm margin-lr-xs">
- <view>*请输入真实信息</view>
- </view>
-
- <!-- 提交按钮 -->
- <view class="cur_bgcolor margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click="bind">
- 提交
- </view>
- </view>
- </u-popup>
- <view class="safe-area-inset-bottom"></view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- config: 0, // 默认选中第一个
- fetch: {},
- id: 0,
- current: 0,
- number: '',
- value: 0,
- show:false,
- name:'',
- account:'',
- };
- },
- onLoad(options) {
- if (options && options.id) {
- this.id = options.id;
- } else {
- this.Dever.location('source/home');
- return;
- }
- },
- onShow() {
- this.loadData();
- this.loadList(1);
- },
- //下拉刷新
- onPullDownRefresh() {
- this.loadList(1);
- },
- //加载更多
- onReachBottom() {
- this.loadList(2);
- },
- methods: {
- open() {
- this.show = true;
- },
- close() {
- this.show = false;
- },
- setConfig(index) {
- this.config = index;
- this.loadValue()
- },
- loadData() {
- this.DeverApi.get(this, 'score.withdraw', {
- id: this.id
- }, res => {
- this.loadValue()
- });
- },
- loadList(page) {
- this.DeverApi.page([page, 'list_' + this.current], this, 'score.withdrawLog', {
- id: this.id
- });
- },
- setValue() {
- this.loadValue()
- },
- loadValue() {
- if (!this.number) {
- var number = this.fetch.user.yue
- } else {
- var number = this.number
- }
- number = parseFloat(number)
- var exp = parseFloat(this.fetch.info.exp);
- var fee = number * parseFloat(this.fetch.info.withdraw_fee)/100
- this.value = ((number - fee)*exp).toFixed(2).toString()
- this.value = this.value + this.fetch.money.unit;
- },
- bind() {
- if (this.config < 0) {
- return this.Dever.alert('请选择账户');
- }
- var config = this.fetch.config[this.config];
- this.DeverApi.post('score.withdrawBind', {id: this.id, config:config.id, realname:config.realname,account:config.account,bank:config.bank}, r => {
- this.loadData();
- this.loadList(1);
- this.close();
- this.Dever.success('绑定账户成功');
- });
- },
- act() {
- var number = this.number;
- if (number) {
- number = parseFloat(number);
- } else {
- number = 0;
- }
- if (this.config < 0) {
- return this.Dever.alert('请选择要提现的账户');
- }
-
- var config = this.fetch.config[this.config];
- if (config.status == 2) {
- // 展示绑定窗口
- //this.Dever.alert('您还未开通提现账户,请先开通');
- this.open()
- return
- }
- if (number <= 0) {
- return this.Dever.alert('请输入要提现的数值');
- }
- var yue = parseFloat(this.fetch.user.yue);
- if (yue <= number) {
- return this.Dever.alert('余额不足');
- }
- this.Dever.confirm('确认申请提现吗?申请后工作人员审核通过,提现的金额将转入您的账户', () => {
- this.DeverApi.post('score.withdrawAct', {id: this.id, config:config.id, number:number}, r => {
- this.number = '';
- this.loadData();
- this.loadList(1);
- this.Dever.success('提现申请成功');
- });
- })
-
- },
- },
- };
- </script>
- <style lang="scss">
- .money-area {
- margin-top: 28rpx;
- margin-bottom: 18rpx;
- display: flex;
- flex-wrap: wrap;
- gap: 18rpx;
- /* 加这个 */
- .item {
- width: calc((100% - 2 * 18rpx) / 3);
- /* 3个元素,间隔2个gap */
- height: 152rpx;
- background: #f5f5f5;
- border-radius: 12rpx;
- box-sizing: border-box;
- padding: 20rpx;
- text-align: center;
- .price {
- color: #333;
- margin-bottom: 8rpx;
- }
- text {
- color: #9a9a9a;
- }
- }
- .active {
- background: #6f96f1;
- color: #fff;
- .price,
- text {
- color: #fff !important;
- }
- }
- }
- .record-list {
- background: #ffffff;
- border-radius: 20rpx;
- padding: 30rpx;
- .record-title {
- font-size: 30rpx;
- font-weight: bold;
- color: #333;
- }
- .record-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20rpx 0;
- border-bottom: 1px solid #f0f0f0;
- &:last-child {
- border-bottom: none;
- }
- .record-left {
- display: flex;
- flex-direction: column;
- .record-name {
- font-size: 28rpx;
- color: #333;
- }
- .record-desc {
- font-size: 28rpx;
- color: #999;
- }
- .record-time {
- font-size: 24rpx;
- color: #999;
- margin-top: 6rpx;
- }
- }
- .record-amount {
- font-size: 28rpx;
- font-weight: bold;
- &.income {
- color: #4caf50;
- }
- &.expense {
- color: #f44336;
- }
- }
- }
- }
- .empty-record {
- text-align: center;
- padding: 60rpx 0;
- .empty-icon {
- width: 160rpx;
- height: 160rpx;
- margin-bottom: 20rpx;
- opacity: 0.6;
- }
- .empty-text {
- font-size: 28rpx;
- color: #999;
- }
- }
-
- .cur_bgcolor {
- background: #6f96f1;
- color: #fff;
- }
-
- .cur_color {
- color: #6f96f1;
- }
-
- .tip {
- font-size: 24rpx;
- color: #6f96f1;
- margin-top: 6rpx;
- }
-
- .set-input {
- padding: 20rpx;
- margin-bottom: 10rpx;
- }
-
- .u-popover {
- width: 180rpx !important;
- }
- </style>
|