JHAndroid/src/components/Menu/MenuPay/MenuPayH5.vue

<template>
  <!-- 鸿币充值 -->
  <div class="menu_pay_h5">
    <!-- 充值账号 -->
    <div class="pay_account">
      <span class="left"> 充值账号:</span>
      <div class="right">
        <span class="account">{{ userInfo.passport }}</span>
        <span class="money">(余额 {{ finance }} HB)</span>
      </div>
    </div>

    <!-- 充值金额 -->
    <div class="pay_money">
      <span class="left">充值金额:</span>
      <!-- <div class="right">
        <ul>
          <li
            class="default"
            :class="{
              active: currentCount === index,
            }"
            v-for="(item, index) in payCountList"
            :key="index"
            @click="onSelectCount(item.count, index)"
          >
            {{ item.name }}
          </li>
          <li
            class="count_input"
            :class="{
              active: currentCount === -1,
            }"
            @click="onSelectCount(null, -1)"
            @keyup.enter="onConfirmCount"
          >
            <input type="number" v-model="payCount2" />
            <div class="confirm" @click="onConfirmCount">确认</div>
          </li>
        </ul>
      </div> -->
      <!-- 类似购物车 -->
      <div class="right">
        <ul class="clear">
          <!-- 第一档 -->
          <li
            class="default"
            :class="{
              active: firstCount,
            }"
            @click="select(0)"
          >
            {{ payCountList[0] }} HB
          </li>
          <li class="count clear">
            <div class="reduce" @click="reduce(0)">-</div>
            <input
              type="tel"
              v-model="firstCount"
              pattern="[0-9]*"
              compositionstart="compositionstartInput"
              oninput="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              @blur="checkInput(0)"
            />
            <div class="add" @click="add(0)">+</div>
          </li>
          <!-- 第二档 -->
          <li
            class="default"
            :class="{
              active: secondCount,
            }"
            @click="select(1)"
          >
            {{ payCountList[1] }} HB
          </li>
          <li class="count clear">
            <div class="reduce" @click="reduce(1)">-</div>
            <input
              type="tel"
              v-model="secondCount"
              pattern="[0-9]*"
              compositionstart="compositionstartInput"
              oninput="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              @blur="checkInput(1)"
            />
            <div class="add" @click="add(1)">+</div>
          </li>
          <!-- 第三档 -->
          <li
            class="default"
            :class="{
              active: thirdCount,
            }"
            @click="select(2)"
          >
            {{ payCountList[2] }} HB
          </li>
          <li class="count clear">
            <div class="reduce" @click="reduce(2)">-</div>
            <input
              type="tel"
              v-model="thirdCount"
              pattern="[0-9]*"
              compositionstart="compositionstartInput"
              oninput="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              @blur="checkInput(2)"
            />
            <div class="add" @click="add(2)">+</div>
          </li>
          <!-- 第四档 -->
          <li
            class="default"
            :class="{
              active: fourthCount,
            }"
            @click="select(3)"
          >
            {{ payCountList[3] }} HB
          </li>
          <!-- <li
            class="count_input"
            :class="{
              active: currentCount === -1,
            }"
            @click="onSelectCount(null, -1)"
            @keyup.enter="onConfirmCount"
          >
            <input type="number" v-model="payCount2" />
            <div class="confirm" @click="onConfirmCount">确认</div>
          </li> -->
          <li class="count clear">
            <div class="reduce" @click="reduce(3)">-</div>
            <input
              type="tel"
              v-model="fourthCount"
              pattern="[0-9]*"
              compositionstart="compositionstartInput"
              oninput="this.value=this.value.replace(/\D/g,'')"
              onafterpaste="this.value=this.value.replace(/\D/g,'')"
              @blur="checkInput(3)"
            />
            <div class="add" @click="add(3)">+</div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="pay_type">
      <span class="left"> 支付方式:</span>
      <div class="right">
        <div
          class="alipay"
          :class="{
            active: payPlatform === 'ALIPAY',
          }"
          @click="onSelectpayPlatform('ALIPAY')"
        >
          <img src="~@/assets/image/alipay.png" alt="" />
          <span>支付宝</span>
        </div>
        <div
          class="wxpay"
          :class="{
            active: payPlatform === 'WECHATPAY',
          }"
          @click="onSelectpayPlatform('WECHATPAY')"
        >
          <img src="~@/assets/image/wxpay.png" alt="" />
          <span>微信</span>
        </div>
      </div>
    </div>

    <!-- 应付金额 -->
    <div class="pay_all_money">
      <span class="left"> 应付金额:</span>
      <div class="right">
        <!-- <div class="old">
          <span class="account">{{ allCount }}</span>
          <span>元</span>
        </div> -->
        <span class="account new_count">{{ payCount }}</span>
        <span>元</span>
      </div>
    </div>
    <!-- 实得鸿币 -->
    <div class="pay_all_money">
      <span class="left"> 实得鸿币:</span>
      <div class="right">
        <div class="old">
          <span class="account">{{ payCount }}</span>
          <span>HB</span>
        </div>
        <span class="account new_count">{{ newHB }}</span>
        <span>HB</span>
      </div>
    </div>

    <!-- 立即付款 -->
    <div class="to_pay" @click="toPay">立即付款</div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "MenuPayH5",
  components: {},
  inject: ["checkCode", "getFinance", "checkCodeHandler", "onRecharge"],
  data() {
    return {
      payCountList: ["100", "200", "500", "1000"], // 可选充值金额列表
      currentCount: 0, // 默认选中的充值金额
      payPlatform: "ALIPAY", // 默认支付方式
      payCount: 0, // 应付金额
      payCount2: "", // 输入框的应付金额
      canPay: true, // 是否可以点击支付
      firstCount: 0, // 第一档 数量
      secondCount: 0, // 第二档 数量
      thirdCount: 0, // 第三档 数量
      fourthCount: 0, // 第四档 数量
      allCount: 0, // 本应付金额
      oldHB: 0, // 原得鸿币
      newHB: 0, // 应得鸿币
    };
  },
  computed: {
    ...mapState([
      "userInfo",
      "finance",
      "query",
      "isWeChat",
      "CONFIG",
      "appid",
    ]),
  },
  watch: {
    // 第一档 100
    firstCount(firstCountNew) {
      this.checkInput(0);
      this.computeMoney();
    },
    // 第二档 200
    secondCount(secondCountNew) {
      this.checkInput(1);
      this.computeMoney();
    },
    // 第三档 500
    thirdCount(thirdCountNew) {
      this.checkInput(2);
      this.computeMoney();
    },
    // 第四档 1000
    fourthCount(fourthCountNew) {
      this.checkInput(3);
      this.computeMoney();
    },
  },
  created() {},
  mounted() {
    // 默认选中第一栏
    this.add(0);
  },
  methods: {
    ...mapActions(["isPayAction"]),

    // ios中文输入
    compositionstartInput() {
      this.account = "";
    },

    // 选择充值金额
    onSelectCount(count, index) {
      this.currentCount = index;
      if (count) {
        this.payCount = count;
        this.payCount2 = "";
      }
    },

    // 显示哪个组件(工具函数)
    showInnerControl(name) {
      this.$emit("showInnerControl", name);
    },

    // 选中充值金额
    select(index) {
      switch (index) {
        // 100
        case 0:
          if (this.firstCount == 0) {
            this.firstCount++;
          }
          break;
        // 200
        case 1:
          if (this.secondCount == 0) {
            this.secondCount++;
          }
          break;
        // 500
        case 2:
          if (this.thirdCount == 0) {
            this.thirdCount++;
          }
          break;
        // 1000
        case 3:
          if (this.fourthCount == 0) {
            this.fourthCount++;
          }
          break;
      }
    },

    // 选择支付方式
    onSelectpayPlatform(payPlatform) {
      this.payPlatform = payPlatform;
    },

    // 自定义金额
    onConfirmCount() {
      if (!this.payCount2) {
        this.$toast.text("请输入正确的金额");
        return;
      }
      this.payCount2 = Math.ceil(parseFloat(this.payCount2 * 100)) / 100;
      this.payCount = this.payCount2;
    },

    //  充值鸿币 立即付款
    toPay() {
      // 查看金额是否为0
      const { payCount } = this;
      if (!payCount) {
        this.$toast.text("请选择充值金额");
        return;
      }

      if (!this.canPay) {
        return;
      }
      this.canPay = false;
      this.payFun();
    },

    // 支付接口
    payFun(extra) {
      const { payPlatform, payCount } = this;
      const { appid } = this;
      const payType = this.$utils.payType(payPlatform).h5;

      this.onRecharge({
        amount: payCount * 100,
        goods_name: `${payCount}元`,
        pay_type: payType,
        pay_platform: payPlatform,
        extra,
      }).then((res) => {
        this.canPay = true;
        this.back();
      });

      return;
      this.$api
        .recharge({
          amount: payCount * 100,
          goods_name: `${payCount}元`,
          app_id: appid,
          pay_type: payType,
          pay_platform: payPlatform,
          return_url: window.location.href,
          extra,
        })
        .then((res) => {
          this.canPay = true;
          this.checkCodeHandler(res);
          const { data, code } = res.data;
          // 错误
          if (code) {
            return;
          }

          // 成功
          // 刷新鸿币
          const time = new Date().getTime();
          const orderItem = {
            order_id: data.order_id,
            time,
          };
          let orderList = JSON.parse(localStorage.getItem("orderList")) || [];
          orderList.push(orderItem);
          localStorage.setItem("orderList", JSON.stringify(orderList));

          window.location.href = data.url;
          this.back();
        });
    },

    // 返回
    back() {
      this.showInnerControl("");
    },

    /**
     * 第几档 减
     * @param index 档位下标
     */
    reduce(index) {
      switch (index) {
        // 100
        case 0:
          if (this.firstCount == 0) {
            return;
          }
          this.firstCount--;
          break;

        // 200
        case 1:
          if (this.secondCount == 0) {
            return;
          }
          this.secondCount--;
          break;
        // 500
        case 2:
          if (this.thirdCount == 0) {
            return;
          }
          this.thirdCount--;
          break;
        // 1000
        case 3:
          if (this.fourthCount == 0) {
            return;
          }
          this.fourthCount--;
          break;
      }
    },

    /**
     * 第几档 加
     * @param index 档位下标
     */
    add(index) {
      switch (index) {
        // 100
        case 0:
          this.firstCount++;
          break;
        // 200
        case 1:
          this.secondCount++;
          break;
        // 500
        case 2:
          this.thirdCount++;
          break;
        // 1000
        case 3:
          this.fourthCount++;
          break;
      }
    },

    // 第几档 校验
    checkInput(index) {
      switch (index) {
        // 100
        case 0:
          if (this.firstCount === "") {
            this.firstCount = 0;
            return;
          }
          this.firstCount = parseInt(this.firstCount);
          break;
        // 200
        case 1:
          if (this.secondCount === "") {
            this.secondCount = 0;
            return;
          }
          this.secondCount = parseInt(this.secondCount);

          break;
        // 500
        case 2:
          if (this.thirdCount === "") {
            this.thirdCount = 0;
            return;
          }
          this.thirdCount = parseInt(this.thirdCount);
          break;
        // 1000
        case 3:
          if (this.fourthCount === "") {
            this.fourthCount = 0;
            return;
          }
          this.fourthCount = parseInt(this.fourthCount);
          break;
      }
    },

    // 计算总额
    computeMoney() {
      const { firstCount, secondCount, thirdCount, fourthCount, payCountList } =
        this;
      this.payCount =
        payCountList[0] * firstCount +
        payCountList[1] * secondCount +
        payCountList[2] * thirdCount +
        payCountList[3] * fourthCount;
      // 计算折后金额
      this.discount(this.payCount);
    },

    /**
     * 获取折扣
     * @param payCount 应付金额
     */
    discount(payCount) {
      let rate = 1;
      switch (true) {
        case payCount > 3000: // > 3000 9折
          rate = 1.1;
          break;
        case payCount == 3000: //  3000 92折
          rate = 1.08;
          break;
        case payCount >= 2000: // >= 2000 94折
          rate = 1.06;
          break;
        case payCount >= 1500: // >= 1500 95折
          rate = 1.05;
          break;
        case payCount >= 1000: // >= 1000 96折
          rate = 1.04;
          break;
        case payCount >= 500: // >= 500 97折
          rate = 1.03;
          break;
        case payCount >= 200: // >= 200 98折
          rate = 1.02;
          break;
        case payCount >= 100: // >= 100 99折
          rate = 1.01;
          break;
      }
      this.newHB = Math.floor(payCount * rate);
    },
  },
};
</script>

