123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530 |
- <!-- 账号充值 -->
- <template>
- <view class="container">
- <view v-if="!rechargeSn" class="amount_part flex_column_start_start">
- <text class="title">{{$L('充值金额')}}</text>
- <view class="amount_view flex_row_start_start">
- <text :class="{num:true, flex_row_center_center:true,hasSelAmout:amount == item}" v-for="(item,index) in amountList"
- :key='index' @click="selAmount(item)">{{item}}{{$L('元')}}</text>
- <input :class="{num:true, flex_row_center_center:true, input_amount:true,hasSelAmout:!amount||input_amount}"
- :placeholder="$L('请输入金额')" v-model="input_amount" placeholder-class='input_placeholder' maxlength="5"
- @focus='selSetAmount' @blur='handleBlur' type="text"/>
- </view>
- </view>
- <view class="pay_part flex_column_start_start">
- <text class="title">{{$L('选择充值方式')}}</text>
- <view v-for="(item,index) in payMethod" :key='index' @click="selectPayMethod(item)" :class="{item:true, b_b:index<payMethod.length-1, flex_row_between_center:true}">
- <view class="left flex_row_start_center">
- <image class="pay_icon" :src="item.payIcon" />
- <text class="tit">{{item.payMethodName}}</text>
- </view>
- <text :class="{iconfont:true, iconziyuan33:selData.payMethod == item.payMethod,iconziyuan43:selData.payMethod != item.payMethod,has_sel:selData.payMethod == item.payMethod}"></text>
- </view>
- </view>
- <view v-show="showBtn" class="btn_recharge flex_row_center_center" @click="reCharge">{{$L('确认充值')}}</view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- export default {
- data() {
- return {
- rechargeSn: '',
- selData: {},
- payMethod: [], //支付方式
- amount: 50,
- amountList: [50, 100, 200, 500, 1000],
- input_amount: '',
- balance: 0, //账户总金额
- client: 'wxbrowser', //支付发起来源 pc==pc,mbrowser==移动设备浏览器,app==app,wxxcx==微信小程序,wxbrowser==微信内部浏览器
- isAllowAutoPay: true, //当浏览器地址有code时,是否允许自动支付,如果支付失败的话置为false
- wxBrowerCode: '', //微信浏览器支付的code
- payMethodType: '', //支付发起来源,上个页面 rechargeBalance:用户充值 rechargeDetail:充值详情
- rechargeId: '', //从充值详情过来的,充值id
- showBtn: true, // 输入金额键盘弹出时隐藏确认按钮
- windowHeight: '', // 屏幕高度判断键盘弹出收起,
- isClick:true,
- }
- },
- computed: {
- ...mapState(['hasLogin', 'userInfo'])
- },
- onLoad(options) {
- if (options.rechargeSn) {
- this.rechargeSn = options.rechargeSn;
- }
- if (options.payMethodType) {
- this.payMethodType = options.payMethodType;
- }
- if (options.rechargeId) {
- this.rechargeId = options.rechargeId;
- }
- //#ifdef H5
- //判断code地址的参数 start
- let code = this.$getQueryVariable('code');
- if (code) {
- this.wxBrowerCode = code;
- if (options.type == 'sel') {
- this.amount = options.amount;
- } else if (options.type == 'input') {
- this.input_amount = options.amount;
- }
- }
- //判断code地址的参数 end
- //#endif
- this.initClient();
- this.balance = parseFloat(options.balance) || 0;
- this.getPayMethod();
- // 手机软键盘收起时显示确认按钮
- uni.getSystemInfo({
- success: (res) => {
- this.windowHeight = res.windowHeight;
- }
- });
- uni.onWindowResize((res) => {
- if (res.size.windowHeight < this.windowHeight) {
- this.showBtn = false;
- } else {
- this.showBtn = true
- }
- })
- },
- methods: {
- //初始化终端类型
- initClient() {
- //#ifdef APP-PLUS
- this.client = 'app';
- //#endif
- //#ifdef H5
- this.client = this.$isWeiXinBrower() ? 'wxbrowser' : 'mbrowser';
- //#endif
- //#ifdef MP-WEIXIN
- this.client = 'wxxcx';
- //#endif
- },
- //获取支付方式
- getPayMethod() {
- let {
- client,
- wxBrowerCode,
- isAllowAutoPay
- } = this;
- this.$request({
- url: 'v3/business/front/orderPay/payMethod',
- data: {
- source: client,
- type: 2, //支付发起类型 1==下单支付,2==余额充值/订单列表
- },
- }).then(res => {
- if (res.state == 200) {
- res.data.map(item => {
- item.payIcon = getApp().globalData.imgUrl + `pay/${item.payMethod}_pay_icon.png`;
- });
- this.payMethod = res.data;
- if (!wxBrowerCode) {
- this.selData = this.payMethod[0];
- } else {
- //有code的话要默认选中微信支付,并直接提交订单
- this.selData = this.payMethod.filter(item => item.payMethod == 'wx')[0];
- if (isAllowAutoPay) {
- this.reCharge();
- }
- }
- }
- }).catch((e) => {})
- },
- //选择支付方式事件
- selectPayMethod(val) {
- let that = this;
- that.selData = val;
- },
- //确认充值事件
- reCharge() {
- const {
- selData,
- rechargeSn,
- amount,
- input_amount,
- wxBrowerCode,
- client
- } = this;
-
- uni.showLoading()
- if(!this.isClick){
- return false
- }
-
- this.isClick = false
-
-
- let param = {};
- param.method = 'POST';
- param.data = {};
- param.data.key = this.userInfo.access_token;
- if (rechargeSn) {
- param.url = 'v3/member/front/balanceRecharge/rechargeContinue';
- param.data.rechargeSn = rechargeSn;
- } else {
- param.url = 'v3/member/front/balanceRecharge/recharge';
- param.data.amount = amount || input_amount;
- if (!param.data.amount) {
- this.$api.msg('请设置充值金额');
- return false
- }
- }
- param.data.payType = selData.payType;
- param.data.payMethod = selData.payMethod;
- if (client == 'wxxcx') {
- //微信小程序支付
- uni.login({
- success: code => {
- param.data.code = code.code;
- param.data.codeSource = 1; //用户code来源(JSAPI支付时必填):1==小程序,2==微信内部浏览器
- this.$request(param).then(res => {
- if (res.state == 200) {
- uni.hideLoading()
- let tmp_data = res.data.payData;
- if (res.data.actionType == null) {
- //微信小程序支付
- uni.requestPayment({
- 'timeStamp': tmp_data.timeStamp,
- 'nonceStr': tmp_data.nonceStr,
- 'package': tmp_data.packageValue,
- 'signType': 'MD5',
- 'paySign': tmp_data.paySign,
- success: function(res) {
- _this.payTip('success');
- },
- fail: function(res) {
- _this.payTip('fail');
- }
- });
- }
- } else {
- this.isClick = true
- _this.$api.msg(res.msg);
- }
- }).catch((e) => {})
- }
- });
- return false;
- } else if (client == 'wxbrowser') {
- //微信h5支付
- if (!wxBrowerCode) {
- let param = '';
- if (rechargeSn) {
- param = 'type=continue';
- } else {
- if (amount) {
- param = 'type=sel';
- }
- if (input_amount) {
- param = 'type=input';
- }
- param += '&amount=' + (amount || input_amount);
- }
- if (location.href.indexOf('?') > -1) {
- location.href += '&' + param;
- } else {
- location.href += '?' + param;
- }
- uni.hideLoading()
- let uricode = encodeURIComponent(location.href)
- window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + getApp().globalData.h5AppId +
- '&redirect_uri=' + uricode + '&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect';
- return false;
- } else {
- param.data.code = wxBrowerCode;
- param.data.codeSource = 2; //用户code来源(JSAPI支付时必填):1==小程序,2==微信内部浏览器
- }
- }
- this.$request(param).then(res => {
- if (res.state == 200) {
- uni.hideLoading()
- let tmp_data = res.data.payData;
- if (res.data.actionType == 'redirect') {
- window.location.href = tmp_data;
- } else if (res.data.actionType == null) {
- if (client == 'wxbrowser') {
- //微信h5支付
- this.$weiXinBrowerPay({
- timestamp: tmp_data.timeStamp,
- nonceStr: tmp_data.nonceStr,
- package: tmp_data.packageValue,
- signType: 'MD5',
- paySign: tmp_data.paySign,
- appId: tmp_data.appId, //此参数可不用
- success: function(r) {
- if (r.errMsg == "chooseWXPay:ok") {
- _this.payTip('success');
- } else {
- _this.payTip('fail');
- _this.isAllowAutoPay = false; //支付失败后禁止自动支付
- }
- },
- cancel: function(r) {
- _this.payTip('fail');
- _this.isAllowAutoPay = false; //支付失败后禁止自动支付
- _this.isClick = true
- }
- });
- } else if (client == 'wxxcx') {
- //微信小程序支付
- uni.requestPayment({
- 'timeStamp': tmp_data.timeStamp,
- 'nonceStr': tmp_data.nonceStr,
- 'package': tmp_data.packageValue,
- 'signType': 'MD5',
- 'paySign': tmp_data.paySign,
- 'success': function(res) {
- _this.payTip('success');
- },
- 'fail': function(res) {
- _this.payTip('fail');
- _this.isClick = true
- }
- });
- } else if (client == 'app') {
- //APP支付
- let provider = '';
- let orderInfo = {};
- if (selData.payMethod == 'wx') {
- provider = 'wxpay';
- orderInfo.appid = tmp_data.appId;
- orderInfo.noncestr = tmp_data.nonceStr;
- orderInfo.package = tmp_data.packageValue;
- orderInfo.partnerid = tmp_data.partnerId;
- orderInfo.prepayid = tmp_data.prepayId;
- orderInfo.timestamp = tmp_data.timeStamp;
- orderInfo.sign = tmp_data.sign;
- } else if (selData.payMethod == 'alipay') {
- provider = 'alipay';
- }
- uni.requestPayment({
- provider: provider,
- orderInfo: provider == 'alipay' ? res.data.payData : orderInfo, //订单数据
- success: function(res) {
- _this.payTip('success');
- },
- fail: function(err) {
- _this.payTip('fail');
- _this.isClick = true
- }
- });
- }
- } else if (res.data.actionType == 'autopost') {
- document.write(res.data.payData);
- }
- } else {
- _this.isClick = true
- this.$api.msg(res.msg);
- }
- }).catch((e) => {})
- },
- //支付操作完成提示
- payTip(type) {
- if (type == 'success') {
- //提示充值成功,如果来自账户充值页面,直接跳转充值明细列表页面,否则返回上一级页面(充值详情页面),并更新数据 rechargeBalance:用户充值 rechargeDetail:充值详情
- this.$api.msg('充值成功');
- if (this.payMethodType == 'rechargeBalance') {
- uni.navigateTo({
- url: '/pages/recharge/list'
- })
- } else if (this.payMethodType == 'rechargeDetail') {
- const pages = getCurrentPages(); //当前页面栈
- if (pages.length > 1) {
- const beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
- beforePage.$vm.getDetail(); //触发上个面中的方法获取订单列表 *getDetail为上个页面的方法*
- beforePage.$vm.rechargeId = this.rechargeId; //更新上一页的充值id
- }
- setTimeout(() => {
- uni.navigateBack()
- }, 1000)
- }
- } else if (type == 'fail') {
- //提示充值失败 刷新界面
- this.$api.msg('充值失败,请重试~');
- this.getPayMethod();
- }
- },
- //选择充值金额
- selAmount(amount) {
- this.input_amount = '';
- this.amount = amount;
- },
- //设置金额聚焦事件
- selSetAmount() {
- this.amount = '';
- this.showBtn = false
- },
- //输入金额
- handleBlur(e) {
- this.showBtn = true
- let val = parseFloat(e.detail.value.toString());
- if (val > 5000) {
- this.$api.msg('一次最多充值5000元');
- this.input_amount = 5000;
- } else {
- if (this.balance + val > 999999.00) {
- this.$api.msg('当前账号余额已达最大值');
- }else if(val<=0){
- this.$api.msg('充值金额不能为负数或者为零');
- this.input_amount=''
- }else if(Number.isNaN(val)){
- this.input_amount=''
- } else {
- //小数点后最多后两位
- this.input_amount = val.toString().indexOf('.')==-1? val:val.toString().substring(0,val.toString().indexOf('.')+3);
- }
- }
- },
- }
- }
- </script>
- <style lang="scss">
- page {
- background: $bg-color-split;
- width: 750rpx;
- margin: 0 auto;
- }
- uni-page-body {
- display: flex;
- height: 100%;
- }
- .container {
- display: flex;
- flex-direction: column;
- flex: 1;
- .amount_part {
- margin-top: 20rpx;
- width: 750rpx;
- height: 400rpx;
- background: #fff;
- .title {
- color: $main-font-color;
- font-size: 32rpx;
- line-height: 36rpx;
- margin: 30rpx 0 10rpx 20rpx;
- }
- .amount_view {
- flex-wrap: wrap;
- .num {
- width: 223rpx;
- height: 129rpx;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 0px 20rpx 0px rgba(153, 153, 153, 0.2);
- border-radius: 15rpx;
- color: $main-font-color;
- font-size: 36rpx;
- margin: 20rpx 0 0 20rpx;
- line-height: 129rpx;
- &.hasSelAmout {
- border: 1rpx solid $main-color;
- }
- }
- .input_placeholder {
- color: $main-third-color;
- font-size: 24rpx;
- text-align: center;
- }
- .input_amount {
- text-align: center;
- }
- }
- }
- .pay_part {
- margin-top: 20rpx;
- background: #fff;
- flex: 1;
- .title {
- color: $main-font-color;
- font-size: 32rpx;
- margin-top: 30rpx;
- margin-left: 20rpx;
- }
- .item {
- width: 100%;
- padding: 20rpx;
- position: relative;
- .left {
- .pay_icon {
- width: 80rpx;
- height: 80rpx;
- }
- .tit {
- color: $main-font-color;
- font-size: 28rpx;
- margin-left: 20rpx;
- }
- }
- .iconfont {
- color: $main-third-color;
- font-size: 32rpx;
- }
- .has_sel {
- color: $main-color;
- }
- &.b_b:after {
- left: 20rpx;
- }
- }
- }
- .btn_recharge {
- width: 670rpx;
- margin: 0 40rpx;
- height: 88rpx;
- background: linear-gradient(-90deg, rgba(252, 29, 28, 1) 0%, rgba(255, 122, 24, 1) 100%);
- box-shadow: 0px 3rpx 20rpx 0rpx rgba(252, 30, 28, 0.26);
- border-radius: 44rpx;
- color: #fff;
- font-size: 36rpx;
- position: fixed;
- left: 50%;
- transform: translateX(-375rpx);
- bottom: 40rpx;
- // top: calc(100vh - 88rpx);
- // top: 1200rpx;
- }
- }
- </style>
|