首次提交
This commit is contained in:
duan
498
my/wallet/index.vue
Normal file
498
my/wallet/index.vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<template>
|
||||
<view class="pages">
|
||||
<!-- 余额 -->
|
||||
<view class="wallet">
|
||||
<view class="wallet_header">
|
||||
<view class="wallet_header_text">当前余额</view>
|
||||
<view class="wallet_header_xin">
|
||||
<view class="wallet_header_le">{{myMoney}} <text> 元</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 充值 -->
|
||||
<view class="wallet_topup">
|
||||
<view class="wallet_header_text">充值金额</view>
|
||||
<view class="wallet_header_xin2">
|
||||
<view class="wallet_header_xin2_sty" v-for="(item,index) in wallet" :key='index' :class="{topup:item.isSelect}" @tap="active(item)">
|
||||
|
||||
<view class="topup_img" v-if="item.isSelect">
|
||||
<image src="../static/wallet/face.png" mode=""></image>
|
||||
</view>
|
||||
充值<text>{{item.money}}</text>元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 消费 -->
|
||||
<view class="wallet_header_consum" @click="record()">
|
||||
<view class="wallet_header_consum_le">消费记录</view>
|
||||
<view class="wallet_header_consum_ri">
|
||||
<image src="../static/wallet/right1.png" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 立即充值 -->
|
||||
<view class="wallet_bottom" @click="showpay = true" >立即充值</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<u-popup v-model="showpay" mode="bottom" :closeable="closeable">
|
||||
<view class="popup_pay">
|
||||
<view style="background-color: #fff;">
|
||||
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
|
||||
<view
|
||||
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
|
||||
v-for="(item,index) in openLists" :key='index'>
|
||||
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
|
||||
</image>
|
||||
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
|
||||
{{item.text}}
|
||||
</view>
|
||||
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
|
||||
<label class="tui-radio">
|
||||
<radio color="#1777FF" :checked="openWay === item.id ? true : false" />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pay_btn" @click="payment()">确认支付</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showpay: false,
|
||||
closeable: true,
|
||||
openLists: [],
|
||||
openWay: 2,
|
||||
|
||||
myMoney: 0,
|
||||
wallet: [],
|
||||
thisSelect: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef APP
|
||||
this.openLists = [ {
|
||||
image: '../../static/images/my/weixin.png',
|
||||
text: '微信',
|
||||
id: 2
|
||||
}, {
|
||||
image: '../../static/images/my/zhifubao.png',
|
||||
text: '支付宝',
|
||||
id: 3
|
||||
}]
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
this.openLists = [{
|
||||
image: '../../static/images/my/weixin.png',
|
||||
text: '微信',
|
||||
id: 2
|
||||
}]
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
this.openLists = [ {
|
||||
image: '../../static/images/my/weixin.png',
|
||||
text: '微信',
|
||||
id: 2
|
||||
}, {
|
||||
image: '../../static/images/my/zhifubao.png',
|
||||
text: '支付宝',
|
||||
id: 3
|
||||
}]
|
||||
// #endif
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.deploy()
|
||||
this.getMoneyNum()
|
||||
|
||||
},
|
||||
methods: {
|
||||
selectWay: function(item) {
|
||||
this.openWay = item.id;
|
||||
},
|
||||
deploy() {
|
||||
this.$Request.get("/app/topupmoney/selectTopUpMoney").then(res => {
|
||||
if (res.code == 0) {
|
||||
res.data.forEach(res=> {
|
||||
res.isSelect = false
|
||||
})
|
||||
this.wallet = res.data
|
||||
}
|
||||
});
|
||||
},
|
||||
active(e) {
|
||||
this.wallet.forEach(res => {
|
||||
if (res.id == e.id) {
|
||||
res.isSelect = true
|
||||
this.thisSelect = e
|
||||
} else {
|
||||
res.isSelect = false
|
||||
}
|
||||
})
|
||||
console.log(this.wallet)
|
||||
},
|
||||
record() {
|
||||
uni.navigateTo({
|
||||
url: '/my/wallet/walletDet'
|
||||
})
|
||||
},
|
||||
getMoneyNum() {
|
||||
this.$Request.get("/app/userMoney/selectMyMoney").then(res => {
|
||||
if (res.code == 0) {
|
||||
this.myMoney = res.data.money
|
||||
}
|
||||
});
|
||||
},
|
||||
payment() {
|
||||
let that = this
|
||||
that.showpay = false
|
||||
if(!that.thisSelect.money) {
|
||||
uni.showToast({
|
||||
title: '请选择充值金额！',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (that.openWay == 2) { //微信支付
|
||||
// #ifdef MP-WEIXIN
|
||||
that.$Request.post('/app/wxPay/wxPayJsApiMoney', {
|
||||
money: that.thisSelect.money,
|
||||
type: 3,
|
||||
}).then(ret => {
|
||||
uni.hideLoading()
|
||||
uni.requestPayment({
|
||||
provider: 'wxpay',
|
||||
timeStamp: ret.data.timestamp,
|
||||
nonceStr: ret.data.noncestr,
|
||||
package: ret.data.package,
|
||||
signType: ret.data.signType,
|
||||
paySign: ret.data.sign,
|
||||
success: function(suc) {
|
||||
uni.showToast({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
that.getMoneyNum()
|
||||
},
|
||||
fail: function(err) {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
let data = {
|
||||
type: 1,
|
||||
money: that.thisSelect.money
|
||||
}
|
||||
that.$Request.post('/app/wxPay/wxPayJsApiMoney', data).then(res => {
|
||||
console.log(res)
|
||||
that.showpay = false
|
||||
if (res.code == 0) {
|
||||
that.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
let data = {
|
||||
money: that.thisSelect.money,
|
||||
type: 2
|
||||
}
|
||||
this.$Request.post('/app/wxPay/wxPayJsApiMoney', data).then(res => {
|
||||
this.showpay = false
|
||||
that.callPay(res.data);
|
||||
});
|
||||
// #endif
|
||||
} else if(that.openWay == 3) {
|
||||
// #ifdef APP-PLUS
|
||||
let data = {
|
||||
type: 4,
|
||||
money: that.thisSelect.money
|
||||
}
|
||||
that.$Request.post('/app/wxPay/wxPayJsApiMoney', data).then(res => {
|
||||
that.showpay = false
|
||||
that.setPayment('alipay', res.data);
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
let data = {
|
||||
type: 5,
|
||||
money: that.thisSelect.money
|
||||
}
|
||||
this.$Request.post('/app/wxPay/wxPayJsApiMoney', data).then(res => {
|
||||
this.showpay = false
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = res.data //此处form就是后台返回接收到的数据
|
||||
document.body.appendChild(div)
|
||||
document.forms[0].submit()
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
callPay: function(response) {
|
||||
|
||||
if (typeof WeixinJSBridge === "undefined") {
|
||||
console.log(document.addEventListener,'999')
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
|
||||
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
|
||||
}
|
||||
} else {
|
||||
console.log(888)
|
||||
this.onBridgeReady(response);
|
||||
}
|
||||
},
|
||||
onBridgeReady: function(response) {
|
||||
console.log(response)
|
||||
let that = this;
|
||||
if (!response.package) {
|
||||
return;
|
||||
}
|
||||
WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', {
|
||||
"appId": response.appid, //公众号名称，由商户传入
|
||||
"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
|
||||
"nonceStr": response.noncestr, //随机串
|
||||
"package": response.package,
|
||||
"signType": response.signType, //微信签名方式：
|
||||
"paySign": response.sign //微信签名
|
||||
},
|
||||
function(res) {
|
||||
if (res.err_msg === "get_brand_wcpay_request:ok") {
|
||||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||||
uni.showLoading({
|
||||
title: '支付成功'
|
||||
});
|
||||
uni.hideLoading();
|
||||
that.getMoneyNum()
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/index'
|
||||
})
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
}
|
||||
WeixinJSBridge.log(response.err_msg);
|
||||
}
|
||||
);
|
||||
},
|
||||
isCheckPay(code, name, order) {
|
||||
if (code == 0) {
|
||||
console.log('999999999999')
|
||||
this.setPayment(name, order);
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '支付信息有误'
|
||||
});
|
||||
}
|
||||
},
|
||||
setPayment(name, order) {
|
||||
console.log(777777777, name, order)
|
||||
uni.requestPayment({
|
||||
provider: name,
|
||||
orderInfo: order, //微信、支付宝订单数据
|
||||
success: function(res) {
|
||||
uni.hideLoading();
|
||||
uni.showLoading({
|
||||
title: '支付成功',
|
||||
icon: 'none'
|
||||
});
|
||||
that.getMoneyNum()
|
||||
// setTimeout(function() {
|
||||
// uni.navigateBack()
|
||||
// }, 1000)
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.hideLoading();
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 余额 */
|
||||
.wallet {
|
||||
width: 100%;
|
||||
height: 260rpx;
|
||||
background: -webkit-linear-gradient(top, #FCD202, #F5F5F5);
|
||||
}
|
||||
|
||||
.wallet_header {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
position: relative;
|
||||
top: 100rpx;
|
||||
}
|
||||
|
||||
.wallet_header_text {
|
||||
padding: 3% 3% 1%;
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.wallet_header_xin {
|
||||
padding: 2% 3% 5%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wallet_header_le {
|
||||
flex: 2;
|
||||
font-size: 68rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.wallet_header_le text {
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.wallet_header_ri {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.wallet_header_ri image {
|
||||
width: 40rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.wallet_header_ri text {
|
||||
font-size: 34rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* 充值 */
|
||||
.wallet_topup {
|
||||
width: 94%;
|
||||
margin: 13% auto 0;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
padding: 0 0 3%;
|
||||
}
|
||||
|
||||
.wallet_header_xin2 {
|
||||
/* padding: 0 3% 2%; */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 2%;
|
||||
}
|
||||
|
||||
.wallet_header_xin2_sty {
|
||||
width: 48.5%;
|
||||
/* margin: 1% 0 0 3%; */
|
||||
border: 2rpx solid #E6E6E6;
|
||||
border-radius: 18rpx;
|
||||
text-align: center;
|
||||
line-height: 3;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
.wallet_header_xin2_sty text {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.wallet_header_xin2_sty:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.topup {
|
||||
color: #FF130A;
|
||||
border: 2rpx solid #FF130A;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.topup_img {
|
||||
position: absolute;
|
||||
bottom: 61rpx;
|
||||
}
|
||||
|
||||
.topup_img image {
|
||||
width: 48rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
/* 消费 */
|
||||
.wallet_header_consum {
|
||||
width: 94%;
|
||||
margin: 3% auto;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 18rpx;
|
||||
padding: 3%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wallet_header_consum_le {
|
||||
width: 97%;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.wallet_header_consum_ri {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.wallet_header_consum_ri image {
|
||||
width: 16rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
|
||||
/* 立即充值 */
|
||||
.wallet_bottom {
|
||||
width: 94%;
|
||||
position: fixed;
|
||||
bottom: 3%;
|
||||
left: 3%;
|
||||
line-height: 2.5;
|
||||
background: #FCD202;
|
||||
text-align: center;
|
||||
border-radius: 49rpx;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.popup_pay {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
padding-bottom: 45rpx;
|
||||
}
|
||||
|
||||
.pay_btn {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: #FCD202;
|
||||
height: 80rpx;
|
||||
border-radius: 16rpx;
|
||||
color: #ffffff;
|
||||
line-height: 80rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user