MoeNovaClient/pages/crowdFunding/orderConfirm.vue

<template>
  <view class="order-confirm-page">
    <view class="address-card scale-tap" @click="goPage('/pages/crowdFunding/receivingAddress')">
      <view class="address-content">
        <view class="row">
          <text class="name">{{ address.name }}</text>
          <text class="mobile">{{ address.mobile }}</text>
          <text class="default" v-if="address.isDefault">默认</text>
        </view>
        <view class="address">收获地址：{{ address.fullAddress }}</view>
      </view>
      <image class="arrow" src="@/static/crowdFunding/right.png" />
    </view>
    <view class="order-section">
      <view class="order-row">
        <text>回报内容</text>
        <text class="right">({{ reward }}) ￥{{ price }}</text>
      </view>
      <view class="order-row">
        <text>众筹数量</text>
        <view class="right">
          <image
            src="@/static/icon/stepping_minus.png"
            @click="minus"
            class="minus"
          />
          <text class="num">{{ count }}</text>
          <image
            src="@/static/icon/stepping_add.png"
            @click="plus"
            class="plus"
          />
        </view>
      </view>
      <view class="order-row">
        <text>运费</text>
        <text class="right">包邮</text>
      </view>
    </view>
    <view class="remark-section">
      <text>填写备注</text>
      <input class="remark-input" placeholder="选填" v-model="remark" />
    </view>
    <view class="pay-section">
      <view
        class="pay-item"
        :class="{ checked: payType === 'wx' }"
        @click="payType = 'wx'"
      >
        <image src="@/static/icon/weixin_logo.png" class="pay-icon" />
        <text>微信支付</text>
        <image
          :src="
            payType === 'wx'
              ? '/static/icon/wd_icon_gouxuan05.png'
              : '/static/icon/wd_icon_gouxuan04.png'
          "
          class="check"
        />
      </view>
      <view
        class="pay-item"
        :class="{ checked: payType === 'alipay' }"
        @click="payType = 'alipay'"
      >
        <image src="@/static/icon/zhifubao_logon.png" class="pay-icon" />
        <text>支付宝</text>
        <image
          :src="
            payType === 'alipay'
              ? '/static/icon/wd_icon_gouxuan05.png'
              : '/static/icon/wd_icon_gouxuan04.png'
          "
          class="check"
        />
      </view>
    </view>
    <view class="protocol-section">
      <text class="title">免责协议：</text>
      <text class="content">
        免责协议:
        1.点击"提交订单",即表明您已阅读并同意《支持者协议》及《隐私政策》,并自愿承担众筹相应风险。
        2.您参与众筹是支持将创意变为现实的过程,而不是直接的商品交易,因此存在一定风险。请您根据自己的判断选择、支持众筹项目自。众筹存在于发起人与支持者之间,摩点网作为第三方平台,只只提供网络空间、技术支持等服务。众筹的回报产品和承诺由发起人是供和作出,发起者和支持者应依法承担使用萌创星球产品产生的法律后来果。
        3.众筹项目的回报发放及其他后续服务事项均由发起人负责。如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务务等情形,您需要直接和发起人协商解决。
        4.众筹结束前最后1小时及众筹结束后未超过预计发货时间期间无法申请退款,具体退款规则参见《退款说明》。
        5.由于发起人能力和经验不足、市场风险、法律风险等各种因素,众筹可能失败。对于在众筹期限届满前失败的项目,您支持项目的款项会全部原路退还给您;对于众筹成功的项目,支持者不能通过萌创星球平台申请退款,若此时支持者因任何原因希望退款,需直接与发起者者协商,若发起者同意退款,需直接向支持者退回款项,萌创星球不会从可可结算款项中扣除该部分退款金额。您对项目发起人的无偿支持!以及额外打赏,一旦众筹成功将不予退款,但众筹失败的情况除外。
      </text>
    </view>
    <view class="bom-reserveASeat"></view>
    <view class="order-bottom">
      <view class="total-wrap">
        <text class="label">总金额</text>
        <text class="price">￥{{ (price * count).toFixed(2) }}</text>
      </view>
      <view class="submit-btn blick-btn-animation" @click="submit">提交订单</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: {
        name: "戴驿宸",
        mobile: "17788196551",
        isDefault: true,
        fullAddress: "浙江省杭州市滨江区西兴街道启悦府",
      },
      reward: "灯塔MINI版",
      price: 29.9,
      count: 1,
      remark: "",
      payType: "wx",
      isSubmitting: false,
      lastClickTime: 0,
      linkid: '',
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goPage(url) {
      uni.navigateTo({ url });
    },
    minus() {
      if (this.count > 1) this.count--;
    },
    plus() {
      this.count++;
    },
    async submit() {
      const now = Date.now();
      if (now - this.lastClickTime < 3000) {
        uni.showToast({ title: "请勿频繁点击", icon: "none" });
        return;
      }
      this.lastClickTime = now;
      if (this.isSubmitting) return;
      this.isSubmitting = true;

      uni.showLoading({ title: '创建订单中...' });
      // 创建订单
      uni.request({
        url: this.$apiHost + '/Order/submit',
        method: 'POST',
        data: {
          uuid: getApp().globalData.uuid,
          // 这里根据你的业务传递商品、数量、备注、支付方式等
          product_id: this.productId, // 你需要在data或props中补充
          count: this.count,
          remark: this.remark,
          payType: this.payType,
          type: 'crowdFunding'
        },
        header: {
          'content-type': 'application/json',
          sign: getApp().globalData.headerSign
        },
        success: (res) => {
          if (res.data.success == 'yes') {
            this.linkid = res.data.linkid;
            // 微信支付
            if (this.payType === 'wx') {
              uni.requestPayment({
                provider: "wxpay",
                orderInfo: {
                  appid: res.data.wepay.appid,
                  partnerid: res.data.wepay.partnerid,
                  prepayid: res.data.wepay.prepayid,
                  package: "Sign=WXPay",
                  noncestr: res.data.wepay.noncestr,
                  timestamp: res.data.wepay.timestamp,
                  sign: res.data.wepay.sign
                },
                success: (payRes) => {
                  this.checkPayStatus();
                },
                fail: (err) => {
                  uni.hideLoading();
                  this.isSubmitting = false;
                  uni.showToast({ title: '支付取消', icon: 'none' });
                }
              });
            }
            // 支付宝支付
            else if (this.payType === 'alipay') {
              uni.requestPayment({
                provider: "alipay",
                orderInfo: res.data.ali_pay,
                success: (payRes) => {
                  this.checkPayStatus();
                },
                fail: (err) => {
                  uni.hideLoading();
                  this.isSubmitting = false;
                  uni.showToast({ title: '支付取消', icon: 'none' });
                }
              });
            }
          } else {
            uni.hideLoading();
            this.isSubmitting = false;
            uni.showToast({ title: res.data.msg || '创建订单失败', icon: "error" });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          this.isSubmitting = false;
          uni.showToast({ title: '网络错误，请稍后重试', icon: "error" });
        }
      });
    },
    // 轮询查支付状态
    checkPayStatus() {
      uni.request({
        url: this.$apiHost + "/Order/getstatus",
        data: {
          uuid: getApp().globalData.uuid,
          linkid: this.linkid,
        },
        header: {
          "content-type": "application/json",
          sign: getApp().globalData.headerSign
        },
        success: (res) => {
          if (res.data.success == "yes") {
            uni.hideLoading();
            uni.showToast({ title: "支付成功", icon: "none" });
            // 跳转到订单详情或列表
            uni.redirectTo({ url: '/pages/crowdFunding/orderList' });
          } else {
            setTimeout(() => { this.checkPayStatus(); }, 1000);
          }
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showToast({ title: "网络错误，请重试", icon: "none" });
        }
      });
    }
  },
};
</script>

