first commit
This commit is contained in:
zoujiandong
@@ -0,0 +1,694 @@
|
||||
<template>
|
||||
<uni-nav-bar
|
||||
left-icon="left"
|
||||
title="期刊杂志"
|
||||
@clickLeft="goBack"
|
||||
fixed
|
||||
color="#8B2316"
|
||||
height="140rpx"
|
||||
:border="false"
|
||||
backgroundColor="#eeeeee"
|
||||
></uni-nav-bar>
|
||||
<view class="qikan-page">
|
||||
<!-- 导航头部 -->
|
||||
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="main-content">
|
||||
<!-- 标签切换区域 -->
|
||||
<view class="tab-section">
|
||||
<view class="tab-container">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'daichawenxian' }"
|
||||
@click="switchTab('daichawenxian')"
|
||||
>
|
||||
<text class="tab-text">代查文献</text>
|
||||
<view class="tab-underline" >
|
||||
<up-image :src="activeImg" width="48rpx" height="18rpx" v-if="activeTab === 'daichawenxian'"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 'yingwenwenxian' }"
|
||||
@click="switchTab('yingwenwenxian')"
|
||||
>
|
||||
<text class="tab-text">英文文献</text>
|
||||
<view class="tab-underline">
|
||||
<up-image :src="activeImg" width="48rpx" height="18rpx" v-if="activeTab === 'yingwenwenxian'"></up-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 代查文献内容 -->
|
||||
<view class="content-section" v-if="activeTab === 'daichawenxian'">
|
||||
<!-- 顶部图标和说明 -->
|
||||
|
||||
<up-image :src="paperImg" width="100%" ></up-image>
|
||||
<!-- 表单区域 -->
|
||||
<view class="form-section">
|
||||
<!-- 接收邮箱 -->
|
||||
<view class="form-group formemail">
|
||||
<view class="form-label">
|
||||
<text>接收邮箱</text>
|
||||
<text class="required">*</text>
|
||||
</view>
|
||||
<view class="input-container">
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="请输入文献接收邮箱"
|
||||
v-model="formData.email"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 文献单元列表 -->
|
||||
<view
|
||||
class="from-cell literature-item"
|
||||
v-for="(literature, index) in literatureList"
|
||||
:key="literature.id"
|
||||
>
|
||||
<!-- 文献类型标签 -->
|
||||
<view class="form-group wenxian">
|
||||
<view class="tag-container">
|
||||
<view class="tag-item active">文献{{ index + 1 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="formbox">
|
||||
<!-- 文献名称 -->
|
||||
<view class="form-group">
|
||||
<view class="form-label">
|
||||
<text>文献名称</text>
|
||||
<text class="required">*</text>
|
||||
</view>
|
||||
<view class="input-container">
|
||||
<textarea
|
||||
class="form-textarea"
|
||||
type="text"
|
||||
placeholder="不支持关键字/广泛查询"
|
||||
v-model="literature.literatureName"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 作者 -->
|
||||
<view class="form-group">
|
||||
<view class="form-label">
|
||||
<text>作者</text>
|
||||
</view>
|
||||
<view class="input-container">
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="请输入作者姓名"
|
||||
v-model="literature.author"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 期刊名称 -->
|
||||
<view class="form-group">
|
||||
<view class="form-label">
|
||||
<text>期刊名称</text>
|
||||
</view>
|
||||
<view class="input-container">
|
||||
<input
|
||||
class="form-input"
|
||||
type="text"
|
||||
placeholder="请输入期刊名称"
|
||||
v-model="literature.journalName"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 删除按钮 -->
|
||||
<view class="delbox" v-if="literatureList.length > 1" @click="removeLiterature(index)">
|
||||
<up-image :src="delImg" width="40rpx" height="52rpx"></up-image>
|
||||
</view>
|
||||
|
||||
<!-- 文献分隔线 -->
|
||||
<view class="literature-divider" v-if="index < literatureList.length - 1"></view>
|
||||
</view>
|
||||
<!-- 添加代查文献按钮 -->
|
||||
<view class="add-literature-section" v-if="literatureList.length < 5">
|
||||
<view class="add-button" @click="addLiterature">
|
||||
<up-icon name="plus" size="18" color="#4A90E2"></up-icon>
|
||||
<text class="add-text">添加代查文献</text>
|
||||
</view>
|
||||
<view class="limit-tip">
|
||||
<view class="imgbox">
|
||||
<up-image :src="countImg" width="186rpx" height="74rpx"></up-image>
|
||||
</view>
|
||||
<view class="count">还可添加{{ 5 - literatureList.length }}篇</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<view class="faq-section">
|
||||
<up-image :src="questionImg" width="100%" mode="widtFix"></up-image>
|
||||
|
||||
</view>
|
||||
<view class="tips">
|
||||
<view class="title">注意</view>
|
||||
<view class="row">每次至多提交5篇文献代查</view>
|
||||
<view class="row">每篇文献代查消耗50肝胆积分，代查成功后扣除</view>
|
||||
<view class="row">不支持模糊代查，请尽可能详细提供所需文献信息</view>
|
||||
</view>
|
||||
<view class="btnbox">
|
||||
<up-image :src="submitImg" width="100%" height="160rpx" mode="widtFix"></up-image>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 英文文献内容（暂时显示占位内容） -->
|
||||
<view class="content-section" v-if="activeTab === 'yingwenwenxian'">
|
||||
<view class="placeholder-content">
|
||||
<uni-icons type="info" size="60" color="#999"></uni-icons>
|
||||
<text class="placeholder-text">英文文献功能正在开发中...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部导航 -->
|
||||
<view class="bottom-tabbar">
|
||||
<view class="tab-item active" @click="switchTab('zhinan')">
|
||||
<text class="tab-text active">诊疗指南</text>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab('qikan')">
|
||||
<text class="tab-text">期刊杂志</text>
|
||||
</view>
|
||||
<view class="tab-item" @click="switchTab('tools')">
|
||||
<text class="tab-text">常用工具</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import paperImg from "@/static/paper_bg.png"
|
||||
import activeImg from "@/static/route.png"
|
||||
import emailImg from "@/static/email_bg.png"
|
||||
import countImg from "@/static/sheng_bg.png"
|
||||
import questionImg from "@/static/paper_question.png"
|
||||
import submitImg from "@/static/paper_submit.png"
|
||||
import delImg from "@/static/delete_paper.png"
|
||||
// 响应式数据
|
||||
const activeTab = ref('daichawenxian');
|
||||
|
||||
// 表单数据
|
||||
const formData = ref({
|
||||
email: '',
|
||||
literatureName: '',
|
||||
author: '',
|
||||
journalName: ''
|
||||
});
|
||||
|
||||
// 文献列表数据
|
||||
const literatureList = ref([
|
||||
{
|
||||
id: 1,
|
||||
literatureName: '',
|
||||
author: '',
|
||||
journalName: ''
|
||||
}
|
||||
]);
|
||||
|
||||
// 常见问题数据
|
||||
const faqList = ref([
|
||||
{
|
||||
question: '如何查找文献？',
|
||||
answer: '请提供准确的文献标题、作者和期刊信息，我们将为您查找并发送到指定邮箱。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '查找需要多长时间？',
|
||||
answer: '通常在1-3个工作日内完成文献查找并发送到您的邮箱。',
|
||||
expanded: false
|
||||
},
|
||||
{
|
||||
question: '支持哪些文献类型？',
|
||||
answer: '支持国内外期刊论文、会议论文、学位论文等多种文献类型。',
|
||||
expanded: false
|
||||
}
|
||||
]);
|
||||
|
||||
// 切换顶部标签
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
};
|
||||
|
||||
// 切换底部导航
|
||||
const switchBottomTab = (tab) => {
|
||||
if (tab === 'zhinan') {
|
||||
uni.navigateTo({
|
||||
url: '/pages_app/zhinan/zhinan'
|
||||
});
|
||||
} else if (tab === 'tools') {
|
||||
uni.showToast({
|
||||
title: '功能开发中',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 添加文献
|
||||
const addLiterature = () => {
|
||||
if (literatureList.value.length >= 5) {
|
||||
uni.showToast({
|
||||
title: '最多只能添加5篇文献',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const newLiterature = {
|
||||
id: Date.now(), // 使用时间戳作为唯一ID
|
||||
literatureName: '',
|
||||
author: '',
|
||||
journalName: ''
|
||||
};
|
||||
|
||||
literatureList.value.push(newLiterature);
|
||||
|
||||
uni.showToast({
|
||||
title: '添加成功',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
// 删除文献
|
||||
const removeLiterature = (index) => {
|
||||
if (literatureList.value.length <= 1) {
|
||||
uni.showToast({
|
||||
title: '至少保留一篇文献',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
literatureList.value.splice(index, 1);
|
||||
|
||||
uni.showToast({
|
||||
title: '删除成功',
|
||||
icon: 'success'
|
||||
});
|
||||
};
|
||||
|
||||
// 切换FAQ展开状态
|
||||
const toggleFaq = (index) => {
|
||||
faqList.value[index].expanded = !faqList.value[index].expanded;
|
||||
};
|
||||
|
||||
// 返回上一页
|
||||
const goBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 页面显示时的处理
|
||||
onShow(() => {
|
||||
console.log('期刊杂志页面显示');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// SCSS Variables
|
||||
$primary-color: #8B2316;
|
||||
$accent-color: #4A90E2;
|
||||
$bg-color: #f5f5f5;
|
||||
$white: #fff;
|
||||
$text-primary: #333;
|
||||
$text-secondary: #666;
|
||||
$text-light: #999;
|
||||
$border-color: #e0e0e0;
|
||||
$nav-height: 140rpx;
|
||||
|
||||
.qikan-page {
|
||||
background:#f6f6f6;
|
||||
min-height: 100vh;
|
||||
padding-top:0rpx;
|
||||
padding-bottom: 100rpx; // 为底部导航预留空间
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// 标签切换区域 - 固定在顶部
|
||||
.tab-section {
|
||||
position: fixed;
|
||||
top: $nav-height; // 140rpx
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 80;
|
||||
background-color: #a5d9fe;
|
||||
padding: 0 30rpx;
|
||||
|
||||
|
||||
.tab-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
|
||||
.tab-item {
|
||||
position: relative;
|
||||
margin-right: 60rpx;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.tab-text {
|
||||
font-size: 32rpx;
|
||||
color: $text-secondary;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.tab-text {
|
||||
color: $primary-color;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-underline {
|
||||
position: absolute;
|
||||
bottom:15rpx;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
transform: translateX(-50%);
|
||||
height: 18rpx;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 内容区域
|
||||
.content-section {
|
||||
background-color: $bg-color;
|
||||
min-height: calc(100vh - 340rpx);
|
||||
margin-top: 100rpx; // 为固定的标签切换区域留出空间
|
||||
}
|
||||
|
||||
// 头部横幅
|
||||
.header-banner {
|
||||
background: linear-gradient(135deg, #87CEEB, #B0E0E6);
|
||||
margin: 20rpx 30rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
|
||||
.banner-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon-container {
|
||||
position: relative;
|
||||
margin-right: 30rpx;
|
||||
|
||||
.sparkle-icon {
|
||||
position: absolute;
|
||||
top: -10rpx;
|
||||
right: -10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
flex: 1;
|
||||
|
||||
.main-title {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
color: $text-primary;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 24rpx;
|
||||
color: $text-secondary;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表单区域
|
||||
.form-section {
|
||||
|
||||
margin: -156rpx 30rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 0rpx 0rpx ;
|
||||
.wenxian{
|
||||
margin-top: 40rpx;
|
||||
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.from-cell{
|
||||
position: relative;
|
||||
.delbox{
|
||||
top:10rpx;
|
||||
right:30rpx;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.formbox{
|
||||
padding:30rpx 30rpx 30rpx;
|
||||
background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0;
|
||||
background-size: 100% 148rpx;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
z-index:8;
|
||||
}
|
||||
.formemail{
|
||||
padding:0 30rpx;
|
||||
height: 148rpx;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
border-radius: 20rpx;
|
||||
background:#fff url("@/static/email_bg.png") no-repeat 0rpx 0!important;
|
||||
background-size: cover!important;
|
||||
}
|
||||
|
||||
// 文献分隔线
|
||||
.literature-divider {
|
||||
height: 20rpx;
|
||||
margin: 20rpx 0;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
|
||||
margin-bottom: 40rpx;
|
||||
display: flex;
|
||||
|
||||
background-size: 100% 652rpx;
|
||||
overflow: hidden;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width:160rpx;
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
font-weight: 500;
|
||||
|
||||
.required {
|
||||
color: #ff4757;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
flex:1;
|
||||
.form-input,.form-textarea{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
padding: 0 20rpx;
|
||||
background:#f6f6f6;
|
||||
border: 2rpx solid $border-color;
|
||||
border-radius: 12rpx;
|
||||
font-size: 28rpx;
|
||||
color: $text-primary;
|
||||
background-color: $white;
|
||||
box-sizing: border-box;
|
||||
&::placeholder {
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $accent-color;
|
||||
}
|
||||
}
|
||||
.form-textarea{
|
||||
padding:20rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
.tag-item {
|
||||
display: inline-block;
|
||||
padding: 16rpx 32rpx;
|
||||
background-color: #008aff;
|
||||
color: $white;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.from-cell .form-group:nth-child(1){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.formbox .form-group:nth-child(1){
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 添加文献区域
|
||||
.add-literature-section {
|
||||
position: relative;
|
||||
margin-top: 40rpx;
|
||||
padding-top: 40rpx;
|
||||
border-top: 2rpx solid $border-color;
|
||||
|
||||
.add-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 80rpx;
|
||||
margin:0 20rpx;
|
||||
border: 2rpx solid #0197f1;
|
||||
border-radius:40rpx;
|
||||
background-color: rgba(74, 144, 226, 0.05);
|
||||
|
||||
.add-text {
|
||||
margin-left: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #0197f1;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.limit-tip {
|
||||
position: absolute;
|
||||
right:0;
|
||||
top:-10rpx;
|
||||
text-align: center;
|
||||
margin-top: 20rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
|
||||
width: 186rpx;
|
||||
height:74rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
.imgbox{
|
||||
top:0;
|
||||
position: absolute;
|
||||
}
|
||||
.count{
|
||||
margin-top: -20rpx;
|
||||
position: relative;
|
||||
z-index:3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 常见问题区域
|
||||
.faq-section {
|
||||
margin: 0rpx 30rpx;
|
||||
background-color: $white;
|
||||
border-radius: 20rpx;
|
||||
padding: 1rpx 1rpx;
|
||||
|
||||
}
|
||||
.tips{
|
||||
font-size: 24rpx;
|
||||
margin:30rpx 30rpx;
|
||||
color:#999;
|
||||
}
|
||||
.btnbox{
|
||||
margin:0 30rpx;
|
||||
}
|
||||
// 占位内容
|
||||
.placeholder-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 400rpx;
|
||||
|
||||
.placeholder-text {
|
||||
margin-top: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 底部导航
|
||||
.bottom-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100rpx;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
z-index: 100;
|
||||
|
||||
.tab-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
gap: 8rpx;
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: #8B2316;
|
||||
}
|
||||
.tab-icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
|
||||
.tab-text {
|
||||
font-size: 32rpx;
|
||||
color: $text-secondary;
|
||||
&.active {
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-item:nth-child(2){
|
||||
border-right: 2rpx solid #eee;
|
||||
border-left: 2rpx solid #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user