cfc/cfc-frontend/pages/problem/flow-intro.vue

<template>
  <view class="fi-wrap">
    <view class="fi-header">
      <text class="fi-title">{{ domainName || '服务流程' }}</text>
      <text class="fi-sub">了解你将获得的完整服务</text>
    </view>

    <view class="fi-loading" v-if="loading">加载中...</view>
    <view class="fi-empty" v-else-if="!steps || steps.length === 0">暂无流程信息</view>

    <view class="fi-timeline" v-else>
      <view class="fi-step" v-for="(s, i) in steps" :key="s.key" :class="{ 'fi-step-last': i === steps.length - 1 }">
        <view class="fi-step-dot" :class="{ 'fi-step-dot-cur': i <= currentStep }">
          <text class="fi-step-num">{{ i + 1 }}</text>
        </view>
        <view class="fi-step-line" v-if="i < steps.length - 1"></view>
        <view class="fi-step-body">
          <text class="fi-step-title">{{ s.title }}</text>
          <text class="fi-step-desc" v-if="s.desc">{{ s.desc }}</text>
        </view>
      </view>
    </view>

    <view class="fi-btn-wrap" v-if="!loading && steps.length > 0">
      <view class="fi-btn" @click="goSurvey">
        <text class="fi-btn-text">开始填写调研</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getProblemDomainList } from '../../utils/api.js'
import { updateUserIntentStage } from '../../utils/api.js'

export default {
  data() {
    return {
      code: '',
      domainName: '',
      steps: [],
      loading: false,
      currentStep: 0
    }
  },
  onLoad(options) {
    var code = options && options.code
    if (code) {
      this.code = code
    }
    this.loadDomainDetail()
  },
  onReady() {
    this.advanceStage()
  },
  methods: {
    getKey(item, i) {
      return 's' + i
    },
    loadDomainDetail() {
      var self = this
      self.loading = true
      uni.showLoading({ title: '加载中...', mask: true })
      getProblemDomainList().then(function(res) {
        uni.hideLoading()
        self.loading = false
        var list = res && res.data
        if (Array.isArray(list)) {
          var found = null
          for (var i = 0; i < list.length; i++) {
            if (list[i].code === self.code) {
              found = list[i]
              break
            }
          }
          if (found) {
            self.domainName = found.name
            var flowJson = found.flow_intro_json
            if (flowJson) {
              var parsed = typeof flowJson === 'string' ? JSON.parse(flowJson) : flowJson
              self.steps = Array.isArray(parsed) ? parsed.map(function(s, idx) {
                return { key: 'step' + idx, title: s.title || '第' + (idx + 1) + '步', desc: s.desc || '' }
              }) : []
            } else {
              self.steps = self.getDefaultSteps()
            }
            self.surveyTemplateId = found.surveyTemplateId || (found.surveyTemplate && found.surveyTemplate.id) || ''
          } else {
            self.steps = self.getDefaultSteps()
          }
        } else {
          self.steps = self.getDefaultSteps()
        }
      }).catch(function() {
        uni.hideLoading()
        self.loading = false
        self.steps = self.getDefaultSteps()
      })
    },
    getDefaultSteps() {
      var defaultTitles = ['选择问题域', '了解服务流程', '填写专项调研', '选购推荐方案', '接收试剂盒', '获取报告', '确认方案并执行']
      return defaultTitles.map(function(t, i) {
        return { key: 'step' + i, title: t, desc: '' }
      })
    },
    advanceStage() {
      updateUserIntentStage(1).then(function() {
        // 静默推进
      }).catch(function() {
        // 静默
      })
    },
    goSurvey() {
      var url = '/pages/problem/survey?code=' + this.code
      if (this.surveyTemplateId) {
        url += '&templateId=' + this.surveyTemplateId
      }
      uni.navigateTo({ url: url })
    }
  }
}
</script>

<style scoped>
.fi-wrap {
  min-height: 100vh;
  background: #FFF7ED;
  padding: 40rpx 32rpx 120rpx;
  box-sizing: border-box;
}

.fi-header {
  margin-bottom: 40rpx;
}

.fi-title {
  display: block;
  font-size: 38rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.fi-sub {
  display: block;
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-top: 10rpx;
}

.fi-loading, .fi-empty {
  text-align: center;
  font-size: 28rpx;
  color: #999;
  padding: 80rpx 0;
}

.fi-timeline {
  padding-left: 30rpx;
}

.fi-step {
  position: relative;
  padding-left: 60rpx;
  padding-bottom: 40rpx;
}

.fi-step-last {
  padding-bottom: 0;
}

.fi-step-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: #FED7AA;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.fi-step-dot-cur {
  background: #F97316;
}

.fi-step-num {
  font-size: 22rpx;
  color: #fff;
  font-weight: bold;
}

.fi-step-line {
  position: absolute;
  left: 20rpx;
  top: 44rpx;
  width: 4rpx;
  height: 100%;
  background: #FED7AA;
  z-index: 1;
}

.fi-step-body {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 28rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.fi-step-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.fi-step-desc {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.fi-btn-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 32rpx 40rpx;
  background: #FFF7ED;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.fi-btn {
  background: linear-gradient(135deg, #F97316, #FB923C);
  border-radius: 48rpx;
  padding: 26rpx 0;
  text-align: center;
}

.fi-btn:active {
  opacity: 0.9;
}

.fi-btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
}
</style>