|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <ujp-navbar title="帮人充值" :isBack="isBack">
|
|
|
+ <ujp-navbar title="帮人充值" :isBack="isBack" :customBack="customBack">
|
|
|
<view class="slot-wrap">
|
|
|
|
|
|
<span class="navBtn " @click="toRefundList"> <u-icon name="clock"></u-icon>充值记录</span>
|
|
|
@@ -8,8 +8,13 @@
|
|
|
</ujp-navbar>
|
|
|
<view class="recharge">
|
|
|
<view class="recharge-text">
|
|
|
- <p>充值账户</p>
|
|
|
- <u-input v-model="phone"
|
|
|
+ <p v-show="!queryCard.query">充值手机号
|
|
|
+
|
|
|
+ </p >
|
|
|
+ <p v-show="queryCard.query">
|
|
|
+ 用户姓名：{{queryCard.name}}
|
|
|
+ </p>
|
|
|
+ <u-input v-model="phone" v-show="!queryCard.query"
|
|
|
:custom-style="{
|
|
|
'font-size': '48rpx',
|
|
|
'line-height': '48rpx',
|
|
|
@@ -21,49 +26,87 @@
|
|
|
}"
|
|
|
height="82" placeholder="请输入充值手机号" ></u-input>
|
|
|
</view>
|
|
|
+ <view class="rechargePhone" v-show="queryCard.query">
|
|
|
+ <view>
|
|
|
+ <h1 style="font-size: 48rpx;line-height: 48rpx;height:82rpx; display: flex;align-items: center;" >{{phone}}</h1>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ @click="queryCard.query=false,phone=''"
|
|
|
+ class="recharge-btn">
|
|
|
+ 更换
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="padding: 30rpx;" v-show="!queryCard.query" >
|
|
|
|
|
|
+ <u-button type="primary" @click="findByPhone" :custom-style="customStyle" shape="square">查询用户</u-button>
|
|
|
</view>
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeTit">
|
|
|
- 选择充值金额
|
|
|
- </view>
|
|
|
- <view class="chargeMain">
|
|
|
- <template v-for="(item,i) in list">
|
|
|
-
|
|
|
- <view :key="i" :class="{
|
|
|
- 'active':amount==item
|
|
|
- }" @click="amount=item"
|
|
|
- class="chargeMain-item "><p>{{item}}元</p></view>
|
|
|
+ <view class="rechargeBk" v-show="queryCard.query">
|
|
|
+ <view class="rechargeBkInfo" >
|
|
|
|
|
|
|
|
|
- </template>
|
|
|
+ <view class="recharge-text">
|
|
|
+ <p>账户余额（元）</p>
|
|
|
+ <h1>{{queryCard.amount}}</h1>
|
|
|
+ </view>
|
|
|
+ <view class="recharge-text">
|
|
|
+ <p>充电卡号</p>
|
|
|
+ <h1>{{queryCard.cardNo}}</h1>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</view>
|
|
|
- <view style=" padding-bottom: 120px; ">
|
|
|
- <view class="charge">
|
|
|
- <view class="chargeRadio">
|
|
|
- <view class="u-flex">
|
|
|
- <u-icon name="weixinzhifu" custom-prefix="custom-icon" color="#22ac38" size="80"></u-icon>
|
|
|
- <view class="chargeRadio-text">
|
|
|
- <h4>微信支付</h4>
|
|
|
- <p>推荐微信支付</p>
|
|
|
+
|
|
|
+
|
|
|
+ <view v-show="queryCard.query">
|
|
|
+ <view class="charge" >
|
|
|
+ <view class="chargeTit">
|
|
|
+ 选择充值金额
|
|
|
+ </view>
|
|
|
+ <view class="chargeMain">
|
|
|
+ <template v-for="(item,i) in list">
|
|
|
+
|
|
|
+ <view :key="i" :class="{
|
|
|
+ 'active':amount==item
|
|
|
+ }" @click="amount=item"
|
|
|
+ class="chargeMain-item "><p>{{item}}元</p></view>
|
|
|
+
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style=" padding-bottom: 240rpx; " >
|
|
|
+ <view class="charge">
|
|
|
+ <view class="chargeRadio">
|
|
|
+ <view class="u-flex">
|
|
|
+ <u-icon name="weixinzhifu" custom-prefix="custom-icon" color="#22ac38" size="80"></u-icon>
|
|
|
+ <view class="chargeRadio-text">
|
|
|
+ <h4>微信支付</h4>
|
|
|
+ <p>推荐微信支付</p>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <u-radio-group>
|
|
|
+ <u-radio></u-radio>
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
|
- <u-radio-group>
|
|
|
- <u-radio></u-radio>
|
|
|
- </u-radio-group>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="foot-btn">
|
|
|
- <view class="foot-pirce">
|
|
|
- <u-icon name="tikuan" custom-prefix="custom-icon" color="#FF9502" size="48"></u-icon>
|
|
|
- <span>支付 {{amount}} 元</span>
|
|
|
+ <view class="foot-btn" >
|
|
|
+ <view class="foot-pirce">
|
|
|
+ <u-icon name="tikuan" custom-prefix="custom-icon" color="#FF9502" size="48"></u-icon>
|
|
|
+ <span>支付 {{amount}} 元</span>
|
|
|
+ </view>
|
|
|
+ <u-button type="primary" @click="submit" :custom-style="customStyle" shape="square">确定充值</u-button>
|
|
|
</view>
|
|
|
- <u-button type="primary" @click="submit" :custom-style="customStyle" shape="square">确定充值</u-button>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -75,18 +118,20 @@
|
|
|
import {
|
|
|
wxPayJs
|
|
|
} from '@/utils/wxpay'
|
|
|
- import * as API from '@/apis/index.js'
|
|
|
+ import * as API from '@/apis/otherRecharge.js'
|
|
|
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ queryCard:{},
|
|
|
+
|
|
|
isReady:false,
|
|
|
customStyle: {
|
|
|
background: '#1677ff'
|
|
|
},
|
|
|
detail:{},
|
|
|
- isBack:false,
|
|
|
+ isBack:true,
|
|
|
chargingMarketingId:'',
|
|
|
selectItem:{},
|
|
|
list:[5,10,20,50,100,200],
|
|
|
@@ -95,15 +140,57 @@
|
|
|
}
|
|
|
},
|
|
|
onLoad(op){
|
|
|
- if(op.site){
|
|
|
- this.isBack=true;
|
|
|
- }
|
|
|
-
|
|
|
+ if(op.phone){
|
|
|
+ this.phone=op.phone
|
|
|
+ this.findByPhone()
|
|
|
+ }
|
|
|
},
|
|
|
onReady() {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ findByPhone(){
|
|
|
+ var checkPhoneResult = checkPhone(this.phone);
|
|
|
+
|
|
|
+ if ( checkPhoneResult !== true) {
|
|
|
+ uni.showToast({
|
|
|
+ title: checkPhoneResult,
|
|
|
+
|
|
|
+ })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ API.findByPhone({
|
|
|
+ phone: this.phone,
|
|
|
+
|
|
|
+ }).then((response) => {
|
|
|
+
|
|
|
+ var data = response.data
|
|
|
+ uni.hideLoading()
|
|
|
+ this.queryCard={
|
|
|
+ query:true,
|
|
|
+ amount:data.userAccount.availableBalance,
|
|
|
+ name:data.chargingCard.realName,
|
|
|
+ cardNo:data.chargingCard.cardNo
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showModal({
|
|
|
+ title:"提示",
|
|
|
+ content:error,
|
|
|
+ showCancel:false,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ customBack(){
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/user/rechargeIndex'
|
|
|
+ })
|
|
|
+ },
|
|
|
toRefundList() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/user/rechargeListByPhone'
|
|
|
@@ -141,8 +228,11 @@
|
|
|
wxPayJs(data);
|
|
|
|
|
|
}).catch(error => {
|
|
|
- uni.showToast({
|
|
|
- title: error
|
|
|
+ uni.hideLoading()
|
|
|
+ uni.showModal({
|
|
|
+ title:"提示",
|
|
|
+ content:error,
|
|
|
+ showCancel:false,
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
@@ -166,35 +256,77 @@
|
|
|
}
|
|
|
.navBtn{
|
|
|
float: right;
|
|
|
- margin-right: 15px;
|
|
|
+ margin-right: 30rpx;
|
|
|
color:#1677FF ;
|
|
|
}
|
|
|
- .recharge{
|
|
|
- padding: 15px;
|
|
|
- //background-color: #1677FF;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
+
|
|
|
+ .rechargePhone{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+ //padding: 15px;
|
|
|
+ //background-color: #1677FF;
|
|
|
+ background-color: #fff;
|
|
|
+ .recharge-btn{
|
|
|
+ width: 120rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ background-color: #589EFF;
|
|
|
+ color:#fff;
|
|
|
+ border-radius: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rechargeBk{
|
|
|
+ .rechargeBkInfo{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+ .recharge-text-name{
|
|
|
+ width: 200rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ padding: 30rpx;
|
|
|
+ background-color: #1677FF;
|
|
|
+
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ .recharge-text{
|
|
|
+ color:#fff;
|
|
|
+ // width: 100%;
|
|
|
+ white-space: pre;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .recharge{
|
|
|
+ padding: 30rpx;
|
|
|
+ //background-color: #1677FF;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+
|
|
|
.recharge-text{
|
|
|
//color:#fff;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.recharge-btn{
|
|
|
- width: 60px;
|
|
|
- height: 30px;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 60rpx;
|
|
|
text-align: center;
|
|
|
- line-height: 30px;
|
|
|
+ line-height: 60rpx;
|
|
|
background-color: #589EFF;
|
|
|
color:#fff;
|
|
|
border-radius: 15px;
|
|
|
}
|
|
|
}
|
|
|
.charge{
|
|
|
- padding: 15px;
|
|
|
+ padding: 30rpx;
|
|
|
background-color: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
}
|
|
|
.chargeRadio{
|
|
|
display: flex;
|
|
|
@@ -202,50 +334,50 @@
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
.chargeRadio-text{
|
|
|
- margin-left: 5px;
|
|
|
+ margin-left: 10rpx;
|
|
|
h4{
|
|
|
font-weight: normal;
|
|
|
- font-size: 15px;
|
|
|
+ font-size: 30rpx;
|
|
|
}
|
|
|
p{
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 24rpx;
|
|
|
color:#999;
|
|
|
- margin-top: 5px;
|
|
|
+ margin-top: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.chargeTit{
|
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
- padding-bottom: 10px;
|
|
|
- font-size: 15px;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
}
|
|
|
.chargeMain{
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
- margin-top: 20px;
|
|
|
+ margin-top: 40rpx;
|
|
|
.chargeMain-item{
|
|
|
width: 32%;
|
|
|
text-align: center;
|
|
|
- padding: 10px 10px;
|
|
|
+ padding: 20rpx;
|
|
|
border: 1px solid rgba(22, 119, 255, 1);
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
border-radius: 5px;
|
|
|
color:#333;
|
|
|
color: rgba(22, 119, 255, 1);
|
|
|
position: relative;
|
|
|
p{
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 40rpx;
|
|
|
}
|
|
|
span{
|
|
|
background-color: #ff8d00;
|
|
|
color:#fff;
|
|
|
- padding: 2px 10px;
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
border-radius:0 10px 0 10px;
|
|
|
position: absolute;
|
|
|
- font-size: 12px;
|
|
|
- right: -2px;
|
|
|
- top: -2px;
|
|
|
+ font-size: 24rpx;
|
|
|
+ right: -4rpx;
|
|
|
+ top: -4rpx;
|
|
|
}
|
|
|
}
|
|
|
.active{
|
|
|
@@ -265,7 +397,7 @@
|
|
|
}
|
|
|
}
|
|
|
.foot-btn{
|
|
|
- padding: 10px;
|
|
|
+ padding: 20rpx;
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
@@ -275,12 +407,12 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
span{
|
|
|
- margin-left: 5px;
|
|
|
- font-size: 16px;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
- padding-bottom: 10px;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
border-bottom: 1px solid #f7f7f7;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
zhengkaixin
