wx-qhb/pageA/payorder.vue

<template>
  <view class="back">
    <view class="topbox">
      <view
        class=""
        style="position: absolute; top: -30rpx; right: 0"
        v-if="pay_type == 'customer'"
      >
        <view
          class="state u-flex u-row-between"
          @click="stateshow = !stateshow"
        >
          <text>{{ state }}</text>
          <image
            src="static/images/pull_down.png"
            style="width: 24rpx; height: 24rpx"
            mode=""
          ></image>
        </view>
        <view class="state" v-if="stateshow">
          <view
            @click="statechange(item, idx)"
            :class="state_id == idx ? 'stateac' : 'unstate'"
            style="margin-bottom: 20rpx; font-size: 24rpx"
            v-for="(item, idx) in array"
          >
            <text v-if="language == 'zh-CN'">
              {{ item.name_cn }}
            </text>
            <text v-if="language == 'en-US'">
              {{ item.name_en }}
            </text>
            <text v-if="language == 'es-ES'">
              {{ item.name_es }}
            </text>
            <text v-if="language == 'it-IT'">
              {{ item.name_ita }}
            </text>
          </view>
        </view>
      </view>
      <view
        class="u-row-center"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 56rpx;
        "
      >
        <view class="paysum">{{ i18n.Actual }}</view>
        <view class="numbe" style="margin-top: 40rpx">
          <text v-if="state_id == 0 && mode == 2">￥</text>
          <text v-if="state_id == 1 && mode == 2">$</text>
          <text v-if="state_id == 2 && mode == 2">€</text>
          <text v-if="state_id == 3 && mode == 2">￥</text>
          <text v-if="mode != 2">￥</text>
          <text style="font-size: 60rpx; font-weight: 600" v-if="mode == 2">{{
            sum
          }}</text>
          <text style="font-size: 60rpx; font-weight: 600" v-else>{{
            sum1
          }}</text>
        </view>
        <!-- 				<view class="">
					<text>支付剩余时间 13:50</text>
				</view> -->
      </view>
      <!-- 缴纳保证金 -->
      <view
        v-if="orderType == 'bond'"
        class="payitem"
        style="margin-top: 100rpx; display: flex"
        @click="change(0)"
      >
        <image
          src="static/images/yuer.png"
          mode=""
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view class="u-flex u-row-between" style="margin-left: 20rpx; flex: 1">
          <view class="">
            <view class="">{{ i18n.Marginpayment }}</view>
            <view
              class=""
              style="
                margin-top: 10rpx;
                color: rgba(248, 50, 36, 1);
                font-size: 24rpx;
              "
            >
              {{ i18n.Currentbalance }}:
              {{ bondBalance }}
            </view>
          </view>
          <image
            v-if="mode == 0"
            src="static/images/active.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          >
          </image>
          <image
            v-else
            src="static/images/unactive.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          ></image>
        </view>
      </view>
      <!-- 余额支付 -->
      <view
        v-else
        class="payitem"
        style="margin-top: 100rpx; display: flex"
        @click="change(0)"
      >
        <image
          src="static/images/yuer.png"
          mode=""
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view class="u-flex u-row-between" style="margin-left: 20rpx; flex: 1">
          <view class="">
            <view class="">{{ i18n.Balancepayment }}</view>
            <view
              v-if="mode == 2"
              class=""
              style="
                margin-top: 10rpx;
                color: rgba(248, 50, 36, 1);
                font-size: 24rpx;
              "
            >
              {{ i18n.Currentbalance }}：{{ balance }}
            </view>
            <view
              v-else
              class=""
              style="
                margin-top: 10rpx;
                color: rgba(248, 50, 36, 1);
                font-size: 24rpx;
              "
            >
              {{ i18n.Currentbalance }}：{{ balance1 }}
            </view>
          </view>
          <image
            v-if="mode == 0"
            src="static/images/active.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          >
          </image>
          <image
            v-else
            src="static/images/unactive.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          ></image>
        </view>
      </view>
      <!-- 微信支付 -->
      <view
        v-if="orderType != 'bond'"
        class="payitem"
        style="margin-top: 20rpx; display: flex"
        @click="change(1)"
      >
        <image
          src="static/images/wx.png"
          mode=""
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view class="u-flex u-row-between" style="margin-left: 20rpx; flex: 1">
          <view class="">
            <view class="">{{ i18n.WechatPay }}</view>
            <view
              class=""
              style="
                margin-top: 10rpx;
                color: rgba(121, 121, 121, 1);
                font-size: 24rpx;
              "
            >
              {{ i18n.applicable }}
            </view>
          </view>
          <image
            v-if="mode == 1"
            src="static/images/active.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          >
          </image>
          <image
            v-else
            src="static/images/unactive.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          ></image>
        </view>
      </view>
      <!-- 客服支付 -->
      <view
        v-if="orderType != 'bond'"
        class="payitem"
        style="margin-top: 20rpx; display: flex"
        @click="change(2)"
      >
        <image
          src="static/images/kefu2.png"
          mode=""
          style="width: 40rpx; height: 40rpx"
        ></image>
        <view class="u-flex u-row-between" style="margin-left: 20rpx; flex: 1">
          <view class="">
            <view class="">{{ i18n.Customerservicepayment }}</view>
            <view
              class=""
              style="
                margin-top: 10rpx;
                color: rgba(121, 121, 121, 1);
                font-size: 24rpx;
              "
            >
              {{ i18n.Contactpayment }}
            </view>
          </view>
          <image
            v-if="mode == 2"
            src="static/images/active.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          >
          </image>
          <image
            v-else
            src="static/images/unactive.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
          ></image>
        </view>
      </view>
    </view>
    <!-- 付款须知 -->
    <view class="" v-if="pay_type == 'customer'">
      <view
        class="payment"
        style="margin-top: 24rpx; margin-bottom: 18rpx; font-size: 32rpx"
        >{{ i18n.Paymentinstructions }}</view
      >
      <!-- <view class="content" style="margin-top: 18rpx">1.联系客服付款需走线下支付通道，付款成</view> -->
      <u-parse :content="content" style="margin-top: 18rpx"></u-parse>
    </view>
    <view class="confirm" @click="confirm">
      {{ i18n.Confirmpayment }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mode: 0,
      stateshow: false,
      state: "人民币",
      state_id: 0,
      array: [],
      sum: "",
      pay_type: "balance",
      orderid: "",
      balance: "",
      type: "",
      exchange_rate_id: "",
      balance1: 0,
      sum1: "",
      language: "zh-CN",
      orderType: "",
      bondBalance: "",
      content: "",
    };
  },
  onLoad(options) {
    this.sum1 = options.sum;
    this.sum = options.sum;
    this.orderid = options.orderid;
    this.orderType = options.orderType;
    if (options.type) {
      this.type = options.type;
    }
  },
  onShow() {
    this.ratelist();
    // this.userinfo()
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
    this.reminder();
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    //协议
    reminder() {
      uni.$u.http
        .get(`/api/agreement?code=Payment instructions`)
        .then((res) => {
          console.log(res);
          if (this.language == "zh-CN") {
            // this.name = res.name_cn
            this.content = res.content_cn;
          } else if (this.language == "en-US") {
            // this.name = res.name_en
            this.content = res.content_en;
          } else if (this.language == "es-ES") {
            // this.name = res.name_es
            this.content = res.content_es;
          } else if (this.language == "it-IT") {
            // this.name = res.name_ita
            this.content = res.content_ita;
          }
        });
    },
    //用户信息
    userinfo() {
      uni.$u.http
        .get("/api/member/info", {})
        .then((res) => {
          this.balance = res.balance;
          this.balance1 = this.balance;
          this.bondBalance = res.deposit;
          this.calculate1(this.balance1);
        })
        .catch(() => {});
    },
    //汇率列表
    ratelist() {
      uni.$u.http
        .get("/api/exchange-rate", {})
        .then((res) => {
          this.array = res.reverse();
          this.exchange_rate_id = this.array[0].id;
          if (this.language == "zh-CN") {
            this.state = this.array[0].name_cn;
          }
          if (this.language == "en-US") {
            this.state = this.array[0].name_en;
          }
          if (this.language == "es-ES") {
            this.state = this.array[0].name_es;
          }
          if (this.language == "it-IT") {
            this.state = this.array[0].name_ita;
          }
          this.userinfo();
          this.calculate();
        })
        .catch(() => {});
    },
    //汇率价格
    calculate() {
      uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.exchange_rate_id, {
          price: this.sum1,
        })
        .then((res) => {
          this.sum = res.amount;
        })
        .catch(() => {});
    },
    calculate1(balance) {
      uni.$u.http
        .post("/api/exchange-rate/calculate/" + this.exchange_rate_id, {
          price: balance,
        })
        .then((res) => {
          this.balance = res.amount;
        })
        .catch(() => {});
    },
    change(idx) {
      this.mode = idx;
      if (idx == 0) {
        this.pay_type = "balance";
      }
      if (idx == 1) {
        this.pay_type = "wechat";
      }
      if (idx == 2) {
        this.pay_type = "customer";
      }
    },
    statechange(item, idx) {
      if (this.language == "zh-CN") {
        this.state = item.name_cn;
      }
      if (this.language == "en-US") {
        this.state = item.name_en;
      }
      if (this.language == "es-ES") {
        this.state = item.name_es;
      }
      if (this.language == "it-IT") {
        this.state = item.name_ita;
      }
      this.state_id = idx;
      this.exchange_rate_id = item.id;
      this.stateshow = !this.stateshow;
      this.calculate();
      this.calculate1(this.balance1);
    },
    confirm() {
      if (this.orderType == "bond" && this.bondBalance < this.sum) {
        uni.showToast({
          title: "保证金余额不足以缴纳保证金，请先充值保证金。",
          icon: "none",
        });
        return;
      }
      // console.log(new Date().getTime());
      if (this.orderType == "difference") {
        //补差额
        uni.$u.http
          .post(`/api/order/fill`, {
            order_id: this.orderid,
            pay_type: this.pay_type,
          })
          .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) {
                  this.$u.toast(this.i18n.Paymentsuccess);
                  console.log("success:" + JSON.stringify(res));
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "confirm",
                    });
                  }, 800);
                },
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
                // success: (result) => {
                //
                // 	// console.log(result);

                // },
                // fail: (error) => {
                // 	console.log(error);
                // },
              });
            }
            uni.showToast({
              title: this.i18n.Paymentsuccess,
              icon: "none",
            });
            //一秒钟之后返回上一页
            let timer = setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
              clearTimeout(timer);
            }, 1000);
          });
        return;
      } else if (this.orderType == "bond") {
        //支付保证金
        uni.$u.http
          .post(`/api/order/earnest_pay`, {
            order_id: this.orderid,
          })
          .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) {
                  this.$u.toast("支付成功");
                  console.log("success:" + JSON.stringify(res));
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "confirm",
                    });
                  }, 800);
                },
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
              });
            }
            //提示支付成功
            uni.showToast({
              title: "支付成功",
              icon: "none",
            });
            //一秒钟之后返回上一页
            let timer = setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
              clearTimeout(timer);
            }, 1000);
          });
        return;
      }
      if (this.type == "") {
        uni.$u.http
          .post("/api/order/payment", {
            order_id: this.orderid,
            pay_type: this.pay_type,
            customer_currency: "RMB",
          })
          .then((res) => {
            console.log(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) {
                  this.$u.toast(this.i18n.Paymentsuccess);
                  console.log("success:" + JSON.stringify(res));
                  setTimeout(() => {
                    uni.navigateTo({
                      url: "/pageA/confirm",
                    });
                  }, 800);
                },
                fail: function (err) {
                  console.log("fail:" + JSON.stringify(err));
                },
                // success: (result) => {
                //
                // 	// console.log(result);

                // },
                // fail: (error) => {
                // 	console.log(error);
                // },
              });
            } else {
              this.$u.toast(this.i18n.Paymentsuccess);
              setTimeout(() => {
                uni.navigateTo({
                  url: "/pageA/confirm",
                });
              }, 800);
            }

            uni.showToast({
              title: this.i18n.Paymentsuccess,
              icon: "none",
            });
            uni.navigateBack({
              delta: 1,
            });
          })
          .catch(() => {});
      } else {
        uni.$u.http
          .post("/api/pay", {
            order_id: this.orderid,
            pay_type: this.mode == 2 ? "customer_service" : 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(this.i18n.Paymentsuccess);
              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/express/express",
                });
              }, 800);
            }
            // uni.navigateTo({
            // 	url: 'confirm'
            // })
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.payment {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #222222;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
}

.content {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #777777;
  line-height: 28rpx;
  text-align: left;
  font-style: normal;
}

.stateac {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #ff1515;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
}

.unstate {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #222222;
  line-height: 34rpx;
  text-align: left;
  font-style: normal;
}

.confirm {
  position: fixed;
  bottom: 66rpx;
  width: 702rpx;
  height: 84rpx;
  background: #f83224;
  border-radius: 44rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 84rpx;
  text-align: center;
  font-style: normal;
}

.payitem {
  width: 702rpx;
  height: 140rpx;
  background: #ffffff;
  border-radius: 12rpx;
  padding: 34rpx 24rpx;
  box-sizing: border-box;
}

.back {
  padding: 20rpx 24rpx;
  box-sizing: border-box;

  .topbox {
    position: relative;

    .state {
      // width: 128rpx;
      // height: 56rpx;
      background: #ffffff;
      border-radius: 6rpx;
      padding: 12rpx;
      box-sizing: border-box;
    }

    .paysum {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
    }

    .numbe {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 28rpx;
      color: #000000;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      margin-top: 20rpx;
    }
  }
}
</style>