123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270 |
- <template>
- <div class="payment-settings">
- <s-header :name="$t('remote.C29')" :noback="false" />
- <!-- 设备名称标题 -->
- <div class="device-header">
- <div class="vertical-indicator"></div>
- <h3 class="device-name">
- {{ $t("device.equipmentName") }}:{{ deviceName }}
- </h3>
- </div>
- <!-- 税收设置卡片 -->
- <div class="settings-card">
- <!-- 税费开关 -->
- <div class="payment-item">
- <div class="payment-info">
- <van-icon name="balance-pay" class="payment-icon" />
- <div class="payment-detail">
- <h3 class="payment-title">{{ $t("tax.taxFee") }}</h3>
- <p class="payment-desc">{{ $t("tax.taxFeeDesc") }}</p>
- </div>
- </div>
- <van-switch
- :model-value="taxStatus"
- size="22px"
- @click="handleSubmit"
- />
- </div>
- <!-- 税率输入(条件渲染) -->
- <div v-if="taxStatus" class="tax-rate-input">
- <van-form @submit="changeTaxRate">
- <van-field
- v-model="taxRate"
- type="number"
- :label="$t('tax.taxRate')"
- :placeholder="$t('tax.ratePlaceholder')"
- :rules="[
- { required: true, message: $t('tax.rateRequired') },
- {
- pattern: /^(100(\.\d{1,2})?|1[1-9]\d(\.\d{1,2})?|200(\.0{1,2})?)$/,
- message: $t('tax.rateInvalid'),
- },
- ]"
- >
- <template #right-icon>
- <span class="percentage-symbol">%</span>
- </template>
- </van-field>
- <van-button
- type="primary"
- size="small"
- class="update-btn"
- native-type="submit"
- >
- {{ $t("tax.update") }}
- </van-button>
- </van-form>
- </div>
- </div>
- </div>
- </template>
- <script>
- import sHeader from "@/components/SimpleHeader";
- import {
- getDeviceDetal,
- updateTaxStatus,
- updateTaxRate,
- } from "@/service/device";
- import { showConfirmDialog, showSuccessToast } from "vant";
- import { useRoute } from "vue-router";
- import { ref } from "vue";
- import { useI18n } from "vue-i18n";
- import { onMounted } from "vue";
- export default {
- components: { sHeader },
- setup() {
- const { t } = useI18n();
- const route = useRoute();
- const deviceId = ref(route.query.deviceId);
- const deviceName = ref(route.query.name);
- const deviceDetal = ref(null);
- const taxStatus = ref(false);
- const taxRate = ref(100.00);
- onMounted(async () => {
- await getDeviceInfo();
- });
- // 获取设备数据
- const getDeviceInfo = async () => {
- const { data } = await getDeviceDetal({ id: deviceId.value });
- if (data.code === "00000") {
- deviceDetal.value = data.data;
- if (deviceDetal.value.taxStatus) {
- taxStatus.value = deviceDetal.value.taxStatus;
- taxRate.value = deviceDetal.value.taxRate;
- }
- }
- };
- const handleSubmit = () => {
- showConfirmDialog({
- title: t("device.operationConfirmation"),
- message: t("device.pleaseConfirmAgainWhetherToOperate"),
- })
- .then(async () => {
- const { data } = await updateTaxStatus({
- equipmentId: deviceId.value,
- taxStatus: !taxStatus.value,
- });
- if (data.code === "00000") {
- taxStatus.value = !taxStatus.value;
- if (taxStatus.value) {
- taxRate.value = deviceDetal.value.taxRate;
- }
- }
- })
- .catch(() => {
- // on cancel
- });
- };
- const changeTaxRate = async() => {
- showConfirmDialog({
- title: t("device.operationConfirmation"),
- message: t("device.pleaseConfirmAgainWhetherToOperate"),
- })
- .then(async () => {
- const { data } = await updateTaxRate({
- equipmentId: deviceId.value,
- taxRate: taxRate.value,
- });
- if (data.code === "00000") {
- showSuccessToast(t("device.modificationSucceeded"));
- }
- })
- .catch(() => {
- // on cancel
- });
- };
- return {
- deviceName,
- taxStatus,
- taxRate,
- handleSubmit,
- changeTaxRate,
- };
- },
- };
- </script>
- <style lang="less" scoped>
- .payment-settings {
- --payment-bg: #ffffff;
- --border-color: #ebedf0;
- --active-color: #4d6add;
- --text-primary: #323233;
- --text-secondary: #969799;
- background: #f7f8fa;
- min-height: 100vh;
- .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: #fff;
- border-radius: 12px;
- margin: 12px 16px;
- padding: 16px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
- }
- .payment-item {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .payment-info {
- display: flex;
- align-items: center;
- }
- .payment-icon {
- font-size: 24px;
- color: #4dc294;
- margin-right: 12px;
- }
- .payment-title {
- font-size: 15px;
- color: #333;
- margin-bottom: 4px;
- width: 90%;
- }
- .payment-desc {
- font-size: 12px;
- color: #666;
- width: 90%;
- }
- .tax-rate-input {
- margin-top: 16px;
- padding-top: 16px;
- border-top: 1px solid #eee;
- }
- .percentage-symbol {
- color: #999;
- padding-left: 4px;
- }
- .update-btn {
- margin-top: 12px;
- width: 120px;
- border-radius: 18px;
- }
- /* 移动端适配 */
- @media (max-width: 480px) {
- .device-name {
- font-size: 15px;
- }
- .payment-title {
- font-size: 14px;
- }
- .tax-rate-input {
- margin-top: 12px;
- }
- }
- }
- </style>
|