修改搜索

sen

2026-03-31 cc41746818af3b619167947ecb4401ccdfbec2d8

 ui/car_wx_app/pages/signContract/index.vue

@@ -1,250 +1,322 @@
<template>
  <view class="promise-container">
    <!-- 头部导航 -->
    <Nav title="签署承诺书" customBack="pages/beReferred/index"></Nav>
  <view class="container">
    <!-- Nav 返回由 goBack 接管，与底部取消按钮行为一致 -->
    <Nav title="签署承诺书" @back="goBack" />

    <!-- 提示信息 -->
    <view class="tip-box">
      <text class="tip-text">发车前，您需要签署以下文件：</text>
      <text class="progress-text">(当前进度{{numberFrom.number}}/2)</text>
      <u-icon name="close" size="24" color="#999" class="close-btn" @click="onCloseTip"></u-icon>
    <!-- 进度提示卡片 -->
    <view class="progress-card">
      <view class="progress-header">
        <view class="progress-icon-wrap">
          <u-icon name="edit-pen" size="20" color="#fff" />
        </view>
        <view class="progress-info">
          <text class="progress-title">发车前签署</text>
          <text class="progress-desc">请完成以下承诺书签署后方可发车</text>
        </view>
      </view>
      <view class="progress-bar-wrap">
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: progressPercent + '%' }" />
        </view>
        <text class="progress-num">{{ completedCount }}/{{ promiseList.length }}</text>
      </view>
    </view>

    <!-- 承诺书列表 -->
    <view class="section-title">签署文件</view>
    <view class="promise-list">
      <view class="promise-item" @click="goToSign(1)">
      <view
        v-for="item in promiseList"
        :key="item.id"
        class="promise-item"
        :class="{ 'item-completed': item.completed }"
        @tap="goToSign(item)"
      >
        <view class="item-left">
          <text class="item-title">货车司机出车前健康承诺书</text>
          <text class="item-status">({{numberFrom.status}})</text>
          <view class="item-check" :class="{ checked: item.completed }">
            <u-icon :name="item.completed ? 'checkmark' : 'edit-pen'" :size="item.completed ? 14 : 16" color="#fff" />
          </view>
          <view class="item-content">
            <text class="item-title">{{ item.title }}</text>
            <text class="item-status" :class="{ completed: item.completed }">
              {{ item.completed ? '已签署' : '待签署' }}
            </text>
          </view>
        </view>
        <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
      </view>

      <view class="promise-item" @click="goToSign(2)">
        <view class="item-left">
          <text class="item-title">遵纪守法承诺书</text>
          <text class="item-status">({{numberFrom.status}})</text>
        <view class="item-right">
          <text v-if="!item.completed" class="go-sign">去签署</text>
          <u-icon name="arrow-right" size="18" :color="item.completed ? '#c0c4cc' : '#4285f4'" />
        </view>
        <u-icon name="arrow-right" size="24" color="#ccc"></u-icon>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-btn-group">
      <u-button class="confirm-btn" @click="onCancel" text="取消"></u-button>
      <!-- <u-button class="confirm-btn" >发车</u-button> -->
      <!-- <u-button class="confirm-btn" @click="submitForm" :disabled="signStatus" type="primary" text="发车"></u-button> -->
    <view class="bottom-bar">
      <button class="cancel-btn" @tap="goBack">返回上一页</button>
    </view>
  </view>
</template>

<script>
const PROMISE_CONFIG = Object.freeze([
  { id: 1, title: '货车司机出车前健康承诺书', path: '/pages/acknowledgement/index' },
  { id: 2, title: '遵纪守法承诺书', path: '/pages/observeLaw/index' }
])

