feat: 添加微信分享功能并优化搜索页面样式

- 新增微信分享API接口和分享功能实现
- 修改请求头中phone字段为userPhone
- 优化搜索页面UI和交互逻辑
- 调整文章列表样式和分享按钮功能
- 添加搜索页面导航栏和返回功能

src/api/index.ts

@@ -67,3 +67,8 @@ export const doWxAuth = (data: any) => {
   return Request.post("/common/auth", data);
 };
 
+// 微信分享
+export const doShare = (data: any) => {
+  return Request.post("/user/share", data);
+};
+

src/components/articleList/index.vue

@@ -10,13 +10,10 @@
           }}</view>
         </view>
         <view class="listItemHeaderContent">
-          <view :class="['listItemTitle', !item.summary && 'noAbstract']" v-if="item.newType !== 'search'">
+          <view :class="['listItemTitle', !item.summary && 'noAbstract']" v-html="item.title">
-            {{ item.title }}
-          </view>
-          <view class="listItemTitleContent" v-else>
-            <text class="listItemTitleContentText" v-html="item.MarkInRedTitle || item.title"></text>
           </view>
 
+
           <view class="listItemAbstract" v-if="item.newType !== 'search'">{{
             item.summary
           }}</view>
@@ -24,20 +21,33 @@
         </view>
       </view>
 
-      <view class="tabContainer" v-if="!item.picture">
+      <!-- <view class="tabContainer">
-        <view class="tag" v-if="item.newType !== 'search'">{{ item.tag }}</view>
+        <view class="tag">{{ item.tag }}</view>
-      </view>
+      </view> -->
 
       <view class="listItemContent">
-        <view class="listItemTime">{{ item.time }}</view>
+        <view style="display: flex;">
-        <view class="listItemData">
+          <view class="tag">{{ item.tag }}</view>
-          <view class="dataItem">{{ item.readNums || 0 }}阅读</view>
+          <view class="listItemTime" style="margin-left: 10rpx;">{{ item.time }}</view>
-          <view class="dataItem">{{ item.likeNums || 0 }}点赞</view>
+        </view>
-          <!-- <view class="dataItem">{{ 0 >= 1000 ? "999+" : 0 || "122" }}评论</view> -->
+
+        <view class="r_option">
+          <image class="option_icon"
+            src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/eye_icon%402x.png"></image>
+          <text class="option_text">{{ item.readNums }}</text>
+
+          <image class="option_icon"
+            src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/like_icon%402x.png"></image>
+          <text class="option_text">{{ item.likeNums }}</text>
+
+          <image class="option_icon"
+            src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png"></image>
+          <text class="option_text">{{ item.shareNums }}</text>
+
         </view>
       </view>
 
-      <view class="listItemFooter" v-if="item.needpay"></view>
+      <!-- <view class="listItemFooter" v-if="item.needpay"></view> -->
     </view>
   </view>
 
@@ -139,7 +149,13 @@ const handleClick = (item: any) => {
           white-space: normal;
           // font-weight: bold;
           word-break: break-all;
-          font-family: "SourceHanSansCN-Medium";
+          font-family: PingFangSC, PingFang SC;
+          font-weight: bold;
+          font-size: 32rpx;
+          color: #192236;
+          line-height: 45rpx;
+          text-align: left;
+          font-style: normal;
 
           // text-align: left;
           &.noAbstract {
@@ -190,6 +206,14 @@ const handleClick = (item: any) => {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: normal;
+
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 24rpx;
+          color: #2D3849;
+          line-height: 33rpx;
+          text-align: left;
+          font-style: normal;
         }
       }
     }
@@ -247,4 +271,27 @@ const handleClick = (item: any) => {
 .listItemTitleContentText {
   font-family: "SourceHanSansCN-Medium";
 }
+
+
+.r_option {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10rpx;
+
+  .option_icon {
+    width: 24rpx;
+    height: 24rpx;
+  }
+
+  .option_text {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 24rpx;
+    color: #192236;
+    line-height: 33rpx;
+    text-align: justify;
+    font-style: normal;
+  }
+}
 </style>

src/components/comment/indexMini.vue

@@ -16,11 +16,11 @@
         <!-- <text class="num">{{ props.data.favNums }}</text> -->
         <text class="num">收藏</text>
       </view>
-      <view class="count" @click="handleClickStar">
+      <button class="count" style="background-color: transparent;" open-type="share">
         <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_icon%402x.png" class="icon" />
         <!-- <text class="num">{{ props.data.favNums }}</text> -->
         <text class="num">分享</text>
-      </view>
+      </button>
     </view>
   </view>
 </template>
@@ -123,4 +123,9 @@ const handleSubmit = () => {
     }
   }
 }
