<template> <view class=""> <view class="info"> <view class="bg"></view> <view class="card"> <view class="title">店铺押金信息</view> <view class="item"> <text>已缴纳押金</text> <text>{{merchant_Data.paid_margin}}元</text> </view> <view class="item"> <text>剩余缴纳押金</text> <text>{{merchant_Data.unpaid_margin}}元</text> </view> <view class="item"> <text>缴纳押金账户</text> <text class="text">{{merchant_Data.mer_name}}</text> </view> </view> </view> <view class="price"> <view class="title">缴纳金额</view> <view class="tab"> <view class="item active" style="margin: 0;">{{merchant_Data.margin}}元</view> </view> <button class="btn" @click="paydecimal">缴纳</button> </view> <!-- <view class="tip"> <view class="title">注意事项</view> <view class="text">充值后帐户的金额不能提现,可用于商城消费使用佣金导入账户之后不能再次导出、不可提现账户充值出现问题可联系商城客服,也可拨打商城客服热线<text @click="copyPhone('4008888888')">4008888888</text> </view> </view> --> <u-tabs :list="[{name: '扣除记录'},{name: '充值记录'}]" @click="changeCurrent" lineColor="#f56c6c" :activeStyle="{ color: '#333', fontWeight: 'bold', transform: 'scale(1.05)' }" :inactiveStyle="{ color: '#333', transform: 'scale(1)' }"></u-tabs> <block v-if="current==0"> <view class="content-order" v-for="(item,i ) in deductList"> <view class="deduct">扣除编号:{{item.financial_record_sn}}</view> <view class="deduct">扣除金额:<text style="color: #ff5c2d;">{{item.number}}元</text></view> <view class="deduct">扣费方式:{{item.financial_type=='auto_margin'? '订单自动扣除': '其他扣除'}}</view> <view class="deduct">订单编号:{{item.order_sn}}</view> <view class="deduct">扣除时间:{{item.create_time}}</view> </view> <view class='loadingicon acea-row row-center-wrapper' v-if='deductList.length > 0'> <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle2}} </view> <view class='loadingicon acea-row row-center-wrapper' v-else> 没有更多了 </view> </block> <block v-if="current==1"> <view class="content-order" v-for="(item,i ) in productList"> <view class="view">订单编号:{{item.order_sn}}</view> <view class="view">支付金额:{{item.total_price}}</view> <view class="view">支付状态:{{item.pay_type==1?'已支付':'待支付'}}</view> <view class="view">支付时间:{{item.pay_time}}</view> </view> <view class='loadingicon acea-row row-center-wrapper' v-if='productList.length > 0'> <text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}} </view> <view class='loadingicon acea-row row-center-wrapper' v-else> 没有更多了 </view> </block> </view> </template> <script> import { merchant, paymerchant, marginlist, autoMarginlist } from '@/api/api.js' import { Toast } from '../../libs/uniApi' export default { data() { return { mer_id: 0, merchant_Data: {}, where: { page: 1, limit: 10 }, where2: { page: 1, limit: 10 }, productList: [], deductList: [], loadend: false, loading: false, loadTitle: '加载更多', loadend2: false, loading2: false, loadTitle2: '加载更多', current: 0 } }, onLoad(e) { this.mer_id = e.mer_id this.decimal() // this.list(true); this.autoList(true); }, onReachBottom() { if(this.current==0){ this.loadend2 = false; this.loading2 = false; this.autoList(false); }else { this.loadend = false; this.loading = false; this.list(false); } }, methods: { list(isPage) { let that = this; if (that.loadend) return; if (that.loading) return; if (isPage === true) that.$set(that, 'productList', []); that.loading = true; that.loadTitle = ''; marginlist(that.where).then(res => { let list = res.data.list; let productList = that.$util.SplitArray(list, that.productList); let loadend = list.length < that.where.limit; that.loadend = loadend; that.loading = false; that.loadTitle = loadend ? '已全部加载' : '加载更多'; setTimeout(() => { that.$set(that, 'productList', productList); }, 500) that.$set(that.where, 'page', that.where.page + 1); if (that.where.page == 1 && res.data.list.length <= 0) that.emptyShow = true }).catch(err => { that.loading = false; that.loadTitle = '加载更多'; }); }, //获取押金信息 decimal() { merchant({ id: this.mer_id }).then((res) => { this.merchant_Data = res.data }); }, //缴纳押金 paydecimal() { if (this.merchant_Data.is_margin != 1) { this.$util.Tips({ title: '暂时无需缴纳押金' }); } else { let that = this uni.showModal({ title: '提示', content: '商户' + this.merchant_Data.mer_name + '是否同意缴纳押金', success: (res) => { if (res.confirm) { // console.log('用户点击确定'); paymerchant().then((res) => { console.log(res); uni.requestPayment({ provider: 'wxpay', orderInfo: res.data .config, //微信、支付宝订单数据 【注意微信的订单信息,键值应该全部是小写,不能采用驼峰命名】 success: (res) => { this.$util.Tips({ title: '支付成功' }); this.decimal() this.list(true) }, fail: (err) => { this.$util.Tips({ title: '支付失败' }); console.log('fail:' + JSON.stringify(err)); } }); }).catch((err) => { this.$util.Tips({ title: err }); }) } else if (res.cancel) { console.log('用户点击取消'); } } }); } }, changeCurrent(e){ this.current = e.index; if(e.index==0){ this.loadend = false; this.loading = false; this.autoList(true); }else { this.loadend = false; this.loading = false; this.list(true) } }, autoList(isPage){ let that = this; if (that.loadend2) return; if (that.loading2) return; if (isPage === true) that.$set(that, 'deductList', []); that.loading2 = true; that.loadTitle2 = ''; autoMarginlist(36, that.where2).then(res=>{ let list = res.data; let deductList = that.$util.SplitArray(list, that.deductList); let loadend = list.length < that.where2.limit; that.loadend2 = loadend; that.loading2 = false; that.loadTitle2 = loadend ? '已全部加载' : '加载更多'; setTimeout(() => { that.$set(that, 'deductList', deductList); }, 500); that.$set(that.where2, 'page', that.where2.page + 1); if (that.where2.page == 1 && res.data.length <= 0) that.emptyShow = true }).catch(err=>{ console.log(err); that.loading2 = false; that.loadTitle2 = '加载更多'; }) } } } </script> <style> </style> <style lang="scss"> page { background-color: #fff; } .content-order { background: #fff; border-radius: 21rpx 21rpx; margin: 0 28rpx; margin-top: 30rpx; padding: 28rpx; box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.1); .view { font-size: 30rpx; font-family: PingFang SC-Regular, PingFang SC; font-weight: 400; color: #333333; } .deduct{ } } .info { display: flex; flex-direction: column; align-items: center; position: relative; height: 250rpx; .bg { background-color: #FF5C2D; height: 170rpx; width: 100vw; border-radius: 0rpx 0rpx 28rpx 28rpx; position: absolute; top: 0; left: 0; } .card { width: 694rpx; height: 270rpx; background: #FFFFFF; margin-top: 38.55rpx; box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50, 116, 249, 0.1); border-radius: 14rpx 14rpx 14rpx 14rpx; opacity: 1; padding: 31.5rpx 28rpx; font-size: 30rpx; display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 0; .title { font-size: 32rpx; font-weight: 600; color: #333333; padding-bottom: 10rpx; } .item { display: flex; justify-content: space-between; font-size: 32rpx; font-weight: 400; color: #333333; text:nth-child(1) { flex-shrink: 0; margin-right: 18rpx; } .text{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } } } .price { display: flex; flex-direction: column; padding: 0 28rpx; margin-top: 90rpx; .title { font-size: 32rpx; font-weight: 600; color: #333333; line-height: 39rpx; margin-bottom: 30rpx; } .tab { display: flex; flex-wrap: wrap; justify-content: left; width: 694rpx; .item { width: 217rpx; height: 131rpx; margin: 0 auto; margin-bottom: 20rpx; border-radius: 7rpx 7rpx 7rpx 7rpx; border: 2rpx solid #F5F5F5; display: flex; justify-content: center; align-items: center; font-size: 32rpx; font-weight: 500; line-height: 32rpx; } .active { border: 2rpx solid #FF5C2D; color: #FF5C2D; } } .input { width: 100%; height: 112rpx; background: #F5F5F5; border-radius: 56rpx 56rpx 56rpx 56rpx; opacity: 1; padding: 0 45.56rpx; box-sizing: border-box; font-size: 28rpx; font-weight: 400; color: #333; line-height: 35rpx; } .btn { width: 694rpx; height: 84rpx; margin-top: 30rpx; background: #FF5C2D; box-shadow: 0rpx 14rpx 44rpx 2rpx #E9EFF5; border-radius: 42rpx 42rpx 42rpx 42rpx; display: flex; justify-content: center; align-items: center; font-size: 32rpx; font-weight: 400; color: #FFFFFF; } } .tip { display: flex; flex-direction: column; padding: 0 28rpx; margin-top: 84rpx; .title { font-size: 32rpx; font-weight: 500; color: #FF5C2D; line-height: 32rpx; margin-bottom: 21rpx; } .text { font-size: 28rpx; font-weight: 400; color: rgba(0, 0, 0, 0.6); line-height: 42rpx; -webkit-background-clip: text; } } </style>