|
|
@@ -0,0 +1,202 @@
|
|
|
+<template>
|
|
|
+ <div class="BalanceRecharge">
|
|
|
+ <!-- <div class="input_phone">
|
|
|
+ <div class="flex_r flex_jb flex_ac">
|
|
|
+ <textarea v-model="qda.phoneno" placeholder="请输入账号" :auto-height="true" class="inp dinB" placeholder-class="inpc" />
|
|
|
+ <div class="ico iconfont" @click="openContact"></div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="items">
|
|
|
+ <div class="tit">请选择充值金额</div>
|
|
|
+ <div class="li flex_r">
|
|
|
+ <div :class="{ li_it: 1, active: qda.amount == i }" v-for="(i, s) in CallingList" :key="s" @click="selectMoney(i)" >{{ i }}元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="checkbox-box flex_r flex_ac">
|
|
|
+ <checkbox-group @change="checkboxChange" class="flex_r flex_ac">
|
|
|
+ <label class="checkbox flex_r flex_ac">
|
|
|
+ <checkbox class="checkboxCom" value="agree" />
|
|
|
+ <view>我同意</view>
|
|
|
+ </label>
|
|
|
+ <span @click="goto('/pages/agreement/index',{tit:'充值协议',type:28})" class="hover_a">《充值协议》</span>
|
|
|
+ </checkbox-group>
|
|
|
+ </div>
|
|
|
+ <div class="footbtn" @click="onpay">立即充值</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { post } from "@/request/api.js";
|
|
|
+import { ToPayOpre } from "@/utils/reqTools.js";
|
|
|
+let toPayOpre = new ToPayOpre();
|
|
|
+export default {
|
|
|
+ name: "BalanceRecharge",
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CallingList: [], //可充话费列表
|
|
|
+ qda: {
|
|
|
+ trade_type: "jsapi",
|
|
|
+ },
|
|
|
+ userinfo: uni.getStorageSync("userinfo"),
|
|
|
+ selectItem: {},
|
|
|
+ isDisabled: false, //是否同意充值协议
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openContact() {
|
|
|
+ let that = this;
|
|
|
+ uni.chooseContact({
|
|
|
+ success: (res) => {
|
|
|
+ setTimeout(() => {
|
|
|
+ that.qda.phoneno = res.phoneNumber;
|
|
|
+ }, 80);
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("获取通讯录失败:", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectMoney(va){
|
|
|
+ this.selectItem = va
|
|
|
+ this.qda.amount = va
|
|
|
+ },
|
|
|
+ getCallingList() {
|
|
|
+ post("v1/user/rechargeList").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.CallingList = res.data.data;
|
|
|
+ this.selectMoney(res.data.data[0]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onpay() {
|
|
|
+ if (!this.isDisabled) {
|
|
|
+ uni.showToast({ title: '请阅读并同意相关协议', icon: 'none' })
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ else this.payok();
|
|
|
+ },
|
|
|
+ payok(){
|
|
|
+ let that = this
|
|
|
+ post("v1/user/recharge", this.qda).then((res) => {
|
|
|
+ if (res.code == 0 && res.data?.data?.paySign) {
|
|
|
+ toPayOpre.toPay(res.data?.data, (rea) => {
|
|
|
+ if (!rea) {
|
|
|
+ // 支付成功
|
|
|
+ uni.showToast({ title: '充值成功' })
|
|
|
+ that.goto("/pagesB/my/shuZhiWallet")
|
|
|
+ } else {
|
|
|
+ // 支付失败
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkboxChange(e) {
|
|
|
+ var value = e.detail.value;
|
|
|
+ if (value.length == 0) {
|
|
|
+ this.isDisabled = false
|
|
|
+ } else {
|
|
|
+ this.isDisabled = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(da) {
|
|
|
+ this.qda.phoneno = this.userinfo.mobile;
|
|
|
+ this.getCallingList();
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ onShow() {},
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang='scss'>
|
|
|
+.BalanceRecharge {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 28rpx 32rpx;
|
|
|
+}
|
|
|
+.input_phone {
|
|
|
+ border-bottom: 1rpx solid rgba($color: #000, $alpha: 0.15);
|
|
|
+ padding: 12rpx 16rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+ .inp {
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ .ico{
|
|
|
+ font-size: 50rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .phonemsg {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 12rpx;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+}
|
|
|
+.items {
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+ .tit {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .li {
|
|
|
+ display: grid;
|
|
|
+ justify-content: space-between;
|
|
|
+ grid-template-columns: repeat(auto-fill, 210rpx);
|
|
|
+ }
|
|
|
+ .li_it {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 210rpx;
|
|
|
+ text-align: center;
|
|
|
+ height: 120rpx;
|
|
|
+ line-height: 120rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 1rpx solid rgba($color: #000, $alpha: 0.15);
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ color: #555;
|
|
|
+ &.active {
|
|
|
+ color: #18bb88;
|
|
|
+ border-color: #18bb88;
|
|
|
+ box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #18bb88, $alpha: 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.footbtn {
|
|
|
+ width: calc(100% - 60rpx);
|
|
|
+ height: 80rpx;
|
|
|
+ background: #17bb87;
|
|
|
+ border-radius: 45rpx;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 50rpx;
|
|
|
+ left: 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.checkbox-box {
|
|
|
+ margin-top: 60rpx;
|
|
|
+ margin-bottom: -20px;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text {
|
|
|
+ color: #44a92f;
|
|
|
+ }
|
|
|
+ .checkbox .checkboxCom {
|
|
|
+ transform: scale(0.84);
|
|
|
+ -webkit-transform: scale(0.84);
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang='scss'>
|
|
|
+.BalanceRecharge {
|
|
|
+ .inpc {
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|