sen
2 天以前 7ed2a032d0724e68aec8af940f2ce0023a9f0eb7
ui/car_wx_app/pages/acknowledgement/index.vue
@@ -1,270 +1,285 @@
<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <Nav title="签署健康承诺书" customBack="pages/signContract/index"></Nav>
  <view class="container">
    <Nav title="签署健康承诺书" customBack="pages/signContract/index" />
        <!-- 承诺书内容区域(可滚动) -->
        <scroll-view class="content-scroll" scroll-y="true">
            <view class="agreement-content">
                <!-- 承诺书内容保持不变 -->
                <text class="title">货车司机出车前健康承诺书</text>
                <text class="paragraph">本人 [ ],身份证号 [ ],系 [珠海汇畅/海港货运]公司
                    的货车司机。为确保行车安全,保障自己及他人的生命财产安全,现就本次出车前的身体健康状况作出如下承诺:</text>
                <text class="heading">一、身体基本状况</text>
                <text class="paragraph">1.
                    本人目前无任何疾病症状,未出现发热、咳嗽、头晕、胸闷、心慌、呼吸困难、肢体麻木、关节疼痛等可能影响驾驶安全的情况,身体各项机能正常,无任何可能导致突发疾病的安全隐患。</text>
                <text class="paragraph">2.
                    本人无高血压、心脏病、癫痫等可能影响安全驾驶的慢性疾病或家族遗传病史。如有相关病史,本人承诺在出车前已向公司如实告知,并按照医嘱采取了必要的预防措施,且当前身体状况符合出车要求,血压测量值在正常范围内,收缩压小于
                    140mmHg,舒张压小于 90mmHg。</text>
                <text class="heading">二、精神与心理状态</text>
                <text class="paragraph">1. 精神状态良好,无疲劳、困倦、焦虑、烦躁等不良情绪,能够集中精力驾驶车辆,保证在行驶过程中保持高度的注意力和警觉性。在过去的 24
                    小时内,本人有足够的休息时间,未进行任何可能导致身体疲劳的活动,能够确保连续驾驶不超过 4 小时,并在感觉疲劳时及时停车休息。</text>
                <text class="paragraph">2. 心理状态稳定,无情绪波动、心理压力过大或精神负担等情况,不会因个人情绪问题影响驾驶安全。</text>
                <text class="heading">三、药物与酒精情况</text>
                <text class="paragraph">1. 本人近期未服用任何可能引起嗜睡、眩晕、幻觉、兴奋等不良反应的药物,确保驾驶过程中不会因药物作用而出现行为失控或反应迟钝的情况。</text>
                <text class="paragraph">2. 本人承诺在出车前及驾驶过程中不饮用任何含酒精的饮品,保证血液酒精含量为零,严格遵守 “酒后不开车,开车不喝酒”
                    的原则,避免因酒精影响导致的交通事故。</text>
                <text class="heading">四、遵守公司规定与安全驾驶承诺</text>
                <text class="paragraph">1. 本人将严格遵守公司的各项规章制度和操作流程,按照规定的时间、路线和任务进行运输作业,不私自更改行程,不违规超速、超载、疲劳驾驶。</text>
                <text class="paragraph">2.
                    在驾驶过程中,严格遵守交通规则,注意交通安全,文明驾驶,不强行超车、不占用应急车道、不违规变道,与前车保持安全距离,尤其是在高速行驶时,提前预判风险,确保行车安全。</text>
                <text
                    class="paragraph">本人深知作为一名货车司机,良好的身体状况和严格遵守安全驾驶规定是安全行车的基础。如因本人隐瞒身体不适、违规驾驶、服用影响驾驶安全的药物或酒后驾驶等行为导致的安全事故,本人愿意承担由此产生的一切法律责任和经济赔偿,并接受公司相应的处罚。</text>
                <text class="paragraph">特此承诺!</text>
                <text class="sign-line">承诺人签字:[ ]</text>
                <text class="sign-line">日期:[ ]</text>
            </view>
        </scroll-view>
        <!-- 底部固定区域(勾选框+按钮) -->
        <view class="bottom-fixed">
            <!-- 勾选区域 -->
            <view class="agree-area">
                <view class="checkbox-group">
                    <!-- <checkbox
            class="checkbox"
            :checked="isAgreed"
            @change="handleAgreeChange"
          ></checkbox> -->
                    <uni-data-checkbox multiple v-model="value" :localdata="range" @change="change"></uni-data-checkbox>
                    <!-- <text class="agree-text">我已阅读并理解上述内容,自愿签署</text> -->
                    <text class="required">*</text>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view class="btn-group">
                <button class="cancel-btn" @click="navigateBack">取消</button>
                <button class="next-btn" @click="goToNextStep">下一步</button>
            </view>
    <scroll-view class="content-scroll" scroll-y>
      <view class="agreement-content">
        <text class="title">{{ agreementContent.title }}</text>
        <text class="intro">{{ agreementContent.intro }}</text>
        <view v-for="(section, i) in agreementContent.sections" :key="i" class="section">
          <text class="section-title">{{ section.title }}</text>
          <text v-for="(p, j) in section.paragraphs" :key="j" class="paragraph">{{ j + 1 }}. {{ p }}</text>
        </view>
        <text class="footer">{{ agreementContent.footer }}</text>
        <text class="ending">{{ agreementContent.ending }}</text>
        <view class="signature">
          <text v-for="(line, i) in agreementContent.signature" :key="i" class="sign-line">{{ line }}</text>
        </view>
      </view>
    </scroll-view>
    <!-- 底部固定栏 -->
    <view class="bottom-fixed">
      <view class="agree-area">
        <label class="checkbox-group" @tap="toggleAgree">
          <checkbox :checked="isAgreed" color="#1677ff" />
          <text class="agree-text">我已阅读并理解上述内容,自愿签署</text>
          <text class="required">*</text>
        </label>
      </view>
      <view class="btn-group">
        <button class="cancel-btn" @tap="navigateBack">取消</button>
        <button
          class="next-btn"
          :class="{ disabled: !isAgreed }"
          :disabled="!isAgreed || loading"
          @tap="goToNextStep"
        >
          {{ loading ? '处理中...' : '下一步' }}
        </button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
    data() {
        return {
            // 勾选状态
            isAgreed: false,
            formData: {
               uploadIshow: false
            },
            value: 0,
            range: [{ "value": 0, "text": "我已阅读并理解上述内容,自愿签署" }]
        };
// ============ 承诺书内容配置 ============
const AGREEMENT_CONTENT = {
  title: '货车司机出车前健康承诺书',
  intro: '本人 [ ],身份证号 [ ],系 [珠海汇畅/海港货运]公司的货车司机。为确保行车安全,保障自己及他人的生命财产安全,现就本次出车前的身体健康状况作出如下承诺:',
  sections: [
    {
      title: '一、身体基本状况',
      paragraphs: [
        '本人目前无任何疾病症状,未出现发热、咳嗽、头晕、胸闷、心慌、呼吸困难、肢体麻木、关节疼痛等可能影响驾驶安全的情况,身体各项机能正常,无任何可能导致突发疾病的安全隐患。',
        '本人无高血压、心脏病、癫痫等可能影响安全驾驶的慢性疾病或家族遗传病史。如有相关病史,本人承诺在出车前已向公司如实告知,并按照医嘱采取了必要的预防措施,且当前身体状况符合出车要求,血压测量值在正常范围内,收缩压小于 140mmHg,舒张压小于 90mmHg。'
      ]
    },
    onLoad(options) {
     this.formData = options;
      if(options.uploadIshow=='true'){
        this.isAgreed=true
        this.value = [0]; // 同步更新 checkbox 的值
     }else {
        this.isAgreed=false
        this.value = []; // 清空 checkbox 的值
     }
    {
      title: '二、精神与心理状态',
      paragraphs: [
        '精神状态良好,无疲劳、困倦、焦虑、烦躁等不良情绪,能够集中精力驾驶车辆,保证在行驶过程中保持高度的注意力和警觉性。在过去的 24 小时内,本人有足够的休息时间,未进行任何可能导致身体疲劳的活动,能够确保连续驾驶不超过 4 小时,并在感觉疲劳时及时停车休息。',
        '心理状态稳定,无情绪波动、心理压力过大或精神负担等情况,不会因个人情绪问题影响驾驶安全。'
      ]
    },
    methods: {
        // 返回上一页
        navigateBack() {
            uni.navigateTo({
                url: '/pages/signContract/index?uploadIshow=' + this.formData.uploadIshow
            });
            // uni.navigateBack({ delta: 1 });
        },
        // 勾选状态改变
        handleAgreeChange(e) {
            this.isAgreed = e.detail.value;
        },
        change(e) {
            const checkedValues = e.detail.value; // 获取勾选的值数组
            this.isAgreed = checkedValues.includes(0); // 如果包含 0,则表示勾选了
            console.log('isAgreed:', this.isAgreed);
        },
        // 下一步(签署)
        goToNextStep() {
            if (this.isAgreed) {
                uni.navigateTo({
                    url: `/pages/observeLaw/index?uploadIshow=` + this.formData.uploadIshow
                });
            } else {
                uni.showToast({
                    title: '请先勾选同意',
                    icon: 'none'
                });
            }
        }
    {
      title: '三、药物与酒精情况',
      paragraphs: [
        '本人近期未服用任何可能引起嗜睡、眩晕、幻觉、兴奋等不良反应的药物,确保驾驶过程中不会因药物作用而出现行为失控或反应迟钝的情况。',
        '本人承诺在出车前及驾驶过程中不饮用任何含酒精的饮品,保证血液酒精含量为零,严格遵守 "酒后不开车,开车不喝酒" 的原则,避免因酒精影响导致的交通事故。'
      ]
    },
    {
      title: '四、遵守公司规定与安全驾驶承诺',
      paragraphs: [
        '本人将严格遵守公司的各项规章制度和操作流程,按照规定的时间、路线和任务进行运输作业,不私自更改行程,不违规超速、超载、疲劳驾驶。',
        '在驾驶过程中,严格遵守交通规则,注意交通安全,文明驾驶,不强行超车、不占用应急车道、不违规变道,与前车保持安全距离,尤其是在高速行驶时,提前预判风险,确保行车安全。'
      ]
    }
};
  ],
  footer: '本人深知作为一名货车司机,良好的身体状况和严格遵守安全驾驶规定是安全行车的基础。如因本人隐瞒身体不适、违规驾驶、服用影响驾驶安全的药物或酒后驾驶等行为导致的安全事故,本人愿意承担由此产生的一切法律责任和经济赔偿,并接受公司相应的处罚。',
  ending: '特此承诺!',
  signature: ['承诺人签字:[ ]', '日期:[ ]']
}
// ============ URL 工具 ============
const buildUrl = (path, params) => {
  const query = Object.entries(params)
    .map(([k, v]) => `${k}=${encodeURIComponent(v)}`)
    .join('&')
  return `${path}?${query}`
}
export default {
  data() {
    return {
      agreementContent: AGREEMENT_CONTENT,
      isAgreed: false,
      formData: { uploadIshow: false },
      loading: false
    }
  },
  onLoad(options) {
    this.formData = options || {}
    if (options?.uploadIshow === 'true') {
      this.isAgreed = true
    }
  },
  methods: {
    toggleAgree() {
      this.isAgreed = !this.isAgreed
    },
    navigateBack() {
      uni.navigateTo({
        url: buildUrl('/pages/signContract/index', {
          uploadIshow: this.formData.uploadIshow
        })
      })
    },
    async goToNextStep() {
      if (!this.isAgreed) {
        return uni.showToast({ title: '请先勾选同意', icon: 'none' })
      }
      this.loading = true
      try {
        uni.navigateTo({
          url: buildUrl('/pages/observeLaw/index', {
            uploadIshow: this.formData.uploadIshow
          })
        })
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    /* 留出底部固定区域的空间 */
    padding-bottom: 200rpx;
    box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
}
/* 滚动内容区 - 关键调整 */
.content-scroll {
    flex: 1;
    padding: 30rpx;
    box-sizing: border-box;
    /* 确保内容能滚动到最底部不被遮挡 */
    padding-bottom: 220rpx;
  flex: 1;
  padding: 30rpx;
  padding-bottom: 240rpx;
  box-sizing: border-box;
}
/* 承诺书内容样式保持不变 */
/* 承诺书内容 */
.agreement-content {
    line-height: 1.8;
  line-height: 1.8;
}
.title {
    display: block;
    font-size: 32rpx;
    color: #333333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40rpx;
  display: block;
  font-size: 32rpx;
  color: #333;
  font-weight: 600;
  text-align: center;
  margin-bottom: 40rpx;
}
.heading {
    display: block;
    font-size: 30rpx;
    color: #333333;
    font-weight: 500;
    margin: 25rpx 0 15rpx 0;
.section {
  margin-bottom: 20rpx;
}
.section-title {
  display: block;
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin: 30rpx 0 15rpx;
}
.paragraph {
    display: block;
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 15rpx;
    text-indent: 56rpx;
    /* 首行缩进2字符 */
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  text-indent: 56rpx;
}
.footer {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 30rpx;
}
.ending {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
}
.signature {
  margin-top: 40rpx;
}
.sign-line {
    display: block;
    font-size: 28rpx;
    color: #666666;
    margin-top: 30rpx;
    text-align: right;
    padding-right: 50rpx;
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-top: 20rpx;
  text-align: right;
  padding-right: 50rpx;
}
/* 底部固定区域 - 核心样式 */
/* 底部固定栏 */
.bottom-fixed {
    /* 固定在屏幕底部 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    border-top: 1rpx solid #f5f5f5;
    z-index: 99;
    /* 确保在内容上方 */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  border-top: 1rpx solid #f5f5f5;
  z-index: 99;
}
/* 勾选区域 */
.agree-area {
    padding: 20rpx 30rpx;
  padding: 20rpx 30rpx;
}
.checkbox-group {
    display: flex;
    align-items: center;
  display: flex;
  align-items: center;
}
.checkbox {
    width: 30rpx;
    height: 30rpx;
    margin-right: 15rpx;
checkbox {
  transform: scale(0.8);
}
.agree-text {
    font-size: 28rpx;
    color: #333333;
    flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
}
.required {
    font-size: 28rpx;
    color: #ff4d4f;
  font-size: 28rpx;
  color: #ff4d4f;
  margin-left: 4rpx;
}
/* 底部按钮 */
.btn-group {
    padding: 30rpx;
    display: flex;
    gap: 20rpx;
  display: flex;
  gap: 20rpx;
  padding: 20rpx 30rpx 40rpx;
}
.cancel-btn,
.next-btn {
  flex: 1;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  border-radius: 8rpx;
  border: none;
}
.cancel-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #333333;
    background-color: #ffffff;
    border: 1rpx solid #e5e5e5;
    border-radius: 8rpx;
  color: #333;
  background-color: #f5f5f5;
}
.next-btn {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #ffffff;
    background-color: #1677ff;
    border: none;
    border-radius: 8rpx;
  color: #fff;
  background-color: #1677ff;
}
.next-btn[disabled] {
    background-color: #c9d8e9;
    opacity: 0.7;
.next-btn.disabled {
  background-color: #c9d8e9;
  opacity: 0.7;
}
</style>
</style>