export default {
  data() {
    return {
      // 可根据实际签署情况修改状态
      signStatus: true, 
      numberFrom: {
        number:0,
        status:'未完成'
      },
      receivedForm: {}
    };
      isCompleted: false
    }
  },
  
    onLoad(options) {
      if(options.uploadIshow=='true'){
        this.numberFrom= {
         number:2,
         status:'完成'
        }
     }else {
        this.numberFrom= {
         number:0,
         status:'未完成'
        }
     }

  computed: {
    promiseList() {
      return PROMISE_CONFIG.map(item => ({
        ...item,
        completed: this.isCompleted
      }))
    },
    completedCount() {
      return this.isCompleted ? PROMISE_CONFIG.length : 0
    },
    progressPercent() {
      return (this.completedCount / PROMISE_CONFIG.length) * 100
    }
  },

  onLoad(options) {
    this.isCompleted = options?.uploadIshow === 'true'
  },

  methods: {
    // 返回上一页
    onBack() {
      uni.navigateBack({
        delta: 1
      });
    goToSign(item) {
      uni.navigateTo({ url: item.path })
    },

    // 关闭提示框
    onCloseTip() {
      // 实际项目中可隐藏提示框
      //   this.$refs.tipBox.style.display = 'none';
    },

    // 前往签署页面
    goToSign(index) {
      if (index === 1) {
        uni.navigateTo({
          url: `/pages/acknowledgement/index`
        });
        return;
      } else if (index == 2) {
        uni.navigateTo({
          url: `/pages/observeLaw/index`
        });
    /**
     * 安全返回到上传行程页（examine）
     * 从页面栈中查找 examine 页面，计算正确的 delta 回退
     * 避免承诺书页面 navigateTo 导致的栈堆积死循环
     */
    goBack() {
      const pages = getCurrentPages()
      // 从栈底往上找 examine 页面
      for (let i = pages.length - 2; i >= 0; i--) {
        if (pages[i].route && pages[i].route.includes('pages/examine')) {
          uni.navigateBack({ delta: pages.length - 1 - i })
          return
        }
      }

    },

    // 取消操作
    onCancel() {
      uni.navigateBack({
        delta: 1
      });
    },
    submitForm() {
      /* 获取 */
      const form = uni.getStorageSync("signContractForm");
      console.log("提交的表单数据：", form);
      // 在这里可以添加提交表单数据的逻辑
        // 2. 读取后清除缓存（避免数据残留，按需选择）
      // uni.removeStorageSync("signContractForm");
      uni.$u.toast('表单已提交');
    },
   
  },


};
      // 兜底：直接返回上一页
      uni.navigateBack({ delta: 1 })
    }
  }
}
</script>

<style scoped>
.promise-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

/* 进度卡片 */
.progress-card {
  margin: 24rpx 24rpx 0;
  padding: 32rpx;
  background: linear-gradient(135deg, #4285f4 0%, #5b9ef4 100%);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(66, 133, 244, 0.3);
}

.progress-header {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
}

.progress-icon-wrap {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.progress-info {
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.nav-bar {
  height: 88rpx;
.progress-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6rpx;
}

.progress-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.progress-bar-wrap {
  display: flex;
  align-items: center;
}

.progress-bar {
  flex: 1;
  height: 12rpx;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 6rpx;
  overflow: hidden;
  margin-right: 16rpx;
}

.progress-fill {
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  border-radius: 6rpx;
  transition: width 0.4s ease;
}

.back-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
.progress-num {
  font-size: 26rpx;
  color: #fff;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

/* 提示框样式 */
.tip-box {
  background-color: #fffbe6;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  margin: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.tip-text {
/* 分区标题 */
.section-title {
  font-size: 28rpx;
  color: #fa8c16;
  line-height: 1.5;
  color: #909399;
  padding: 28rpx 36rpx 16rpx;
}

.progress-text {
  font-size: 28rpx;
  color: #fa8c16;
  margin-left: 10rpx;
}

.close-btn {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
}

/* 承诺书列表样式 */
/* 承诺书列表 */
.promise-list {
  flex: 1;
  margin-top: 10rpx;
  margin: 0 24rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.promise-item {
  background-color: #fff;
  height: 120rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  justify-content: space-between;
  padding: 32rpx;
  position: relative;
}

.promise-item + .promise-item {
  border-top: 1rpx solid #f2f3f5;
}

.promise-item:active {
  background-color: #f5f7fa;
}

.item-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.item-check {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #e6e8eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 24rpx;
  flex-shrink: 0;
  transition: background-color 0.3s;
}

.item-check.checked {
  background-color: #52c41a;
}

.item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.item-title {
  font-size: 32rpx;
  color: #333;
  font-size: 30rpx;
  color: #303133;
  font-weight: 500;
  margin-bottom: 8rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.item-status {
  font-size: 26rpx;
  color: #ff4d4f;
  font-size: 24rpx;
  color: #ff6b6b;
}

/* 底部按钮样式 */
.bottom-btn-group {
  padding: 30rpx;
  background-color: #fff;
.item-status.completed {
  color: #52c41a;
}

.item-completed .item-title {
  color: #909399;
}

.item-right {
  display: flex;
  gap: 20rpx;
  align-items: center;
  flex-shrink: 0;
  margin-left: 16rpx;
}

.go-sign {
  font-size: 24rpx;
  color: #4285f4;
  margin-right: 8rpx;
}

/* 底部按钮 */
.bottom-bar {
  padding: 24rpx 24rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.cancel-btn {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 16rpx;
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 30rpx;
  background-color: #f5f7fa;
  color: #606266;
  border-radius: 12rpx;
  border: none;
  font-weight: 500;
}

.confirm-btn {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  background-color: #1677ff;
  color: #fff;
  border-radius: 16rpx;
.cancel-btn::after {
  border: none;
}

/* 禁用状态样式 */
.confirm-btn[disabled] {
  background-color: #8ec5fc;
  opacity: 0.6;
.cancel-btn:active {
  background-color: #e8eaed;
}
</style>
</style>