MoeNovaClient/pages/crowdFunding/orderConfirm.vue

<template>
  <view class="order-confirm-page">
    <view class="address-card scale-tap" @click="selectAddress()">

      <view class="address-content" v-if="address.id != 0">
        <view class="row">
          <text class="name">{{ address.realname }}</text>
          <text class="mobile">{{ address.mobile }}</text>
          <text class="default" v-if="address.is_default == 'yse'">默认</text>
        </view>
        <view class="address">收获地址：{{ address.area + address.address }}</view>
      </view>
      <view class="address-content" v-else>
        <view class="row">
          <text class="name" style="color: red;">请选择地址</text>
        </view>
      </view>
      <image class="arrow" src="@/static/crowdFunding/right.png" />
    </view>
    <view class="order-section">
      <view class="order-row">
        <text>回报内容</text>
        <text class="right">({{ selectedSpec && selectedSpec.selectedReward && selectedSpec.selectedReward.title }}) ￥{{
          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">{{ !shippingFee ? '包邮' : shippingFee }}</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: {
        id: 0
      },
      price: 0,
      count: 1,
      remark: "",
      payType: "wx",
      isSubmitting: false,
      lastClickTime: 0,
      linkid: '',
      selectedSpec: null,
      detail: null,
      shippingFee: 0,
    };
  },
  onLoad(options) {
    console.log('options', options);
    if (options.orderId) { 
    } else {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('acceptDataFromOpener', (data) => {
        this.selectedSpec = data.selectedSpec;
        this.detail = data.detail;
        this.price = this.selectedSpec && this.selectedSpec.selectedReward && this.selectedSpec.selectedReward.price || 0
        console.log('接收到的数据:', this.selectedSpec, this.detail);
      });

      eventChannel.on('acceptAddress', (address) => {
        this.address = address;
        console.log('接收到的地址:', this.address);
      });
      if (this.address.id == 0) {
        this.getAddress();
      }
      this.getPostage();
    }
  },
  onShow() {


  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    goPage(url) {
      uni.navigateTo({ url });
    },
    minus() {
      if (this.count > 1) this.count--;
      this.getPostage()
    },
    plus() {
      this.count++;
      this.getPostage()
    },
   
    getAddress() {
      // 获取默认地址
      uni.request({
        url: this.$apiHost + '/Address/getdefault',
        method: 'GET',
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey

        },
        success: (res) => {
          if (res.data && res.data.info) {
            this.address = res.data.info;
            console.log(res.data.info, '获取到的默认地址');
          }


        }
      });

    },
    getPostage() {
      // 获取默认地址
      uni.request({
        url: this.$apiHost + '/crowdfund/calculate-shipping',
        method: 'GET',
        data: {
          uuid: getApp().globalData.uuid,
          skey: getApp().globalData.skey,
          num: this.count,
          area: this.address.area,
          reward_id: this.selectedSpec && this.selectedSpec.selectedReward && this.selectedSpec.selectedReward.id
        },
        success: (res) => {
          if (res.data && res.data.success == 'yes') {
            console.log(res.data.data, '获取到邮费');
            this.shippingFee = res.data.data.shipping_fee
          }


        }
      });
    },
    selectAddress() {
      uni.navigateTo({
        url: '/pages/crowdFunding/receivingAddress?isSelectAddress=true',
        success: function (res) {
          // 通过 eventChannel 向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpener', { selectedSpec: this.selectedSpec, detail: this.detail });
        }.bind(this)
      });
    },


    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: 'GET',
        data: {
          uuid: getApp().globalData.uuid,
          // 这里根据你的业务传递商品、数量、备注、支付方式等
          type: 'buyCrowdfund',
          reward_id: this.selectedSpec.selectedReward.id,
          num: this.count,
          beizu: this.remark,
          payType: this.payType,
          address_id: this.address.id
        },
        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>