#插件需求# 到底哪里有问题

分类：招聘与外包
插件需求

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>财务转换工具 - Apple风格</title>  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
  <style>  
    * {  
      margin: 0;  
      padding: 0;  
      box-sizing: border-box;  
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;  
    }  

    body {  
      background: linear-gradient(135deg, #f5f7ff 0%, #f0f5ff 100%);  
      color: #1d1d1f;  
      line-height: 1.6;  
      min-height: 100vh;  
      padding: 2rem;  
      max-width: 1200px;  
      margin: 0 auto;  
    }  

    .header {  
      text-align: center;  
      padding: 4rem 0 3rem;  
    }  

    .header h1 {  
      font-size: 48px;  
      font-weight: 700;  
      letter-spacing: -0.8px;  
      margin-bottom: 1rem;  
      background: linear-gradient(90deg, #0066cc 0%, #0071e3 100%);  
      -webkit-background-clip: text;  
      -webkit-text-fill-color: transparent;  
    }  

    .header p {  
      font-size: 21px;  
      color: #86868b;  
      max-width: 600px;  
      margin: 0 auto;  
    }  

    .container {  
      display: grid;  
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));  
      gap: 2.5rem;  
      justify-content: center;  
    }  

    .card {  
      background: #ffffff;  
      border-radius: 20px;  
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);  
      padding: 2.5rem;  
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);  
      border: 1px solid rgba(0, 113, 227, 0.1);  
    }  

    .card:hover {  
      transform: translateY(-8px);  
      box-shadow: 0 20px 50px rgba(0, 113, 227, 0.15);  
    }  

    .card-header {  
      display: flex;  
      align-items: center;  
      gap: 1rem;  
      margin-bottom: 2rem;  
      padding-bottom: 1.5rem;  
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);  
    }  

    .card-header h2 {  
      font-size: 32px;  
      font-weight: 600;  
      color: #1d1d1f;  
    }  

    .card-icon {  
      width: 48px;  
      height: 48px;  
      border-radius: 14px;  
      display: flex;  
      align-items: center;  
      justify-content: center;  
      background: rgba(0, 113, 227, 0.08);  
    }  

    .input-group {  
      margin-bottom: 2rem;  
    }  

    label {  
      display: block;  
      margin-bottom: 12px;  
      font-size: 17px;  
      font-weight: 500;  
      color: #424245;  
    }  

    input, select {  
      width: 100%;  
      padding: 16px;  
      font-size: 18px;  
      border: 1px solid #d2d2d7;  
      border-radius: 14px;  
      transition: all 0.3s;  
      background: #fafafa;  
    }  

    input:focus {  
      outline: none;  
      border-color: #0071e3;  
      box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);  
      background: #fff;  
    }  

    .result-box {  
      background: #f8f9ff;  
      border-radius: 14px;  
      padding: 20px;  
      margin-top: 1rem;  
      min-height: 80px;  
      border: 1px dashed #0071e3;  
    }  

    .result-text {  
      font-size: 20px;  
      color: #0066cc;  
      font-weight: 500;  
      line-height: 1.8;  
      word-break: break-all;  
    }  

    .btn-group {  
      display: flex;  
      gap: 15px;  
      margin-top: 1.5rem;  
    }  

    button {  
      flex: 1;  
      padding: 16px;  
      font-size: 18px;  
      font-weight: 600;  
      border-radius: 14px;  
      border: none;  
      cursor: pointer;  
      transition: all 0.3s;  
      background: #0071e3;  
      color: white;  
    }  

    button:hover {  
      background: #0066cc;  
      transform: translateY(-2px);  
    }  

    button.copy {  
      background: #34c759;  
    }  

    button.copy:hover {  
      background: #2db54d;  
    }  

    .hint {  
      font-size: 14px;  
      color: #86868b;  
      margin-top: 10px;  
      font-style: italic;  
    }  

    .footer {  
      text-align: center;  
      padding: 3rem 0 2rem;  
      color: #86868b;  
      font-size: 15px;  
      border-top: 1px solid rgba(0, 0, 0, 0.05);  
      margin-top: 3rem;  
    }  

    @media (max-width: 768px) {  
      .container {  
        grid-template-columns: 1fr;  
      }  

      .header h1 {  
        font-size: 36px;  
      }  

      .header p {  
        font-size: 18px;  
      }  
    }  
  </style>  
