VAVABUY/pages/bank/bank_pay.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="item">
            <view class="label">
              <trans _t="充值金额" />:
            </view>
            <view class="value">{{ currency }}<text>{{ obj.money }}</text></view>
          </view>
          <view class="item">
            <view class="item_left">
              <view class="label">
                <trans _t="银行名称" />:
              </view>
              <view class="value">{{ obj.setting.open }}</view>
            </view>
            <up-copy :content="obj.setting.open" :notice="t('复制成功')">
              <trans class="copy" _t="复制" />
            </up-copy>
          </view>
          <view class="item">
            <view class="item_left">
              <view class="label">
                <trans _t="收款人" />:
              </view>
              <view class="value">{{ obj.setting.name }}</view>
            </view>
            <up-copy :content="obj.setting.name" :notice="t('复制成功')">
              <trans class="copy" _t="复制" />
            </up-copy>
          </view>
          <view class="item">
            <view class="item_left">
              <view class="label">
                <trans _t="银行卡" />:
              </view>
              <view class="value">{{ obj.setting.card }}</view>
            </view>
            <up-copy :content="obj.setting.card" :notice="t('复制成功')">
              <trans class="copy" _t="复制" />
            </up-copy>
          </view>
        </view>
        <view class="desc">
          <view class="desc_title">
            <trans _t="充值步骤" />:
          </view>
          <view class="desc_cont">
            <view class="cont_list" v-for="item, index in obj.steps" :key="index">
              {{ index + 1 }}.{{ item }}
            </view>
          </view>
        </view>
      </view>
      <view class="btn" @click="paySubmit">
        <trans _t="完成付款" />
      </view>
    </view>
  </Theme>
</template>
<script setup>
import { ref, computed } from "vue";
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import { useSystemStore, useUserStore } from "@/store";
import { Toast } from "@/utils"
import { PAY_SUBMIT } from "@/api"
import { onLoad } from "@dcloudio/uni-app";
import { t } from "@/locale"

const useSystem = useSystemStore();
const obj = ref({});

const currency = computed(() => useSystem.getCurrency);

const paySubmit = async () => {
  try {
    const res = await PAY_SUBMIT({
      id: obj.value.id,
      money: obj.value.money,
      account: obj.value.account,
      isbefore: 1
    })
    Toast(res.msg)
  } catch (error) {
    if (error.ret == 3) {
      Toast(res.msg).then(res => {
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      })
    } else {
      Toast(error.msg)
    }
  }
}

onLoad((options) => {
  obj.value = JSON.parse(options.obj || '{}')
})

</script>
<style lang="less" scoped>
@import url('@/style.less');

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

  .content {
    padding: 24rpx;
    flex-grow: 1;

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

      .item {
        .flex_position(space-between);
        color: var(--text);
        column-gap: 24rpx;
        line-height: 50rpx;

        .label {
          .size(28rpx);
        }

        .value {
          .size(28rpx);

          text {
            .size(40rpx);
            margin-left: 12rpx;
          }
        }

        &_left {
          .ver();
          column-gap: 24rpx;
        }

        &:first-child {
          justify-content: unset;
        }

        .copy {
          color: var(--text);
          .size(28rpx);
        }
      }

      .item_address {
        margin-top: 16rpx;

        .label {
          color: var(--text);
          .size(28rpx);
        }

        .value {
          border: 1px solid var(--borderColor);
          margin-top: 16rpx;
          .flex_position(space-between);
          padding: 12rpx;
          column-gap: 16rpx;
          .size(28rpx);
          color: var(--text);

          .copy {
            border: 1px solid var(--primary);
            color: var(--primary);
            .size(24rpx);
            padding: 6rpx 18rpx;
            border-radius: 50rpx;

            text {
              white-space: nowrap;
            }
          }
        }
      }

      .item_qrimg {
        margin-top: 16rpx;
        aspect-ratio: 1 / 1;
        width: 100%;
        height: 100%;

        .img {
          width: inherit;
          height: inherit;
          display: block;
        }
      }
    }

    .desc {
      margin-top: 16rpx;

      &_title {
        color: var(--text);
        .size(28rpx);
        line-height: 60rpx;
      }

      &_cont {
        .cont_list {
          color: var(--text);
          .size(24rpx);
          line-height: 40rpx;
        }
      }
    }
  }

  .btn {
    background-color: var(--black);
    height: 52px;
    padding: 16rpx 30rpx;
    color: var(--light);
    font-weight: 700;
    .size(28rpx);
    .flex_center();
  }
}
</style>