+
+
+button::after {
+  border: 0;
+}
 </style>

src/pages/detail/indexNewsInfo.vue

@@ -49,14 +49,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { onLoad, onShareAppMessage, onShow } from "@dcloudio/uni-app";
 import { onReachBottom } from "@dcloudio/uni-app";
 import {
   fetchArticleDetail,
   fetchArticleLike,
   fetchArticleFavorate,
 } from "@/api/detail";
-import { getNewsList } from "@/api";
+import { getNewsList, doShare } from "@/api";
 import Article from "@/components/article/indexNewsInfo.vue";
 import Column from "@/components/column/index.vue";
 import Comment from "@/components/comment/indexMini.vue";
@@ -87,6 +87,7 @@ onLoad(async (option: any) => {
   newType.value = option.type || 14;
   const res = await fetchArticleDetail({
     id: option.id,
+    // id: 763,
   });
 
   if (res.code === 200) {
@@ -204,6 +205,21 @@ const jumpDetail = (item: any) => {
     url: `/pages/detail/index?id=${item.id}`,
   });
 };
+
+onShareAppMessage(async (res) => {
+  console.log("🚀 ~ res:", res)
+  console.log("🚀 ~  data.value:", data.value)
+
+  let { code } = await doShare({
+    id: data.value.id
+  })
+  return {
+    title: data.value.title,//标题
+    path: '/page/detail/indexNewsInfo?id=' + data.value.id,//可以指定动态路径
+    imageUrl: 'https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/share_pic_1%402x.png',//分享图
+  }
+
+})
 </script>
 
 <style lang="scss" scoped>

src/pages/minihome/index.vue

@@ -29,7 +29,8 @@
           <image class="logo_text" src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/logo_text_icon.png">
           </image>
 
-          <view class="sreach">
+          <view class="sreach" @click="goSreach">
+
             <view class="sreach_icon">
               <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/icon_search_line.png"></image>
             </view>
@@ -102,6 +103,13 @@ function tabChange(index) {
   }
 }
 
