feat: 优化登录弹窗组件，添加拓展阅读功能和雷达图表组件
This commit is contained in:
parent
4be150d344
commit
b0a3e38657
|
|
@ -2,10 +2,10 @@
|
|||
ENV = development
|
||||
|
||||
# 本地环境接口地址
|
||||
# VITE_API_URL = http://123.60.153.169:8040/apih5
|
||||
VITE_API_URL = http://123.60.153.169:8040/apih5
|
||||
# VITE_API_URL = http://4155gf93ll13.vicp.fun/apih5
|
||||
# VITE_API_URL = http://123.60.79.143:8041/apih5
|
||||
# VITE_API_URL =http://192.168.0.135:8040/apih5
|
||||
VITE_API_URL = https://cankao.cs.com.cn/apih5
|
||||
# VITE_API_URL = https://cankao.cs.com.cn/apih5
|
||||
|
||||
VITE_API_DATAV_URL = https://cankao.cs.com.cn/zzck_datav
|
||||
|
|
@ -39,4 +39,9 @@ export const getListByTagIndustry = (data: any) => {
|
|||
// 概念标签
|
||||
export const getListByTag = (data: any) => {
|
||||
return request.get(`/news/list/tag?name=${data.name}`);
|
||||
};
|
||||
|
||||
// 拓展阅读新闻
|
||||
export const getListByNewsExtend = (news_id: string) => {
|
||||
return request.get(`/news/detail/${news_id}/furtherReadings`);
|
||||
};
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<view class="page-container">
|
||||
<view class="main">
|
||||
<view class="title" :class="{ mohu: !isLogin }">{{ props.data.title }}</view>
|
||||
<view class="title" :class="{ mohu: !userStore.isLogin }">{{ props.data.title }}</view>
|
||||
<view class="author">
|
||||
<view class="name" :class="{ mohu: !isLogin }">
|
||||
<view class="name" :class="{ mohu: !userStore.isLogin }">
|
||||
<text class="text">来源:</text>
|
||||
<text class="text" v-if="intoType === 'etf'">中国证券报</text>
|
||||
<text class="text" v-else>{{
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
<text class="text">编辑:</text>
|
||||
<text class="text">{{ props.data.editor }}</text>
|
||||
</view> -->
|
||||
<view class="time" :class="{ mohu: !isLogin }">{{ props.data.publishTime }}</view>
|
||||
<view class="time" :class="{ mohu: !userStore.isLogin }">{{ props.data.publishTime }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 两个标签 start -->
|
||||
<view class="r_r_tags" :class="{ mohu: !isLogin }">
|
||||
<view class="r_r_tags" :class="{ mohu: !userStore.isLogin }">
|
||||
<view style="display: flex; margin-top: 20rpx; overflow-x: auto; width: 95vw">
|
||||
<view class="r_tags">
|
||||
<view
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
<!-- 两个标签 end -->
|
||||
|
||||
<!-- 摘要 -->
|
||||
<view class="desc" v-if="props.data.summary" :class="{ mohu: !isLogin }">
|
||||
<view class="desc" v-if="props.data.summary" :class="{ mohu: !userStore.isLogin }">
|
||||
<!-- <view class="bill_icon"></view> -->
|
||||
<image :src="zhaiyaoImg" mode="scaleToFill" class="zhaiyao_icon" />
|
||||
<view>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
<image :src="props.data.picture" mode="widthFix" />
|
||||
</view>
|
||||
|
||||
<view style="padding: 35rpx" :class="{ mohu: !isLogin }">
|
||||
<view style="padding: 35rpx" :class="{ mohu: !userStore.isLogin }">
|
||||
<text
|
||||
class="articleDes"
|
||||
:class="props?.data?.needpay && 'needpay'"
|
||||
|
|
@ -134,36 +134,31 @@
|
|||
</view>
|
||||
|
||||
<!-- 拓展阅读 -->
|
||||
<view class="more-news" style="margin-top: 20rpx" v-if="false">
|
||||
<view class="more-news" style="margin-top: 20rpx" v-if="extendData.length > 0">
|
||||
<text class="more-news-title">拓展阅读</text>
|
||||
<view class="more-news-list">
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
</view>
|
||||
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
</view>
|
||||
<view class="news">
|
||||
<view class="title"
|
||||
>国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
|
||||
>
|
||||
<view
|
||||
class="news"
|
||||
v-for="item in extendData"
|
||||
:ke="item.id"
|
||||
@click="goNewsDetail(item)"
|
||||
>
|
||||
<view class="title">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-btn">
|
||||
<view class="text">查看更多</view>
|
||||
<view class="text" @click="getMoreExtendNews">查看更多</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<LoginPopup
|
||||
<!-- 登录弹窗 start -->
|
||||
<LoginDialog
|
||||
:show="LoginShow"
|
||||
@handlePopupClose="handlePopupClose"
|
||||
@handlePopupSuccessCallback="handlePopupSuccessCallback"
|
||||
@onSuccess="handleLoginSuccess"
|
||||
@onCancel="handleLoginCancel"
|
||||
@onError="handleLoginError"
|
||||
/>
|
||||
<!-- 登录弹窗 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -177,9 +172,10 @@ import {
|
|||
onShareTimeline,
|
||||
} from "@dcloudio/uni-app";
|
||||
import articleMock from "@/mock/article.js";
|
||||
import LoginPopup from "@/components/loginPopup/index.vue";
|
||||
import LoginDialog from "@/components/loginPopup/index.vue";
|
||||
import { Session } from "@/utils/storage";
|
||||
import zhaiyaoImg from "../../assets/zixun/zhaiyao_icon.png";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const isLogin = ref(Session.get("token"));
|
||||
const props = defineProps({
|
||||
|
|
@ -187,6 +183,10 @@ const props = defineProps({
|
|||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
extendData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const tagList1 = ref([
|
||||
{
|
||||
|
|
@ -199,16 +199,28 @@ const tagList1 = ref([
|
|||
name: "医药生物-医疗服务",
|
||||
},
|
||||
]);
|
||||
const LoginShow = ref(false);
|
||||
// 关闭弹框
|
||||
const handlePopupClose = () => {
|
||||
LoginShow.value = false;
|
||||
isLogin.value = Session.get("token");
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
// 登录弹框
|
||||
const LoginShow = ref(true);
|
||||
|
||||
// 显示弹框
|
||||
const handleShowLogin = () => {
|
||||
LoginShow.value = true;
|
||||
};
|
||||
// 登录成功回调
|
||||
const handlePopupSuccessCallback = () => {
|
||||
isLogin.value = Session.get("token");
|
||||
console.log("🚀 ~ handlePopupSuccessCallback ~ isLogin.value:", isLogin.value);
|
||||
|
||||
// 关闭弹框
|
||||
const handleLoginCancel = () => {
|
||||
LoginShow.value = false;
|
||||
};
|
||||
// 登录成功之后的回调
|
||||
const handleLoginSuccess = () => {
|
||||
LoginShow.value = false;
|
||||
};
|
||||
// 登录失败之后的回调
|
||||
const handleLoginError = () => {
|
||||
console.log("登录失败");
|
||||
};
|
||||
|
||||
const tagList2 = ref([
|
||||
|
|
@ -234,7 +246,7 @@ onLoad((option) => {
|
|||
type.value = option?.type || "list";
|
||||
intoType.value = option?.intoType || null;
|
||||
|
||||
if (!isLogin.value) {
|
||||
if (!userStore.isLogin) {
|
||||
LoginShow.value = true;
|
||||
}
|
||||
});
|
||||
|
|
@ -293,6 +305,18 @@ const handleSub = () => {
|
|||
|
||||
show.value = false;
|
||||
};
|
||||
|
||||
// 拓展阅读跳转新闻详情
|
||||
const goNewsDetail = (item: any) => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/indexNewsInfo?id=${item.id}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 拓展阅读更多
|
||||
const getMoreExtendNews = (item: any) => {
|
||||
console.log("output >>>>> 更多");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<div ref="chatRef" class="chat-box"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const chatRef = ref(null);
|
||||
let myChart = null;
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
myChart = echarts.init(chatRef.value);
|
||||
|
||||
let option = {
|
||||
gird: {
|
||||
show: true,
|
||||
top: 50,
|
||||
left: 50,
|
||||
right: 50,
|
||||
},
|
||||
color: ["#4681FF"],
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
startAngle: 90,
|
||||
indicator: [
|
||||
{ name: "资本市场相关", max: 100 },
|
||||
{ name: "潜在信号", max: 100 },
|
||||
{ name: "产业政策", max: 100 },
|
||||
{ name: "地缘影响", max: 100 },
|
||||
{ name: "风险性", max: 100 },
|
||||
{ name: "话题性", max: 100 },
|
||||
{ name: "历史溯洄", max: 100 },
|
||||
{ name: "行业导向", max: 100 },
|
||||
{ name: "媒体影响力", max: 100 },
|
||||
{ name: "资讯质量", max: 100 },
|
||||
],
|
||||
axisName: {
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(234, 234, 236, 1)",
|
||||
},
|
||||
},
|
||||
splitNumber: 5
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "radar",
|
||||
areaStyle: { color: "rgba(62, 122, 252, 0.20)" },
|
||||
data: [
|
||||
{
|
||||
value: [90, 75, 72, 98, 70, 75, 80, 95, 90, 60],
|
||||
name: "AI追踪海外资讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
//使用配置
|
||||
myChart.setOption(option);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => chatRef.value,
|
||||
() => {
|
||||
if (!chatRef.value) return;
|
||||
initChart();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chat-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,32 +1,57 @@
|
|||
<template>
|
||||
<!-- <view class="loginPopup"> -->
|
||||
<u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
|
||||
@close="handlePopupClose">
|
||||
<u-popup
|
||||
class="loginPopup"
|
||||
:show="props.show"
|
||||
closeable
|
||||
:mode="props.mode"
|
||||
round="12"
|
||||
:closeOnClickOverlay="false"
|
||||
@close="handlePopupClose"
|
||||
>
|
||||
<view class="loginPopupContent">
|
||||
<view class="loginTitle">登录后掌握更多优质财经内容</view>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<view class="loginForm">
|
||||
<u--form :model="state.loginForm" ref="uForm">
|
||||
<u-form-item style="padding: 0" class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
|
||||
border="none"></u--input>
|
||||
<u-form-item
|
||||
style="padding: 0"
|
||||
class="loginFormItem"
|
||||
prop="userInfo.name"
|
||||
borderBottom
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
class="loginFormInput"
|
||||
placeholder="请输入您的手机号"
|
||||
v-model="state.loginForm.phone"
|
||||
border="none"
|
||||
></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
|
||||
border="none"></u--input>
|
||||
<u-form-item
|
||||
class="loginFormItem"
|
||||
prop="userInfo.name"
|
||||
borderBottom
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
class="loginFormInput"
|
||||
placeholder="请输入短信验证码"
|
||||
v-model="state.loginForm.code"
|
||||
border="none"
|
||||
></u--input>
|
||||
<view class="getCode" @click="captcha">{{ codeText }}</view>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-button class="loginFormBtn" text="登录" @click="Login"></u-button>
|
||||
</view>
|
||||
<!-- 用户协议 -->
|
||||
<view class="tips">登录即代表已经阅读并同意
|
||||
<view class="tips"
|
||||
>登录即代表已经阅读并同意
|
||||
<view class="userAgreement">《用户协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- </view> -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -34,23 +59,22 @@ import { reactive, ref } from "vue";
|
|||
import { getCaptcha, login } from "@/api";
|
||||
import { validatePhoneNumber } from "@/utils/util";
|
||||
import { Session } from "@/utils/storage";
|
||||
const emit = defineEmits([
|
||||
"handlePopupClose",
|
||||
"handlePopupSuccessCallback",
|
||||
"handlePopupErrorCallback",
|
||||
]);
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const emit = defineEmits(["onSuccess", "onError", "onCancel"]);
|
||||
const props = defineProps({
|
||||
// 列表内容
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => "bottom",
|
||||
},
|
||||
});
|
||||
const userStore = useUserStore();
|
||||
const codeText = ref("获取验证码");
|
||||
const isDisabled = ref(false);
|
||||
const state = reactive({
|
||||
|
|
@ -60,6 +84,7 @@ const state = reactive({
|
|||
},
|
||||
});
|
||||
|
||||
// 获取验证码
|
||||
const captcha = async () => {
|
||||
if (!validatePhoneNumber(state.loginForm.phone)) {
|
||||
return uni.showToast({
|
||||
|
|
@ -96,14 +121,13 @@ const captcha = async () => {
|
|||
};
|
||||
|
||||
// 登录成功之后的回调
|
||||
const handlePopupSuccessCallback = () => {
|
||||
emit("handlePopupSuccessCallback");
|
||||
const callbackSuccess = () => {
|
||||
emit("onSuccess");
|
||||
};
|
||||
// 登录失败之后的回调
|
||||
const handlePopupErrorCallback = () => {
|
||||
emit("handlePopupErrorCallback");
|
||||
const callBackError = () => {
|
||||
emit("onError");
|
||||
};
|
||||
const { aplus_queue } = window;
|
||||
|
||||
// 登录
|
||||
const Login = async () => {
|
||||
|
|
@ -118,50 +142,17 @@ const Login = async () => {
|
|||
icon: "none",
|
||||
});
|
||||
}
|
||||
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
const { code, data, msg } = await login({
|
||||
phone: state.loginForm.phone,
|
||||
smsCode: state.loginForm.code,
|
||||
});
|
||||
console.log(code, "<=== code");
|
||||
if (code === 200) {
|
||||
aplus_queue.push({
|
||||
action: 'aplus.record',
|
||||
arguments: ['login', 'CLK', {
|
||||
phone: data.phone,
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
uni.hideLoading();
|
||||
Session.set("token", data.token);
|
||||
Session.set("userPhone", data.phone);
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
icon: "success",
|
||||
});
|
||||
handlePopupSuccessCallback();
|
||||
|
||||
const result = await userStore.onLogin({ ...state.loginForm });
|
||||
if (result.code === 200) {
|
||||
callbackSuccess();
|
||||
} else {
|
||||
console.log(msg, "<=== msg");
|
||||
handlePopupErrorCallback();
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: "error",
|
||||
});
|
||||
callBackError();
|
||||
}
|
||||
emit("handlePopupClose");
|
||||
};
|
||||
|
||||
// 关闭弹框
|
||||
const handlePopupClose = () => {
|
||||
emit("handlePopupClose");
|
||||
emit("onCancel");
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,54 +1,27 @@
|
|||
<template>
|
||||
<!-- <view class="loginPopup"> -->
|
||||
<u-popup
|
||||
class="loginPopup"
|
||||
:show="props.show"
|
||||
closeable
|
||||
:mode="props.mode"
|
||||
round="12"
|
||||
:closeOnClickOverlay="false"
|
||||
@close="handlePopupClose"
|
||||
>
|
||||
<u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
|
||||
@close="handlePopupClose">
|
||||
<view class="loginPopupContent">
|
||||
<view class="loginTitle">登录后掌握更多优质财经内容</view>
|
||||
|
||||
<!-- 登录表单 -->
|
||||
<view class="loginForm">
|
||||
<u--form :model="state.loginForm" ref="uForm">
|
||||
<u-form-item
|
||||
style="padding: 0"
|
||||
class="loginFormItem"
|
||||
prop="userInfo.name"
|
||||
borderBottom
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
class="loginFormInput"
|
||||
placeholder="请输入您的手机号"
|
||||
v-model="state.loginForm.phone"
|
||||
border="none"
|
||||
></u--input>
|
||||
<u-form-item style="padding: 0" class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
|
||||
border="none"></u--input>
|
||||
</u-form-item>
|
||||
<u-form-item
|
||||
class="loginFormItem"
|
||||
prop="userInfo.name"
|
||||
borderBottom
|
||||
ref="item1"
|
||||
>
|
||||
<u--input
|
||||
class="loginFormInput"
|
||||
placeholder="请输入短信验证码"
|
||||
v-model="state.loginForm.code"
|
||||
border="none"
|
||||
></u--input>
|
||||
<u-form-item class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
|
||||
<u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
|
||||
border="none"></u--input>
|
||||
<view class="getCode" @click="captcha">{{ codeText }}</view>
|
||||
</u-form-item>
|
||||
</u--form>
|
||||
<u-button class="loginFormBtn" text="登录" @click="Login"></u-button>
|
||||
</view>
|
||||
<!-- 用户协议 -->
|
||||
<view class="tips"
|
||||
>登录即代表已经阅读并同意
|
||||
<view class="tips">登录即代表已经阅读并同意
|
||||
<view class="userAgreement">《用户协议》</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -61,13 +34,11 @@ import { reactive, ref } from "vue";
|
|||
import { getCaptcha, login } from "@/api";
|
||||
import { validatePhoneNumber } from "@/utils/util";
|
||||
import { Session } from "@/utils/storage";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfos } = storeToRefs(userStore);
|
||||
|
||||
const emit = defineEmits(["onSuccess", "onError", "onCancel"]);
|
||||
const emit = defineEmits([
|
||||
"handlePopupClose",
|
||||
"handlePopupSuccessCallback",
|
||||
"handlePopupErrorCallback",
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
// 列表内容
|
||||
|
|
@ -75,7 +46,6 @@ const props = defineProps({
|
|||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
|
||||
mode: {
|
||||
type: String,
|
||||
default: () => "bottom",
|
||||
|
|
@ -90,7 +60,6 @@ const state = reactive({
|
|||
},
|
||||
});
|
||||
|
||||
// 获取验证码
|
||||
const captcha = async () => {
|
||||
if (!validatePhoneNumber(state.loginForm.phone)) {
|
||||
return uni.showToast({
|
||||
|
|
@ -150,52 +119,49 @@ const Login = async () => {
|
|||
});
|
||||
}
|
||||
|
||||
userStore.onLogin(
|
||||
{
|
||||
...state.loginForm,
|
||||
},
|
||||
(result: any) => {
|
||||
if (result.code === 200) {
|
||||
emit("onSuccess");
|
||||
} else {
|
||||
emit("onError");
|
||||
}
|
||||
},
|
||||
);
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
// console.log(code, "<=== code");
|
||||
// if (code === 200) {
|
||||
// aplus_queue.push({
|
||||
// action: 'aplus.record',
|
||||
// arguments: ['login', 'CLK', {
|
||||
// phone: data.phone,
|
||||
// }]
|
||||
// });
|
||||
const { code, data, msg } = await login({
|
||||
phone: state.loginForm.phone,
|
||||
smsCode: state.loginForm.code,
|
||||
});
|
||||
console.log(code, "<=== code");
|
||||
if (code === 200) {
|
||||
aplus_queue.push({
|
||||
action: 'aplus.record',
|
||||
arguments: ['login', 'CLK', {
|
||||
phone: data.phone,
|
||||
}]
|
||||
});
|
||||
|
||||
// uni.hideLoading();
|
||||
// Session.set("token", data.token);
|
||||
// Session.set("userPhone", data.phone);
|
||||
// uni.showToast({
|
||||
// title: "登录成功",
|
||||
// icon: "success",
|
||||
// });
|
||||
// handlePopupSuccessCallback();
|
||||
|
||||
// } else {
|
||||
// console.log(msg, "<=== msg");
|
||||
// handlePopupErrorCallback();
|
||||
// uni.hideLoading();
|
||||
// uni.showToast({
|
||||
// title: msg,
|
||||
// icon: "error",
|
||||
// });
|
||||
// }
|
||||
// emit("handlePopupClose");
|
||||
uni.hideLoading();
|
||||
Session.set("token", data.token);
|
||||
Session.set("userPhone", data.phone);
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
icon: "success",
|
||||
});
|
||||
handlePopupSuccessCallback();
|
||||
|
||||
} else {
|
||||
console.log(msg, "<=== msg");
|
||||
handlePopupErrorCallback();
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
emit("handlePopupClose");
|
||||
};
|
||||
|
||||
// 关闭弹框
|
||||
const handlePopupClose = () => {
|
||||
emit("onCancel");
|
||||
emit("handlePopupClose");
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 文章正文 start -->
|
||||
<Article :data="data" />
|
||||
<Article :data="data" :extendData="extendList" />
|
||||
|
||||
<!-- 分割 -->
|
||||
<view class="line"></view>
|
||||
|
|
@ -24,7 +24,11 @@
|
|||
/> -->
|
||||
|
||||
<!-- 底部栏 评论 / 收藏 -->
|
||||
<Comment :data="data" @handleClickLike="handleClickLike" @handleClickStar="handleClickStar" />
|
||||
<Comment
|
||||
:data="data"
|
||||
@handleClickLike="handleClickLike"
|
||||
@handleClickStar="handleClickStar"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -32,7 +36,7 @@
|
|||
import { onMounted, ref } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { onReachBottom } from "@dcloudio/uni-app";
|
||||
import { fetchArticleDetail, fetchArticleLike, fetchArticleFavorate } from "@/api/detail";
|
||||
import { fetchArticleDetail, fetchArticleLike, fetchArticleFavorate, getListByNewsExtend } from "@/api/detail";
|
||||
import { getNewsList } from "@/api";
|
||||
import Article from "@/components/article/indexNewsInfo.vue";
|
||||
import Column from "@/components/column/index.vue";
|
||||
|
|
@ -51,26 +55,6 @@ onReachBottom(() => {
|
|||
console.log("🚀 ~ onReachBottom ~ onReachBottom:");
|
||||
});
|
||||
|
||||
onLoad(async (option: any) => {
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
});
|
||||
newType.value = option.type || 14;
|
||||
const res = await fetchArticleDetail({
|
||||
id: option.id,
|
||||
});
|
||||
|
||||
if (res.code === 200) {
|
||||
data.value = res.data;
|
||||
|
||||
res.data.content = res.data.content.replace(/\n{3,}/g, "\n");
|
||||
|
||||
columnName.value = res.data.columnName1;
|
||||
newList(res.data.columnId1);
|
||||
wxShare();
|
||||
}
|
||||
});
|
||||
|
||||
const newList = async (columnId: number) => {
|
||||
const res = await getNewsList({
|
||||
type: 99,
|
||||
|
|
@ -123,7 +107,9 @@ const handleClickLike = async () => {
|
|||
});
|
||||
if (res.code === 200) {
|
||||
data.value.isLike = data.value.isLike ? 0 : 1;
|
||||
data.value.likeNums = data.value.isLike ? data.value.likeNums + 1 : data.value.likeNums - 1;
|
||||
data.value.likeNums = data.value.isLike
|
||||
? data.value.likeNums + 1
|
||||
: data.value.likeNums - 1;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -135,7 +121,9 @@ const handleClickStar = async () => {
|
|||
});
|
||||
if (res.code === 200) {
|
||||
data.value.isFav = data.value.isFav ? 0 : 1;
|
||||
data.value.favNums = data.value.isFav ? data.value.favNums + 1 : data.value.favNums - 1;
|
||||
data.value.favNums = data.value.isFav
|
||||
? data.value.favNums + 1
|
||||
: data.value.favNums - 1;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -146,7 +134,7 @@ const wxShare = () => {
|
|||
JSON.stringify({
|
||||
id: data.value.id,
|
||||
type: newType.value,
|
||||
})
|
||||
}),
|
||||
);
|
||||
link += `?path=${path}&query=${query}`;
|
||||
// console.log("🚀 ~ WXconfig ~ link:", link);
|
||||
|
|
@ -195,7 +183,29 @@ const jumpAll = () => {
|
|||
|
||||
const { aplus_queue } = window;
|
||||
|
||||
onMounted(() => {
|
||||
// 跳转详情
|
||||
const jumpDetail = (item: any) => {
|
||||
// console.log(item)
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/index?id=${item.id}`,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 新闻id
|
||||
const news_id = ref('')
|
||||
const extendList = ref([]) // 扩展列表
|
||||
const getExtendList = ()=> {
|
||||
|
||||
getListByNewsExtend(news_id.value).then((res: any) => {
|
||||
console.log('output >>>>> res',res);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
onLoad(async (option: any) => {
|
||||
news_id.value = option.id
|
||||
aplus_queue.push({
|
||||
action: "aplus.sendPV",
|
||||
arguments: [{ is_auto: false }], // 此处上报的数据暂时在后台没有展示
|
||||
|
|
@ -212,15 +222,27 @@ onMounted(() => {
|
|||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
// 跳转详情
|
||||
const jumpDetail = (item: any) => {
|
||||
// console.log(item)
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/index?id=${item.id}`,
|
||||
uni.pageScrollTo({
|
||||
scrollTop: 0,
|
||||
});
|
||||
};
|
||||
newType.value = option.type || 14;
|
||||
const res = await fetchArticleDetail({
|
||||
id: option.id,
|
||||
});
|
||||
|
||||
// 获取拓展阅读
|
||||
getExtendList();
|
||||
|
||||
if (res.code === 200) {
|
||||
data.value = res.data;
|
||||
|
||||
res.data.content = res.data.content.replace(/\n{3,}/g, "\n");
|
||||
|
||||
columnName.value = res.data.columnName1;
|
||||
newList(res.data.columnId1);
|
||||
wxShare();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ import HotNewsView from "./components/HotNewsView/index.vue";
|
|||
import ConceptNewsView from "./components/ConceptNewsView/index.vue";
|
||||
import TodayNewsView from "./components/TodayNewsView/index.vue";
|
||||
import FooterView from "./components/FooterView/index.vue";
|
||||
import LoginDialog from "./components/LoginDialog/index.vue";
|
||||
import LoginDialog from "@/components/loginPopup/index.vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<!-- 24小时榜 start -->
|
||||
<view class="radar-container">
|
||||
<view class="title">24h AI追踪海外资讯</view>
|
||||
<div ref="chatRef" class="chat-box"></div>
|
||||
<RadarChat />
|
||||
<view
|
||||
style="
|
||||
display: flex;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<!-- 24小时榜 end -->
|
||||
<view v-if="!loading" :class="['page-main ', { blur: !userStore.isLogin }]">
|
||||
<view class="news-list-top">
|
||||
<view class="news-item" v-for="(item, index) in newsListTop" :key="item.news_id">
|
||||
<view class="news-item" v-for="(item, index) in newsListTop" :key="item.news_id" @click="goDetail(item)">
|
||||
<view class="news-no"> {{ index + 1 }} </view>
|
||||
<view class="news-info">
|
||||
<view class="news-title">
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
</view>
|
||||
|
||||
<view class="news-list">
|
||||
<view class="news-item" v-for="(item, index) in newsList" :key="item.news_id">
|
||||
<view class="news-item" v-for="(item, index) in newsList" :key="item.news_id" @click="goDetail(item)">
|
||||
<view class="news-no"> {{ index + 1 + topNum }} </view>
|
||||
<view class="news-title">
|
||||
{{ item.title }}
|
||||
|
|
@ -99,82 +99,46 @@
|
|||
@close="hideCalendar"
|
||||
>
|
||||
</u-calendar>
|
||||
|
||||
<!-- 登录弹窗 start -->
|
||||
<LoginDialog
|
||||
:show="LoginShow"
|
||||
@onSuccess="handleLoginSuccess"
|
||||
@onCancel="handleLoginCancel"
|
||||
@onError="handleLoginError"
|
||||
/>
|
||||
<!-- 登录弹窗 end -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref, watch } from "vue";
|
||||
import { getTopNews } from "@/api/newsInfo";
|
||||
import * as echarts from "echarts";
|
||||
import dayjs from "dayjs";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import RadarChat from "@/components/charts/Radar.vue";
|
||||
import LoginDialog from "@/components/loginPopup/index.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const chatRef = ref(null);
|
||||
let myChart = null;
|
||||
const userStore = useUserStore();// 登录弹框
|
||||
const LoginShow = ref(false);
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
myChart = echarts.init(chatRef.value);
|
||||
|
||||
let option = {
|
||||
gird: {
|
||||
show: true,
|
||||
top: 50,
|
||||
left: 50,
|
||||
right: 50,
|
||||
},
|
||||
color: ["#4681FF"],
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
indicator: [
|
||||
{ name: "资本市场相关", max: 6500 },
|
||||
{ name: "资讯质量", max: 6000 },
|
||||
{ name: "媒体影响力", max: 30000 },
|
||||
{ name: "行业导向", max: 38000 },
|
||||
{ name: "历史溯洄", max: 52000 },
|
||||
{ name: "话题性", max: 30000 },
|
||||
{ name: "风险性", max: 6500 },
|
||||
{ name: "地缘影响", max: 6500 },
|
||||
{ name: "产业政策", max: 6500 },
|
||||
{ name: "潜在信号", max: 6500 },
|
||||
],
|
||||
axisName: {
|
||||
color: "#666666",
|
||||
fontSize: 12,
|
||||
fontWeight: 400,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(234, 234, 236, 1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "1111",
|
||||
type: "radar",
|
||||
areaStyle: { color: "rgba(62, 122, 252, 0.20)" },
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000, 4200, 3000, 4200, 3000],
|
||||
name: "AI追踪海外资讯",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
//使用配置
|
||||
myChart.setOption(option);
|
||||
// 显示弹框
|
||||
const handleShowLogin = () => {
|
||||
LoginShow.value = true;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => chatRef.value,
|
||||
() => {
|
||||
initChart();
|
||||
},
|
||||
);
|
||||
// 关闭弹框
|
||||
const handleLoginCancel = () => {
|
||||
LoginShow.value = false;
|
||||
};
|
||||
// 登录成功之后的回调
|
||||
const handleLoginSuccess = () => {
|
||||
LoginShow.value = false;
|
||||
};
|
||||
// 登录失败之后的回调
|
||||
const handleLoginError = () => {
|
||||
console.log("登录失败");
|
||||
};
|
||||
|
||||
// 获取数据
|
||||
const loading = ref(false);
|
||||
|
|
@ -268,6 +232,17 @@ async function getNewsList() {
|
|||
}
|
||||
}
|
||||
|
||||
// 跳转详情
|
||||
function goDetail(item:any) {
|
||||
if (userStore.isLogin) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/detail/indexNewsInfo?id=${item.news_id}`,
|
||||
});
|
||||
} else {
|
||||
handleShowLogin()
|
||||
}
|
||||
}
|
||||
|
||||
// 导航栏路由返回
|
||||
const handleBack = () => {
|
||||
uni.navigateBack({
|
||||
|
|
@ -276,7 +251,6 @@ const handleBack = () => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
getNewsList();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -357,12 +331,6 @@ onMounted(() => {
|
|||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.page-main {
|
||||
|
|
|
|||
|
|
@ -49,67 +49,49 @@ const storeSetup = () => {
|
|||
});
|
||||
|
||||
// 登录
|
||||
const onLogin = async (data: any, callback: Function) => {
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
try {
|
||||
const params = {
|
||||
phone: data.phone,
|
||||
smsCode: data.code,
|
||||
};
|
||||
|
||||
// const result = await login(params);
|
||||
|
||||
// mock
|
||||
const result = await new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
code: 200,
|
||||
data: {
|
||||
token: "123456",
|
||||
phone: "123456",
|
||||
auth: ["menu1", "menu2", "menu3", 'menu4', 'menu5'],
|
||||
role: ["role1"],
|
||||
},
|
||||
});
|
||||
}, 1000);
|
||||
const onLogin = async (data: any): Promise<any> => {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true,
|
||||
});
|
||||
|
||||
console.log("output >>>>> result", result.code);
|
||||
|
||||
uni.hideLoading();
|
||||
if (result.code === 200) {
|
||||
window.aplus_queue.push({
|
||||
action: "aplus.record",
|
||||
arguments: [
|
||||
"login",
|
||||
"CLK",
|
||||
{
|
||||
phone: data.phone,
|
||||
},
|
||||
],
|
||||
});
|
||||
setToken(result.data.token);
|
||||
setUserInfos({ ...result.data });
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
icon: "success",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.msg,
|
||||
icon: "error",
|
||||
});
|
||||
try {
|
||||
const params = {
|
||||
phone: data.phone,
|
||||
smsCode: data.code,
|
||||
};
|
||||
const result = await login(params);
|
||||
uni.hideLoading();
|
||||
if (result.code === 200) {
|
||||
window.aplus_queue.push({
|
||||
action: "aplus.record",
|
||||
arguments: [
|
||||
"login",
|
||||
"CLK",
|
||||
{
|
||||
phone: data.phone,
|
||||
},
|
||||
],
|
||||
});
|
||||
setToken(result.data.token);
|
||||
setUserInfos({ ...result.data });
|
||||
uni.showToast({
|
||||
title: "登录成功",
|
||||
icon: "success",
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result.msg,
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
resolve(result);
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
console.log(error, "<=== error");
|
||||
reject(error);
|
||||
}
|
||||
|
||||
callback && callback(result);
|
||||
} catch (error) {
|
||||
uni.hideLoading();
|
||||
console.log(error, "<=== error");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return { isLogin, userInfos, getToken, onLogin, getUserInfos };
|
||||
|
|
|
|||
Loading…
Reference in New Issue