VAVABUY/pages/dashboard/payment.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="支付方式" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="cont">
          <view class="payable_price">
            {{ symbol.title }}{{ symbol.symbol }}
            <text>{{ money }}</text>
          </view>
          <!-- <view class="logistics_step">
            <trans _t="请在" />
            <text class="step_time">{{ useGlobal().$format(payInfo.enddate || '') }}</text>
            <trans _t="取消付款提示" />
          </view> -->
          <view class="wallet_pay">
            <view class="wallet_title">
              <trans _t="用余额支付" />
              <view class="tag">
                <trans _t="推荐" />
              </view>
            </view>
            <view class="wallet_content">
              <view class="wallet_top">
                <up-radio-group
                  v-model="radioValue"
                  activeColor="var(--primary)"
                >
                  <up-radio name="wallet" />
                </up-radio-group>
                <view class="wallet_img">
                  <image
                    src="../../static/shop/balance.png"
                    class="_img"
                  ></image>
                </view>
                <view class="payment_text">
                  <view class="payment_title">
                    <trans _t="钱包" />
                  </view>
                  <view class="wallet_amount">¥{{ userInfo.money }}</view>
                </view>
              </view>
              <view class="wallet_bottom" v-if="differenceMoney < 0">
                <view class="bottom_left">
                  <trans _t="余额不足需充值" />
                  <text class="money">¥{{ Math.abs(differenceMoney) }}</text>
                </view>
                <view class="bottom_right">
                  <trans _t="充值" />
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="handling_fee">
            <trans _t="手续费" />&nbsp;:&nbsp;¥0
          </view>
          <view class="amount">
            <text>{{ symbol.title }}</text>
            <text>{{ symbol.symbol }}</text>
            <text>{{ money }}</text>
          </view>
          <view class="footer_btn" @click="paySubmit">
            <trans _t="支付" />
            <text>{{ symbol.title }}</text>
            <text>{{ symbol.symbol }}</text>
            <text>{{ money }}</text>
          </view>
        </view>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { onLoad } from "@dcloudio/uni-app";
import { ref, nextTick, computed } from "vue";
import { SHOP_PACKAGES_PAY } from "@/api";
import { useSystemStore, useUserStore, useTabbarStore } from "@/store";
import { useGlobal, Toast } from "@/utils";

const useSystem = useSystemStore();
const useUser = useUserStore();
const useTabbar = useTabbarStore();

const oid = ref("");
const money = ref("");
const payInfo = ref({});
const radioValue = ref("wallet");

const symbol = computed(() => useSystem.getSymbol);
const userInfo = computed(() => useUser.getuserInfo);
const differenceMoney = computed(() => {
  let infoPrice = Number(userInfo.value.money);
  let payPrice = Number(money.value);
  if (infoPrice > payPrice || infoPrice == payPrice) {
    return 0;
  } else {
    return infoPrice - payPrice;
  }
});

const paySubmit = async () => {
  try {
    const res = await SHOP_PACKAGES_PAY({
      id: oid.value,
      payType: radioValue.value,
    });
    Toast(res.msg, 1000).then(() => {
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    });
  } catch (error) {
    Toast(error.msg);
  }
};

onLoad((options) => {
  oid.value = options.id;
  money.value = options.money;
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--bg);
  .flex();
  flex-direction: column;
  overflow: hidden;

  .content {
    flex-grow: 1;
    .flex();
    flex-direction: column;
    height: calc(100vh - 44px);
    overflow: hidden scroll;

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;

      .payable_price {
        color: var(--text);
        .size(48rpx);
        font-weight: 700;
        line-height: 60rpx;
        padding-top: 24rpx;
        text-align: center;
      }

      .logistics_step {
        color: var(--text-01);
        .size(28rpx);
        line-height: 40rpx;
        padding: 32rpx 24rpx 0;

        .step_time {
          margin: 0 8rpx;
          display: inline-block;
          color: var(--text);
          font-weight: 700;
        }
      }

      .wallet_pay {
        margin: 24rpx;
        padding: 24rpx;
        border-radius: 16rpx;
        background-color: var(--light);

        .wallet_title {
          .ver();
          .size(36rpx);
          font-weight: 700;
          height: 60rpx;
          color: var(--text);

          .tag {
            background-color: var(--danger);
            border-radius: 8rpx;
            color: var(--light);
            .size(24rpx);
            font-weight: 500;
            line-height: 40rpx;
            margin-left: 8rpx;
            padding: 0 8rpx;
          }
        }

        .wallet_content {
          margin-top: 24rpx;

          .wallet_top {
            /deep/ .u-radio-group {
              flex: none;

              .u-radio__icon-wrap {
                margin-right: 0;
              }
            }

            .ver();

            .wallet_img {
              width: 72rpx;
              height: 72rpx;
              margin: 0 24rpx;

              ._img {
                width: inherit;
                height: inherit;
              }
            }

            .payment_text {
              .ver(flex-end);
              color: var(--text);
              .size();
              font-weight: 500;

              .wallet_amount {
                margin-left: 8rpx;
                font-weight: 700;
              }
            }
          }

          .wallet_bottom {
            margin-top: 16rpx;
            padding: 16rpx 24rpx;
            background-color: var(--bg);
            border-radius: 8rpx;
            .flex_position(space-between);

            .bottom_left {
              color: var(--text-02);
              .size(24rpx);
              margin-right: 16rpx;

              .money {
                color: var(--primary);
              }
            }

            .bottom_right {
              height: 64rpx;
              background-color: var(--light);
              color: var(--primary);
              border: 1px solid var(--primary);
              border-radius: 16rpx;
              padding: 16rpx 30rpx;
              .flex_center();
              .size(24rpx);
              line-height: 1;
            }
          }
        }
      }
    }

    .footer {
      padding: 0 24rpx 24rpx;
      background-color: var(--bg);

      .handling_fee {
        color: var(--text-01);
        .size(28rpx);
        line-height: 60rpx;
        text-align: center;
      }

      .amount {
        color: var(--primary);
        .size(48rpx);
        font-weight: 700;
        line-height: 80rpx;
        text-align: center;
      }

      &_btn {
        background-color: var(--primary);
        color: var(--light);
        padding: 16rpx 30rpx;
        height: 96rpx;
        .flex_center();
        border-radius: 16rpx;
        font-weight: 700;
        .size(28rpx);
        column-gap: 8rpx;
      }
    }
  }
}
</style>