|
@@ -0,0 +1,286 @@
|
|
|
|
+<template>
|
|
|
|
+ <view>
|
|
|
|
+ <ujp-navbar title="帮人充值" :isBack="isBack">
|
|
|
|
+ <view class="slot-wrap">
|
|
|
|
+
|
|
|
|
+ <span class="navBtn " @click="toRefundList"> <u-icon name="clock"></u-icon>充值记录</span>
|
|
|
|
+ </view>
|
|
|
|
+ </ujp-navbar>
|
|
|
|
+ <view class="recharge">
|
|
|
|
+ <view class="recharge-text">
|
|
|
|
+ <p>充值账户</p>
|
|
|
|
+ <u-input v-model="phone"
|
|
|
|
+ :custom-style="{
|
|
|
|
+ 'font-size': '48rpx',
|
|
|
|
+ 'line-height': '48rpx',
|
|
|
|
+ }"
|
|
|
|
+ :placeholder-style="{
|
|
|
|
+ 'font-size': '48rpx',
|
|
|
|
+ 'line-height': '48rpx',
|
|
|
|
+ 'color':' rgba(204, 204, 204, 1)',
|
|
|
|
+ }"
|
|
|
|
+ height="82" placeholder="请输入充值手机号" ></u-input>
|
|
|
|
+ </view>
|
|
|
|
+
|
|
|
|
+ </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>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </template>
|
|
|
|
+ </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>
|
|
|
|
+ </view>
|
|
|
|
+ <u-radio-group>
|
|
|
|
+ <u-radio></u-radio>
|
|
|
|
+ </u-radio-group>
|
|
|
|
+ </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>
|
|
|
|
+ <u-button type="primary" @click="submit" :custom-style="customStyle" shape="square">确定充值</u-button>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import * as Pay from '@/apis/weixin.js'
|
|
|
|
+ import {
|
|
|
|
+ checkPhone
|
|
|
|
+ } from '@/utils'
|
|
|
|
+ import {
|
|
|
|
+ wxPayJs
|
|
|
|
+ } from '@/utils/wxpay'
|
|
|
|
+ import * as API from '@/apis/index.js'
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ isReady:false,
|
|
|
|
+ customStyle: {
|
|
|
|
+ background: '#1677ff'
|
|
|
|
+ },
|
|
|
|
+ detail:{},
|
|
|
|
+ isBack:false,
|
|
|
|
+ chargingMarketingId:'',
|
|
|
|
+ selectItem:{},
|
|
|
|
+ list:[0.05,5,10,20,50,100,200],
|
|
|
|
+ amount:5,
|
|
|
|
+ phone:"",
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onLoad(op){
|
|
|
|
+ if(op.site){
|
|
|
|
+ this.isBack=true;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ onReady() {
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ toRefundList() {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/pages/user/rechargeListByPhone'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ submit(){
|
|
|
|
+ var checkPhoneResult = checkPhone(this.phone);
|
|
|
|
+
|
|
|
|
+ if ( checkPhoneResult !== true) {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: checkPhoneResult,
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ uni.showLoading({
|
|
|
|
+ title: "加载中",
|
|
|
|
+ mask: true,
|
|
|
|
+ })
|
|
|
|
+ Pay.wxJsapiPayByPhone({
|
|
|
|
+ openId:this.carhelp.getOpenId(),
|
|
|
|
+ phone:this.phone,
|
|
|
|
+ amount:this.amount
|
|
|
|
+ }).then((response) => {
|
|
|
|
+ if(!response.result){
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: response.message
|
|
|
|
+ })
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ var data = response.data
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ console.log("Pay+"+new Date().getTime())
|
|
|
|
+ wxPayJs(data);
|
|
|
|
+
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ uni.showToast({
|
|
|
|
+ title: error
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ },onShow(){
|
|
|
|
+ if(this.isReady){
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
|
|
+ page{
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .slot-wrap{
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ .navBtn{
|
|
|
|
+ float: right;
|
|
|
|
+ margin-right: 15px;
|
|
|
|
+ color:#1677FF ;
|
|
|
|
+ }
|
|
|
|
+ .recharge{
|
|
|
|
+ padding: 15px;
|
|
|
|
+ //background-color: #1677FF;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .recharge-text{
|
|
|
|
+ //color:#fff;
|
|
|
|
+ width: 100%;
|
|
|
|
+ }
|
|
|
|
+ .recharge-btn{
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ line-height: 30px;
|
|
|
|
+ background-color: #589EFF;
|
|
|
|
+ color:#fff;
|
|
|
|
+ border-radius: 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .charge{
|
|
|
|
+ padding: 15px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ .chargeRadio{
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ .chargeRadio-text{
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ h4{
|
|
|
|
+ font-weight: normal;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
|
|
+ p{
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color:#999;
|
|
|
|
+ margin-top: 5px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .chargeTit{
|
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ }
|
|
|
|
+ .chargeMain{
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ .chargeMain-item{
|
|
|
|
+ width: 32%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
+ border: 1px solid rgba(22, 119, 255, 1);
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ border-radius: 5px;
|
|
|
|
+ color:#333;
|
|
|
|
+ color: rgba(22, 119, 255, 1);
|
|
|
|
+ position: relative;
|
|
|
|
+ p{
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ }
|
|
|
|
+ span{
|
|
|
|
+ background-color: #ff8d00;
|
|
|
|
+ color:#fff;
|
|
|
|
+ padding: 2px 10px;
|
|
|
|
+ border-radius:0 10px 0 10px;
|
|
|
|
+ position: absolute;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ right: -2px;
|
|
|
|
+ top: -2px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .active{
|
|
|
|
+ border-color:rgba(22, 119, 255, 1);
|
|
|
|
+
|
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
|
+ }
|
|
|
|
+ .fault{
|
|
|
|
+ background-color:#e1e1e1;
|
|
|
|
+ color:#666;
|
|
|
|
+ border: 1px solid #ccc;
|
|
|
|
+ }
|
|
|
|
+ .occupy{
|
|
|
|
+ color:#FF4F3F;
|
|
|
|
+ border: 1px solid #FF4F3F;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .foot-btn{
|
|
|
|
+ padding: 10px;
|
|
|
|
+ position: fixed;
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 0;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .foot-pirce{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ span{
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ }
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|