ebike-ui/ebike-user/components/bike-pay/bike-pay.vue

<template>
  <div style="padding: 15px; background-color: white">
    <div class="divPay">
      <view class="flex justify-between">
        <view class="width-65">
          <div class="divTitle">
            <label>
              <image
                class="divImg"
                :src="imgPath + 'static/userui/home/money.png'"
              />
            </label>
            <label>{{ status == 3 ? "已支付：" : "待支付：" }}</label>
            <label>{{ data.totalAmount }}元</label>
          </div>
          <div class="divFont">
            {{ data.createdAt }}
          </div>
        </view>
        <view class="width-35 flex justify-end">
          <!--已支付 v-if="status==3"-->
          <view v-if="status == 3" @click="handleFeeAppealClick">
            <view class="text-center">
              <uni-icons type="help" size="20"></uni-icons>
            </view>
            <view class="text-center wzfysh"> 费用申述 </view>
          </view>
          <view @click="handleFaultReportClick" style="margin-left: 10px">
            <view class="text-center">
              <uni-icons
                custom-prefix="iconfont"
                color="rgb(102,102,102)"
                type="icon-ebikeweixiuoff"
                size="20"
              ></uni-icons>
            </view>
            <view class="text-center wzfysh"> 故障上报 </view>
          </view>
        </view>
      </view>

      <div class="divTitle2">费用明细</div>
      <div
        class="divRow divFont"
        v-for="(item, index) in data.details"
        :key="index"
      >
        <label>{{ item.itemName }}</label>
        <label>{{ item.itemAmount }}元</label>
      </div>
      <!-- 		<div class="divRow divFont">
				<label>时长费</label>
				<label>{{data.scf}}元</label>
			</div> -->
      <div class="divHJ">
        <label>合计：</label>
        <label>￥{{ data.totalAmount }}元</label>
      </div>
    </div>
    <div>
      <div v-if="status == 2" class="divBtn" @click="handlePaymentClick">
        <label>
          <uni-icons
            custom-prefix="iconfont"
            type="icon-ebikeweixin"
            color="white"
            size="25"
          />
        </label>
        支付
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import config from "@/utils/config";
import * as api from "@/utils/api.js";
import { showModelMessage } from "@/utils/tools.js";
const imgPath = config.imgPath;
const props = defineProps(["orderId"]);
const status = ref("");
const data = ref({
  hj: "2.5",
  sj: "2025-04-03 14:15:13",
  qbj: "2.0",
  scf: "0.5",
});

onMounted(() => {
  console.log("2222");

  getInfoOrderData();
});
const getInfoOrderData = () => {
  console.log(props.orderId, "props.orderId");

  api
    .callOrdereApi(
      "userOrders/orderDetailsInfo?orderId=" + props.orderId,
      {},
      "get"
    )
    .then((res) => {
      if (res.code == 200) {
        data.value = res.data;
        status.value = res.data.status;
      }
    });
};
const handlePaymentClick = () => {
  uni.showLoading({
    title: "正在支付...",
  });
  api
    .callPaymentApi("wxPayment/prepay?orderId=" + props.orderId, {}, "get")
    .then((res) => {
      if (res.code == 200) {
        wx.requestPayment({
          timeStamp: res.data.timeStamp,
          nonceStr: res.data.nonceStr,
          package: res.data.package,
          signType: res.data.signType,
          paySign: res.data.paySign,
          success: function (res) {
            uni.hideLoading();
            //轮询看是否支付成功
            checkPaymentStatus();
          },
          fail: function (res) {
            uni.hideLoading();
            console.log("fail", res);
          },
          complete: function (res) {
            console.log("complete", res);
          },
        });
      } else {
        uni.hideLoading();
        showModelMessage("支付失败");
      }
    });
};

function checkPaymentStatus() {
  api
    .callPaymentApi("wxPayment/queryOrderStatus/" + props.orderId, {}, "get")
    .then((res) => {
      if (res.code == 200) {
        gotoHome();
      } else {
        console.log("支付未成功，继续轮询");
        checkPaymentStatus(); // 继续轮询
      }
    })
    .catch((error) => {
      console.log("请求失败，继续轮询", error);
      checkPaymentStatus(); // 请求失败也继续轮询
    });
}
const gotoHome = () => {
  uni.navigateTo({
    url: "/pages/user/home/home",
  });
};

const handleFeeAppealClick = () => {
  //费用 申述
  uni.navigateTo({
    url: "/pages/user/views/PaymentFeedback?orderId=" + props.orderId,
  });
};
const handleFaultReportClick = () => {
  // 故障上报
  uni.navigateTo({
    url:
      "/pages/user/login/TroubleReportUser?bikeCode=" +
      data.value.bikeCode +
      "&orderCode=" +
      props.orderId,
  });
};
</script>

<style scoped>
.divPay {
  width: auto;
}

.divTitle {
  line-height: 30px;
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.divTitle2 {
  font-size: 16px;
  line-height: 35px;
}

.divImg {
  width: 15px;
  height: 12px;
  margin-right: 5px;
}

.divFont {
  color: #000;
  font-size: 12px;
  opacity: 0.7;
}

.divRow {
  line-height: 20px;
  display: flex;
  justify-content: space-between;
}

.divHJ {
  text-align: right;
  font-size: 14px;
  color: red;
  font-weight: bold;
}

.divBtn {
  text-align: center;
  background: #61d145;
  color: white;
  line-height: 40px;
  border-radius: 5px;
  margin-top: 20px;
}

.width-65 {
  width: 65%;
}

.width-35 {
  width: 35%;
}
.wzfysh {
  font-size: 10px;
}
</style>