<style lang='less' scoped>
.menu_pay_h5 {
  .pay_account,
  .pay_money,
  .pay_type,
  .pay_all_money {
    font-size: 32 / @rem;
    overflow: hidden;

    .left,
    .right {
      float: left;
    }

    .left {
      width: 25%;
      text-align: right;
      color: #9d9d9d;
    }

    .right {
      width: 75%;
      padding-left: 20 / @rem;
      box-sizing: border-box;
      text-align: left;
    }
  }

  .active {
    border: 2px solid #3faeed !important;
  }

  .pay_account {
    height: 70 / @rem;
    line-height: 70 / @rem;
    margin-top: 20 / @rem;
    border-top: 1px solid #e6e6e6;

    .money {
      color: #9d9d9d;
    }
  }

  .pay_money {
    line-height: 60 / @rem;

    li {
      width: 47%;
      float: left;
      text-align: center;
    }

    .default {
      margin-right: 2%;
      border-radius: 8 / @rem;
      border: 2px solid #e2e2e2;
      margin-bottom: 10 / @rem;
    }

    .count {
      .reduce,
      input,
      .add {
        width: 33%;
        height: 70 / @rem;
        line-height: 70 / @rem;
        float: left;
        border: 2px solid #e2e2e2;
        box-sizing: border-box;
        font-size: 30 / @rem;
      }

      input {
        text-align: center;
      }

      .reduce {
        border-right: 0;
        border-radius: 5px 0 0 5px;
      }

      .add {
        border-left: 0;
        border-radius: 0 5px 5px 0;
      }
    }

    // .count_input {
    //   width: 60%;
    //   display: flex;
    //   border: 2px solid #e2e2e2;
    //   border-radius: 8 / @rem;
    //   overflow: hidden;

    //   input,
    //   .confirm {
    //     width: 50%;
    //     float: left;
    //     color: #555555;
    //   }

    //   input {
    //     padding: 0 10 / @rem;
    //     box-sizing: border-box;
    //     font-size: 30 / @rem;
    //   }
    //   .confirm {
    //     color: #fff;
    //     background-color: #3faeed;
    //   }
    // }
  }

  .pay_type {
    line-height: 70 / @rem;

    .alipay,
    .wxpay {
      padding: 0 30 / @rem;
      float: left;
      text-align: center;
      border: 2px solid #e2e2e2;
      box-sizing: border-box;
      border-radius: 8 / @rem;

      img {
        width: 52 / @rem;
        margin-top: 8 / @rem;
        float: left;
      }

      i,
      span {
        float: left;
      }
    }

    i {
      margin-right: 10 / @rem;
      width: 52 / @rem;
      height: 52 / @rem;
      margin-top: 9 / @rem;
    }

    .alipay {
      i {
        background: url("../../../assets/image/alipay.png") no-repeat;
      }
    }
    .wxpay {
      margin-left: 70 / @rem;
      i {
        background: url("../../../assets/image/wxpay.png") no-repeat;
      }
    }
  }

  .pay_all_money {
    line-height: 70 / @rem;

    .right {
      .account {
      }
      .new_count {
        color: #3faeed;
      }
    }

    .old {
      position: relative;
      float: left;
      margin-right: 20 / @rem;

      &::after {
        content: "";
        display: block;
        width: 110%;
        height: 2 / @rem;
        position: absolute;
        top: 50%;
        left: -5%;
        background-color: #ca0000;
      }
    }
  }

  .to_pay {
    width: 60%;
    line-height: 70 / @rem;
    margin: 0 auto;
    background-color: #3faeed;
    color: #fff;
    border-radius: 8 / @rem;
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/only screen and (min-device-width: 768px) and (min-device-height: 768px) and (orientation: portrait) {
  .menu_pay_h5 {
    width: 100%;
    height: 200 / @rem;
    overflow-y: auto;

    .pay_account,
    .pay_money,
    .pay_type,
    .pay_all_money {
      font-size: 16 / @rem;

      .right {
        padding-left: 10 / @rem;
      }
    }

    .pay_account {
      height: 35 / @rem;
      line-height: 35 / @rem;
      margin-top: 10 / @rem;

      .money {
        color: #9d9d9d;
      }
    }

    .pay_money {
      line-height: 30 / @rem;

      li {
        width: 48%;
      }

      .default {
        margin-right: 1%;
        border-radius: 4 / @rem;
        margin-bottom: 10 / @rem;
      }

      .count {
        .reduce,
        input,
        .add {
          height: 35 / @rem;
          line-height: 35 / @rem;
          font-size: 15 / @rem;
        }
      }
      //   .count_input {
      //     border-radius: 4 / @rem;

      //     input {
      //       padding: 0 5 / @rem;
      //       font-size: 16 / @rem;
      //     }
      //   }
    }

    .pay_type {
      line-height: 35 / @rem;

      .alipay,
      .wxpay {
        padding: 0 10 / @rem;
        border-radius: 4 / @rem;
        img {
          width: 25 / @rem;
          margin-top: 4.5 / @rem;
          margin-left: 5 / @rem;
          margin-right: 5 / @rem;
        }
      }

      .wxpay {
        margin-left: 10 / @rem;
      }

      i {
        width: 32 / @rem;
        height: 32 / @rem;
        margin-top: 3 / @rem;
        margin-right: 5 / @rem;
      }
    }

    .pay_all_money {
      line-height: 35 / @rem;
    }

    .to_pay {
      line-height: 35 / @rem;
      margin: 10 / @rem auto;
      border-radius: 4 / @rem;
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .menu_pay_h5 {
    height: 260 / @rem;
  }
}
</style>