+function goSreach() {
+  uni.navigateTo({
+    url: '/pages/sreachReq/index',
+  })
+}
+
+
 const isScroll = ref(false)
 onPageScroll((val) => {
   if (val.scrollTop > 150) {

src/pages/sreachReq/index.vue

@@ -1,64 +1,54 @@
 <template>
   <view class="sreachcss">
-    <!-- 搜索 start -->
+    <view :style="{ height: getNavHeight() + 'px', position: 'sticky', top: 0, background: '#fff', zIndex: '9999' }">
-    <view class="sreach">
-      <view
-        style="height: 100%; display: flex; align-items: center"
-        @click="goBack"
-      >
-        <u-icon name="arrow-left" color="#333" size="20" bold></u-icon>
     </view>
 
-      <view style="width: 60vw; margin-left: 50rpx">
+    <!-- 导航栏 start -->
-        <u-input
+    <view class="custom-bav-bar"
-          v-model="keyWord"
+      :style="{ position: 'sticky', top: getNavHeight() + 'px', left: 0, background: '#fff', zIndex: '9999' }">
-          @change="handleChange"
+
-          prefixIcon="search"
+      <view class="left">
-          style="flex: 1"
+        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
-          placeholder="搜索快讯"
+          @click="handleBack" />
-          class="sreach_input"
-          :border="false"
-        />
       </view>
+      <view class="center">
+        <image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/detail_logo.png" class="logo_icon" />
+      </view>
+    </view>
+
+    <!-- 搜索 start -->
+    <view class="sreach">
+      <view style="width: 70vw; margin-left: 50rpx">
+        <u-input v-model="keyWord" @change="handleChange" prefixIcon="search" style="flex: 1" placeholder="搜索快讯"
+          class="sreach_input" :border="false" />
+      </view>
+      <text class="serach_btn" @click="getData()">搜索</text>
     </view>
     <!-- 搜索 end -->
 
-    <List
+    <List :data="screenList" @onClick="handleSwiperJump" v-if="screenList.length !== 0" />
-      :data="screenList"
-      @onClick="handleSwiperJump"
-      v-if="screenList.length !== 0"
-    />
     <!-- 列表 end -->
     <!-- 加载更多的按钮 -->
-    <view
+    <!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> -->
-      class="onLoad-btn"
-      @click="onload"
-      v-if="finish === false && inputValue"
-      >加载更多</view
-    >
 
-    <u-empty
+    <view style="margin-top: 20vh">
-      v-if="screenList.length === 0"
+      <u-empty v-if="screenList.length === 0" text="无搜索结果" width="157" height="50"
-      text="搜索结果为空"
+        icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"></u-empty>
-      mode="search"
-      style="margin-top: 20vh"
-    ></u-empty>
 
-    <view v-if="finish && screenList.length > 0" class="noMore">
+    </view>
+
+    <!-- <view v-if="finish && screenList.length > 0" class="noMore">
       <view class="line"></view>
       <view class="text">暂无更多结果</view>
       <view class="line"></view>
-    </view>
+    </view> -->
 
     <!-- 订阅 支付 -->
     <Pay :show="payShow" @onClick="handleClose" @handleSub="handleSub" />
 
     <!-- 登录弹框 -->
-    <LoginPopup
+    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose"
-      :show="LoginShow"
+      @handlePopupSuccessCallback="handlePopupSuccessCallback" />
-      @handlePopupClose="handlePopupClose"
-      @handlePopupSuccessCallback="handlePopupSuccessCallback"
-    />
   </view>
 </template>
 
@@ -71,6 +61,8 @@ import { searchNews, unlockColumn } from "@/api";
 import { extractText, formatTimestamp } from "@/utils/util";
 import LoginPopup from "@/components/loginPopup/index.vue";
 import Pay from "@/components/pay/index.vue";
+import { getNavHeight } from "@/utils/util";
+
 
 const articleList = ref([]);
 const finish = ref(false);
@@ -82,6 +74,13 @@ function goBack() {
   uni.navigateBack();
 }
 
+// 导航栏路由返回
+const handleBack = () => {
+  uni.navigateBack({
+    delta: 1,
+  });
+};
+
 // login 弹框是否显示
 const LoginShow = ref(false);
 
@@ -99,6 +98,8 @@ const handleSub = async () => {
       if (item.type === itemType) {
         item.needpay = false;
       }
+
+
       return item;
     });
     articleList.value = articleResult;
@@ -145,7 +146,7 @@ const handleSwiperJump = (item: any) => {
     handleShowPay(item.type);
   } else {
     uni.navigateTo({
-      url: `/pages/detail/index?id=${item.id}&type=${item.type}`,
+      url: `/pages/detail/indexNewsInfo?id=${item.id}&type=${item.type}`,
     });
   }
 };
@@ -192,6 +193,11 @@ const getData = async () => {
           new RegExp(inputValue.value, "gi"),
           `<text style="color: #E7303F">$&</text>`
         );
+
+        item.title = item.title.replace(keyWord.value, '<span style="color: red;">' + keyWord.value + '</span>');
+        console.log("🚀 ~ getData ~    item.title :", item.title)
+
+
         item.MarkInRedContent =
           item.contentText &&
           extractText(item.contentText, inputValue.value).replace(
@@ -244,6 +250,11 @@ onShow(() => {
     height: 70%;
     border-radius: 20rpx;
     padding: 0 20rpx;
+    border-radius: 100rpx;
+  }
+
+  :deep(.u-input) {
+    background-color: rgba(118, 118, 128, 0.12);
   }
 
   .tabsListContainer {
@@ -260,11 +271,13 @@ onShow(() => {
     align-items: center;
     box-sizing: border-box;
     padding: 21rpx 0;
+
     .line {
       width: 69rpx;
       height: 3rpx;
       background-color: #b9b9b9;
     }
+
     .text {
       padding: 0 10rpx;
     }
@@ -282,4 +295,52 @@ onShow(() => {
     color: #828b92;
   }
 }
+
+
+.custom-bav-bar {
+  width: 100%;
+  height: 88rpx;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  .back_icon {
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  .logo_icon {
+    width: 168rpx;
+    height: 40rpx;
+    margin-right: 6rpx;
+  }
+
+  .left {
+    position: absolute;
+    top: 24rpx;
+    left: 40rpx;
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // font-size: 28rpx;
+    font-size: var(--h2-font-size);
+    color: #333;
+  }
+}
+
+.serach_btn {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #D13E3C;
+  line-height: 45rpx;
+  text-align: right;
+  font-style: normal;
+  flex: 1;
+}
 </style>

src/utils/index.ts

@@ -51,7 +51,7 @@ Request.setConfig((config: any) => {
   if (uni.getStorageSync("token")) {
     // config.header["Authorization"] = "Bearer " + uni.getStorageSync("token");
     config.header!["auth-token"] = uni.getStorageSync("token");
-    config.header!["phone"] = uni.getStorageSync("phone");
+    config.header!["phone"] = uni.getStorageSync("userPhone");
   }
 
   return config;