|
|
@@ -1,90 +1,233 @@
|
|
|
<template>
|
|
|
<view class="recharge">
|
|
|
- <view class="title">
|
|
|
- <view class="title-t">
|
|
|
- 充币二维码
|
|
|
- </view>
|
|
|
+ <view class="header">
|
|
|
+ <text>{{ integral || '0.00' }}</text><br>
|
|
|
+ <text>我的当前积分</text>
|
|
|
</view>
|
|
|
-
|
|
|
- <view class="content">
|
|
|
- 请转入USDT<br>
|
|
|
- <image src="../../static/error/errorImage.jpg" mode=""></image>
|
|
|
- <view class="button" @click="downLoad">保存二维码</view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="item" v-for="l in list" @click="confirm(l)">
|
|
|
+ <image :src="l.img" class="border"></image>
|
|
|
+ <image :src="l.icon" class="i"></image>
|
|
|
+ <view class="rechargetext">{{l.recharge}}<text>积分</text></view>
|
|
|
+ <view class="pay">充{{l.pay}}</view>
|
|
|
+ <view class="song" :style="{color: l.color}">送</view>
|
|
|
+ <view class="button">充值{{l.pay}}元</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+// #ifdef H5
|
|
|
+import { rechargeWechat } from '@/api/wallet.js';
|
|
|
+// #endif
|
|
|
+// #ifdef MP
|
|
|
+import { rechargeRoutine } from '@/api/wallet.js';
|
|
|
+// #endif
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- url: ''
|
|
|
+ type: 'weixin',
|
|
|
+ list:
|
|
|
+ [{
|
|
|
+ pay: 1000,
|
|
|
+ recharge: 100,
|
|
|
+ img: require('@/static/img/i1.png'),
|
|
|
+ icon: require('@/static/img/ic1.png'),
|
|
|
+ color: "#FF6000",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pay: 500,
|
|
|
+ recharge: 50,
|
|
|
+ img: require('@/static/img/i2.png'),
|
|
|
+ icon: require('@/static/img/ic2.png'),
|
|
|
+ color: "#FF3115",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pay: 200,
|
|
|
+ recharge: 20,
|
|
|
+ img: require('@/static/img/i3.png'),
|
|
|
+ icon: require('@/static/img/ic3.png'),
|
|
|
+ color: "#FF2C4F",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ pay: 100,
|
|
|
+ recharge: 10,
|
|
|
+ img: require('@/static/img/i4.png'),
|
|
|
+ icon: require('@/static/img/ic3.png'),
|
|
|
+ color: "#9525FE ",
|
|
|
+ }]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- //下载
|
|
|
- downLoad() {
|
|
|
- // const obj = this
|
|
|
- // uni.downloadFile({
|
|
|
- // url: url,
|
|
|
- // success(res) {
|
|
|
- // if (res.errMsg == 'downloadFile:ok') {
|
|
|
- // obj.src = res.tempFilePath;
|
|
|
- // // 生成画布
|
|
|
- // obj.loadImg(obj.src);
|
|
|
- // uni.hideLoading();
|
|
|
- // }
|
|
|
- // console.log(res);
|
|
|
- // },
|
|
|
- // fail(e) {
|
|
|
- // console.log(e);
|
|
|
- // }
|
|
|
- // })
|
|
|
+ //充值
|
|
|
+ confirm(item) {
|
|
|
+ let obj = this
|
|
|
+ uni.showModal({
|
|
|
+ // title: "是否确认充值",
|
|
|
+ content: "确认充值?",
|
|
|
+ success:function(res){
|
|
|
+ if(res.confirm) {
|
|
|
+ obj.submit(item.pay)
|
|
|
+ }else {
|
|
|
+ console.log("xu")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ submit(money) {
|
|
|
+ let obj = this;
|
|
|
+ // obj.payLoding = true;
|
|
|
+ // #ifdef H5
|
|
|
+ rechargeWechat({ price: money, from: this.type })
|
|
|
+ .then(e => {
|
|
|
+ let da = e.data.data;
|
|
|
+ obj.weichatObj.chooseWXPay({
|
|
|
+ timestamp: da.timestamp,
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '充值成功',
|
|
|
+ duration: 2000,
|
|
|
+ position: 'top'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ obj.payLoding = false;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ obj.payLoding = false;
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef MP
|
|
|
+ rechargeRoutine({ price: money})
|
|
|
+ .then(e => {
|
|
|
+ let da = e.data;
|
|
|
+ wx.requestPayment({
|
|
|
+ timeStamp: da.timestamp,
|
|
|
+ nonceStr: da.nonceStr,
|
|
|
+ package: da.package,
|
|
|
+ signType: da.signType,
|
|
|
+ paySign: da.paySign,
|
|
|
+ success: function(res) {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: '/pages/money/paySuccess'
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ obj.payLoding = false;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ obj.payLoding = false;
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //积分
|
|
|
+ integral() {
|
|
|
+ return this.$store.state.user.userInfo.integral
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
.recharge {
|
|
|
- font-family: PingFang-SC-Bold;
|
|
|
- .title {
|
|
|
- background-color: #fff;
|
|
|
- padding: 30rpx;
|
|
|
- margin-bottom: 1rpx;
|
|
|
- .title-t {
|
|
|
- // margin: 30rpx;
|
|
|
- padding: 0 15rpx;
|
|
|
- color: #333333;
|
|
|
+ background-color: #EBF3FF;
|
|
|
+ }
|
|
|
+ .header {
|
|
|
+ padding: 80rpx;
|
|
|
+ padding-top: 100rpx;
|
|
|
+ color: #438BED;
|
|
|
+ text-align: center;
|
|
|
+ text:nth-child(1) {
|
|
|
+ font-size: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ border-radius: 50rpx 50rpx 0 0;
|
|
|
+ height: 70%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ padding: 30rpx;
|
|
|
+ .item {
|
|
|
+ margin: 10rpx;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ .border {
|
|
|
+ position: absolute;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ }
|
|
|
+ .i {
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ position: relative;
|
|
|
+ left: 30rpx;
|
|
|
+ top: 20rpx;
|
|
|
+ }
|
|
|
+ view {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .rechargetext {
|
|
|
font-weight: bold;
|
|
|
- border-left: solid 2rpx #75EFFA;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ left: calc(10% + 120rpx);
|
|
|
+ font-size: 50rpx;
|
|
|
+ bottom: 55rpx;
|
|
|
+ text {
|
|
|
+ font-weight: 500;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .content {
|
|
|
- padding: 50rpx;
|
|
|
- background-color: #fff;
|
|
|
- text-align: center;
|
|
|
- color: #333333;
|
|
|
- font-weight: bold;
|
|
|
- image {
|
|
|
- margin-top: 20rpx;
|
|
|
- width: 200rpx;
|
|
|
- height: 200rpx;
|
|
|
+ .pay {
|
|
|
+ text-align: center;
|
|
|
+ width: 150rpx;
|
|
|
+ bottom: 162rpx;
|
|
|
+ left: calc(50% - 75rpx);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .song {
|
|
|
+ height: 20rpx;
|
|
|
+ bottom: 156.8rpx;
|
|
|
+ left: 64rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6000;
|
|
|
+ font-size: 36rpx;
|
|
|
}
|
|
|
.button {
|
|
|
- margin: 0 auto;
|
|
|
- width: 450rpx;
|
|
|
- background: linear-gradient(90deg, #438BED 0%, #44BFEC 100%);
|
|
|
- background-color: #438BED;
|
|
|
- height: 60rpx;
|
|
|
- line-height: 60rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- color: #fff;
|
|
|
- font-size: 30rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
- font-weight: 500;
|
|
|
+ background-color: #FFF583;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ bottom: 95rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ color: #722E18;
|
|
|
+ left: calc(50% - 100rpx);
|
|
|
+ font-size: 26rpx;
|
|
|
+ box-shadow: 0px 3px 8px #aaa,
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
</style>
|