<style lang="scss">
page {
  background: #f6faf6;
}
.order-confirm-page {
  min-height: 100vh;
  background: #f6faf6;
  padding: 0 10rpx;
  box-sizing: border-box;

  .nav-bar {
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    height: 100rpx;
    background: #fff;

    .back {
      font-size: 44rpx;
    }

    .title {
      font-size: 36rpx;
      font-weight: bold;
      margin-left: 32rpx;
    }
  }

  .address-card {
    background: #fff;
    border-radius: 18rpx;
    margin: 10rpx;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);

    .address-content {
      flex: 1;
      min-width: 0;
      .row {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .name {
          font-size: 32rpx;
          font-weight: bold;
          margin-right: 18rpx;
          color: #222;
        }
        .mobile {
          font-size: 32rpx;
          margin-right: 18rpx;
          color: #222;
        }
        .default {
          font-size: 22rpx;
          color: #fff;
          background: #1f1f1f;
          border-radius: 8rpx;
          padding: 2rpx 12rpx;
          margin-right: 12rpx;
          margin-left: 4rpx;
          vertical-align: middle;
          font-weight: 500;
          background: #1f1f1f;
          color: #acf934;
        }
      }
      .address {
        font-size: 26rpx;
        color: #666;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 90vw; // 防止溢出
        max-width: 600rpx;
      }
    }
    .arrow {
      width: 32rpx;
      height: 32rpx; 
      flex-shrink: 0;
    }
  }

  .order-section {
    background: #fff;
    border-radius: 18rpx;
    margin: 10rpx;
    padding: 0 32rpx;

    .order-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88rpx;
      font-size: 30rpx;

      .right {
        display: flex;
        align-items: center;
      }

      .minus,
      .plus {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #1f1f1f;
        color: #acf934;
        text-align: center;
        // line-height: 48rpx;
        // font-size: 36rpx;
        // margin: 0 12rpx;
      }

      .num {
        width: 80rpx;
        text-align: center;
      }
    }

    .order-row:last-child {
      border-bottom: none;
    }
  }

  .remark-section {
    background: #fff;
    border-radius: 18rpx;
    margin: 10rpx;
    padding: 0 32rpx;
    display: flex;
    align-items: center;
    height: 88rpx;

    .remark-input {
      flex: 1;
      border: none;
      background: transparent;
      font-size: 28rpx;
      color: #1f1f1f;
      margin-left: 24rpx;
    }
  }

  .pay-section {
    background: #fff;
    border-radius: 18rpx;
    margin: 10rpx;
    padding: 0 32rpx;

    .pay-item {
      display: flex;
      align-items: center;
      height: 88rpx;
      font-size: 30rpx;
      position: relative;

      .pay-icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 18rpx;
        border-radius: 50%;
      }

      .check {
        position: absolute;
        right: 0;
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
      }
    }

    .pay-item:last-child {
      border-bottom: none;
    }
  }

  .protocol-section {
    background: #fff;
    border-radius: 18rpx;
    margin: 10rpx;
    padding: 32rpx;

    .title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 12rpx;
      display: block;
    }

    .content {
      font-size: 24rpx;
      color: #888;
      line-height: 1.7;
    }
  }

  .order-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    height: 88rpx;
    padding: 0 32rpx;
    box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
    padding-bottom: var(--window-bottom);
    box-sizing: content-box;

    .total-wrap {
      display: flex;
      align-items: baseline;
      margin-right: 32rpx;
      .label {
        color: #b2b2b2;
        font-size: 28rpx;
        margin-right: 8rpx;
      }
      .price {
        color: #222;
        font-size: 32rpx;
        font-weight: bold;
      }
    }

    .submit-btn {
      background: #1f1f1f;
      color: #acf934;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: bold;
      width: 240rpx;
      height: 72rpx;
      text-align: center;
      line-height: 72rpx;
      margin-left: 12rpx;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.bom-reserveASeat{
  width: 100%;
  height: calc(var(--window-bottom) + 100rpx);
}
</style>