|
|
@@ -1,482 +1,715 @@
|
|
|
-<template>
|
|
|
- <view>
|
|
|
- <u-navbar title="账户充值" title-color="#101010" >
|
|
|
- <view slot="right" class="slot">
|
|
|
- 退余额
|
|
|
- </view>
|
|
|
- </u-navbar>
|
|
|
- <view class="main">
|
|
|
- <view class="headline">
|
|
|
- <view class="title-left">
|
|
|
- <view class="icon">
|
|
|
- <image class="icon1" src="@/assets/img/PEokWS2@1x.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 账户充值
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="title-right">
|
|
|
- <view class="icon">
|
|
|
- <image class="icon2" src="@/assets/img/riLine-time-line.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 充值记录
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="content">
|
|
|
- <!-- 可用余额 -->
|
|
|
- <view class="balance">
|
|
|
- <view class="balance-left">
|
|
|
- 可用余额(元)
|
|
|
- </view>
|
|
|
- <view class="balance-right">
|
|
|
- 88.88
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 提示 有余额-->
|
|
|
-
|
|
|
- <view class="hint">
|
|
|
- 有余额，可提前充值
|
|
|
- </view>
|
|
|
- <!-- 提示 无余额 已欠费 -->
|
|
|
- <view class="hint hint2">
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="账户充值" title-color="#101010">
|
|
|
+ <view slot="right" class="slot">
|
|
|
+ 退余额
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="headline">
|
|
|
+ <view class="title-left">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="icon1" src="@/assets/img/PEokWS2@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 账户充值
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="title-right">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="icon2" src="@/assets/img/riLine-time-line.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 充值记录
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 可用余额 -->
|
|
|
+ <view class="balance">
|
|
|
+ <view class="balance-left">
|
|
|
+ 可用余额(元)
|
|
|
+ </view>
|
|
|
+ <view class="balance-right">
|
|
|
+ {{personInfo.balance}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 提示 有余额-->
|
|
|
+
|
|
|
+ <view class="hint" v-if="personInfo.balance>0">
|
|
|
+ 有余额，可提前充值
|
|
|
+ </view>
|
|
|
+ <!-- 提示 无余额 已欠费 -->
|
|
|
+ <view class="hint hint2" v-if="personInfo.balance==0" >
|
|
|
已扣完，请尽快缴费
|
|
|
+
|
|
|
</view>
|
|
|
- <!-- 租户信息 -->
|
|
|
- <view class="infos">
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 租户信息
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-value">
|
|
|
- 3~6楼联通公司
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 户号
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-value">
|
|
|
- 00880088
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 联系人
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-value">
|
|
|
- 周琼
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 缴费单位
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="item-value">
|
|
|
- 湖北荆鹏集团有限公司
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 缴费金额 -->
|
|
|
- <view class="payment-amount">
|
|
|
- <view class="title">
|
|
|
- 缴费金额
|
|
|
- </view>
|
|
|
- <view class="amount-options">
|
|
|
- <view class="options-item chosen">
|
|
|
- 100元
|
|
|
- </view>
|
|
|
- <view class="options-item">
|
|
|
- 200元
|
|
|
- </view>
|
|
|
- <view class="options-item">
|
|
|
- 500元
|
|
|
- </view>
|
|
|
- <view class="options-item">
|
|
|
- 1000元
|
|
|
- </view>
|
|
|
- <view class="options-item">
|
|
|
- 2000元
|
|
|
- </view>
|
|
|
- <view class="options-item">
|
|
|
- 5000元
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 输入金额 -->
|
|
|
- <view class="input-amount">
|
|
|
- <view class="symbol">
|
|
|
- ￥
|
|
|
- </view>
|
|
|
- <input class="input" type="text" placeholder="点击输入缴费金额">
|
|
|
- </view>
|
|
|
- <!-- 支付方式 -->
|
|
|
- <view class="payment-way">
|
|
|
- <view class="title">
|
|
|
- 支付方式
|
|
|
- </view>
|
|
|
+ <view class="hint hint2" v-if="personInfo.balance<0" >
|
|
|
+ 有欠费，请尽快充值
|
|
|
+ </view>
|
|
|
+ <!-- 租户信息 -->
|
|
|
+ <view class="infos" v-if="false">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 租户信息
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-value">
|
|
|
+ 3~6楼联通公司
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 户号
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-value">
|
|
|
+ 00880088
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 联系人
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-value">
|
|
|
+ 周琼
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 缴费单位
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item-value">
|
|
|
+ 湖北荆鹏集团有限公司
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 缴费金额 -->
|
|
|
+ <view class="payment-amount">
|
|
|
+ <view class="title">
|
|
|
+ 缴费金额
|
|
|
+ </view>
|
|
|
+ <view class="amount-options">
|
|
|
+ <view v-for="(item,i) in amountList"
|
|
|
+ class="options-item " :class="{
|
|
|
+ chosen:selectNum==item
|
|
|
+ }" @click="otherNum=item,selectNum=item" >
|
|
|
+ {{item}}元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 输入金额 -->
|
|
|
+ <view class="input-amount">
|
|
|
+ <view class="symbol">
|
|
|
+ ￥
|
|
|
+ </view>
|
|
|
+ <input class="input" @input="ckInput" @focus="focus" type="text" v-model="otherNum" placeholder="点击输入缴费金额">
|
|
|
+ </view>
|
|
|
+ <!-- 支付方式 -->
|
|
|
+ <view class="payment-way">
|
|
|
+ <view class="title">
|
|
|
+ 支付方式
|
|
|
+ </view>
|
|
|
<view class="way">
|
|
|
- <view class="way-item">
|
|
|
- <view class="way-name">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 微信支付
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="way-radio">
|
|
|
- <label class="radio">
|
|
|
- <radio value="" /><text></text>
|
|
|
- </label>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="way-item">
|
|
|
- <view class="way-name">
|
|
|
- <view class="icon">
|
|
|
- <image class="img" src="@/assets/img/antOutline-alipay-circle bQiHn7m.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 支付宝
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="way-radio">
|
|
|
- <label class="radio">
|
|
|
- <radio value="" /><text></text>
|
|
|
- </label>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="way-item">
|
|
|
- <view class="way-name">
|
|
|
- <view class="icon">
|
|
|
- <image style="width: 40rpx;height: 40rpx; border-radius: 999px;" class="img" src="@/assets/img/modalIcon.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="text">
|
|
|
- 对公转账
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="way-radio" @click="open">
|
|
|
- <label class="radio">
|
|
|
- <radio value="" /><text></text>
|
|
|
- </label>
|
|
|
- </view>
|
|
|
+ <radio-group @change="radioChange">
|
|
|
+ <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('1')>-1" >
|
|
|
+ <view class="way-name">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-wechat-pay-fill fTAsMwS.svg" mode="">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 微信支付
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="way-radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="0" name="selectType" :checked="submitType === '0'" /><text></text>
|
|
|
+
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('2')>-1" >
|
|
|
+ <view class="way-name">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/antOutline-alipay-circle bQiHn7m.svg" mode="">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 支付宝
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="way-radio">
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="1" name="selectType" :checked="submitType === '1'" /><text></text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="way-item" v-if="companyInfo.paymentMethod.indexOf('3')>-1" >
|
|
|
+ <view class="way-name">
|
|
|
+ <view class="icon">
|
|
|
+ <image style="width: 40rpx;height: 40rpx; border-radius: 999px;" class="img"
|
|
|
+ src="@/assets/img/modalIcon.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 对公转账
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="way-radio" >
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="2" name="selectType" /><text></text>
|
|
|
+ </label>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <!-- 对公转账弹窗 -->
|
|
|
- <u-modal v-model="show" :show-cancel-button="true":content="content" :show-title="false" confirm-text="复制" cancel-text="关闭">
|
|
|
- <view class="modal-content">
|
|
|
- <view class="title-icon">
|
|
|
- <image class="img" src="@/assets/img/modalIcon.svg" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="title">
|
|
|
- 对公转账信息
|
|
|
- </view>
|
|
|
- <view class="infos-group">
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
- 收款户名
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="item-value">
|
|
|
- 湖北荆鹏软件集团有限公司
|
|
|
-
|
|
|
-
|
|
|
- </view>
|
|
|
+ </radio-group>
|
|
|
+ <!-- 对公转账弹窗 -->
|
|
|
+ <u-modal v-model="show" :show-cancel-button="true"
|
|
|
+ @confirm="copyUrl()"
|
|
|
+ :show-title="false" confirm-text="复制"
|
|
|
+ cancel-text="关闭">
|
|
|
+ <view class="modal-content">
|
|
|
+ <view class="title-icon">
|
|
|
+ <image class="img" src="@/assets/img/modalIcon.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ 对公转账信息
|
|
|
+ </view>
|
|
|
+ <view class="infos-group">
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 收款户名
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ {{transferAccountsInfo.accountName}}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
+ <view class="item" >
|
|
|
<view class="item-title">
|
|
|
开户银行
|
|
|
</view>
|
|
|
<view class="item-value">
|
|
|
-
|
|
|
- 中国工商银行玉桥支行
|
|
|
-
|
|
|
+ {{transferAccountsInfo.bankName}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
+ <view class="item" >
|
|
|
<view class="item-title">
|
|
|
- 收款账号
|
|
|
+ 收款账户
|
|
|
</view>
|
|
|
<view class="item-value">
|
|
|
-
|
|
|
- 25681354894163
|
|
|
-
|
|
|
-
|
|
|
+ {{transferAccountsInfo.accountNo}}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="item">
|
|
|
- <view class="item-title">
|
|
|
-
|
|
|
-
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
联系电话
|
|
|
-
|
|
|
</view>
|
|
|
<view class="item-value">
|
|
|
- 15500001111
|
|
|
+ {{transferAccountsInfo.telephone}}
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </u-modal>
|
|
|
-
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 按钮 -->
|
|
|
- <button class="btn" >立即支付</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- show: false,
|
|
|
- }
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <button class="btn" @click="submit">立即支付</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <u-modal v-model="showModel" :show-cancel-button="true" @cancel="getUserInfo()" @confirm="confirm"
|
|
|
+ confirm-text="支付成功？" title="扫码支付">
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">
|
|
|
+ <img id="qrcode2" :src="qrCodeImg">
|
|
|
+ </view>
|
|
|
+ <view style="
|
|
|
+ text-align: center;
|
|
|
+ ">请使用支付宝扫码</view>
|
|
|
+
|
|
|
+ </u-modal>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis/pagejs/wxPay.js'
|
|
|
+ import * as API_index from '@/apis/pagejs/index.js'
|
|
|
+
|
|
|
+ import * as API_weixin from '@/apis/weixin.js'
|
|
|
+ import * as Pay from '@/apis/weixin.js'
|
|
|
+ import QRCode from 'qrcodejs2'
|
|
|
+ import {
|
|
|
+ newDate,
|
|
|
+ convertCanvasToImage,
|
|
|
+ } from '@/apis/utils'
|
|
|
+ import {
|
|
|
+ wxPayJs
|
|
|
+ } from '@/apis/utils/wxpay'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ amountList:[
|
|
|
+ 100,200,500,1000,2000,5000
|
|
|
+ ],
|
|
|
+ show: false,
|
|
|
+ showModel: false,
|
|
|
+ qrCodeImg: "",
|
|
|
+ submitType:"0",
|
|
|
+ submitForm:{
|
|
|
+ companyId: '',
|
|
|
+ amount: '',
|
|
|
+ },
|
|
|
+ personInfo:{},
|
|
|
+ companyInfo:{
|
|
|
+ paymentMethod:''
|
|
|
+ },
|
|
|
+ selectNum:'',
|
|
|
+ otherNum:'',
|
|
|
+ transferAccountsInfo:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ //this.submitForm.companyId=this.carhelp.getPersonInfoPlus().companyInfo.id
|
|
|
},
|
|
|
+ onShow(){
|
|
|
+ this.homePage()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- open() {
|
|
|
- this.show = true;
|
|
|
+ copyUrl(){
|
|
|
+ var transferAccountsInfo=this.transferAccountsInfo
|
|
|
+ var textToCopy = `收款户名${transferAccountsInfo.accountName}\n开户银行${transferAccountsInfo.bankName}\n收款账户${transferAccountsInfo.accountNo}\n联系电话${transferAccountsInfo.telephone}`;
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: textToCopy,
|
|
|
+ success: function () {
|
|
|
+ uni.showToast({
|
|
|
+ title: "复制成功！",
|
|
|
+ icon: "none"
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- page{
|
|
|
- padding-bottom: 50px;
|
|
|
- }
|
|
|
- .slot{
|
|
|
- margin-right: 24rpx;
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- }
|
|
|
- .main{
|
|
|
- margin: 24rpx;
|
|
|
- overflow: hidden;
|
|
|
- .headline{
|
|
|
- background: linear-gradient(90deg, rgba(120,175,247,1) 0%,rgba(39,116,226,1) 100%);
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding:24rpx;
|
|
|
- .title-left{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 36rpx;
|
|
|
- .icon1{
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- .title-right{
|
|
|
- display: flex;
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
- .icon2{
|
|
|
- width: 32rpx;
|
|
|
- height: 32rpx;
|
|
|
- margin-right: 8rpx;
|
|
|
+ });
|
|
|
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .content{
|
|
|
- border-radius: 8px 8px 0 0 ;
|
|
|
- margin-top: -8rpx;
|
|
|
- z-index: 999;
|
|
|
- background-color: #fff;
|
|
|
- padding: 40rpx 32rpx;
|
|
|
- // 可用余额
|
|
|
- .balance{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+
|
|
|
+ },
|
|
|
+ homePage(){
|
|
|
+ // uni.showLoading({
|
|
|
+ // title: "加载中",
|
|
|
+ // mask: true,
|
|
|
+ // })
|
|
|
|
|
|
- .balance-left{
|
|
|
- color: rgb(48,48,48);
|
|
|
- font-size: 36rpx;
|
|
|
- line-height: 40px;
|
|
|
- }
|
|
|
- .balance-right{
|
|
|
- color: rgb(48,48,48);
|
|
|
- font-size: 80rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- // 提示
|
|
|
- .hint{
|
|
|
- font-size: 24rpx;
|
|
|
- color: #1677FF;
|
|
|
- margin-top: 16rpx;
|
|
|
- text-align: right;
|
|
|
- padding-bottom: 32rpx;
|
|
|
- border-bottom: 1px solid rgba(244,244,244,1);
|
|
|
- }
|
|
|
- .hint2{
|
|
|
- color: #E60012;
|
|
|
- }
|
|
|
- // 租户信息
|
|
|
- .infos{
|
|
|
- border-bottom: 1px solid rgba(244,244,244,1);
|
|
|
- margin-top: 32rpx;
|
|
|
- padding-bottom: 32rpx;
|
|
|
- .item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ API_index.homePage({
|
|
|
|
|
|
- .item-title{
|
|
|
- color: rgb(119,119,119);
|
|
|
- }
|
|
|
- .item-value{
|
|
|
- color: rgb(48,48,48);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 缴费金额
|
|
|
- .payment-amount{
|
|
|
- margin-top: 32rpx;
|
|
|
- .title{
|
|
|
- color: rgb(48,48,48);
|
|
|
- font-size: 36rpx;
|
|
|
- }
|
|
|
- .amount-options{
|
|
|
- margin-top: 32rpx;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- .options-item{
|
|
|
- width: 200rpx;
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- border-radius: 4px;
|
|
|
- text-align: center;
|
|
|
- background-color: rgba(242,242,242,1);
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-size: 32rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+ }).then((response) => {
|
|
|
+ //uni.hideLoading();
|
|
|
+ this.submitForm.companyId=response.data.companyInfo.id;
|
|
|
+ //this.carhelp.getPersonInfoPlus().companyInfo.id
|
|
|
+ this.personInfo=response.data.regUser;
|
|
|
+ this.companyInfo=response.data.companyInfo;
|
|
|
+ if(this.companyInfo.transferAccountsInfo){
|
|
|
+ this.transferAccountsInfo=JSON.parse(this.companyInfo.transferAccountsInfo)
|
|
|
}
|
|
|
- .chosen{
|
|
|
- background-color: rgba(22,119,255,1);
|
|
|
- color: rgba(255,255,255,1);
|
|
|
+ }).catch(error => {
|
|
|
+ //uni.hideLoading();
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ radioChange: function(evt) {
|
|
|
+
|
|
|
+ this.submitType=evt.detail.value
|
|
|
+
|
|
|
+ },
|
|
|
+ ckInput(e){
|
|
|
+
|
|
|
+ var text=e.detail.value
|
|
|
+ if(text.indexOf('.')>0){
|
|
|
+ var k =text.split(".")[1]
|
|
|
+ if(k.length>=3){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ text=parseFloat(text).toFixed(2);
|
|
|
+ this.otherNum= text
|
|
|
+ })
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
- // 输入金额
|
|
|
- .input-amount{
|
|
|
- margin-top: 24rpx;
|
|
|
- display: flex;
|
|
|
- font-size: 48rpx;
|
|
|
- height: 100rpx;
|
|
|
- line-height: 100rpx;
|
|
|
- .symbol{
|
|
|
- margin-right: 32rpx;
|
|
|
- }
|
|
|
- .input{
|
|
|
- height: 100rpx;
|
|
|
- font-size: 48rpx;
|
|
|
- color: rgba(204,204,204,1);
|
|
|
+ var t =Number(text);
|
|
|
+ if(t<1){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.otherNum='';
|
|
|
+ })
|
|
|
+
|
|
|
}
|
|
|
- /deep/.uni-input-placeholder{
|
|
|
- color: rgba(204,204,204,1);
|
|
|
+ if(t>5000){
|
|
|
+ this.$nextTick(()=>{
|
|
|
+ this.otherNum=5000;
|
|
|
+ })
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- // 支付方式
|
|
|
- .payment-way{
|
|
|
- margin-top: 24rpx;
|
|
|
- .title{
|
|
|
- color: rgb(48,48,48);
|
|
|
- font-size: 36rpx;
|
|
|
- }
|
|
|
- .way{
|
|
|
- margin-top: 24rpx;
|
|
|
- .way-item{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
- .way-name{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgb(51,51,51);
|
|
|
- .img{
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 16rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ },
|
|
|
+ focus(){
|
|
|
+ console.log(0)
|
|
|
+ uni.pageScrollTo({
|
|
|
+ scrollTop:999999,
|
|
|
+ duration:0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.submitType == 2) {
|
|
|
+ this.show = true;
|
|
|
+ }else{
|
|
|
+ this.submitForm.amount=this.otherNum
|
|
|
+
|
|
|
+ if(!this.otherNum){
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: "请输入缴费金额"
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.submitType == 0) {
|
|
|
+ this.wxpy()
|
|
|
}
|
|
|
- /deep/.uni-radio-input{
|
|
|
- width: 40rpx;
|
|
|
- height: 40rpx;
|
|
|
+ if (this.submitType == 1) {
|
|
|
+ this.alpy()
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- // 按钮
|
|
|
- .btn{
|
|
|
- height: 96rpx;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: rgba(51,133,255,1);
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 36rpx;
|
|
|
- margin-top: 48rpx;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-// 对公转账弹窗
|
|
|
-.modal-content{
|
|
|
-
|
|
|
- padding: 40rpx 0;
|
|
|
- .title-icon{
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .img{
|
|
|
- width: 96rpx;
|
|
|
- height: 96rpx;
|
|
|
-
|
|
|
- }
|
|
|
- .title{
|
|
|
- text-align: center;
|
|
|
- color: rgba(16,16,16,1);
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 600;
|
|
|
- margin-top: 8rpx;
|
|
|
- }
|
|
|
- .infos-group{
|
|
|
- margin: 40rpx 32rpx 0;
|
|
|
- .item{
|
|
|
- display:flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 16rpx;
|
|
|
- .item-title{
|
|
|
- color: rgba(119,119,119,1);
|
|
|
- font-size: 32rpx;
|
|
|
- }
|
|
|
- .item-value{
|
|
|
- color: rgba(51,51,51,1);
|
|
|
- font-size: 32rpx;
|
|
|
- margin-left: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ alpy() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ mask: true,
|
|
|
+ })
|
|
|
+ var listcanvas = document.getElementsByTagName('canvas')
|
|
|
+
|
|
|
+ if (listcanvas.length > 0) {
|
|
|
+ document.getElementById("qrcode").removeChild(document.getElementsByTagName('canvas')[0]);
|
|
|
+ }
|
|
|
+ Pay.alpay(this.submitForm).then((response) => {
|
|
|
+
|
|
|
+ let qrcode = new QRCode('qrcode', {
|
|
|
+ width: 200,
|
|
|
+ height: 200,
|
|
|
+ text: response.data.qr_code,
|
|
|
+ correctLevel: QRCode.CorrectLevel.M,
|
|
|
+
|
|
|
+ })
|
|
|
+ this.outOrderNo = response.data.outOrderNo;
|
|
|
+ var canvas = document.getElementsByTagName('canvas')[0];
|
|
|
+ this.qrCodeImg = convertCanvasToImage(canvas);
|
|
|
+ uni.hideLoading()
|
|
|
+ this.showModel = true
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ wxpy() {
|
|
|
+
|
|
|
+ Pay.wxpay(this.submitForm).then((response) => {
|
|
|
+
|
|
|
+ if (!response.result) {
|
|
|
+ uni.showToast({
|
|
|
+ title: response.message
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var data = response.data
|
|
|
+ uni.hideLoading()
|
|
|
+ //("Pay+"+new Date().getTime())
|
|
|
+ wxPayJs(data);
|
|
|
+
|
|
|
+ }).catch(error => {
|
|
|
+ uni.showToast({
|
|
|
+
|
|
|
+ title: error
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ padding-bottom: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slot {
|
|
|
+ margin-right: 24rpx;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .main {
|
|
|
+ margin: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .headline {
|
|
|
+ background: linear-gradient(90deg, rgba(120, 175, 247, 1) 0%, rgba(39, 116, 226, 1) 100%);
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .title-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+
|
|
|
+ .icon1 {
|
|
|
+ width: 56rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-right {
|
|
|
+ display: flex;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+
|
|
|
+ .icon2 {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ margin-top: -8rpx;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+
|
|
|
+ // 可用余额
|
|
|
+ .balance {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .balance-left {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 36rpx;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-right {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 80rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 提示
|
|
|
+ .hint {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #1677FF;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ text-align: right;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint2 {
|
|
|
+ color: #E60012;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 租户信息
|
|
|
+ .infos {
|
|
|
+ border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
+ margin-top: 32rpx;
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgb(119, 119, 119);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 缴费金额
|
|
|
+ .payment-amount {
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-options {
|
|
|
+ margin-top: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .options-item {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(242, 242, 242, 1);
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chosen {
|
|
|
+ background-color: rgba(22, 119, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 输入金额
|
|
|
+ .input-amount {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ font-size: 48rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+
|
|
|
+ .symbol {
|
|
|
+ margin-right: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input {
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 48rpx;
|
|
|
+ color: rgba(204, 204, 204, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-input-placeholder {
|
|
|
+ color: rgba(204, 204, 204, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 支付方式
|
|
|
+ .payment-way {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ color: rgb(48, 48, 48);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .way {
|
|
|
+ margin-top: 24rpx;
|
|
|
+
|
|
|
+ .way-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .way-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgb(51, 51, 51);
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-radio-input {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按钮
|
|
|
+ .btn {
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(51, 133, 255, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 对公转账弹窗
|
|
|
+ .modal-content {
|
|
|
+
|
|
|
+ padding: 40rpx 0;
|
|
|
+
|
|
|
+ .title-icon {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos-group {
|
|
|
+ margin: 40rpx 32rpx 0;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin