index.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <div class="payment-settings">
  3. <s-header :name="$t('remote.C29')" :noback="false" />
  4. <!-- 设备名称标题 -->
  5. <div class="device-header">
  6. <div class="vertical-indicator"></div>
  7. <h3 class="device-name">
  8. {{ $t("device.equipmentName") }}:{{ deviceName }}
  9. </h3>
  10. </div>
  11. <!-- 税收设置卡片 -->
  12. <div class="settings-card">
  13. <!-- 税费开关 -->
  14. <div class="payment-item">
  15. <div class="payment-info">
  16. <van-icon name="balance-pay" class="payment-icon" />
  17. <div class="payment-detail">
  18. <h3 class="payment-title">{{ $t("tax.taxFee") }}</h3>
  19. <p class="payment-desc">{{ $t("tax.taxFeeDesc") }}</p>
  20. </div>
  21. </div>
  22. <van-switch
  23. :model-value="taxStatus"
  24. size="22px"
  25. @click="handleSubmit"
  26. />
  27. </div>
  28. <!-- 税率输入(条件渲染) -->
  29. <div v-if="taxStatus" class="tax-rate-input">
  30. <van-form @submit="changeTaxRate">
  31. <van-field
  32. v-model="taxRate"
  33. type="number"
  34. :label="$t('tax.taxRate')"
  35. :placeholder="$t('tax.ratePlaceholder')"
  36. :rules="[
  37. { required: true, message: $t('tax.rateRequired') },
  38. {
  39. pattern: /^(100(\.\d{1,2})?|1[1-9]\d(\.\d{1,2})?|200(\.0{1,2})?)$/,
  40. message: $t('tax.rateInvalid'),
  41. },
  42. ]"
  43. >
  44. <template #right-icon>
  45. <span class="percentage-symbol">%</span>
  46. </template>
  47. </van-field>
  48. <van-button
  49. type="primary"
  50. size="small"
  51. class="update-btn"
  52. native-type="submit"
  53. >
  54. {{ $t("tax.update") }}
  55. </van-button>
  56. </van-form>
  57. </div>
  58. </div>
  59. </div>
  60. </template>
  61. <script>
  62. import sHeader from "@/components/SimpleHeader";
  63. import {
  64. getDeviceDetal,
  65. updateTaxStatus,
  66. updateTaxRate,
  67. } from "@/service/device";
  68. import { showConfirmDialog, showSuccessToast } from "vant";
  69. import { useRoute } from "vue-router";
  70. import { ref } from "vue";
  71. import { useI18n } from "vue-i18n";
  72. import { onMounted } from "vue";
  73. export default {
  74. components: { sHeader },
  75. setup() {
  76. const { t } = useI18n();
  77. const route = useRoute();
  78. const deviceId = ref(route.query.deviceId);
  79. const deviceName = ref(route.query.name);
  80. const deviceDetal = ref(null);
  81. const taxStatus = ref(false);
  82. const taxRate = ref(100.00);
  83. onMounted(async () => {
  84. await getDeviceInfo();
  85. });
  86. // 获取设备数据
  87. const getDeviceInfo = async () => {
  88. const { data } = await getDeviceDetal({ id: deviceId.value });
  89. if (data.code === "00000") {
  90. deviceDetal.value = data.data;
  91. if (deviceDetal.value.taxStatus) {
  92. taxStatus.value = deviceDetal.value.taxStatus;
  93. taxRate.value = deviceDetal.value.taxRate;
  94. }
  95. }
  96. };
  97. const handleSubmit = () => {
  98. showConfirmDialog({
  99. title: t("device.operationConfirmation"),
  100. message: t("device.pleaseConfirmAgainWhetherToOperate"),
  101. })
  102. .then(async () => {
  103. const { data } = await updateTaxStatus({
  104. equipmentId: deviceId.value,
  105. taxStatus: !taxStatus.value,
  106. });
  107. if (data.code === "00000") {
  108. taxStatus.value = !taxStatus.value;
  109. if (taxStatus.value) {
  110. taxRate.value = deviceDetal.value.taxRate;
  111. }
  112. }
  113. })
  114. .catch(() => {
  115. // on cancel
  116. });
  117. };
  118. const changeTaxRate = async() => {
  119. showConfirmDialog({
  120. title: t("device.operationConfirmation"),
  121. message: t("device.pleaseConfirmAgainWhetherToOperate"),
  122. })
  123. .then(async () => {
  124. const { data } = await updateTaxRate({
  125. equipmentId: deviceId.value,
  126. taxRate: taxRate.value,
  127. });
  128. if (data.code === "00000") {
  129. showSuccessToast(t("device.modificationSucceeded"));
  130. }
  131. })
  132. .catch(() => {
  133. // on cancel
  134. });
  135. };
  136. return {
  137. deviceName,
  138. taxStatus,
  139. taxRate,
  140. handleSubmit,
  141. changeTaxRate,
  142. };
  143. },
  144. };
  145. </script>
  146. <style lang="less" scoped>
  147. .payment-settings {
  148. --payment-bg: #ffffff;
  149. --border-color: #ebedf0;
  150. --active-color: #4d6add;
  151. --text-primary: #323233;
  152. --text-secondary: #969799;
  153. background: #f7f8fa;
  154. min-height: 100vh;
  155. .device-header {
  156. display: flex;
  157. align-items: center;
  158. padding: 12px 15px;
  159. background: #fff;
  160. margin: 12px 16px;
  161. border-radius: 8px;
  162. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  163. .vertical-indicator {
  164. width: 4px;
  165. height: 15px;
  166. background: var(--active-color, #4d6add);
  167. border-radius: 2px;
  168. margin-right: 10px;
  169. }
  170. .device-name {
  171. margin: 0;
  172. font-size: 15px;
  173. color: #404d74;
  174. font-weight: 550;
  175. // 长名称处理
  176. overflow: hidden;
  177. text-overflow: ellipsis;
  178. white-space: nowrap;
  179. max-width: 70vw;
  180. }
  181. }
  182. .settings-card {
  183. background: #fff;
  184. border-radius: 12px;
  185. margin: 12px 16px;
  186. padding: 16px;
  187. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  188. }
  189. .payment-item {
  190. display: flex;
  191. justify-content: space-between;
  192. align-items: center;
  193. }
  194. .payment-info {
  195. display: flex;
  196. align-items: center;
  197. }
  198. .payment-icon {
  199. font-size: 24px;
  200. color: #4dc294;
  201. margin-right: 12px;
  202. }
  203. .payment-title {
  204. font-size: 15px;
  205. color: #333;
  206. margin-bottom: 4px;
  207. width: 90%;
  208. }
  209. .payment-desc {
  210. font-size: 12px;
  211. color: #666;
  212. width: 90%;
  213. }
  214. .tax-rate-input {
  215. margin-top: 16px;
  216. padding-top: 16px;
  217. border-top: 1px solid #eee;
  218. }
  219. .percentage-symbol {
  220. color: #999;
  221. padding-left: 4px;
  222. }
  223. .update-btn {
  224. margin-top: 12px;
  225. width: 120px;
  226. border-radius: 18px;
  227. }
  228. /* 移动端适配 */
  229. @media (max-width: 480px) {
  230. .device-name {
  231. font-size: 15px;
  232. }
  233. .payment-title {
  234. font-size: 14px;
  235. }
  236. .tax-rate-input {
  237. margin-top: 12px;
  238. }
  239. }
  240. }
  241. </style>