zc_saas_h5/pages2/order/confirm_pay.vue

<template>
  <view>
    <nav-bar title="订单支付"></nav-bar>
    <view>
      <view>
        <view class="box2">
          <view class="title2">支付信息</view>
          <!-- <view style="padding:10rpx 30rpx;" v-for="(item,index) in shoppingCartList" :key="index">
						<view class="list_title">
							<view class="txt_left">商品名称</view>
							<view class="txt_right">{{item.goodsName}}</view>
						</view>
						<view class="list_item">
							<view class="txt_left">应付金额</view>
							<view class="txt_right_price">¥ {{item.standPrice}}</view>
						</view>
					</view> -->
          <view
            v-for="(item, index) in shoppingCartList"
            :key="index"
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 32rpx;
            "
          >
            <image
              :src="$method.splitImgHost(item.coverUrl)"
              style="height: 120rpx; width: 204rpx; border-radius: 16rpx"
            ></image>
            <view class="right_con" style="margin-left: 20rpx">
              <view style="color: #333333; font-size: 30rpx; font-weight: bold">
                {{ item.goodsName }}
              </view>
              <view class="priceTag"> ¥ {{ item.standPrice }} </view>
              <Class-time-tip
                v-if="item.gradObj && item.gradObj.gradeId"
                :classInfo="item.gradObj"
              ></Class-time-tip>
            </view>
          </view>

          <view class="info_right">
            <!-- <u-line color="#D6D6DB" /> -->
            <view class="list_item">
              <view class="txt_left">应付总金额</view>
              <view class="txt_right_price">¥ {{ totalPrice }}</view>
            </view>
          </view>
        </view>
        <view class="box3">
          <view class="title2">支付方式</view>

          <view>
            <u-radio-group v-model="value" @change="radioGroupChange">
              <view class="list_item">
                <view class="txt_left_pay"
                  ><image src="/static/wepay.png" class="pay_icon"></image
                  >微信支付</view
                >
                <view
                  ><u-radio @change="radioChange" name="wepay"></u-radio
                ></view>
              </view>
              <view class="list_item" v-if="false">
                <view class="txt_left_pay"
                  ><image src="/static/unipay.png" class="pay_icon"></image
                  >云闪付</view
                >
                <view
                  ><u-radio @change="radioChange" name="unipay"></u-radio
                ></view>
              </view>
            </u-radio-group>
          </view>
          <u-line color="#D6D6DB" />
        </view>
      </view>
    </view>
    <view class="bottomBox safeArea">
      <view class="sums">
        <text class="all_sum">总金额：</text>
        <text class="priceTag">¥ {{ totalPrice }}</text>
      </view>

      <view style="display: flex; color: #ffffff; align-items: center">
        <!-- <view class="btn2" @click="pay()">确认支付</view> -->
        <button class="btn2" @click="pay()" :disabled="btnNo">确认支付</button>
      </view>
    </view>
    <!-- <button class="bottomBtn" @click="pay()" :disabled="btnNo">确认支付</button> -->

    <u-modal
      v-model="showModal"
      :confirm-text="confirmText"
      cancel-text="知道了"
      cancel-color="#666666"
      confirm-color="rgba(0, 122, 255, 1);"
      :show-confirm-button="showConfirmButton"
      :show-cancel-button="true"
      :content="modalMsg"
      @cancel="modalCancel()"
      @confirm="modalConfirm()"
      ref="uModal"
    ></u-modal>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { getQueryString } from "../../common/navTo";
