rtim/pages/points/taskDetails.vue

<template>
  <view class="task-detail-container">
    <!-- 顶部导航栏 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <text class="nav-title">任务详情</text>
      <view class="nav-right"></view>
    </view>

    <!-- 滚动内容区域 -->
    <scroll-view scroll-y class="content-scroll">
      <!-- 拒绝原因提示栏 (根据状态显示) -->
      <view class="reject-reason" v-if="taskStatus === 'rejected'">
        <u-icon name="close-circle-fill" color="#E63F3F" size="16"></u-icon>
        <text class="reason-text">不通过原因：上传的照片有误，请重新上传。画面不清晰，字迹模糊。请重新上传后提交。</text>
      </view>

      <!-- 任务基本信息卡片 -->
      <view class="task-info-card">
        <view class="card-top">
          <image class="task-icon" src="@/static/image/points/icon_cash_task.png" mode="aspectFill"></image>
          <view class="task-main-info">
            <view class="task-title">新人必做任务易上手</view>
            <view class="task-tags">
              <text class="tag">无需经验</text>
              <text class="tag">时间自由</text>
            </view>
            <view class="task-stats-row">
              <text class="stat-text">128人已赚</text>
              <text class="stat-text">剩余10单</text>
            </view>
          </view>
          <view class="task-reward-wrap">
            <text class="reward-sign">+</text>
            <text class="reward-num">2.32</text>
            <text class="reward-unit">元</text>
          </view>
        </view>
        
        <view class="card-bottom">
          <view class="data-item">
            <view class="data-val"><text class="num">992</text>元</view>
            <view class="data-label">托管赏金</view>
          </view>
          <view class="data-item">
            <view class="data-val"><text class="num">30</text>人</view>
            <view class="data-label">已完成人数</view>
          </view>
          <view class="data-item">
            <view class="data-val highlight"><text class="num">1</text>小时</view>
            <view class="data-label">时间限制</view>
          </view>
        </view>
      </view>

      <!-- 任务详情描述区 -->
      <view class="section-block">
        <view class="section-title">
          <view class="title-line"></view>
          <text>任务详情</text>
        </view>
        <view class="section-content">
          <text class="desc-text">根据要求从官方渠道下载对应软件安装包，确保文件来源安全、无篡改安装完成后启动软件，验证是否能正常打开、无报错，确认任务完成。交付要求：反馈软件安装成功的截图或启动界面截图。</text>
          <!-- 任务详情图，这里用一个带颜色的view模拟占位 -->
          <view class="detail-img-placeholder">
            <!-- <image src="实际详情长图地址" mode="widthFix" style="width: 100%;"></image> -->
            <view class="placeholder-content">
               <text style="color:#fff; font-size:36rpx; font-weight:bold;">新人投保指南 (图片占位)</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 任务步骤区 -->
      <view class="section-block steps-block">
        <view class="section-title">
          <view class="title-line"></view>
          <text>任务步骤</text>
        </view>
        
        <view class="steps-list">
          <!-- 步骤一 -->
          <view class="step-item">
            <view class="step-header">
              <view class="step-dot"></view>
              <view class="step-badge">第一步</view>
            </view>
            <view class="step-content">
              <text class="step-desc">首先打开应用商店下载软件</text>
              <view class="step-imgs">
                <view class="img-box">
                  <text class="img-label">示例</text>
                  <!-- 占位图 -->
                  <view class="mock-img"></view>
                </view>
                <!-- 右侧上传/重新上传区域 -->
                <view class="img-box" v-if="taskStatus === 'rejected'">
                  <!-- 重新上传按钮样式 -->
                  <view class="reupload-btn">重新上传</view>
                  <view class="mock-img"></view>
                </view>
                <view class="img-box upload-placeholder" v-else-if="taskStatus === 'unaccepted'">
                  <u-icon name="camera" size="32" color="#FF5A1F"></u-icon>
                  <text class="upload-text">上传截图</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 步骤二 -->
          <view class="step-item">
            <view class="step-header">
              <view class="step-dot"></view>
              <view class="step-badge">第二步</view>
            </view>
            <view class="step-content">
              <text class="step-desc">用手机号进行登录，完成任务</text>
              <view class="step-imgs">
                <view class="img-box">
                  <text class="img-label">示例</text>
                  <view class="mock-img"></view>
                </view>
                <!-- 右侧上传/重新上传区域 -->
                <view class="img-box" v-if="taskStatus === 'rejected'">
                  <view class="reupload-btn">重新上传</view>
                  <view class="mock-img"></view>
                </view>
                <view class="img-box upload-placeholder" v-else-if="taskStatus === 'unaccepted'">
                  <u-icon name="camera" size="32" color="#FF5A1F"></u-icon>
                  <text class="upload-text">上传截图</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 底部安全留白 -->
      <view class="bottom-spacer"></view>
    </scroll-view>

    <!-- 底部固定操作栏 -->
    <view class="bottom-action-bar">
      <!-- 状态一：被拒绝 (取消任务 / 重新提交) -->
      <view class="btn-group double-btn" v-if="taskStatus === 'rejected'">
        <button class="btn-outline" @click="handleCancel">取消任务</button>
        <button class="btn-primary" @click="handleSubmit">重新提交</button>
      </view>

      <!-- 状态二：审核中 (任务审核中 - 不可点击) -->
      <view class="btn-group single-btn" v-if="taskStatus === 'reviewing'">
        <button class="btn-disabled">任务审核中</button>
      </view>

      <!-- 状态三：可重做 (删除任务 / 再次报名) -->
      <view class="btn-group double-btn" v-if="taskStatus === 'canReapply'">
        <button class="btn-outline" @click="handleDelete">删除任务</button>
        <button class="btn-primary" @click="handleApply">再次报名</button>
      </view>
      
      <!-- 状态四：未接单 (换个任务 / 立即报名) -->
      <view class="btn-group double-btn" v-if="taskStatus === 'unaccepted'">
        <button class="btn-outline with-icon" @click="handleChangeTask">
          <u-icon name="reload" size="16" color="#FF5A1F"></u-icon>
          <text>换个任务</text>
        </button>
        <button class="btn-primary" @click="handleApply">立即报名</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 模拟任务状态，后期根据接口返回动态设置
      // 可选值: 'rejected' (不通过), 'reviewing' (审核中), 'canReapply' (删除/再次报名), 'unaccepted' (换个任务/立即报名)
      taskStatus: 'rejected' 
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    handleCancel() {
      console.log('取消任务');
    },
    handleSubmit() {
      console.log('重新提交');
    },
    handleDelete() {
      console.log('删除任务');
    },
    handleApply() {
      console.log('报名/再次报名');
    },
    handleChangeTask() {
      console.log('换个任务');
    }
  }
};
</script>

<style lang="scss" scoped>
.task-detail-container {
  height: 100vh;
  background-color: #F7F8FA;
  display: flex;
  flex-direction: column;
}

/* 顶部导航栏 */
.nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 80rpx 30rpx 20rpx; /* 适配状态栏高度 */
  background-color: #fff;
  flex-shrink: 0;
  z-index: 10;
}

.nav-left, .nav-right {
  width: 60rpx;
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
  text-align: center;
}

/* 滚动区域 */
.content-scroll {
  flex: 1;
  height: 0;
}

/* 拒绝原因提示 */
.reject-reason {
  background-color: #FFF2F2;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: flex-start;
  margin: 20rpx 30rpx 0;
  border-radius: 12rpx;
}

.reason-text {
  font-size: 26rpx;
  color: #E63F3F;
  margin-left: 10rpx;
  line-height: 1.5;
  flex: 1;
}

/* 任务信息卡片 */
.task-info-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 20rpx 30rpx;
  padding: 30rpx;
}

.card-top {
  display: flex;
  padding-bottom: 30rpx;
  border-bottom: 1px dashed #eee;
}

.task-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 16rpx;
  margin-right: 20rpx;
}

.task-main-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.task-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.task-tags {
  display: flex;
  margin-top: 6rpx;
}

.tag {
  font-size: 20rpx;
  color: #666;
  background-color: #F5F6F8;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  margin-right: 12rpx;
}

.task-stats-row {
  display: flex;
  margin-top: 6rpx;
}

.stat-text {
  font-size: 22rpx;
  color: #999;
  margin-right: 20rpx;
}

.task-reward-wrap {
  display: flex;
  align-items: baseline;
  color: #FF5A1F;
}

.reward-sign {
  font-size: 28rpx;
}

.reward-num {
  font-size: 40rpx;
  font-weight: bold;
}

.reward-unit {
  font-size: 24rpx;
}

.card-bottom {
  display: flex;
  justify-content: space-around;
  padding-top: 30rpx;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-val {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.data-val.highlight {
  color: #FF5A1F;
}

.data-val .num {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 4rpx;
}

.data-label {
  font-size: 24rpx;
  color: #999;
}

/* 详情区块通用样式 */
.section-block {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 30rpx 20rpx;
  padding: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.title-line {
  width: 6rpx;
  height: 28rpx;
  background-color: #FF5A1F;
  border-radius: 4rpx;
  margin-right: 12rpx;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.detail-img-placeholder {
  width: 100%;
  height: 600rpx;
  background: linear-gradient(180deg, #6B94FF 0%, #B9CBFF 100%);
  border-radius: 12rpx;
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 任务步骤区 */
.steps-list {
  padding-left: 10rpx;
}

.step-item {
  position: relative;
  padding-left: 40rpx;
  padding-bottom: 40rpx;
  border-left: 2rpx dashed #FF9E7F;
}

.step-item:last-child {
  border-left: none;
  padding-bottom: 0;
}

.step-header {
  position: relative;
  display: flex;
  align-items: center;
  left: -40rpx; /* 抵消 padding-left */
  top: -10rpx;
}

.step-dot {
  width: 16rpx;
  height: 16rpx;
  border: 4rpx solid #FF5A1F;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: -9rpx; /* 对齐虚线 */
}

.step-badge {
  background-color: #FF5A1F;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 30rpx;
}

.step-content {
  margin-top: 10rpx;
}

.step-desc {
  font-size: 28rpx;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.step-imgs {
  display: flex;
  justify-content: space-between;
}

.img-box {
  width: 48%;
  height: 300rpx;
  background-color: #F5F6F8;
  border-radius: 12rpx;
  position: relative;
  overflow: hidden;
}

.mock-img {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
}

.img-label {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 0 0 12rpx 0;
  z-index: 2;
}

.upload-placeholder {
  background-color: #FFF2ED;
  border: 2rpx dashed #FF9E7F;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.upload-text {
  font-size: 24rpx;
  color: #FF5A1F;
  margin-top: 10rpx;
}

.reupload-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 90, 31, 0.1);
  color: #FF5A1F;
  border: 2rpx solid #FF5A1F;
  font-size: 24rpx;
  padding: 10rpx 16rpx;
  border-radius: 30rpx;
  z-index: 2;
}

.bottom-spacer {
  height: 160rpx; /* 为底部按钮留出空间 */
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
  box-sizing: border-box;
  z-index: 99;
}

.btn-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.single-btn {
  justify-content: center;
}

.btn-outline, .btn-primary, .btn-disabled {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
  text-align: center;
}

.btn-group.double-btn button {
  width: 48%;
}

.btn-group.single-btn button {
  width: 100%;
}

.btn-outline {
  background-color: #fff;
  color: #FF5A1F;
  border: 2rpx solid #FF5A1F;
}

.btn-outline.with-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-outline.with-icon text {
  margin-left: 8rpx;
}

.btn-primary {
  background-color: #FF5A1F;
  color: #fff;
  border: none;
}

.btn-disabled {
  background-color: #E2B9AA; /* 审核中偏淡的颜色 */
  color: #fff;
  border: none;
}

button::after {
  border: none;
}
</style>