Default User
1 week ago
10 changed files with 1297 additions and 3 deletions
@ -0,0 +1,343 @@ |
|||||
|
// pages/collection/index.js
|
||||
|
const API = require('../../utils/api.js'); |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
qrCodes: [], // 二维码数据
|
||||
|
invitees: [], // 邀请者列表
|
||||
|
isAdmin: false, // 是否为管理员
|
||||
|
activeFilter: 'all', // 当前激活的筛选条件
|
||||
|
sidebarVisible: false, // 侧边栏是否可见
|
||||
|
expandedIndex: -1, // 当前展开的二维码索引
|
||||
|
searchKeyword: '' // 搜索关键词
|
||||
|
}, |
||||
|
|
||||
|
onLoad: function (options) { |
||||
|
// 页面加载时的初始化逻辑
|
||||
|
console.log('二维码合集页面加载，options:', options); |
||||
|
|
||||
|
// 检查是否是通过内部按钮进入的
|
||||
|
if (!options.from || options.from !== 'internal') { |
||||
|
console.log('非内部进入，重定向到首页'); |
||||
|
wx.redirectTo({ |
||||
|
url: '/pages/index/index' |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// 加载二维码合集
|
||||
|
this.loadQrCollection(); |
||||
|
}, |
||||
|
|
||||
|
onShow: function () { |
||||
|
// 页面显示时重新加载数据
|
||||
|
this.loadQrCollection(); |
||||
|
}, |
||||
|
|
||||
|
// 加载用户信息
|
||||
|
loadUserInfo: function () { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
// 从本地存储获取用户信息
|
||||
|
const userInfo = wx.getStorageSync('userInfo') || {}; |
||||
|
// 获取电话号码信息
|
||||
|
const phoneNumber = userInfo.phoneNumber || wx.getStorageSync('phoneNumber') || ''; |
||||
|
|
||||
|
// 如果有电话号码，查询personnel表获取详细信息
|
||||
|
if (phoneNumber) { |
||||
|
// 根据电话号码查询personnel表
|
||||
|
API.request('/api/personnel/get', 'POST', { phone: phoneNumber }).then(res => { |
||||
|
console.log('查询personnel表结果:', res); |
||||
|
if (res && res.success && res.data && res.data.length > 0) { |
||||
|
const personnelInfo = res.data[0]; |
||||
|
// 更新用户信息
|
||||
|
const updatedUserInfo = { |
||||
|
name: personnelInfo.name || userInfo.name || userInfo.userName || '微信用户', |
||||
|
phoneNumber: phoneNumber, |
||||
|
projectName: personnelInfo.projectName || '' |
||||
|
}; |
||||
|
// 存储到本地存储
|
||||
|
wx.setStorageSync('userInfo', updatedUserInfo); |
||||
|
resolve(updatedUserInfo); |
||||
|
} else { |
||||
|
// 如果查询失败，使用本地存储的用户信息
|
||||
|
const fallbackUserInfo = { |
||||
|
name: userInfo.name || userInfo.userName || '微信用户', |
||||
|
phoneNumber: phoneNumber, |
||||
|
projectName: userInfo.projectName || '' |
||||
|
}; |
||||
|
resolve(fallbackUserInfo); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.error('查询personnel表失败:', err); |
||||
|
// 如果查询失败，使用本地存储的用户信息
|
||||
|
const fallbackUserInfo = { |
||||
|
name: userInfo.name || userInfo.userName || '微信用户', |
||||
|
phoneNumber: phoneNumber, |
||||
|
projectName: userInfo.projectName || '' |
||||
|
}; |
||||
|
resolve(fallbackUserInfo); |
||||
|
}); |
||||
|
} else { |
||||
|
// 如果没有电话号码，使用本地存储的用户信息
|
||||
|
const fallbackUserInfo = { |
||||
|
name: userInfo.name || userInfo.userName || '微信用户', |
||||
|
phoneNumber: phoneNumber, |
||||
|
projectName: userInfo.projectName || '' |
||||
|
}; |
||||
|
resolve(fallbackUserInfo); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 将UTC时间转换为北京时间
|
||||
|
convertToBeijingTime: function (utcTime) { |
||||
|
if (!utcTime) return '未知'; |
||||
|
|
||||
|
// 创建Date对象
|
||||
|
const date = new Date(utcTime); |
||||
|
|
||||
|
// 转换为北京时间（UTC+8）
|
||||
|
const beijingTime = new Date(date.getTime() + 8 * 60 * 60 * 1000); |
||||
|
|
||||
|
// 格式化时间
|
||||
|
const year = beijingTime.getFullYear(); |
||||
|
const month = String(beijingTime.getMonth() + 1).padStart(2, '0'); |
||||
|
const day = String(beijingTime.getDate()).padStart(2, '0'); |
||||
|
const hours = String(beijingTime.getHours()).padStart(2, '0'); |
||||
|
const minutes = String(beijingTime.getMinutes()).padStart(2, '0'); |
||||
|
const seconds = String(beijingTime.getSeconds()).padStart(2, '0'); |
||||
|
|
||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; |
||||
|
}, |
||||
|
|
||||
|
// 处理二维码数据，转换时间为北京时间
|
||||
|
processQrCodes: function (qrCodes) { |
||||
|
return qrCodes.map(qrCode => { |
||||
|
const newQrCode = { ...qrCode }; |
||||
|
// 转换创建时间
|
||||
|
if (newQrCode.createdAt) { |
||||
|
newQrCode.createdAt = this.convertToBeijingTime(newQrCode.createdAt); |
||||
|
} |
||||
|
// 转换签发日期
|
||||
|
if (newQrCode.issueDate) { |
||||
|
newQrCode.issueDate = this.convertToBeijingTime(newQrCode.issueDate); |
||||
|
} |
||||
|
return newQrCode; |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 加载二维码合集
|
||||
|
loadQrCollection: function () { |
||||
|
this.loadUserInfo().then(user => { |
||||
|
try { |
||||
|
// 构建请求参数
|
||||
|
let params = {}; |
||||
|
if (user) { |
||||
|
params.userName = user.name; |
||||
|
params.phoneNumber = user.phoneNumber; |
||||
|
params.projectName = user.projectName; |
||||
|
} |
||||
|
|
||||
|
console.log('加载二维码合集，用户信息:', user); |
||||
|
|
||||
|
// 从服务器获取二维码合集
|
||||
|
API.getQrCollection(params).then(res => { |
||||
|
console.log('获取二维码合集结果:', res); |
||||
|
|
||||
|
if (res && res.success) { |
||||
|
// 动态生成筛选按钮
|
||||
|
if (res.isAdmin && res.invitees && res.invitees.length > 0) { |
||||
|
this.setData({ |
||||
|
isAdmin: res.isAdmin, |
||||
|
invitees: res.invitees |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if (res.qrCodes && res.qrCodes.length > 0) { |
||||
|
// 处理二维码数据，转换时间为北京时间
|
||||
|
const processedQrCodes = this.processQrCodes(res.qrCodes); |
||||
|
|
||||
|
// 渲染二维码合集
|
||||
|
this.setData({ |
||||
|
qrCodes: processedQrCodes |
||||
|
}); |
||||
|
} else { |
||||
|
// 显示空状态
|
||||
|
this.setData({ |
||||
|
qrCodes: [] |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
// 显示错误状态
|
||||
|
wx.showToast({ |
||||
|
title: '加载失败，请稍后重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}).catch(err => { |
||||
|
console.error('获取二维码合集失败:', err); |
||||
|
wx.showToast({ |
||||
|
title: '加载失败，请稍后重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
}); |
||||
|
} catch (error) { |
||||
|
console.error('获取二维码合集失败:', error); |
||||
|
wx.showToast({ |
||||
|
title: '加载失败，请稍后重试', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 打开筛选侧边栏
|
||||
|
openSidebar: function () { |
||||
|
this.setData({ |
||||
|
sidebarVisible: true |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 关闭筛选侧边栏
|
||||
|
closeSidebar: function () { |
||||
|
this.setData({ |
||||
|
sidebarVisible: false |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换展开/收起状态
|
||||
|
toggleSection: function (e) { |
||||
|
const index = e.currentTarget.dataset.index; |
||||
|
this.setData({ |
||||
|
expandedIndex: this.data.expandedIndex === index ? -1 : index |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 切换筛选条件
|
||||
|
switchFilter: function (e) { |
||||
|
const filter = e.currentTarget.dataset.filter; |
||||
|
this.setData({ |
||||
|
activeFilter: filter |
||||
|
}); |
||||
|
this.filterQrCodes(filter, null, this.data.searchKeyword); |
||||
|
}, |
||||
|
|
||||
|
// 按邀请者筛选
|
||||
|
filterByInviter: function (e) { |
||||
|
const filter = e.currentTarget.dataset.filter; |
||||
|
const inviterName = e.currentTarget.dataset.inviter; |
||||
|
this.setData({ |
||||
|
activeFilter: filter |
||||
|
}); |
||||
|
this.filterQrCodes(filter, inviterName, this.data.searchKeyword); |
||||
|
this.closeSidebar(); |
||||
|
}, |
||||
|
|
||||
|
// 搜索输入事件
|
||||
|
onSearchInput: function (e) { |
||||
|
const searchKeyword = e.detail.value; |
||||
|
this.setData({ |
||||
|
searchKeyword: searchKeyword |
||||
|
}); |
||||
|
this.filterQrCodes(this.data.activeFilter, null, searchKeyword); |
||||
|
}, |
||||
|
|
||||
|
// 筛选二维码
|
||||
|
filterQrCodes: function (filter, inviterName, searchKeyword = '') { |
||||
|
this.loadUserInfo().then(user => { |
||||
|
// 构建请求参数
|
||||
|
let params = {}; |
||||
|
if (user) { |
||||
|
params.userName = user.name; |
||||
|
params.phoneNumber = user.phoneNumber; |
||||
|
params.projectName = user.projectName; |
||||
|
} |
||||
|
|
||||
|
console.log('筛选二维码，用户信息:', user); |
||||
|
|
||||
|
// 重新加载并筛选二维码
|
||||
|
API.getQrCollection(params).then(res => { |
||||
|
if (res && res.success && res.qrCodes && res.qrCodes.length > 0) { |
||||
|
// 处理二维码数据，转换时间为北京时间
|
||||
|
let filteredQrCodes = this.processQrCodes(res.qrCodes); |
||||
|
|
||||
|
if (filter === 'me' && user) { |
||||
|
// 筛选当前用户自己的二维码
|
||||
|
filteredQrCodes = filteredQrCodes.filter(qrCode => |
||||
|
qrCode.inviter === user.name |
||||
|
); |
||||
|
} else if (filter.startsWith('invitee_') && inviterName) { |
||||
|
// 筛选特定邀请者的二维码
|
||||
|
filteredQrCodes = filteredQrCodes.filter(qrCode => |
||||
|
qrCode.inviter === inviterName |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 搜索功能
|
||||
|
if (searchKeyword) { |
||||
|
const keyword = searchKeyword.toLowerCase(); |
||||
|
filteredQrCodes = filteredQrCodes.filter(qrCode => { |
||||
|
return ( |
||||
|
(qrCode.phoneNumber && qrCode.phoneNumber.toLowerCase().includes(keyword)) || |
||||
|
(qrCode.company && qrCode.company.toLowerCase().includes(keyword)) |
||||
|
); |
||||
|
}); |
||||
|
|
||||
|
// 添加高亮效果
|
||||
|
filteredQrCodes = filteredQrCodes.map(qrCode => { |
||||
|
const newQrCode = { ...qrCode }; |
||||
|
if (newQrCode.company && newQrCode.company.toLowerCase().includes(keyword)) { |
||||
|
const regex = new RegExp(`(${keyword})`, 'gi'); |
||||
|
newQrCode.company = newQrCode.company.replace(regex, '<span class="highlight">$1</span>'); |
||||
|
} |
||||
|
if (newQrCode.phoneNumber && newQrCode.phoneNumber.toLowerCase().includes(keyword)) { |
||||
|
const regex = new RegExp(`(${keyword})`, 'gi'); |
||||
|
newQrCode.phoneNumber = newQrCode.phoneNumber.replace(regex, '<span class="highlight">$1</span>'); |
||||
|
} |
||||
|
return newQrCode; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.setData({ |
||||
|
qrCodes: filteredQrCodes |
||||
|
}); |
||||
|
} |
||||
|
}).catch(error => { |
||||
|
console.error('筛选二维码失败:', error); |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 返回上一页
|
||||
|
goBack: function () { |
||||
|
wx.navigateBack({ |
||||
|
delta: 1 |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 跳转到生成邀请二维码页面
|
||||
|
goToGenerate: function () { |
||||
|
wx.redirectTo({ |
||||
|
url: '/pages/qrcode/index?from=internal' |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片加载成功事件
|
||||
|
onImageLoad: function () { |
||||
|
console.log('二维码图片加载成功'); |
||||
|
}, |
||||
|
|
||||
|
// 图片加载失败事件
|
||||
|
onImageError: function (e) { |
||||
|
console.error('二维码图片加载失败:', e); |
||||
|
wx.showToast({ |
||||
|
title: '二维码图片加载失败', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}); |
||||
@ -0,0 +1,6 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText": "二维码合集", |
||||
|
"navigationBarBackgroundColor": "#ffffff", |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"enablePullDownRefresh": true |
||||
|
} |
||||
@ -0,0 +1,111 @@ |
|||||
|
<!--pages/collection/index.wxml--> |
||||
|
<view class="page-container"> |
||||
|
<!-- 筛选和搜索栏 --> |
||||
|
<view class="filter-bar"> |
||||
|
<view class="filter-tabs"> |
||||
|
<view class="filter-tab {{activeFilter === 'all' ? 'active' : ''}}" data-filter="all" bindtap="switchFilter"> |
||||
|
<text>全部</text> |
||||
|
</view> |
||||
|
<view class="filter-tab {{activeFilter === 'me' ? 'active' : ''}}" data-filter="me" bindtap="switchFilter"> |
||||
|
<text>我的</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="search-container"> |
||||
|
<input |
||||
|
type="text" |
||||
|
placeholder="搜索电话号码/主体名称" |
||||
|
bindinput="onSearchInput" |
||||
|
value="{{searchKeyword}}" |
||||
|
class="search-input" |
||||
|
/> |
||||
|
</view> |
||||
|
<view wx:if="isAdmin && invitees.length > 0" class="filter-button" bindtap="openSidebar"> |
||||
|
<text class="filter-icon">🔍</text> |
||||
|
<text class="filter-text">筛选</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 二维码列表 --> |
||||
|
<view class="qr-list"> |
||||
|
<block wx:if="{{qrCodes.length === 0}}"> |
||||
|
<view class="empty-state"> |
||||
|
<image |
||||
|
src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=empty" |
||||
|
mode="aspectFit" |
||||
|
class="empty-image" |
||||
|
/> |
||||
|
<text class="empty-text">暂无二维码</text> |
||||
|
<text class="empty-subtext">请先生成邀请二维码</text> |
||||
|
</view> |
||||
|
</block> |
||||
|
<block wx:else> |
||||
|
<block wx:for="{{qrCodes}}" wx:key="sessionId" wx:for-index="index"> |
||||
|
<!-- 二维码项 --> |
||||
|
<view class="qr-item" bindtap="toggleSection" data-index="{{index}}"> |
||||
|
<view class="qr-item-header"> |
||||
|
<view class="qr-item-info"> |
||||
|
<rich-text nodes="{{item.company ? item.company : '未知'}}"></rich-text> |
||||
|
<view class="qr-item-details"> |
||||
|
<rich-text nodes="{{item.phoneNumber ? item.phoneNumber : '未知'}}"></rich-text> |
||||
|
<text> / {{item.createdAt || '未知'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="qr-item-arrow"> |
||||
|
<text>{{expandedIndex === index ? '▲' : '▼'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 二维码详情 --> |
||||
|
<view class="qr-item-content" wx:if="{{expandedIndex === index}}"> |
||||
|
<image |
||||
|
src="{{item.qrCodeUrl || 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + encodeURIComponent(item.url)}}" |
||||
|
mode="aspectFit" |
||||
|
class="qr-image" |
||||
|
bindload="onImageLoad" |
||||
|
binderror="onImageError" |
||||
|
/> |
||||
|
<view class="qr-info-center"> |
||||
|
<view class="qr-info-item"> |
||||
|
<text>{{item.inviter || '未知'}}</text> |
||||
|
</view> |
||||
|
<view class="qr-info-item"> |
||||
|
<text>{{item.inviterProjectName || '无职位'}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</block> |
||||
|
</block> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 底部按钮 --> |
||||
|
<view class="bottom-section"> |
||||
|
<button class="generate-button" bindtap="goToGenerate"> |
||||
|
<text class="generate-button-text">生成邀请二维码</text> |
||||
|
</button> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 筛选侧边栏 --> |
||||
|
<view class="sidebar" wx:if="{{sidebarVisible}}"> |
||||
|
<view class="sidebar-overlay" bindtap="closeSidebar"></view> |
||||
|
<view class="sidebar-content"> |
||||
|
<view class="sidebar-header"> |
||||
|
<text class="sidebar-title">筛选用户</text> |
||||
|
<view class="sidebar-close" bindtap="closeSidebar"> |
||||
|
<text>✕</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="sidebar-body"> |
||||
|
<view |
||||
|
wx:for="{{invitees}}" |
||||
|
wx:key="inviter" |
||||
|
class="sidebar-item" |
||||
|
data-filter="invitee_{{index}}" |
||||
|
data-inviter="{{item.inviter}}" |
||||
|
bindtap="filterByInviter" |
||||
|
> |
||||
|
<text class="sidebar-item-text">{{item.inviter}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,434 @@ |
|||||
|
/* pages/collection/index.wxss */ |
||||
|
|
||||
|
/* 页面容器 */ |
||||
|
.page-container { |
||||
|
width: 100%; |
||||
|
background-color: #f5f5f5; |
||||
|
min-height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 筛选和搜索栏 */ |
||||
|
.filter-bar { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 16rpx; |
||||
|
background-color: #f0f9f0; |
||||
|
border-bottom: 1rpx solid #d4edda; |
||||
|
box-sizing: border-box; |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 900; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 12rpx; |
||||
|
min-height: 100rpx; |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
|
||||
|
.filter-tabs { |
||||
|
display: flex; |
||||
|
gap: 8rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.filter-tab { |
||||
|
padding: 6rpx 12rpx; |
||||
|
border-radius: 16rpx; |
||||
|
background-color: #f0f0f0; |
||||
|
font-size: 22rpx; |
||||
|
color: #666; |
||||
|
transition: all 0.3s; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.filter-tab.active { |
||||
|
background-color: #4CAF50; |
||||
|
color: white; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
flex: 1; |
||||
|
min-width: 150rpx; |
||||
|
position: relative; |
||||
|
margin: 0 8rpx; |
||||
|
flex-basis: 0; |
||||
|
max-width: 400rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
width: 100%; |
||||
|
flex: 1; |
||||
|
padding: 16rpx 20rpx; |
||||
|
border: 1rpx solid #e0e0e0; |
||||
|
border-radius: 12rpx; |
||||
|
font-size: 28rpx; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #f9f9f9; |
||||
|
min-height: 70rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input:focus { |
||||
|
border-color: #4CAF50; |
||||
|
background-color: #ffffff; |
||||
|
box-shadow: 0 0 0 2rpx rgba(76, 175, 80, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 高亮效果 */ |
||||
|
.highlight { |
||||
|
background-color: #FFF3CD; |
||||
|
color: #856404; |
||||
|
padding: 0 4rpx; |
||||
|
border-radius: 4rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.filter-button { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6rpx; |
||||
|
padding: 12rpx 16rpx; |
||||
|
background-color: #4CAF50; |
||||
|
color: white; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 24rpx; |
||||
|
flex-shrink: 0; |
||||
|
min-height: 60rpx; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.filter-icon { |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.filter-text { |
||||
|
font-size: 22rpx; |
||||
|
} |
||||
|
|
||||
|
/* 二维码列表 */ |
||||
|
.qr-list { |
||||
|
padding: 16rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 100rpx 0; |
||||
|
color: #999; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
.empty-image { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 28rpx; |
||||
|
margin-bottom: 8rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.empty-subtext { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 二维码项 */ |
||||
|
.qr-item { |
||||
|
background-color: white; |
||||
|
border-radius: 12rpx; |
||||
|
margin-bottom: 16rpx; |
||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06); |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.qr-item-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 16rpx; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.qr-item-info { |
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.qr-item-info rich-text { |
||||
|
display: block; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
color: #333; |
||||
|
margin-bottom: 8rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.qr-item-details { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.qr-item-details rich-text { |
||||
|
display: inline; |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.qr-item-details text { |
||||
|
margin-left: 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.qr-item-arrow { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
margin-left: 16rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
/* 二维码详情 */ |
||||
|
.qr-item-content { |
||||
|
padding: 0 16rpx 16rpx; |
||||
|
border-top: 1rpx solid #f0f0f0; |
||||
|
animation: slideDown 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
@keyframes slideDown { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(-10rpx); |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.qr-image { |
||||
|
width: 200rpx; |
||||
|
height: 200rpx; |
||||
|
margin: 16rpx auto; |
||||
|
display: block; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.qr-info-center { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.qr-info-item { |
||||
|
margin-bottom: 8rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
max-width: 200rpx; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
/* 底部按钮 */ |
||||
|
.bottom-section { |
||||
|
padding: 20rpx 16rpx; |
||||
|
background-color: white; |
||||
|
border-top: 1rpx solid #e0e0e0; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.generate-button { |
||||
|
width: 100%; |
||||
|
height: 80rpx; |
||||
|
background-color: #4CAF50; |
||||
|
color: white; |
||||
|
border: none; |
||||
|
border-radius: 12rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.generate-button-text { |
||||
|
color: white; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
/* 筛选侧边栏 */ |
||||
|
.sidebar { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 2000; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.sidebar-overlay { |
||||
|
flex: 1; |
||||
|
background-color: rgba(0, 0, 0, 0.5); |
||||
|
} |
||||
|
|
||||
|
.sidebar-content { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
width: 70%; |
||||
|
max-width: 300rpx; |
||||
|
background-color: white; |
||||
|
box-shadow: -4rpx 0 10rpx rgba(0, 0, 0, 0.1); |
||||
|
animation: slideIn 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
@keyframes slideIn { |
||||
|
from { |
||||
|
transform: translateX(100%); |
||||
|
} |
||||
|
to { |
||||
|
transform: translateX(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sidebar-header { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 20rpx; |
||||
|
border-bottom: 1rpx solid #e0e0e0; |
||||
|
} |
||||
|
|
||||
|
.sidebar-title { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.sidebar-close { |
||||
|
font-size: 32rpx; |
||||
|
color: #999; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.sidebar-body { |
||||
|
padding: 20rpx; |
||||
|
max-height: calc(100% - 80rpx); |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
|
||||
|
.sidebar-item { |
||||
|
padding: 16rpx 0; |
||||
|
border-bottom: 1rpx solid #f0f0f0; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.sidebar-item:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
|
||||
|
.sidebar-item-text { |
||||
|
font-size: 24rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 响应式调整 */ |
||||
|
@media (max-width: 375px) { |
||||
|
.filter-bar { |
||||
|
flex-direction: column; |
||||
|
align-items: stretch; |
||||
|
} |
||||
|
|
||||
|
.filter-tabs { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
min-width: 100%; |
||||
|
margin: 8rpx 0; |
||||
|
} |
||||
|
|
||||
|
.filter-button { |
||||
|
align-self: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 针对中等屏幕的调整 */ |
||||
|
@media (min-width: 376px) and (max-width: 480px) { |
||||
|
.filter-bar { |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.filter-tabs { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
flex: 1; |
||||
|
min-width: 150rpx; |
||||
|
max-width: 300rpx; |
||||
|
} |
||||
|
|
||||
|
.filter-button { |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 针对大屏幕的调整 */ |
||||
|
@media (min-width: 481px) { |
||||
|
.filter-bar { |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
.search-container { |
||||
|
flex: 1; |
||||
|
min-width: 200rpx; |
||||
|
max-width: 400rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 滚动条样式 */ |
||||
|
::-webkit-scrollbar { |
||||
|
width: 4rpx; |
||||
|
height: 4rpx; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-track { |
||||
|
background: #f1f1f1; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb { |
||||
|
background: #c1c1c1; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb:hover { |
||||
|
background: #a8a8a8; |
||||
|
} |
||||
Loading…
Reference in new issue