front-end/ghsPad/src/components/delivery-input/remark-input.vue

<template>
  <view>
    <!-- 触发区域 -->
    <view class="remark-action" @click="openRemarkModal">
      <text :class="{ placeholder: !value }">{{ value || placeholder }}</text>
      <text class="iconfont iconxiangyou icon-arrow-right"></text>
    </view>

    <!-- 备注输入弹窗 -->
    <view class="remark-modal" v-if="showRemarkModal" @click="closeRemarkModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ modalTitle }}</text>
        </view>
        <view class="modal-body">
          <textarea 
            v-model="tempRemark" 
            :placeholder="placeholder" 
            :maxlength="maxLength"
            :auto-height="true"
            class="remark-textarea"
          />
          <view class="char-count">{{ tempRemark.length }}/{{ maxLength }}</view>
        </view>
        <view class="modal-footer">
          <button class="modal-btn cancel-btn" @click="closeRemarkModal">取消</button>
          <button class="modal-btn confirm-btn" @click="confirmRemark">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DeliveryInput',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请填写配送备注'
    },
    modalTitle: {
      type: String,
      default: '填写备注信息'
    },
    maxLength: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      showRemarkModal: false,
      tempRemark: ''
    };
  },
  methods: {
    openRemarkModal() {
      // 打开弹窗时，将当前备注内容赋值给临时变量
      this.tempRemark = this.value;
      this.showRemarkModal = true;
    },
    closeRemarkModal() {
      this.showRemarkModal = false;
      this.tempRemark = '';
    },
    confirmRemark() {
      // 更新备注
      this.$emit('input', this.tempRemark);
      // 关闭弹窗
      this.showRemarkModal = false;
      this.tempRemark = '';
    }
  }
};
</script>

<style lang="scss" scoped>
.remark-action {
  color: #3385FF;
  display: flex;
  align-items: center;
  font-size: 13upx;
  flex: 1;
  justify-content: flex-end;
  
  text {
    color: #333333;
    margin-right: 4upx;
    line-height: 1;
    display: flex;
    align-items: center;
    
    &.placeholder {
      color: #999999;
    }

    &.icon-arrow-right {
      color: #ccc;
      font-size: 10upx;
      display: inline-flex;
      justify-content: center;
      width: 12upx;
      height: 14upx;
      margin-left: 2upx;
      margin-right: 0;
    }
  }
}

/* 备注输入弹窗 */
.remark-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  .modal-content {
    width: 400upx;
    background-color: white;
    border-radius: 16upx;
    overflow: hidden;
  }

  .modal-header {
    padding: 20upx 20upx 12upx;
    border-bottom: 1upx solid #f0f0f0;

    .modal-title {
      font-size: 18upx;
      font-weight: bold;
      color: #333333;
    }
  }

  .modal-body {
    padding: 15upx;

    .remark-textarea {
      width: 100%;
      min-height: 120upx;
      padding: 10upx;
      font-size: 14upx;
      color: #333333;
      background-color: #f9f9f9;
      border-radius: 8upx;
      border: 1upx solid #e0e0e0;
      box-sizing: border-box;
    }

    .char-count {
      margin-top: 5upx;
      font-size: 12upx;
      color: #999999;
      text-align: right;
    }
  }

  .modal-footer {
    display: flex;
    border-top: 1upx solid #f0f0f0;

    .modal-btn {
      flex: 1;
      height: 60upx;
      line-height: 60upx;
      font-size: 16upx;
      border: none;
      background-color: transparent;
      margin: 0;
      padding: 0;

      &.cancel-btn {
        color: #666666;
        border-right: 1upx solid #f0f0f0;
      }

      &.confirm-btn {
        color: #3385FF;
        font-weight: 400;
      }
    }
  }
}
</style>