JCSS / jcss-miniprogram

<template>
  <view class="u-barcode" v-if="calcSizeDone">
    <canvas 
      v-if="showCanvas && !error" 
      :id="canvasId" 
      :canvas-id="canvasId" 
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    ></canvas>
    <image 
      v-else-if="!showCanvas && !error"
      :src="barcodeImage" 
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      mode="aspectFit"
    />
    <view 
      v-else
      class="error-container"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
    >
      <text class="error-text">{{ error }}</text>
    </view>
  </view>
</template>

<script>
import { nextTick } from 'vue'
import { t } from '../../libs/i18n'

export default {
  name: 'u-barcode',
  props: {
    // 条码值
    value: {
      type: [String, Number],
      required: true
    },
    // 条码格式
    format: {
      type: String,
      default: 'auto',
      validator: function (value) {
        return [
          'auto', 
          'CODE128', 'CODE128A', 'CODE128B', 'CODE128C',
          'EAN13', 'EAN8', 'EAN5', 'EAN2',
          'UPC', 'UPCA', 'UPCE',
          'CODE39',
          'ITF', 'ITF14',
          'MSI', 'MSI10', 'MSI11', 'MSI1010', 'MSI1110',
          'pharmacode',
          'codabar'
        ].includes(value)
      }
    },
    // 宽度
    width: {
      type: Number,
      default: 200
    },
    // 高度
    height: {
      type: Number,
      default: 80
    },
    // 是否显示文本
    displayValue: {
      type: Boolean,
      default: true
    },
    // 文本内容
    text: {
      type: String,
      default: undefined
    },
    // 字体选项
    fontOptions: {
      type: String,
      default: ''
    },
    // 字体
    font: {
      type: String,
      default: 'monospace'
    },
    // 文本对齐方式
    textAlign: {
      type: String,
      default: 'center'
    },
    // 文本位置
    textPosition: {
      type: String,
      default: 'bottom'
    },
    // 文本边距
    textMargin: {
      type: Number,
      default: 2
    },
    // 字体大小
    fontSize: {
      type: Number,
      default: 14
    },
    // 背景色
    background: {
      type: String,
      default: '#ffffff'
    },
    // 条码颜色
    lineColor: {
      type: String,
      default: '#000000'
    },
    // 边距
    margin: {
      type: Number,
      default: 10
    },
    // 上边距
    marginTop: {
      type: Number,
      default: undefined
    },
    // 下边距
    marginBottom: {
      type: Number,
      default: undefined
    },
    // 左边距
    marginLeft: {
      type: Number,
      default: undefined
    },
    // 右边距
    marginRight: {
      type: Number,
      default: undefined
    },
    // 使用canvas还是生成图片
    useCanvas: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      canvasId: 'barcode-' + Math.random().toString(36).substr(2, 9),
      barcodeImage: '',
      showCanvas: false,
      canvasWidth: 0,
      canvasHeight: 0,
      calcSizeDone: false,
      error: ''
    }
  },
  watch: {
    value() {
      this.generateBarcode()
    },
    format() {
      this.generateBarcode()
    },
    width() {
      this.generateBarcode()
    },
    height() {
      this.generateBarcode()
    },
    displayValue() {
      this.generateBarcode()
    },
    text() {
      this.generateBarcode()
    },
    font() {
      this.generateBarcode()
    },
    textAlign() {
      this.generateBarcode()
    },
    textPosition() {
      this.generateBarcode()
    },
    textMargin() {
      this.generateBarcode()
    },
    fontSize() {
      this.generateBarcode()
    },
    background() {
      this.generateBarcode()
    },
    lineColor() {
      this.generateBarcode()
    },
    margin() {
      this.generateBarcode()
    }
  },
  mounted() {
    /**
     * @author jry <ijry@qq.com>
     */
    this.$nextTick(() => {
      this.generateBarcode()
    })
  },
  methods: {
    /**
     * 生成条形码
     * @author jry <ijry@qq.com>
     * @param {String|Number} value - 条码值
     * @param {Object} options - 条码配置选项
     */
    generateBarcode() {
      // 统一处理默认值
      const margin = this.margin
      const options = {
        format: this.format || 'auto',
        width: this.width,
        height: this.height,
        displayValue: this.displayValue,
        text: this.text,
        fontOptions: this.fontOptions || '',
        font: this.font || 'monospace',
        textAlign: this.textAlign || 'center',
        textPosition: this.textPosition || 'bottom',
        textMargin: this.textMargin !== undefined ? this.textMargin : 2,
        fontSize: this.fontSize || 20,
        background: this.background || '#ffffff',
        lineColor: this.lineColor || '#000000',
        margin: margin,
        marginTop: this.marginTop !== undefined ? this.marginTop : margin,
        marginBottom: this.marginBottom !== undefined ? this.marginBottom : margin,
        marginLeft: this.marginLeft !== undefined ? this.marginLeft : margin,
        marginRight: this.marginRight !== undefined ? this.marginRight : margin
      }
      
      // 清理未定义的选项
      Object.keys(options).forEach(key => {
        if (options[key] === undefined) {
          delete options[key]
        }
      })
      
      if (this.useCanvas) {
        // 使用canvas渲染
        this.showCanvas = true
        this.$nextTick(() => {
          this.renderToCanvas(options)
        })
      } else {
        // 生成图片
        this.showCanvas = false
        this.renderToImage(options)
      }
    },
    
    /**
     * 渲染条形码到canvas
     * @author jry <ijry@qq.com>
     * @param {Object} options - 条码配置选项
     */
    async renderToCanvas(options) {
      try {
        // 计算canvas尺寸
        this.calculateCanvasSize(options)

        await nextTick()

        // 获取canvas上下文
        const ctx = uni.createCanvasContext(this.canvasId, this)
        
        // 清空画布
        ctx.setFillStyle(options.background)
        ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
        
        // 生成条形码数据
        const barcodeData = this.encodeBarcode(this.value, options.format)
        
        if (barcodeData) {
          // 绘制条形码
          this.drawBarcode(ctx, barcodeData, options)
        }
        
        // 绘制到canvas
        ctx.draw(false, () => {
          // 绘制完成回调
          this.$emit('rendered', { type: 'canvas', id: this.canvasId })
        })
      } catch (error) {
        console.error('生成条码失败:', error)
        this.error = error.message || t('up.barcode.error')
        this.$emit('error', error)
      }
    },
    
    /**
     * 渲染条形码为图片
     * @author jry <ijry@qq.com>
     * @param {Object} options - 条码配置选项
     */
    renderToImage(options) {
      try {
        // 计算canvas尺寸
        this.calculateCanvasSize(options)
        
        // 创建临时canvas用于生成图片
        const tempCanvasId = 'temp-' + this.canvasId
        const ctx = uni.createCanvasContext(tempCanvasId, this)
        
        // 清空画布
        ctx.setFillStyle(options.background)
        ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
        
        // 生成条形码数据
        const barcodeData = this.encodeBarcode(this.value, options.format)
        
        if (barcodeData) {
          // 绘制条形码
          this.drawBarcode(ctx, barcodeData, options)
        }
        
        // 绘制到临时canvas并生成图片
        ctx.draw(false, () => {
          // 延迟一小段时间确保canvas绘制完成
          setTimeout(() => {
            // 将canvas转换为图片
            uni.canvasToTempFilePath({
              canvasId: tempCanvasId,
              success: (res) => {
                this.barcodeImage = res.tempFilePath
                this.$emit('rendered', { type: 'image', value: this.value, path: res.tempFilePath })
              },
              fail: (error) => {
                console.error('生成条码图片失败:', error)
                this.$emit('error', error)
              }
            }, this)
          }, 100)
        })
      } catch (error) {
        console.error('生成条码图片失败:', error)
        this.$emit('error', error)
      }
    },
    
    /**
     * 计算canvas尺寸
     * @author jry <ijry@qq.com>
     * @param {Object} options - 条码配置选项
     */
    calculateCanvasSize(options) {
      // 基础宽度计算
      let width = options.width
      let height = options.height
      
      // 考虑边距
      const marginLeft = options.marginLeft
      const marginRight = options.marginRight
      const marginTop = options.marginTop
      const marginBottom = options.marginBottom
      
      // 考虑文本高度
      let textHeight = 0
      if (options.displayValue !== false) {
        textHeight = options.fontSize + options.textMargin
      }
      
      // 根据文本位置调整高度
      if (options.textPosition === 'top' || options.textPosition === 'bottom') {
        height += textHeight
      }
      
      // 添加边距
      width += marginLeft + marginRight
      height += marginTop + marginBottom
      
      this.canvasWidth = Math.max(width, 100)
      this.canvasHeight = Math.max(height, 60 + textHeight)

      this.calcSizeDone = true
    },
    
    /**
     * 编码条形码数据
     * @author jry <ijry@qq.com>
     * @param {String|Number} value - 条码值
     * @param {String} format - 条码格式
     * @returns {String|null} 条形码编码数据
     */
    encodeBarcode(value, format) {
      try {
        switch (format) {
          case 'CODE128':
          case 'auto':
            return this.encodeCode128(value)
          case 'CODE39':
            return this.encodeCode39(value)
          case 'EAN13':
            return this.encodeEAN13(value)
          case 'EAN8':
            return this.encodeEAN8(value)
          case 'EAN5':
          case 'EAN2':
            return this.encodeEAN52(value, format)
          case 'UPC':
          case 'UPCA':
            return this.encodeUPCA(value)
          case 'UPCE':
            return this.encodeUPCE(value)
          default:
            // 默认使用CODE128
            return this.encodeCode128(value)
        }
      } catch (error) {
        console.error('条码编码失败:', error)
        throw error
      }
    },

    /**
     * 添加右侧安静区（至少2个模块宽度的空白）
     * @author jry <ijry@qq.com>
     * @param {String} data - 要编码的数据
     * @returns {String|null} 编码后的条形码数据
     */
    encodeCode128(data) {
      const CODE128_START_CODE_B = 104
      const CODE128_STOP = 106
      
      // CODE128 Code B 字符集
      const CODE128_CODE_B_CHARS = ' !"#$%&\'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~'
      
      // 条形码模式 (B 模式)
      const codes = []
      let checksum = CODE128_START_CODE_B
      
      // 添加起始字符
      codes.push(CODE128_START_CODE_B)
      
      // 编码每个字符
      for (let i = 0; i < data.length; i++) {
        const char = data[i]
        const code = CODE128_CODE_B_CHARS.indexOf(char)
        
        if (code === -1) {
          throw new Error('Invalid character in CODE128: ' + char)
        }
        
        codes.push(code)
        checksum += code * (i + 1)
      }
      
      // 添加校验字符
      codes.push(checksum % 103)
      
      // 添加结束字符
      codes.push(CODE128_STOP)
      
      // 转换为条形码模式 (1 = 黑条, 0 = 白条)
      let barcode = ''
      for (let i = 0; i < codes.length; i++) {
        const code = codes[i]
        barcode += this.getCode128Pattern(code)
      }
      
      // 添加右侧安静区（至少2个模块宽度的空白）
      barcode += '00000'
      
      return barcode
    },
    
    /**
     * 获取CODE128编码模式
     * @author jry <ijry@qq.com>
     * @param {Number} code - 字符编码
     * @returns {String} 条形码二进制模式
     */
    getCode128Pattern(code) {
      // CODE128编码表
      const patterns = [
        "11011001100", "11001101100", "11001100110", "10010011000", 
        "10010001100", "10001001100", "10011001000", "10011000100", 
        "10001100100", "11001001000", "11001000100", "11000100100", 
        "10110011100", "10011011100", "10011001110", "10111001100", 
        "10011101100", "10011100110", "11001110010", "11001011100", 
        "11001001110", "11011100100", "11001110100", "11101101110", 
        "11101001100", "11100101100", "11100100110", "11101100100", 
        "11100110100", "11100110010", "11011011000", "11011000110", 
        "11000110110", "10100011000", "10001011000", "10001000110", 
        "10110001000", "10001101000", "10001100010", "11010001000", 
        "11000101000", "11000100010", "10110111000", "10110001110", 
        "10001101110", "10111011000", "10111000110", "10001110110", 
        "11101110110", "11010001110", "11000101110", "11011101000", 
        "11011100010", "11011101110", "11101011000", "11101000110", 
        "11100010110", "11101101000", "11101100010", "11100011010", 
        "11101111010", "11001000010", "11110001010", "10100110000", 
        "10100001100", "10010110000", "10010000110", "10000101100", 
        "10000100110", "10110010000", "10110000100", "10011010000", 
        "10011000010", "10000110100", "10000110010", "11000010010", 
        "11001010000", "11110111010", "11000010100", "10001111010", 
        "10100111100", "10010111100", "10010011110", "10111100100", 
        "10011110100", "10011110010", "11110100100", "11110010100", 
        "11110010010", "11011011110", "11011110110", "11110110110", 
        "10101111000", "10100011110", "10001011110", "10111101000", 
        "10111100010", "11110101000", "11110100010", "10111011110", 
        "10111101110", "11101011110", "11110101110", "11010000100", 
        "11010010000", "11010011100", "11000111010"
      ];
      
      return patterns[code] || "";
    },
    
    /**
     * CODE39编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 要编码的数据
     * @returns {String|null} 编码后的条形码数据
     */
    encodeCode39(data) {
      const codes = {
        '0': '101000111011101',
        '1': '111010001010111',
        '2': '101110001010111',
        '3': '111011100010101',
        '4': '101000111010111',
        '5': '111010001110101',
        '6': '101110001110101',
        '7': '101000101110111',
        '8': '111010001011101',
        '9': '101110001011101',
        'A': '111010100010111',
        'B': '101110100010111',
        'C': '111011101000101',
        'D': '101011100010111',
        'E': '111010111000101',
        'F': '101110111000101',
        'G': '101010001110111',
        'H': '111010100011101',
        'I': '101110100011101',
        'J': '101011100011101',
        'K': '111010101000111',
        'L': '101110101000111',
        'M': '111011101010001',
        'N': '101011101000111',
        'O': '111010111010001',
        'P': '101110111010001',
        'Q': '101010111000111',
        'R': '111010101110001',
        'S': '101110101110001',
        'T': '101011101110001',
        'U': '111000101010111',
        'V': '100011101010111',
        'W': '111000111010101',
        'X': '100010111010111',
        'Y': '111000101110101',
        'Z': '100011101110101',
        '-': '100010101110111',
        '.': '111000101011101',
        ' ': '100011101011101',
        '*': '100010111011101', // 起始和终止字符
        '$': '100010001000101',
        '/': '100010001010001',
        '+': '100010100010001',
        '%': '101000100010001'
      }
      
      // 转为大写
      data = data.toUpperCase()
      
      // 添加起始和终止字符
      let barcode = codes['*']
      
      // 添加数据字符
      for (let i = 0; i < data.length; i++) {
        const char = data[i]
        if (codes[char]) {
          barcode += '0' // 字符间隔
          barcode += codes[char]
        } else {
          throw new Error('Invalid character in CODE39: ' + char)
        }
      }
      
      // 添加终止字符
      barcode += '0' // 字符间隔
      barcode += codes['*']
      
      return barcode
    },
    
    /**
     * EAN13编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 13位数字字符串
     * @returns {String|null} 编码后的条形码数据
     */
    encodeEAN13(data) {
      // 确保数据是13位数字
      if (!/^\d{13}$/.test(data)) {
        throw new Error('EAN13 must be 13 digits')
      }
      
      // 验证校验位
      let sum = 0
      for (let i = 0; i < 12; i++) {
        const digit = parseInt(data[i])
        sum += (i % 2 === 0) ? digit : digit * 3
      }
      const checkDigit = (10 - (sum % 10)) % 10
      if (parseInt(data[12]) !== checkDigit) {
        throw new Error('Invalid EAN13 check digit')
      }
      
      // 左侧数据
      const leftData = data.substring(1, 7)
      const rightData = data.substring(7, 13)
      
      // 起始符
      let barcode = '101'
      
      // 左侧数据编码 (根据第一位数字决定编码方式)
      const firstDigit = parseInt(data[0])
      const leftPatterns = [
        ['LLLLLL', 'LLGLGG', 'LLGGLG', 'LLGGGL', 'LGLLGG', 
         'LGGLLG', 'LGGGLL', 'LGLGLG', 'LGLGGL', 'LGGLGL']
      ]
      
      const pattern = leftPatterns[0][firstDigit]
      
      // 左侧奇偶编码模式
      const leftOdd = [
        '0001101', '0011001', '0010011', '0111101', '0100011',
        '0110001', '0101111', '0111011', '0110111', '0001011'
      ]
      
      const leftEven = [
        '0100111', '0110011', '0011011', '0100001', '0011101',
        '0111001', '0000101', '0010001', '0001001', '0010111'
      ]
      
      // 编码左侧数据
      for (let i = 0; i < leftData.length; i++) {
        const digit = parseInt(leftData[i])
        if (pattern[i] === 'L') {
          barcode += leftOdd[digit]
        } else {
          barcode += leftEven[digit]
        }
      }
      
      // 中间分隔符
      barcode += '01010'
      
      // 右侧数据编码 (始终使用右编码)
      const rightCodes = [
        '1110010', '1100110', '1101100', '1000010', '1011100',
        '1001110', '1010000', '1000100', '1001000', '1110100'
      ]
      
      for (let i = 0; i < rightData.length; i++) {
        const digit = parseInt(rightData[i])
        barcode += rightCodes[digit]
      }
      
      // 结束符
      barcode += '101'
      
      return barcode
    },
    
    /**
     * EAN8编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 8位数字字符串
     * @returns {String|null} 编码后的条形码数据
     */
    encodeEAN8(data) {
      // 确保数据是8位数字
      if (!/^\d{8}$/.test(data)) {
        throw new Error('EAN8 must be 8 digits')
      }
      
      // 验证校验位
      let sum = 0
      for (let i = 0; i < 7; i++) {
        const digit = parseInt(data[i])
        sum += digit * (i % 2 === 0 ? 3 : 1)
      }
      const checkDigit = (10 - (sum % 10)) % 10
      if (parseInt(data[7]) !== checkDigit) {
        throw new Error('Invalid EAN8 check digit')
      }
      
      // 左侧数据(4位)
      const leftData = data.substring(0, 4)
      // 右侧数据(4位)
      const rightData = data.substring(4, 8)
      
      // 起始符
      let barcode = '101'
      
      // 左侧奇偶编码模式
      const leftOdd = [
        '0001101', '0011001', '0010011', '0111101', '0100011',
        '0110001', '0101111', '0111011', '0110111', '0001011'
      ]
      
      // 编码左侧数据
      for (let i = 0; i < leftData.length; i++) {
        const digit = parseInt(leftData[i])
        barcode += leftOdd[digit]
      }
      
      // 中间分隔符
      barcode += '01010'
      
      // 右侧数据编码 (始终使用右编码)
      const rightCodes = [
        '1110010', '1100110', '1101100', '1000010', '1011100',
        '1001110', '1010000', '1000100', '1001000', '1110100'
      ]
      
      // 编码右侧数据
      for (let i = 0; i < rightData.length; i++) {
        const digit = parseInt(rightData[i])
        barcode += rightCodes[digit]
      }
      
      // 结束符
      barcode += '101'
      
      return barcode
    },
    
    /**
     * EAN5/EAN2编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 2位或5位数字字符串
     * @param {String} format - 格式类型(EAN5或EAN2)
     * @returns {String|null} 编码后的条形码数据
     */
    encodeEAN52(data, format) {
      const length = format === 'EAN5' ? 5 : 2
      // 确保数据是相应位数的数字
      if (!new RegExp(`^\\d{${length}}$`).test(data)) {
        throw new Error(`${format} must be ${length} digits`)
      }
      
      // EAN5/2编码表
      const codes = [
        '0001101', '0011001', '0010011', '0111101', '0100011',
        '0110001', '0101111', '0111011', '0110111', '0001011'
      ]
      
      // 计算校验和
      let checksum = 0
      for (let i = 0; i < data.length; i++) {
        checksum += parseInt(data[i]) * (i % 2 === 0 ? 3 : 1)
      }
      
      // 根据校验和确定编码模式
      const patterns = format === 'EAN5' ? 
        ['00001', '00010', '00100', '01000', '10000', // 0-4
         '00000', '00011', '00101', '00110', '01001', // 5-9
         '01010', '01100', '10001', '10010', '10100', // 10-14
         '11000', '11001', '11010', '11100'] : // 15-18
        ['00', '01', '10', '11'] // EAN2只有4种模式
      
      const pattern = format === 'EAN5' ? 
        patterns[checksum % 10] : 
        patterns[parseInt(data) % 4]
      
      // 起始符
      let barcode = '1011'
      
      // 编码数据
      for (let i = 0; i < data.length; i++) {
        // 添加分隔符(除了第一个字符)
        if (i > 0) {
          barcode += '01' // 字符间分隔符
        }
        
        // 根据模式确定编码方式
        const digit = parseInt(data[i])
        const code = codes[digit]
        
        barcode += code
      }
      
      return barcode
    },
    
    /**
     * UPCA编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 11位或12位数字字符串
     * @returns {String|null} 编码后的条形码数据
     */
    encodeUPCA(data) {
      // 如果是11位，计算校验位
      if (/^\d{11}$/.test(data)) {
        let sum = 0
        for (let i = 0; i < 11; i++) {
          const digit = parseInt(data[i])
          sum += (i % 2 === 0) ? digit * 3 : digit
        }
        const checkDigit = (10 - (sum % 10)) % 10
        data += checkDigit
      }
      
      // 确保数据是12位数字
      if (!/^\d{12}$/.test(data)) {
        throw new Error('UPC-A must be 11 or 12 digits')
      }
      
      // UPCA实际上是EAN13的第一个数字为0的特殊情况
      return this.encodeEAN13('0' + data)
    },
    
    /**
     * UPCE编码实现
     * @author jry <ijry@qq.com>
     * @param {String} data - 6位或8位数字字符串
     * @returns {String|null} 编码后的条形码数据
     */
    encodeUPCE(data) {
      // 如果是7位，计算校验位
      if (/^\d{7}$/.test(data)) {
        let sum = 0
        for (let i = 0; i < 7; i++) {
          const digit = parseInt(data[i])
          sum += (i % 2 === 0) ? digit * 3 : digit
        }
        const checkDigit = (10 - (sum % 10)) % 10
        data += checkDigit
      }
      
      // 确保数据是8位数字
      if (!/^\d{8}$/.test(data)) {
        throw new Error('UPC-E must be 7 or 8 digits')
      }
      
      // 检查是否是有效的UPC-E格式
      if (data[0] !== '0' && data[0] !== '1') {
        throw new Error('UPC-E must start with 0 or 1')
      }
      
      // UPCE编码表
      const leftOdd = [
        '0001101', '0011001', '0010011', '0111101', '0100011',
        '0110001', '0101111', '0111011', '0110111', '0001011'
      ]
      
      const leftEven = [
        '0100111', '0110011', '0011011', '0100001', '0011101',
        '0111001', '0000101', '0010001', '0001001', '0010111'
      ]
      
      // 根据系统数字确定编码模式
      const systemDigit = data[0]
      const checkDigit = data[7]
      
      // 提取中间6位
      const middleData = data.substring(1, 7)
      
      // 确定编码模式
      let pattern
      if (checkDigit === '0' || checkDigit === '1' || checkDigit === '2') {
        pattern = 'EEEEOO' // 0,1,2
      } else if (checkDigit === '3') {
        pattern = 'EEEEOO' // 3
      } else if (checkDigit === '4') {
        pattern = 'EEEOOO' // 4
      } else {
        pattern = 'EEOOOO' // 5,6,7,8,9
      }
      
      // 起始符
      let barcode = '101'
      
      // 编码中间6位数据
      for (let i = 0; i < middleData.length; i++) {
        const digit = parseInt(middleData[i])
        if (pattern[i] === 'E') {
          barcode += leftEven[digit]
        } else {
          barcode += leftOdd[digit]
        }
      }
      
      // 中间分隔符
      barcode += '010101'
      
      // 结束符
      barcode += '101'
      
      return barcode
    },
    
    /**
     * 绘制条形码
     * @author jry <ijry@qq.com>
     * @param {Object} ctx - canvas上下文
     * @param {String} barcodeData - 条形码数据
     * @param {Object} options - 条码配置选项
     */
    drawBarcode(ctx, barcodeData, options) {
      if (!barcodeData) return
      
      const marginLeft = options.marginLeft
      const marginTop = options.marginTop
      const marginBottom = options.marginBottom
      const textHeight = options.displayValue !== false ? options.fontSize + options.textMargin : 0
      const height = options.height
      // 恢复: 根据总长度计算模块宽度
      const moduleWidth = Math.max(1, (this.canvasWidth - marginLeft - (options.marginRight || 10)) / barcodeData.length)
      
      ctx.setFillStyle(options.lineColor)
      
      // 计算条形码绘制的Y坐标
      let barcodeY = marginTop
      // 如果文本在顶部，需要调整条形码绘制位置
      if (options.displayValue !== false && options.textPosition === 'top') {
        barcodeY += textHeight
      }
      
      // 恢复: 使用计算出的模块宽度绘制条形码
      let x = marginLeft
      for (let i = 0; i < barcodeData.length; i++) {
        if (barcodeData[i] === '1') {
          // 使用计算的模块宽度绘制每个条
          ctx.fillRect(x, barcodeY, moduleWidth, height)
        }
        // 每个条/空都占用一个模块宽度
        x += moduleWidth
      }
      
      // 绘制文本
      if (options.displayValue !== false) {
        const text = options.text || this.value
        let textY
        
        ctx.setFillStyle(options.lineColor)
        ctx.setFontSize(options.fontSize)
        ctx.setTextAlign(options.textAlign)
        
        let textX
        switch (options.textAlign) {
          case 'left':
            textX = marginLeft
            break
          case 'right':
            textX = this.canvasWidth - options.marginRight
            break
          default: // center
            textX = this.canvasWidth / 2
        }
        
        // 根据文本位置确定Y坐标
        if (options.textPosition === 'top') {
          textY = marginTop + options.fontSize - 3
        } else { // bottom
          // 修复：正确计算底部文本位置，确保文本完全显示
          textY = barcodeY + height + options.textMargin + options.fontSize
          // 确保文本不会超出画布边界
          if (textY > this.canvasHeight - marginBottom) {
            textY = this.canvasHeight - marginBottom - 2
          }
        }
        
        ctx.fillText(text, textX, textY)
      }
    }
  }
}
</script>

<style scoped>
.u-barcode {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  color: #ff0000;
}

.error-text {
  font-size: 14px;
}
</style>