feat: 优化登录弹窗组件，添加拓展阅读功能和雷达图表组件

.env.development

@@ -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

src/api/detail.ts

@@ -40,3 +40,8 @@ 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`);
+};

src/components/article/indexNewsInfo.vue

@@ -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
-          <view class="title"
+          class="news"
-            >国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
+          v-for="item in extendData"
-          >
+          :ke="item.id"
-        </view>
+          @click="goNewsDetail(item)"
-
+        >
-        <view class="news">
+          <view class="title">{{ item.title }}</view>
-          <view class="title"
-            >国内外产业端迎密集催化，人形机器人产业链有望加速发展。</view
-          >
-        </view>
-        <view class="news">
-          <view class="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"
+      @onSuccess="handleLoginSuccess"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
+      @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 userStore = useUserStore();
-const handlePopupClose = () => {
+
-  LoginShow.value = false;
+// 登录弹框
-  isLogin.value = Session.get("token");
+const LoginShow = ref(true);
+
+// 显示弹框
+const handleShowLogin = () => {
+  LoginShow.value = true;
 };
-// 登录成功回调
+
-const handlePopupSuccessCallback = () => {
+// 关闭弹框
-  isLogin.value = Session.get("token");
+const handleLoginCancel = () => {
-  console.log("🚀 ~ handlePopupSuccessCallback ~  isLogin.value:", isLogin.value);
+  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>

src/components/charts/Radar.vue

@@ -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>

src/components/loginPopup/index.vue

@@ -1,32 +1,57 @@
 <template>
-  <!-- <view class="loginPopup"> -->
+  <u-popup
-  <u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
+    class="loginPopup"
-    @close="handlePopupClose">
+    :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-form-item
-            <u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
+            style="padding: 0"
-              border="none"></u--input>
+            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-form-item
-            <u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
+            class="loginFormItem"
-              border="none"></u--input>
+            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([
+import { useUserStore } from "@/stores/user";
-  "handlePopupClose",
-  "handlePopupSuccessCallback",
-  "handlePopupErrorCallback",
-]);
 
+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 = () => {
+const callbackSuccess = () => {
-  emit("handlePopupSuccessCallback");
+  emit("onSuccess");
 };
 // 登录失败之后的回调
-const handlePopupErrorCallback = () => {
+const callBackError = () => {
-  emit("handlePopupErrorCallback");
+  emit("onError");
 };
-const { aplus_queue } = window;
 
 // 登录
 const Login = async () => {
@@ -118,50 +142,17 @@ const Login = async () => {
       icon: "none",
     });
   }
-
+  const result = await userStore.onLogin({ ...state.loginForm });
-  uni.showLoading({
+  if (result.code === 200) {
-    title: "登录中",
+    callbackSuccess();
-    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();
-
   } else {
-    console.log(msg, "<=== msg");
+    callBackError();
-    handlePopupErrorCallback();
-    uni.hideLoading();
-    uni.showToast({
-      title: msg,
-      icon: "error",
-    });
   }
-  emit("handlePopupClose");
 };
 
 // 关闭弹框
 const handlePopupClose = () => {
-  emit("handlePopupClose");
+  emit("onCancel");
 };
 </script>
 

src/components/loginPopup/indexV1.vue

@@ -1,54 +1,27 @@
 <template>
   <!-- <view class="loginPopup"> -->
-  <u-popup
+  <u-popup class="loginPopup" :show="props.show" closeable :mode="props.mode" round="12" :closeOnClickOverlay="false"
-    class="loginPopup"
+    @close="handlePopupClose">
-    :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
+          <u-form-item style="padding: 0" class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
-            style="padding: 0"
+            <u--input class="loginFormInput" placeholder="请输入您的手机号" v-model="state.loginForm.phone"
-            class="loginFormItem"
+              border="none"></u--input>
-            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
+          <u-form-item class="loginFormItem" prop="userInfo.name" borderBottom ref="item1">
-            class="loginFormItem"
+            <u--input class="loginFormInput" placeholder="请输入短信验证码" v-model="state.loginForm.code"
-            prop="userInfo.name"
+              border="none"></u--input>
-            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";
+const emit = defineEmits([
-import { storeToRefs } from "pinia";
+  "handlePopupClose",
-
+  "handlePopupSuccessCallback",
-const userStore = useUserStore();
+  "handlePopupErrorCallback",
-const { userInfos } = storeToRefs(userStore);
+]);
-
-const emit = defineEmits(["onSuccess", "onError", "onCancel"]);
 
 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(
+  uni.showLoading({
-    {
+    title: "登录中",
-      ...state.loginForm,
+    mask: true,
-    },
+  });
-    (result: any) => {
-      if (result.code === 200) {
-        emit("onSuccess");
-      } else {
-        emit("onError");
-      }
-    },
-  );
 
-  // console.log(code, "<=== code");
+  const { code, data, msg } = await login({
-  // if (code === 200) {
+    phone: state.loginForm.phone,
-  //   aplus_queue.push({
+    smsCode: state.loginForm.code,
-  //     action: 'aplus.record',
+  });
-  //     arguments: ['login', 'CLK', {
+  console.log(code, "<=== code");
-  //       phone: data.phone,
+  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 {
+    uni.hideLoading();
-  //   console.log(msg, "<=== msg");
+    Session.set("token", data.token);
-  //   handlePopupErrorCallback();
+    Session.set("userPhone", data.phone);
-  //   uni.hideLoading();
+    uni.showToast({
-  //   uni.showToast({
+      title: "登录成功",
-  //     title: msg,
+      icon: "success",
-  //     icon: "error",
+    });
-  //   });
+    handlePopupSuccessCallback();
-  // }
+
-  // emit("handlePopupClose");
+  } else {
+    console.log(msg, "<=== msg");
+    handlePopupErrorCallback();
+    uni.hideLoading();
+    uni.showToast({
+      title: msg,
+      icon: "error",
+    });
+  }
+  emit("handlePopupClose");
 };
 
 // 关闭弹框
 const handlePopupClose = () => {
-  emit("onCancel");
+  emit("handlePopupClose");
 };
 </script>
 

src/pages/detail/indexNewsInfo.vue

@@ -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(() => {
       },
     ],
   });
-});
+  uni.pageScrollTo({
-
+    scrollTop: 0,
-// 跳转详情
-const jumpDetail = (item: any) => {
-  // console.log(item)
-  uni.navigateTo({
-    url: `/pages/detail/index?id=${item.id}`,
   });
-};
+  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>

src/pages/realtimeInfo/index.vue

@@ -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();

src/pages/topNews/index.vue

@@ -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 userStore = useUserStore();// 登录弹框
-const chatRef = ref(null);
+const LoginShow = ref(false);
-let myChart = null;
 
-// 初始化图表
+// 显示弹框
-const initChart = () => {
+const handleShowLogin = () => {
-  myChart = echarts.init(chatRef.value);
+  LoginShow.value = true;
-
-  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);
 };
 
-watch(
+// 关闭弹框
-  () => chatRef.value,
+const handleLoginCancel = () => {
-  () => {
+  LoginShow.value = false;
-    initChart();
+};
-  },
+// 登录成功之后的回调
-);
+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 {

src/stores/user/index.ts

@@ -49,67 +49,49 @@ const storeSetup = () => {
   });
 
   // 登录
-  const onLogin = async (data: any, callback: Function) => {
+  const onLogin = async (data: any): Promise<any> => {
-    uni.showLoading({
+    return new Promise(async (resolve, reject) => {
-      title: "登录中",
+      uni.showLoading({
-      mask: true,
+        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);
       });
-
+      try {
-      console.log("output >>>>> result", result.code);
+        const params = {
-
+          phone: data.phone,
-      uni.hideLoading();
+          smsCode: data.code,
-      if (result.code === 200) {
+        };
-        window.aplus_queue.push({
+        const result = await login(params);
-          action: "aplus.record",
+        uni.hideLoading();
-          arguments: [
+        if (result.code === 200) {
-            "login",
+          window.aplus_queue.push({
-            "CLK",
+            action: "aplus.record",
-            {
+            arguments: [
-              phone: data.phone,
+              "login",
-            },
+              "CLK",
-          ],
+              {
-        });
+                phone: data.phone,
-        setToken(result.data.token);
+              },
-        setUserInfos({ ...result.data });
+            ],
-        uni.showToast({
+          });
-          title: "登录成功",
+          setToken(result.data.token);
-          icon: "success",
+          setUserInfos({ ...result.data });
-        });
+          uni.showToast({
-      } else {
+            title: "登录成功",
-        uni.showToast({
+            icon: "success",
-          title: result.msg,
+          });
-          icon: "error",
+        } 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 };