|
|
@@ -0,0 +1,284 @@
|
|
|
+<template>
|
|
|
+ <div class="prepaidRefill">
|
|
|
+ <div class="input_phone flex_r flex_jb flex_wrap">
|
|
|
+ <textarea
|
|
|
+ v-model="qda.phoneno"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ class="inp dinB"
|
|
|
+ :auto-height="true"
|
|
|
+ @input="inphone"
|
|
|
+ @blur="inphone"
|
|
|
+ @confirm="inphone"
|
|
|
+ placeholder-class="inpc"
|
|
|
+ />
|
|
|
+ <div class="ico iconfont" @click="openContact"></div>
|
|
|
+ <div class="phonemsg" v-if="gameArea">{{ gameArea }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="items">
|
|
|
+ <div class="tit">充话费</div>
|
|
|
+ <div class="li flex_r">
|
|
|
+ <div
|
|
|
+ :class="{ li_it: 1, active: qda.cardnum == i }"
|
|
|
+ v-for="(i, s) in CallingList"
|
|
|
+ :key="s"
|
|
|
+ @click="qda.cardnum = i"
|
|
|
+ >
|
|
|
+ {{ i }}元
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="money card">
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>消费金额</span>
|
|
|
+ <span>¥{{ cartTotal || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span
|
|
|
+ >消费金抵扣<span class="corg">{{ Integral }}%</span></span
|
|
|
+ >
|
|
|
+ <span class="corg">-¥{{ deduction || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>实付金额</span>
|
|
|
+ <span>¥{{ actuallypaid || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="money card mar_b60">
|
|
|
+ <div class="li flex_r flex_jb">
|
|
|
+ <span>赠送茶宝</span>
|
|
|
+ <span>{{ chabao || 0 }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="footbtn" @click="onpay">立即支付</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ToPayOpre } from "@/utils/reqTools.js";
|
|
|
+let toPayOpre = new ToPayOpre();
|
|
|
+import { post } from "@/request/api.js";
|
|
|
+export default {
|
|
|
+ name: "prepaidRefill",
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CallingList: [], //可充话费列表
|
|
|
+ qda: {
|
|
|
+ cardnum: 100,
|
|
|
+ },
|
|
|
+ isvalid: false,
|
|
|
+ userinfo: uni.getStorageSync("userinfo"),
|
|
|
+ gameArea: "",
|
|
|
+
|
|
|
+ ratio: {},
|
|
|
+ cartTotal: 0,
|
|
|
+ Integral: 0,
|
|
|
+ deduction: 0,
|
|
|
+ actuallypaid: 0,
|
|
|
+ chabao: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openContact() {
|
|
|
+ let that = this;
|
|
|
+ uni.chooseContact({
|
|
|
+ success: (res) => {
|
|
|
+ if (that.checkPhone(res.phoneNumber)) {
|
|
|
+ that.qda.phoneno = res.phoneNumber;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ console.log("获取通讯录失败:", err);
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCallingList() {
|
|
|
+ post("local/ofpay/getMoney").then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.CallingList = res.data;
|
|
|
+ this.qda.cardnum = res.data[0];
|
|
|
+ this.inphone();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ inphone() {
|
|
|
+ if (this.checkPhone(this.qda.phoneno)) {
|
|
|
+ post("local/ofpay/telCheck", this.qda).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.isvalid = true;
|
|
|
+ post("local/ofpay/telQuery", this.qda).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.data.error_code == 0) {
|
|
|
+ this.gameArea = res.data.result.game_area;
|
|
|
+ this.getIntegral();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else this.isvalid = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ checkPhone(phone) {
|
|
|
+ if (/^1[3456789]\d{9}$/.test(phone)) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getIntegral() {
|
|
|
+ post("local/getIntegral", { type: 6 }).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ this.ratio = res.data;
|
|
|
+ this.computef();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ computef() {
|
|
|
+ let { integral, chabao } = this.ratio;
|
|
|
+ let i1 = integral,
|
|
|
+ i2 = chabao;
|
|
|
+ this.cartTotal = this.qda.cardnum;
|
|
|
+ this.Integral = this.$h.Mul(i1, 100);
|
|
|
+ this.deduction = this.$h.Mul(this.cartTotal, i1);
|
|
|
+ this.actuallypaid = this.$h.Sub(this.cartTotal, this.deduction);
|
|
|
+ this.chabao = this.$h.Mul(this.actuallypaid, i2).toFixed(2);
|
|
|
+ },
|
|
|
+ onpay() {
|
|
|
+ post("local/ofpay/onlineorde", this.qda).then((res) => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ toPayOpre.toPay(res.data, (rea) => {
|
|
|
+ if (!rea) {
|
|
|
+ // 支付成功
|
|
|
+ this.goto("/pagesB/orderingfood/orderlist");
|
|
|
+ } else {
|
|
|
+ // 支付失败
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(da) {
|
|
|
+ this.qda.phoneno = this.userinfo.mobile;
|
|
|
+ this.getCallingList();
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'qda.cardnum': {
|
|
|
+ immediate: true,
|
|
|
+ deep: true,
|
|
|
+ handler(va) {
|
|
|
+ this.computef();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang='scss'>
|
|
|
+.prepaidRefill {
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.money {
|
|
|
+ .li {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .corg {
|
|
|
+ color: #18bb88;
|
|
|
+ margin-left: 12rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+.card {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ padding: 28rpx 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang='scss'>
|
|
|
+.prepaidRefill {
|
|
|
+ .inpc {
|
|
|
+ font-size: 34rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|