fgm
/
cankao-h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

- 新增微信分享API接口和分享功能实现
- 修改请求头中phone字段为userPhone
- 优化搜索页面UI和交互逻辑
- 调整文章列表样式和分享按钮功能
- 添加搜索页面导航栏和返回功能
This commit is contained in:
34701892@qq.com 2025-08-18 13:05:24 +08:00
parent f0da0b3760
commit 650d5aefcc
7 changed files with 205 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/index.ts
View File

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

77
src/components/articleList/index.vue
View File

@ -10,13 +10,10 @@
}}</view>
</view>
<view class="listItemHeaderContent">
<view :class="['listItemTitle', !item.summary && 'noAbstract']" v-if="item.newType !== 'search'">
{{ item.title }}
</view>
<view class="listItemTitleContent" v-else>
<text class="listItemTitleContentText" v-html="item.MarkInRedTitle || item.title"></text>
<view :class="['listItemTitle', !item.summary && 'noAbstract']" v-html="item.title">
</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="tag" v-if="item.newType !== 'search'">{{ item.tag }}</view>
</view>
<!-- <view class="tabContainer">
<view class="tag">{{ item.tag }}</view>
</view> -->
<view class="listItemContent">
<view class="listItemTime">{{ item.time }}</view>
<view class="listItemData">
<view class="dataItem">{{ item.readNums || 0 }}阅读</view>
<view class="dataItem">{{ item.likeNums || 0 }}点赞</view>
<!-- <view class="dataItem">{{ 0 >= 1000 ? "999+" : 0 || "122" }}评论</view> -->
<view style="display: flex;">
<view class="tag">{{ item.tag }}</view>
<view class="listItemTime" style="margin-left: 10rpx;">{{ item.time }}</view>
</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>

9
src/components/comment/indexMini.vue
View File

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

20
src/pages/detail/indexNewsInfo.vue
View File

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

10
src/pages/minihome/index.vue
View File

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

145
src/pages/sreachReq/index.vue
View File

@ -1,64 +1,54 @@
<template>
<view class="sreachcss">
<!-- 搜索 start -->
<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 :style="{ height: getNavHeight() + 'px', position: 'sticky', top: 0, background: '#fff', zIndex: '9999' }">
</view>
<view style="width: 60vw; margin-left: 50rpx">
<u-input
v-model="keyWord"
@change="handleChange"
prefixIcon="search"
style="flex: 1"
placeholder="搜索快讯"
class="sreach_input"
:border="false"
/>
<!-- 导航栏 start -->
<view class="custom-bav-bar"
:style="{ position: 'sticky', top: getNavHeight() + 'px', left: 0, background: '#fff', zIndex: '9999' }">
<view class="left">
<image src="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/static/icon_left.png" class="back_icon"
@click="handleBack" />
</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
:data="screenList"
@onClick="handleSwiperJump"
v-if="screenList.length !== 0"
/>
<List :data="screenList" @onClick="handleSwiperJump" v-if="screenList.length !== 0" />
<!-- 列表 end -->
<!-- 加载更多的按钮 -->
<view
class="onLoad-btn"
@click="onload"
v-if="finish === false && inputValue"
>加载更多</view
>
<!-- <view class="onLoad-btn" @click="onload" v-if="finish === false && inputValue">加载更多</view> -->
<u-empty
v-if="screenList.length === 0"
text="搜索结果为空"
mode="search"
style="margin-top: 20vh"
></u-empty>
<view style="margin-top: 20vh">
<u-empty v-if="screenList.length === 0" text="无搜索结果" width="157" height="50"
icon="https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/nosearch_icon%E5%A4%87%E4%BB%BD%402x.png"></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
:show="LoginShow"
@handlePopupClose="handlePopupClose"
@handlePopupSuccessCallback="handlePopupSuccessCallback"
/>
<LoginPopup :show="LoginShow" @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>

2
src/utils/index.ts
View File

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