yizhizan-h5/my/wallet/index.vue

<template>
  <view class="page-box">
    <navBar title="钻石充值" color="#000" />
    <view class="page-content">
      <view class="padding">
        <view class="radius bg padding">
          <view>充值钻石</view>
          <view
            class="padding-tb-xs"
            style="border-bottom: 1rpx solid rgba(0, 221, 154, 0.1)"
          >
            <u-input
              v-model="money"
              type="number"
              placeholder="0钻石"
              placeholder-style="color:#000;"
              inputAlign="text-align:left"
              @input="input"
            />
          </view>
        </view>
        <view
          class="margin-top radius bg flex justify-between flex-wrap padding-lr padding-bottom"
        >
          <view
            v-for="(item, index) in wallet"
            :key="index"
            class="flex padding-sm radius margin-top justify-center"
            style="background:  #016bf60f; color: #016bf6; width: 48%"
            @click="active(item, index)"
            :class="tabIndex == index ? 'active' : ''"
          >
            <view style="font-size: 34upx" class="flex align-center">
              <!-- <text style="font-size: 22upx;margin-right: 5upx;"></text> -->
              <image
                src="../static/jifenss.png"
                style="width: 32upx; height: 34upx; margin-right: 5upx"
              >
              </image>
              {{ item.price }}
            </view>
          </view>
        </view>

        <view class="bg margin-top padding-lr radius">
          <view>
            <view
              style="display: flex; height: 100upx; align-items: center; padding: 20upx 0"
              v-for="(item, index) in openLists"
              :key="index"
            >
              <image
                :src="item.image"
                style="width: 55upx; height: 55upx; border-radius: 50upx"
              ></image>
              <view style="font-size: 30upx; margin-left: 20upx; width: 70%"
                >{{ item.text }}
              </view>
              <radio-group
                name="openWay"
                style="margin-left: 20upx"
                @tap="selectWay(item)"
              >
                <label class="tui-radio">
                  <radio color="#016BF6" :checked="openWay === item.id ? true : false" />
                </label>
              </radio-group>
            </view>
          </view>
        </view>
        <view class="btn" @click="pay">确认支付</view>
        <view class="" style="margin-top: 20rpx">
          如需开具发票请<span style="color: red; padding-left: 5rpx" @click="goChat"
            >联系客服</span
          >！
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav-bar/index.vue";

