mayiming/toutoukan_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025/9/27/23:14

Browse Source
This commit is contained in:
马懿铭
2025-09-27 23:14:50 +08:00
parent eae49c76bd
commit e8186e723f
10 changed files with 156 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
miniprogram/app.json
View File

@@ -13,7 +13,8 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#f5f7fa",
"darkmode": false
"darkmode": false,
"enableShareAppMessage": true
},
"componentFramework": "glass-easel",
"lazyCodeLoading": "requiredComponents",

6
miniprogram/app.ts
View File

@@ -31,15 +31,15 @@ App<IAppOption>({
}
},
fetchRawCardData(): Promise<CardData[]> {
return new Promise((resolve, reject) => {
wx.request({
url: `${envConfig.apiBaseUrl}/article/get`,
method: "POST",
data: {
uid: this.globalData.userInfo.uid
uid: this.globalData.userInfo && this.globalData.userInfo.uid || ""
},
success: (res) => {
console.log("接收到的文章信息1：",res)
if (res.data && res.data.success && Array.isArray(res.data.data)) {
const rawData = res.data.data as CardData[];
this.globalData.rawCardData = rawData;
@@ -51,12 +51,14 @@ App<IAppOption>({
console.log("成功获取文评列表：", processedData);
resolve(processedData);
} else {
console.log("接收到的文章信息2：",res)
const error = new Error("接口返回格式不正确");
console.error(error, res);
reject(error);
}
},
fail: (err) => {
console.log("接收到的文章信息3：",res)
console.error("拉取投票数据失败", err);
reject(err);
}

3
miniprogram/pages/articledetail/articledetail.json
View File

@@ -1,6 +1,7 @@
{
"component": true,
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
"van-icon": "@vant/weapp/icon/index",
"t-icon": "tdesign-miniprogram/icon/icon"
}
}

44
miniprogram/pages/articledetail/articledetail.ts
View File

@@ -27,7 +27,8 @@ Component({
cardReviewData: null as any | null,
showReplyInput: false,
currentReplyId: '',
replyContent: ''
replyContent: '',
},
@@ -49,6 +50,41 @@ Component({
},
methods: {
onShareAppMessage: function (res) {
// 1. 获取文评数据，添加容错（避免数据为空导致报错）
const { cardReviewData = {} } = this.data;
const {
article_title = "未命名文评", // 文评标题默认值
total_voters = 0, // 总投票人数默认值
vote_type = "单选", // 投票类型（单选/多选）默认值
options = [] // 选项列表默认空数组
} = cardReviewData;
// 2. 处理选项数据：拼接“选项名+投票数”（如“方案A15票/方案B13票”）
const optionText = options.length
? options.map(opt => `${opt.name || '未命名选项'}${opt.votes || 0}票`).join('/')
: "暂无选项数据"; // 无选项时的默认提示
// 3. 拼接最终分享标题（整合所有关键信息）
const shareTitle = `${article_title}（已有${total_voters}人投票：${optionText}）`;
// 4. 返回分享配置（不设置imageUrl，微信会自动使用页面截图作为分享图）
return {
title: shareTitle, // 整合了关键数据的标题
path: `/pages/articledetail/articledetail?id=${cardReviewData.article_id || ''}`, // 跳转路径（容错：避免id为空）
// 不设置imageUrl：微信会自动截取当前页面顶部区域作为分享图（确保页面顶部有文评相关内容）
success: (res) => {
console.log('分享成功', res);
// 可选：分享成功后给用户提示
wx.showToast({ title: '分享成功', icon: 'success', duration: 1500 });
},
fail: (res) => {
console.log('分享失败', res);
wx.showToast({ title: '分享失败', icon: 'none', duration: 1500 });
}
};
},
// *** 递归计算评论总数的辅助函数 ***
calculateTotalComments(comments: Comment[]): number {
@@ -371,11 +407,13 @@ Component({
console.error('投票请求失败：', err);
}
});
}
},
}
},
})

11
miniprogram/pages/articledetail/articledetail.wxml
View File

@@ -98,8 +98,19 @@
<text class="btn-text">
{{cardReviewData.user_has_voted ? '已提交投票' : (cardReviewData.is_ended ? '投票结束' : '投我一票')}}
</text>
</button>
<button
class="share-btn"
open-type="share"
>
<!-- 原有图标 -->
<t-icon
name="link-1"
class="wrapper-link-icon"
/>
</button>
</view>
</view>
<!-- 投票区状态提示：无数据/加载中/加载失败 -->

92
miniprogram/pages/articledetail/articledetail.wxss
View File

@@ -280,81 +280,95 @@
color: #888888;
}
/* 1. 容器核心：Flex 布局，控制按钮和图标的位置 */
.vote-btn-wrapper {
display: flex;
justify-content: center;
display: flex; /* 开启 Flex 布局 */
justify-content: center;/* 按钮水平居中（Flex 主轴居中） */
align-items: center; /* 按钮和图标垂直居中对齐 */
margin-top: 10rpx;
padding: 0 16rpx; /* 左右留边距，避免图标贴容器边缘（可选） */
position: relative; /* 备用：若需微调图标位置可使用 */
}
/* 投票按钮样式修改：核心居中修正 */
/* 2. 投票按钮：保持原有样式，仅确保不影响 Flex 布局 */
.vote-btn {
width: 50%;
/* 核心修正：使用明确的 height 和 line-height 替代 padding */
height: 70rpx; /* 按钮高度 */
line-height: 70rpx; /* 行高与高度一致，确保文字垂直居中 */
height: 70rpx;
line-height: 70rpx;
padding: 0; /* 移除默认 padding 干扰 */
padding-bottom: 2vh;
/* 移除 padding-bottom: 2vh; 避免按钮垂直偏移，影响与图标的垂直对齐 */
background-color: #4F46E5;
color: #ffffff;
border-radius: 16rpx;
font-size: 28rpx; /* 字体增大一点，更具视觉冲击力 */
font-size: 28rpx;
font-weight: 600;
/* 核心居中：使用 flex 布局 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
justify-content: center;
align-items: center;
transition: all 0.2s ease;
}
/* 确保内部的文本和图标能够正确居中 */
.vote-btn .iconfont {
font-size: 28rpx; /* 图标大小与文字一致 */
/* 3. 图标核心：固定在容器最右侧，与按钮垂直居中 */
.wrapper-link-icon {
/* 去掉绝对定位，改用 Flex 布局的 margin-left: auto 右靠 */
margin-left: auto; /* 关键：自动占据左侧所有空间，把图标推到最右侧 */
/* 确保图标不占用额外高度空间 */
height: auto;
line-height: 1; /* 图标行高设为1 */
/* 图标样式（调整尺寸适配 rpx，与按钮协调） */
font-size: 32rpx; /* 用 rpx 适配多端，比按钮文字稍大 */
color: #1677ff;
/* 点击区域优化 + 视觉效果 */
padding: 8rpx;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
/* 与按钮保持水平间距（避免贴太紧） */
margin-left: 16rpx; /* 若需更靠右，可增大此值；若需顶格右靠，保留 margin-left: auto 即可 */
}
/* 确保内部的文字不会有额外的行高干扰垂直居中 */
.vote-btn .btn-text {
/* 移除 display: block 的默认行高干扰 */
/* 4. 图标点击反馈（保持原有） */
.wrapper-link-icon:active {
transform: scale(0.95);
color: #096dd9;
}
/* 以下为原有样式，保持不变 */
.vote-btn .iconfont {
font-size: 28rpx;
height: auto;
line-height: 1;
}
.vote-btn .btn-text {
line-height: 1;
}
/* 清除小程序button默认边框 */
.vote-btn::after {
border: none;
}
/* hover状态保持原有逻辑 */
.vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):hover {
background-color: rgba(79, 70, 229, 0.9);
}
/* 点击状态保持原有逻辑 */
.vote-btn:not(.vote-btn-ended):not(.vote-btn-disabled):active {
transform: scale(0.98);
}
/* 禁用状态样式保持不变 */
.vote-btn-ended, .vote-btn-disabled {
background-color: #cccccc !important;
color: #888888 !important;
cursor: not-allowed;
}
.vote-status-tip {
width: 100%;
text-align: center;
font-size: 28rpx;
color: #666666;
.share-btn {
/* 清除按钮默认样式 */
background: none;
border: none;
padding: 0;
margin: 0;
/* 去掉点击时的默认灰色背景 */
opacity: 1;
}
.vote-status-tip.error {
color: #ff4d4f;
/* 去除按钮点击时的默认边框和背景 */
.share-btn::after {
border: none;
}
.section-divider {

5
miniprogram/pages/home/home.ts
View File

@@ -13,7 +13,8 @@ Component({
app.fetchRawCardData().then(cards => {
this.setData({ processedCardsData: cards });
}).catch(err => {
wx.showToast({ title: '加载失败', icon: 'none' });
console.log("错误fetchRaw：",err)
wx.showToast({ title: '加载失败1', icon: 'none' });
});
const apiBaseUrl = `${envConfig.apiBaseUrl}`;
this.setData({
@@ -157,7 +158,7 @@ Component({
});
}).catch(err => {
wx.showToast({ title: '加载失败', icon: 'none' });
wx.showToast({ title: '加载失败2', icon: 'none' });
this.setData({
refresherTriggered: false
});

5
miniprogram/pages/publish/publish.json
View File

@@ -17,7 +17,10 @@
"t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
"t-button": "tdesign-miniprogram/button/button",
"t-picker": "tdesign-miniprogram/picker/picker",
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item"
"t-picker-item": "tdesign-miniprogram/picker-item/picker-item",
"t-collapse": "tdesign-miniprogram/collapse/collapse",
"t-collapse-panel": "tdesign-miniprogram/collapse-panel/collapse-panel",
"t-divider": "tdesign-miniprogram/divider/divider"
},
"navigationBarBackgroundColor": "#ffffff",

15
miniprogram/pages/publish/publish.wxml
View File

@@ -9,9 +9,9 @@
<!-- 第一个选项卡：普通发布 -->
<t-tab-panel label="普通发布" value="{{0}}" class="tab-panel">
<view class="input-example">
<view class="input-example__label"> 标签文字 </view>
<view class="input-example__label"> 文评标题 </view>
<t-input
placeholder="请输入文字"
placeholder="请输入标题"
borderless="{{true}}"
style="{{style}}"
@@ -144,6 +144,17 @@
</t-button>
</t-form-item>
</t-form>
<t-divider t-class="{{skylineRender?'skyline-dashed':''}}" />
<t-collapse theme="card" defaultValue="{{[3]}}" expandIcon>
<t-collapse-panel header="邀请码须知" value="{{0}}">
当有用户使用您的邀请码后，您可以获得10积分奖励，使用您邀请码的用户可以获得3积分奖励，同时您可以无限使用别人的邀请码，您可以在"用户"->"邀请码"中查看您的邀请码的使用情况
</t-collapse-panel>
</t-collapse>
</t-tab-panel>
</t-tabs>
</view>

2
miniprogram/pages/user/user.wxml
View File

@@ -32,7 +32,7 @@
<view class="stat-label">我的积分</view>
</view>
<view class="stat-item" bind:tap="gotoMyPosts">
<view class="stat-value">{{userinfo.postCount || 0}}</view>
<view class="stat-value">{{article_num || 0}}</view>
<view class="stat-label">我的发布</view>
</view>
<view class="stat-item" bind:tap="gotoCollections">