feat: 新增问卷填写功能

App.vue

@@ -76,6 +76,17 @@ page {
   position: relative;
 }
 
+.absolute {
+  position: absolute;
+}
+
+.inset-0 {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
 .inline-block {
   display: inline-block;
 }
@@ -180,6 +191,7 @@ page {
 .pt-5 {
   padding-top: 10rpx;
 }
+
 .pt-15 {
   padding-top: 30rpx;
 }

pages.json

@@ -29,6 +29,13 @@
 				"disableScroll": true
 			}
 		},
+		{
+			"path": "pages/survey/fill",
+			"style": {
+				"navigationBarTitleText": "问卷",
+				"disableScroll": true
+			}
+		},
 		{
 			"path": "pages/message/message",
 			"style": {

pages/survey/components/survey-cover.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="h-full py-20vh">
+    <view class="mb-10 px-15 text-lg font-semibold text-center">{{ survey.name }}</view>
+    <scroll-view :scroll-y="true" class="h-40vh">
+      <view class="text-sm text-gray px-15 text-center leading-normal">
+        {{ survey.description || '' }}
+      </view>
+    </scroll-view>
+    <view v-if="customerName" class="my-4 text-center text-base">
+      <text class="text-gray">客户：</text>
+      <text class="font-semibold">{{ customerName }}</text>
+    </view>
+    <view
+      class="mx-auto answer-btn h-12 text-base flex items-center justify-center text-white text-center rounded-full bg-primary"
+      @click="answer()">
+      开始答题
+    </view>
+  </view>
+</template>
+<script setup>
+defineProps({
+  customerName: { type: String, default: '' },
+  survey: { type: Object, default: () => ({}) }
+})
+const emits = defineEmits(['answer'])
+
+function answer() {
+  emits('answer')
+}
+
+</script>
+<style>
+.h-40vh {
+  height: 40vh;
+}
+
+.py-20vh {
+  padding: 20vh 0;
+}
+
+.my-4 {
+  margin-top: 30rpx;
+  margin-bottom: 30rpx;
+}
+
+.answer-btn {
+  width: 80%;
+}
+
+.h-12 {
+  height: 96rpx;
+}
+</style>

pages/survey/components/survey-question.vue

@@ -0,0 +1,196 @@
+<template>
+  <view class="h-full flex flex-col">
+    <view class="flex-shrink-0 px-10 pt-5 text-lg text-primary font-semibold text-center truncate">{{ survey.name }}
+    </view>
+    <view v-if="survey.description"
+      class="flex-shrink-0 px-10 mt-10 text-sm leading-normal text-gray line-clamp-2 text-center">
+      {{ survey.description }}
+    </view>
+    <view v-if="survey.enableScore" class="text-right mt-10 px-10 text-sm">
+      当前得分：<span class="text-primary text-base font-semibold min-w-5 inline-block">{{ allScore }} </span>
+    </view>
+    <view v-if="quesiton" class="my-3 text-base font-semibold px-10 leading-normal ">
+      <span v-if="quesiton.require" class="text-xs text-danger">*</span> {{ index + 1 }}、{{ quesiton.title }}
+    </view>
+    <view v-if="quesiton" class="flex-grow relative">
+      <scroll-view :scroll-y="true" class="absolute inset-0">
+        <view class="px-10">
+          <template v-if="quesiton.type === 'radio'">
+            <view v-for="(opt, idx) in quesiton.options" :key="opt.value" class="flex py-4 border-b "
+              :class="idx === 0 ? 'border-t' : ''" @click="changeRadio(opt.value)">
+              <uni-icons v-if="answer[quesiton.id] === opt.value" class="mr-2 text-primary flex-shrink-0" color=" "
+                type="checkbox-filled" size="24"></uni-icons>
+              <uni-icons v-else class="mr-2 text-gray flex-shrink-0" color=" " type="circle" size="24"></uni-icons>
+              <view class="flex-grow text-base leading-normal">
+                {{ opt.label }}
+                <span v-if="survey.enableScore && opt.score >= 0">
+                  （ {{ opt.score }}分）
+                </span>
+              </view>
+            </view>
+          </template>
+          <textarea v-else-if="quesiton.type === 'input'" :value="answer[quesiton.id]" placeholder="请输入..."
+            placeholder-class="text-gray text-sm"
+            class="p-10 text-sm w-full box-border rounded border min-h-30 border-gray-200" @input="change($event)" />
+        </view>
+      </scroll-view>
+    </view>
+    <view v-if="list.length > 1" class="flex-shrink-0 py-3">
+      <view class="mx-3 bg-gray-100 h-3 rounded-lg overflow-hidden">
+        <view class="h-3 rounded-lg bg-primary" :style="{ width: `${progress}%` }"></view>
+      </view>
+      <view class="flex items-center justify-between px-10 py-15">
+        <view class="flex items-center text-primary" :class="index > 0 ? '' : 'opacity-0'" @click="prev()">
+          <uni-icons class="inline-block mr-10rpx" color=" " type="arrowleft"></uni-icons>
+          <span class="text-base font-semibold">上一题</span>
+        </view>
+        <!-- 当前得分：40 -->
+        <view class="text-sm">{{ index + 1 }} / {{ list.length }}</view>
+        <view v-if="index < list.length - 1" class="flex items-center text-primary"
+          :class="index < list.length - 1 ? '' : 'opacity-0'" @click="next()">
+          <span class="text-base font-semibold">下一题</span>
+          <uni-icons class="inline-block ml-10rpx" color=" " type="arrowright"></uni-icons>
+        </view>
+        <view v-if="index === list.length - 1" class="flex items-center text-primary" @click="submit()">
+          <span class="text-base font-semibold">提交</span>
+        </view>
+      </view>
+    </view>
+    <view v-if="list.length === 1"
+      class="flex-shrink-0 mx-10 my-3 h-10 leading-10 text-white text-center rounded-3xl bg-primary" @click="submit()">
+      提交
+    </view>
+
+  </view>
+</template>
+<script>
+import { toast } from '@/utils/widget'
+export default {
+  name: 'Question',
+  props: {
+    list: { type: Array, default: () => ([]) },
+    survey: { type: Object, default: () => ({}) }
+  },
+  data() {
+    return {
+      index: 0,
+      answer: {},
+      waiting: false
+    }
+  },
+  computed: {
+    quesiton() {
+      return this.list[this.index]
+    },
+    progress() {
+      return (this.index + 1) / (this.list.length || 1) * 100
+    },
+    allScore() {
+      return this.list.reduce((score, item) => {
+        if (item.type === 'radio') {
+          const opt = item.options.find(i => i.value && i.value === this.answer[item.id])
+          if (opt && opt.score >= 0) {
+            score = Math.floor(score * 100 + opt.score * 100) / 100
+          }
+        }
+        return score
+      }, 0)
+    }
+  },
+  methods: {
+
+    change(e) {
+      this.$set(this.answer, this.quesiton.id, e.detail.value)
+    },
+    changeIndex(num) {
+      if (this.waiting) return;
+      this.waiting = true;
+      setTimeout(() => this.waiting = false, 1000);
+      const target = num + this.index;
+      this.index = target >= 0 && target < this.list.length ? target : this.index
+    },
+    changeRadio(value) {
+      this.$set(this.answer, this.quesiton.id, value)
+    },
+    prev() {
+      this.changeIndex(-1)
+    },
+    next() {
+      if (this.quesiton.require && this.quesiton.type === 'radio' && !this.quesiton.options.some(i => i.value && i.value === this.answer[this.quesiton.id])) {
+        toast('请完成当前题目')
+      } else if (this.quesiton.require && this.quesiton.type === 'input' && (typeof this.answer[this.quesiton.id] !== 'string' || this.answer[this.quesiton.id].trim() === '')) {
+        toast('请完成当前题目')
+      } else {
+        this.changeIndex(1)
+      }
+    },
+    verify() {
+      const index = this.list.findIndex(i => {
+        if (i.require && i.type === 'radio' && !i.options.some(j => j.value && j.value === this.answer[i.id])) {
+          return true
+        }
+        if (i.require && i.type === 'input' && (typeof this.answer[i.id] !== 'string' || this.answer[i.id].trim() === '')) {
+          return true
+        }
+        return false
+      })
+      if (index >= 0) {
+        toast('请完成第' + (index + 1) + '题')
+        this.index = index
+        return false
+      }
+      return true
+    },
+    submit() {
+      if (this.verify()) {
+        const list = this.list.map(i => {
+          const item = {
+            id: i.id,
+            value: this.answer[i.id] || '',
+            title: i.title,
+            type: i.type,
+            require: i.require,
+          }
+          if (Array.isArray(i.options)) {
+            item.options = i.options.map(opt => ({ ...opt }))
+          }
+          return item
+        })
+        this.$emit('submit', { list, score: this.allScore })
+      }
+    }
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pt-5 {
+  padding-top: 40rpx;
+}
+
+.min-w-5 {
+  min-width: 40rpx;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.my-3 {
+  margin-top: 24rpx;
+  margin-bottom: 24rpx;
+}
+
+.py-4 {
+  padding-top: 30rpx;
+  padding-bottom: 30rpx;
+}
+
+.border-t {
+  border-top: 1px solid #eee;
+}
+
+.min-h-30 {
+  min-height: 200rpx;
+}
+</style>

pages/survey/components/survey-record.vue

@@ -0,0 +1,93 @@
+<template>
+  <view class="h-full flex flex-col">
+    <view class="flex-shrink-0 px-10 pt-5 text-base font-semibold text-center truncate">{{ surery.name }}</view>
+    <view v-if="surery.description"
+      class="flex-shrink-0 px-10 mt-10 text-sm leading-normal text-gray line-clamp-2 text-center">
+      {{ surery.description }}
+    </view>
+    <view class="flex items-center text-gray text-sm px-10 mt-10">
+      <view v-if="surery.enableScore">
+        当前得分：<text class="text-primary text-base font-semibold min-w-5 inline-block">{{ allScore }}
+        </text>
+      </view>
+      <view class="ml-auto">
+        客户：<text class="text-black text-base font-semibold min-w-5 inline-block">{{ customerName }} </text>
+      </view>
+    </view>
+    <view class="flex-grow relative">
+      <scroll-view :scroll-y="true" class="absolute inset-0">
+        <view v-for="(quesiton, index) in list" :key="quesiton.id">
+          <view v-if="quesiton" class="my-4 text-base px-10 leading-normal">
+            <text v-if="quesiton.require" class="text-base text-red-500">*</text> {{ index + 1 }}、{{ quesiton.title }}
+          </view>
+          <view class="px-10">
+            <template v-if="quesiton.type === 'radio'">
+              <view v-for="(opt, idx) in quesiton.options" :key="opt.value" class="flex py-15 border-b"
+                :class="idx === 0 ? 'border-t' : ''">
+                <view class="flex-grow pl-4 text-gray leading-normal"
+                  :class="quesiton.value && quesiton.value === opt.value ? 'text-primary' : ''">
+                  {{ opt.label }}
+                  <text v-if="surery.enableScore && opt.score >= 0">
+                    （ {{ opt.score }}分）
+                  </text>
+                </view>
+                <uni-icons v-if="quesiton.value && quesiton.value === opt.value" class="ml-1 text-primary flex-shrink-0"
+                  color=" " type="checkbox-filled" size="24"></uni-icons>
+              </view>
+            </template>
+            <view v-else-if="quesiton.type === 'input'"
+              class="my-4 p-10 text-base leading-normal border rounded">
+              {{ quesiton.value || '' }}
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+
+  </view>
+</template>
+<script>
+export default {
+  name: 'Question',
+  props: {
+    customerName: { type: String, default: '' },
+    list: { type: Array, default: () => ([]) },
+    surery: { type: Object, default: () => ({}) }
+  },
+  computed: {
+    allScore() {
+      return this.list.reduce((score, item) => {
+        if (item.type === 'radio') {
+          const opt = item.options.find(i => i.value && i.value === item.value && item.value)
+          if (opt && opt.score >= 0) {
+            score = Math.floor(score * 100 + opt.score * 100) / 100
+          }
+        }
+        return score
+      }, 0)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.min-w-5 {
+  min-width: 40rpx
+}
+
+.pt-5 {
+  padding-top: 40rpx;
+}
+
+.my-4 {
+  margin-top: 32rpx;
+  margin-bottom: 32rpx;
+}
+
+.border-t {
+  border-top: 1px solid #eee;
+}
+
+.pl-4 {
+  padding-left: 30rpx;
+}
+</style>

pages/survey/fill.vue

@@ -0,0 +1,243 @@
+<template>
+  <full-page :customScroll="true">
+    <template v-if="survey && survey.status === 'enable' && !readonly">
+      <survey-cover v-if="step === 'cover'" :customerName="customerName" :survey="survey" @answer="step = 'question'" />
+      <survey-question v-else-if="step === 'question'" :survey="survey" :list="showList" @submit="submit" />
+    </template>
+    <survey-record v-else-if="survey && survey.status === 'enable' && readonly" :customerName="customerName"
+      :survey="survey" :list="showList" />
+    <view v-else class="empty">
+      <image class="empty__icon" src="/static/empty.svg"></image>
+      <text class="empty__txt">{{ emptyTxt }}</text>
+    </view>
+  </full-page>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import api from "@/utils/api.js";
+import { loading, toast, hideLoading } from "@/utils/widget";
+
+import FullPage from '@/components/full-page.vue';
+import surveyCover from "./components/survey-cover.vue";
+import surveyQuestion from "./components/survey-question.vue";
+import surveyRecord from "./components/survey-record.vue";
+
+const corpId = ref('');
+const surveryId = ref('');
+const answerId = ref('');
+const memberId = ref('');
+const survey = ref(null);
+const emptyTxt = ref('')
+const customerName = ref('');
+const step = ref('cover');
+
+const readonly = computed(() => survey.value && survey.value.submitTime);
+const list = computed(() => survey.value && Array.isArray(survey.value.list) ? survey.value.list : []);
+const showList = computed(() => {
+  return list.value.filter(item => {
+    const showCase = Array.isArray(item.showCase) ? item.showCase : [];
+    if (showCase.length) {
+      const res = showCase.every(({
+        type,
+        id,
+        value
+      }) => {
+        const question = this.list.find(i => i.id === id);
+        const val = question ? question.value : '';
+        return type === 'in' ? value.includes(val) : val === value.join()
+      })
+      return res
+    }
+    return true
+  })
+})
+
+async function init() {
+  loading('加载中...');
+  try {
+    const record = await getAnswerRecord();
+    if (record && record.submitTime) {
+      record.status = 'enable';
+      survey.value = record;
+      hideLoading()
+      return;
+    }
+    survey.value = await getSurvey();
+    if (survey.value.status == 'stop') {
+      emptyTxt.value = '问卷已经停用'
+    } else if (survey.value.status == 'init') {
+      emptyTxt.value = '问卷暂未启用'
+    }
+  } catch (e) {
+    hideLoading();
+    toast('获取问卷失败');
+    uni.navigateBack();
+  }
+}
+
+async function getAnswerRecord() {
+  const res = await api('getAnswer', { corpId: corpId.value, surveryId: surveryId.value, answerId: answerId.value, memberId: memberId.value });
+  if (res && res.success) {
+    return res.record
+  }
+  return Promise.reject();
+}
+
+async function getSurvey() {
+  const res = await api('getSurveryDetail', { corpId: corpId.value, id: surveryId.value })
+  if (res && res.success && res.data) {
+    return res.data
+  }
+  return Promise.reject();
+}
+
+async function submit({ list, score }) {
+  const res = await api('answerSurvery', {
+    corpId: corpId.value,
+    name: survey.value.name,
+    memberId: memberId.value,
+    list: list,
+    score: score,
+    answerId: answerId.value,
+  })
+  if (res && res.success) {
+    await toast('提交成功');
+    uni.navigateBack();
+  }
+}
+
+onLoad(opts => {
+  corpId.value = opts.corpId;
+  surveryId.value = opts.surveryId;
+  answerId.value = opts.answerId;
+  memberId.value = opts.memberId;
+  customerName.value = opts.name;
+  init();
+})
+
+
+
+</script>
+
+<style scoped lang="scss">
+.survey {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  height: 100vh;
+  width: 100vw;
+  color: ragb(0, 0, 0, .9);
+  background: #fff;
+
+  @at-root &__wrapper {
+    padding: 30rpx 40rpx;
+  }
+
+  @at-root &__scroll {
+    height: 100%;
+  }
+
+  @at-root &__customer {
+    text-align: right;
+    font-size: 28rpx;
+    padding-bottom: 16rpx;
+    margin-bottom: 24rpx;
+    color: #333;
+    border-bottom: 1px solid #eee;
+  }
+
+  @at-root &__title {
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    margin-bottom: 24rpx;
+  }
+
+  @at-root &__desc {
+    text-align: left;
+    color: #666;
+    font-size: 28rpx;
+    margin-bottom: 24rpx;
+  }
+
+  @at-root &__item {
+    padding: 0 10rpx;
+    margin-bottom: 24rpx;
+  }
+
+  @at-root &__question {
+    position: relative;
+    font-size: 32rpx;
+    margin-bottom: 24rpx;
+
+    @at-root &--require::before {
+      position: absolute;
+      left: -20rpx;
+      top: 0;
+      content: '*';
+      color: #f56c6c;
+    }
+  }
+
+  @at-root &__input {
+    padding: 10rpx 24rpx;
+    font-size: 28rpx;
+    border: 1px solid #eee;
+    border-radius: 8rpx;
+  }
+
+  @at-root &__radio {
+    display: flex;
+    align-items: center;
+    padding-bottom: 24rpx;
+    cursor: pointer;
+  }
+
+  @at-root &__btn {
+    margin-top: 30rpx;
+    padding: 24rpx 30rpx;
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: #fff;
+    background: #006eff;
+    text-align: center;
+  }
+}
+
+.radio {
+  @at-root &__icon {
+    flex-shrink: 0;
+    margin-top: 4rpx;
+    margin-right: 10rpx;
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  @at-root &__label {
+    flex-grow: 1;
+    font-size: 32rpx;
+  }
+}
+
+.empty {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+
+  @at-root &__icon {
+    display: block;
+    margin-bottom: 16rpx;
+    width: 240rpx;
+    height: 240rpx;
+  }
+
+  @at-root &__txt {
+    font-size: 32rpx;
+    color: #666;
+  }
+}
+</style>

pages/survey/survey-list.vue

@@ -134,6 +134,8 @@ const mapRowToView = (row) => {
     team: row?.team?.name || "-",
     time: sendTime,
     status: row?.status || "",
+    memberId: row?.memberId || "",
+    corpId: row?.corpId || "",
   };
 };
 
@@ -179,8 +181,11 @@ const loadSurveyList = async (reset = false) => {
   }
 };
 
-function goToDetail() {
+function goToDetail(item) {
-  uni.showToast({ title: "详情暂未接入", icon: "none" });
+  console.log(item)
+  uni.navigateTo({
+    url: `/pages/survey/fill?name=${item.person}&memberId=${item.memberId}&surveryId=${item.surveryId}&corpId=${item.corpId}&answerId=${item._id}`
+  })
 }
 
 

utils/api.js

@@ -36,7 +36,7 @@ const urlsConfig = {
     addArticleSendRecord: 'addArticleSendRecord',
     addArticleReadRecord: 'addArticleReadRecord',
     getMiniAppReceivedArticleList: 'getMiniAppReceivedArticleList',
-    getPageDisease:'getPageDisease'
+    getPageDisease: 'getPageDisease'
   },
   member: {
     addCustomer: 'add',
@@ -70,7 +70,11 @@ const urlsConfig = {
     getGroupList: "getGroupList"
   },
   survery: {
-    getMiniAppReceivedSurveryList: 'getMiniAppReceivedSurveryList'
+    getMiniAppReceivedSurveryList: 'getMiniAppReceivedSurveryList',
+    getSurveryDetail: 'getDetail',
+    answerSurvery: 'answerSurvery',
+    getAnswerRecord: 'getAnswerRecord',
+    getAnswer:'getAnswer'
   }
 }
 const urls = Object.keys(urlsConfig).reduce((acc, path) => {