shenze-sysMan/src/views/device/payInfo/index.vue

<template>
  <div class="merchant-config-page">
    <!-- 顶部导航 -->
    <s-header :name="$t('remote.C32')" :noback="false" />

    <!-- 设备名称标题 -->
    <div class="device-header">
      <div class="vertical-indicator"></div>
      <h3 class="device-name">
        {{ $t("device.equipmentName") }}：{{ deviceName }}
      </h3>
    </div>

    <!-- 商户信息表单 -->
    <van-form @submit="handleSubmit">
      <div class="settings-card">
        <!-- Merchant ID -->
        <div class="config-item">
          <div class="config-info">
            <van-icon name="user-circle-o" class="config-icon" />
            <div class="config-detail">
              <h3 class="config-title">merchant_id</h3>
              <van-field
                v-model="configData.merchantId"
                class="config-input"
                :border="false"
                :rules="[
                {
                  required: true,
                  message: 'merchant_id',
                },
              ]"
              />
            </div>
          </div>
        </div>

        <!-- Secret Code -->
        <div class="config-item">
          <div class="config-info">
            <van-icon name="lock" class="config-icon" />
            <div class="config-detail">
              <h3 class="config-title">secret_code</h3>
              <van-field
                v-model="configData.secretCode"
                class="config-input"
                type="password"
                :border="false"
                :rules="[
                {
                  required: true,
                  message: 'secret_code',
                },
              ]"
              />
            </div>
          </div>
        </div>

        <!-- Product Ability Code -->
        <div class="config-item">
          <div class="config-info">
            <van-icon name="setting-o" class="config-icon" />
            <div class="config-detail">
              <h3 class="config-title">product_ability_code</h3>
              <van-field
                v-model="configData.productAbilityCode"
                class="config-input"
                :border="false"
                :rules="[
                {
                  required: true,
                  message: 'product_ability_code',
                },
              ]"
              />
            </div>
          </div>
        </div>

        <!-- Area Code -->
        <div class="config-item">
          <div class="config-info">
            <van-icon name="location-o" class="config-icon" />
            <div class="config-detail">
              <h3 class="config-title">area_code</h3>
              <van-field
                v-model="configData.areaCode"
                class="config-input"
                :border="false"
                :rules="[
                {
                  required: true,
                  message: 'area_code',
                },
              ]"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="submit-footer">
        <van-button round type="primary" class="submit-btn" native-type="submit">
          <template #icon>
            <van-icon name="success" class="btn-icon" />
          </template>
          {{ $t("device.modify") }}
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import sHeader from "@/components/SimpleHeader";
import { showConfirmDialog, showSuccessToast, showFailToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
import { getPayConfig, pushPayInfo } from "@/service/device/index";

export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const route = useRoute();
    const router = useRouter();
    const deviceId = ref(route.query.clientId);
    const deviceName = ref(route.query.name);

    // 配置数据
    const configData = ref({
      clientId: deviceId.value,
      merchantId: "",
      secretCode: "",
      productAbilityCode: "",
      areaCode: "",
    });

    onMounted(() => {
      if (deviceId.value) {
        handleGetPayConfig();
      }
    });

    const handleGetPayConfig = async () => {
      const { data } = await getPayConfig({ clientId: deviceId.value });
      if (data.data) {
        configData.value.merchantId = data.data.merchantId;
        configData.value.secretCode = data.data.secretCode;
        configData.value.productAbilityCode = data.data.productAbilityCode;
        configData.value.areaCode = data.data.areaCode;
      }
    };

    const handleSubmit = () => {
      showConfirmDialog({
        title: t("device.operationConfirmation"),
        message: t("device.pleaseConfirmAgainWhetherToOperate"),
      })
        .then(async () => {
          // on confirm
          const { data } = await pushPayInfo(configData.value);
          if (data.code === "00000") {
            showSuccessToast(t("device.modificationSucceeded"));
            setTimeout(() => {
              router.go(-1);
            }, 2000);
          } else {
            showFailToast(data.message);
          }
        })
        .catch(() => {
          // on cancel
        });
    };

    return {
      deviceName,
      handleSubmit,
      configData,
    };
  },
};
</script>

<style lang="less" scoped>
@theme-color: #4d6add;
@light-bg: #f5f8ff;
@card-bg: #ffffff;
@text-dark: #333;
@text-light: #666;
@border-radius: 12px;
@card-shadow: 0 4px 12px rgba(77, 106, 221, 0.15);
@hover-shadow: 0 8px 20px rgba(77, 106, 221, 0.25);
@transition: all 0.3s ease;

.merchant-config-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: @light-bg;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    sans-serif;
}

.device-header {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: #fff;
  margin: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .vertical-indicator {
    width: 4px;
    height: 15px;
    background: var(--active-color, #4d6add);
    border-radius: 2px;
    margin-right: 10px;
  }

  .device-name {
    margin: 0;
    font-size: 15px;
    color: #404d74;
    font-weight: 550;

    // 长名称处理
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 70vw;
  }
}

.settings-card {
  background-color: @card-bg;
  border-radius: @border-radius;
  box-shadow: @card-shadow;
  padding: 16px;
  margin: 0 16px 24px;
}

.config-item {
  margin-bottom: 24px;

  &:last-child {
    margin-bottom: 0;
  }
}

.config-info {
  display: flex;
  align-items: center;
}

.config-icon {
  font-size: 24px;
  color: @theme-color;
  margin-right: 16px;
}

.config-detail {
  flex: 1;
}

.config-title {
  font-size: 15px;
  font-weight: 500;
  color: @text-dark;
  margin: 0 0 8px;
}

.config-input {
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 10px 16px;

  :deep(.van-field__control) {
    font-size: 15px;
    color: @text-dark;
  }

  :deep(.van-field__placeholder) {
    color: #a0a4ab;
  }
}

.submit-footer {
  padding: 0 16px 24px;
  position: sticky;
  bottom: 0;
  background-color: @light-bg;
}

.submit-btn {
  width: 100%;
  height: 52px;
  background-color: @theme-color;
  border: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 16px fade(@theme-color, 35%);

  .btn-icon {
    font-size: 22px;
    margin-right: 8px;
  }

  &:active {
    opacity: 0.92;
    transform: translateY(1px);
  }

  &:disabled {
    opacity: 0.7;
    transform: none;
  }
}

// 响应式调整
@media (max-width: 360px) {
  .device-header .device-name {
    font-size: 16px;
  }

  .config-title {
    font-size: 14px;
  }

  .submit-btn {
    height: 48px;
    font-size: 16px;
  }
}
</style>