wx-qhb/pageD/paymentOrder/paymentOrder.vue

<template>
  <view class="page">
    <view class="_top">
      <view class="select" v-if="payType == 'customer_service'">
        <uni-section title="本地数据" type="line">
          <uni-data-select
            v-model="value"
            :localdata="exchangeList"
            @change="change"
            :clear="false"
          ></uni-data-select>
        </uni-section>
      </view>
      <view class="title"> 待支付订单 </view>
      <view class="price">
        <text v-if="value == 1">￥</text>
        <text v-if="value == 2">$</text>
        <text v-if="value == 3">€</text>
        <text v-if="value == 4">￥</text>
        {{ goodsDetail.money }}
      </view>
      <view class="_weight">
        <text>实际重量</text>
        <text> {{ goodsDetail.weight }} kg</text>
      </view>
      <view class="type-num">
        <text>包裹类型</text>
        <text>{{ goodsDetail.packageType }}</text>
      </view>
      <view class="type-num">
        <text>包裹数量</text>
        <text>{{ goodsDetail.num }}</text>
      </view>
    </view>
    <view class="pay" @click="switchType('balance')">
      <view style="display: flex">
        <image
          class="balance-icon"
          src="../../static/mine/341.png"
          mode=""
        ></image>
        <view class="">
          <view style="font-size: 26rpx; color: #333333">余额支付</view>
          <view style="color: #f83224; font-size: 24rpx; margin-top: 10rpx"
            >当前余额：{{ balance }}</view
          >
        </view>
      </view>
      <image
        v-if="payType == 'balance'"
        class="select"
        src="../../static/mine/342.png"
        mode=""
      ></image>
      <image
        v-else
        class="select"
        src="../../static/mine/345.png"
        mode=""
      ></image>
    </view>
    <view class="pay" @click="switchType('wechat')">
      <view style="display: flex">
        <image
          class="balance-icon"
          src="../../static/mine/343.png"
          mode=""
        ></image>
        <view class="">
          <view style="font-size: 26rpx; color: #333333">微信支付</view>
          <view style="color: #797979; font-size: 24rpx; margin-top: 10rpx"
            >适用微信支付</view
          >
        </view>
      </view>
      <image
        v-if="payType == 'wechat'"
        class="select"
        src="../../static/mine/342.png"
        mode=""
      ></image>
      <image
        v-else
        class="select"
        src="../../static/mine/345.png"
        mode=""
      ></image>
    </view>
    <view class="pay" @click="switchType('customer_service')">
      <view style="display: flex">
        <image
          class="balance-icon"
          src="../../static/mine/344.png"
          mode=""
        ></image>
        <view class="">
          <view style="font-size: 26rpx; color: #333333">客服支付</view>
          <view style="color: #797979; font-size: 24rpx; margin-top: 10rpx"
            >联系微信支付</view
          >
        </view>
      </view>
      <image
        v-if="payType == 'customer_service'"
        class="select"
        src="../../static/mine/342.png"
        mode=""
      ></image>
      <image
        v-else
        class="select"
        src="../../static/mine/345.png"
        mode=""
      ></image>
    </view>

    <view class="footer">
      <view class="_view">
        <text class="_text-1">共一件</text>
        <text class="_text-2">{{ "&nbsp;" + "合计" }}</text>
        <view class="price" v-if="goodsDetail.money">
          <text style="font-size: 20rpx" v-if="value == 1">￥</text>
          <text style="font-size: 20rpx" v-if="value == 2">$</text>
          <text style="font-size: 20rpx" v-if="value == 3">€</text>
          <text style="font-size: 20rpx" v-if="value == 4">￥</text>
          <text>{{ goodsDetail.money.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            goodsDetail.money.split(".")[1]
          }}</text>
        </view>
      </view>
      <button class="btn-2" @click="payment">立即支付</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payType: "balance",
      goodsDetail: {},
      exchangeList: [], //汇率列表
      value: 0,
      balance: "",
      balance1: 0,
      exchange_rate_id: "",
    };
  },
  onLoad(options) {
    this.goodsDetail = options;
    this.money = options.money;
    if (this.goodsDetail.type == "group_package") {
      this.goodsDetail.type = "group_pack_order";
    }
  },
  methods: {
    switchType(str) {
      this.payType = str;
    },
    change(e) {
      this.calculate();
      this.calculate1(this.balance1);
    },

    //用户信息
    userinfo() {
      uni.$u.http
        .get("/api/member/info", {})
        .then((res) => {
          this.balance = res.balance;
          this.balance1 = this.balance;
          this.calculate1(this.balance1);
        })
        .catch(() => {});
    },

    //汇率价格
    async calculate() {
      await uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.value, {
          price: this.money,
        })
        .then((res) => {
          this.goodsDetail.money = res.amount;
        })
        .catch(() => {});
    },
    async calculate1(balance) {
      await uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.value, {
          price: balance,
        })
        .then((res) => {
          this.balance = res.amount;
        })
        .catch(() => {});
    },
    async ratelist() {
      await uni.$u.http
        .get("/api/exchange-rate", {})
        .then((res) => {
          //   this.exchangeList = res.reverse();
          res.map((item) => {
            let obj = {};
            obj.text = item.name_cn;
            obj.value = item.id;
            this.exchangeList.push(obj);
          });
          this.exchangeList = this.exchangeList.reverse();
          this.value = this.exchangeList[0].value;
          this.userinfo();
        })
        .catch(() => {});
    },
    //支付
    payment() {
      if (this.goodsDetail.type == "") {
        uni.$u.http
          .post("/api/order/payment", {
            order_id: this.goodsDetail.orderid,
            pay_type: this.payType,
            customer_currency: "RMB",
          })
          .then((res) => {
            if (this.payType == "wechat") {
              uni.requestPayment({
                provider: "wxpay",
                timeStamp: String(res.timeStamp),
                nonceStr: res.nonceStr,
                package: res.package,
                signType: res.signType,
                paySign: res.paySign,
                success: function (res) {
                  this.$u.toast("支付成功");
                  console.log("success:" + JSON.stringify(res));
                  setTimeout(() => {}, 800);
                },
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
              });
            }
          })
          .catch(() => {});
      } else {
        uni.$u.http
          .post("/api/pay", {
            order_id: this.goodsDetail.orderid,
            pay_type: this.payType,
            type: this.goodsDetail.type,
            exchange_rate_id: this.value,
          })
          .then((res) => {
            if (this.payType == "wechat") {
              uni.requestPayment({
                provider: "wxpay",
                timeStamp: String(res.timeStamp),
                nonceStr: res.nonceStr,
                package: res.package,
                signType: res.signType,
                paySign: res.paySign,
                success: function (res) {
                  console.log("success:" + JSON.stringify(res));
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1,
                    });
                  }, 800);
                },
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
              });
            } else {
              this.$u.toast("支付成功");
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                });
              }, 800);
            }
            // uni.navigateTo({
            // 	url: 'confirm'
            // })
          })
          .catch(() => {});
      }
    },
  },
  created() {
    this.ratelist();
    // this.userinfo();
    uni.setNavigationBarTitle({
      title: "支付订单",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;
  position: relative;

  ._top {
    padding: 48rpx 24rpx 36rpx;
    background-color: #fff;
    border-radius: 16rpx;
    position: relative;
    .select {
      position: absolute;
      right: 14rpx;
      top: 14rpx;
      width: 200rpx;
      height: 50rpx;
      //   background-color: #ccc;
    }

    .title {
      text-align: center;
      color: rgba(34, 34, 34, 0.7);
      font-size: 28rpx;
    }

    .price {
      font-size: 64rpx;
      font-weight: 500;
      text-align: center;
      margin-top: 20rpx;

      ._text-1 {
        font-size: 28rpx;
      }
    }

    ._weight {
      display: flex;
      justify-content: space-between;
      margin-top: 46rpx;
      font-size: 28rpx;
      color: rgba(34, 34, 34, 1);
    }

    .type-num {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      color: rgba(34, 34, 34, 0.7);
      margin-top: 32rpx;
    }
  }

  .pay {
    display: flex;
    align-items: center;
    background-color: #fff;
    margin-top: 20rpx;
    height: 140rpx;
    border-radius: 16rpx;
    padding: 0 24rpx;
    justify-content: space-between;

    .balance-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 20rpx;
    }

    .select {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 146rpx;
    padding-top: 20rpx;
    ._view {
      display: flex;
      align-items: flex-end;
      height: 76rpx;
      ._text-1 {
        font-size: 24rpx;
        color: rgba(51, 51, 51, 0.8);
        display: inline-block;
        padding-bottom: 10rpx;
      }
      ._text-2 {
        font-size: 24rpx;
        display: inline-block;
        padding-bottom: 10rpx;
      }
      .price {
        color: #f83224;
        font-weight: 600;
        font-size: 48rpx;
      }
    }
    .btn-2 {
      height: 76rpx;
      padding: 0;
      margin: 0;
      font-size: 28rpx;
      color: #fff;
      min-width: 188rpx;
      background-color: #f83224;
      border-radius: 38rpx;
      margin-right: 20rpx;
      margin-left: 20rpx;
    }
  }
}
</style>