| | |
| | | </template> |
| | | </van-nav-bar> |
| | | <main> |
| | | <div> |
| | | <!-- <div class="form-block"> |
| | | <mt-field |
| | | :label="$t('充值')" |
| | | :placeholder="$t('请输入充值金额')" |
| | | type="text" |
| | | v-model="rechargeMoney" |
| | | > |
| | | </mt-field> |
| | | </div> --> |
| | | <div class="main-title">{{ $t("請選擇充值金額") }}</div> |
| | | <div class="white-input"> |
| | | <input type="number" v-model="rechargeMoney" @input="inputValue" /> |
| | | <span class="myr"> {{ rechargeAccountData.symbolCode }}</span> |
| | | </div> |
| | | <div class="btnbox"> |
| | | <van-button class="but" type="primary" style="margin-top: 1.04rem; " |
| | | @click="tosubmit">{{ |
| | | $t("确认") |
| | | }}</van-button> |
| | | <van-button class="but" type="primary" style="margin-top: 1.04rem; margin-bottom: 1.04rem" |
| | | @click="goOnline">{{ |
| | | $t("kf") |
| | | }}</van-button> |
| | | <!-- <span class="text-center btnok loginout" @click="tosubmit">{{ |
| | | $t("确认") |
| | | }}</span> |
| | | <span class="text-center btnok loginout" @click="goOnline">{{ |
| | | $t("kf") |
| | | }}</span> --> |
| | | </div> |
| | | <!-- <div> |
| | | <div class="main-title">{{ $t("支持得支付渠道") }}</div> |
| | | <van-cell |
| | | is-link |
| | | :title="paymentSelectData.channelAccount || $t('請選擇')" |
| | | @click="paymentShow = true" |
| | | /> |
| | | <!-- paymentSelectData.channelMinLimit --> |
| | | <van-action-sheet |
| | | v-model="paymentShow" |
| | | :actions="paymentActions" |
| | |
| | | is-link |
| | | :title="$t(rechargeAccountData.key) || $t('請選擇')" |
| | | /> |
| | | <!-- @click="rechargeAccountShow = true" --> |
| | | <van-action-sheet |
| | | v-model="rechargeAccountShow" |
| | | :actions="rechargeAccountActions" |
| | | :cancel-text="$t('qx')" |
| | | /> |
| | | <!-- close-on-click-action --> |
| | | <!-- @select="rechargeAccountSelect" --> |
| | | <div class="main-title">{{ $t("請選擇充值金額") }}</div> |
| | | <div class="white-input"> |
| | | <input type="number" :value="value" @input="inputValue" /> |
| | |
| | | </el-upload> |
| | | </div> |
| | | </div> |
| | | <!-- :disabled="butFlg" --> |
| | | <van-button |
| | | class="but" |
| | | type="primary" |
| | |
| | | >{{ $t("hj172") }}</van-button |
| | | > |
| | | </template> |
| | | </div> |
| | | </div> --> |
| | | </main> |
| | | </div> |
| | | </template> |
| | |
| | | import { ActionSheet } from "vant"; |
| | | import ClipboardJS from "clipboard"; |
| | | import apiUrl from "@/axios/api.url.js"; |
| | | import { siteGetPayInfo, selCzFn } from "../../axios/api"; |
| | | import { siteGetPayInfo, selCzFn, saveUserRecharge } from "../../axios/api"; |
| | | import { Notify } from "vant"; |
| | | import { rechargeAccountActions } from "@/utils/rechargeActions"; |
| | | // baseURL |
| | |
| | | showBtn: true, |
| | | imgStatus: false, |
| | | form: { |
| | | img1key: "", |
| | | img1key: "" |
| | | }, |
| | | rechargeMoney: null |
| | | }; |
| | | }, |
| | | methods: { |
| | | async tosubmit() { |
| | | const data = await saveUserRecharge({ amt: this.rechargeMoney }); |
| | | if (data.status === 0) { |
| | | Toast(data.msg); |
| | | this.$router.push("/user"); |
| | | } else { |
| | | Toast(data.msg); |
| | | } |
| | | }, |
| | | goOnline() { |
| | | this.$router.push("/service"); |
| | | }, |
| | | judgeValue() { |
| | | console.log(this.form.img1key, this.value); |
| | | if (this.form.img1key && this.value) { |
| | |
| | | const res = await selCzFn({ |
| | | payTypeId: this.paymentSelectData.id, |
| | | payAmt: this.value, |
| | | img: this.form.img1key, |
| | | img: this.form.img1key |
| | | }); |
| | | if (res.status === 0) { |
| | | Notify({ type: "success", message: this.$t("hj182") }); |
| | |
| | | async getPayInfos() { |
| | | const res = await siteGetPayInfo(); |
| | | if (res.status === 0) { |
| | | res.data.map((item) => { |
| | | res.data.map(item => { |
| | | item.name = item.channelAccount; |
| | | }); |
| | | this.paymentActions = res.data; |
| | |
| | | }, |
| | | copyText(e, data) { |
| | | var clipboard = new ClipboardJS(".copy-button", { |
| | | text: () => data, |
| | | text: () => data |
| | | }); |
| | | |
| | | clipboard.on("success", () => { |
| | |
| | | }, |
| | | paymentSelect(e) { |
| | | this.paymentSelectData = e; |
| | | this.rechargeAccountActions.map((item) => { |
| | | this.rechargeAccountActions.map(item => { |
| | | if (item.key === e.assetsType) { |
| | | this.rechargeAccountData = item; |
| | | } |
| | | }); |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | .but { |
| | | width: 100%; |
| | | color: #ffffff; |
| | | background-color: #1989fa; |
| | | border-radius: 8px; |
| | | height: 66px; |
| | | font-size: 22px; |
| | | } |
| | | .bottom-text { |
| | | width: 100%; |
| | | background-color: #fff; |
| | | padding: 0.26667rem 0.37333rem; |
| | | box-sizing: border-box; |
| | | margin-top: 0.26667rem; |
| | | // margin-bottom: 80px; |
| | | .balance { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | color: #181818; |
| | | font-family: PingFang SC; |
| | | font-size: 0.32rem; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | .payclass { |
| | | width: 150px; |
| | | height: 40px; |
| | | border-radius: 5px; |
| | | border: 1px solid #e5e8ed; |
| | | text-align: center; |
| | | line-height: 40px; |
| | | } |
| | | |
| | | .but { |
| | | width: 100%; |
| | | color: #ffffff; |
| | | background-color: #1989fa; |
| | | border-radius: 8px; |
| | | height: 66px; |
| | | font-size: 22px; |
| | | } |
| | | |
| | | .bottom-text { |
| | | width: 100%; |
| | | background-color: #fff; |
| | | padding: 0.26667rem 0.37333rem; |
| | | box-sizing: border-box; |
| | | .balance-text { |
| | | margin-top: 0.26667rem; |
| | | |
| | | // margin-bottom: 80px; |
| | | .balance { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | color: #181818; |
| | | font-family: PingFang SC; |
| | | font-size: 0.32rem; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | line-height: 0.37333rem; |
| | | margin-bottom: 0.37333rem; |
| | | box-sizing: border-box; |
| | | |
| | | .balance-text { |
| | | color: #181818; |
| | | font-family: PingFang SC; |
| | | font-size: 0.32rem; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | line-height: 0.37333rem; |
| | | margin-bottom: 0.37333rem; |
| | | } |
| | | } |
| | | |
| | | .division { |
| | | width: 100%; |
| | | height: 0.02667rem; |
| | | flex-shrink: 0; |
| | | background-color: #e5e8ed; |
| | | margin: 0.37333rem 0; |
| | | } |
| | | |
| | | .upload-text { |
| | | color: #181818; |
| | | font-family: PingFang SC; |
| | | font-size: 0.32rem; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | .division { |
| | | width: 100%; |
| | | height: 0.02667rem; |
| | | flex-shrink: 0; |
| | | background-color: #e5e8ed; |
| | | margin: 0.37333rem 0; |
| | | |
| | | /deep/ .van-nav-bar__content { |
| | | height: 65px; |
| | | } |
| | | .upload-text { |
| | | color: #181818; |
| | | font-family: PingFang SC; |
| | | font-size: 0.32rem; |
| | | |
| | | /deep/ .van-nav-bar__title { |
| | | font-family: "DINPro"; |
| | | width: 100%; |
| | | height: 1.17333rem; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.48rem; |
| | | color: #14181f; |
| | | } |
| | | } |
| | | /deep/ .van-nav-bar__content { |
| | | height: 65px; |
| | | } |
| | | /deep/ .van-nav-bar__title { |
| | | font-family: "DINPro"; |
| | | width: 100%; |
| | | height: 1.17333rem; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.48rem; |
| | | color: #14181f; |
| | | } |
| | | /deep/ .van-cell { |
| | | list-style: none; |
| | | width: 100%; |
| | | margin-top: 0.26667rem; |
| | | background: #fff; |
| | | border-radius: 0.10667rem; |
| | | list-style: none; |
| | | border: none; |
| | | font-family: Arial, sans-serif; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.37333rem; |
| | | line-height: 0.53333rem; |
| | | padding: 0.32rem 0.4rem; |
| | | box-sizing: border-box; |
| | | margin-top: 0.26667rem; |
| | | box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | } |
| | | main { |
| | | padding: 0 0.4rem 0.53333rem; |
| | | box-sizing: border-box; |
| | | } |
| | | .main-title { |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | font-size: 0.37333rem; |
| | | color: #8c9fad; |
| | | margin-top: 0.53333rem; |
| | | } |
| | | |
| | | .white-input { |
| | | width: 100%; |
| | | background: #fff; |
| | | border-radius: 0.10667rem; |
| | | list-style: none; |
| | | border: none; |
| | | font-family: Arial, sans-serif; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.37333rem; |
| | | line-height: 0.53333rem; |
| | | padding: 0.32rem 0.4rem; |
| | | -webkit-box-sizing: border-box; |
| | | box-sizing: border-box; |
| | | margin-top: 0.26667rem; |
| | | -webkit-box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | .fuzhi { |
| | | font-size: 28px; |
| | | cursor: pointer; |
| | | } |
| | | .myr { |
| | | color: rgb(150, 151, 153); |
| | | } |
| | | /deep/ .el-upload__input { |
| | | display: none !important; |
| | | } |
| | | /deep/ .avatar-uploader { |
| | | width: 2.740741rem; |
| | | height: 2.740741rem; |
| | | } |
| | | </style> |
| | | /deep/ .van-cell { |
| | | list-style: none; |
| | | width: 100%; |
| | | margin-top: 0.26667rem; |
| | | background: #fff; |
| | | border-radius: 0.10667rem; |
| | | list-style: none; |
| | | border: none; |
| | | font-family: Arial, sans-serif; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.37333rem; |
| | | line-height: 0.53333rem; |
| | | padding: 0.32rem 0.4rem; |
| | | box-sizing: border-box; |
| | | margin-top: 0.26667rem; |
| | | box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | } |
| | | |
| | | main { |
| | | padding: 0 0.4rem 0.53333rem; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .main-title { |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | font-size: 0.37333rem; |
| | | color: #8c9fad; |
| | | margin-top: 0.53333rem; |
| | | } |
| | | |
| | | .white-input { |
| | | width: 100%; |
| | | background: #fff; |
| | | border-radius: 0.10667rem; |
| | | list-style: none; |
| | | border: none; |
| | | font-family: Arial, sans-serif; |
| | | font-style: normal; |
| | | font-weight: 500; |
| | | font-size: 0.37333rem; |
| | | line-height: 0.53333rem; |
| | | padding: 0.32rem 0.4rem; |
| | | -webkit-box-sizing: border-box; |
| | | box-sizing: border-box; |
| | | margin-top: 0.26667rem; |
| | | -webkit-box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | box-shadow: 0 0.16rem 0.32rem #eaeaea99; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .fuzhi { |
| | | font-size: 28px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .myr { |
| | | color: rgb(150, 151, 153); |
| | | } |
| | | |
| | | /deep/ .el-upload__input { |
| | | display: none !important; |
| | | } |
| | | |
| | | /deep/ .avatar-uploader { |
| | | width: 2.740741rem; |
| | | height: 2.740741rem; |
| | | } |
| | | </style> |