hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:打分题配置

Browse Source
This commit is contained in:
du.meimei
2025-03-06 17:46:20 +08:00
parent 3a6b5b8699
commit ec99b9d383
21 changed files with 389 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@@ -14,12 +14,9 @@ declare module 'vue' {
VanButton: typeof import('vant/es')['Button']
VanCell: typeof import('vant/es')['Cell']
VanCellGroup: typeof import('vant/es')['CellGroup']
VanCheck: typeof import('vant/es')['Check']
VanCheckbo: typeof import('vant/es')['Checkbo']
VanCheckbox: typeof import('vant/es')['Checkbox']
VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
VanCol: typeof import('vant/es')['Col']
VanDialog: typeof import('vant/es')['Dialog']
VanDivider: typeof import('vant/es')['Divider']
VanField: typeof import('vant/es')['Field']
VanIcon: typeof import('vant/es')['Icon']
@@ -28,6 +25,7 @@ declare module 'vue' {
VanRadioGroup: typeof import('vant/es')['RadioGroup']
VanRow: typeof import('vant/es')['Row']
VanSearch: typeof import('vant/es')['Search']
VanStepper: typeof import('vant/es')['Stepper']
VanSwitch: typeof import('vant/es')['Switch']
VanTabbar: typeof import('vant/es')['Tabbar']
VanTabbarItem: typeof import('vant/es')['TabbarItem']

2
src/layouts/index.vue
View File

@@ -61,7 +61,7 @@ const table = [
position: sticky;
top: 0;
z-index: 1000;
background-color: #A5D380;
background-color: #a5d380;
.title {
display: flex;

21
src/stores/modules/common.ts
View File

@@ -701,9 +701,9 @@ export const useCommonStore = defineStore('common', {
score_interval: 1.0,
prompt_score: 2,
prompt_array: null,
prompt_left: '',
prompt_right: '',
prompt_center: '',
prompt_left: 'left',
prompt_right: 'right',
prompt_center: 'center',
select_random: 0,
float_window: 0,
float_window_content: '',
@@ -5751,7 +5751,8 @@ export const useCommonStore = defineStore('common', {
is_repeat: 0,
allow_repeat_num: 2,
repeat_type: 0,
alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
alert_text:
'您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
is_required: 1,
is_change_row_cell: 0,
select_random: 0,
@@ -5943,7 +5944,8 @@ export const useCommonStore = defineStore('common', {
question_tag: '',
planet_id: '',
permissions: null
}, {
},
{
id: '17852528',
title: 'Q2',
stem: '<p>这是多选矩阵内容</p>',
@@ -5961,7 +5963,8 @@ export const useCommonStore = defineStore('common', {
is_repeat: 0,
allow_repeat_num: 2,
repeat_type: 0,
alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
alert_text:
'您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
is_required: 1,
is_change_row_cell: 0,
row_random: 0,
@@ -6156,7 +6159,8 @@ export const useCommonStore = defineStore('common', {
question_tag: '',
planet_id: '',
permissions: null
}, {
},
{
id: '17852530',
title: 'Q3',
stem: '<p>这个是多选填空内容</p>',
@@ -6177,7 +6181,8 @@ export const useCommonStore = defineStore('common', {
is_repeat: 0,
allow_repeat_num: 2,
repeat_type: 0,
alert_text: '您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
alert_text:
'您在每一题的态度与观点均对我们有非常重要的意义，请您务必仔细阅读题目后回答，连续一致的答案可能会导致整个问卷的作废，谢谢您的配合。',
is_required: 1,
is_change_row_cell: 0,
row_random: 0,

53
src/views/Design/Index.vue
View File

@@ -1,33 +1,50 @@
<template>
<div class="design-create">
<draggable
v-model:data="questionInfo.questions" item-key="id" handle=".moverQues" chosenClass="chosen"
animation="300" :scroll="true"
v-model:data="questionInfo.questions"
item-key="id"
handle=".moverQues"
chosenClass="chosen"
animation="300"
:scroll="true"
>
<template #item="{ element, index }">
<choose-question
:element="element" :questions="questionInfo.questions" :index="index"
:chooseQuestionId="chooseQuestionId" @get-choose-question-id="getChooseQuestionId"
:element="element"
:questions="questionInfo.questions"
:index="index"
:chooseQuestionId="chooseQuestionId"
@get-choose-question-id="getChooseQuestionId"
>
<!-- 选择题 -->
<Choice
v-if="element.question_type === 1 || element.question_type === 2" :element="element"
v-if="element.question_type === 1 || element.question_type === 2"
:element="element"
:active="chooseQuestionId === element.id"
></Choice>
<!-- 填空题 -->
<Completion
v-if="element.question_type === 4" :element="element" :active="chooseQuestionId === element.id"
v-if="element.question_type === 4"
:element="element"
:active="chooseQuestionId === element.id"
sn="lXEBBpE2"
></Completion>
<martrix-question
v-if="element.question_type === 8 || element.question_type === 9 || element.question_type === 10"
:element="element" :active="chooseQuestionId === element.id"
v-if="
element.question_type === 8 ||
element.question_type === 9 ||
element.question_type === 10
"
:element="element"
:active="chooseQuestionId === element.id"
/>
<!-- 打分题 -->
<Rate
v-if="element.question_type === 5" :element="element" :active="chooseQuestionId === element.id"
v-if="element.question_type === 5"
:element="element"
:active="chooseQuestionId === element.id"
sn="lXEBBpE2"
/>
@@ -42,7 +59,11 @@
<template #action="{ element: el }">
<div class="flex slot-actions">
<template v-for="(item, optionIndex) in actionOptions">
<div v-if="item.question_type.includes(el.question_type)" :key="optionIndex" class="flex">
<div
v-if="item.question_type.includes(el.question_type)"
:key="optionIndex"
class="flex"
>
<template v-for="(act, actIndex) in item.actions" :key="actIndex">
<div class="flex align-center action-item" @click="actionEvent(act, el)">
<van-icon :name="act.icon"></van-icon>
@@ -58,8 +79,11 @@
<!-- {{ element.question_type }}-->
<!-- {{questionInfo.survey.pages.length}}-->
<paging
v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop=""
v-if="!element.question_type && questionInfo.survey.pages.length > 1"
:info="element"
:index="index"
:active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
@click.stop=""
/>
</template>
</draggable>
@@ -148,7 +172,8 @@ const actionOptions = [
fun: 'radioAddOption'
}
]
}, {
},
{
question_type: [8, 9, 10],
// 矩阵问卷逻辑处理
actions: [
@@ -227,7 +252,7 @@ onMounted(() => {
color: #333;
.slot-actions {
& .action-item+.action-item {
& .action-item + .action-item {
margin-left: 10px;
}
}

34
src/views/Design/components/ActionCompoents/OptionAction.vue
View File

@@ -117,23 +117,23 @@ const openMoveModel = (item, index) => {
// 上下移动
const optionMove = (action) => {
switch (action.action) {
case 'up':
if (activeIndex.value === 0) {
moveShow.value = false;
return false;
}
// 向上移动
element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value -= 1;
break;
case 'down':
if (activeIndex.value === element.value.length - 1) {
moveShow.value = false;
return false;
}
element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value += 1;
break;
case 'up':
if (activeIndex.value === 0) {
moveShow.value = false;
return false;
}
// 向上移动
element.value.splice(activeIndex.value - 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value -= 1;
break;
case 'down':
if (activeIndex.value === element.value.length - 1) {
moveShow.value = false;
return false;
}
element.value.splice(activeIndex.value + 1, 0, element.value.splice(activeIndex.value, 1)[0]);
activeIndex.value += 1;
break;
}
};

26
src/views/Design/components/ActionCompoents/QuestionAction.vue
View File

@@ -50,6 +50,11 @@
v-if="activeQuestion.question_type === 2"
v-model="activeQuestion"
></checkbox-question-action>
<rate-action
v-if="activeQuestion.question_type === 5"
:config="activeQuestion.config"
@update-config="updateConfig"
></rate-action>
</van-cell-group>
</van-action-sheet>
<!-- 移动 复制-->
@@ -96,6 +101,7 @@ import { ref } from 'vue';
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import QuestionBefore from '@/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue';
import RateAction from './components/RateAction.vue';
import { v4 as uuidv4 } from 'uuid';
const store = useCounterStore();
const { questionsInfo } = storeToRefs(store);
@@ -190,8 +196,8 @@ const getSkipTypeText = (skipType) => {
const ls = [];
logics.map((item) => {
if (
item.skip_type === skipType
&& item.question_index === activeQuestion.value.question_index
item.skip_type === skipType &&
item.question_index === activeQuestion.value.question_index
) {
ls.push(item);
}
@@ -207,16 +213,20 @@ const getSkipTypeText = (skipType) => {
const questionSetting = (type) => {
switch (type) {
case 'before':
questionBeforeShow.value = true;
case 'before':
questionBeforeShow.value = true;
break;
case 'after':
questionBeforeShow.value = true;
break;
break;
case 'after':
questionBeforeShow.value = true;
break;
}
skipType.value = type === 'before' ? 1 : 0;
};
const updateConfig = (value) => {
activeQuestion.value.config = { ...value };
};
</script>
<style scoped lang="scss">
.ml10 {

158
src/views/Design/components/ActionCompoents/components/RateAction.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<div>
<!-- <van-divider></van-divider> -->
<van-cell-group title="分数设置">
<!-- <van-field
v-model="localConfig.min"
label="最低分"
@blur="getPrompt(localConfig.min, 'min')"
input-align="right"
placeholder="请输入"
/> -->
<div class="score">
<p>最低分</p>
<van-stepper
v-model="localConfig.min"
button-size="22px"
@blur="minChange"
@change="minChange"
/>
</div>
<div class="score">
<p>最高分</p>
<van-stepper
v-model="localConfig.max"
:max="maxLimit"
button-size="22px"
@blur="maxChange"
@change="maxChange"
/>
</div>
<div class="score">
<p>分数间隔</p>
<van-stepper
v-model="localConfig.score_interval"
:min="0"
button-size="22px"
@blur="intervalChange"
@change="intervalChange"
/>
</div>
</van-cell-group>
<van-cell-group title="提示文字">
<van-field
v-model="localConfig.prompt_left"
label="左边文字"
input-align="right"
placeholder="请输入"
@blur="getPrompt(localConfig.prompt_left, 'prompt_left')"
/>
<van-field
v-model="localConfig.prompt_center"
label="中间文字"
input-align="right"
placeholder="请输入"
@blur="getPrompt(localConfig.prompt_center, 'prompt_center')"
/>
<van-field
v-model="localConfig.prompt_right"
label="右边文字"
input-align="right"
placeholder="请输入"
@blur="getPrompt(localConfig.prompt_right, 'prompt_right')"
/>
</van-cell-group>
</div>
</template>
<script setup>
import { ref, watch, computed, defineEmits, defineProps } from 'vue';
const maxRange = ref(Number(11));
const props = defineProps({
config: {
type: Object
}
});
const localConfig = ref({ ...props.config });
// 定义 emit
const emit = defineEmits(['updateConfig']);
watch(
() => props.config,
(newConfig) => {
localConfig.value = { ...newConfig };
},
{ deep: true }
);
const getPrompt = (e, key) => {
localConfig.value[key] = e;
emit('updateConfig', localConfig.value);
};
const maxLimit = computed(() => {
return localConfig.value.min + (maxRange.value - 1) * localConfig.value.scoreInterval;
});
/**
* 设置最高分默认值
*/
function setDefaultMax() {
localConfig.value.max = localConfig.value.min + 4 * localConfig.value.scoreInterval;
}
/**
* 判断间隔能否为整数
*/
function isSurplus() {
if (localConfig.value.max === 0 && localConfig.value.min === 0) {
return false;
} else {
return (
parseFloat(((localConfig.value.max - localConfig.value.min) * 1000).toFixed(4, 10)) %
parseFloat((localConfig.value.score_interval * 1000).toFixed(4, 10)) ===
0
);
}
}
function emitInfo() {
emit('updateConfig', localConfig.value);
}
function intervalChange(value) {
localConfig.value.score_interval = Number(value) === 0 ? 1 : Number(value);
setDefaultMax();
emitInfo();
}
const minChange = (value) => {
const oldMax = Number(props.config.min);
localConfig.value.min = Number(value);
if (localConfig.value.min > localConfig.value.max) {
localConfig.value.min = oldMax;
}
setDefaultMax();
emitInfo();
};
function maxChange(value) {
const oldMax = Number(props.config.max);
localConfig.value.max = Number(value);
if (!isSurplus()) {
localConfig.value.max = oldMax;
}
if (localConfig.value.max < localConfig.value.min) {
localConfig.value.max = oldMax;
}
emitInfo();
}
</script>
<style scoped lang="scss">
.score {
display: flex;
justify-content: space-between;
margin: 4px 0;
padding: 8px 9px;
border-bottom: 1px solid #f2f3f5;
}
</style>

39
src/views/Design/components/Questions/MartrixQuestion.vue
View File

@@ -16,14 +16,14 @@ const { element } = defineProps<{ element: MatrixSurveyQuestion }>();
*/
const tableInputTypeMapping = (/** regx?: any */) => {
switch (element.question_type) {
case 8:
return 'text';
case 9:
return 'radio';
case 10:
return 'checkbox';
default:
return 'radio';
case 8:
return 'text';
case 9:
return 'radio';
case 10:
return 'checkbox';
default:
return 'radio';
}
};
@@ -56,9 +56,15 @@ const vFocus: Directive = {
<!-- 第一行内容为空 -->
<th></th>
<!-- 第二行内容开始填充 -->
<td v-for="(col) in element.options[1]" :key="col.option" ref="columnLabels">
<td v-for="col in element.options[1]" :key="col.option" ref="columnLabels">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<input v-if="col.editor" v-model="col.option" v-focus type="text" @focusout="col.editor = false" />
<input
v-if="col.editor"
v-model="col.option"
v-focus
type="text"
@focusout="col.editor = false"
/>
<span v-else @click="col.editor = true" v-html="col.option"></span>
</td>
</tr>
@@ -67,7 +73,13 @@ const vFocus: Directive = {
<tr v-for="row in element.options[0]" :key="row.option">
<!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
<td>
<input v-if="row.editor" v-model="row.option" v-focus type="text" @focusout="row.editor = false" />
<input
v-if="row.editor"
v-model="row.option"
v-focus
type="text"
@focusout="row.editor = false"
/>
<span v-else @click="row.editor = true" v-html="row.option"></span>
</td>
<td v-for="col in element.options[1]" :key="col.option">
@@ -93,10 +105,9 @@ const vFocus: Directive = {
border-width: 0 0 1px;
text-align: left;
}
}
input[type="text"] {
input[type='text'] {
width: 85%;
}
@@ -112,7 +123,7 @@ input[type="text"] {
display: flex;
justify-content: flex-end;
&>span {
& > span {
margin-right: 6px;
font-size: 16px;
}

13
src/views/Design/components/Questions/Rate.vue
View File

@@ -22,7 +22,12 @@
class="van-field"
v-html="item.option"
></div>
<RateCharacter></RateCharacter>
<RateCharacter :config="element.config"></RateCharacter>
<div class="tips">
<p>{{ element.config.prompt_left }}</p>
<p>{{ element.config.prompt_center }}</p>
<p>{{ element.config.prompt_right }}</p>
</div>
</div>
</div>
</template>
@@ -63,4 +68,10 @@ const chooseOption = (item) => {
.content {
background-color: #fff;
}
.tips {
display: flex;
justify-content: space-between;
color: #bfbfbf;
}
</style>

59
src/views/Design/components/Questions/RateCharacter.vue
View File

@@ -15,7 +15,8 @@
</template>
<script setup>
import { ref } from 'vue';
import { ref, watch } from 'vue';
const rateItem = ref([
{
label: 1,
@@ -36,34 +37,48 @@ const rateItem = ref([
{
label: 5,
active: false
},
{
label: 6,
active: false
},
{
label: 7,
active: false
},
{
label: 8,
active: false
},
{
label: 9,
active: false
},
{
label: 10,
active: false
}
]);
const props = defineProps({
config: {
type: Object,
required: true
}
});
const renderScore = (min, max, interval) => {
const result = [];
for (let i = min; i <= max; i += interval) {
result.push({
label: i,
active: false
});
// 如果达到 10 条数据，停止生成
if (result.length === 11) {
break;
}
}
rateItem.value = result;
};
const getItem = (value) => {
// chooseId.value = value.id;
rateItem.value.forEach((item, index) => {
rateItem.value[index].active = item.label <= value.label;
});
};
// 监听 min、max 和 score_interval 的变化
watch(
() => [props.config.min, props.config.max, props.config.score_interval],
(newValues) => {
const [newMin, newMax, newScoreInterval] = newValues;
// this.renderScore();
renderScore(newMin, newMax, newScoreInterval);
// 在这里可以添加对这些值变化的处理逻辑
},
{ immediate: true }
);
</script>
<style scoped lang="scss">
@@ -76,7 +91,7 @@ ul {
.rate_item {
margin: 0 3px;
margin-top: 5px;
padding: 0 8px;
padding: 0 7px;
border: 1px solid #ddd;
border-radius: 4px;
color: #666;

3
src/views/Design/components/Questions/paging/Paging.vue
View File

@@ -11,7 +11,8 @@
class="iconfont active-icon"
:style="{ marginRight: isLastPage ? '0' : '16px' }"
@click="activePage"
>&#xe86c;</i>
>&#xe86c;</i
>
<template v-if="!isLastPage">
<i class="iconfont moverQues" style="margin-right: 16px">&#xe71b;</i>
<i class="iconfont" @click="deleteHandle">&#xe6c5;</i>

2
src/views/Design/components/Questions/types/martrix.d.ts vendored
View File

@@ -210,4 +210,4 @@ type MatrixSurveyQuestion = {
*/
type MatrixSurvey = {
question?: MatrixSurveyQuestion;
};
};

8
src/views/Home/Index.vue
View File

@@ -3,7 +3,6 @@
import LastSurvey from './components/LastSurvey/Index.vue';
import Market from './components/Market/Index.vue';
import CreateSurvey from './components/CreateSurvey/Index.vue';
</script>
<template>
@@ -21,15 +20,15 @@ import CreateSurvey from './components/CreateSurvey/Index.vue';
<style scoped lang="scss">
.container {
padding: 0 10px 60px;
background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #A5D380 100%);
background: linear-gradient(0deg, #f5f5f5 0%, #f5f5f5 84%, #a5d380 100%);
&> :first-child {
& > :first-child {
display: flex;
justify-content: space-around;
border-radius: 6px;
background-color: white;
&>div {
& > div {
display: flex;
flex-direction: column;
width: 50px;
@@ -40,7 +39,6 @@ import CreateSurvey from './components/CreateSurvey/Index.vue';
padding: 20px 10px;
}
}
}
</style>

11
src/views/Home/components/CreateSurvey/Hooks/useRequestHooks.ts
View File

@@ -18,14 +18,17 @@ export const surveys = [
{
title: 'NPS调研',
icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u22.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
}, {
},
{
title: '考评测试',
icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u24.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
}, {
},
{
title: '表单收集',
icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u16.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
}, {
},
{
title: '消费者测试',
icon: 'https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u18.png?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64'
}
];
];

7
src/views/Home/components/CreateSurvey/Index.vue
View File

@@ -1,11 +1,10 @@
<script setup lang="ts">
import { surveys } from './Hooks/useRequestHooks';
</script>
<template>
<van-cell style="position: relative;z-index: 1">
<div style="text-align: left;">新建问卷</div>
<van-cell style="position: relative; z-index: 1">
<div style="text-align: left">新建问卷</div>
<van-row>
<van-col v-for="survey in surveys" :key="survey.title" span="6" class="survey">
<img width="45px" :src="survey.icon" alt=" " />
@@ -31,4 +30,4 @@ import { surveys } from './Hooks/useRequestHooks';
font-size: 10px;
}
}
</style>
</style>

26
src/views/Home/components/LastSurvey/Index.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import { lastSurveys } from './hooks/useLastSurveyHooks';
</script>
<template>
@@ -17,17 +16,24 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
<div class="last-survey_items_status">
<img
src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u249.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
alt=" " width="10px" height="10px"
alt=" "
width="10px"
height="10px"
/>
<small> {{ survey.status }} - 100</small>
</div>
<div class="last-survey_items_info">
<small> 报名签到</small> <small>| {{ survey.platform }} | 创建时间: {{ survey.createTime }}</small>
<small> 报名签到</small>
<small>| {{ survey.platform }} | 创建时间: {{ survey.createTime }}</small>
</div>
<div class="last-survey_items_content">
<p><small>{{ survey.title }}</small></p>
<p><small>{{ survey.describe }}</small></p>
<p>
<small>{{ survey.title }}</small>
</p>
<p>
<small>{{ survey.describe }}</small>
</p>
</div>
</div>
</div>
@@ -36,13 +42,13 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
<style scoped lang="scss">
.last-survey {
&> :first-child {
& > :first-child {
display: flex;
align-items: end;
justify-content: space-between;
margin: 10px 0;
&>span {
& > span {
color: grey;
font-size: 10px;
}
@@ -53,7 +59,7 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
flex-flow: column nowrap;
justify-content: space-around;
&>div {
& > div {
display: flex;
flex-direction: column;
overflow: hidden;
@@ -68,7 +74,7 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
background-color: white;
.last-survey_items_status {
&>small {
& > small {
color: red;
font-size: 10px;
}
@@ -81,10 +87,8 @@ import { lastSurveys } from './hooks/useLastSurveyHooks';
.last-survey_items_content {
font-size: 12px;
}
}
}
}
</style>

9
src/views/Home/components/LastSurvey/hooks/useLastSurveyHooks.ts
View File

@@ -1,4 +1,3 @@
export const lastSurveys = [
{
status: '已结束',
@@ -6,17 +5,19 @@ export const lastSurveys = [
createTime: '2025-03-04',
title: '签到报名问卷标题',
describe: '问卷描述'
}, {
},
{
status: '已结束',
platform: '移动端',
createTime: '2025-03-04',
title: '签到报名问卷标题',
describe: '问卷描述'
}, {
},
{
status: '已结束',
platform: '移动端',
createTime: '2025-03-04',
title: '签到报名问卷标题',
describe: '问卷描述'
}
];
];

11
src/views/Home/components/Market/Index.vue
View File

@@ -4,7 +4,6 @@ import { tables } from './hooks/useMarketHooks';
import TestComponent from './components/TestComponent.vue';
const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
</script>
<template>
@@ -16,7 +15,9 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
</div>
<div class="market_table">
<div v-for="item in tables" :key="item.title" @click="activeComponet = item.component">{{ item.title }}</div>
<div v-for="item in tables" :key="item.title" @click="activeComponet = item.component">
{{ item.title }}
</div>
</div>
<van-cell class="market_items">
<component :is="activeComponet" />
@@ -26,7 +27,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
<style scoped>
.market {
&> :first-child {
& > :first-child {
display: flex;
align-items: end;
justify-content: space-between;
@@ -47,7 +48,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
/* padding: 10px 0; */
&>div {
& > div {
padding: 0 20px;
text-wrap: nowrap;
}
@@ -58,7 +59,7 @@ const activeComponet = ref(h(TestComponent, { cn: '报名签到' }));
flex-flow: row wrap;
justify-content: space-around;
&>div {
& > div {
display: flex;
overflow: hidden;
width: calc(196px / 1.2);

21
src/views/Home/components/Market/components/TestComponent.vue
View File

@@ -11,23 +11,26 @@ const { cn } = defineProps({
<template>
<van-row :gutter="4">
<van-col
v-for="item in 2" :key="item" :span="10"
style="display: flex; flex-direction: column; align-items: start; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);"
v-for="item in 2"
:key="item"
:span="10"
style="
display: flex;
flex-direction: column;
align-items: start;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
"
>
<div style="display: flex; align-items: center; justify-content: space-evenly;width: 100%;">
<div style="display: flex; align-items: center; justify-content: space-evenly; width: 100%">
<span>{{ cn }} 模板</span>
<img
src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u42.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64"
/>
</div>
<div>
<span>引用10次</span> | <span>创建人: 张三</span>
</div>
<div><span>引用10次</span> | <span>创建人: 张三</span></div>
</van-col>
</van-row>
</template>
<style lang="sass" scoped>
</style>
<style lang="sass" scoped></style>

17
src/views/Home/components/Market/hooks/useMarketHooks.ts
View File

@@ -5,20 +5,25 @@ export const tables = [
{
title: '报名签到',
component: h(TestComponent, { cn: '报名签到' })
}, {
},
{
title: '满意度调研',
component: h(TestComponent, { cn: '满意度调研' })
}, {
},
{
title: '快速投票',
component: h(TestComponent, { cn: '快速投票' })
}, {
},
{
title: '打分评估',
component: h(TestComponent, { cn: '打分评估' })
}, {
},
{
title: 'NPS',
component: h(TestComponent, { cn: 'NPS' })
}, {
},
{
title: '考评测试',
component: h(TestComponent, { cn: '考评测试' })
}
];
];

4
src/views/Market/Index.vue
View File

@@ -3,7 +3,9 @@
<div v-for="item in 10" :key="item" class="template">
<img src="https://picsum.photos/131/128" width="110" height="100" alt="" />
<span>报名/签到模板</span>
<span style="color: rgb(127, 127, 127)">报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span>
<span style="color: rgb(127, 127, 127)"
>报名签到 | 引用 {{ item }} 次 | 创建人: {{ '张三' }}</span
>
</div>
</div>
</template>