wx-qhb/pageD/paymentOrder/paymentOrder.vue

<template>
  <view class="page">
    <view class="_top">
      <view class="select">
        <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 class="_text-1">￥</text>
        {{ goodsDetail.money }}
      </view>
      <view class="_weight">
        <text>实际重量</text>
        <text> {{ goodsDetail.weight }} kg</text>
      </view>
      <view class="type-num">
        <text>包裹类型</text>
        <text>{{ goodsDetail.type }}</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')">
      <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'"
        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">￥</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: "",
      balance: "",
      balance1: 0,
    };
  },
  onLoad(options) {
    this.goodsDetail = options;
    this.money = options.money;
  },
  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(() => {});
    },

    //汇率价格
    calculate() {
      uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.value, {
          price: this.money,
        })
        .then((res) => {
          this.goodsDetail.money = res.amount;
        })
        .catch(() => {});
    },
    calculate1(balance) {
      uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.value, {
          price: balance,
        })
        .then((res) => {
          this.balance = res.amount;
        })
        .catch(() => {});
    },
    ratelist() {
      uni.$u.http
        .get("/api/exchange-rate", {})
        .then((res) => {
          //   this.exchangeList = res.reverse();
          console.log(res);
          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;
        })
        .catch(() => {});
    },
    //支付
    payment() {
      //   if (this.type == "") {
      uni.$u.http
        .post("/api/order/payment", {
          order_id: this.goodsDetail.orderid,
          pay_type: this.payType,
          customer_currency: "RMB",
        })
        .then((res) => {
          console.log(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.orderid,
      //         pay_type: this.pay_type,
      //         type: this.type,
      //         exchange_rate_id: this.exchange_rate_id,
      //       })
      //       .then((res) => {
      //         if (this.pay_type == "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.switchTab({
      //                   url: "/pages/express/express",
      //                 });
      //               }, 800);
      //             },
      //             fail: function (err) {
      //               console.log("fail:" + JSON.stringify(err));
      //             },
      //           });
      //         } else {
      //           this.$u.toast("支付成功");
      //           setTimeout(() => {
      //             uni.switchTab({
      //               url: "/pages/express/express",
      //             });
      //           }, 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>