jdt-user/src/components/Pay.vue

<template>
  <nut-popup
    position="bottom"
    closeable
    round
    safe-area-inset-bottom
    :close-on-click-overlay="false"
    :style="{ height: 'auto' }"
    :visible="isShowPay"
    @click-close-icon="closePay"
  >
    <view class="div">
      <view style="text-align: center">支付方式</view>
      <nut-cell-group>
        <nut-cell
          v-if="payType === 'wx'"
          title="微信支付"
          desc="使用微信快捷支付"
          is-link
          @click="goPay()"
        >
          <template v-slot:icon>
            <IconFont
              size="30"
              name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
            />
          </template>
        </nut-cell>
        <nut-cell
          v-if="payType === 'jf'"
          title="积分支付"
          :desc="`剩余积分:${info.integral || 0}`"
          is-link
          @click="goPay()"
        >
          <template v-slot:icon>
            <IconFont
              size="30"
              name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
            />
          </template>
        </nut-cell>
      </nut-cell-group>
    </view>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import { payOrder } from "@/api/order";
import { payJfOrder } from "@/api/goods";
import { getPersonalInfo } from "@/api/user";

const prop = defineProps({
  isShowPay: {
    required: true,
    type: Boolean,
    default: false,
  },
  payType: {
    required: true,
    type: String,
    default: "wx",
  },
  jfInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const emit = defineEmits(["closePay", "successPay"]);

const info = ref<{ integral?: any }>({});

watch(
  () => prop.isShowPay,
  () => {
    getInfo();
  }
);

const getInfo = async () => {
  try {
    const res = await getPersonalInfo();
    info.value = res.data.data;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: "none",
    });
    throw error;
  }
};

const goPay = async () => {
  console.log(prop.jfInfo);
  if (!prop.jfInfo)
    return Taro.showToast({
      title: "未获取到订单信息",
      icon: "none",
    });
  if (prop.payType === "wx") {
    try {
      const { data } = await payOrder({
        oid: prop.jfInfo.oid,
      });
      Taro.requestPayment({
        timeStamp: data.data.timeStamp,
        nonceStr: data.data.nonceStr,
        package: data.data.package,
        signType: data.data.signType,
        paySign: data.data.paySign,
        success: function () {
          Taro.showToast({
            title: "支付成功",
            icon: "success",
            duration: 2000,
          });
          Taro.navigateTo({
            url: "/pages/hotGoods/hot_list/index",
          });
        },
        fail: function () {
          Taro.showToast({
            title: "支付失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
      emit("closePay", false);
    } catch (e) {
      Taro.showToast({
        title: e.msg,
        icon: "none",
      });
      throw e;
    }
  } else {
    const res = await payJfOrder(prop.jfInfo);
    Taro.showToast({
      title: res.msg,
      icon: "success",
      duration: 2000,
    });
    Taro.navigateTo({
      url: "/pages/users/order_list/index?type=0",
    });
    emit("closePay", false);
  }
};

const closePay = () => {
  Taro.showToast({
    title: "取消支付",
    icon: "none",
  });
  emit("closePay", false);
};
</script>

<style lang="scss">
.nut-popup {
  .nut-popup__container {
    border-radius: 10px;
  }
}

.div {
  padding: 20px;
  // text-align: center;

  .nut-cell {
    align-items: center;
  }
}
</style>