feat: 添加更多模板跳转功能
- 为"更多模板"按钮添加了跳转到模板市场的功能 - 完善了用户交互体验，使导航更加直观 - 优化了问卷创建流程
This commit is contained in:
Huangzhe
@@ -1,205 +1,209 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { consoleSurveys, getQuestionList, useTemplate } from '@/api/home/index.js';
|
||||
import { saveQuestions, snQuestions } from '@/api/design/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useCounterStore } from '@/stores/counter';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import homePen from '@/assets/img/home/home-pen.png';
|
||||
// 获取 Store 实例
|
||||
const counterStore = useCounterStore();
|
||||
const store = storeToRefs(counterStore);
|
||||
|
||||
const router = useRouter();
|
||||
const surveys = ref([]);
|
||||
|
||||
const createdNewPage = defineModel('createdNewPage', {
|
||||
type: Boolean,
|
||||
default: false
|
||||
});
|
||||
const createdQuestion = (item) => {
|
||||
// 为 智能创建建立链接
|
||||
if (item.h5Title === '智能创建') {
|
||||
return router.push({ name: 'intelligentGeneration' });
|
||||
}
|
||||
|
||||
const query = {
|
||||
group_id: 0,
|
||||
source: 1,
|
||||
project_name: `${item.title}问卷 `,
|
||||
remarks: '为优化活动服务品质，烦请完成问卷，感谢配合',
|
||||
scene_code: item.parentCode,
|
||||
scene_code_info: item.code,
|
||||
// 很迷茫 模板新增 tag 空数组 非模板 就是k
|
||||
tags: ''
|
||||
};
|
||||
if (createdNewPage.value) {
|
||||
query.scene_code = item.parentCode;
|
||||
query.tags = '';
|
||||
} else {
|
||||
if (item.sn) {
|
||||
query.scene_code = null;
|
||||
query.tags = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 如果放在了底部 当作新增组件
|
||||
if (createdNewPage.value) {
|
||||
consoleSurveys(query).then((res) => {
|
||||
if (res.data) {
|
||||
createdApx(res);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (item.sn) {
|
||||
useTemplate(item.sn, query).then((temp) => {
|
||||
if (temp.data) {
|
||||
createdApx(temp);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
consoleSurveys(query).then((res) => {
|
||||
if (res.data) {
|
||||
createdApx(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const createdApx = (res) => {
|
||||
snQuestions({ sn: res.data.data.sn }).then((ques) => {
|
||||
if (ques.data) {
|
||||
ques.data.data.survey.introduction = `<p>为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！</p>`;
|
||||
store.questionsInfo.value = ques.data.data;
|
||||
saveQuestions({
|
||||
sn: res.data.data.sn,
|
||||
introduction: ques.data.data.survey.introduction,
|
||||
title: ques.data.data.survey.title
|
||||
}).then(() => {
|
||||
router.push({
|
||||
path: '/create',
|
||||
query: {
|
||||
sn: res.data.data.sn
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 添加获取问卷列表的方法
|
||||
const getList = () => {
|
||||
getQuestionList().then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
if (res.data.data) {
|
||||
res.data.data.forEach((item) => {
|
||||
// if (item.parentCode && item.parentCode === 1) {
|
||||
surveys.value.push(item);
|
||||
// }
|
||||
});
|
||||
|
||||
// surveys.value.push({});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 在组件挂载时调用
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create_survey">
|
||||
<div class="create_survey_title" style="color: #000; text-align: left">新建问卷</div>
|
||||
<div class="home-pen">
|
||||
<img :src="homePen" alt="" />
|
||||
</div>
|
||||
<div class="surveys">
|
||||
<!-- <div @click="$router.push({ name: 'intelligentGeneration' })">AI 智能创建</div> -->
|
||||
<div
|
||||
v-for="survey in surveys"
|
||||
:key="survey.title"
|
||||
class="survey"
|
||||
@click="createdQuestion(survey)"
|
||||
>
|
||||
<img :src="survey.h5Image" alt="" width="40" />
|
||||
<span>{{ survey.h5Title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-pen {
|
||||
//height: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
|
||||
//width: 100%;
|
||||
background: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
//height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.create_survey {
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
border-radius: 16px;
|
||||
background-image: url('@/assets/img/home/item-back.png');
|
||||
background-position: center; /* 确保图片居中显示 */
|
||||
background-size: cover; /* 或者使用具体的尺寸，如 100% 100% */
|
||||
background-repeat: no-repeat;
|
||||
|
||||
//padding: 15px;
|
||||
|
||||
color: #000;
|
||||
|
||||
.create_survey_title {
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, 'PingFang SC';
|
||||
}
|
||||
|
||||
& .warp {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
//全部问卷容器
|
||||
.surveys {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
// 单个问卷
|
||||
.survey {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-size: 0.34rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { consoleSurveys, getQuestionList, useTemplate } from '@/api/home/index.js';
|
||||
import { saveQuestions, snQuestions } from '@/api/design/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useCounterStore } from '@/stores/counter';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import homePen from '@/assets/img/home/home-pen.png';
|
||||
// 获取 Store 实例
|
||||
const counterStore = useCounterStore();
|
||||
const store = storeToRefs(counterStore);
|
||||
|
||||
const router = useRouter();
|
||||
const surveys = ref([]);
|
||||
|
||||
const createdNewPage = defineModel('createdNewPage', {
|
||||
type: Boolean,
|
||||
default: false
|
||||
});
|
||||
const createdQuestion = (item) => {
|
||||
// 为 智能创建建立链接
|
||||
if (item.h5Title === '智能创建') {
|
||||
return router.push({ name: 'intelligentGeneration' });
|
||||
}
|
||||
// 为 更多模板添加对应的跳转链接
|
||||
if (item.h5Title === '更多模板') {
|
||||
return router.push({ name: 'templateMarket' });
|
||||
}
|
||||
|
||||
const query = {
|
||||
group_id: 0,
|
||||
source: 1,
|
||||
project_name: `${item.title}问卷 `,
|
||||
remarks: '为优化活动服务品质，烦请完成问卷，感谢配合',
|
||||
scene_code: item.parentCode,
|
||||
scene_code_info: item.code,
|
||||
// 很迷茫 模板新增 tag 空数组 非模板 就是k
|
||||
tags: ''
|
||||
};
|
||||
if (createdNewPage.value) {
|
||||
query.scene_code = item.parentCode;
|
||||
query.tags = '';
|
||||
} else {
|
||||
if (item.sn) {
|
||||
query.scene_code = null;
|
||||
query.tags = [];
|
||||
}
|
||||
}
|
||||
|
||||
// 如果放在了底部 当作新增组件
|
||||
if (createdNewPage.value) {
|
||||
consoleSurveys(query).then((res) => {
|
||||
if (res.data) {
|
||||
createdApx(res);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (item.sn) {
|
||||
useTemplate(item.sn, query).then((temp) => {
|
||||
if (temp.data) {
|
||||
createdApx(temp);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
consoleSurveys(query).then((res) => {
|
||||
if (res.data) {
|
||||
createdApx(res);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
const createdApx = (res) => {
|
||||
snQuestions({ sn: res.data.data.sn }).then((ques) => {
|
||||
if (ques.data) {
|
||||
ques.data.data.survey.introduction = `<p>为优化活动服务品质，烦请完成问卷，感谢配合！您的反馈至关重要！</p>`;
|
||||
store.questionsInfo.value = ques.data.data;
|
||||
saveQuestions({
|
||||
sn: res.data.data.sn,
|
||||
introduction: ques.data.data.survey.introduction,
|
||||
title: ques.data.data.survey.title
|
||||
}).then(() => {
|
||||
router.push({
|
||||
path: '/create',
|
||||
query: {
|
||||
sn: res.data.data.sn
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 添加获取问卷列表的方法
|
||||
const getList = () => {
|
||||
getQuestionList().then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
if (res.data.data) {
|
||||
res.data.data.forEach((item) => {
|
||||
// if (item.parentCode && item.parentCode === 1) {
|
||||
surveys.value.push(item);
|
||||
// }
|
||||
});
|
||||
|
||||
// surveys.value.push({});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 在组件挂载时调用
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create_survey">
|
||||
<div class="create_survey_title" style="color: #000; text-align: left">新建问卷</div>
|
||||
<div class="home-pen">
|
||||
<img :src="homePen" alt="" />
|
||||
</div>
|
||||
<div class="surveys">
|
||||
<!-- <div @click="$router.push({ name: 'intelligentGeneration' })">AI 智能创建</div> -->
|
||||
<div
|
||||
v-for="survey in surveys"
|
||||
:key="survey.title"
|
||||
class="survey"
|
||||
@click="createdQuestion(survey)"
|
||||
>
|
||||
<img :src="survey.h5Image" alt="" width="40" />
|
||||
<span>{{ survey.h5Title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-pen {
|
||||
//height: 200px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
|
||||
//width: 100%;
|
||||
background: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
//height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.create_survey {
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
border-radius: 16px;
|
||||
background-image: url('@/assets/img/home/item-back.png');
|
||||
background-position: center; /* 确保图片居中显示 */
|
||||
background-size: cover; /* 或者使用具体的尺寸，如 100% 100% */
|
||||
background-repeat: no-repeat;
|
||||
|
||||
//padding: 15px;
|
||||
|
||||
color: #000;
|
||||
|
||||
.create_survey_title {
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
font-family: PingFangSC, 'PingFang SC';
|
||||
}
|
||||
|
||||
& .warp {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
//全部问卷容器
|
||||
.surveys {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
// 单个问卷
|
||||
.survey {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
font-size: 0.34rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user