zc_saas_h5/pages2/order/confirm_pay.vue

<template>
  <view>
    <nav-bar title="订单支付"></nav-bar>
    <view>
      <view style="padding: 8rpx">
        <view class="box2">
          <view class="title2">支付信息</view>
          <u-line color="#D6D6DB" />
          <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 style="padding: 10rpx 30rpx">
            <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>
          <u-line color="#D6D6DB" />
          <view style="padding: 20rpx 30rpx">
            <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>
        </view>
      </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";
export default {
  components: {},
  data() {
    return {
      showModal: false,
      modalMsg: "",
      list: [
        {
          name: "网课",
        },
        {
          name: "题库通",
        },
      ],
      array: [
        "全部",
        "建设工程施工管理",
        "机电全科",
        "机电工程管理与实",
        "机电全科",
        "全科",
      ],
      current: 0,
      menuIndex: 0,
      value: "wepay",
      btnNo: false,
      isBK: "",
      fromCart: "",
      hasPaying: false,
      showConfirmButton: false,
      totalPrice: 0,
      confirmText: "",
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    let self = this;
    this.fromCart = option.fromCart;
    console.log(self.shoppingCartList, 6);
    let list = self.shoppingCartList;
    this.isBK = option.isBK;
    for (let i = 0; i < list.length; i++) {
      this.totalPrice += Number(list[i].standPrice);
    }
    console.log(this.isBK == "1");
  },
  onShow() {},
  methods: {
    postOrder() {
      let self = this;
      let list = self.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;
          }
        }
      }
      let data = { goodsList: list };

      this.$api.placeSmallOrder(data).then((res) => {
        console.log(res, "res");
        if (res.data.code == 200) {
          uni.setStorageSync("updateCart", 1); //提醒刷新购物车
          if (this.totalPrice == 0) {
            //免费商品
            uni.redirectTo({
              url: `/pages2/order/confirm_success?sn=${res.data.orderSn}&isBk=${self.isBK}`,
            });
          } else {
            let data = res.data.data;
            uni.showLoading({
              title: "支付中",
              mask: true,
            });
            uni.requestPayment({
              provider: data.provider,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              paySign: data.sign,
              timeStamp: String(data.timeStamp),
              success: function (res) {
                uni.hideLoading();
                self.btnNo = false;
                uni.redirectTo({
                  url: `/pages2/order/confirm_success?sn=${data.orderSn}&isBk=${self.isBK}`,
                });
                console.log("success:" + JSON.stringify(res));
              },
              fail: function (err) {
                uni.hideLoading();
                self.btnNo = false;
                console.log("fail:" + JSON.stringify(err));
              },
            });
          }
        } else if (res.data.code == 510) {
          //有未支付订单
          self.hasPaying = true;
          self.btnNo = false;
          this.modalMsg = res.data.msg;
          this.showConfirmButton = true;
          this.confirmText = "跳转到【我的订单】\n查看未支付订单";
          this.showModal = true;
        } else if (res.data.code == 511) {
          //511 重复购买
          self.hasPaying = false;
          self.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 {
          self.hasPaying = false;
          self.btnNo = false;
          this.showConfirmButton = false;
          this.modalMsg = res.data.msg;
          this.showModal = true;
        }
      });
    },
    modalCancel() {
      this.showModal = false;
    },
    modalConfirm() {
      if (this.hasPaying) {
        uni.navigateTo({
          url: "/pages2/order/index?current=0",
        });
      } else {
        if (this.fromCart) {
          uni.switchTab({
            url: "/pages/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;
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          console.log(loginRes, 69);
          self.getOpenid(loginRes.code);
        },
      });

      //
    },
    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"]) },
};
</script>
<style >
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
page {
  background-color: #eaeef1;
}
</style>
<style 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%;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 16rpx;
}
.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: 30rpx;
  font-weight: bold;
  color: #ff2d55;
}
.txt_left {
  font-size: 24rpx;
  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: 80rpx;
  align-items: center;
}
.title2 {
  font-size: 30rpx;
  font-weight: bold;
  color: #333333;
  height: 80rpx;
  line-height: 80rpx;
  margin-left: 30rpx;
}
.box2 {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
}
.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;
}
</style>