export default {
  data() {
    return {
      openLists: [],
      openWay: 1,
      wallet: [],
      tabIndex: -1,
      money: "",
      placeholder: "",
    };
  },
  components: {
    navBar,
  },
  onLoad() {
    this.getwalletList(); //获取充值列表
    // #ifdef APP-PLUS
    this.openLists = [
      {
        image: "../../static/images/my/zhifubao.png",
        text: "支付宝",
        id: 1,
      },
      {
        image: "../../static/images/my/icon_weixin.png",
        text: "微信",
        id: 2,
      },
    ];
    this.openWay = 1;
    // #endif

    // #ifdef MP-WEIXIN
    this.openLists = [
      {
        image: "../../static/share/icon_weixin.png",
        text: "微信",
        id: 2,
      },
    ];
    this.openWay = 2;
    // #endif

    // #ifdef H5
    let ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("micromessenger") !== -1) {
      this.openLists = [
        {
          image: "../../static/images/my/zhifubao.png",
          text: "支付宝",
          id: 1,
        },
        {
          image: "../../static/share/icon_weixin.png",
          text: "微信",
          id: 2,
        },
      ];
    } else {
      this.openLists = [
        {
          image: "../../static/images/my/zhifubao.png",
          text: "支付宝",
          id: 1,
        },
      ];
    }

    this.openWay = 1;
    // #endif
  },
  onShow() {
    this.getCharge();
    this.getMinMoney();
    this.getMaxMoney();
    this.getRatio();
  },
  methods: {
    goChat() {
      let that = this;
      if (uni.getStorageSync("userType") == 1) {
        //用户端
        // #ifdef MP-WEIXIN
        wx.openCustomerServiceChat({
          extInfo: {
            url: that.$queue.getData("kefu"),
          },
          corpId: that.$queue.getData("kefuAppid"),
          success(res) {
            console.log(res);
          },
        });
        // #endif
        // #ifdef H5
        window.location.href = that.$queue.getData("kefu");
        // #endif
        // #ifdef APP
        let kefu = that.$queue.getData("kefu");
        console.log(kefu);
        plus.runtime.openURL(kefu, function (res) {});
        // #endif
      } else {
        //企业端
        // #ifdef MP-WEIXIN
        wx.openCustomerServiceChat({
          extInfo: {
            url: that.$queue.getData("kefuq"),
          },
          corpId: that.$queue.getData("kefuAppidq"),
          success(res) {
            console.log(res);
          },
        });
        // #endif
        // #ifdef H5
        window.location.href = that.$queue.getData("kefuq");
        // #endif
        // #ifdef APP
        let kefu = that.$queue.getData("kefuq");
        console.log(kefu);
        plus.runtime.openURL(kefu, function (res) {});
        // #endif
      }
    },
    input(e) {
      console.log(e);
      this.tabIndex = -1;
      this.money = e;
    },
    //获取充值列表
    getwalletList() {
      this.$Request.get("/app/payClassify/selectPayClassifyList").then((res) => {
        if (res.code == 0) {
          this.wallet = res.data;
        }
      });
    },

    // 提现手续费
    getCharge() {
      this.$Request.get("/app/common/type/152").then((res) => {
        if (res.code == 0) {
          this.charge = res.data.value;
          this.placeholder =
            "服务费:" +
            this.charge * 100 +
            "%" +
            ",最低提现:" +
            this.minMoney * 1 +
            ",最高提现:" +
            this.maxMoney * 1;
        }
      });
    },
    // 最低提现额度
    getMinMoney() {
      this.$Request.get("/app/common/type/112").then((res) => {
        if (res.code == 0) {
          this.minMoney = res.data.value;
          this.placeholder =
            "服务费:" +
            this.charge * 100 +
            "%" +
            ",最低提现:" +
            this.minMoney * 1 +
            ",最高提现:" +
            this.maxMoney * 1;
        }
      });
    },
    // 最高提现额度
    getMaxMoney() {
      this.$Request.get("/app/common/type/153").then((res) => {
        if (res.code == 0) {
          this.maxMoney = res.data.value;
          this.placeholder =
            "服务费:" +
            this.charge * 100 +
            "%" +
            ",最低提现:" +
            this.minMoney * 1 +
            ",最高提现:" +
            this.maxMoney * 1;
        }
      });
    },
    // 金元比例
    getRatio() {
      this.$Request.get("/app/common/type/154").then((res) => {
        if (res.code == 0) {
          this.ratio = res.data.value;
          this.placeholder =
            "服务费:" +
            this.charge * 100 +
            "%" +
            ",最低提现:" +
            this.minMoney * 1 +
            ",最高提现:" +
            this.maxMoney * 1;
          this.wallet.forEach((re) => {
            re.num = re.price * res.data.value;
          });
        }
      });
    },
    cut(e) {
      this.title_color = e;
    },
    goNav(url) {
      uni.navigateTo({
        url,
      });
    },
    active(e, index) {
      this.tabIndex = index;
      this.money = e.price;
    },

    selectWay: function (item) {
      this.openWay = item.id;
    },

    pay() {
      if (!this.money) {
        uni.showToast({
          title: "请选择或输入充值的金额",
          icon: "none",
        });
        return;
      }
      if (this.openWay == 2) {
        // #ifdef APP-PLUS
        // 微信APP支付 根据订单id获取支付信息
        this.$Request
          .post("/app/wxPay/wxPayOrder", {
            classify: 1,
            money: this.money,
            type: 1,
          })
          .then((ret) => {
            this.isCheckPay(ret.code, "wxpay", JSON.stringify(ret.data));
          });
        // #endif

        // #ifdef MP-WEIXIN
        // 微信小程序支付
        this.$Request
          .post("/app/wxPay/wxPayOrder", {
            classify: 3,
            money: this.money,
            type: 1,
          })
          .then((ret) => {
            uni.hideLoading();
            console.log(ret.data);
            uni.requestPayment({
              provider: "wxpay",
              timeStamp: ret.data.timestamp,
              nonceStr: ret.data.noncestr,
              package: ret.data.package,
              signType: ret.data.signType,
              paySign: ret.data.sign,
              success: function (suc) {
                console.log("success:" + JSON.stringify(suc));
                uni.showToast({
                  title: "支付成功",
                  icon: "success",
                });
                setTimeout((d) => {
                  uni.navigateBack(1);
                }, 1000);
              },
              fail: function (err) {
                console.log("fail:" + JSON.stringify(err));
                uni.showToast({
                  title: "支付失败",
                  icon: "none",
                });
              },
            });
          });
        // #endif

        // #ifdef H5
        let ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("micromessenger") !== -1) {
          let data = {
            classify: 2,
            money: this.money,
            type: 1,
          };
          this.$Request.post("/app/wxPay/wxPayOrder", data).then((res) => {
            if (res.code == 0) {
              this.callPay(res.data);
            } else {
              uni.showToast({
                icon: "none",
                title: "支付失败!",
              });
            }
          });
        }
        // #endif
      } else {
        // APP支付宝支付
        // #ifdef APP
        this.$Request
          .post("/app/aliPay/payMoneyOrder", {
            classify: 4,
            money: this.money,
            type: 1,
          })
          .then((ret) => {
            console.log(ret);
            this.isCheckPay(ret.code, "alipay", ret.data);
          });
        // #endif
        // #ifdef H5
        let data = {
          classify: 5,
          money: this.money,
          type: 1,
        };
        this.$Request.post("/app/aliPay/payMoneyOrder", data).then((res) => {
          if (res.code === 0) {
            const div = document.createElement("div");
            div.innerHTML = res.data; //此处form就是后台返回接收到的数据
            document.body.appendChild(div);
            document.forms[0].submit();
          } else {
            uni.showToast({
              icon: "none",
              title: "支付失败!",
            });
          }
        });
        // #endif
      }
    },
    callPay: function (response) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            this.onBridgeReady(response),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(response));
          document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(response));
        }
      } else {
        this.onBridgeReady(response);
      }
    },
    onBridgeReady: function (response) {
      let that = this;
      if (!response.package) {
        return;
      }
      console.log(response, "++++++++");
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: response.appid, //公众号名称，由商户传入
          timeStamp: response.timestamp, //时间戳，自1970年以来的秒数
          nonceStr: response.noncestr, //随机串
          package: response.package,
          signType: response.signType, //微信签名方式：
          paySign: response.sign, //微信签名
        },
        function (res) {
          console.log(res, "/*-/*-/*-");
          if (res.err_msg === "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            uni.showLoading({
              title: "支付成功",
            });
            setTimeout(function () {
              uni.hideLoading();
              uni.navigateBack(1);
            }, 1000);
          } else {
            uni.hideLoading();
          }
          WeixinJSBridge.log(response.err_msg);
        }
      );
    },
    isCheckPay(status, name, order) {
      if (status == 0) {
        this.setPayment(name, order);
      } else {
        uni.hideLoading();
        uni.showToast({
          title: "支付信息有误",
          icon: "none",
        });
      }
    },
    setPayment(name, order) {
      console.log("*-*-*");
      uni.requestPayment({
        provider: name,
        orderInfo: order, //微信、支付宝订单数据
        success: function (res) {
          console.log(res);
          uni.hideLoading();
          uni.showLoading({
            title: "支付成功",
          });
          uni.navigateBack(1);
        },
        fail: function (err) {
          console.log(err);
          uni.hideLoading();
        },
        complete() {
          uni.hideLoading();
        },
      });
    },
    // 提现
    cashMoney() {
      if (!this.moneyNum) {
        uni.showToast({
          icon: "none",
          title: "请输入提现金额",
        });
        return;
      }
      if (this.moneyNum > this.money * 1) {
        uni.showToast({
          icon: "none",
          title: "您的余额不足",
        });
        return;
      }
      // if (this.moneyNum*1+this.charge*this.moneyNum > this.money*1) {
      // 	uni.showToast({
      // 		icon: 'none',
      // 		title: '您的手续费不足'
      // 	})
      // 	return
      // }

      let zhiFuBao = uni.getStorageSync("zhiFuBao");
      let zhiFuBaoName = uni.getStorageSync("zhiFuBaoName");

      if (!zhiFuBao && !zhiFuBaoName) {
        uni.navigateTo({
          url: "/my/wallet/zhifubao",
        });
        return;
      }

      let that = this;
      that.sp = (that.moneyNum * this.charge).toFixed(2);
      uni.showModal({
        title: "提示",
        content:
          "本次提现" + that.moneyNum + "元，服务费" + this.sp + "元，是否确认提现？",
        success: function (res) {
          if (res.confirm) {
            that.$Request
              .get("/app/cash/cashMoney", {
                money: that.moneyNum,
              })
              .then((res) => {
                if (res.code == 0) {
                  uni.showToast({
                    icon: "none",
                    title: res.msg,
                  });
                  that.moneyNum = null;
                } else {
                  uni.showToast({
                    icon: "none",
                    title: res.msg,
                  });
                }
                that.getMoney();
              });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
}

.bg {
  background-color: #ffffff;
}

.active {
  border: 1px solid #016bf6 !important;
  /* color: #557EFD !important; */
  /* background: #016BF6 !important;
		color: #FFFFFF !important; */
}

.title_btn {
  height: 78upx;
  line-height: 78upx;
  /* background: #f7f7f7; */
}

.btn {
  width: 100%;
  height: 88upx;
  background: #016bf6;
  border-radius: 44upx;
  text-align: center;
  line-height: 88upx;
  margin-top: 40upx;
  font-size: 28upx;
  color: #fff;
}
</style>