完成了登录模块

This commit is contained in:
chen-xin-zhi 2025-05-19 09:17:46 +08:00
parent 3fe9c3c209
commit 10f0ebaf3d
8 changed files with 282 additions and 0 deletions

View File

@ -0,0 +1,52 @@
const { baseUrl } = require('../../../request');
Page({
data: {
title: '',
createTime: '',
content: '',
id: null
},
onLoad(options) {
// 1. 获取跳转传来的 id
const id = options.id;
this.setData({ id });
// 2. 拉取通知详情
this.fetchNotificationDetail(id);
},
fetchNotificationDetail(id) {
const token = wx.getStorageSync('token');
wx.request({
url: baseUrl + '/projectNotification/mini/query/id', // 用你的实际接口
method: 'POST',
header: {
Authorization: token
},
data: { id },
success: (res) => {
if (res.data.code === 1) {
const detail = res.data.data || {};
this.setData({
title: detail.notificationTitle || '',
createTime: detail.createTime || '',
content: detail.notificationContent || ''
});
} else {
wx.showToast({
title: res.data.message || '获取通知失败',
icon: 'none'
});
}
},
fail: () => {
wx.showToast({
title: '网络错误',
icon: 'none'
});
}
});
}
});

View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@ -0,0 +1,7 @@
<view class="flex-col page">
<text class="self-start text">{{title}}</text>
<text class="self-start text_2 mt-17">{{createTime}}</text>
<view class="self-stretch section mt-17">
<rich-text class="notification-content mt-17" nodes="{{content}}"></rich-text>
</view>
</view>

View File

@ -0,0 +1,25 @@
.mt-17 {
margin-top: 31.88rpx;
}
.page {
padding: 45rpx 30rpx 978.75rpx;
background-color: #ffffff;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
}
.text {
color: #000000;
font-size: 30rpx;
font-family: SourceHanSansCN;
line-height: 27.99rpx;
font-weight: bold;
}
.text_2 {
color: #969696;
font-size: 22.5rpx;
font-family: SourceHanSansCN;
line-height: 26.25rpx;
width: 256.25rpx;
}

View File

@ -0,0 +1,49 @@
// promoPop/promoPop.js
Component({
properties: {
show: { // 控制显示/隐藏
type: Boolean,
value: false
},
qrcode: { // 二维码图片
type: String,
value: ''
},
link: { // 推广链接
type: String,
value: ''
},
closeIcon: { // 关闭按钮图片
type: String,
value: ''
}
},
methods: {
// 点击遮罩或关闭按钮关闭弹窗
close() {
this.triggerEvent('close');
},
// 放大二维码
previewQrcode() {
if (this.data.qrcode) {
wx.previewImage({
urls: [this.data.qrcode]
});
}
},
// 复制推广链接
copyLink() {
if (this.data.link) {
wx.setClipboardData({
data: this.data.link,
success: () => {
wx.showToast({
title: '复制成功',
icon: 'success'
});
}
});
}
}
}
});

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View File

@ -0,0 +1,32 @@
<!-- promoPop/promoPop.wxml -->
<view>
<!-- 遮罩层,点击即可关闭弹窗 -->
<view class="promo-mask" wx:if="{{show}}" bindtap="close"></view>
<!-- 弹窗内容 -->
<view class="flex-col page" wx:if="{{show}}">
<view class="flex-col self-stretch section">
<text class="self-center text">作业码</text>
<text class="self-center font text_2 mt-23">引导用户通过扫描此码来完成相应的任务</text>
<view class="flex-col self-stretch group mt-23">
<image
class="self-center image"
src="{{qrcode}}"
bindtap="previewQrcode"
/>
<view class="mt-20 flex-col items-start self-stretch">
<text class="font text_3">点击二维码放大,长按保存</text>
<view class="flex-col justify-start items-center text-wrapper mt-19" bindtap="copyLink">
<text class="font text_4">复制推广链接</text>
</view>
</view>
</view>
</view>
<!-- 右下角关闭按钮 -->
<image
class="self-center image_2 mt-21"
src="{{closeIcon}}"
bindtap="close"
/>
</view>
</view>

View File

@ -0,0 +1,110 @@
@import "../../../app.wxss";
.mt-23 {
margin-top: 53.57rpx;
}
.mt-19 {
margin-top: 44.25rpx;
}
.mt-21 {
margin-top: 48.91rpx;
}
/* 遮罩层样式,必须加,确保弹窗浮于上层并居中 */
.promo-mask {
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.45); /* 比 0.5 更柔和 */
z-index: 9999;
}
/* 弹窗整体居中 */
.page {
position: fixed;
top: 45%; left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
width: 600rpx; /* 推荐设置定宽,防止弹窗太大 */
max-width: 90vw;
padding-bottom: 0; /* 去掉原有多余 padding */
background-color: transparent;
overflow: visible;
border-radius: 32rpx;
}
/* 弹窗内部内容区域 */
.section {
padding: 60rpx 40rpx 40rpx 40rpx; /* 优化内边距 */
background-color: #fff9e5;
border-radius: 32rpx;
box-shadow: 0 16rpx 64rpx 0 rgba(0,0,0,0.15);
position: relative;
}
.text {
color: #ff6f00;
font-size: 50rpx;
font-family: SourceHanSansCN;
line-height: 64rpx;
font-weight: bold;
}
.font {
font-size: 34rpx;
font-family: SourceHanSansCN;
line-height: 48rpx;
}
.text_2 {
color: #ff9800;
margin-top: 16rpx;
font-size: 26rpx;
text-align: center;
}
.group {
padding-left: 0;
padding-right: 0;
margin: 0 auto;
width: 100%;
}
.image {
width: 300rpx;
height: 300rpx;
margin: 40rpx auto 0;
border-radius: 16rpx;
box-shadow: 0 4rpx 24rpx rgba(255, 111, 0, 0.08);
background: #fff;
display: block;
}
.text_3 {
color: #000;
line-height: 40rpx;
margin-top: 16rpx;
font-size: 28rpx;
text-align: center;
width: 100%;
}
.text-wrapper {
margin: 32rpx auto 0;
padding: 22rpx 0;
background-color: #ffb300;
border-radius: 93.17rpx;
width: 280rpx;
text-align: center;
box-shadow: 0 4rpx 12rpx rgba(255,179,0,0.07);
cursor: pointer;
}
.text_4 {
color: #fff;
line-height: 36rpx;
font-size: 32rpx;
font-weight: bold;
}
/* 关闭按钮右下角浮动 */
.image_2 {
width: 67.55rpx;
height: 67.55rpx;
position: absolute;
bottom: -100rpx;
z-index: 10100;
cursor: pointer;
}