fix: 功能完善修改。
This commit is contained in:
tianyongbao
@@ -14,22 +14,19 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/index",
|
"path": "pages/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "纪念币查询"
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/banknote/index",
|
"path": "pages/banknote/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "纪念钞查询"
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/metal/index",
|
"path": "pages/metal/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "",
|
"navigationBarTitleText": "贵金属查询"
|
||||||
"navigationStyle": "custom"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -133,13 +130,13 @@
|
|||||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||||
"text": "纪念钞"
|
"text": "纪念钞"
|
||||||
}
|
}
|
||||||
// ,
|
,
|
||||||
// {
|
{
|
||||||
// "pagePath": "pages/metal/index",
|
"pagePath": "pages/metal/index",
|
||||||
// "iconPath": "static/images/tabbar/statistic.png",
|
"iconPath": "static/images/tabbar/statistic.png",
|
||||||
// "selectedIconPath": "static/images/tabbar/statistic.png",
|
"selectedIconPath": "static/images/tabbar/statistic.png",
|
||||||
// "text": "贵金属"
|
"text": "贵金属"
|
||||||
// }
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"globalStyle": {
|
"globalStyle": {
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<uni-navbar :statusBar="true" title="纪念钞查询" />
|
|
||||||
|
|
||||||
<!-- 查询条件区域 -->
|
<!-- 查询条件区域 -->
|
||||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
<u-sticky offsetTop="0" customNavHeight="0">
|
||||||
<view class="search-view">
|
<view class="search-view">
|
||||||
<view class="search-input-wrapper">
|
<view class="search-input-wrapper">
|
||||||
<u--input
|
<u--input
|
||||||
@@ -35,42 +33,43 @@
|
|||||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-transition :show="filterPanel" mode="fade">
|
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
|
||||||
<view class="filter-panel-content">
|
|
||||||
<view class="filter-title">材质选择</view>
|
|
||||||
<view class="state-list">
|
|
||||||
<view
|
|
||||||
v-for="item in compositionOptions"
|
|
||||||
:key="item.dictValue"
|
|
||||||
class="state-item"
|
|
||||||
:class="queryParams.composition === item.dictValue ? 'active' : ''"
|
|
||||||
@click="selectComposition(item)">
|
|
||||||
{{ item.dictLabel }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="btn-box">
|
|
||||||
<view class="btn-reset" @click="handleReset()">
|
|
||||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
|
||||||
<text>重置</text>
|
|
||||||
</view>
|
|
||||||
<view class="btn-confirm" @click="searchSubmit()">
|
|
||||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
||||||
<text>确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</u-transition>
|
|
||||||
</view>
|
</view>
|
||||||
</u-sticky>
|
</u-sticky>
|
||||||
|
|
||||||
|
<!-- 筛选面板 -->
|
||||||
|
<u-transition :show="filterPanel" mode="slide-down">
|
||||||
|
<view class="filter-panel">
|
||||||
|
<view class="filter-panel-content">
|
||||||
|
<view class="filter-title">材质选择</view>
|
||||||
|
<view class="state-list">
|
||||||
|
<view
|
||||||
|
v-for="item in compositionOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
class="state-item"
|
||||||
|
:class="queryParams.composition === item.dictValue ? 'active' : ''"
|
||||||
|
@click="selectComposition(item)">
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="btn-reset" @click="handleReset()">
|
||||||
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm" @click="searchSubmit()">
|
||||||
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-transition>
|
||||||
|
|
||||||
<!-- 数据列表 -->
|
<!-- 数据列表 -->
|
||||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
<u-list @scrolltolower="loadmore" lowerThreshold="100">
|
||||||
<u-list-item v-for="(item, index) in dataList" :key="index">
|
<u-list-item v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="list-item" @click="handleViewDetail(item)">
|
<view class="list-item" >
|
||||||
<view class="item-header">
|
<view class="item-header">
|
||||||
<view class="card-name-section">
|
<view class="card-name-section">
|
||||||
<view class="card-icon">
|
<view class="card-icon">
|
||||||
@@ -366,7 +365,7 @@ onMounted(() => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
page {
|
page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -471,122 +470,127 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-panel {
|
}
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 96rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel {
|
||||||
background-color: #ffffff;
|
width: 100%;
|
||||||
padding: 0 30rpx 30rpx;
|
position: fixed;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
left: 0;
|
||||||
|
top: 90rpx;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
.filter-title {
|
.filter-panel-content {
|
||||||
color: #2c3e50;
|
background-color: #ffffff;
|
||||||
font-size: 32rpx;
|
padding: 0 30rpx 30rpx;
|
||||||
font-weight: 600;
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
.filter-title {
|
||||||
display: flex;
|
color: #2c3e50;
|
||||||
flex-wrap: wrap;
|
font-size: 32rpx;
|
||||||
justify-content: flex-start;
|
font-weight: 600;
|
||||||
gap: 16rpx;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
margin-bottom: 24rpx;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
.state-item {
|
align-items: center;
|
||||||
padding: 0 32rpx;
|
|
||||||
height: 68rpx;
|
&::before {
|
||||||
border: 2rpx solid #e8edf3;
|
content: '';
|
||||||
border-radius: 34rpx;
|
width: 6rpx;
|
||||||
text-align: center;
|
height: 32rpx;
|
||||||
line-height: 68rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
font-size: 28rpx;
|
border-radius: 3rpx;
|
||||||
color: #666666;
|
margin-right: 12rpx;
|
||||||
transition: all 0.3s ease;
|
flex-shrink: 0;
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border: 2rpx solid transparent;
|
|
||||||
color: #ffffff;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.btn-reset,
|
.state-item {
|
||||||
.btn-confirm {
|
padding: 0 32rpx;
|
||||||
display: flex;
|
height: 68rpx;
|
||||||
align-items: center;
|
border: 2rpx solid #e8edf3;
|
||||||
justify-content: center;
|
border-radius: 34rpx;
|
||||||
gap: 8rpx;
|
text-align: center;
|
||||||
height: 88rpx;
|
line-height: 68rpx;
|
||||||
border-radius: 12rpx;
|
font-size: 28rpx;
|
||||||
font-size: 30rpx;
|
color: #666666;
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.95);
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.btn-reset {
|
&:active {
|
||||||
flex: 1;
|
transform: scale(0.98);
|
||||||
background: #f5f7fa;
|
opacity: 0.9;
|
||||||
border: 2rpx solid #dcdfe6;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
text {
|
||||||
flex: 1;
|
line-height: 1;
|
||||||
background: #667eea;
|
}
|
||||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
}
|
||||||
border: none;
|
|
||||||
|
.btn-reset {
|
||||||
text {
|
flex: 1;
|
||||||
color: #ffffff;
|
background: #f5f7fa;
|
||||||
}
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<uni-navbar :statusBar="true" title="纪念币查询" />
|
|
||||||
|
|
||||||
<!-- 查询条件区域 -->
|
<!-- 查询条件区域 -->
|
||||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
<u-sticky offsetTop="0" customNavHeight="0">
|
||||||
<view class="search-view">
|
<view class="search-view">
|
||||||
<view class="search-input-wrapper">
|
<view class="search-input-wrapper">
|
||||||
<u--input
|
<u--input
|
||||||
@@ -35,42 +33,43 @@
|
|||||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-transition :show="filterPanel" mode="fade">
|
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
|
||||||
<view class="filter-panel-content">
|
|
||||||
<view class="filter-title">系列选择</view>
|
|
||||||
<view class="state-list">
|
|
||||||
<view
|
|
||||||
v-for="item in seriesOptions"
|
|
||||||
:key="item.dictValue"
|
|
||||||
class="state-item"
|
|
||||||
:class="queryParams.series === item.dictValue ? 'active' : ''"
|
|
||||||
@click="selectSeries(item)">
|
|
||||||
{{ item.dictLabel }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="btn-box">
|
|
||||||
<view class="btn-reset" @click="handleReset()">
|
|
||||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
|
||||||
<text>重置</text>
|
|
||||||
</view>
|
|
||||||
<view class="btn-confirm" @click="searchSubmit()">
|
|
||||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
||||||
<text>确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</u-transition>
|
|
||||||
</view>
|
</view>
|
||||||
</u-sticky>
|
</u-sticky>
|
||||||
|
|
||||||
|
<!-- 筛选面板 -->
|
||||||
|
<u-transition :show="filterPanel" mode="slide-down">
|
||||||
|
<view class="filter-panel">
|
||||||
|
<view class="filter-panel-content">
|
||||||
|
<view class="filter-title">系列选择</view>
|
||||||
|
<view class="state-list">
|
||||||
|
<view
|
||||||
|
v-for="item in seriesOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
class="state-item"
|
||||||
|
:class="queryParams.series === item.dictValue ? 'active' : ''"
|
||||||
|
@click="selectSeries(item)">
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="btn-reset" @click="handleReset()">
|
||||||
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm" @click="searchSubmit()">
|
||||||
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-transition>
|
||||||
|
|
||||||
<!-- 数据列表 -->
|
<!-- 数据列表 -->
|
||||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
<u-list @scrolltolower="loadmore" lowerThreshold="100">
|
||||||
<u-list-item v-for="(item, index) in dataList" :key="index">
|
<u-list-item v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="list-item" @click="handleViewDetail(item)">
|
<view class="list-item">
|
||||||
<view class="item-header">
|
<view class="item-header">
|
||||||
<view class="card-name-section">
|
<view class="card-name-section">
|
||||||
<view class="card-icon">
|
<view class="card-icon">
|
||||||
@@ -407,7 +406,7 @@ onMounted(() => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
page {
|
page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -512,122 +511,127 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-panel {
|
}
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 96rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel {
|
||||||
background-color: #ffffff;
|
width: 100%;
|
||||||
padding: 0 30rpx 30rpx;
|
position: fixed;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
left: 0;
|
||||||
|
top: 90rpx;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
.filter-title {
|
.filter-panel-content {
|
||||||
color: #2c3e50;
|
background-color: #ffffff;
|
||||||
font-size: 32rpx;
|
padding: 0 30rpx 30rpx;
|
||||||
font-weight: 600;
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
.filter-title {
|
||||||
display: flex;
|
color: #2c3e50;
|
||||||
flex-wrap: wrap;
|
font-size: 32rpx;
|
||||||
justify-content: flex-start;
|
font-weight: 600;
|
||||||
gap: 16rpx;
|
padding: 32rpx 0 24rpx 20rpx;
|
||||||
margin-bottom: 24rpx;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
.state-item {
|
align-items: center;
|
||||||
padding: 0 32rpx;
|
|
||||||
height: 68rpx;
|
&::before {
|
||||||
border: 2rpx solid #e8edf3;
|
content: '';
|
||||||
border-radius: 34rpx;
|
width: 6rpx;
|
||||||
text-align: center;
|
height: 32rpx;
|
||||||
line-height: 68rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
font-size: 28rpx;
|
border-radius: 3rpx;
|
||||||
color: #666666;
|
margin-right: 12rpx;
|
||||||
transition: all 0.3s ease;
|
flex-shrink: 0;
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border: 2rpx solid transparent;
|
|
||||||
color: #ffffff;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.btn-reset,
|
.state-item {
|
||||||
.btn-confirm {
|
padding: 0 32rpx;
|
||||||
display: flex;
|
height: 68rpx;
|
||||||
align-items: center;
|
border: 2rpx solid #e8edf3;
|
||||||
justify-content: center;
|
border-radius: 34rpx;
|
||||||
gap: 8rpx;
|
text-align: center;
|
||||||
height: 88rpx;
|
line-height: 68rpx;
|
||||||
border-radius: 12rpx;
|
font-size: 28rpx;
|
||||||
font-size: 30rpx;
|
color: #666666;
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.95);
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.btn-reset {
|
&:active {
|
||||||
flex: 1;
|
transform: scale(0.98);
|
||||||
background: #f5f7fa;
|
opacity: 0.9;
|
||||||
border: 2rpx solid #dcdfe6;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
text {
|
||||||
flex: 1;
|
line-height: 1;
|
||||||
background: #667eea;
|
}
|
||||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
}
|
||||||
border: none;
|
|
||||||
|
.btn-reset {
|
||||||
text {
|
flex: 1;
|
||||||
color: #ffffff;
|
background: #f5f7fa;
|
||||||
}
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<uni-navbar :statusBar="true" title="贵金属查询" />
|
|
||||||
|
|
||||||
<!-- 查询条件区域 -->
|
<!-- 查询条件区域 -->
|
||||||
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
<u-sticky offsetTop="0" customNavHeight="0">
|
||||||
<view class="search-view">
|
<view class="search-view">
|
||||||
<view class="search-input-wrapper">
|
<view class="search-input-wrapper">
|
||||||
<u--input
|
<u--input
|
||||||
@@ -26,44 +24,71 @@
|
|||||||
</uni-icons>
|
</uni-icons>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view class="reset-btn" @click="handleResetAll()">
|
||||||
|
<uni-icons type="reload" size="18" color="#667eea"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
<view class="filter-btn" @click="filterPanel = !filterPanel">
|
||||||
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
<uni-icons type="list" size="18" color="#667eea"></uni-icons>
|
||||||
<text>筛选</text>
|
<text>筛选</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<u-transition :show="filterPanel" mode="fade">
|
|
||||||
<view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
|
|
||||||
<view class="filter-panel-content">
|
|
||||||
<view class="filter-title">系列选择</view>
|
|
||||||
<view class="state-list">
|
|
||||||
<view
|
|
||||||
v-for="item in seriesOptions"
|
|
||||||
:key="item.dictValue"
|
|
||||||
class="state-item"
|
|
||||||
:class="queryParams.series === item.dictValue ? 'active' : ''"
|
|
||||||
@click="selectSeries(item)">
|
|
||||||
{{ item.dictLabel }}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="btn-box">
|
|
||||||
<view class="btn-reset" @click="handleReset()">
|
|
||||||
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
|
||||||
<text>重置</text>
|
|
||||||
</view>
|
|
||||||
<view class="btn-confirm" @click="searchSubmit()">
|
|
||||||
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
|
||||||
<text>确定</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</u-transition>
|
|
||||||
</view>
|
</view>
|
||||||
</u-sticky>
|
</u-sticky>
|
||||||
|
|
||||||
|
<!-- 筛选面板 -->
|
||||||
|
<u-transition :show="filterPanel" mode="slide-down">
|
||||||
|
<view class="filter-panel">
|
||||||
|
<view class="filter-panel-content">
|
||||||
|
<view class="filter-title">项目题材选择</view>
|
||||||
|
<view class="state-list">
|
||||||
|
<view
|
||||||
|
v-for="item in blockTypeOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
class="state-item"
|
||||||
|
:class="queryParams.blockType === item.dictValue ? 'active' : ''"
|
||||||
|
@click="selectBlockType(item)">
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="filter-title">系列选择</view>
|
||||||
|
<view class="state-list">
|
||||||
|
<view
|
||||||
|
v-for="item in seriesOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
class="state-item"
|
||||||
|
:class="queryParams.series === item.dictValue ? 'active' : ''"
|
||||||
|
@click="selectSeries(item)">
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="btn-reset" @click="handleReset()">
|
||||||
|
<uni-icons type="reload" size="16" color="#909399"></uni-icons>
|
||||||
|
<text>重置</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-confirm" @click="searchSubmit()">
|
||||||
|
<uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
|
||||||
|
<text>确定</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-transition>
|
||||||
|
|
||||||
|
<!-- 年份选择器 -->
|
||||||
|
<u-picker
|
||||||
|
:show="showYearPicker"
|
||||||
|
:columns="yearColumns"
|
||||||
|
@confirm="confirmYear"
|
||||||
|
@cancel="showYearPicker = false"
|
||||||
|
@close="showYearPicker = false"
|
||||||
|
></u-picker>
|
||||||
|
|
||||||
<!-- 数据列表 -->
|
<!-- 数据列表 -->
|
||||||
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
<u-list @scrolltolower="loadmore" lowerThreshold="100">
|
||||||
<u-list-item v-for="(item, index) in dataList" :key="index">
|
<u-list-item v-for="(item, index) in dataList" :key="index">
|
||||||
<view class="list-item" @click="handleViewDetail(item)">
|
<view class="list-item" @click="handleViewDetail(item)">
|
||||||
<view class="item-header">
|
<view class="item-header">
|
||||||
@@ -79,68 +104,80 @@
|
|||||||
|
|
||||||
<view class="card-body">
|
<view class="card-body">
|
||||||
<view class="info-row">
|
<view class="info-row">
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.shortName">
|
||||||
<text class="info-label">名称</text>
|
<text class="info-label">名称</text>
|
||||||
<text class="info-value">{{ item.shortName || '--' }}</text>
|
<text class="info-value">{{ item.shortName }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.issueDate">
|
||||||
<text class="info-label">系列</text>
|
|
||||||
<text class="info-value">{{ getSeriesLabel(item.series) }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="info-item">
|
|
||||||
<text class="info-label">发行时间</text>
|
<text class="info-label">发行时间</text>
|
||||||
<text class="info-value">{{ item.issueDate || '--' }}</text>
|
<text class="info-value">{{ item.issueDate }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.faceValue">
|
||||||
<text class="info-label">面值</text>
|
<text class="info-label">面额</text>
|
||||||
<text class="info-value">{{ item.faceValue }}元</text>
|
<text class="info-value">{{ item.faceValue }}元</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.mintage">
|
||||||
<text class="info-label">发行量</text>
|
<text class="info-label">最大发行量（枚）</text>
|
||||||
<text class="info-value">{{ item.mintage }}</text>
|
<text class="info-value">{{ item.mintage }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="info-item" v-if="item.weight">
|
||||||
<view class="info-item">
|
<text class="info-label">重量</text>
|
||||||
<text class="info-label">材质</text>
|
<text class="info-value">{{ item.weight }}</text>
|
||||||
<text class="info-value">{{ getCompositionLabel(item.composition) }}</text>
|
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.shape">
|
||||||
<text class="info-label">形状</text>
|
<text class="info-label">形状</text>
|
||||||
<text class="info-value">{{ getShapeLabel(item.shape) }}</text>
|
<text class="info-value">{{ getShapeLabel(item.shape) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.composition">
|
||||||
<text class="info-label">重量</text>
|
<text class="info-label">材质</text>
|
||||||
<text class="info-value">{{ item.weight || '--' }}</text>
|
<text class="info-value">{{ item.composition }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.dimension">
|
||||||
<text class="info-label">规格尺寸</text>
|
<text class="info-label">规格尺寸</text>
|
||||||
<text class="info-value">{{ item.dimension || '--' }}</text>
|
<text class="info-value">{{ item.dimension }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.code">
|
||||||
<text class="info-label">厚度</text>
|
<text class="info-label">编码</text>
|
||||||
<text class="info-value">{{ item.thickness || '--' }}</text>
|
<text class="info-value">{{ item.code }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.craft">
|
||||||
<text class="info-label">序号</text>
|
<text class="info-label">工艺</text>
|
||||||
<text class="info-value">{{ item.setNumber || '--' }}</text>
|
<text class="info-value">{{ item.craft }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="info-item">
|
<view class="info-item" v-if="item.quality">
|
||||||
<text class="info-label">币齿</text>
|
<text class="info-label">质量</text>
|
||||||
<text class="info-value">{{ getCoinTeethLabel(item.coinTeeth) }}</text>
|
<text class="info-value">{{ item.quality }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.fineness">
|
||||||
|
<text class="info-label">成色</text>
|
||||||
|
<text class="info-value">{{ item.fineness }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.blockType">
|
||||||
|
<text class="info-label">项目题材</text>
|
||||||
|
<text class="info-value">{{ getBlockTypeLabel(item.blockType) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.series">
|
||||||
|
<text class="info-label">系列</text>
|
||||||
|
<text class="info-value">{{ getSeriesLabel(item.series) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.remark">
|
||||||
|
<text class="info-label">发行公告</text>
|
||||||
|
<text class="info-value">{{ item.remark }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 图片展示区域 -->
|
<!-- 图片展示区域 -->
|
||||||
<view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
|
<view class="info-item info-item-full" v-if="item.collectFileList && item.collectFileList.length > 0">
|
||||||
<text class="info-label"></text>
|
|
||||||
<view class="image-list">
|
<view class="image-list">
|
||||||
<image
|
<view
|
||||||
v-for="(file, idx) in item.collectFileList.slice(0, 4)"
|
v-for="(file, idx) in item.collectFileList.slice(0, 4)"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
:src="getFullImageUrl(file.url)"
|
class="image-wrapper"
|
||||||
mode="aspectFill"
|
@click.stop="handlePreviewImages(item.collectFileList, idx)">
|
||||||
class="item-image"
|
<image
|
||||||
@click.stop="handlePreviewImages(item.collectFileList, idx)"
|
:src="getFullImageUrl(file.url)"
|
||||||
/>
|
mode="aspectFit"
|
||||||
|
class="item-image"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
<view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
|
<view v-if="item.collectFileList.length > 4" class="image-more" @click.stop="handlePreviewImages(item.collectFileList, 0)">
|
||||||
<text>+{{ item.collectFileList.length - 4 }}</text>
|
<text>+{{ item.collectFileList.length - 4 }}</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -154,16 +191,7 @@
|
|||||||
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||||
</u-list>
|
</u-list>
|
||||||
|
|
||||||
<!-- 年份选择器 -->
|
|
||||||
<u-datetime-picker
|
|
||||||
:closeOnClickOverlay="true"
|
|
||||||
:show="showYearPicker"
|
|
||||||
v-model="yearValue"
|
|
||||||
mode="year"
|
|
||||||
@close="showYearPicker = false"
|
|
||||||
@cancel="showYearPicker = false"
|
|
||||||
@confirm="confirmYear"
|
|
||||||
></u-datetime-picker>
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -179,6 +207,7 @@ const queryParams = ref({
|
|||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
issueYear: '',
|
issueYear: '',
|
||||||
|
blockType: '',
|
||||||
series: ''
|
series: ''
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -188,8 +217,17 @@ const total = ref(0)
|
|||||||
const status = ref('loadmore')
|
const status = ref('loadmore')
|
||||||
const showYearPicker = ref(false)
|
const showYearPicker = ref(false)
|
||||||
const filterPanel = ref(false)
|
const filterPanel = ref(false)
|
||||||
const yearValue = ref(Number(new Date()))
|
|
||||||
|
|
||||||
|
// 生成年份选项（最近100年）
|
||||||
|
const yearColumns = ref([
|
||||||
|
Array.from({ length: 100 }, (_, i) => {
|
||||||
|
const year = new Date().getFullYear() - i
|
||||||
|
return { text: `${year}年`, value: year }
|
||||||
|
})
|
||||||
|
])
|
||||||
|
|
||||||
|
// 项目题材选项（从字典获取）
|
||||||
|
const blockTypeOptions = ref([])
|
||||||
// 系列选项（从字典获取）
|
// 系列选项（从字典获取）
|
||||||
const seriesOptions = ref([])
|
const seriesOptions = ref([])
|
||||||
// 材质选项
|
// 材质选项
|
||||||
@@ -204,10 +242,16 @@ const windowHeight = computed(() => {
|
|||||||
return uni.getSystemInfoSync().windowHeight - 50
|
return uni.getSystemInfoSync().windowHeight - 50
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// 获取项目题材标签
|
||||||
|
const getBlockTypeLabel = (blockTypeValue) => {
|
||||||
|
const found = blockTypeOptions.value.find(item => item.dictValue === blockTypeValue)
|
||||||
|
return found ? found.dictLabel : '--'
|
||||||
|
}
|
||||||
|
|
||||||
// 获取系列标签
|
// 获取系列标签
|
||||||
const getSeriesLabel = (seriesValue) => {
|
const getSeriesLabel = (seriesValue) => {
|
||||||
const found = seriesOptions.value.find(item => item.dictValue === seriesValue)
|
const found = seriesOptions.value.find(item => item.dictValue === seriesValue)
|
||||||
return found ? found.dictLabel : '未知系列'
|
return found ? found.dictLabel : '--'
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取材质标签
|
// 获取材质标签
|
||||||
@@ -239,17 +283,20 @@ const getFullImageUrl = (url) => {
|
|||||||
return 'https://www.qdintc.com' + url
|
return 'https://www.qdintc.com' + url
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选择系列
|
|
||||||
const selectSeries = (item) => {
|
|
||||||
queryParams.value.series = item.dictValue
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载字典数据（无需token）
|
// 加载字典数据（无需token）
|
||||||
const loadDictData = async () => {
|
const loadDictData = async () => {
|
||||||
try {
|
try {
|
||||||
|
// 加载项目题材字典
|
||||||
|
const blockTypeRes = await request({
|
||||||
|
url: '/system/dict/data/type/precious_metal_block_type',
|
||||||
|
method: 'get',
|
||||||
|
headers: { isToken: false }
|
||||||
|
})
|
||||||
|
blockTypeOptions.value = blockTypeRes.data || []
|
||||||
|
|
||||||
// 加载系列字典
|
// 加载系列字典
|
||||||
const seriesRes = await request({
|
const seriesRes = await request({
|
||||||
url: '/system/dict/data/type/commemorative_coin_series',
|
url: '/system/dict/data/type/precious_metal_coin_series',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
headers: { isToken: false }
|
headers: { isToken: false }
|
||||||
})
|
})
|
||||||
@@ -309,6 +356,37 @@ const getList = async () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 重置所有查询条件
|
||||||
|
const handleResetAll = () => {
|
||||||
|
queryParams.value = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
issueYear: '',
|
||||||
|
blockType: '',
|
||||||
|
series: ''
|
||||||
|
}
|
||||||
|
dataList.value = []
|
||||||
|
total.value = 0
|
||||||
|
// 重置后自动查询
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择项目题材
|
||||||
|
const selectBlockType = (item) => {
|
||||||
|
queryParams.value.blockType = item.dictValue
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择系列
|
||||||
|
const selectSeries = (item) => {
|
||||||
|
queryParams.value.series = item.dictValue
|
||||||
|
}
|
||||||
|
|
||||||
|
// 筛选面板重置
|
||||||
|
const handleReset = () => {
|
||||||
|
queryParams.value.blockType = ''
|
||||||
|
queryParams.value.series = ''
|
||||||
|
}
|
||||||
|
|
||||||
// 确定查询
|
// 确定查询
|
||||||
const searchSubmit = () => {
|
const searchSubmit = () => {
|
||||||
queryParams.value.pageNum = 1
|
queryParams.value.pageNum = 1
|
||||||
@@ -317,23 +395,16 @@ const searchSubmit = () => {
|
|||||||
filterPanel.value = false
|
filterPanel.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置按钮
|
|
||||||
const handleReset = () => {
|
|
||||||
queryParams.value = {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
issueYear: '',
|
|
||||||
series: ''
|
|
||||||
}
|
|
||||||
dataList.value = []
|
|
||||||
total.value = 0
|
|
||||||
}
|
|
||||||
|
|
||||||
// 确认年份
|
// 确认年份
|
||||||
const confirmYear = (e) => {
|
const confirmYear = (e) => {
|
||||||
const year = dayjs(e.value).format('YYYY')
|
const selectedValue = e.value[0]
|
||||||
queryParams.value.issueYear = year
|
const year = typeof selectedValue === 'object' ? selectedValue.value : selectedValue
|
||||||
|
queryParams.value.issueYear = String(year)
|
||||||
showYearPicker.value = false
|
showYearPicker.value = false
|
||||||
|
// 选择年份后自动查询
|
||||||
|
queryParams.value.pageNum = 1
|
||||||
|
dataList.value = []
|
||||||
|
getList()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 加载更多
|
// 加载更多
|
||||||
@@ -374,7 +445,7 @@ onMounted(() => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
page {
|
page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
background: #f5f7fa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@@ -433,6 +504,29 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reset-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6rpx;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
background: rgba(102, 126, 234, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -456,122 +550,129 @@ page {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-panel {
|
}
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 96rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
|
||||||
z-index: 999;
|
|
||||||
|
|
||||||
.filter-panel-content {
|
.filter-panel {
|
||||||
background-color: #ffffff;
|
width: 100%;
|
||||||
padding: 0 30rpx 30rpx;
|
position: fixed;
|
||||||
border-radius: 16rpx 16rpx 0 0;
|
left: 0;
|
||||||
|
top: 90rpx;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 10000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
.filter-title {
|
.filter-panel-content {
|
||||||
color: #2c3e50;
|
background-color: #ffffff;
|
||||||
font-size: 32rpx;
|
padding: 0 30rpx 30rpx;
|
||||||
font-weight: 600;
|
border-radius: 0 0 16rpx 16rpx;
|
||||||
padding: 32rpx 0 24rpx 20rpx;
|
max-height: 70vh;
|
||||||
position: relative;
|
overflow-y: auto;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
width: 6rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border-radius: 3rpx;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.state-list {
|
.filter-title {
|
||||||
display: flex;
|
color: #2c3e50;
|
||||||
flex-wrap: wrap;
|
font-size: 36rpx;
|
||||||
justify-content: flex-start;
|
font-weight: 600;
|
||||||
gap: 16rpx;
|
padding: 40rpx 0 30rpx 20rpx;
|
||||||
margin-bottom: 24rpx;
|
position: relative;
|
||||||
|
display: flex;
|
||||||
.state-item {
|
align-items: center;
|
||||||
padding: 0 32rpx;
|
|
||||||
height: 68rpx;
|
&::before {
|
||||||
border: 2rpx solid #e8edf3;
|
content: '';
|
||||||
border-radius: 34rpx;
|
width: 6rpx;
|
||||||
text-align: center;
|
height: 32rpx;
|
||||||
line-height: 68rpx;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
font-size: 28rpx;
|
border-radius: 3rpx;
|
||||||
color: #666666;
|
margin-right: 12rpx;
|
||||||
transition: all 0.3s ease;
|
flex-shrink: 0;
|
||||||
background: #ffffff;
|
|
||||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
||||||
border: 2rpx solid transparent;
|
|
||||||
color: #ffffff;
|
|
||||||
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-box {
|
.state-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20rpx;
|
flex-wrap: wrap;
|
||||||
padding: 24rpx 30rpx;
|
justify-content: flex-start;
|
||||||
background-color: #fff;
|
gap: 16rpx;
|
||||||
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
margin-bottom: 24rpx;
|
||||||
|
|
||||||
.btn-reset,
|
.state-item {
|
||||||
.btn-confirm {
|
padding: 0 40rpx;
|
||||||
display: flex;
|
height: 80rpx;
|
||||||
align-items: center;
|
border: 2rpx solid #e8edf3;
|
||||||
justify-content: center;
|
border-radius: 40rpx;
|
||||||
gap: 8rpx;
|
text-align: center;
|
||||||
height: 88rpx;
|
line-height: 80rpx;
|
||||||
border-radius: 12rpx;
|
font-size: 32rpx;
|
||||||
font-size: 30rpx;
|
color: #666666;
|
||||||
font-weight: 600;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.95);
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
text {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-box {
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
|
||||||
|
|
||||||
|
.btn-reset,
|
||||||
|
.btn-confirm {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
height: 96rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 34rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
.btn-reset {
|
&:active {
|
||||||
flex: 1;
|
transform: scale(0.98);
|
||||||
background: #f5f7fa;
|
opacity: 0.9;
|
||||||
border: 2rpx solid #dcdfe6;
|
|
||||||
|
|
||||||
text {
|
|
||||||
color: #606266;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-confirm {
|
text {
|
||||||
flex: 1;
|
line-height: 1;
|
||||||
background: #667eea;
|
}
|
||||||
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
}
|
||||||
border: none;
|
|
||||||
|
.btn-reset {
|
||||||
text {
|
flex: 1;
|
||||||
color: #ffffff;
|
background: #f5f7fa;
|
||||||
}
|
border: 2rpx solid #dcdfe6;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-confirm {
|
||||||
|
flex: 1;
|
||||||
|
background: #667eea;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -705,28 +806,37 @@ page {
|
|||||||
|
|
||||||
.image-list {
|
.image-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-direction: column;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
gap: 12rpx;
|
gap: 12rpx;
|
||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
|
|
||||||
.item-image {
|
.image-wrapper {
|
||||||
width: 220rpx;
|
width: 100%;
|
||||||
height: 220rpx;
|
height: 400rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background: #f5f7fa;
|
background: #ffffff;
|
||||||
border: 2rpx solid #e8edf3;
|
overflow: hidden;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.98);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.item-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.image-more {
|
.image-more {
|
||||||
width: 220rpx;
|
width: 100%;
|
||||||
height: 220rpx;
|
height: 180rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background: rgba(102, 126, 234, 0.1);
|
background: rgba(102, 126, 234, 0.1);
|
||||||
border: 2rpx dashed rgba(102, 126, 234, 0.4);
|
border: 2rpx dashed rgba(102, 126, 234, 0.4);
|
||||||
@@ -736,12 +846,12 @@ page {
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.98);
|
||||||
background: rgba(102, 126, 234, 0.15);
|
background: rgba(102, 126, 234, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 36rpx;
|
font-size: 40rpx;
|
||||||
color: #667eea;
|
color: #667eea;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|||||||
447
src/pages/temp/list.vue
Normal file
447
src/pages/temp/list.vue
Normal file
@@ -0,0 +1,447 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<u-sticky offsetTop="0rpx" customNavHeight="0rpx">
|
||||||
|
<view class="search-view">
|
||||||
|
<u--input
|
||||||
|
v-model="queryParams.name"
|
||||||
|
border="surround"
|
||||||
|
placeholder="请输入名称或昵称"
|
||||||
|
placeholderStyle="color: #909399"
|
||||||
|
color="#333333"
|
||||||
|
customStyle="background: rgba(102, 126, 234, 0.08); border: 2rpx solid rgba(102, 126, 234, 0.3); border-radius: 24rpx; height: 66rpx"
|
||||||
|
class="search-input"
|
||||||
|
@blur="handleSearch"
|
||||||
|
suffixIcon="search"
|
||||||
|
suffixIconStyle="color: #667eea">
|
||||||
|
</u--input>
|
||||||
|
<view class="add-btn" @click="handleAdd()">
|
||||||
|
<uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
|
||||||
|
<text>新增</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-sticky>
|
||||||
|
<u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
|
||||||
|
<u-list-item v-for="(item, index) in listData" :key="index">
|
||||||
|
<view class="list-item">
|
||||||
|
<view class="item-header">
|
||||||
|
<view class="card-name-section">
|
||||||
|
<view class="card-icon">
|
||||||
|
<uni-icons type="person-filled" size="20" color="#ffffff"></uni-icons>
|
||||||
|
</view>
|
||||||
|
<view class="card-info">
|
||||||
|
<text class="card-name">{{ item.name }}（{{ item.nickName }}）</text>
|
||||||
|
<text class="card-code">{{ dictStr(item.sex, sexList) }} · {{ dictStr(item.type, typeList) }} · {{ item.age }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-body">
|
||||||
|
<view class="info-row">
|
||||||
|
<view class="info-item" v-if="item.birthday">
|
||||||
|
<text class="info-label">生日</text>
|
||||||
|
<text class="info-value">{{ item.birthday }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.identityCard">
|
||||||
|
<text class="info-label">身份证</text>
|
||||||
|
<text class="info-value">{{ item.identityCard }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.height">
|
||||||
|
<text class="info-label">身高（CM）</text>
|
||||||
|
<text class="info-value">{{ item.height }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item" v-if="item.weight">
|
||||||
|
<text class="info-label">体重（KG）</text>
|
||||||
|
<text class="info-value">{{ item.weight }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="info-item info-item-full" v-if="item.remark">
|
||||||
|
<text class="info-label">备注</text>
|
||||||
|
<text class="info-value">{{ item.remark }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="operate" @click.stop>
|
||||||
|
<view class="btn-edit" @click="handleEdit(item)">
|
||||||
|
<uni-icons type="compose" size="16" color="#667eea"></uni-icons>
|
||||||
|
<text>修改</text>
|
||||||
|
</view>
|
||||||
|
<view class="btn-delete" @click="handleDelete(item)">
|
||||||
|
<uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
|
||||||
|
<text>删除</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-list-item>
|
||||||
|
<view>
|
||||||
|
</view>
|
||||||
|
<u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
|
||||||
|
</u-list>
|
||||||
|
</view>
|
||||||
|
<!--返回首页按钮 -->
|
||||||
|
<suspend></suspend>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { listPerson, delPerson } from '@/api/health/person'
|
||||||
|
import { getDicts } from '@/api/system/dict/data.js'
|
||||||
|
import { timeHandler } from '@/utils/common.ts'
|
||||||
|
import {onLoad,onShow} from "@dcloudio/uni-app";
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
// 计算属性与监听属性是在vue中而非uniap中 需要注意！！！
|
||||||
|
import {reactive ,toRefs,ref,computed }from "vue";
|
||||||
|
const pageNum = ref(1)
|
||||||
|
const listData = ref([])
|
||||||
|
const isShow = ref(false)
|
||||||
|
const status = ref('loadmore')
|
||||||
|
const typeList = ref([])
|
||||||
|
const sexList = ref([])
|
||||||
|
const flag= ref(true)
|
||||||
|
const data = reactive({
|
||||||
|
filterPanel: false,
|
||||||
|
queryParams: {
|
||||||
|
name: null,
|
||||||
|
type: null,
|
||||||
|
nickName: null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const { filterPanel, queryParams} = toRefs(data)
|
||||||
|
const windowHeight = computed(() => {
|
||||||
|
uni.getSystemInfoSync().windowHeight - 50
|
||||||
|
})
|
||||||
|
onLoad(() => {
|
||||||
|
getList()
|
||||||
|
});
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
if (isShow.value) {
|
||||||
|
listData.value=[]
|
||||||
|
getList()
|
||||||
|
isShow.value = false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function handleSearch() {
|
||||||
|
pageNum.value = 1
|
||||||
|
listData.value = []
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
function dictStr(val, arr) {
|
||||||
|
let str = ''
|
||||||
|
arr.map(item => {
|
||||||
|
if (item.dictValue === val) {
|
||||||
|
str = item.dictLabel
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadmore() {
|
||||||
|
pageNum.value += 1
|
||||||
|
if (status.value == 'loadmore') {
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function getList() {
|
||||||
|
// 类型
|
||||||
|
getDicts('person_type').then(res => {
|
||||||
|
typeList.value = res.data
|
||||||
|
})
|
||||||
|
// 类型
|
||||||
|
getDicts('sys_user_sex').then(res => {
|
||||||
|
sexList.value = res.data
|
||||||
|
})
|
||||||
|
status.value = 'loading'
|
||||||
|
listPerson({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
|
||||||
|
listData.value = listData.value.concat(res.rows)
|
||||||
|
if (listData.value.length < res.total) {
|
||||||
|
status.value = 'loadmore'
|
||||||
|
} else {
|
||||||
|
status.value = 'nomore'
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
status.value = 'nomore'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(item) {
|
||||||
|
uni.navigateTo({ url: `/pages/health/person/addEdit?id=${item.id}` })
|
||||||
|
isShow.value = true
|
||||||
|
}
|
||||||
|
function handleAdd() {
|
||||||
|
uni.navigateTo({ url: `/pages/health/person/addEdit` })
|
||||||
|
isShow.value = true
|
||||||
|
}
|
||||||
|
function handleDelete(item) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认删除',
|
||||||
|
content: '确定要删除这条记录吗？',
|
||||||
|
confirmText: '删除',
|
||||||
|
cancelText: '取消',
|
||||||
|
confirmColor: '#f5576c',
|
||||||
|
cancelColor: '#909399',
|
||||||
|
success: function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
delPerson(item.id).then(() => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '删除成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
pageNum.value = 1
|
||||||
|
listData.value = []
|
||||||
|
getList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
page {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-view {
|
||||||
|
padding: 12rpx 32rpx;
|
||||||
|
background-color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
gap: 24rpx;
|
||||||
|
|
||||||
|
.search-input {
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
color: #333333;
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 0;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||||
|
height: 66rpx !important;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
/* H5端placeholder样式 */
|
||||||
|
:deep(input::placeholder) {
|
||||||
|
color: #909399 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(input::-webkit-input-placeholder) {
|
||||||
|
color: #909399 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(input::-moz-placeholder) {
|
||||||
|
color: #909399 !important;
|
||||||
|
font-size: 14px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 输入文字颜色 */
|
||||||
|
:deep(.u-input__content__field-wrapper__field) {
|
||||||
|
color: #333333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(input) {
|
||||||
|
color: #333333 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6rpx;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
border-radius: 24rpx;
|
||||||
|
border: 2rpx solid rgba(102, 126, 234, 0.3);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
background: rgba(102, 126, 234, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #667eea;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
uni-icons {
|
||||||
|
color: #667eea;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
margin: 10rpx 24rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.98);
|
||||||
|
box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 24rpx;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
|
||||||
|
.card-name-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.25);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
flex-shrink: 0;
|
||||||
|
letter-spacing: 0.5rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-code {
|
||||||
|
color: rgba(255, 255, 255, 0.9);
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.3;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
letter-spacing: 0.3rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 24rpx;
|
||||||
|
background: #fafbfc;
|
||||||
|
border: 2rpx solid #f0f2f5;
|
||||||
|
margin: 15rpx 16rpx 2rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 0 -12rpx;
|
||||||
|
|
||||||
|
.info-item {
|
||||||
|
width: 50%;
|
||||||
|
padding: 0 12rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
&.info-item-full {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-label {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #667eea;
|
||||||
|
font-weight: 500;
|
||||||
|
background: rgba(102, 126, 234, 0.08);
|
||||||
|
padding: 6rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
align-self: flex-start;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-value {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 1;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.info-item-full) .info-value {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operate {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 16rpx 24rpx 24rpx;
|
||||||
|
gap: 16rpx;
|
||||||
|
|
||||||
|
.btn-edit,
|
||||||
|
.btn-delete {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-edit {
|
||||||
|
background: rgba(102, 126, 234, 0.1);
|
||||||
|
color: #667eea;
|
||||||
|
border: 1rpx solid rgba(102, 126, 234, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
background: rgba(245, 87, 108, 0.1);
|
||||||
|
color: #f5576c;
|
||||||
|
border: 1rpx solid rgba(245, 87, 108, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user