import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
export default {
  data() {
    return {
      showModal: false,
      modalMsg: "",
      list: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
      ],
      array: [
        "全部",
        "建设工程施工管理",
        "机电全科",
        "机电工程管理与实",
        "机电全科",
        "全科",
      ],
      current: 0,
      menuIndex: 0,
      value: "wepay",
      btnNo: false,
      isBK: "",
      fromCart: "",
      hasPaying: false,
      showConfirmButton: false,
      confirmText: "",
      options: {},
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    this.fromCart = option.fromCart;
    this.isBK = option.isBK;
    this.options = option;
  },
  onShow() {
    // #ifdef H5
    this.authorize();
    // #endif
  },
  methods: {
    authorize() {
      if (location.search.includes("code")) {
        const code = getQueryString("code");
        this.$store.commit("setShoppingCartList", {
          shoppingCartList: uni.getStorageSync("shopList"),
        });
        uni.setStorageSync("h5_code", code);
        this.OfficialLogin(code);
      } else {
        // 没有code,就重定向到地址https://www.xyyxt.net?ask_type=https://api.xyyxt.net/pages2/order/confirm_pay 去获取code，授权后就会把code带上然后访问域名
        // ?fromCart=&code=061F5a1w3aolh03SLe1w3sMsCF4F5a16&state=STATE
        this.$api.checkBindGzh().then((res) => {
          if (!res.data.data && process.env.NODE_ENV !== "development") {
            uni.setStorageSync("shopList", this.shoppingCartList);
            const url = window.location.host + "/pages2/order/confirm_pay";
            // 跳自己授权
            if (this.config.gzhSelfLicense) {
              this.$api.getWxConfig().then((res) => {
                location.replace(
                  `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${
                    res.data.data.gzhAppId
                  }&redirect_uri=${encodeURIComponent(
                    "https://" + url
                  )}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
                );
              });
            } else {
              location.replace("https://www.xyyxt.net/?ask_type=" + url);
            }
          }
        });
      }
    },
    OfficialLogin(code) {
      this.$api
        .OfficialLogin({
          code,
        })
        .then((res) => {
          if (res.data.code !== 200) {
            this.$u.toast(res.data.msg);
          }
        });
    },
    postOrder() {
      let list = this.shoppingCartList;
      for (let i = 0; i < list.length; i++) {
        let item = list[i];
        if (item.goodsType == 1) {
          if (item.templateType == "class") {
            delete item.gradObj.goodsList;
            let goodsInputData = {
              type: "class",
              gradeId: item.gradObj.gradeId,
              gradeJson: JSON.stringify(item.gradObj),
            };
            item.goodsInputData = goodsInputData;
          }
          if (item.templateType == "apply") {
            let goodsInputData = {
              type: "apply",
              applyAreasJson: JSON.stringify(item.applyAreas),
              examDateJson: JSON.stringify(item.examDate),
            };
            item.goodsInputData = goodsInputData;
          }
        }
        if (this.options.distributionCode) {
          item.distributionLinkCode = this.options.linkCode;
          item.distributionCode = this.options.distributionCode;
        }
      }
      let data = { goodsList: list };
      // 邀请码
      if (this.sac) {
        data["shareActivityCode"] = this.sac;
      }

      // #ifdef MP-WEIXIN
      this.$api.placeSmallOrder(data).then((res) => {
        this.orderResult(res);
      });
      // #endif

      // #ifdef H5
      data["url"] = location.href;
      this.$api.placeGzhOrder(data).then((res) => {
        console.log(res, "h5支付res");
        this.orderResult(res);
      });
      // #endif
    },
    orderResult(res) {
      if (res.data.code == 200) {
        uni.setStorageSync("updateCart", 1); //提醒刷新购物车
        if (this.totalPrice == 0) {
          //免费商品
          uni.redirectTo({
            url: `/pages2/order/confirm_success?sn=${res.data.data.orderSn}&isBk=${this.isBK}`,
          });
        } else {
          let data = res.data.data;
          uni.showLoading({
            title: "支付中",
            mask: true,
          });
          // #ifdef MP-WEIXIN
          uni.requestPayment({
            provider: data.provider,
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.sign,
            timeStamp: String(data.timeStamp),
            success: (res) => {
              uni.hideLoading();
              this.btnNo = false;
              uni.redirectTo({
                url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${this.isBK}`,
              });
              console.log("success:" + JSON.stringify(res));
            },
            fail: (err) => {
              uni.hideLoading();
              this.btnNo = false;
              console.log("fail:" + JSON.stringify(err));
            },
          });
          // #endif

          // #ifdef H5
          this.h5_wxpay(data);
          // #endif
        }
      } else if (res.data.code == 510) {
        //有未支付订单
        this.hasPaying = true;
        this.btnNo = false;
        this.modalMsg = res.data.msg;
        this.showConfirmButton = true;
        this.confirmText = "跳转到【我的订单】\n查看未支付订单";
        this.showModal = true;
      } else if (res.data.code == 511) {
        //511 重复购买
        this.hasPaying = false;
        this.btnNo = false;
        this.modalMsg = res.data.msg;
        this.showConfirmButton = true;
        this.showModal = true;

        if (this.fromCart) {
          console.log(this.fromCart);
          this.confirmText = "返回购物车";
        } else {
          let type = "";
          if (this.shoppingCartList.length == 1) {
            type = this.shoppingCartList[0].goodsType;
          } else {
            type = this.shoppingCartList[0].goodsType;

            if (this.shoppingCartList.find((item) => item.goodsType != type)) {
              type = 3;
            }
          }
          this.confirmText =
            type == 1 || type == 6
              ? "继续选课"
              : type == 2
              ? "继续选题"
              : type == 3
              ? "继续选购"
              : "";
        }
      } else {
        this.hasPaying = false;
        this.btnNo = false;
        this.showConfirmButton = false;
        this.modalMsg = res.data.msg;
        this.showModal = true;
      }
    },
    h5_wxpay(data) {
      console.log("====调起支付状态", data);
      let self = this;
      function onBridgeReady() {
        // 加载框
        WeixinJSBridge.invoke(
          "getBrandWCPayRequest",
          {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.package,
            signType: data.signType, // 微信签名方式：
            paySign: data.paySign, // 微信签名
          },
          function (res) {
            // 判断支付状态
            console.log("支付状态", res, "this:", this, self);
            if (res.err_msg === "get_brand_wcpay_request:ok") {
              self.$u.toast("支付成功");
              uni.hideLoading();
              self.btnNo = false;
              uni.redirectTo({
                url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${self.isBK}`,
              });
            } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
              self.$u.toast("取消支付");
            } else {
              uni.hideLoading();
              self.btnNo = false;
              self.$u.toast("支付失败");
            }
          }
        );
      }
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            onBridgeReady,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
          document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
        }
      } else {
        onBridgeReady();
      }
    },
    modalCancel() {
      this.showModal = false;
    },
    modalConfirm() {
      if (this.hasPaying) {
        uni.navigateTo({
          url: "/pages2/order/index?current=0",
        });
      } else {
        if (this.fromCart) {
          uni.navigateTo({
            url: "/pages4/shopping/shoppingCart",
          });
        } else {
          uni.switchTab({
            url: "/pages/course/index",
          });
        }
      }
    },
    getOpenid(code) {
      let self = this;
      this.$api.wxOpenid({ code: code }).then((res) => {
        if (res.data.code == 200) {
          self.postOrder();
        }
      });
    },
    pay() {
      let self = this;
      this.btnNo = true;
      // #ifdef MP-WEIXIN
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          console.log(loginRes, 69);
          self.getOpenid(loginRes.code);
        },
      });
      // #endif

      // #ifdef H5
      // 在首页已经请求过接口/gzh_login 提交code了
      this.postOrder();
      // #endif
    },
    radioChange(e) {
      // console.log(e);
    },
    // 选中任一radio时，由radio-group触发
    radioGroupChange(e) {
      // console.log(e);
    },
    cMenu(index) {
      this.menuIndex = index;
    },
    change(index) {
      this.current = index;
    },
  },
  onReachBottom() {},
  computed: {
    ...mapGetters(["userInfo", "shoppingCartList", "sac", "config"]),
    totalPrice() {
      return this.shoppingCartList.reduce(
        (a, b) => a + Number(b.standPrice),
        0
      );
    },
  },
  components: { ClassTimeTip },
};
</script>
<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style lang="scss" scoped>
.txt_left_pay {
  display: flex;
  align-items: center;
  height: 64rpx;
  font-size: 24rpx;
  color: #666666;
}
.pay_icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 10rpx;
}
.box3 {
  width: 100%;
  height: 886rpx;
  background: #ffffff;
  // border-radius: 16rpx;
  margin-top: 16rpx;
  padding: 32rpx 32rpx 0rpx 32rpx;
}
.tip {
  font-size: 24rpx;
  color: #999999;
  height: 40rpx;
  line-height: 40rpx;
}
.txt_right_sn {
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}
.txt_right_price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff2d55;
}
.txt_left {
  font-size: 28rpx;
  color: #666666;
}
.txt_right {
  text-align: right;
  color: #333333;
  font-weight: bold;
  width: 75%;
}
.list_title {
  display: flex;
  justify-content: space-between;
}
.list_item {
  display: flex;
  justify-content: space-between;
  height: 110rpx;
  align-items: center;
}
.title2 {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  // height: 80rpx;
  // line-height: 80rpx;
  // margin-left: 30rpx;
  margin-bottom: 32rpx;
}
.box2 {
  width: 100%;
  background: #ffffff;
  // border-radius: 16rpx;
  padding: 32rpx 32rpx 0rpx 32rpx;
  .right_con {
    width: 450rpx;
  }
  .priceTag {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fc3f3f;
    margin-top: 6rpx;
    margin-bottom: 10rpx;
  }
  .info_right {
    height: 110rpx;
    line-height: 110rpx;
    border-top: 1rpx solid #f2f2f2;
  }
}
.box1_t2 {
  font-size: 24rpx;
  color: #999999;
  text-align: center;
}
.box1_t1 {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box1 {
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  border-radius: 16rpx;
}
.bottomBtn {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  background: linear-gradient(0deg, #015eea, #00c0fa);
  color: #ffffff;
  text-align: center;
  line-height: 98rpx;
  font-weight: bold;
  font-size: 30rpx;
  border-radius: 0;
}
.bottomBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 132rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: unset;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
  > view {
    margin: 0 30rpx;
  }
  .sums {
    display: flex;
  }
  .all_sum {
    font-size: 28rpx;
    font-weight: 500;
    color: #303030;
  }
  .priceTag {
    font-size: 32rpx;
    font-weight: 800;
    color: #fc3f3f;
  }
  .btn2 {
    width: 232rpx;
    height: 92rpx;
    background: #fc3f3f;
    border-radius: 120rpx;
    text-align: center;
    line-height: 92rpx;
    color: #fff;
  }
}
</style>