Merge branch 'feature/feature-20250430-h5' of https://e.coding.yili.com/yldc/ylst/ylst-survey-h5 into feature/feature-20250430-h5
This commit is contained in:
Huangzhe
@@ -106,6 +106,26 @@ function tooptipFormatter(data: { row: any; column: any; cellValue: any }): VNod
|
|||||||
content: data
|
content: data
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// render
|
||||||
|
const RenderSlot = {
|
||||||
|
functional: true,
|
||||||
|
props: {
|
||||||
|
row: Object,
|
||||||
|
render: Function,
|
||||||
|
index: Number,
|
||||||
|
column: {
|
||||||
|
type: Object,
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
return () => {
|
||||||
|
const { row, index, column } = props;
|
||||||
|
return props.render(h, { row, index, column });
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -136,10 +156,19 @@ function tooptipFormatter(data: { row: any; column: any; cellValue: any }): VNod
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<slot name="column-default" :scope="scope">
|
<slot name="column-default" :scope="scope">
|
||||||
<div
|
<div
|
||||||
|
v-if="!item.render"
|
||||||
class="table-view-html"
|
class="table-view-html"
|
||||||
@click.stop="handleImageClick"
|
@click.stop="handleImageClick"
|
||||||
v-html="scope.row[item.prop]"
|
v-html="scope.row[item.prop]"
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
|
<RenderSlot
|
||||||
|
v-else
|
||||||
|
:row="scope.row"
|
||||||
|
:render="item.render"
|
||||||
|
:index="scope.$index"
|
||||||
|
:column="item"
|
||||||
|
></RenderSlot>
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
|
|||||||
@@ -33,8 +33,6 @@ function useSetPieChart(
|
|||||||
|
|
||||||
// 如果 data 变动，重新生成图表w
|
// 如果 data 变动，重新生成图表w
|
||||||
watch(series, (value) => {
|
watch(series, (value) => {
|
||||||
console.log(chartInstance);
|
|
||||||
|
|
||||||
const currentOptions = chartInstance.getOption();
|
const currentOptions = chartInstance.getOption();
|
||||||
|
|
||||||
// 合并新的 series 数据到现有配置中
|
// 合并新的 series 数据到现有配置中
|
||||||
|
|||||||
@@ -1,101 +1,101 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { fetchSurveys } from '@/hooks/request/useSurvey';
|
import { fetchSurveys } from '@/hooks/request/useSurvey';
|
||||||
import CreateSurvey from './components/CreateSurvey/Index.vue';
|
import CreateSurvey from './components/CreateSurvey/Index.vue';
|
||||||
import NewSurvey from './components/NewSurvey/index.vue';
|
import NewSurvey from './components/NewSurvey/index.vue';
|
||||||
import { onMounted, ref } from 'vue';
|
import { onMounted, ref } from 'vue';
|
||||||
import utils from '@/assets/js/common';
|
import utils from '@/assets/js/common';
|
||||||
import { getUserInfo } from '@/api/common/index.js';
|
import { getUserInfo } from '@/api/common/index.js';
|
||||||
import { showFailToast } from 'vant';
|
import { showFailToast } from 'vant';
|
||||||
import appBridge from '@/assets/js/appBridge';
|
import appBridge from '@/assets/js/appBridge';
|
||||||
import ImageSlider from './components/ImageSlider/Index.vue';
|
import ImageSlider from './components/ImageSlider/Index.vue';
|
||||||
import SearchBar from '@/components/Search/Index.vue';
|
import SearchBar from '@/components/Search/Index.vue';
|
||||||
import Navigation from '@/components/Navigation/Index.vue';
|
import Navigation from '@/components/Navigation/Index.vue';
|
||||||
import HomeRecommend from './components/HomeRecommend/Index.vue';
|
import HomeRecommend from './components/HomeRecommend/Index.vue';
|
||||||
import MineTask from '@/views/Home/components/MineTask/Index.vue';
|
import MineTask from '@/views/Home/components/MineTask/Index.vue';
|
||||||
import router from '@/router';
|
import router from '@/router';
|
||||||
|
|
||||||
const contentShow = ref(false);
|
const contentShow = ref(false);
|
||||||
// 获取我的问卷数据
|
// 获取我的问卷数据
|
||||||
const { surveys } = fetchSurveys();
|
const { surveys } = fetchSurveys();
|
||||||
const keyword = ref('');
|
const keyword = ref('');
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
if (appBridge.isInReactNative()) {
|
if (appBridge.isInReactNative()) {
|
||||||
const appToken = utils.getSessionStorage('xToken');
|
const appToken = utils.getSessionStorage('xToken');
|
||||||
getUserInfo(appToken)
|
getUserInfo(appToken)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (res.data) {
|
if (res.data) {
|
||||||
contentShow.value = true;
|
contentShow.value = true;
|
||||||
const token = res.data.data.token;
|
const token = res.data.data.token;
|
||||||
localStorage.setItem('plantToken', token);
|
localStorage.setItem('plantToken', token);
|
||||||
utils.setSessionStorage('userInfo', res.data.data);
|
utils.setSessionStorage('userInfo', res.data.data);
|
||||||
} else {
|
} else {
|
||||||
contentShow.value = false;
|
contentShow.value = false;
|
||||||
showFailToast(
|
showFailToast(
|
||||||
error.response.data?.message || error.data?.message || error.message || '服务器错误'
|
error.response.data?.message || error.data?.message || error.message || '服务器错误'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
contentShow.value = false;
|
contentShow.value = false;
|
||||||
showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
|
showFailToast(error?.response?.data?.message || error?.message || '服务器错误');
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
|
utils.setSessionStorage('xToken', 'f74ba36d7fc3468480648dedba5672ff');
|
||||||
contentShow.value = true;
|
contentShow.value = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function handleSearchClick() {
|
function handleSearchClick() {
|
||||||
router.push({ name: 'search' });
|
router.push({ name: 'search' });
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="contentShow" class="container-home">
|
<div v-if="contentShow" class="container-home">
|
||||||
<div class="container-body">
|
<div class="container-body">
|
||||||
<!-- 搜索栏 -->
|
<!-- 搜索栏 -->
|
||||||
<section class="search">
|
<section class="search">
|
||||||
<search-bar placeholder="请输入关键词" :value="keyword" @click="handleSearchClick" />
|
<search-bar placeholder="请输入关键词" :value="keyword" @click="handleSearchClick" />
|
||||||
</section>
|
</section>
|
||||||
<!-- 首页轮播图 -->
|
<!-- 首页轮播图 -->
|
||||||
<section class="slider">
|
<section class="slider">
|
||||||
<image-slider />
|
<image-slider />
|
||||||
</section>
|
</section>
|
||||||
<create-survey :createdNewPage="false" />
|
<create-survey :createdNewPage="false" />
|
||||||
<!-- 最新问卷 -->
|
<!-- 最新问卷 -->
|
||||||
<!--<last-survey/>-->
|
<!--<last-survey/>-->
|
||||||
<!-- 模板市场 -->
|
<!-- 模板市场 -->
|
||||||
<!-- <Market/> -->
|
<!-- <Market/> -->
|
||||||
<!--底部新建问卷-->
|
<!--底部新建问卷-->
|
||||||
<NewSurvey />
|
<NewSurvey />
|
||||||
|
|
||||||
<!-- 我的问卷 部分， 当问卷不存在时，显示推荐内容 -->
|
<!-- 我的问卷 部分， 当问卷不存在时，显示推荐内容 -->
|
||||||
<mine-task v-if="surveys?.length > 0" :surveys="surveys" />
|
<mine-task v-if="surveys?.length > 0" :surveys="surveys" />
|
||||||
<home-recommend v-else class="home_recommend" />
|
<home-recommend v-else class="home_recommend" />
|
||||||
<navigation />
|
<navigation />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@use '@/assets/css/theme';
|
@use '@/assets/css/theme';
|
||||||
|
|
||||||
.container-body {
|
.container-body {
|
||||||
padding: 0 10px 80px;
|
padding: 0 10px 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
margin: 0 -10px 0 -10px;
|
margin: 0 -10px 0 -10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@extend %search-gradient;
|
@extend %search-gradient;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider {
|
.slider {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: theme.$card-radius;
|
border-radius: theme.$card-radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_recommend {
|
.home_recommend {
|
||||||
margin: theme.$gap 0;
|
margin: theme.$gap 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,100 +1,110 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { recommend } from '@/hooks/request/recommend';
|
import { recommend } from '@/hooks/request/recommend';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import YlTable from '@/components/YlTable/Index.vue';
|
import YlTable from '@/components/YlTable/Index.vue';
|
||||||
import CommonLayout from '@/components/Layout/CommonLayout.vue';
|
import CommonLayout from '@/components/Layout/CommonLayout.vue';
|
||||||
|
|
||||||
// 外部获取的数据
|
// 外部获取的数据
|
||||||
const { data } = recommend({});
|
const { data } = recommend({});
|
||||||
|
const props = ref<TablePropsType[]>([
|
||||||
const props = ref<TablePropsType[]>([
|
{
|
||||||
{
|
prop: 'rank',
|
||||||
prop: 'rank',
|
label: '排名',
|
||||||
label: '排名',
|
width: 58
|
||||||
width: 58
|
},
|
||||||
},
|
{
|
||||||
{
|
prop: 'trend_name',
|
||||||
prop: 'trend_name',
|
label: '趋势名称',
|
||||||
label: '趋势名称',
|
width: 100
|
||||||
width: 100
|
},
|
||||||
},
|
{
|
||||||
{
|
prop: 'growth_ring_ratio',
|
||||||
prop: 'growth_ring_ratio',
|
label: '声量增长环比',
|
||||||
label: '声量增长环比',
|
width: 120
|
||||||
width: 120
|
},
|
||||||
},
|
{
|
||||||
{
|
prop: 'sales_growth_ring_ratio',
|
||||||
prop: 'sales_growth_ring_ratio',
|
label: '销量增长环比',
|
||||||
label: '销量增长环比',
|
width: 120,
|
||||||
width: 120
|
render: (h, p) => {
|
||||||
}
|
return h(
|
||||||
]);
|
'div',
|
||||||
</script>
|
{
|
||||||
|
style: {
|
||||||
<template>
|
color: p.row.sales_growth_ring_ratio < 0 ? 'red' : 'green'
|
||||||
<van-cell class="home_recommend">
|
}
|
||||||
<template #extra>
|
},
|
||||||
<div style="width: 90vw">
|
p.row.sales_growth_ring_ratio
|
||||||
<common-layout title="123">
|
);
|
||||||
<template #title>
|
}
|
||||||
<h3 class="recommend-layout-title">内容推荐</h3>
|
}
|
||||||
</template>
|
]);
|
||||||
|
</script>
|
||||||
<span class="recommend-title">{{ data?.title }}</span>
|
|
||||||
<yl-table
|
<template>
|
||||||
style="margin-top: 10px"
|
<van-cell class="home_recommend">
|
||||||
:header-style="{ background: '#E8F9F4' }"
|
<template #extra>
|
||||||
:data="data?.surveyTrendDataVOS"
|
<div style="width: 90vw">
|
||||||
:props="props"
|
<common-layout title="123">
|
||||||
/>
|
<template #title>
|
||||||
<!-- 剧中展示提示语 -->
|
<h3 class="recommend-layout-title">内容推荐</h3>
|
||||||
<div class="more">
|
</template>
|
||||||
<span>- 最新数据及更多创新趋势请到YIP探索 - </span>
|
|
||||||
</div>
|
<span class="recommend-title">{{ data?.title }}</span>
|
||||||
</common-layout>
|
<yl-table
|
||||||
</div>
|
style="margin-top: 10px"
|
||||||
</template>
|
:header-style="{ background: '#E8F9F4' }"
|
||||||
</van-cell>
|
:data="data?.surveyTrendDataVOS"
|
||||||
</template>
|
:props="props"
|
||||||
|
/>
|
||||||
<style lang="scss" scoped>
|
<!-- 剧中展示提示语 -->
|
||||||
@use '@/assets/css/theme' as *;
|
<div class="more">
|
||||||
|
<span>- 最新数据及更多创新趋势请到YIP探索 - </span>
|
||||||
.home_recommend {
|
</div>
|
||||||
border-radius: $card-radius;
|
</common-layout>
|
||||||
justify-content: center;
|
</div>
|
||||||
align-items: center;
|
</template>
|
||||||
|
</van-cell>
|
||||||
.recommend-layout-title {
|
</template>
|
||||||
font-family:
|
|
||||||
PingFangSC,
|
<style lang="scss" scoped>
|
||||||
PingFang SC;
|
@use '@/assets/css/theme' as *;
|
||||||
font-weight: 800;
|
|
||||||
font-size: 15px;
|
.home_recommend {
|
||||||
color: #000000;
|
border-radius: $card-radius;
|
||||||
line-height: 20px;
|
justify-content: center;
|
||||||
text-align: left;
|
align-items: center;
|
||||||
font-style: normal;
|
|
||||||
}
|
.recommend-layout-title {
|
||||||
|
font-family:
|
||||||
.recommend-title {
|
PingFangSC,
|
||||||
color: #000000;
|
PingFang SC;
|
||||||
font-family:
|
font-weight: 800;
|
||||||
PingFangSC,
|
font-size: 15px;
|
||||||
PingFang SC;
|
color: #000000;
|
||||||
font-size: 14px;
|
line-height: 20px;
|
||||||
font-weight: 800;
|
text-align: left;
|
||||||
line-height: 15px;
|
font-style: normal;
|
||||||
text-align: left;
|
}
|
||||||
font-style: normal;
|
|
||||||
}
|
.recommend-title {
|
||||||
|
color: #000000;
|
||||||
.more {
|
font-family:
|
||||||
margin: 5px;
|
PingFangSC,
|
||||||
color: #919191;
|
PingFang SC;
|
||||||
font-weight: 400;
|
font-size: 14px;
|
||||||
font-size: 13px;
|
font-weight: 800;
|
||||||
text-align: center;
|
line-height: 15px;
|
||||||
}
|
text-align: left;
|
||||||
}
|
font-style: normal;
|
||||||
</style>
|
}
|
||||||
|
|
||||||
|
.more {
|
||||||
|
margin: 5px;
|
||||||
|
color: #919191;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user