</head>  
<body>  
  <div id="app">  
    <div class="header">  
      <h1>财务大写转换工具</h1>  
      <p>符合银行支票填写规范的人民币与日期大写转换</p>  
    </div>  

    <div class="container">  
      <!-- 人民币大写转换卡片 -->  
      <div class="card">  
        <div class="card-header">  
          <div class="card-icon">¥</div>  
          <h2>人民币大写转换</h2>  
        </div>  

        <div class="input-group">  
          <label for="amount">输入金额 (阿拉伯数字)</label>  
          <input   
            type="number"   
            id="amount"   
            v-model="amount"   
            placeholder="例如：12345.67"   
            step="0.01"  
            min="0"  
            @input="convertCurrency"  
          >  
          <div class="hint">提示：最大支持999999999999.99元</div>  
        </div>  

        <div class="input-group">  
          <label>大写结果</label>  
          <div class="result-box">  
            <p class="result-text">{{ currencyResult || '人民币' }}</p>  
          </div>  
        </div>  

        <div class="btn-group">  
          <button @click="convertCurrency">转换</button>  
          <button class="copy" @click="copyResult('currency')">复制结果</button>  
        </div>  
      </div>  

      <!-- 日期大写转换卡片 -->  
      <div class="card">  
        <div class="card-header">  
          <div class="card-icon">?</div>  
          <h2>日期大写转换</h2>  
        </div>  

        <div class="input-group">  
          <label for="date">选择日期</label>  
          <input   
            type="date"   
            id="date"   
            v-model="dateInput"  
            @change="convertDate"  
          >  
        </div>  

        <div class="input-group">  
          <label>大写结果 (符合支票规范)</label>  
          <div class="result-box">  
            <p class="result-text">{{ dateResult || '日期大写' }}</p>  
          </div>  
        </div>  

        <div class="btn-group">  
          <button @click="convertDate">转换</button>  
          <button class="copy" @click="copyResult('date')">复制结果</button>  
        </div>  
      </div>  
    </div>  

    <div class="footer">  
      <p>© 2025 财务转换工具 | 符合《票据和结算凭证填写规范》</p>  
    </div>  
  </div>  

  <script>  
    const { createApp, ref } = Vue   

    createApp({  
      setup() {  
        const amount = ref('')  
        const currencyResult = ref('')  
        const dateInput = ref('')  
        const dateResult = ref('')  
        const copyStatus = ref({ currency: false, date: false })  

        // 人民币大写转换函数   
        const convertCurrency = () => {  
          if (!amount.value) {  
            currencyResult.value = '请输入金额'  
            return   
          }  

          const num = parseFloat(amount.value)  
          if (isNaN(num) || num < 0 || num > 999999999999.99) {  
            currencyResult.value = '金额无效'  
            return   
          }  

          currencyResult.value = formatCurrency(num)  
        }  

        // 日期大写转换函数   
        const convertDate = () => {  
          if (!dateInput.value) {  
            dateResult.value = '请选择日期'  
            return   
          }  

          const date = new Date(dateInput.value)  
          if (isNaN(date.getTime())) {  
            dateResult.value = '日期无效'  
            return   
          }  

          dateResult.value = formatDate(date)  
        }  

        // 复制结果到剪贴板   
        const copyResult = (type) => {  
          const text = type === 'currency' ? currencyResult.value : dateResult.value   
          if (!text) return   

          navigator.clipboard.writeText(text).then(() => {  
            copyStatus.value[type] = true   
            setTimeout(() => copyStatus.value[type] = false, 2000)  
          })  
        }  

        // 人民币大写格式化函数   
        const formatCurrency = (num) => {  
          const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']  
          const units = ['', '拾', '佰', '仟']  
          const bigUnits = ['', '万', '亿']  

          // 处理小数部分（角和分）  
          let integerPart = Math.floor(num)  
          let decimalPart = Math.round((num - integerPart) * 100)  

          // 整数部分转换   
          let result = ''  
          if (integerPart > 0) {  
            let unitIndex = 0   
            let zeroFlag = false // 连续零标志   

            while (integerPart > 0) {  
              const segment = integerPart % 10000   
              if (segment === 0) {  
                if (!zeroFlag) {  
                  zeroFlag = true   
                  if (result !== '') {  
                    result = digits[0]((null))  + result   
                  }  
                }  
              } else {  
                let segmentStr = ''  
                let temp = segment   
                let segmentZeroFlag = false   

                for (let i = 0; i < 4; i++) {  
                  const digit = temp % 10   
                  temp = Math.floor(temp / 10)  

                  if (digit === 0) {  
                    if (!segmentZeroFlag && segmentStr !== '') {  
                      segmentZeroFlag = true   
                      segmentStr = digits[0]((null))  + segmentStr   
                    }  
                  } else {  
                    segmentStr = digits[digit] + units[i] + segmentStr   
                    segmentZeroFlag = false   
                  }  
                }  

                result = segmentStr + bigUnits[unitIndex] + result   
                zeroFlag = false   
              }  

              integerPart = Math.floor(integerPart / 10000)  
              unitIndex++  
            }  

            result += '元'  
          } else {  
            result = '零元'  
          }  

          // 处理小数部分   
          if (decimalPart > 0) {  
            const jiao = Math.floor(decimalPart / 10)  
            const fen = decimalPart % 10   

            if (jiao > 0) {  
              result += digits[jiao] + '角'  
            }  

            if (fen > 0) {  
              result += digits[fen] + '分'  
            }  
          } else {  
            result += '整'  
          }  

          return '人民币' + result   
        }  

        // 日期大写格式化函数（符合银行支票规范）  
        const formatDate = (date) => {  
          const year = date.getFullYear()  
          const month = date.getMonth() + 1   
          const day = date.getDate()  

          const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖', '拾']  

          // 年份转换   
          let yearStr = ''  
          year.toString().split('').forEach(char => {  
            yearStr += digits[parseInt(char)]  
          })  
          yearStr += '年'  

          // 月份转换（符合会计规范）  
          let monthStr = ''  
          if (month === 1 || month === 2 || month === 10) {  
            monthStr = '零' + digits[month] + '月'  
          } else if (month === 11) {  
            monthStr = '壹拾壹月'  
          } else if (month === 12) {  
            monthStr = '壹拾贰月'  
          } else {  
            monthStr = digits[month] + '月'  
          }  

          // 日期转换（符合会计规范）  
          let dayStr = ''  
          if (day >= 1 && day <= 9) {  
            dayStr = '零' + digits[day] + '日'  
          } else if (day === 10 || day === 20 || day === 30) {  
            dayStr = '零' + digits[Math.floor(day/10)] + digits[10](https://tool.lanrentuku.com/rmb/)  + '日'  
          } else if (day >= 11 && day <= 19) {  
            dayStr = '壹' + digits[10](https://tool.lanrentuku.com/rmb/)  + digits[day % 10] + '日'  
          } else if (day >= 21 && day <= 29) {  
            dayStr = digits[2](https://www.55188.com/thread-33025726-1-1.html)  + digits[10](https://tool.lanrentuku.com/rmb/)  + digits[day % 20] + '日'  
          } else if (day === 31) {  
            dayStr = '叁拾壹日'  
          } else {  
            dayStr = digits[Math.floor(day/10)] + digits[10](https://tool.lanrentuku.com/rmb/)  + digits[day % 10] + '日'  
          }  

          return yearStr + monthStr + dayStr   
        }  

        return {  
          amount,  
          currencyResult,  
          dateInput,  
          dateResult,  
          copyStatus,  
          convertCurrency,  
          convertDate,  
          copyResult   
        }  
      }  
    }).mount('#app')  
  </script>  
</body>  
</html>```
2025-09-15 22:27 负责人:无分享
0 个回复

要回复问题请先登录或注册
#插件需求# 到底哪里有问题

0 个回复

公告

相关问题

#插件需求# 到底哪里有问题

与内容相关的链接

0 个回复

公告

相关问题
