695 lines
14 KiB
Vue
695 lines
14 KiB
Vue
<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>
|