You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
758 lines
17 KiB
758 lines
17 KiB
<template>
|
|
<view>
|
|
<view class="head df jcsb">
|
|
<div>
|
|
<div class="head-yu">账户余额</div>
|
|
<div class="head-one">{{balance}}<span>元</span></div>
|
|
</div>
|
|
<div class="covip df aic jcsa" @click="show=true">充值</div>
|
|
</view>
|
|
<view class="list">
|
|
<view class="name">
|
|
历史记录
|
|
</view>
|
|
<mescroll-uni ref="mescroll" @getData="getList" top="380rpx">
|
|
<!-- <block slot="list"> -->
|
|
<view v-for="(item,index) in pagelist" :key="index" slot="list">
|
|
<view class="card">
|
|
<view class="left">
|
|
<view class="name">
|
|
{{item.type_name}}
|
|
</view>
|
|
<view class="time-one">{{ $util.timeStampTurnTime(item.create_time) }}</view>
|
|
</view>
|
|
<view class="right">
|
|
{{item.account_data}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- </block> -->
|
|
</mescroll-uni>
|
|
<loading-cover ref="loadingCover"></loading-cover>
|
|
</view>
|
|
<u-overlay :show="show" @click="show = false">
|
|
<view class="Recharge" @tap.stop>
|
|
<view class="df jcsb qinru">
|
|
<div></div>
|
|
<div>请输入充值金额</div>
|
|
<!-- <image :src="$util.img('/upload/weapp/user/X.png')" mode=""></image> -->
|
|
<image :src="$util.img('/upload/weapp/user/xx.png')" mode=""></image>
|
|
</view>
|
|
<view class="df mannin">
|
|
<view class="" v-for="(item,index) in copper" :key="index">
|
|
<view :style="arr==index?{background:'#21BBF3',color:'#fff'}:''" class="mannin-one df aic jcsa"
|
|
@click="btn(item,index)">￥{{item}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="df head-pay">
|
|
<div class="df aic"></div>
|
|
<div>
|
|
<input placeholder="请输入充值金额" v-model="recharge_money" type="number">
|
|
<div class="arr">￥</div>
|
|
<div class="box">元</div>
|
|
</div>
|
|
</view>
|
|
<!-- <view class="about">
|
|
*充值满500总赠送50优惠券，充值满1000送100优惠券
|
|
</view> -->
|
|
<view class="xuind">
|
|
|
|
</view>
|
|
<view class="Select-payment">
|
|
<!-- <div><input type="radio" name="sex" value="微信支付" checked="checked" /></div> -->
|
|
<div v-for="(item,index) in radiolist1" :key="index">
|
|
<div class="arr df aic jcsb" @click="time(index)">
|
|
<div class="df aic">
|
|
<image :src="$util.img(item.img)"></image>
|
|
<text>{{item.name}}</text>
|
|
</div>
|
|
<image v-if="index==indexa" :src="$util.img(`/upload/weapp/user/gou.png`)" mode=""></image>
|
|
<image v-else :src="$util.img(`/upload/weapp/user/un_gou.png`)" mode=""></image>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</view>
|
|
<view class="btn-qz df aic jcsa" @click="zfqd">
|
|
确定支付
|
|
</view>
|
|
</view>
|
|
</u-overlay>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef H5
|
|
import { Weixin } from 'common/js/wx-jssdk.js';
|
|
// #endif
|
|
|
|
// 包裹 uniapi 接口
|
|
const MiniWarp = (fn, data) => {
|
|
return new Promise((resolve, reject) => {
|
|
fn({
|
|
success: (res) => resolve(res),
|
|
fail: (res) => reject(res),
|
|
...data,
|
|
})
|
|
})
|
|
}
|
|
const uniLogin = data => MiniWarp(uni.login, data);
|
|
const requestPayment = data => MiniWarp(uni.requestPayment, data);
|
|
export default {
|
|
data() {
|
|
return {
|
|
token: uni.getStorageSync('token'),
|
|
show: false,
|
|
arr: -1,
|
|
indexa: 0,
|
|
balance: '',
|
|
pagelist: [],
|
|
recharge_money: "",
|
|
out_trade_no: "",
|
|
list: [],
|
|
copper: [],
|
|
radiolist1: [
|
|
|
|
// #ifndef MP-ALIPAY
|
|
{
|
|
name: '微信支付',
|
|
img: '/upload/weapp/pageSalesman/reportForm/WeChat.png',
|
|
payCode: "WECHAT_JSAPI"
|
|
},
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
{
|
|
name: '支付宝支付',
|
|
img: '/upload/weapp/pageSalesman/reportForm/Alipay.png',
|
|
payCode: "ALIPAY_JSAPI"
|
|
},
|
|
// #endif
|
|
|
|
],
|
|
};
|
|
},
|
|
onShow() {
|
|
|
|
this.getBalance()
|
|
this.getCopper();
|
|
this.$refs.mescroll.refresh();
|
|
|
|
|
|
},
|
|
onHide() {
|
|
uni.removeStorageSync('chemeData')
|
|
},
|
|
methods: {
|
|
getBalance() {
|
|
this.$api.sendRequest({
|
|
url: '/api/memberaccount/info',
|
|
data: {
|
|
account_type: "balance"
|
|
},
|
|
success: res => {
|
|
console.log(res);
|
|
this.balance = res.data.balance
|
|
}
|
|
});
|
|
},
|
|
getCopper() {
|
|
this.$api.sendRequest({
|
|
url: '/api/ordercreate/getRechargeList',
|
|
success: res => {
|
|
this.copper = res.data
|
|
}
|
|
})
|
|
},
|
|
getList(mescroll) {
|
|
this.$api.sendRequest({
|
|
url: "/api/memberaccount/page",
|
|
data: {
|
|
page: mescroll.num,
|
|
page_size: mescroll.size,
|
|
account_type: "balance"
|
|
},
|
|
success: res => {
|
|
let newArr = [];
|
|
let msg = res.message;
|
|
if (res.code == 0 && res.data) {
|
|
newArr = res.data.list;
|
|
} else {
|
|
this.$util.showToast({
|
|
title: msg
|
|
});
|
|
}
|
|
mescroll.endSuccess(newArr.length);
|
|
//设置列表数据
|
|
if (mescroll.num == 1) {
|
|
this.pagelist = []; //如果是第一页需手动制空列表
|
|
this.related_id = 0;
|
|
}
|
|
this.pagelist = this.pagelist.concat(newArr); //追加新数据
|
|
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
|
}
|
|
})
|
|
},
|
|
btn(item, index) {
|
|
|
|
this.arr = index;
|
|
this.recharge_money = item;
|
|
|
|
},
|
|
time(index) {
|
|
this.indexa = index
|
|
console.log(index);
|
|
},
|
|
zfqd() {
|
|
if (!this.recharge_money) {
|
|
this.$util.showToast({
|
|
title: '请输入充值金额'
|
|
});
|
|
return;
|
|
}
|
|
this.$api.sendRequest({
|
|
url: '/api/ordercreate/rechargeCreate',
|
|
data: {
|
|
recharge_money: this.recharge_money,
|
|
},
|
|
success: res => {
|
|
this.out_trade_no = res.data;
|
|
// console.log(this.indexa);
|
|
// this.indexa 0 微信支付 1支付宝支付
|
|
// #ifdef MP-ALIPAY
|
|
if (this.indexa == 0) {
|
|
this.alipay()
|
|
}
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
if (this.indexa == 0) {
|
|
this.weixinPay()
|
|
}
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
if (this.indexa == 0) {
|
|
this.baofuWx()
|
|
} else if (this.indexa == 1) {
|
|
this.alipay()
|
|
}
|
|
// #endif
|
|
|
|
|
|
}
|
|
})
|
|
// this.show = false
|
|
// this.$util.showToast({
|
|
// title: '支付成功'
|
|
// });
|
|
},
|
|
// 支付宝支付
|
|
alipay() {
|
|
|
|
// #ifdef MP-ALIPAY
|
|
console.log(`MP-ALIPAY`);
|
|
this.aliPay()
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
console.log(`APP-PLUS`);
|
|
this.$api.sendRequest({
|
|
url: '/api/pay/getAliSchemeUrl',
|
|
data: {
|
|
token: this.token,
|
|
out_trade_no: this.out_trade_no,
|
|
goods_type: 2,
|
|
pay_money: this.recharge_money,
|
|
page: 'pages_tool/pay/index'
|
|
},
|
|
success: res => {
|
|
console.log(res, 'res');
|
|
// #ifdef APP-PLUS
|
|
plus.runtime.openURL(res.data.openlink);
|
|
// #endif
|
|
// #ifndef APP-PLUS
|
|
window.open(res.data.openlink)
|
|
// #endif
|
|
this.show = false
|
|
// this.$util.showToast({
|
|
// title: '支付成功'
|
|
// });
|
|
}
|
|
})
|
|
// #endif
|
|
},
|
|
// 宝付支付
|
|
baofuWx() {
|
|
// console.log('/pages_tool/pay/index?token=' + uni.getStorageSync('token') +
|
|
// '&out_trade_no=' + this.out_trade_no + '&goods_type=2');
|
|
// #ifdef MP-WEIXIN || APP-PLUS
|
|
this.weixinPay()
|
|
// #endif
|
|
// // #ifndef MP-WEIXIN
|
|
// this.$api.sendRequest({
|
|
// url: '/api/pay/getSchemeUrl',
|
|
// data: {
|
|
// token: this.token,
|
|
// out_trade_no: this.out_trade_no,
|
|
// goods_type: 2,
|
|
// pay_money: this.recharge_money
|
|
// },
|
|
// success: res => {
|
|
// console.log(res, 'res');
|
|
// // #ifdef APP-PLUS
|
|
// plus.runtime.openURL(res.data.openlink);
|
|
// // #endif
|
|
// // #ifndef APP-PLUS
|
|
// window.open(res.data.openlink)
|
|
// // #endif
|
|
// this.show = false
|
|
// // this.$util.showToast({
|
|
// // title: '支付成功'
|
|
// // });
|
|
// }
|
|
// })
|
|
// // #endif
|
|
},
|
|
async aliPay() {
|
|
try {
|
|
let provider = 'alipay'
|
|
// 微信登录
|
|
const loginRes = await uniLogin({ provider })
|
|
console.log(loginRes, 'loginRes');
|
|
|
|
this.aliCode = loginRes.code;
|
|
// return
|
|
// 请求后端
|
|
// let url = '/api/boofopay/unifiedOrder';
|
|
// debug 模式调用 测试支付接口
|
|
// appBaseInfo = wx.getAppBaseInfo()
|
|
// if (appBaseInfo.enableDebug)
|
|
// url = '/api/boofopay/test'
|
|
// goods_type 默认1 充值余额2
|
|
|
|
let url = '/api/boofopay/rechargeUnifiedOrder'
|
|
const res = await this.$api.sendRequest({
|
|
url,
|
|
data: {
|
|
token: this.token,
|
|
code: this.aliCode,
|
|
payCode: "ALIPAY_JSAPI", //payCode 支付宝：ALIPAY_JSAPI 微信：WECHAT_JSAPI
|
|
out_trade_no: this.out_trade_no,
|
|
goods_type: 2,
|
|
},
|
|
async: false
|
|
})
|
|
// 拼接支付参数
|
|
|
|
const { trade_no } = res.data.chlRetParam
|
|
await requestPayment({
|
|
provider,
|
|
orderInfo: trade_no
|
|
});
|
|
|
|
// 退出小程序
|
|
// wx.exitMiniProgram()
|
|
this.getBalance()
|
|
this.$refs.mescroll.refresh();
|
|
this.show = false;
|
|
} catch (e) {
|
|
|
|
//TODO handle the exception
|
|
console.log(e);
|
|
}
|
|
},
|
|
async weixinPay() {
|
|
try {
|
|
let provider = 'weixin'
|
|
// 微信登录
|
|
const loginRes = await uniLogin({ provider })
|
|
// console.log(loginRes, 'loginRes');
|
|
const wxCode = loginRes.code ;
|
|
// 请求后端
|
|
// console.log('wxCode', wxCode);
|
|
// return
|
|
const appBaseInfo = wx.getAppBaseInfo()
|
|
// console.log(666);
|
|
// let url = '/api/boofopay/rechargeUnifiedOrder'
|
|
let url = '/api/boofopay/preRechargeUnifiedOrder'
|
|
const res = await this.$api.sendRequest({
|
|
url,
|
|
data: {
|
|
token: this.token,
|
|
// code: wxCode,
|
|
payCode: "WECHAT_JSAPI", //payCode 支付宝：ALIPAY_JSAPI 微信：WECHAT_JSAPI
|
|
out_trade_no: this.out_trade_no,
|
|
goods_type: 2
|
|
|
|
},
|
|
// success: res => {
|
|
|
|
// if (res.code < 0) {
|
|
// this.$util.showToast({
|
|
// title: res.message
|
|
// });
|
|
// }
|
|
// },
|
|
async: false
|
|
})
|
|
|
|
// console.log('获取宝付的token', res.data);
|
|
// #ifdef MP-WEIXIN
|
|
uni.navigateToMiniProgram({
|
|
appId:'wx9f0f95c42bcf73c9',
|
|
path: `pages/pay-plugin/pay-plugin?tradeNo=${res.data.token}&type=BF`,
|
|
success: () => {
|
|
// this.$util.redirectTo('/pages/member/index');
|
|
this.getBalance()
|
|
this.$refs.mescroll.refresh();
|
|
this.show = false;
|
|
}
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
plus.share.getServices(response => {
|
|
let sweixin = null;
|
|
|
|
for (let i = 0; i < response.length; i++) {
|
|
let t = response[i];
|
|
if (t.id == 'weixin') {
|
|
sweixin = t;
|
|
}
|
|
}
|
|
if(sweixin) {
|
|
sweixin.launchMiniProgram({
|
|
id:'gh_d3de2c52074f',
|
|
type: 0,
|
|
path: `pages/pay-plugin/pay-plugin?tradeNo=${res.data.token}&type=BF`,
|
|
success: () => {
|
|
this.show = false
|
|
this.$util.showToast({
|
|
title: '支付成功'
|
|
});
|
|
}
|
|
})
|
|
} else {
|
|
plus.nativeUI.alert('当前环境不支持微信操作!');
|
|
}
|
|
})
|
|
// #endif
|
|
// 拼接支付参数
|
|
// const { timeStamp, nonceStr, package: payPackage, signType, paySign } = res.data.chlRetParam
|
|
// .wc_pay_data
|
|
// await requestPayment({
|
|
// provider,
|
|
// timeStamp,
|
|
// nonceStr,
|
|
// package: payPackage,
|
|
// signType,
|
|
// paySign,
|
|
// });
|
|
// 退出小程序
|
|
// wx.exitMiniProgram()
|
|
// this.getBalance()
|
|
// this.$refs.mescroll.refresh();
|
|
// this.show = false;
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
console.log(e);
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .mescroll-uni-content {
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
.jcsb {
|
|
width: calc(100 vw - 64rpx) !important;
|
|
}
|
|
}
|
|
|
|
.head {
|
|
width: 686rpx;
|
|
height: 232rpx;
|
|
background: linear-gradient(130deg, #21BBF3 0%, #09B6FF 100%);
|
|
border-radius: 24rpx;
|
|
padding: 0 48rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
margin-top: 32rpx;
|
|
|
|
.head-yu {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin-top: 48rpx;
|
|
}
|
|
|
|
.head-one {
|
|
font-size: 64rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
line-height: 64rpx;
|
|
margin-top: 16rpx;
|
|
|
|
span {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.covip {
|
|
width: 152rpx;
|
|
height: 64rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #21BBF3;
|
|
line-height: 40rpx;
|
|
margin-top: 88rpx;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: calc(100 vw - 64rpx);
|
|
height: 100%;
|
|
background: #FFFFFF;
|
|
border-radius: 24rpx;
|
|
padding: 32rpx 32rpx 40rpx 32rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
margin-top: 30rpx;
|
|
|
|
.card {
|
|
width: calc(100% - 64rpx);
|
|
margin: 20rpx auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: #BFBFBF 1rpx solid;
|
|
|
|
.time-one {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 34rpx;
|
|
margin: 8rpx 4rpx 0 0;
|
|
}
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.right {
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.name-cz {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 40rpx;
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
|
|
|
|
.time-two {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.sex {
|
|
font-size: 40rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #222222;
|
|
line-height: 48rpx;
|
|
margin-top: 48rpx;
|
|
}
|
|
|
|
.xukjs {
|
|
|
|
width: 622rpx;
|
|
height: 1rpx;
|
|
background: #E8E8E8;
|
|
border-radius: 2rpx;
|
|
margin-top: 32rpx;
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.Recharge {
|
|
width: 750rpx;
|
|
height: 854rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 32rpx 32rpx 0rpx 0rpx;
|
|
position: fixed;
|
|
bottom: 0;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.qinru {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #222222;
|
|
line-height: 44rpx;
|
|
margin-top: 40rpx;
|
|
padding: 0 32rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mannin {
|
|
margin-top: 64rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.mannin-one {
|
|
width: 202rpx;
|
|
height: 104rpx;
|
|
background: rgba(33, 187, 243, 0.08);
|
|
border-radius: 16rpx;
|
|
font-size: 36rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #21BBF3;
|
|
line-height: 64rpx;
|
|
margin: 10rpx 24rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.head-pay {
|
|
padding: 24rpx 0 0 32rpx;
|
|
// margin-top: 24rpx;
|
|
}
|
|
|
|
.head-pay div:nth-child(2) {
|
|
// margin-left: 68rpx;
|
|
position: relative;
|
|
|
|
input {
|
|
// border: 1rpx solid red;
|
|
width: 700rpx;
|
|
height: 70rpx;
|
|
background: #F6F6F6;
|
|
border-radius: 16rpx;
|
|
margin: 0 auto;
|
|
padding: 0 68rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.arr {
|
|
font-size: 36rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #21BBF3;
|
|
line-height: 44rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 20rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 24rpx;
|
|
}
|
|
}
|
|
|
|
.about {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #BFBFBF;
|
|
line-height: 34rpx;
|
|
margin: 16rpx 0 32rpx 0;
|
|
margin-left: 30rpx;
|
|
}
|
|
|
|
.xuind {
|
|
width: 654rpx;
|
|
height: 1rpx;
|
|
background: #E8E8E8;
|
|
margin: 0 auto;
|
|
border-radius: 2rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.Select-payment {
|
|
width: 702rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
margin-top: 24rpx;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
margin: 0 auto;
|
|
|
|
.arr {
|
|
margin-right: 16rpx;
|
|
margin-bottom: 32rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-qz {
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
background: #21BBF3;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
line-height: 40rpx;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|