feat: 电子药箱小程序 - 4Tab药品管理
- 电子药箱: 药品库存管理 + 手动录入 + 今日用药打卡 - 药品百科: 搜索 + 分类筛选 + 20种药品静态数据 - 惠教中心: 4条药品使用指南课程 - 我的: 家庭成员信息管理 - 自定义TabBar + navigation-bar组件 - SVG药品分类插图
This commit is contained in:
陈誉午
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
/* pages/common/red/red.wxss */
|
||||
.body {
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// flex-direction: column;
|
||||
// flex: 1;
|
||||
width: 750rpx;
|
||||
|
||||
.bg {
|
||||
background-color: #f25f4d;
|
||||
margin: 24rpx;
|
||||
margin-bottom:0rpx ;
|
||||
max-height:100%;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.content {
|
||||
background-color: #f15642;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 13vh;
|
||||
border-bottom-left-radius: 50%;
|
||||
border-bottom-right-radius: 50%;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.item-container {
|
||||
width: 100%;
|
||||
margin-top: 13vh;
|
||||
|
||||
.content-item {
|
||||
color: #fed9b2;
|
||||
margin: 24rpx;
|
||||
height: 75vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.info{
|
||||
width: 89%;
|
||||
.nickname {
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 36rpx;
|
||||
font-weight: 800;
|
||||
}
|
||||
.time{
|
||||
margin-left: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.safeBottom{
|
||||
width: 100%;
|
||||
// background: yellow;
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
// pages/common/red/red.ts
|
||||
import { wxLogin } from '../../../utils/wx-api'
|
||||
import { request } from '../../../utils/request'
|
||||
const app = getApp<IAppOption>()
|
||||
const defaultAvatarUrl =
|
||||
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
|
||||
const formatDate = (isoString: string): string => {
|
||||
const date = new Date(isoString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const getState = (state: number) => {
|
||||
switch (state) {
|
||||
case 40:
|
||||
return '领取成功'
|
||||
case 50:
|
||||
return '红包已过期'
|
||||
default:
|
||||
return '正在发放中'
|
||||
}
|
||||
}
|
||||
Page({
|
||||
data: {
|
||||
list: [] as any[],
|
||||
defaultAvatarUrl: defaultAvatarUrl,
|
||||
safeBottom: app.globalData.safeBottom,
|
||||
safeTop: app.globalData.safeTop
|
||||
},
|
||||
|
||||
async onLoad(options: { state: string }) {
|
||||
// const bool = await app.login('red');
|
||||
// if (!bool) return;
|
||||
try {
|
||||
const code = await wxLogin();
|
||||
let res;
|
||||
|
||||
const loginRes = await request({
|
||||
options: {
|
||||
url: '/operation/vdo-red/auth-resultV1', //领取红包
|
||||
method: "GET",
|
||||
data: {
|
||||
code: code.code,
|
||||
state: options.state
|
||||
}
|
||||
},
|
||||
needLogin:false
|
||||
})
|
||||
|
||||
res = await request({
|
||||
options: {
|
||||
url: '/operation/vdo-red/result', //查询红包
|
||||
data: {
|
||||
openId: loginRes,
|
||||
state: options.state
|
||||
}
|
||||
},
|
||||
needLogin:false
|
||||
})
|
||||
const list = res.data.map((item: any) => ({
|
||||
...item,
|
||||
date: formatDate(item.createdTime),
|
||||
stateText: getState(item.state)
|
||||
}))
|
||||
this.setData({ list })
|
||||
// res = { //mock
|
||||
// data: [
|
||||
// {
|
||||
// avatar: defaultAvatarUrl,
|
||||
// nickname: 'x5',
|
||||
// amount: 13343,
|
||||
// date: '2025-11-21 09:11',
|
||||
// state: 40
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
} catch (e) {
|
||||
wx.redirectTo({
|
||||
url: '/pages/error/error?msg=请求错误'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,29 @@
|
||||
<!--pages/common/red/red.wxml-->
|
||||
<!-- <navigation-bar title="红包详情" back="{{false}}" color="black" background="#FFF"></navigation-bar> -->
|
||||
<view class="body">
|
||||
<view class="bg"
|
||||
style="height: calc(100vh - {{safeBottom}}rpx - {{safeTop}}rpx);margin-top: {{safeTop}}rpx;">
|
||||
<view class="content"></view>
|
||||
|
||||
<view class="item-container">
|
||||
<view class="content-item">
|
||||
<block wx:for="{{list}}" wx:key="openId">
|
||||
<view class="item">
|
||||
<image class="avatar" src="{{item.avatar ||defaultAvatarUrl}}"></image>
|
||||
<view class="info">
|
||||
<view class="nickname">
|
||||
<text class="name">{{item.nickname}}</text>
|
||||
<text class="price">{{item.amount / 100}}元</text>
|
||||
</view>
|
||||
<view class="time">
|
||||
<text>{{item.date}}</text>
|
||||
<text>{{item.stateText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<div class="safeBottom" style="height: {{safeBottom}}rpx;"></div>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 60rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.drug-header {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 30rpx 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
}
|
||||
|
||||
.header-img { width: 100rpx; height: 100rpx; margin-bottom: 16rpx; }
|
||||
|
||||
.drug-meta { display: flex; gap: 14rpx; }
|
||||
|
||||
.meta-item {
|
||||
font-size: 22rpx; color: #fff;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 6rpx 20rpx; border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.meta-item.rx { background: rgba(255, 59, 48, 0.3); }
|
||||
|
||||
.section {
|
||||
margin: 24rpx 30rpx; background: #ffffff;
|
||||
border-radius: 20rpx; padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.section.warning { border-left: 6rpx solid #FF6B35; }
|
||||
.section.tip { border-left: 6rpx solid #07C160; background: #f0faf5; }
|
||||
|
||||
.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin-bottom: 20rpx; }
|
||||
.section-content { font-size: 28rpx; color: #555; line-height: 1.8; }
|
||||
|
||||
.info-row {
|
||||
display: flex; justify-content: space-between;
|
||||
padding: 16rpx 0; border-top: 1rpx solid #f0f0f0; margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.info-label { font-size: 24rpx; color: #999; }
|
||||
.info-value { font-size: 24rpx; color: #333; font-weight: 500; }
|
||||
.info-value.price { color: #FF6B35; font-weight: 600; }
|
||||
|
||||
.precaution-item { font-size: 26rpx; color: #666; line-height: 1.9; margin-bottom: 6rpx; }
|
||||
|
||||
.disclaimer { text-align: center; font-size: 22rpx; color: #ccc; padding: 30rpx; }
|
||||
|
||||
.empty-page { display: flex; align-items: center; justify-content: center; }
|
||||
.empty-msg { text-align: center; }
|
||||
.empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
|
||||
.empty-text { font-size: 30rpx; color: #999; }
|
||||
@@ -0,0 +1,23 @@
|
||||
import { wikiDrugs } from '../../utils/drug-data';
|
||||
import type { WikiDrug } from '../../utils/drug-data';
|
||||
import { getDrugImage } from '../../utils/drug-images';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
drug: {} as WikiDrug,
|
||||
drugImage: '',
|
||||
},
|
||||
onLoad(options: Record<string, string>) {
|
||||
const id = Number(options.id);
|
||||
const drug = wikiDrugs[id];
|
||||
if (drug) {
|
||||
this.setData({
|
||||
drug,
|
||||
drugImage: getDrugImage(drug.category),
|
||||
});
|
||||
wx.setNavigationBarTitle({ title: drug.name });
|
||||
} else {
|
||||
wx.showToast({ title: '未找到药品信息', icon: 'none' });
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,63 @@
|
||||
<view class="page" wx:if="{{drug.id}}">
|
||||
<navigation-bar title="{{drug.name}}" back="{{true}}" color="white" background="#4A90D9" />
|
||||
|
||||
<view class="drug-header">
|
||||
<image class="header-img" src="{{drugImage}}" mode="aspectFit" />
|
||||
<view class="drug-meta">
|
||||
<view class="meta-item">{{drug.category}}</view>
|
||||
<view class="meta-item">{{drug.form}}</view>
|
||||
<view class="meta-item" wx:if="{{drug.isOTC}}">OTC</view>
|
||||
<view class="meta-item rx" wx:else>Rx</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">📋 药品简介</view>
|
||||
<view class="section-content">{{drug.description}}</view>
|
||||
<view class="info-row" wx:if="{{drug.manufacturer}}">
|
||||
<view class="info-label">生产厂家</view>
|
||||
<view class="info-value">{{drug.manufacturer}}</view>
|
||||
</view>
|
||||
<view class="info-row" wx:if="{{drug.price}}">
|
||||
<view class="info-label">参考价格</view>
|
||||
<view class="info-value price">{{drug.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">💡 用法用量</view>
|
||||
<view class="section-content">{{drug.usage || drug.dosage}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">⏰ 服用时间</view>
|
||||
<view class="section-content">{{drug.timing}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section warning">
|
||||
<view class="section-title">⚠️ 注意事项</view>
|
||||
<view class="section-content">
|
||||
<view wx:for="{{drug.precautions}}" wx:key="index" class="precaution-item">{{index + 1}}. {{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section">
|
||||
<view class="section-title">🩺 不良反应</view>
|
||||
<view class="section-content">{{drug.sideEffects}}</view>
|
||||
</view>
|
||||
|
||||
<view class="section tip">
|
||||
<view class="section-title">📌 温馨提示</view>
|
||||
<view class="section-content">{{drug.tip}}</view>
|
||||
</view>
|
||||
|
||||
<view class="disclaimer">本内容仅供参考，具体用药请遵医嘱</view>
|
||||
</view>
|
||||
|
||||
<view class="page empty-page" wx:else>
|
||||
<navigation-bar title="药品详情" back="{{true}}" color="black" background="#ffffff" />
|
||||
<view class="empty-msg">
|
||||
<view class="empty-icon">🔍</view>
|
||||
<view class="empty-text">未找到药品信息</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"disableScroll": true,
|
||||
"navigationBarBackgroundColor": "#FFFFFF",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* pages/live/h5Room/index.wxss */
|
||||
page {
|
||||
height: 100%;
|
||||
background: #eaf6ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.h5-room {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.h5-room__nav {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #edf8ff 0%, #dbeeff 48%, #cae5ff 100%);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 -1px 0 rgba(120, 180, 255, 0.14);
|
||||
}
|
||||
|
||||
.h5-room__nav-status {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.h5-room__nav-bg,
|
||||
.h5-room__nav-grid,
|
||||
.h5-room__nav-glow,
|
||||
.h5-room__nav-bubble {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.h5-room__nav-bg {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background:
|
||||
radial-gradient(circle at 14% 82%, rgba(74, 183, 255, 0.26) 0%, rgba(74, 183, 255, 0) 28%),
|
||||
radial-gradient(circle at 88% 22%, rgba(93, 255, 240, 0.22) 0%, rgba(93, 255, 240, 0) 20%),
|
||||
radial-gradient(circle at 76% 84%, rgba(123, 152, 255, 0.18) 0%, rgba(123, 152, 255, 0) 24%),
|
||||
linear-gradient(135deg, #edf8ff 0%, #dbeeff 48%, #cae5ff 100%);
|
||||
}
|
||||
|
||||
.h5-room__nav-grid {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.42;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
|
||||
background-size: 18px 18px;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.h5-room__nav-glow {
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.h5-room__nav-glow--left {
|
||||
top: 20rpx;
|
||||
left: -36rpx;
|
||||
width: 220rpx;
|
||||
height: 220rpx;
|
||||
}
|
||||
|
||||
.h5-room__nav-glow--right {
|
||||
right: -30rpx;
|
||||
bottom: -72rpx;
|
||||
width: 260rpx;
|
||||
height: 260rpx;
|
||||
background: rgba(147, 177, 255, 0.2);
|
||||
}
|
||||
|
||||
.h5-room__nav-bubble {
|
||||
border-radius: 50%;
|
||||
background: rgba(71, 170, 255, 0.5);
|
||||
box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.h5-room__nav-bubble--sm {
|
||||
top: 22rpx;
|
||||
right: 184rpx;
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
background: rgba(89, 187, 255, 0.8);
|
||||
}
|
||||
|
||||
.h5-room__nav-bubble--md {
|
||||
top: 66rpx;
|
||||
left: 112rpx;
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
background: rgba(79, 165, 255, 0.58);
|
||||
}
|
||||
|
||||
.h5-room__nav-bubble--lg {
|
||||
right: 64rpx;
|
||||
bottom: 18rpx;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
background: rgba(120, 157, 255, 0.38);
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
// pages/live/h5Room/index.ts
|
||||
import { appId } from "../../../env";
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
webViewUrl: "",
|
||||
webViewHeight: 0,
|
||||
statusBarHeight: 0,
|
||||
navBarHeight: 0,
|
||||
},
|
||||
async onLoad(options: any) {
|
||||
const windowInfo = (wx as any).getWindowInfo
|
||||
? (wx as any).getWindowInfo()
|
||||
: wx.getSystemInfoSync();
|
||||
const menuButtonRect = wx.getMenuButtonBoundingClientRect();
|
||||
const statusBarHeight =
|
||||
windowInfo.safeArea?.top || windowInfo.statusBarHeight || 0;
|
||||
const navBarHeight = menuButtonRect?.top
|
||||
? menuButtonRect.bottom + menuButtonRect.top - statusBarHeight
|
||||
: statusBarHeight + 44;
|
||||
const webViewHeight = Math.max(
|
||||
(windowInfo.windowHeight || 0) - navBarHeight,
|
||||
0,
|
||||
);
|
||||
|
||||
this.setData({
|
||||
statusBarHeight,
|
||||
navBarHeight,
|
||||
webViewHeight,
|
||||
});
|
||||
const app = getApp<IAppOption>();
|
||||
const bool = await app.login("room");
|
||||
if (!bool) return;
|
||||
try {
|
||||
// const baseUrl = "http://localhost:5173/pages/room";
|
||||
const baseUrl = "https://live.byteoc.com/1859506470730939/1425285?platform=mobile";
|
||||
|
||||
const openId = wx.getStorageSync("openId");
|
||||
const roomId = options?.roomId;
|
||||
const params: Record<string, string> = {};
|
||||
if (openId) params.openId = openId;
|
||||
if (appId) params.appId = appId;
|
||||
if (roomId) params.roomId = roomId;
|
||||
|
||||
if (options?.extraParams) {
|
||||
try {
|
||||
const extraParams = JSON.parse(
|
||||
decodeURIComponent(options.extraParams),
|
||||
);
|
||||
Object.entries(extraParams).forEach(([key, value]) => {
|
||||
params[key] = String(value);
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("Failed to parse extra parameters");
|
||||
}
|
||||
}
|
||||
const queryString = Object.entries(params)
|
||||
.map(
|
||||
([key, value]) =>
|
||||
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`,
|
||||
)
|
||||
.join("&");
|
||||
const finalUrl = `${baseUrl}?${queryString}`;
|
||||
this.setData({
|
||||
webViewUrl: finalUrl,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error generating URL:", error);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
});
|
||||
@@ -0,0 +1,2 @@
|
||||
<!--pages/live/h5Room/index.wxml-->
|
||||
<text>pages/live/h5Room/index.wxml</text>
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744786271399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M832 192H192c-35.2 0-64 28.8-64 64v512c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64V256c0-35.2-28.8-64-64-64z" fill="#F56C6C"/><path d="M192 192h640L512 448 192 192z" fill="#F78989"/><path d="M512 512m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFD700"/></svg>
|
||||
|
After Width: | Height: | Size: 545 B |
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"van-tabs": "@vant/weapp/tabs/index",
|
||||
"van-tab": "@vant/weapp/tab/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,184 @@
|
||||
.page-wrap {
|
||||
box-sizing: border-box;
|
||||
background: #f5f5f5;
|
||||
height: calc(100vh - 162rpx);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 汇总卡片 ===== */
|
||||
.summary-section {
|
||||
padding: 24rpx 24rpx 0;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.total-card {
|
||||
background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
|
||||
margin-bottom: 16rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
}
|
||||
|
||||
.total-card .card-label {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #fff !important;
|
||||
font-size: 48rpx !important;
|
||||
}
|
||||
|
||||
.summary-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.sub-card {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
padding: 24rpx 10rpx;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.card-amount {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-amount.received {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.card-amount.pending {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.card-amount.expired {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tabs-wrap {
|
||||
margin: 16rpx;
|
||||
}
|
||||
|
||||
/* ===== 红包列表 ===== */
|
||||
.red-history {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-scroll {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 30rpx;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin: 0 24rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.record:first-child {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.red-icon {
|
||||
width: 70rpx;
|
||||
height: 140rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
display: block;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 32rpx;
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.state-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.receive-btn {
|
||||
margin-top: 12rpx;
|
||||
padding: 8rpx 28rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
background: #ff4d4f;
|
||||
border-radius: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
text-align: center;
|
||||
padding: 30rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
padding: 20rpx 0;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 0.9;
|
||||
font-size: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
import { appId } from "../../../env";
|
||||
import { request } from "../../../utils/request";
|
||||
import { receiveRedPacket } from "../../../utils/util";
|
||||
|
||||
const app = getApp<IAppOption>();
|
||||
const formatDate = (isoString: string): string => {
|
||||
const date = new Date(isoString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(date.getDate()).padStart(2, "0");
|
||||
const hours = String(date.getHours()).padStart(2, "0");
|
||||
const minutes = String(date.getMinutes()).padStart(2, "0");
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
const RED_STATE_MAP: Record<number, string> = {
|
||||
10: "未发送",
|
||||
11: "等待领取",
|
||||
20: "正在发送",
|
||||
21: "等待确认",
|
||||
30: "发送失败",
|
||||
31: "个数不够",
|
||||
32: "账户余额不足",
|
||||
33: "客户未实名",
|
||||
34: "其它原因",
|
||||
40: "已领取",
|
||||
50: "已过期",
|
||||
};
|
||||
|
||||
const getStateText = (state: number) => {
|
||||
return RED_STATE_MAP[state] || "发放中";
|
||||
};
|
||||
|
||||
const FAILED_STATES = [30, 31, 32, 33, 34];
|
||||
|
||||
const canReceive = (state: number) => {
|
||||
return state === 11 || state === 21 || FAILED_STATES.includes(state);
|
||||
};
|
||||
|
||||
const isRetry = (state: number) => {
|
||||
return FAILED_STATES.includes(state);
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
list: [] as any[],
|
||||
loading: false,
|
||||
hasMore: true,
|
||||
current: 1,
|
||||
pageSize: 15,
|
||||
activeTab: 0,
|
||||
tabs: [
|
||||
{ label: '待领取', value: 0, type: 1 },
|
||||
{ label: '已领取', value: 1, type: 2 },
|
||||
{ label: '已过期', value: 2, type: 3 },
|
||||
],
|
||||
summary: {
|
||||
totalAmount: '0.00',
|
||||
receivedAmount: '0.00',
|
||||
pendingAmount: '0.00',
|
||||
expiredAmount: '0.00',
|
||||
},
|
||||
store: {},
|
||||
safeBottom: app.globalData.safeBottom,
|
||||
safeTop: app.globalData.safeTop,
|
||||
},
|
||||
|
||||
async onLoad() {
|
||||
await this.fetchRecords(1, false, this.data.tabs[0].type);
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
if (this.data.loading || !this.data.hasMore) return;
|
||||
const nextPage = this.data.current + 1;
|
||||
this.fetchRecords(nextPage, true, this.data.tabs[this.data.activeTab].type);
|
||||
},
|
||||
|
||||
onTabChange(e: any) {
|
||||
const index = e.detail.index;
|
||||
const tab = this.data.tabs[index];
|
||||
this.setData({ activeTab: index });
|
||||
this.fetchRecords(1, false, tab.type);
|
||||
},
|
||||
|
||||
async handleReceive(e: any) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const { code } = this.data.store as Record<string, any>;
|
||||
|
||||
const params = {
|
||||
appId,
|
||||
code,
|
||||
openId: wx.getStorageSync("openId"),
|
||||
redId: id,
|
||||
}
|
||||
try {
|
||||
await receiveRedPacket(
|
||||
params,
|
||||
'/app/general/receive-red',
|
||||
appId
|
||||
);
|
||||
// 领取成功，刷新当前列表
|
||||
this.fetchRecords(1, false, this.data.tabs[this.data.activeTab].type);
|
||||
} catch (err) {
|
||||
console.error('领取红包失败:', err);
|
||||
}
|
||||
},
|
||||
|
||||
async fetchRecords(page: number, append = false, type: number) {
|
||||
const app = getApp<IAppOption>();
|
||||
const openId = wx.getStorageSync("openId");
|
||||
|
||||
this.setData({
|
||||
store: app.globalData.store,
|
||||
});
|
||||
if (!openId) {
|
||||
wx.showToast({ title: "请先登录", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (append) {
|
||||
this.setData({ loading: true });
|
||||
} else {
|
||||
wx.showLoading({ title: "加载中" });
|
||||
}
|
||||
|
||||
try {
|
||||
let res: any;
|
||||
const { state, seeId, code } = this.data.store as Record<string, any>;
|
||||
|
||||
const params: Record<string, any> = {};
|
||||
params.openId = openId;
|
||||
params.current = page;
|
||||
params.pageSize = 15;
|
||||
params.type = type;
|
||||
if (code) params.code = code;
|
||||
if (state) params.state = state;
|
||||
if (seeId) params.seeId = seeId;
|
||||
// if (code) {
|
||||
res = await request({
|
||||
options: {
|
||||
url: "/app/video-watch/record",
|
||||
data: params,
|
||||
},
|
||||
isLoading: !append,
|
||||
// needLogin: false,
|
||||
});
|
||||
// } else {
|
||||
// res = await request({
|
||||
// options: {
|
||||
// url: "/live/watch/record",
|
||||
// data: params,
|
||||
// },
|
||||
// isLoading: !append,
|
||||
// needLogin: false,
|
||||
// });
|
||||
// }
|
||||
|
||||
const records = res.data?.records || res.records || [];
|
||||
const items = records.map((item: any) => ({
|
||||
...item,
|
||||
date: formatDate(item.createdTime),
|
||||
stateText: getStateText(item.state),
|
||||
amountText: `${(item.amount / 100).toFixed(2)}`,
|
||||
canReceive: canReceive(item.state),
|
||||
isRetry: isRetry(item.state),
|
||||
}));
|
||||
|
||||
this.setData({
|
||||
list: append ? [...this.data.list, ...items] : items,
|
||||
current: page,
|
||||
hasMore: records.length >= this.data.pageSize,
|
||||
});
|
||||
|
||||
// 汇总数据在 res.data 根层级，单位是分，转为元
|
||||
const d = res.data;
|
||||
if (d && d.totalAmount !== undefined) {
|
||||
this.setData({
|
||||
summary: {
|
||||
totalAmount: (d.totalAmount / 100).toFixed(2),
|
||||
receivedAmount: (d.receivedAmount / 100).toFixed(2),
|
||||
pendingAmount: (d.pendingAmount / 100).toFixed(2),
|
||||
expiredAmount: (d.expiredAmount / 100).toFixed(2),
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("加载红包记录失败:", err);
|
||||
} finally {
|
||||
if (append) {
|
||||
this.setData({ loading: false });
|
||||
} else {
|
||||
wx.hideLoading();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
<navigation-bar title="红包记录" back="{{true}}" color="black" background="#FFF" />
|
||||
|
||||
<view class="page-wrap">
|
||||
<view class="summary-section">
|
||||
<view class="summary-card total-card">
|
||||
<text class="card-label">总领取金额</text>
|
||||
<text class="card-amount total-amount">¥{{summary.totalAmount}}</text>
|
||||
</view>
|
||||
<view class="summary-row">
|
||||
<view class="summary-card sub-card">
|
||||
<text class="card-label">待领取金额</text>
|
||||
<text class="card-amount pending">¥{{summary.pendingAmount}}</text>
|
||||
</view>
|
||||
<view class="summary-card sub-card">
|
||||
<text class="card-label">已领取金额</text>
|
||||
<text class="card-amount received">¥{{summary.receivedAmount}}</text>
|
||||
</view>
|
||||
<view class="summary-card sub-card">
|
||||
<text class="card-label">已过期金额</text>
|
||||
<text class="card-amount expired">¥{{summary.expiredAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tabs-wrap">
|
||||
<van-tabs active="{{activeTab}}" bind:change="onTabChange" animated>
|
||||
<van-tab wx:for="{{tabs}}" wx:key="value" title="{{item.label}}" />
|
||||
</van-tabs>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{list.length}}" class="red-history">
|
||||
<scroll-view
|
||||
class="list-scroll"
|
||||
scroll-y
|
||||
bindscrolltolower="onReachBottom"
|
||||
lower-threshold="200"
|
||||
>
|
||||
<view class="record" wx:for="{{list}}" wx:key="id">
|
||||
<image class="red-icon" src="./assets/red.svg" mode="aspectFill"/>
|
||||
<view class="content">
|
||||
<text class="name">{{item.description}}</text>
|
||||
<text class="time">{{item.date}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="amount">￥{{item.amountText}}</text>
|
||||
<view wx:if="{{item.canReceive}}" class="receive-btn" data-id="{{item.id}}" bind:tap="handleReceive">{{item.isRetry ? '重试' : '领取'}}</view>
|
||||
<text wx:else class="state-text">{{item.stateText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view wx:if="{{!hasMore}}" class="no-more">没有更多数据了</view>
|
||||
<view wx:if="{{loading}}" class="loading-tip">加载中...</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view wx:else class="no-data">暂无记录</view>
|
||||
</view>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"backgroundTextStyle": "light",
|
||||
"backgroundColor": "#ffffff",
|
||||
"navigationBarShareAppMessage": false,
|
||||
"navigationBarShareTimeline": false,
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
@import "../../../variables";
|
||||
/* pages/live/registration.wxss */
|
||||
.page-result {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-top: 180rpx;
|
||||
.clock-icon,
|
||||
.success-container,
|
||||
.forbid-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
.success-icon {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
/* 使用滤镜改变颜色为 #0dc70d 绿色 */
|
||||
filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(748%) hue-rotate(90deg) brightness(90%) contrast(85%);
|
||||
}
|
||||
}
|
||||
|
||||
.text-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text {
|
||||
margin-bottom: 20rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
margin-top: 80rpx;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
z-index: 9999;
|
||||
font-size: 20px;
|
||||
color: #c6c6c6;
|
||||
}
|
||||
.color-green {
|
||||
color: #0dc70d;
|
||||
}
|
||||
.userinfo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15vh;
|
||||
border: 1px solid #ccc;
|
||||
padding: 30rpx ;
|
||||
border-radius: 25rpx;
|
||||
.choose-avatar {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 113rpx;
|
||||
height: 113rpx;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $primary-color;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.nickname {
|
||||
width: 300rpx;
|
||||
margin-left: $primary-gap;
|
||||
font-size: $large-font-size;
|
||||
font-weight: 800;
|
||||
}
|
||||
.refresh {
|
||||
width: 150rpx;
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
border-radius: 25rpx;
|
||||
border: 1px solid $primary-color;
|
||||
color: $primary-color;
|
||||
font-size: $large-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,144 @@
|
||||
import UrlParamsHandler from "../../../utils/store";
|
||||
import { appversion, version } from "../../../env";
|
||||
import { request } from "../../../utils/request";
|
||||
const defaultAvatarUrl =
|
||||
"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
|
||||
// pages/live/registration/registration.ts
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
userInfo: {
|
||||
avatarUrl: wx.getStorageSync("avatarUrl") || defaultAvatarUrl,
|
||||
nickName: wx.getStorageSync("userName") || "未登录用户",
|
||||
},
|
||||
state: -1,
|
||||
info: "",
|
||||
content: "",
|
||||
},
|
||||
|
||||
async register(state: string) {
|
||||
const app = getApp<IAppOption>();
|
||||
const bool = await app.login("register");
|
||||
if (!bool) return;
|
||||
const params = {
|
||||
openId: wx.getStorageSync("openId"),
|
||||
state,
|
||||
};
|
||||
|
||||
return await request({
|
||||
options: {
|
||||
url: "/app/watch/register?version=" + version.register,
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
async registers(code: string) {
|
||||
const app = getApp<IAppOption>();
|
||||
const bool = await app.login("register");
|
||||
if (!bool) return;
|
||||
const params = {
|
||||
openId: wx.getStorageSync("openId"),
|
||||
code,
|
||||
};
|
||||
const data = await request({
|
||||
options: {
|
||||
url: `/app/video-watch/details?version=${version.details}&appVer=${appversion}`,
|
||||
method: "GET",
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data.watch.url) {
|
||||
this.setData({
|
||||
content: data.watch.content,
|
||||
state: -1,
|
||||
});
|
||||
} else {
|
||||
wx.redirectTo({
|
||||
url: `/pages/live/video/video?openId=${params.openId}&code=${params.code}&seeId=${data.watch.id}`,
|
||||
});
|
||||
}
|
||||
},
|
||||
async refresh() {
|
||||
const params = {
|
||||
openId: wx.getStorageSync("openId"),
|
||||
code: wx.getStorageSync("code"),
|
||||
};
|
||||
const res = await request({
|
||||
options: {
|
||||
url: "/app/video-watch/refresh",
|
||||
method: "GET",
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
if (res.pass)
|
||||
wx.redirectTo({
|
||||
url: `/pages/live/video/video?openId=${params.openId}&code=${params.code}`,
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
async onLoad(options: any) {
|
||||
new UrlParamsHandler(options);
|
||||
wx.hideShareMenu({
|
||||
menus: ["shareAppMessage"], // 单独禁用好友分享
|
||||
});
|
||||
if (options.code && !options.content) {
|
||||
this.registers(options.code);
|
||||
}
|
||||
if (options.state && typeof options.state != "number" && !options.content) {
|
||||
const res = await this.register(options.state);
|
||||
if (res.code == 200) {
|
||||
this.setData({
|
||||
state: res.data.state,
|
||||
info: res.data.info,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (options.content) {
|
||||
this.setData({
|
||||
content: options.content,
|
||||
state: options.state,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {},
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
<!--pages/live/registration/registration.wxml-->
|
||||
<navigation-bar title="会员认证" back="{{false}}" color="black" background="#FFF" />
|
||||
|
||||
<view class="page-result">
|
||||
<block wx:if="{{!content && state === -1}}"></block>
|
||||
<block wx:elif="{{state === 1}}">
|
||||
<view class="clock-icon">
|
||||
<image src="/assets/img/clock.svg" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="text-group">
|
||||
<text class="color-gray">审核中...</text>
|
||||
<text class="color-gray">恭喜您成功参与福利!</text>
|
||||
<text class="color-gray">请联系群主审核即可!</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{state === 2}}">
|
||||
<view class="success-container">
|
||||
<image class="success-icon" src="/assets/img/success.svg" mode="aspectFit" />
|
||||
<text class="color-green">认证已通过</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{state === 4}}">
|
||||
<image src="/assets/img/600.jpg" mode="widthFix" />
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{content}}">
|
||||
<view class="forbid-container" wx:if="{{state > 0}}">
|
||||
<image src="/assets/img/forbid.svg" mode="aspectFit" />
|
||||
<view style="white-space:pre-wrap">{{content}}</view>
|
||||
</view>
|
||||
<block wx:if="{{state < 0}}">
|
||||
<view class="userinfo" >
|
||||
<button class="choose-avatar">
|
||||
<image class="avatar" src="{{userInfo.avatarUrl}}" />
|
||||
</button>
|
||||
<view class="nickname">{{userInfo.nickName}}</view>
|
||||
<view class="refresh" bind:tap="refresh">刷新</view>
|
||||
</view>
|
||||
<view style="white-space:pre-wrap">{{content}}</view>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="forbid-container">
|
||||
<image src="/assets/img/forbid.svg" mode="aspectFit" />
|
||||
<text>暂无法访问该功能，如有疑问请联系客服</text>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<view class="info" wx:if="{{info}}">{{info}}</view>
|
||||
|
||||
</view>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"disableScroll": true,
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
@import "../../../variables";
|
||||
|
||||
/* pages/live/report/report.scss */
|
||||
|
||||
page {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.report-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 120rpx;
|
||||
padding-top: 30rpx;
|
||||
background: #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== Section Card ===== */
|
||||
.section-card {
|
||||
background: #fff;
|
||||
margin: 0 24rpx 16rpx;
|
||||
border-radius: $primary-border-radius;
|
||||
padding: 0 32rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
padding: 28rpx 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
padding: 32rpx 32rpx 24rpx;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== Step 1: Reason List ===== */
|
||||
.reason-list-scroll {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.reason-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reason-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.reason-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.reason-item:active {
|
||||
background: #fafafa;
|
||||
margin: 0 -32rpx;
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
|
||||
.reason-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.reason-arrow {
|
||||
width: 12rpx;
|
||||
height: 12rpx;
|
||||
border-top: 3rpx solid #b0b0b0;
|
||||
border-right: 3rpx solid #b0b0b0;
|
||||
transform: rotate(45deg);
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
/* ===== Target Info ===== */
|
||||
.target-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
|
||||
.target-avatar {
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 24rpx;
|
||||
flex-shrink: 0;
|
||||
background: #f0f0f0;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.target-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.target-name {
|
||||
font-size: 32rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.target-context {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
|
||||
/* ===== Selected Reason Row ===== */
|
||||
.selected-reason-row {
|
||||
padding: 28rpx 0;
|
||||
}
|
||||
|
||||
.selected-reason-text {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ===== Description ===== */
|
||||
.desc-wrap {
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.desc-textarea {
|
||||
width: 100%;
|
||||
min-height: 180rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx 0 12rpx;
|
||||
}
|
||||
|
||||
.desc-textarea::placeholder {
|
||||
color: #c8c8c8;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 24rpx;
|
||||
color: $gray-color;
|
||||
text-align: right;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
|
||||
/* ===== Image Upload ===== */
|
||||
.evidence-tip {
|
||||
font-size: 24rpx;
|
||||
color: $gray-color;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.upload-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.upload-cell {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 12rpx;
|
||||
margin-bottom: 12rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.upload-cell:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.upload-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.upload-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.upload-add {
|
||||
border: 2rpx dashed #d0d0d0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 72rpx;
|
||||
color: #d0d0d0;
|
||||
line-height: 1;
|
||||
background: #fafafa;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.upload-add:active {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
/* ===== Unified Card (投诉原因+补充描述+图片证据) ===== */
|
||||
.unified-card {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.unified-divider {
|
||||
height: 1rpx;
|
||||
background: #f0f0f0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ===== Agreement ===== */
|
||||
.agreement-section {
|
||||
padding: 28rpx 32rpx;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agreement-check-circle {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #d0d0d0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 14rpx;
|
||||
flex-shrink: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.agreement-check-circle.checked {
|
||||
background: #07c160;
|
||||
border-color: #07c160;
|
||||
}
|
||||
|
||||
.agreement-check-icon {
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.agreement-link {
|
||||
font-size: 24rpx;
|
||||
color: $primary-color-blue;
|
||||
}
|
||||
|
||||
/* ===== Bottom Submit Bar ===== */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 20rpx 32rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
background: #e0e0e0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.submit-btn:not([disabled]):active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* ===== Step 3: Success ===== */
|
||||
.success-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 200rpx 60rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.success-icon-wrap {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
background: #07c160;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.success-check {
|
||||
color: #fff;
|
||||
font-size: 60rpx;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.success-desc {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
margin-bottom: 72rpx;
|
||||
}
|
||||
|
||||
.success-btn {
|
||||
width: 400rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.success-btn:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import { appId } from "../../../env";
|
||||
import { request } from "../../../utils/request";
|
||||
|
||||
Page({
|
||||
data: {
|
||||
pageStep: 1 as number,
|
||||
targetAvatar: '',
|
||||
targetName: '',
|
||||
targetContext: '',
|
||||
reasons: [
|
||||
{ id: 1, label: '欺诈' },
|
||||
{ id: 2, label: '色情低俗' },
|
||||
{ id: 3, label: '诱导' },
|
||||
{ id: 4, label: '传播不实信息' },
|
||||
{ id: 5, label: '违法犯罪' },
|
||||
{ id: 6, label: '骚扰' },
|
||||
{ id: 7, label: '侵权（诽谤、抄袭）' },
|
||||
{ id: 8, label: '混淆他人投诉' },
|
||||
{ id: 9, label: '恶意营销' },
|
||||
{ id: 10, label: '与服务类目不符' },
|
||||
{ id: 11, label: '隐私信息收集' },
|
||||
{ id: 12, label: '广告体验' },
|
||||
{ id: 13, label: '其他' },
|
||||
],
|
||||
selectedReason: '',
|
||||
description: '',
|
||||
descriptionLen: 0 as number,
|
||||
imageList: [] as string[],
|
||||
isAgreed: true as boolean,
|
||||
canSubmit: false as boolean,
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
if (options?.targetName) {
|
||||
this.setData({
|
||||
targetName: decodeURIComponent(options.targetName),
|
||||
targetContext: options.targetContext || '',
|
||||
targetAvatar: options.targetAvatar || '',
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
onReasonTap(e: any) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const reason = this.data.reasons.find((r: any) => r.id === Number(id));
|
||||
if (reason) {
|
||||
this.setData({
|
||||
selectedReason: reason.label,
|
||||
pageStep: 2,
|
||||
isAgreed: true,
|
||||
});
|
||||
this.updateCanSubmit();
|
||||
}
|
||||
},
|
||||
|
||||
updateCanSubmit() {
|
||||
const d = this.data;
|
||||
this.setData({ canSubmit: !!d.selectedReason && !!d.description && d.isAgreed && d.imageList.length > 0 });
|
||||
},
|
||||
|
||||
onDescriptionInput(e: any) {
|
||||
this.setData({
|
||||
description: e.detail.value,
|
||||
descriptionLen: e.detail.value.length,
|
||||
});
|
||||
this.updateCanSubmit();
|
||||
},
|
||||
|
||||
onChooseImage() {
|
||||
wx.chooseMedia({
|
||||
count: 9 - this.data.imageList.length,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success: (res: any) => {
|
||||
const tempFiles = res.tempFiles || [];
|
||||
const newImages = tempFiles.map((f: any) => f.tempFilePath || f.path);
|
||||
this.setData({
|
||||
imageList: [...this.data.imageList, ...newImages],
|
||||
}, () => {
|
||||
this.updateCanSubmit();
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
onRemoveImage(e: any) {
|
||||
const { index } = e.currentTarget.dataset;
|
||||
const list = [...this.data.imageList];
|
||||
list.splice(index, 1);
|
||||
this.setData({ imageList: list }, () => {
|
||||
this.updateCanSubmit();
|
||||
});
|
||||
},
|
||||
|
||||
toggleAgree() {
|
||||
this.setData({ isAgreed: !this.data.isAgreed });
|
||||
this.updateCanSubmit();
|
||||
},
|
||||
|
||||
async handleSubmit() {
|
||||
if (!this.data.canSubmit) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.data.selectedReason) {
|
||||
wx.showToast({ title: '请选择投诉原因', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showLoading({ title: '提交中...' });
|
||||
|
||||
try {
|
||||
await request({
|
||||
options: {
|
||||
url: '/app/video-watch/feedback',
|
||||
method: 'POST',
|
||||
data: {
|
||||
seeId: wx.getStorageSync("seeId") || '',
|
||||
code: wx.getStorageSync("code") || '',
|
||||
openId: wx.getStorageSync("openId") || '',
|
||||
appId,
|
||||
type: this.data.selectedReason,
|
||||
description: this.data.description,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
wx.hideLoading();
|
||||
this.setData({ pageStep: 3 });
|
||||
} catch (err) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({ title: '提交失败，请重试', icon: 'none' });
|
||||
}
|
||||
},
|
||||
|
||||
handleClose() {
|
||||
wx.navigateBack();
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,113 @@
|
||||
<!-- pages/live/report/report.wxml -->
|
||||
<navigation-bar title="反馈与投诉" back="{{true}}" bind:handleBack="handleBack" color="black" background="#ffffff" />
|
||||
|
||||
<block wx:if="{{pageStep === 1}}">
|
||||
<scroll-view class="reason-list-scroll" scroll-y>
|
||||
<view class="report-page">
|
||||
<!-- 举报原因列表 -->
|
||||
<view class="section-header">请选择投诉原因</view>
|
||||
<view class="section-card">
|
||||
<view class="reason-list">
|
||||
<view
|
||||
wx:for="{{reasons}}"
|
||||
wx:key="id"
|
||||
class="reason-item"
|
||||
data-id="{{item.id}}"
|
||||
bind:tap="onReasonTap"
|
||||
>
|
||||
<text class="reason-label">{{item.label}}</text>
|
||||
<view class="reason-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
|
||||
<block wx:elif="{{pageStep === 2}}">
|
||||
<view class="report-page">
|
||||
<!-- 举报对象 - 小程序头像和名称 -->
|
||||
<view class="section-card">
|
||||
<view class="target-row">
|
||||
<image class="target-avatar" src="{{'/assets/img/wchat.svg'}}" mode="aspectFill" />
|
||||
<view class="target-info">
|
||||
<text class="target-name">小程序</text>
|
||||
<text class="target-context" wx:if="{{targetContext}}">{{targetContext}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 投诉内容卡片（合并：投诉原因、补充描述、图片证据） -->
|
||||
<view class="section-card unified-card">
|
||||
<!-- 已选原因 - 直接展示，不可修改 -->
|
||||
<view class="selected-reason-row">
|
||||
<text class="selected-reason-text">{{selectedReason}}</text>
|
||||
</view>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<view class="unified-divider"></view>
|
||||
|
||||
<!-- 补充描述 -->
|
||||
<view class="desc-wrap">
|
||||
<textarea
|
||||
class="desc-textarea"
|
||||
placeholder="请详细描述投诉内容，包括时间、地点、涉及人员等信息..."
|
||||
maxlength="500"
|
||||
value="{{description}}"
|
||||
bindinput="onDescriptionInput"
|
||||
auto-height
|
||||
/>
|
||||
<view class="char-count">{{descriptionLen}}/500</view>
|
||||
</view>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<view class="unified-divider"></view>
|
||||
|
||||
<!-- 图片证据 -->
|
||||
<view class="section-title">
|
||||
<text>图片证据</text>
|
||||
<text class="evidence-tip">（最多9张，选填）</text>
|
||||
</view>
|
||||
<view class="upload-grid">
|
||||
<view
|
||||
wx:for="{{imageList}}"
|
||||
wx:key="index"
|
||||
class="upload-cell"
|
||||
>
|
||||
<image class="upload-img" src="{{item}}" mode="aspectFill" />
|
||||
<view class="upload-close" data-index="{{index}}" bind:tap="onRemoveImage">✕</view>
|
||||
</view>
|
||||
<view class="upload-cell upload-add" wx:if="{{imageList.length < 9}}" bind:tap="onChooseImage">+</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 投诉须知 - 无背景，圆形选中，默认选中 -->
|
||||
<view class="agreement-section">
|
||||
<view class="agreement-row" bind:tap="toggleAgree">
|
||||
<view class="agreement-check-circle {{isAgreed ? 'checked' : ''}}">
|
||||
<text wx:if="{{isAgreed}}" class="agreement-check-icon">✓</text>
|
||||
</view>
|
||||
<text class="agreement-text">我已阅读并同意</text>
|
||||
<text class="agreement-link">《投诉须知》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部提交按钮 -->
|
||||
<view class="bottom-bar">
|
||||
<button class="submit-btn" bind:tap="handleSubmit" disabled="{{!canSubmit}}">提交</button>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block wx:else>
|
||||
<view class="report-page">
|
||||
<view class="success-content">
|
||||
<view class="success-icon-wrap">
|
||||
<text class="success-check">✓</text>
|
||||
</view>
|
||||
<text class="success-title">提交成功</text>
|
||||
<text class="success-desc">我们将在24小时内处理您的投诉，请耐心等待</text>
|
||||
<button class="success-btn" bind:tap="handleClose">我知道了</button>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"backgroundTextStyle": "light",
|
||||
"backgroundColor": "#ffffff",
|
||||
"navigationBarShareAppMessage": false,
|
||||
"navigationBarShareTimeline": false,
|
||||
"usingComponents": {
|
||||
"liveroom": "/components/liveroom/liveroom"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/* pages/live/room/room.wxss */
|
||||
@import "../../../variables";
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
// pages/live/room/room.ts
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
joinedGroupId: "", // 已加入的消息组id
|
||||
windowHeight: "100%",
|
||||
windowWidth: "100%",
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
async onLoad(options) {
|
||||
const app = getApp<IAppOption>();
|
||||
wx.setStorageSync("joinedGroupId", options.groupId);
|
||||
|
||||
|
||||
const bool = await app.login("room");
|
||||
if (!bool) return;
|
||||
this.setData({
|
||||
joinedGroupId: options.groupId,
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() {},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() {},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() {},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
const groupId = this.data.joinedGroupId || wx.getStorageSync("joinedGroupId");
|
||||
const path = groupId
|
||||
? `/pages/live/room/room?groupId=${groupId}`
|
||||
: "/pages/live/room/room";
|
||||
|
||||
return {
|
||||
/*
|
||||
title: "邀请你进入直播间",
|
||||
*/
|
||||
title: "邀请你进入直播间",
|
||||
path,
|
||||
imageUrl: "/assets/img/600.jpg",
|
||||
};
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
<!--pages/live/room/room.wxml-->
|
||||
<view style="width: {{windowWidth}}; height: {{windowHeight}};">
|
||||
<liveroom joined-group-id="{{joinedGroupId}}" />
|
||||
</view>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744786271399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4083" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M816.49 909H211.21c-1.1 0-2-0.9-2-2v-68.18c0-1.1 0.9-2 2-2h605.28c1.1 0 2 0.9 2 2V907c0 1.1-0.9 2-2 2z" fill="#FFF" p-id="4084"></path><path d="M910.24 316.23c-27.11 0-49.1 22.52-49.1 50.31 0 7.28 1.58 14.16 4.3 20.4l-176.13 80.21-147.2-258.57c14.56-8.73 24.46-24.74 24.46-43.28 0-27.79-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 17.99 9.29 33.66 23.15 42.55l-158.16 259.3-176.13-80.21c2.71-6.25 4.3-13.12 4.3-20.4 0-27.78-21.98-50.31-49.1-50.31s-49.1 22.52-49.1 50.31c0 27.78 21.98 50.31 49.1 50.31 3.99 0 7.82-0.62 11.53-1.54l86.65 366.28h601.43l86.65-366.28c3.71 0.92 7.54 1.54 11.53 1.54 27.12 0 49.1-22.52 49.1-50.31 0.01-27.78-21.97-50.31-49.08-50.31z" fill="#FFF" p-id="4085"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"backgroundTextStyle": "light",
|
||||
"backgroundColor": "#ffffff",
|
||||
"navigationBarShareAppMessage": false,
|
||||
"navigationBarShareTimeline": false,
|
||||
"disableScroll": true,
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"my-video":"/components/my-video/my-video",
|
||||
"van-tab": "@vant/weapp/tab/index",
|
||||
"van-tabs": "@vant/weapp/tabs/index",
|
||||
"my-quiz":"/components/my-quiz/my-quiz"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
/* pages/video/video.wxss */
|
||||
@import "../../../variables";
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scrollarea {
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.tabs {
|
||||
flex:1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.scrollarea-inner {
|
||||
height: 50vh;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
rich-text {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-container {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* 提交按钮样式 */
|
||||
.btn {
|
||||
width: 80%;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
background: #ff4d4f;
|
||||
color: white;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
background: #ff7875;
|
||||
}
|
||||
.scrollarea-inner-text{
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
rich-content image {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
rich-content img {
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.error{
|
||||
white-space: nowrap;
|
||||
background: #FF4D4F;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 24rpx;
|
||||
border-radius: 20rpx;
|
||||
line-height: 1.5;
|
||||
box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
&::before {
|
||||
content: '⚠';
|
||||
margin-right: 4rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.history{
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
top: 110rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 12rpx;
|
||||
border-radius: 48rpx 0rpx 0rpx 48rpx;
|
||||
box-sizing: border-box;
|
||||
.icon{
|
||||
width: 100rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,381 @@
|
||||
// pages/video/video.ts
|
||||
|
||||
import UrlParamsHandler from "../../../utils/store";
|
||||
import { htmlToWxNodes } from "../../../utils/html-to-wx-nodes";
|
||||
import { request } from "../../../utils/request";
|
||||
import { version, appversion, appId } from "../../../env";
|
||||
import { receiveRedPacket } from "../../../utils/util";
|
||||
|
||||
const isMobileEnvironment = (): boolean => {
|
||||
const platform = wx.getSystemInfoSync().platform?.toLowerCase() || '';
|
||||
return platform !== 'windows' && platform !== 'mac';
|
||||
};
|
||||
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
dataList: {},
|
||||
nodes: [] as any[],
|
||||
eveId: null,
|
||||
store: {},
|
||||
|
||||
active: 0,
|
||||
canSubmit: false,
|
||||
safeBottom: 0,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
async onLoad(options: any) {
|
||||
const app = getApp<IAppOption>();
|
||||
wx.hideShareMenu({
|
||||
menus: ["shareAppMessage"], // 单独禁用好友分享
|
||||
});
|
||||
new UrlParamsHandler(options);
|
||||
app.globalData.store = options;
|
||||
let safeBottom = 0;
|
||||
//@ts-ignore
|
||||
if (wx.getWindowInfo) {
|
||||
//@ts-ignore
|
||||
const systemInfo = wx.getWindowInfo();
|
||||
safeBottom =
|
||||
Math.abs(systemInfo.windowHeight - systemInfo.safeArea.bottom) + 10;
|
||||
if (safeBottom === 0) safeBottom = 24;
|
||||
} else {
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
safeBottom = systemInfo.safeArea
|
||||
? Math.abs(systemInfo.windowHeight - systemInfo.safeArea.bottom) + 10
|
||||
: 24;
|
||||
}
|
||||
this.setData({
|
||||
safeBottom: safeBottom,
|
||||
store: options,
|
||||
});
|
||||
|
||||
if (!isMobileEnvironment()) {
|
||||
this.handleEnterError(
|
||||
"当前环境不支持观看，请使用手机观看。",
|
||||
"环境不支持",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const bool = await app.login("video");
|
||||
if (!bool) return;
|
||||
|
||||
// 在需要保护的页面调用
|
||||
//@ts-ignore
|
||||
wx.setVisualEffectOnCapture({
|
||||
visualEffect: 'hidden', // 录屏或截图时隐藏内容
|
||||
success: function () {
|
||||
console.log('防截屏录屏保护已开启');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady() { },
|
||||
handleEnterError(message: string, title = "无法进入") {
|
||||
wx.showModal({
|
||||
title: title,
|
||||
content: message,
|
||||
showCancel: false,
|
||||
confirmText: "确定",
|
||||
});
|
||||
},
|
||||
|
||||
handleBack() {
|
||||
wx.switchTab({
|
||||
url: "/pages/tab-bar/course/course",
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow() {
|
||||
this.search();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide() { },
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload() { },
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh() { },
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom() { },
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() { },
|
||||
|
||||
onChange(e: any) {
|
||||
this.setData({
|
||||
active: event.detail.index,
|
||||
});
|
||||
},
|
||||
|
||||
// 监听答题变化
|
||||
onAnswerChange() {
|
||||
this.updateProgress();
|
||||
},
|
||||
|
||||
async search() {
|
||||
const app = getApp<IAppOption>();
|
||||
const bool = await app.checkLoginState();
|
||||
if (!bool) return;
|
||||
const code = wx.getStorageSync("code");
|
||||
const params = {
|
||||
openId: wx.getStorageSync("openId"),
|
||||
...app.globalData.store,
|
||||
};
|
||||
if (code) {
|
||||
const data = await request({
|
||||
options: {
|
||||
url: `/app/video-watch/details?version=${version.details}&appVer=${appversion}`,
|
||||
method: "GET",
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data.watch.url) {
|
||||
wx.reLaunch({
|
||||
url: `/pages/live/registration/registration?content=${data.watch.content}&state=${-1}`,
|
||||
});
|
||||
}
|
||||
const nodes = htmlToWxNodes(data.watch.content);
|
||||
this.setData({
|
||||
dataList: data.watch,
|
||||
eveId: data.watch.eveId,
|
||||
nodes,
|
||||
});
|
||||
} else {
|
||||
const data = await request({
|
||||
options: {
|
||||
url: `/app/watch/details?version=${version.details}&appVer=${appversion}`,
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data.data.url) {
|
||||
wx.reLaunch({
|
||||
url: `/pages/live/registration/registration?content=${data.data.content
|
||||
}&state=${5}`,
|
||||
});
|
||||
}
|
||||
const nodes = htmlToWxNodes(data.data.content);
|
||||
this.setData({
|
||||
dataList: data.data,
|
||||
eveId: data.data.eveId,
|
||||
nodes,
|
||||
});
|
||||
}
|
||||
|
||||
this.selectComponent("#tabs").resize();
|
||||
},
|
||||
// 更新答题进度
|
||||
updateProgress() {
|
||||
const quizComponent = this.selectComponent("#quizComponent");
|
||||
if (quizComponent) {
|
||||
const canSubmit = quizComponent.isAllAnswered();
|
||||
this.setData({
|
||||
canSubmit: canSubmit,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
handleSubmit(this) {
|
||||
const ended = wx.getStorageSync("ended") || false;
|
||||
if (!ended) {
|
||||
wx.showModal({
|
||||
title: "请先观看视频，再答题",
|
||||
showCancel: false,
|
||||
confirmText: "确定",
|
||||
confirmColor: "#FF0000",
|
||||
});
|
||||
return;
|
||||
}
|
||||
//@ts-ignore
|
||||
if (this.data.dataList?.userAnsNum >= this.data.dataList?.answerMax) {
|
||||
wx.showToast({
|
||||
title: "答题次数已用完",
|
||||
icon: "none",
|
||||
duration: 6000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const quizComponent = this.selectComponent("#quizComponent");
|
||||
|
||||
if (!quizComponent) {
|
||||
wx.showToast({
|
||||
title: "组件加载失败",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const isAllAnswered = quizComponent.isAllAnswered();
|
||||
if (!isAllAnswered) {
|
||||
const progress = quizComponent.getProgress();
|
||||
wx.showModal({
|
||||
title: "答题未完成",
|
||||
content: `您已完成 ${progress.answered}/${progress.total} 题，请完成所有题目后再提交。`,
|
||||
showCancel: false,
|
||||
confirmText: "继续答题",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const answers = quizComponent.getAllAnswers();
|
||||
if (!answers || answers.length === 0) {
|
||||
wx.showToast({
|
||||
title: "请先完成答题",
|
||||
icon: "none",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
wx.showModal({
|
||||
title: "确认提交",
|
||||
content: `您已完成 ${answers.length} 道题目，确定要提交答案吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.submitAnswers(answers);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
async submitAnswers(answers: any[]) {
|
||||
const code = wx.getStorageSync("code");
|
||||
const params = {
|
||||
answers,
|
||||
openId: wx.getStorageSync("openId"),
|
||||
eveId: this.data.eveId,
|
||||
...this.data.store,
|
||||
};
|
||||
wx.showLoading({
|
||||
title: "提交中...",
|
||||
});
|
||||
let res = null;
|
||||
|
||||
if (code) {
|
||||
res = await request({
|
||||
options: {
|
||||
url: "/app/video-watch/interactive?version=" + version.interactive,
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
res = await request({
|
||||
options: {
|
||||
url: "/app/watch/interactive?version=" + version.interactive,
|
||||
data: params,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (res.code !== 200) {
|
||||
wx.showToast({
|
||||
title: res.msg || "提交失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const { pass, redId } = res.data;
|
||||
if (redId) {
|
||||
wx.showModal({
|
||||
content: "🎉 领取红包！",
|
||||
showCancel: false,
|
||||
confirmText: "立即领取",
|
||||
confirmColor: "#FF0000",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.handleReceive(redId);
|
||||
}
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (pass) {
|
||||
|
||||
wx.showModal({
|
||||
content: "🎉 恭喜您获得红包！",
|
||||
showCancel: false,
|
||||
confirmText: "确定",
|
||||
confirmColor: "#FF0000",
|
||||
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: "回答错误,您与红包擦肩而过",
|
||||
icon: "none",
|
||||
duration: 6000,
|
||||
});
|
||||
}
|
||||
},
|
||||
async handleReceive(e: any) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
const { code } = this.data.store as Record<string, any>;
|
||||
const params = {
|
||||
appId,
|
||||
code,
|
||||
openId: wx.getStorageSync("openId"),
|
||||
redId: id,
|
||||
}
|
||||
try {
|
||||
await receiveRedPacket(
|
||||
params,
|
||||
'/app/general/receive-red',
|
||||
appId
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('领取红包失败:', err);
|
||||
}
|
||||
},
|
||||
handleCustomReport() {
|
||||
const { code, state, seeId } = this.data.store as Record<string, any>;
|
||||
const params: Record<string, string> = {};
|
||||
if (code) params.code = code;
|
||||
if (state) params.state = state;
|
||||
if (seeId) params.seeId = seeId;
|
||||
const query = Object.entries(params)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
|
||||
.join("&");
|
||||
wx.navigateTo({
|
||||
url: `/pages/live/report/report${query ? `?${query}` : ""}`,
|
||||
});
|
||||
},
|
||||
handleViewHitory() {
|
||||
const { code, state, seeId } = this.data.store as Record<string, any>;
|
||||
const params: Record<string, string> = {};
|
||||
if (code) params.code = code;
|
||||
if (state) params.state = state;
|
||||
if (seeId) params.seeId = seeId;
|
||||
const query = Object.entries(params)
|
||||
.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
|
||||
.join("&");
|
||||
wx.navigateTo({
|
||||
url: `/pages/live/red-history/red-history${query ? `?${query}` : ""}`,
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
<!--pages/video/video.wxml-->
|
||||
<navigation-bar title="" back="{{true}}" bind:handleBack="handleBack" color="black" background="#FFF" />
|
||||
|
||||
<view style="display: flex; align-items: center; justify-content: space-between; padding: 0 20rpx; height: 80rpx; background: #FFF7E6;">
|
||||
<view style="font-size: 22rpx; color: #999;">本视频仅用于科普，无任何恶意引导行为</view>
|
||||
<view style="display: flex; align-items: center; gap: 16rpx;">
|
||||
<!-- <button open-type="feedback" class="error">微信举报</button> -->
|
||||
<view class="error" bind:tap="handleCustomReport">举报</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="scrollarea" scroll-y type="list">
|
||||
<my-video src="{{dataList.url}}" backgroundUrl="{{dataList.background}}"></my-video>
|
||||
|
||||
<block wx:if="{{dataList.tipUrl}}">
|
||||
<image alt="提示" mode="widthFix" src="{{dataList.tipUrl}}" style="width: 100%" />
|
||||
</block>
|
||||
|
||||
<van-tabs active="{{ active }}" bind:change="onChange" animated class="tabs" id="tabs">
|
||||
<van-tab wx:if="{{dataList.questions.length != 0}}" title="答题">
|
||||
<!-- 答题有多选单选 -->
|
||||
<form bindsubmit="handleSubmit" form-id="quizForm">
|
||||
<my-quiz id="quizComponent" questions="{{dataList.questions}}" answerList="{{dataList.answerList}}" bind:change="onAnswerChange" />
|
||||
<button wx:if="{{active === 0}}" class="btn" form-type="submit" style="bottom:{{safeBottom===0?24:safeBottom}}rpx">
|
||||
{{canSubmit ? '提交答案领取红包' : '请观看完视频再前往答题'}}
|
||||
</button>
|
||||
</form>
|
||||
</van-tab>
|
||||
<van-tab title="介绍{{dataList.cusId ? '(' + dataList.cusId + ')' : ''}}">
|
||||
<scroll-view class="scrollarea-inner" scroll-y type="list">
|
||||
<view class="scrollarea-inner-text">
|
||||
<rich-text nodes="{{nodes}}"></rich-text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</van-tab>
|
||||
<view class="history" bind:tap="handleViewHitory">
|
||||
<image class="icon" src="./assets/1.png" />
|
||||
</view>
|
||||
</van-tabs>
|
||||
</scroll-view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"backgroundColor": "#081120",
|
||||
"disableScroll": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
page {
|
||||
height: 100%;
|
||||
background: #081120;
|
||||
}
|
||||
|
||||
.wxroom-redirect {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 28rpx;
|
||||
color: #f4f8ff;
|
||||
background:
|
||||
radial-gradient(circle at 18% 12%, rgba(83, 214, 255, 0.14), transparent 28%),
|
||||
linear-gradient(180deg, #0d1b31 0%, #09121f 52%, #050b15 100%);
|
||||
}
|
||||
|
||||
.wxroom-redirect__spinner {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #71c1ff;
|
||||
animation: wxroom-redirect-spin 0.9s linear infinite;
|
||||
}
|
||||
|
||||
.wxroom-redirect__text {
|
||||
font-size: 30rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@keyframes wxroom-redirect-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// pages/live/wxroom/index.ts
|
||||
Page({
|
||||
onLoad(options: Record<string, string | undefined>) {
|
||||
const query = Object.entries(options || {})
|
||||
.filter(([, value]) => value !== undefined && value !== "")
|
||||
.map(
|
||||
([key, value]) =>
|
||||
`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`,
|
||||
)
|
||||
.join("&");
|
||||
|
||||
const target = query
|
||||
? `/package-live/wxroom/index?${query}`
|
||||
: "/package-live/wxroom/index";
|
||||
|
||||
wx.redirectTo({
|
||||
url: target,
|
||||
fail: () => {
|
||||
wx.showToast({
|
||||
title: "进入直播间失败",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
<view class="wxroom-redirect">
|
||||
<view class="wxroom-redirect__spinner"></view>
|
||||
<text class="wxroom-redirect__text">正在进入直播间...</text>
|
||||
</view>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.934 19.9344H19.934V4.73438H8.33398V8.73438" stroke="#FE8D29" stroke-width="0.8" stroke-linejoin="round"/>
|
||||
<path d="M4.7334 8.73047H11.9334V19.9305H4.7334V8.73047Z" fill="#FE8D29" stroke="#FE8D29" stroke-width="0.8" stroke-linejoin="round"/>
|
||||
<path d="M7.93359 17.5312H8.73359" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.9336 17.5312H14.7336" stroke="#FE8D29" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 595 B |
@@ -0,0 +1,12 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5324 11.0853C17.4708 7.60394 14.6294 4.80078 11.1334 4.80078C7.59876 4.80078 4.7334 7.66614 4.7334 11.2008C4.7334 12.8688 5.37152 14.3878 6.41697 15.5269L5.93757 18.4111L8.7834 17.1887C10.0373 17.6057 11.2206 17.7099 12.3334 17.5014" fill="white"/>
|
||||
<path d="M17.5324 11.0853C17.4708 7.60394 14.6294 4.80078 11.1334 4.80078C7.59876 4.80078 4.7334 7.66614 4.7334 11.2008C4.7334 12.8688 5.37152 14.3878 6.41697 15.5269L5.93757 18.4111L8.7834 17.1887C10.0373 17.6057 11.2206 17.7099 12.3334 17.5014" stroke="white" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.78281 10.5868C9.27985 10.5868 9.68281 10.1809 9.68281 9.68012C9.68281 9.1794 9.27985 8.77344 8.78281 8.77344C8.28577 8.77344 7.88281 9.1794 7.88281 9.68012C7.88281 10.1809 8.28577 10.5868 8.78281 10.5868Z" fill="#FE8D29"/>
|
||||
<path d="M12.3834 10.5868C12.8804 10.5868 13.2834 10.1809 13.2834 9.68012C13.2834 9.1794 12.8804 8.77344 12.3834 8.77344C11.8864 8.77344 11.4834 9.1794 11.4834 9.68012C11.4834 10.1809 11.8864 10.5868 12.3834 10.5868Z" fill="#FE8D29"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2379 18.3725C17.5386 18.8929 16.6719 19.2008 15.7332 19.2008C13.4136 19.2008 11.5332 17.3204 11.5332 15.0008C11.5332 12.6812 13.4136 10.8008 15.7332 10.8008C18.0528 10.8008 19.9332 12.6812 19.9332 15.0008C19.9332 15.6407 19.7901 16.2471 19.5342 16.7899" fill="white"/>
|
||||
<path d="M18.2379 18.3725C17.5386 18.8929 16.6719 19.2008 15.7332 19.2008C13.4136 19.2008 11.5332 17.3204 11.5332 15.0008C11.5332 12.6812 13.4136 10.8008 15.7332 10.8008C18.0528 10.8008 19.9332 12.6812 19.9332 15.0008C19.9332 15.6407 19.7901 16.2471 19.5342 16.7899" stroke="#FE8D29" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5345 16.7891L19.9336 19.1999L18.2383 18.3717" fill="white"/>
|
||||
<path d="M19.5345 16.7891L19.9336 19.1999L18.2383 18.3717" stroke="#FE8D29" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17.008 14.7194C16.6352 14.7194 16.333 14.4149 16.333 14.0394C16.333 13.6638 16.6352 13.3594 17.008 13.3594C17.3808 13.3594 17.683 13.6638 17.683 14.0394C17.683 14.4149 17.3808 14.7194 17.008 14.7194Z" fill="#FE8D29"/>
|
||||
<path d="M14.3078 14.7194C13.935 14.7194 13.6328 14.4149 13.6328 14.0394C13.6328 13.6638 13.935 13.3594 14.3078 13.3594C14.6806 13.3594 14.9828 13.6638 14.9828 14.0394C14.9828 14.4149 14.6806 14.7194 14.3078 14.7194Z" fill="#FE8D29"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,10 @@
|
||||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="18" cy="20" r="10" fill="white"/>
|
||||
<circle cx="31" cy="18" r="8" fill="white" fill-opacity="0.88"/>
|
||||
<circle cx="15" cy="18" r="1.8" fill="#FE8D29"/>
|
||||
<circle cx="21" cy="18" r="1.8" fill="#FE8D29"/>
|
||||
<circle cx="28" cy="17" r="1.5" fill="#FE8D29"/>
|
||||
<circle cx="33" cy="17" r="1.5" fill="#FE8D29"/>
|
||||
<path d="M12 28L16.8 24.8L18.7 31.2L12 28Z" fill="white"/>
|
||||
<path d="M27.4 28L30.8 25.8L32.1 30L27.4 28Z" fill="white" fill-opacity="0.88"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 566 B |
Vendored
+34
@@ -0,0 +1,34 @@
|
||||
export type LoginRes = {
|
||||
data: {
|
||||
code?: number;
|
||||
avatarUrl:string;
|
||||
msg?: string,
|
||||
appId: string,
|
||||
id: number,
|
||||
mpId: number,
|
||||
openId: number,
|
||||
mpUserId: number,
|
||||
statusCode: string,
|
||||
unionId: string,
|
||||
nickName:string
|
||||
},
|
||||
statusCode: number,
|
||||
msg: string
|
||||
}
|
||||
|
||||
export type userInfoRes = {
|
||||
openId: string,
|
||||
mbuId: number,
|
||||
nickName: string,
|
||||
gender: number,
|
||||
city: string,
|
||||
province: string,
|
||||
country: string,
|
||||
avatarUrl: string,
|
||||
unionId: string,
|
||||
watermark: {
|
||||
appid: string,
|
||||
timestamp: string
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar",
|
||||
"popup": "/components/popup/popup"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
@import "../../variables";
|
||||
|
||||
.loginContainer {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.contentWrap {
|
||||
flex: 1;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.heroPanel {
|
||||
position: relative;
|
||||
height: 1332rpx;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.heroImage {
|
||||
position: absolute;
|
||||
// top: 68rpx;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 750rpx;
|
||||
}
|
||||
|
||||
.actionPanel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 626rpx;
|
||||
margin: -300rpx auto 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 48rpx;
|
||||
// padding-bottom: 72rpx;
|
||||
}
|
||||
|
||||
.actionPanelSingle {
|
||||
margin-top: -700rpx;
|
||||
}
|
||||
|
||||
.loginButton {
|
||||
box-sizing: border-box;
|
||||
width: 626rpx;
|
||||
height: 92rpx;
|
||||
padding: 0 32rpx;
|
||||
border-radius: 76rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wechatLogin {
|
||||
background: #fe8d29;
|
||||
box-shadow: 0 20rpx 40rpx rgba(254, 141, 41, 0.24);
|
||||
}
|
||||
|
||||
.phoneLogin {
|
||||
background: #fff1d6;
|
||||
}
|
||||
|
||||
.loginIcon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 8rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.phoneIcon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.loginLabel {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 44rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phoneLabel {
|
||||
color: #fe8d29;
|
||||
}
|
||||
|
||||
.privacyFooter {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-top: 24rpx;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
z-index: 3;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.checkboxLabel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.radioTrigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.radioTrigger radio {
|
||||
transform: scale(0.7);
|
||||
// transform-origin: left center;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.privacyText {
|
||||
line-height: 34rpx;
|
||||
}
|
||||
|
||||
.linkText {
|
||||
color: #fe8d29;
|
||||
line-height: 34rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
@@ -0,0 +1,488 @@
|
||||
import { appId, BASE_URL } from "../../env";
|
||||
import { LoginRes } from "./login.d";
|
||||
import { wxLogin, wxRequest } from "../../utils/wx-api";
|
||||
|
||||
const app = getApp<IAppOption>();
|
||||
const defaultAvatarUrl =
|
||||
"https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
|
||||
|
||||
type LoginDisplayConfig = {
|
||||
showLoginImage: boolean;
|
||||
};
|
||||
|
||||
type PartialLoginDisplayConfig = Partial<LoginDisplayConfig>;
|
||||
|
||||
const loginConfigKeys = [
|
||||
"login",
|
||||
"loginConfig",
|
||||
"loginPage",
|
||||
"auth",
|
||||
"authConfig",
|
||||
"authPage",
|
||||
];
|
||||
const WXROOM_REDIRECT_PATH_KEY = "wxroomRedirectPath";
|
||||
|
||||
function isPlainObject(value: unknown): value is Record<string, any> {
|
||||
return Object.prototype.toString.call(value) === "[object Object]";
|
||||
}
|
||||
|
||||
function hasOwnValue(source: Record<string, any>, keys: string[]) {
|
||||
return keys.some((key) => source[key] !== undefined && source[key] !== null);
|
||||
}
|
||||
|
||||
function normalizeString(value: unknown) {
|
||||
return typeof value === "string" ? value.trim() : "";
|
||||
}
|
||||
|
||||
function normalizeBoolean(value: unknown) {
|
||||
if (typeof value === "boolean") return value;
|
||||
if (typeof value === "number") return value > 0;
|
||||
if (typeof value !== "string") return undefined;
|
||||
|
||||
const normalized = value.trim().toLowerCase();
|
||||
if (["1", "true", "yes", "show", "visible", "enabled"].includes(normalized)) {
|
||||
return true;
|
||||
}
|
||||
if (["0", "false", "no", "hide", "hidden", "disabled"].includes(normalized)) {
|
||||
return false;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function normalizeSwitchValue(value: unknown) {
|
||||
const normalized = normalizeBoolean(value);
|
||||
if (normalized !== undefined) return normalized;
|
||||
if (typeof value === "string") return value.trim().length > 0;
|
||||
if (Array.isArray(value)) return value.length > 0;
|
||||
if (isPlainObject(value)) {
|
||||
const innerToggle = getBooleanValue(value, ["show", "visible", "enabled", "value"]);
|
||||
if (innerToggle !== undefined) return innerToggle;
|
||||
return !!getStringValue(value, [
|
||||
"url",
|
||||
"src",
|
||||
"image",
|
||||
"imageUrl",
|
||||
"background",
|
||||
"backgroundImage",
|
||||
]);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getObjectValue(source: Record<string, any>, keys: string[]) {
|
||||
for (const key of keys) {
|
||||
const value = source[key];
|
||||
if (value !== undefined && value !== null && value !== "") {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function getStringValue(source: Record<string, any>, keys: string[]):string {
|
||||
const value = getObjectValue(source, keys);
|
||||
if (value === undefined) return "";
|
||||
|
||||
if (isPlainObject(value)) {
|
||||
return getStringValue(value, [
|
||||
"url",
|
||||
"src",
|
||||
"image",
|
||||
"imageUrl",
|
||||
"background",
|
||||
"backgroundImage",
|
||||
]);
|
||||
}
|
||||
|
||||
return normalizeString(value);
|
||||
}
|
||||
|
||||
function getBooleanValue(source: Record<string, any>, keys: string[]) {
|
||||
const value = getObjectValue(source, keys);
|
||||
return normalizeBoolean(value);
|
||||
}
|
||||
|
||||
function pushConfigCandidate(list: Record<string, any>[], value: unknown) {
|
||||
if (isPlainObject(value)) {
|
||||
list.push(value);
|
||||
}
|
||||
}
|
||||
|
||||
function collectLoginConfigCandidates(template: unknown) {
|
||||
const candidates: Record<string, any>[] = [];
|
||||
if (!isPlainObject(template)) return candidates;
|
||||
|
||||
if (
|
||||
hasOwnValue(template, [
|
||||
"showLoginImage",
|
||||
"showLoginBackground",
|
||||
"showBackgroundImage",
|
||||
"showImage",
|
||||
"imageSwitch",
|
||||
"backgroundSwitch",
|
||||
"loginImage",
|
||||
"heroImage",
|
||||
"loginBg",
|
||||
"loginBackground",
|
||||
"backgroundImage",
|
||||
"backgroundUrl",
|
||||
"background",
|
||||
"image",
|
||||
])
|
||||
) {
|
||||
candidates.push(template);
|
||||
}
|
||||
|
||||
loginConfigKeys.forEach((key) => {
|
||||
pushConfigCandidate(candidates, template[key]);
|
||||
pushConfigCandidate(candidates, template.pageConfig?.[key]);
|
||||
pushConfigCandidate(candidates, template.pages?.[key]);
|
||||
pushConfigCandidate(candidates, template.property?.[key]);
|
||||
});
|
||||
|
||||
if (Array.isArray(template.pages?.login)) {
|
||||
template.pages.login.forEach((item: any) => {
|
||||
pushConfigCandidate(candidates, item);
|
||||
pushConfigCandidate(candidates, item?.props);
|
||||
});
|
||||
}
|
||||
|
||||
Object.entries(template).forEach(([key, value]) => {
|
||||
if (!/login|auth/i.test(key)) return;
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach((item) => {
|
||||
if (!isPlainObject(item)) return;
|
||||
pushConfigCandidate(candidates, item);
|
||||
pushConfigCandidate(candidates, item.props);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
pushConfigCandidate(candidates, value);
|
||||
});
|
||||
|
||||
return candidates;
|
||||
}
|
||||
|
||||
function readLoginImageSwitch(source: Record<string, any>) {
|
||||
const imageValue = getObjectValue(source, [
|
||||
"showLoginImage",
|
||||
"showLoginBackground",
|
||||
"showBackgroundImage",
|
||||
"showImage",
|
||||
"imageSwitch",
|
||||
"backgroundSwitch",
|
||||
"loginImage",
|
||||
"heroImage",
|
||||
"loginBackground",
|
||||
"loginBg",
|
||||
"backgroundImage",
|
||||
"backgroundUrl",
|
||||
"background",
|
||||
"image",
|
||||
"imageUrl",
|
||||
]);
|
||||
|
||||
return normalizeSwitchValue(imageValue);
|
||||
}
|
||||
|
||||
function resolveLoginDisplayConfigFromSource(source: unknown): PartialLoginDisplayConfig {
|
||||
if (!isPlainObject(source)) return {};
|
||||
|
||||
const showLoginImage = readLoginImageSwitch(source);
|
||||
|
||||
return {
|
||||
...(showLoginImage !== undefined ? { showLoginImage } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
function mergeLoginDisplayConfig(
|
||||
current: PartialLoginDisplayConfig,
|
||||
next: PartialLoginDisplayConfig
|
||||
) {
|
||||
return {
|
||||
...current,
|
||||
...(next.showLoginImage !== undefined ? { showLoginImage: next.showLoginImage } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
back: "",
|
||||
agree: false,
|
||||
nickFocus: true,
|
||||
showPopup: false,
|
||||
safeBottom: app.globalData.safeBottom,
|
||||
showLoginImage: false,
|
||||
userInfo: {
|
||||
avatarUrl: defaultAvatarUrl,
|
||||
nickName: "微信用户",
|
||||
},
|
||||
},
|
||||
|
||||
applyLoginDisplayConfig(options: Record<string, any> = {}) {
|
||||
const template = app.globalData.template as Record<string, any> | null;
|
||||
const config = collectLoginConfigCandidates(template).reduce(
|
||||
(result, item) =>
|
||||
mergeLoginDisplayConfig(result, resolveLoginDisplayConfigFromSource(item)),
|
||||
{} as PartialLoginDisplayConfig
|
||||
);
|
||||
const optionConfig = resolveLoginDisplayConfigFromSource(options);
|
||||
const merged = mergeLoginDisplayConfig(config, optionConfig);
|
||||
|
||||
this.setData({
|
||||
showLoginImage: merged.showLoginImage ?? false,
|
||||
});
|
||||
},
|
||||
|
||||
async onChooseAvatar(e: any) {
|
||||
const { avatarUrl } = e.detail;
|
||||
wx.uploadFile({
|
||||
url: `${BASE_URL}/api/operation/sys-media/upload-oss`,
|
||||
filePath: avatarUrl,
|
||||
name: "media",
|
||||
success: (res: any) => {
|
||||
const { data } = JSON.parse(res.data);
|
||||
this.setData({
|
||||
userInfo: {
|
||||
...this.data.userInfo,
|
||||
avatarUrl: data,
|
||||
},
|
||||
});
|
||||
},
|
||||
fail: () => {
|
||||
wx.showToast({
|
||||
title: "上传头像失败",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
buildQueryString(params: Record<string, any>): string {
|
||||
return Object.entries(params)
|
||||
.map(
|
||||
([key, value]) =>
|
||||
`${encodeURIComponent(key)}=${encodeURIComponent(value)}`
|
||||
)
|
||||
.join("&");
|
||||
},
|
||||
|
||||
redirectUrl() {
|
||||
const self = this;
|
||||
let fullPath = "";
|
||||
const tabPages = [
|
||||
"/pages/tab-bar/medicine-box/index",
|
||||
"/pages/tab-bar/shopping-cart/shopping-cart",
|
||||
"/pages/tab-bar/course/course",
|
||||
"/pages/tab-bar/user/user",
|
||||
"/pages/tab-bar/points-mall/points-mall",
|
||||
"/pages/tab-bar/category/category",
|
||||
];
|
||||
|
||||
if (self.data.back) {
|
||||
if (self.data.back === "wxroom") {
|
||||
fullPath =
|
||||
wx.getStorageSync(WXROOM_REDIRECT_PATH_KEY) ||
|
||||
"/package-live/wxroom/index";
|
||||
wx.removeStorageSync(WXROOM_REDIRECT_PATH_KEY);
|
||||
} else {
|
||||
const store = app.globalData.store;
|
||||
const state = wx.getStorageSync("state") ?? undefined;
|
||||
const code = wx.getStorageSync("code") ?? undefined;
|
||||
const groupId = wx.getStorageSync("groupId") ?? undefined;
|
||||
|
||||
if (state && !code) {
|
||||
if (self.data.back === "video") {
|
||||
const storeParams =
|
||||
typeof store === "string" ? store : this.buildQueryString(store);
|
||||
fullPath = `/pages/live/video/video?${storeParams}`;
|
||||
} else if (self.data.back === "red") {
|
||||
fullPath = `/pages/common/red/red`;
|
||||
} else if (self.data.back === "user") {
|
||||
fullPath = `/pages/tab-bar/user/user`;
|
||||
} else {
|
||||
fullPath = `/pages/live/registration/registration?state=${state}`;
|
||||
}
|
||||
} else if (!state && code) {
|
||||
if (self.data.back === "video") {
|
||||
const storeParams =
|
||||
typeof store === "string" ? store : this.buildQueryString(store);
|
||||
fullPath = `/pages/live/video/video?${storeParams}`;
|
||||
} else if (self.data.back === "red") {
|
||||
fullPath = `/pages/common/red/red`;
|
||||
} else if (self.data.back === "user") {
|
||||
fullPath = `/pages/tab-bar/user/user`;
|
||||
} else {
|
||||
fullPath = `/pages/live/registration/registration?code=${code}`;
|
||||
}
|
||||
} else {
|
||||
if (self.data.back === "room") {
|
||||
fullPath = `/pages/live/room/room?groupId=${groupId}`;
|
||||
} else if (self.data.back === "red") {
|
||||
fullPath = `/pages/common/red/red`;
|
||||
} else if (self.data.back === "user") {
|
||||
fullPath = `/pages/tab-bar/user/user`;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 2];
|
||||
|
||||
if (!currentPage) {
|
||||
// 如果没有上一页，跳转到第一个可用 tab，而不是硬编码的 index
|
||||
const tabbarItems = app.globalData.tabbarItems;
|
||||
if (tabbarItems && tabbarItems.length > 0) {
|
||||
wx.switchTab({ url: tabbarItems[0].pagePath });
|
||||
} else {
|
||||
wx.switchTab({ url: "/pages/tab-bar/medicine-box/index" });
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const route = `/${currentPage.route}`;
|
||||
const options = currentPage.options || {};
|
||||
const query = this.buildQueryString(options);
|
||||
fullPath = query ? `${route}?${query}` : route;
|
||||
|
||||
if (tabPages.includes(route)) {
|
||||
wx.switchTab({ url: route });
|
||||
return;
|
||||
}
|
||||
|
||||
wx.redirectTo({ url: route });
|
||||
return;
|
||||
}
|
||||
|
||||
if (tabPages.includes(fullPath)) {
|
||||
wx.switchTab({ url: fullPath });
|
||||
} else {
|
||||
wx.redirectTo({ url: fullPath });
|
||||
}
|
||||
},
|
||||
|
||||
async handleLogin() {
|
||||
if (!this.data.agree) {
|
||||
wx.showModal({
|
||||
title: "请先勾选用户协议和隐私政策",
|
||||
icon: "none",
|
||||
success: (options) => {
|
||||
if (options.confirm) {
|
||||
this.setData({ agree: true });
|
||||
}
|
||||
},
|
||||
});
|
||||
if (!this.data.agree) return;
|
||||
}
|
||||
|
||||
try {
|
||||
wx.showLoading({ title: "登录中" });
|
||||
const loginRes = await wxLogin();
|
||||
if (!loginRes.code) throw new Error(loginRes.errMsg);
|
||||
|
||||
const { avatarUrl, nickName } = this.data.userInfo;
|
||||
const state = wx.getStorageSync("state");
|
||||
let loginResult: LoginRes;
|
||||
|
||||
if (state) {
|
||||
const reqData: Record<string, any> = {
|
||||
state: wx.getStorageSync("state") ?? undefined,
|
||||
...(nickName && nickName !== "微信用户" ? { nickName } : {}),
|
||||
...(avatarUrl && avatarUrl !== defaultAvatarUrl ? { avatarUrl } : {}),
|
||||
};
|
||||
|
||||
loginResult = await wxRequest<LoginRes>({
|
||||
url: `${BASE_URL}/api/auth/app-login?appId=${appId}&code=${loginRes.code}`,
|
||||
method: "POST",
|
||||
data: reqData,
|
||||
});
|
||||
} else {
|
||||
const reqData: Record<string, any> = {
|
||||
state: wx.getStorageSync("code") ?? undefined,
|
||||
...(nickName && nickName !== "微信用户" ? { nickName } : {}),
|
||||
...(avatarUrl && avatarUrl !== defaultAvatarUrl ? { avatarUrl } : {}),
|
||||
};
|
||||
|
||||
loginResult = await wxRequest<LoginRes>({
|
||||
url: `${BASE_URL}/api/auth/app-auth?appId=${appId}&code=${loginRes.code}`,
|
||||
method: "POST",
|
||||
data: reqData,
|
||||
});
|
||||
}
|
||||
|
||||
if (
|
||||
loginResult?.statusCode !== 200 ||
|
||||
(loginResult.data.code && loginResult.data.code !== 200)
|
||||
) {
|
||||
throw new Error(loginResult?.data?.msg || "登录失败");
|
||||
}
|
||||
|
||||
const {
|
||||
mpUserId,
|
||||
id,
|
||||
openId,
|
||||
unionId,
|
||||
nickName: resNickName,
|
||||
avatarUrl: resAvatarUrl,
|
||||
} = loginResult.data;
|
||||
|
||||
const storageData = {
|
||||
openId,
|
||||
userId: mpUserId,
|
||||
mbuId: id,
|
||||
unionId,
|
||||
userName: resNickName,
|
||||
avatarUrl: resAvatarUrl,
|
||||
};
|
||||
|
||||
Object.entries(storageData).forEach(([key, value]) => {
|
||||
wx.setStorageSync(key, value);
|
||||
});
|
||||
|
||||
app.globalData.isLogin = true;
|
||||
this.triggerEvent("loginSuccess", {
|
||||
userName: resNickName,
|
||||
avatarUrl: resAvatarUrl,
|
||||
});
|
||||
wx.showToast({
|
||||
title: "登录成功",
|
||||
duration: 2000,
|
||||
});
|
||||
this.redirectUrl();
|
||||
|
||||
} catch (err: any) {
|
||||
console.log("登录失败:", err);
|
||||
app.globalData.isLogin = false;
|
||||
wx.showToast({
|
||||
title: `登录失败：${err.message || err.errMsg}`,
|
||||
icon: "none",
|
||||
});
|
||||
} finally {
|
||||
setTimeout(() => wx.hideToast(), 3000);
|
||||
}
|
||||
},
|
||||
|
||||
handleToggleAgree() {
|
||||
this.setData({ agree: !this.data.agree });
|
||||
},
|
||||
|
||||
openPrivacyContract() {
|
||||
// @ts-ignore
|
||||
wx.openPrivacyContract();
|
||||
},
|
||||
|
||||
onLoad(options: any) {
|
||||
if (options.back) {
|
||||
this.setData({ back: options.back });
|
||||
}
|
||||
this.applyLoginDisplayConfig(options);
|
||||
},
|
||||
|
||||
onShow() {
|
||||
setTimeout(() => {
|
||||
this.setData({ nickFocus: true });
|
||||
}, 200);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
<navigation-bar title="登录" back="{{!back}}" color="black" background="#FFF" />
|
||||
<view class="loginContainer">
|
||||
<view class="contentWrap">
|
||||
<view class="heroPanel">
|
||||
</view>
|
||||
<view class="actionPanel actionPanelSingle">
|
||||
<view class="loginButton wechatLogin" bind:tap="handleLogin">
|
||||
<image class="loginIcon" src="./assets/wechat-login-icon-figma.svg" mode="aspectFit"></image>
|
||||
<text class="loginLabel">微信登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="privacyFooter" style="padding-bottom: {{safeBottom}}rpx;">
|
||||
<view class="checkboxLabel">
|
||||
<view class="radioTrigger" catchtap="handleToggleAgree">
|
||||
<radio-group>
|
||||
<radio value="agree" checked="{{agree}}" color="#FE8D29" />
|
||||
</radio-group>
|
||||
</view>
|
||||
<text class="privacyText">我已阅读并同意</text>
|
||||
<text class="linkText" bindtap="openPrivacyContract">《用户协议》</text>
|
||||
<text class="privacyText">和</text>
|
||||
<text class="linkText" bindtap="openPrivacyContract">《隐私政策》</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
padding: 20rpx 30rpx;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 40rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.search-icon { font-size: 30rpx; margin-right: 14rpx; }
|
||||
|
||||
.search-input { flex: 1; font-size: 28rpx; color: #333; height: 50rpx; }
|
||||
|
||||
.search-clear {
|
||||
width: 44rpx; height: 44rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #e0e0e0; border-radius: 50%;
|
||||
font-size: 22rpx; color: #ffffff; margin-left: 14rpx;
|
||||
}
|
||||
|
||||
.category-scroll { white-space: nowrap; padding: 10rpx 30rpx 20rpx; }
|
||||
|
||||
.cat-chip {
|
||||
display: inline-block; padding: 14rpx 28rpx; margin-right: 16rpx;
|
||||
background: #ffffff; border-radius: 28rpx; font-size: 26rpx;
|
||||
color: #666; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.cat-chip.active {
|
||||
background: #4A90D9; color: #ffffff; font-weight: 600;
|
||||
box-shadow: 0 4rpx 16rpx rgba(74, 144, 217, 0.3);
|
||||
}
|
||||
|
||||
.top-search { padding: 0 30rpx 10rpx; }
|
||||
.top-label { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
|
||||
.top-tags { display: flex; flex-wrap: wrap; gap: 14rpx; }
|
||||
|
||||
.top-tag {
|
||||
padding: 12rpx 24rpx; background: #ffffff;
|
||||
border: 1rpx solid #e8e8e8; border-radius: 24rpx;
|
||||
font-size: 24rpx; color: #555;
|
||||
}
|
||||
|
||||
.top-tag:active { background: #e8f0fa; border-color: #4A90D9; color: #4A90D9; }
|
||||
|
||||
.result-bar { padding: 10rpx 30rpx; }
|
||||
.result-text { font-size: 24rpx; color: #999; }
|
||||
|
||||
.drug-list { padding: 10rpx 30rpx; }
|
||||
|
||||
.drug-card {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 20rpx; padding: 28rpx;
|
||||
margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.drug-card:active { transform: scale(0.985); }
|
||||
|
||||
.card-icon {
|
||||
width: 90rpx; height: 90rpx;
|
||||
border-radius: 18rpx;
|
||||
margin-right: 20rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-body { flex: 1; overflow: hidden; }
|
||||
.card-name { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 6rpx; }
|
||||
.card-generic { font-size: 22rpx; color: #aaa; margin-bottom: 10rpx; }
|
||||
|
||||
.card-footer { display: flex; align-items: center; gap: 12rpx; }
|
||||
.card-category { font-size: 20rpx; color: #4A90D9; background: #e8f0fa; padding: 4rpx 14rpx; border-radius: 8rpx; }
|
||||
|
||||
.card-otc { font-size: 20rpx; padding: 4rpx 14rpx; border-radius: 8rpx; font-weight: 600; }
|
||||
.card-otc.otc { color: #07C160; background: #e8f8ee; }
|
||||
.card-otc.rx { color: #FF3B30; background: #ffebea; }
|
||||
|
||||
.card-right { text-align: right; margin-left: 14rpx; }
|
||||
.card-price { font-size: 26rpx; color: #FF6B35; font-weight: 600; margin-bottom: 6rpx; }
|
||||
.card-arrow { font-size: 32rpx; color: #ccc; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 0; }
|
||||
.empty-icon { font-size: 80rpx; margin-bottom: 20rpx; }
|
||||
.empty-text { font-size: 30rpx; color: #999; margin-bottom: 10rpx; }
|
||||
.empty-desc { font-size: 24rpx; color: #ccc; }
|
||||
@@ -0,0 +1,70 @@
|
||||
import { wikiDrugs, categories } from '../../../utils/drug-data';
|
||||
import type { WikiDrug } from '../../../utils/drug-data';
|
||||
import { getDrugImage } from '../../../utils/drug-images';
|
||||
|
||||
interface DrugItem extends WikiDrug {
|
||||
image: string;
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
categories,
|
||||
activeCategory: '全部',
|
||||
searchText: '',
|
||||
drugList: [] as DrugItem[],
|
||||
allDrugs: [] as DrugItem[],
|
||||
topSearches: ['阿莫西林', '布洛芬', '头孢', '二甲双胍', '奥美拉唑', '氯雷他定'],
|
||||
},
|
||||
onLoad() {
|
||||
const list: DrugItem[] = Object.values(wikiDrugs)
|
||||
.filter((d) => d.id < 100)
|
||||
.map((d) => ({ ...d, image: getDrugImage(d.category) }));
|
||||
this.setData({ allDrugs: list, drugList: list });
|
||||
},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 1 });
|
||||
}
|
||||
},
|
||||
onSearchInput(e: WechatMiniprogram.Input) {
|
||||
const searchText = e.detail.value.trim();
|
||||
this.setData({ searchText });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onClearSearch() {
|
||||
this.setData({ searchText: '' });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onCategoryTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const { cat } = e.currentTarget.dataset;
|
||||
this.setData({ activeCategory: cat });
|
||||
this.filterDrugs();
|
||||
},
|
||||
onTopSearchTap(e: WechatMiniprogram.TouchEvent) {
|
||||
const { kw } = e.currentTarget.dataset;
|
||||
this.setData({ searchText: kw });
|
||||
this.filterDrugs();
|
||||
},
|
||||
filterDrugs() {
|
||||
const { searchText, activeCategory, allDrugs } = this.data;
|
||||
let list = allDrugs;
|
||||
if (activeCategory !== '全部') {
|
||||
list = list.filter((d) => d.category === activeCategory);
|
||||
}
|
||||
if (searchText) {
|
||||
const kw = searchText.toLowerCase();
|
||||
list = list.filter(
|
||||
(d) =>
|
||||
d.name.includes(kw) ||
|
||||
d.genericName.toLowerCase().includes(kw) ||
|
||||
d.category.includes(kw) ||
|
||||
d.tag.includes(kw),
|
||||
);
|
||||
}
|
||||
this.setData({ drugList: list });
|
||||
},
|
||||
goDetail(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,52 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="药品百科" back="{{false}}" color="white" background="#4A90D9" />
|
||||
|
||||
<view class="search-section">
|
||||
<view class="search-box">
|
||||
<view class="search-icon">🔍</view>
|
||||
<input class="search-input" placeholder="搜索药品名称、功效、分类…" value="{{searchText}}" bindinput="onSearchInput" confirm-type="search" />
|
||||
<view class="search-clear" wx:if="{{searchText}}" bindtap="onClearSearch">✕</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-x class="category-scroll" wx:if="{{!searchText}}">
|
||||
<view wx:for="{{categories}}" wx:key="*this" class="cat-chip {{activeCategory === item ? 'active' : ''}}" data-cat="{{item}}" bindtap="onCategoryTap">{{item}}</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="top-search" wx:if="{{!searchText && activeCategory === '全部'}}">
|
||||
<view class="top-label">🔥 热门搜索</view>
|
||||
<view class="top-tags">
|
||||
<view wx:for="{{topSearches}}" wx:key="*this" class="top-tag" data-kw="{{item}}" bindtap="onTopSearchTap">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="result-bar" wx:if="{{searchText || activeCategory !== '全部'}}">
|
||||
<view class="result-text">{{activeCategory !== '全部' ? activeCategory + ' · ' : ''}}共 {{drugList.length}} 个药品</view>
|
||||
</view>
|
||||
|
||||
<view class="drug-list">
|
||||
<view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
|
||||
<view class="card-icon">
|
||||
<image class="card-img" src="{{item.image}}" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-body">
|
||||
<view class="card-name">{{item.name}}</view>
|
||||
<view class="card-generic">{{item.genericName}} · {{item.form}}</view>
|
||||
<view class="card-footer">
|
||||
<view class="card-category">{{item.category}}</view>
|
||||
<view class="card-otc {{item.isOTC ? 'otc' : 'rx'}}">{{item.isOTC ? 'OTC' : 'Rx'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-right">
|
||||
<view class="card-price">{{item.price}}</view>
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" wx:if="{{drugList.length === 0}}">
|
||||
<view class="empty-icon">🔍</view>
|
||||
<view class="empty-text">没有找到相关药品</view>
|
||||
<view class="empty-desc">试试其他关键词或分类</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 40rpx 40rpx 30rpx;
|
||||
background: linear-gradient(135deg, #FF8C42, #FF6B35);
|
||||
}
|
||||
|
||||
.banner-icon { font-size: 56rpx; margin-bottom: 12rpx; }
|
||||
.banner-text { font-size: 26rpx; color: rgba(255, 255, 255, 0.85); }
|
||||
|
||||
.content { padding: 30rpx; }
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.drug-card {
|
||||
display: flex; align-items: center;
|
||||
background: #ffffff; border-radius: 20rpx; padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.drug-card:active { transform: scale(0.98); }
|
||||
|
||||
.card-icon {
|
||||
width: 90rpx; height: 90rpx;
|
||||
margin-right: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-info { flex: 1; overflow: hidden; }
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 8rpx;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 24rpx; color: #888; margin-bottom: 12rpx;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-meta { display: flex; align-items: center; gap: 16rpx; }
|
||||
|
||||
.card-tag {
|
||||
font-size: 20rpx; color: #FF6B35;
|
||||
background: rgba(255, 107, 53, 0.1);
|
||||
padding: 4rpx 14rpx; border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.card-read { font-size: 20rpx; color: #bbb; }
|
||||
|
||||
.card-arrow { font-size: 40rpx; color: #ccc; margin-left: 12rpx; font-weight: 300; }
|
||||
@@ -0,0 +1,50 @@
|
||||
import { pillImg, syringeImg, heartImg, educationImg } from '../../../utils/drug-images';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
drugList: [
|
||||
{
|
||||
id: 101,
|
||||
image: educationImg,
|
||||
title: '阿莫西林使用指南',
|
||||
desc: '了解抗生素的正确使用方法与注意事项',
|
||||
tag: '抗生素',
|
||||
readCount: '12,580',
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
image: pillImg,
|
||||
title: '布洛芬用药须知',
|
||||
desc: '解热镇痛安全用药，避免过量与禁忌',
|
||||
tag: '解热镇痛',
|
||||
readCount: '9,346',
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
image: syringeImg,
|
||||
title: '胰岛素注射教程',
|
||||
desc: '糖尿病患者必看：正确注射方法与部位轮换',
|
||||
tag: '降糖药',
|
||||
readCount: '7,892',
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
image: heartImg,
|
||||
title: '高血压用药管理',
|
||||
desc: '长期服药患者的日常管理与生活方式调整',
|
||||
tag: '心血管',
|
||||
readCount: '15,230',
|
||||
},
|
||||
],
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 2 });
|
||||
}
|
||||
},
|
||||
goDetail(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/drug-guide/index?id=${id}` });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="惠教中心" back="{{false}}" color="white" background="#FF6B35" />
|
||||
|
||||
<view class="banner">
|
||||
<view class="banner-icon">🎓</view>
|
||||
<view class="banner-text">用药知识，一看就懂</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="section-title">推荐课程</view>
|
||||
<view wx:for="{{drugList}}" wx:key="id" class="drug-card" data-id="{{item.id}}" bindtap="goDetail">
|
||||
<view class="card-icon">
|
||||
<image class="card-img" src="{{item.image}}" mode="aspectFit" />
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-title">{{item.title}}</view>
|
||||
<view class="card-desc">{{item.desc}}</view>
|
||||
<view class="card-meta">
|
||||
<view class="card-tag">{{item.tag}}</view>
|
||||
<view class="card-read">{{item.readCount}} 人已阅读</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.placeholder-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.placeholder-text {
|
||||
font-size: 36rpx;
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
Page({
|
||||
data: {},
|
||||
onLoad() {},
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
<view class="placeholder-page">
|
||||
<text class="placeholder-text">直播小程序</text>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #ffffff; border-radius: 24rpx; padding: 30rpx;
|
||||
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 30rpx; }
|
||||
.form-label { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 14rpx; }
|
||||
.required { color: #FF3B30; }
|
||||
|
||||
.form-input {
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx;
|
||||
box-sizing: border-box; color: #333;
|
||||
}
|
||||
|
||||
.form-picker.placeholder { color: #bbb; }
|
||||
.picker-arrow { font-size: 22rpx; color: #999; }
|
||||
|
||||
.form-textarea {
|
||||
width: 100%; height: 140rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 20rpx 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-row { display: flex; gap: 20rpx; }
|
||||
.form-row .half { flex: 1; }
|
||||
|
||||
.slot-group { display: flex; gap: 16rpx; }
|
||||
|
||||
.slot-chip {
|
||||
flex: 1; text-align: center; height: 72rpx; line-height: 72rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.slot-chip.active {
|
||||
background: #e8f8ee; color: #07C160;
|
||||
border-color: #07C160; font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-area { margin-top: 40rpx; }
|
||||
|
||||
.save-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #fff; font-size: 32rpx; font-weight: 600;
|
||||
border-radius: 18rpx; border: none; margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: #fff; color: #FF3B30; font-size: 32rpx;
|
||||
border-radius: 18rpx; border: 2rpx solid #FF3B30;
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
interface MedicineForm {
|
||||
name: string;
|
||||
category: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
slots: string[];
|
||||
quantity: number;
|
||||
unit: string;
|
||||
expiryDate: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'medicine_box_list';
|
||||
const FREQ_SLOTS: Record<string, string[]> = {
|
||||
'每日1次': ['早'],
|
||||
'每日2次': ['早', '晚'],
|
||||
'每日3次': ['早', '中', '晚'],
|
||||
'每日4次': ['早', '中', '晚', '睡前'],
|
||||
'每周1次': ['自定义'],
|
||||
'按需服用': ['按需'],
|
||||
};
|
||||
|
||||
Page({
|
||||
data: {
|
||||
editId: '',
|
||||
categories: ['抗生素', '解热镇痛', '心血管', '降糖药', '消化系统', '抗过敏', '维生素', '中成药', '外用', '其他'],
|
||||
frequencies: ['每日1次', '每日2次', '每日3次', '每日4次', '每周1次', '按需服用'],
|
||||
units: ['盒', '瓶', '片', '粒', '支', '包', '袋'],
|
||||
timeSlots: ['早', '中', '晚', '睡前', '按需'],
|
||||
categoryIndex: -1,
|
||||
freqIndex: -1,
|
||||
unitIndex: -1,
|
||||
today: '',
|
||||
form: {
|
||||
name: '',
|
||||
category: '',
|
||||
dosage: '',
|
||||
frequency: '',
|
||||
slots: [] as string[],
|
||||
quantity: 1,
|
||||
unit: '',
|
||||
expiryDate: '',
|
||||
notes: '',
|
||||
} as MedicineForm,
|
||||
},
|
||||
|
||||
onLoad(options: Record<string, string>) {
|
||||
const today = new Date();
|
||||
this.setData({
|
||||
today: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`,
|
||||
editId: options.id || '',
|
||||
});
|
||||
|
||||
if (options.id) {
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
const item = list.find((m: any) => m.id === options.id);
|
||||
if (item) {
|
||||
const form = {
|
||||
name: item.name,
|
||||
category: item.category,
|
||||
dosage: item.dosage,
|
||||
frequency: item.frequency,
|
||||
slots: item.slots || [],
|
||||
quantity: item.quantity,
|
||||
unit: item.unit,
|
||||
expiryDate: item.expiryDate,
|
||||
notes: item.notes || '',
|
||||
};
|
||||
this.setData({
|
||||
form,
|
||||
categoryIndex: this.data.categories.indexOf(item.category),
|
||||
freqIndex: this.data.frequencies.indexOf(item.frequency),
|
||||
unitIndex: this.data.units.indexOf(item.unit),
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFieldChange(e: WechatMiniprogram.Input) {
|
||||
const { field } = e.currentTarget.dataset;
|
||||
this.setData({ [`form.${field}`]: e.detail.value });
|
||||
},
|
||||
|
||||
onCategoryChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ categoryIndex: idx, 'form.category': this.data.categories[idx] });
|
||||
},
|
||||
|
||||
onFreqChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
const freq = this.data.frequencies[idx];
|
||||
const slots = FREQ_SLOTS[freq] || ['早', '中', '晚'];
|
||||
this.setData({ freqIndex: idx, 'form.frequency': freq, 'form.slots': slots });
|
||||
},
|
||||
|
||||
onUnitChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ unitIndex: idx, 'form.unit': this.data.units[idx] });
|
||||
},
|
||||
|
||||
onDateChange(e: WechatMiniprogram.PickerChange) {
|
||||
this.setData({ 'form.expiryDate': e.detail.value });
|
||||
},
|
||||
|
||||
toggleSlot(e: WechatMiniprogram.TouchEvent) {
|
||||
const { slot } = e.currentTarget.dataset;
|
||||
const slots = [...this.data.form.slots];
|
||||
const idx = slots.indexOf(slot);
|
||||
if (idx > -1) {
|
||||
slots.splice(idx, 1);
|
||||
} else {
|
||||
slots.push(slot);
|
||||
}
|
||||
this.setData({ 'form.slots': slots });
|
||||
},
|
||||
|
||||
save() {
|
||||
const { form, editId } = this.data;
|
||||
if (!form.name.trim()) {
|
||||
wx.showToast({ title: '请输入药品名称', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
if (!form.category) {
|
||||
wx.showToast({ title: '请选择药品分类', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
|
||||
if (editId) {
|
||||
const idx = list.findIndex((m: any) => m.id === editId);
|
||||
if (idx > -1) {
|
||||
list[idx] = { ...list[idx], ...form };
|
||||
}
|
||||
} else {
|
||||
list.unshift({
|
||||
id: Date.now().toString(),
|
||||
...form,
|
||||
addedAt: new Date().toISOString().split('T')[0],
|
||||
});
|
||||
}
|
||||
|
||||
wx.setStorageSync(STORAGE_KEY, list);
|
||||
wx.showToast({ title: editId ? '已更新' : '已添加', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
},
|
||||
|
||||
cancel() {
|
||||
const { editId } = this.data;
|
||||
if (!editId) {
|
||||
wx.navigateBack();
|
||||
return;
|
||||
}
|
||||
wx.showModal({
|
||||
title: '确认删除',
|
||||
content: '将删除此药品及打卡记录',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const list: any[] = wx.getStorageSync(STORAGE_KEY) || [];
|
||||
wx.setStorageSync(STORAGE_KEY, list.filter((m: any) => m.id !== editId));
|
||||
const checkins = wx.getStorageSync('checkin_records') || {};
|
||||
delete checkins[editId];
|
||||
wx.setStorageSync('checkin_records', checkins);
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="{{editId ? '编辑药品' : '添加药品'}}" back="{{true}}" color="black" background="#ffffff" />
|
||||
|
||||
<view class="form-section">
|
||||
<view class="form-group">
|
||||
<view class="form-label">药品名称 <text class="required">*</text></view>
|
||||
<input class="form-input" placeholder="请输入药品名称" value="{{form.name}}" bindinput="onFieldChange" data-field="name" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">药品分类</view>
|
||||
<picker mode="selector" range="{{categories}}" value="{{categoryIndex}}" bindchange="onCategoryChange">
|
||||
<view class="form-picker {{form.category ? '' : 'placeholder'}}">
|
||||
{{form.category || '请选择分类'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">单次用量</view>
|
||||
<input class="form-input" placeholder="如：1片" value="{{form.dosage}}" bindinput="onFieldChange" data-field="dosage" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">服用频次</view>
|
||||
<picker mode="selector" range="{{frequencies}}" value="{{freqIndex}}" bindchange="onFreqChange">
|
||||
<view class="form-picker {{form.frequency ? '' : 'placeholder'}}">
|
||||
{{form.frequency || '请选择'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">服用时段</view>
|
||||
<view class="slot-group">
|
||||
<view wx:for="{{timeSlots}}" wx:key="*this" class="slot-chip {{form.slots.indexOf(item) > -1 ? 'active' : ''}}" data-slot="{{item}}" bindtap="toggleSlot">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">库存数量</view>
|
||||
<input class="form-input" type="number" placeholder="数量" value="{{form.quantity}}" bindinput="onFieldChange" data-field="quantity" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">单位</view>
|
||||
<picker mode="selector" range="{{units}}" value="{{unitIndex}}" bindchange="onUnitChange">
|
||||
<view class="form-picker {{form.unit ? '' : 'placeholder'}}">
|
||||
{{form.unit || '请选择'}}
|
||||
<text class="picker-arrow">▼</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">有效期至</view>
|
||||
<picker mode="date" value="{{form.expiryDate}}" start="{{today}}" bindchange="onDateChange">
|
||||
<view class="form-picker {{form.expiryDate ? '' : 'placeholder'}}">
|
||||
{{form.expiryDate || '请选择有效期'}}
|
||||
<text class="picker-arrow">📅</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">备注</view>
|
||||
<textarea class="form-textarea" placeholder="添加备注信息..." value="{{form.notes}}" bindinput="onFieldChange" data-field="notes" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="save-btn" bindtap="save">保存药品</button>
|
||||
<button class="cancel-btn" bindtap="cancel" wx:if="{{editId}}">删除此药品</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,250 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 140rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ========== Header / Tab Switch ========== */
|
||||
.header {
|
||||
background: #07C160;
|
||||
padding: 16rpx 24rpx;
|
||||
}
|
||||
|
||||
.tab-switch {
|
||||
display: flex;
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border-radius: 24rpx;
|
||||
padding: 6rpx;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
border-radius: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-btn.on {
|
||||
background: #ffffff;
|
||||
color: #07C160;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* ========== 我的药箱 ========== */
|
||||
.content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx;
|
||||
padding: 26rpx 16rpx;
|
||||
text-align: center;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
color: #07C160;
|
||||
}
|
||||
|
||||
.stat-card.warn .stat-num { color: #FF9500; }
|
||||
.stat-card.alert .stat-num { color: #FF3B30; }
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
|
||||
.expire-alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
background: #fff8e8;
|
||||
border-radius: 14rpx;
|
||||
padding: 18rpx 22rpx;
|
||||
margin-bottom: 18rpx;
|
||||
border: 1rpx solid #ffe0a0;
|
||||
}
|
||||
|
||||
.alert-icon { font-size: 30rpx; }
|
||||
.alert-text { flex: 1; font-size: 24rpx; color: #996600; line-height: 1.4; }
|
||||
|
||||
.med-list { display: flex; flex-direction: column; gap: 16rpx; }
|
||||
|
||||
.med-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
padding: 26rpx 22rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.med-card:active { background: #f9f9f9; }
|
||||
|
||||
.med-icon {
|
||||
width: 72rpx; height: 72rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #f0faf3;
|
||||
border-radius: 16rpx;
|
||||
font-size: 38rpx;
|
||||
margin-right: 18rpx;
|
||||
}
|
||||
|
||||
.med-info { flex: 1; overflow: hidden; }
|
||||
|
||||
.med-name {
|
||||
font-size: 30rpx; font-weight: 600; color: #333;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.med-meta { font-size: 24rpx; color: #999; margin: 6rpx 0; }
|
||||
|
||||
.med-tags { display: flex; gap: 10rpx; }
|
||||
|
||||
.med-tag {
|
||||
font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 8rpx;
|
||||
background: #e8f8ee; color: #07C160;
|
||||
}
|
||||
|
||||
.med-tag.slots { background: #e8f0fa; color: #4A90D9; }
|
||||
|
||||
.med-right { text-align: right; margin-left: 14rpx; min-width: 100rpx; }
|
||||
.med-qty { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.med-expiry { font-size: 20rpx; color: #aaa; margin-top: 4rpx; }
|
||||
|
||||
.med-del {
|
||||
width: 56rpx; height: 56rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 30rpx; opacity: 0.4; margin-left: 6rpx;
|
||||
}
|
||||
|
||||
.med-del:active { opacity: 1; }
|
||||
|
||||
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; }
|
||||
.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
|
||||
.empty-title { font-size: 32rpx; font-weight: 600; color: #666; margin-bottom: 12rpx; }
|
||||
.empty-desc { font-size: 26rpx; color: #aaa; text-align: center; }
|
||||
|
||||
/* ========== 今日打卡 ========== */
|
||||
.checkin-content { padding: 24rpx; }
|
||||
|
||||
.checkin-header {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 30rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03); margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 34rpx; font-weight: bold; color: #333;
|
||||
text-align: center; margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.progress-section { display: flex; align-items: center; gap: 24rpx; }
|
||||
|
||||
.progress-ring {
|
||||
width: 120rpx; height: 120rpx; border-radius: 50%;
|
||||
border: 8rpx solid #e8e8e8;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; background: #fafafa; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.progress-ring.half { border-color: #ffc966; }
|
||||
.progress-ring.full { border-color: #07C160; background: #f0faf3; }
|
||||
|
||||
.ring-text { font-size: 28rpx; font-weight: 700; color: #07C160; }
|
||||
.progress-ring.half .ring-text { color: #FF9500; }
|
||||
|
||||
.progress-info { flex: 1; }
|
||||
.progress-detail { font-size: 28rpx; color: #555; margin-bottom: 6rpx; }
|
||||
.progress-hint { font-size: 26rpx; color: #07C160; font-weight: 500; }
|
||||
|
||||
.week-row {
|
||||
display: flex; background: #ffffff; border-radius: 18rpx;
|
||||
padding: 20rpx 10rpx; margin-bottom: 18rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.week-day { flex: 1; text-align: center; padding: 10rpx 0; border-radius: 12rpx; }
|
||||
.week-day.is-today { background: #e8f8ee; }
|
||||
.wd-day { font-size: 22rpx; color: #999; margin-bottom: 8rpx; }
|
||||
.week-day.is-today .wd-day { color: #07C160; font-weight: 600; }
|
||||
|
||||
.wd-dot { padding: 0 6rpx; }
|
||||
.wd-bar-bg { height: 6rpx; background: #f0f0f0; border-radius: 3rpx; overflow: hidden; }
|
||||
.wd-bar-fill { height: 100%; background: #07C160; border-radius: 3rpx; }
|
||||
.wd-none { font-size: 20rpx; color: #ddd; }
|
||||
|
||||
.slot-list { display: flex; flex-direction: column; gap: 18rpx; }
|
||||
|
||||
.slot-group {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
|
||||
.slot-label { font-size: 28rpx; font-weight: 600; color: #333; }
|
||||
.slot-time { font-size: 22rpx; color: #aaa; font-weight: 400; }
|
||||
.slot-badge { font-size: 28rpx; }
|
||||
|
||||
.slot-meds { display: flex; flex-direction: column; gap: 10rpx; }
|
||||
|
||||
.slot-med {
|
||||
display: flex; align-items: center; gap: 16rpx;
|
||||
padding: 18rpx 16rpx; background: #f9fafb; border-radius: 14rpx;
|
||||
border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.slot-med.done { background: #f0faf3; border-color: #c8e6d0; }
|
||||
|
||||
.sm-check {
|
||||
width: 44rpx; height: 44rpx; border-radius: 50%;
|
||||
border: 2rpx solid #ddd;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24rpx; color: transparent; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sm-check.checked { background: #07C160; border-color: #07C160; color: #ffffff; }
|
||||
|
||||
.sm-info { flex: 1; }
|
||||
.sm-name { font-size: 28rpx; color: #333; font-weight: 500; }
|
||||
.sm-dosage { font-size: 22rpx; color: #999; margin-top: 4rpx; }
|
||||
.sm-cat { font-size: 20rpx; color: #aaa; background: #f0f0f0; padding: 6rpx 14rpx; border-radius: 8rpx; }
|
||||
|
||||
.slot-empty { text-align: center; padding: 20rpx 0; }
|
||||
.se-text { font-size: 24rpx; color: #ccc; }
|
||||
|
||||
.checkin-empty { display: flex; flex-direction: column; align-items: center; padding: 80rpx 40rpx; }
|
||||
.go-add-btn {
|
||||
margin-top: 30rpx; padding: 20rpx 50rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #ffffff; font-size: 28rpx; font-weight: 600; border-radius: 36rpx;
|
||||
}
|
||||
|
||||
/* FAB */
|
||||
.fab {
|
||||
position: fixed; bottom: 200rpx; right: 40rpx;
|
||||
width: 96rpx; height: 96rpx;
|
||||
background: linear-gradient(135deg, #07C160, #06AD56);
|
||||
color: #ffffff; font-size: 48rpx; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.4);
|
||||
z-index: 100; font-weight: 300;
|
||||
}
|
||||
|
||||
.fab:active { transform: scale(0.9); }
|
||||
@@ -0,0 +1,212 @@
|
||||
interface Medicine {
|
||||
id: string;
|
||||
name: string;
|
||||
category: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
slots: string[];
|
||||
quantity: number;
|
||||
unit: string;
|
||||
expiryDate: string;
|
||||
notes: string;
|
||||
addedAt: string;
|
||||
}
|
||||
|
||||
const MED_KEY = 'medicine_box_list';
|
||||
const CHECKIN_KEY = 'checkin_records';
|
||||
|
||||
function getToday(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function formatDate(d: Date): string {
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function daysUntil(dateStr: string): number {
|
||||
const now = new Date();
|
||||
now.setHours(0, 0, 0, 0);
|
||||
const target = new Date(dateStr);
|
||||
target.setHours(0, 0, 0, 0);
|
||||
return Math.ceil((target.getTime() - now.getTime()) / 86400000);
|
||||
}
|
||||
|
||||
Page({
|
||||
data: {
|
||||
activeTab: 0, // 0=库存 1=打卡
|
||||
medicines: [] as Medicine[],
|
||||
totalCount: 0,
|
||||
expiringCount: 0,
|
||||
lowStockCount: 0,
|
||||
expiringItems: [] as string[],
|
||||
|
||||
// Check-in
|
||||
today: '',
|
||||
todayStr: '',
|
||||
checkSlots: [] as { label: string; time: string; medicines: any[]; allChecked: boolean }[],
|
||||
checkProgress: 0,
|
||||
checkTotal: 0,
|
||||
checkDone: 0,
|
||||
weekDays: [] as { date: string; day: string; isToday: boolean; done: number; total: number }[],
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 0 });
|
||||
}
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
loadData() {
|
||||
const medicines: Medicine[] = wx.getStorageSync(MED_KEY) || [];
|
||||
const totalCount = medicines.length;
|
||||
const expiringItems = medicines.filter((m) => {
|
||||
const d = daysUntil(m.expiryDate);
|
||||
return d >= 0 && d <= 90;
|
||||
});
|
||||
const lowStockCount = medicines.filter((m) => m.quantity <= 5).length;
|
||||
|
||||
// Week calendar
|
||||
const today = new Date();
|
||||
const weekDays: any[] = [];
|
||||
for (let i = 3; i >= 0; i--) {
|
||||
const d = new Date(today);
|
||||
d.setDate(d.getDate() - i);
|
||||
const ds = formatDate(d);
|
||||
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
|
||||
weekDays.push({ date: ds, day: dayNames[d.getDay()], isToday: i === 0, done: 0, total: 0 });
|
||||
}
|
||||
|
||||
// Check-in data
|
||||
const todayStr = getToday();
|
||||
const checkinData: Record<string, Record<string, string[]>> = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
const todayCheckin = checkinData[todayStr] || {};
|
||||
|
||||
// Build check-in slots
|
||||
const slotDefs = [
|
||||
{ label: '早', time: '早晨 (6:00-9:00)' },
|
||||
{ label: '中', time: '中午 (11:00-14:00)' },
|
||||
{ label: '晚', time: '晚上 (17:00-21:00)' },
|
||||
{ label: '睡前', time: '睡前 (21:00-23:00)' },
|
||||
];
|
||||
|
||||
let checkTotal = 0;
|
||||
let checkDone = 0;
|
||||
|
||||
const checkSlots = slotDefs.map((sd) => {
|
||||
const slotMeds = medicines
|
||||
.filter((m) => m.slots && m.slots.includes(sd.label))
|
||||
.map((m) => {
|
||||
const checked = (todayCheckin[m.id] || []).includes(sd.label);
|
||||
return {
|
||||
id: m.id,
|
||||
name: m.name,
|
||||
dosage: m.dosage,
|
||||
category: m.category,
|
||||
checked,
|
||||
};
|
||||
});
|
||||
checkTotal += slotMeds.length;
|
||||
const slotDone = slotMeds.filter((m) => m.checked).length;
|
||||
checkDone += slotDone;
|
||||
return { label: sd.label, time: sd.time, medicines: slotMeds, allChecked: slotMeds.length > 0 && slotDone === slotMeds.length };
|
||||
});
|
||||
|
||||
// Populate week day stats
|
||||
const updatedWeekDays = weekDays.map((wd) => {
|
||||
const dayCheckin = checkinData[wd.date] || {};
|
||||
let total = 0;
|
||||
let done = 0;
|
||||
medicines.forEach((m) => {
|
||||
const slots = m.slots || [];
|
||||
total += slots.length;
|
||||
const checkedSlots = dayCheckin[m.id] || [];
|
||||
done += slots.filter((s: string) => checkedSlots.includes(s)).length;
|
||||
});
|
||||
return { ...wd, total, done };
|
||||
});
|
||||
|
||||
this.setData({
|
||||
medicines,
|
||||
totalCount,
|
||||
expiringCount: expiringItems.length,
|
||||
expiringItems: expiringItems.map((m) => m.name),
|
||||
lowStockCount,
|
||||
today: todayStr,
|
||||
todayStr: `${today.getFullYear()}年${today.getMonth() + 1}月${today.getDate()}日`,
|
||||
checkSlots,
|
||||
checkTotal,
|
||||
checkDone,
|
||||
checkProgress: checkTotal > 0 ? Math.round((checkDone / checkTotal) * 100) : 0,
|
||||
weekDays: updatedWeekDays,
|
||||
});
|
||||
},
|
||||
|
||||
switchTab(e: WechatMiniprogram.TouchEvent) {
|
||||
const { tab } = e.currentTarget.dataset;
|
||||
this.setData({ activeTab: Number(tab) });
|
||||
},
|
||||
|
||||
goAdd() {
|
||||
wx.navigateTo({ url: '/pages/tab-bar/medicine-box/add/index' });
|
||||
},
|
||||
|
||||
goEdit(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id } = e.currentTarget.dataset;
|
||||
wx.navigateTo({ url: `/pages/tab-bar/medicine-box/add/index?id=${id}` });
|
||||
},
|
||||
|
||||
deleteMedicine(e: WechatMiniprogram.TouchEvent) {
|
||||
const { id, name } = e.currentTarget.dataset;
|
||||
wx.showModal({
|
||||
title: '确认删除',
|
||||
content: `确定要删除「${name}」吗？`,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
const list: Medicine[] = wx.getStorageSync(MED_KEY) || [];
|
||||
wx.setStorageSync(MED_KEY, list.filter((m) => m.id !== id));
|
||||
// cleanup checkin records
|
||||
const checkinData = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
Object.keys(checkinData).forEach((date) => {
|
||||
delete checkinData[date][id];
|
||||
});
|
||||
wx.setStorageSync(CHECKIN_KEY, checkinData);
|
||||
wx.showToast({ title: '已删除', icon: 'success' });
|
||||
this.loadData();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
toggleCheck(e: WechatMiniprogram.TouchEvent) {
|
||||
const { mid, slot } = e.currentTarget.dataset;
|
||||
const todayStr = this.data.today;
|
||||
const checkinData: Record<string, Record<string, string[]>> = wx.getStorageSync(CHECKIN_KEY) || {};
|
||||
|
||||
if (!checkinData[todayStr]) checkinData[todayStr] = {};
|
||||
if (!checkinData[todayStr][mid]) checkinData[todayStr][mid] = [];
|
||||
|
||||
const idx = checkinData[todayStr][mid].indexOf(slot);
|
||||
if (idx > -1) {
|
||||
checkinData[todayStr][mid].splice(idx, 1);
|
||||
} else {
|
||||
checkinData[todayStr][mid].push(slot);
|
||||
}
|
||||
|
||||
wx.setStorageSync(CHECKIN_KEY, checkinData);
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
onPrevDay() {
|
||||
// For future: navigate to past dates
|
||||
},
|
||||
|
||||
onNextDay() {
|
||||
// For future: navigate to future dates
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,118 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="电子药箱" back="{{false}}" color="white" background="#07C160" />
|
||||
|
||||
<!-- Tab switch -->
|
||||
<view class="header">
|
||||
<view class="tab-switch">
|
||||
<view class="tab-btn {{activeTab === 0 ? 'on' : ''}}" data-tab="0" bindtap="switchTab">我的药箱</view>
|
||||
<view class="tab-btn {{activeTab === 1 ? 'on' : ''}}" data-tab="1" bindtap="switchTab">今日打卡</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ==================== 我的药箱 ==================== -->
|
||||
<view class="content" wx:if="{{activeTab === 0}}">
|
||||
<view class="stats-row">
|
||||
<view class="stat-card">
|
||||
<view class="stat-num">{{totalCount}}</view>
|
||||
<view class="stat-label">药品总数</view>
|
||||
</view>
|
||||
<view class="stat-card warn">
|
||||
<view class="stat-num">{{expiringCount}}</view>
|
||||
<view class="stat-label">即将过期</view>
|
||||
</view>
|
||||
<view class="stat-card alert">
|
||||
<view class="stat-num">{{lowStockCount}}</view>
|
||||
<view class="stat-label">库存不足</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="expire-alert" wx:if="{{expiringCount > 0}}">
|
||||
<view class="alert-icon">⚠️</view>
|
||||
<view class="alert-text">即将过期：{{expiringItems.join('、')}}</view>
|
||||
</view>
|
||||
|
||||
<view class="med-list" wx:if="{{medicines.length > 0}}">
|
||||
<view wx:for="{{medicines}}" wx:key="id" class="med-card" data-id="{{item.id}}" bindtap="goEdit">
|
||||
<view class="med-icon">{{item.category === '抗生素' ? '💊' : item.category === '心血管' ? '❤️' : item.category === '降糖药' ? '💉' : item.category === '维生素' ? '🍊' : item.category === '中成药' ? '🌿' : '💊'}}</view>
|
||||
<view class="med-info">
|
||||
<view class="med-name">{{item.name}}</view>
|
||||
<view class="med-meta">{{item.dosage}} · {{item.frequency}}</view>
|
||||
<view class="med-tags">
|
||||
<view class="med-tag">{{item.category}}</view>
|
||||
<view class="med-tag slots">{{item.slots.join('·')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="med-right">
|
||||
<view class="med-qty">×{{item.quantity}}{{item.unit}}</view>
|
||||
<view class="med-expiry">{{item.expiryDate ? '至 ' + item.expiryDate : ''}}</view>
|
||||
</view>
|
||||
<view class="med-del" data-id="{{item.id}}" data-name="{{item.name}}" catchtap="deleteMedicine">🗑</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">📦</view>
|
||||
<view class="empty-title">药箱是空的</view>
|
||||
<view class="empty-desc">点击右下角按钮添加您的第一个药品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ==================== 今日打卡 ==================== -->
|
||||
<view class="checkin-content" wx:else>
|
||||
<view class="checkin-header">
|
||||
<view class="date-label">{{todayStr}}</view>
|
||||
<view class="progress-section">
|
||||
<view class="progress-ring {{checkProgress === 100 ? 'full' : checkProgress >= 50 ? 'half' : ''}}">
|
||||
<view class="ring-text">{{checkProgress}}%</view>
|
||||
</view>
|
||||
<view class="progress-info">
|
||||
<view class="progress-detail">已完成 {{checkDone}}/{{checkTotal}}</view>
|
||||
<view class="progress-hint" wx:if="{{checkProgress === 100}}">🎉 今日全部完成！</view>
|
||||
<view class="progress-hint" wx:else>继续加油～</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="week-row">
|
||||
<view wx:for="{{weekDays}}" wx:key="date" class="week-day {{item.isToday ? 'is-today' : ''}}">
|
||||
<view class="wd-day">{{item.day}}</view>
|
||||
<view class="wd-dot" wx:if="{{item.total > 0}}">
|
||||
<view class="wd-bar-bg"><view class="wd-bar-fill" style="width: {{item.total > 0 ? item.done / item.total * 100 : 0}}%"></view></view>
|
||||
</view>
|
||||
<view class="wd-none" wx:else>-</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="slot-list" wx:if="{{checkTotal > 0}}">
|
||||
<view wx:for="{{checkSlots}}" wx:key="label" class="slot-group">
|
||||
<view class="slot-header">
|
||||
<view class="slot-label">{{item.label === '早' ? '☀️' : item.label === '中' ? '🌤️' : item.label === '晚' ? '🌙' : '💤'}} {{item.label}} · <text class="slot-time">{{item.time}}</text></view>
|
||||
<view class="slot-badge" wx:if="{{item.allChecked}}">✅</view>
|
||||
</view>
|
||||
<view class="slot-meds" wx:if="{{item.medicines.length > 0}}">
|
||||
<view wx:for="{{item.medicines}}" wx:key="id" wx:for-item="med" class="slot-med {{med.checked ? 'done' : ''}}" data-mid="{{med.id}}" data-slot="{{item.label}}" bindtap="toggleCheck">
|
||||
<view class="sm-check {{med.checked ? 'checked' : ''}}">{{med.checked ? '✓' : ''}}</view>
|
||||
<view class="sm-info">
|
||||
<view class="sm-name">{{med.name}}</view>
|
||||
<view class="sm-dosage">{{med.dosage}}</view>
|
||||
</view>
|
||||
<view class="sm-cat">{{med.category}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="slot-empty" wx:else>
|
||||
<view class="se-text">该时段无需服药</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="checkin-empty" wx:if="{{checkTotal === 0}}">
|
||||
<view class="empty-icon">📋</view>
|
||||
<view class="empty-title">暂无用药计划</view>
|
||||
<view class="empty-desc">先在「我的药箱」中添加药品并设置服用时段</view>
|
||||
<view class="go-add-btn" bindtap="goAdd">+ 添加药品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAB -->
|
||||
<view class="fab" bindtap="goAdd" wx:if="{{activeTab === 0}}">+</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding: 20rpx 30rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
background: #ffffff; border-radius: 24rpx;
|
||||
padding: 30rpx; box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.avatar-row {
|
||||
display: flex; align-items: flex-start; margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.avatar-label {
|
||||
font-size: 28rpx; font-weight: 600; color: #333;
|
||||
width: 100rpx; padding-top: 10rpx; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-options {
|
||||
flex: 1; display: flex; flex-wrap: wrap; gap: 14rpx;
|
||||
}
|
||||
|
||||
.avatar-opt {
|
||||
width: 68rpx; height: 68rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: #f7f8fa; border-radius: 50%; font-size: 34rpx;
|
||||
border: 3rpx solid transparent;
|
||||
}
|
||||
|
||||
.avatar-opt.selected {
|
||||
border-color: #4A90D9; background: #e8f0fa; transform: scale(1.1);
|
||||
}
|
||||
|
||||
.form-group { margin-bottom: 28rpx; }
|
||||
.form-label { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 14rpx; }
|
||||
|
||||
.form-input {
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
width: 100%; height: 80rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 0 24rpx; font-size: 28rpx;
|
||||
box-sizing: border-box; color: #333;
|
||||
}
|
||||
|
||||
.form-picker.placeholder { color: #bbb; }
|
||||
.arrow { font-size: 22rpx; color: #999; }
|
||||
|
||||
.form-row { display: flex; gap: 20rpx; }
|
||||
.form-row .half { flex: 1; }
|
||||
|
||||
.gender-row { display: flex; gap: 14rpx; }
|
||||
|
||||
.gender-btn {
|
||||
flex: 1; text-align: center; height: 80rpx; line-height: 80rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.gender-btn.active.male {
|
||||
background: #e8f0fa; color: #4A90D9; border-color: #4A90D9; font-weight: 600;
|
||||
}
|
||||
|
||||
.gender-btn.active.female {
|
||||
background: #fce8ec; color: #E85D75; border-color: #E85D75; font-weight: 600;
|
||||
}
|
||||
|
||||
.blood-row { display: flex; gap: 14rpx; }
|
||||
|
||||
.blood-chip {
|
||||
flex: 1; text-align: center; height: 72rpx; line-height: 72rpx;
|
||||
background: #f7f8fa; border-radius: 14rpx; font-size: 26rpx;
|
||||
color: #666; border: 2rpx solid transparent;
|
||||
}
|
||||
|
||||
.blood-chip.active {
|
||||
background: #fff0e8; color: #FF6B35; border-color: #FF6B35; font-weight: 600;
|
||||
}
|
||||
|
||||
.divider {
|
||||
text-align: center; font-size: 26rpx; color: #999;
|
||||
padding: 10rpx 0 24rpx; margin-bottom: 24rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
width: 100%; height: 140rpx; background: #f7f8fa;
|
||||
border-radius: 14rpx; padding: 20rpx 24rpx; font-size: 28rpx; box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-area { margin-top: 40rpx; }
|
||||
|
||||
.save-btn {
|
||||
width: 100%; height: 90rpx; line-height: 90rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
color: #fff; font-size: 32rpx; font-weight: 600;
|
||||
border-radius: 18rpx; border: none;
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
const MEMBER_KEY = 'family_member';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
avatars: ['👤', '👨', '👩', '👴', '👵', '👶', '🧒', '👦', '👧'],
|
||||
relations: ['本人', '配偶', '父亲', '母亲', '儿子', '女儿', '爷爷', '奶奶', '外公', '外婆', '其他'],
|
||||
bloodTypes: ['A', 'B', 'AB', 'O', '未知'],
|
||||
relationIdx: -1,
|
||||
today: '',
|
||||
form: {
|
||||
avatar: '👤',
|
||||
name: '',
|
||||
gender: '',
|
||||
birthday: '',
|
||||
relation: '',
|
||||
bloodType: '',
|
||||
allergies: '',
|
||||
chronicDiseases: '',
|
||||
longTermMeds: '',
|
||||
notes: '',
|
||||
},
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const today = new Date();
|
||||
this.setData({
|
||||
today: `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`,
|
||||
});
|
||||
|
||||
const member = wx.getStorageSync(MEMBER_KEY);
|
||||
if (member && member.name) {
|
||||
this.setData({
|
||||
form: { ...this.data.form, ...member },
|
||||
relationIdx: this.data.relations.indexOf(member.relation),
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
pickAvatar(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.avatar': e.currentTarget.dataset.avatar });
|
||||
},
|
||||
|
||||
onField(e: WechatMiniprogram.Input) {
|
||||
this.setData({ [`form.${e.currentTarget.dataset.field}`]: e.detail.value });
|
||||
},
|
||||
|
||||
onRelationChange(e: WechatMiniprogram.PickerChange) {
|
||||
const idx = Number(e.detail.value);
|
||||
this.setData({ relationIdx: idx, 'form.relation': this.data.relations[idx] });
|
||||
},
|
||||
|
||||
onBirthdayChange(e: WechatMiniprogram.PickerChange) {
|
||||
this.setData({ 'form.birthday': e.detail.value });
|
||||
},
|
||||
|
||||
pickGender(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.gender': e.currentTarget.dataset.gender });
|
||||
},
|
||||
|
||||
pickBlood(e: WechatMiniprogram.TouchEvent) {
|
||||
this.setData({ 'form.bloodType': e.currentTarget.dataset.bt });
|
||||
},
|
||||
|
||||
save() {
|
||||
if (!this.data.form.name.trim()) {
|
||||
wx.showToast({ title: '请输入姓名', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
wx.setStorageSync(MEMBER_KEY, this.data.form);
|
||||
wx.showToast({ title: '已保存', icon: 'success' });
|
||||
setTimeout(() => wx.navigateBack(), 800);
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="编辑家庭成员" back="{{true}}" color="black" background="#ffffff" />
|
||||
|
||||
<view class="form-section">
|
||||
<!-- 头像选择 -->
|
||||
<view class="avatar-row">
|
||||
<view class="avatar-label">头像</view>
|
||||
<view class="avatar-options">
|
||||
<view wx:for="{{avatars}}" wx:key="*this" class="avatar-opt {{form.avatar === item ? 'selected' : ''}}" data-avatar="{{item}}" bindtap="pickAvatar">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">姓名</view>
|
||||
<input class="form-input" placeholder="请输入姓名" value="{{form.name}}" bindinput="onField" data-field="name" />
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">关系</view>
|
||||
<picker mode="selector" range="{{relations}}" value="{{relationIdx}}" bindchange="onRelationChange">
|
||||
<view class="form-picker {{form.relation ? '' : 'placeholder'}}">{{form.relation || '请选择'}}<text class="arrow">▼</text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<view class="form-group half">
|
||||
<view class="form-label">性别</view>
|
||||
<view class="gender-row">
|
||||
<view class="gender-btn {{form.gender === '男' ? 'active male' : ''}}" data-gender="男" bindtap="pickGender">♂ 男</view>
|
||||
<view class="gender-btn {{form.gender === '女' ? 'active female' : ''}}" data-gender="女" bindtap="pickGender">♀ 女</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-group half">
|
||||
<view class="form-label">出生日期</view>
|
||||
<picker mode="date" value="{{form.birthday}}" end="{{today}}" bindchange="onBirthdayChange">
|
||||
<view class="form-picker {{form.birthday ? '' : 'placeholder'}}">{{form.birthday || '请选择'}}<text class="arrow">📅</text></view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">血型</view>
|
||||
<view class="blood-row">
|
||||
<view wx:for="{{bloodTypes}}" wx:key="*this" class="blood-chip {{form.bloodType === item ? 'active' : ''}}" data-bt="{{item}}" bindtap="pickBlood">{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider">📋 健康信息</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">过敏史</view>
|
||||
<input class="form-input" placeholder="如：青霉素过敏、花粉过敏" value="{{form.allergies}}" bindinput="onField" data-field="allergies" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">慢性病史</view>
|
||||
<input class="form-input" placeholder="如：高血压、糖尿病" value="{{form.chronicDiseases}}" bindinput="onField" data-field="chronicDiseases" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">长期用药</view>
|
||||
<input class="form-input" placeholder="如：氨氯地平5mg/日" value="{{form.longTermMeds}}" bindinput="onField" data-field="longTermMeds" />
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-label">备注</view>
|
||||
<textarea class="form-textarea" placeholder="其他需要记录的信息…" value="{{form.notes}}" bindinput="onField" data-field="notes" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn-area">
|
||||
<button class="save-btn" bindtap="save">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 50rpx 40rpx 40rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 140rpx; height: 140rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.2); border-radius: 50%;
|
||||
font-size: 70rpx; margin-bottom: 20rpx;
|
||||
border: 4rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.name { font-size: 38rpx; font-weight: bold; color: #fff; margin-bottom: 8rpx; }
|
||||
|
||||
.relation {
|
||||
font-size: 24rpx; color: rgba(255, 255, 255, 0.75);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 6rpx 22rpx; border-radius: 20rpx; margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
padding: 14rpx 50rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff; font-size: 26rpx; border-radius: 30rpx;
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.edit-btn:active { background: rgba(255, 255, 255, 0.35); }
|
||||
|
||||
/* Info cards */
|
||||
.content { padding: 30rpx; }
|
||||
|
||||
.info-card {
|
||||
background: #ffffff; border-radius: 20rpx; padding: 24rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 28rpx; font-weight: 600; color: #333;
|
||||
padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f0f0; margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex; align-items: center;
|
||||
padding: 18rpx 0;
|
||||
border-bottom: 1rpx solid #f8f8f8;
|
||||
}
|
||||
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx; color: #999; width: 140rpx; flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
flex: 1; font-size: 28rpx; color: #333;
|
||||
}
|
||||
|
||||
.info-value.empty { color: #ccc; }
|
||||
|
||||
/* Empty */
|
||||
.empty-state {
|
||||
display: flex; flex-direction: column; align-items: center;
|
||||
padding: 100rpx 40rpx;
|
||||
}
|
||||
|
||||
.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
|
||||
.empty-title { font-size: 32rpx; font-weight: 600; color: #666; margin-bottom: 12rpx; }
|
||||
.empty-desc { font-size: 26rpx; color: #aaa; text-align: center; margin-bottom: 30rpx; }
|
||||
|
||||
.go-add-btn {
|
||||
padding: 22rpx 60rpx;
|
||||
background: linear-gradient(135deg, #4A90D9, #357ABD);
|
||||
color: #fff; font-size: 28rpx; font-weight: 600; border-radius: 36rpx;
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
interface FamilyMember {
|
||||
avatar: string;
|
||||
name: string;
|
||||
gender: string;
|
||||
birthday: string;
|
||||
relation: string;
|
||||
bloodType: string;
|
||||
allergies: string;
|
||||
chronicDiseases: string;
|
||||
longTermMeds: string;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
const MEMBER_KEY = 'family_member';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
member: {} as FamilyMember,
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
|
||||
this.getTabBar().setData({ selected: 3 });
|
||||
}
|
||||
this.loadMember();
|
||||
},
|
||||
loadMember() {
|
||||
const member = wx.getStorageSync(MEMBER_KEY) || {};
|
||||
this.setData({ member });
|
||||
},
|
||||
goEdit() {
|
||||
wx.navigateTo({ url: '/pages/tab-bar/profile/edit/index' });
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,65 @@
|
||||
<view class="page">
|
||||
<navigation-bar title="我的" back="{{false}}" color="white" background="#357ABD" />
|
||||
|
||||
<!-- 家庭成员卡片 -->
|
||||
<view class="header">
|
||||
<view class="avatar">{{member.avatar || '👤'}}</view>
|
||||
<view class="name">{{member.name || '点击添加家庭成员'}}</view>
|
||||
<view class="relation" wx:if="{{member.relation}}">{{member.relation}}</view>
|
||||
<view class="edit-btn" bindtap="goEdit">{{member.name ? '编辑信息' : '添加信息'}}</view>
|
||||
</view>
|
||||
|
||||
<!-- 成员详细信息 -->
|
||||
<view class="content" wx:if="{{member.name}}">
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<view class="info-label">姓名</view>
|
||||
<view class="info-value">{{member.name}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">性别</view>
|
||||
<view class="info-value">{{member.gender || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">出生日期</view>
|
||||
<view class="info-value">{{member.birthday || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">关系</view>
|
||||
<view class="info-value">{{member.relation || '未填写'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="card-title">📋 健康信息</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">血型</view>
|
||||
<view class="info-value">{{member.bloodType || '未填写'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">过敏史</view>
|
||||
<view class="info-value {{member.allergies ? '' : 'empty'}}">{{member.allergies || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">慢性病史</view>
|
||||
<view class="info-value {{member.chronicDiseases ? '' : 'empty'}}">{{member.chronicDiseases || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">长期用药</view>
|
||||
<view class="info-value {{member.longTermMeds ? '' : 'empty'}}">{{member.longTermMeds || '无'}}</view>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<view class="info-label">备注</view>
|
||||
<view class="info-value {{member.notes ? '' : 'empty'}}">{{member.notes || '无'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty-state" wx:else>
|
||||
<view class="empty-icon">👨👩👧👦</view>
|
||||
<view class="empty-title">还未添加家庭成员</view>
|
||||
<view class="empty-desc">添加家庭成员信息，方便管理全家用药</view>
|
||||
<view class="go-add-btn" bindtap="goEdit">添加家庭成员</view>
|
||||
</view>
|
||||
</view>
|
||||
Reference in New Issue
Block a user