Augcl
/
novel-front-app
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

底部导航栏页面

master
Bobi 1 week ago
parent
8f95bc8356
commit
db0db183cc
15 changed files with 1013 additions and 110 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -0
      pages.json
  2. +243
    -97
      pages/index/center.vue
  3. +9
    -2
      pages_order/novel/Giftbox.vue
  4. +185
    -0
      pages_order/novel/Modifyinformation.vue
  5. +11
    -4
      pages_order/novel/Respondcomments.vue
  6. +299
    -0
      pages_order/novel/Translation.vue
  7. +10
    -1
      pages_order/novel/Walletflow.vue
  8. +7
    -2
      pages_order/novel/chapterList.vue
  9. +39
    -0
      pages_order/novel/components/AgreementCheck.vue
  10. +28
    -0
      pages_order/novel/components/BackArrow.vue
  11. +45
    -0
      pages_order/novel/components/LoginButton.vue
  12. +11
    -1
      pages_order/novel/creator.vue
  13. +109
    -0
      pages_order/novel/login.vue
  14. +4
    -2
      pages_order/novel/novelDetail.vue
  15. +4
    -1
      pages_order/novel/readnovels.vue

+ 9
- 0
pages.json View File

@ -105,6 +105,15 @@
},
{
"path": "novel/Mycomment"
},
{
"path": "novel/Translation"
},
{
"path": "novel/login"
},
{
"path": "novel/Modifyinformation"
}
]
}],


+ 243
- 97
pages/index/center.vue View File

@ -1,115 +1,146 @@
<template>
<view class="page">
<navbar/>
<view>
<view class="page" v-if="isLogin && !showLogoutModal">
<view class="user">
<!-- 用户信息区域 -->
<view class="user-info">
<image class="avatar" src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
<view class="info">
<view class="name">战斗世界 <text class="id">(ID: 50523541)</text></view>
<view class="desc">世界达人，小说控</view>
<view class="phone">手机号：19898474531</view>
</view>
<view class="more">
<uv-icon name="more-dot-fill" size="46rpx" color="#999"></uv-icon>
<view class="user">
<!-- 用户信息区域 -->
<view class="user-info">
<image class="avatar" src="https://img95.699pic.com/photo/50058/1378.jpg_wh860.jpg" mode=""></image>
<view class="info">
<view class="name">战斗世界 <text class="id">(ID: 50523541)</text></view>
<view class="desc">世界达人，小说控</view>
<view class="phone">手机号：19898474531</view>
</view>
<view class="more">
<uv-icon name="more-dot-fill" size="46rpx" color="#999"></uv-icon>
</view>
</view>
</view>
<!-- 图片区域 -->
<view class="section">
<view class="section-title">账户</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/Walletflow')">
<view class="section-item-left">
<uv-icon name="photo" size="40rpx" color="#333"></uv-icon>
<text>钱包流水</text>
<!-- 图片区域 -->
<view class="section">
<view class="section-title">账户</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/Walletflow')">
<view class="section-item-left">
<uv-icon name="photo" size="40rpx" color="#333"></uv-icon>
<text>钱包流水</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="section-item" @click="navigateToPage('/pages_order/novel/Giftbox')">
<view class="section-item-left">
<uv-icon name="gift" size="40rpx" color="#333"></uv-icon>
<text>礼物盒</text>
<view class="section-item" @click="navigateToPage('/pages_order/novel/Giftbox')">
<view class="section-item-left">
<uv-icon name="gift" size="40rpx" color="#333"></uv-icon>
<text>礼物盒</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
</view>
</view>
<!-- 日常区域 -->
<view class="section">
<view class="section-title">日常</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/Mycomment')">
<view class="section-item-left">
<uv-icon name="chat" size="40rpx" color="#333"></uv-icon>
<text>我的评论</text>
<!-- 日常区域 -->
<view class="section">
<view class="section-title">日常</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/Mycomment')">
<view class="section-item-left">
<uv-icon name="chat" size="40rpx" color="#333"></uv-icon>
<text>我的评论</text>
</view>
<view class="badge">294</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="badge">294</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="section-item" @click="navigateToPage('/pages/tasks')">
<view class="section-item-left">
<uv-icon name="list" size="40rpx" color="#333"></uv-icon>
<text>任务中心</text>
<view class="section-item" @click="navigateToPage('/pages_order/novel/Translation')">
<view class="section-item-left">
<uv-icon name="list" size="40rpx" color="#333"></uv-icon>
<text>任务中心</text>
</view>
<view class="badge">5</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="badge">5</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
</view>
</view>
<!-- 设置区域 -->
<view class="section">
<view class="section-title">设置</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/creator')">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>申请成为作者</text>
<!-- 设置区域 -->
<view class="section">
<view class="section-title">设置</view>
<view class="section-list">
<view class="section-item" @click="navigateToPage('/pages_order/novel/creator')">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>申请成为作者</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="section-item" @click="navigateToPage('/pages/customer-service')">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>联系客服</text>
<view class="section-item" @click="navigateToPage('/pages/customer-service')">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>联系客服</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="section-item" @click="navigateToPage('/pages/edit-info')">
<view class="section-item-left">
<uv-icon name="edit-pen" size="40rpx" color="#333"></uv-icon>
<text>修改信息</text>
<view class="section-item" @click="navigateToPage('/pages_order/novel/Modifyinformation')">
<view class="section-item-left">
<uv-icon name="edit-pen" size="40rpx" color="#333"></uv-icon>
<text>修改信息</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<view class="section-item" @click="logout">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>退出登录</text>
<view class="section-item" @click="logout">
<view class="section-item-left">
<uv-icon name="star" size="40rpx" color="#333"></uv-icon>
<text>退出登录</text>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
<uv-icon name="arrow-right" size="36rpx" color="#999"></uv-icon>
</view>
</view>
</view>
</view>
<tabber select="center" />
<tabber select="center" />
</view>
<view v-else-if="!isLogin && !showLogoutModal" class="nologin-page">
<view class="nologin-top-bg">
<view class="nologin-header">
<image class="nologin-avatar" src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill" @click="toLogin" />
<view class="nologin-text" @click="toLogin">点击登录</view>
</view>
<view class="nologin-header-right">
<uv-icon name="more-dot-fill" size="40rpx" color="#bbb"></uv-icon>
</view>
</view>
<view class="nologin-content-center">
<button class="nologin-btn" @click="toLogin">立即登录</button>
<view class="nologin-tip">暂未登录 请先登录</view>
</view>
<tabber select="center" />
</view>
<view v-if="showLogoutModal" class="modal-mask">
<view class="modal-box">
<view class="modal-title">退出登录</view>
<view class="modal-content">确认要退出登录吗</view>
<view class="modal-actions">
<view class="modal-btn" @click="cancelLogout">取消</view>
<view class="modal-btn confirm" @click="confirmLogout">确认</view>
</view>
</view>
</view>
</view>
</template>
<script>
import tabber from '@/components/base/tabbar.vue'
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue'
export default {
components: {
tabber,
uvIcon,
},
data() {
return {
showLogoutModal: false,
isLogin: true,
}
},
methods: {
@ -119,19 +150,17 @@
})
},
logout() {
// 退出登录逻辑
uni.showModal({
title: '提示',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
// 执行退出登录
uni.showToast({
title: '已退出登录'
})
}
}
})
this.showLogoutModal = true;
},
cancelLogout() {
this.showLogoutModal = false;
},
confirmLogout() {
this.showLogoutModal = false;
this.isLogin = false;
},
toLogin() {
uni.showToast({ title: '跳转登录页', icon: 'none' })
}
}
}
@ -151,10 +180,9 @@
display: flex;
align-items: center;
padding: 30rpx 20rpx;
background-color: #fff;
background: linear-gradient(135deg, #e8e6fa 0%, #fbeff3 100%);
border-radius: 20rpx;
margin-bottom: 20rpx;
background: linear-gradient(to right, purple, pink);
.avatar {
width: 120rpx;
@ -242,4 +270,122 @@
}
}
}
.nologin-page {
min-height: 100vh;
background: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
}
.nologin-top-bg {
width: 100vw;
height: 220rpx;
background: linear-gradient(180deg, #f3eafe 0%, #fff 100%);
position: relative;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.nologin-header {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 36rpx;
margin-top: 218rpx;
}
.nologin-avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #eee;
margin-right: 18rpx;
}
.nologin-text {
font-size: 28rpx;
color: #333;
}
.nologin-header-right {
position: absolute;
right: 36rpx;
top: 48rpx;
}
.nologin-content-center {
position: absolute;
top: 50%;
left: 0;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(-50%);
z-index: 2;
}
.nologin-btn {
width: 320rpx;
height: 64rpx;
background: #132a57;
color: #fff;
font-size: 28rpx;
border-radius: 32rpx;
margin-bottom: 18rpx;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}
.nologin-tip {
color: #bcbcbc;
font-size: 24rpx;
margin-top: 10rpx;
}
.modal-mask {
position: fixed;
left: 0; top: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.modal-box {
background: #fff;
border-radius: 20rpx;
width: 80vw;
padding: 40rpx 0 0 0;
text-align: center;
}
.modal-title {
font-size: 32rpx;
font-weight: bold;
margin-bottom: 20rpx;
}
.modal-content {
font-size: 28rpx;
color: #333;
margin-bottom: 30rpx;
}
.modal-actions {
display: flex;
border-top: 1px solid #eee;
height: 90rpx;
}
.modal-btn {
flex: 1;
line-height: 90rpx;
font-size: 30rpx;
color: #333;
border-right: 1px solid #eee;
}
.modal-btn:last-child {
border-right: none;
color: #2a5ed6;
}
.modal-btn.confirm {
color: #2a5ed6;
}
</style>

+ 9
- 2
pages_order/novel/Giftbox.vue View File

@ -2,7 +2,11 @@
<!-- 礼物盒页面 -->
<view class="giftbox-container">
<!-- 顶部标题栏 -->
<uv-navbar title="礼物盒" :autoBack="true" fixed placeholder rightIcon="more-dot-fill" />
<uv-navbar title="礼物盒" :autoBack="true" fixed placeholder rightIcon="more-dot-fill">
<template #left>
<BackArrow :size="56" color="#333" />
</template>
</uv-navbar>
<!-- 礼物列表 -->
<view class="gift-list">
@ -35,10 +39,13 @@
</template>
<script>
import BackArrow from './components/BackArrow.vue';
export default {
components: {
'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue'),
'uv-number-box': () => import('@/uni_modules/uv-number-box/components/uv-number-box/uv-number-box.vue'),
BackArrow
},
data() {
return {
@ -132,7 +139,7 @@ export default {
position: fixed;
left: 0;
right: 0;
bottom: 0;
bottom: 90rpx;
background: #fff;
display: flex;
align-items: center;


+ 185
- 0
pages_order/novel/Modifyinformation.vue View File

@ -0,0 +1,185 @@
<template>
<view class="modify-info-page">
<navbar title="修改信息" />
<BackArrow class="back-arrow-fix" @back="goBack" />
<view class="header">
<view class="avatar-upload">
<uv-avatar :src="avatarUrl" size="88" shape="circle" @click="showUpload = true" class="avatar-main" />
<view class="avatar-upload-btn" @click="showUpload = true">
<uv-icon name="camera-fill" size="28" color="#fff" />
</view>
<uv-upload
v-if="showUpload"
:fileList="fileList"
:maxCount="1"
accept="image"
:previewImage="false"
:deletable="false"
:showUploadList="false"
@afterRead="onAvatarChange"
@delete="onAvatarDelete"
/>
</view>
</view>
<view class="card">
<view class="card-title">个人信息</view>
<view class="form-item">
<view class="form-label"><text class="star">*</text> 昵称</view>
<view class="form-value">{{ form.nickname }}</view>
</view>
<view class="divider"></view>
<view class="form-item">
<view class="form-label"><text class="star">*</text> 个性签名</view>
<view class="form-value">{{ form.signature }}</view>
</view>
<view class="divider"></view>
</view>
<view class="card">
<view class="card-title">手机号</view>
<view class="form-item">
<view class="form-label"><text class="star">*</text> 手机号</view>
<view class="form-value">{{ form.phone }}</view>
</view>
<view class="divider"></view>
</view>
<view class="footer">
<uv-button type="primary" text="确认" shape="circle" size="large" @click="onSubmit" customStyle="width:100%;height:44px;font-size:18px;background:#0a226b;" />
</view>
</view>
</template>
<script>
import BackArrow from './components/BackArrow.vue'
export default {
components: { BackArrow },
data() {
return {
avatarUrl: '',
fileList: [],
showUpload: false,
form: {
nickname: '战斗世界',
signature: '世界这么美，小说好精彩～',
phone: '19989674531'
}
}
},
methods: {
goBack() {
uni.navigateBack()
},
onAvatarChange(file) {
this.avatarUrl = file.file.url
this.fileList = [file.file]
this.showUpload = false
},
onAvatarDelete() {
this.avatarUrl = ''
this.fileList = []
},
onSubmit() {
uni.showToast({ title: '提交成功', icon: 'success' })
}
}
}
</script>
<style scoped>
.modify-info-page {
min-height: 100vh;
background: #f8f8f8;
display: flex;
flex-direction: column;
}
.back-arrow-fix {
position: absolute;
top: 60rpx;
left: 32rpx;
z-index: 1000;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120rpx;
margin-bottom: 24rpx;
position: relative;
}
.avatar-upload {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 120rpx;
height: 120rpx;
}
.avatar-main {
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
}
.avatar-upload-btn {
position: absolute;
bottom: 0;
right: 0;
width: 48rpx;
height: 48rpx;
background: #0a226b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
border: 2rpx solid #fff;
}
.card {
background: #fff;
border-radius: 24rpx;
margin: 0 24rpx 32rpx 24rpx;
padding: 32rpx 28rpx 8rpx 28rpx;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.02);
}
.card-title {
font-size: 28rpx;
font-weight: bold;
color: #222;
margin-bottom: 18rpx;
margin-top: 18rpx;
}
.form-item {
margin-bottom: 8rpx;
margin-top: 18rpx;
}
.form-label {
font-size: 22rpx;
color: #888;
margin-bottom: 4rpx;
display: flex;
align-items: center;
}
.star {
color: #f44;
font-size: 22rpx;
margin-right: 4rpx;
margin-top: 18rpx;
}
.form-value {
font-size: 26rpx;
color: #222;
font-weight: 500;
margin-bottom: 2rpx;
}
.divider {
height: 1px;
background: #f0f0f0;
margin: 8rpx 0 8rpx 0;
}
.footer {
position: fixed;
left: 0;
right: 0;
bottom: 90rpx;
margin: 0 24rpx;
}
</style>

+ 11
- 4
pages_order/novel/Respondcomments.vue View File

@ -2,9 +2,7 @@
<view class="respond-comments-page">
<!-- 顶部导航栏 -->
<navbar title="回复评论" :leftClick="true" @leftClick="goBack">
<template #left>
<uv-icon name="arrow-left" customPrefix="uvicon" size="22" color="#222" />
</template>
</navbar>
<!-- 原评论展示 -->
<view class="origin-comment-card">
@ -18,7 +16,8 @@
<view class="comment-footer">
<text class="comment-time">{{ comment.time }}</text>
<text class="comment-reply-count">
<uv-icon name="chat" customPrefix="uvicon" size="18" color="#bdbdbd" style="margin-right: 4rpx;" />
<text class="emoji-icon">💬</text>
{{ comment.replyCount }}
</text>
</view>
@ -139,6 +138,14 @@ export default {
align-items: center;
font-size: 22rpx;
color: #bdbdbd;
line-height: 1;
}
.emoji-icon {
margin-right: 4rpx;
font-size: 22rpx;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
.reply-area {
background: #fff;


+ 299
- 0
pages_order/novel/Translation.vue View File

@ -0,0 +1,299 @@
<template>
<view class="page-container">
<view class="task-center">
<uv-navbar
title="任务中心"
:autoBack="true"
fixed
placeholder
titleStyle="color: #222; font-weight: 500;"
:border="false"
:bgColor="'#fff9e2'"
>
<template #left>
<BackArrow :size="56" color="#222" @back="goBack" />
</template>
</uv-navbar>
<view class="navbar-placeholder"></view>
<!-- 账户剩余 -->
<view class="account-balance">
<view class="balance-label">账户剩余</view>
<view class="balance-value"><text class="num">9</text> <text class="unit">张 推荐票</text></view>
</view>
<!-- 打卡得奖励 -->
<view class="checkin-section">
<view class="section-header">
<text>打卡得奖励</text>
<view class="record-btn">打卡记录</view>
</view>
<view class="checkin-grid">
<view v-for="day in 8" :key="day" class="checkin-day" :class="{ active: day <= checkedDays }">
<view class="day-label" :class="{ bold: day <= checkedDays }">第{{ day }}天</view>
<image class="ticket-img" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.pca_tFb6ZjyDNdQYgFvi0wHaE7?w=219&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7" mode="aspectFit" />
<view class="ticket-num">+1</view>
</view>
</view>
<button
class="checkin-btn"
:class="{ 'checked-btn': isChecked }"
:disabled="isChecked"
@click="handleCheckin"
>
{{ isChecked ? '已签到' : '签到得奖励' }}
</button>
</view>
<!-- 更多任务 -->
<view class="more-tasks">
<view class="more-header">更多任务</view>
<view class="task-list">
<view class="task-item" v-for="(task, idx) in tasks" :key="idx" :class="{ 'no-border': idx === tasks.length - 1 }">
<view class="task-info">
<view class="task-title">{{ task.title }}</view>
<view class="task-desc">推荐票 +1</view>
</view>
<button
class="get-btn"
:class="{ 'received-btn': task.received }"
:disabled="task.received"
@click="handleReceive(idx)"
>
{{ task.received ? '已领取' : '去领取' }}
</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import uvNavbar from '@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue'
import uvIcon from '@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue'
import BackArrow from './components/BackArrow.vue'
export default {
components: { uvNavbar, uvIcon, BackArrow },
data() {
return {
checkedDays: 3, // 已签到天数
tasks: [
{ title: '观看视频广告', received: false },
{ title: '每日首阅三个章节', received: false },
{ title: '每日首条评论', received: false },
],
isChecked: false, // 新增：签到按钮状态
}
},
methods: {
goBack() {
uni.navigateBack();
},
handleCheckin() {
if (this.checkedDays < 8) {
this.checkedDays++;
this.isChecked = true;
uni.showToast({ title: '签到成功', icon: 'success' });
} else {
this.isChecked = true;
uni.showToast({ title: '已全部签到', icon: 'none' });
}
},
handleReceive(idx) {
this.tasks[idx].received = true;
uni.showToast({ title: '领取成功', icon: 'success' });
},
},
}
</script>
<style scoped lang="scss">
.page-container {
height: 100vh;
overflow: hidden;
}
.task-center {
background: #f8f8f8;
height: 100vh;
padding-bottom: 40rpx;
overflow: hidden;
box-sizing: border-box;
}
.navbar-placeholder {
height: 100rpx;
}
.account-balance {
background: linear-gradient(90deg, #ffe16b, #ffd700);
border-radius: 20rpx;
margin: 24rpx 24rpx 0 24rpx;
padding: 24rpx 32rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 30rpx;
color: #333;
.balance-label {
font-weight: 500;
}
.balance-value {
font-weight: bold;
color: #bfa100;
.num {
font-size: 24rpx;
}
.unit {
font-size: 22rpx;
}
}
}
.checkin-section {
background: #fff;
border-radius: 20rpx;
margin: 24rpx;
padding: 32rpx 24rpx 24rpx 24rpx;
box-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.08);
border: 4rpx solid #ffe16b;
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-weight: 600;
margin-bottom: 24rpx;
.record-btn {
background: #d6ff4b ;
color: #383938;
border-radius: 24rpx;
padding: 6rpx 28rpx;
font-size: 24rpx;
}
}
.checkin-grid {
display: flex;
flex-wrap: wrap;
gap: 18rpx;
margin-bottom: 32rpx;
.checkin-day {
width: 22%;
background: #f7f7f7;
border-radius: 12rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 18rpx 0 10rpx 0;
border: 2rpx solid #f0f0f0;
&.active {
background: #d6ff4b !important;
border-color: #b6e900 !important;
.day-label, .ticket-num {
color: #222 !important;
font-weight: bold;
}
}
.day-label {
font-size: 24rpx;
font-weight: 600;
height: 90rpx;
margin-bottom: 8rpx;
color: #333;
&.bold {
font-weight: bold;
}
}
.ticket-img {
width: 48rpx;
height: 36rpx;
margin-bottom: 6rpx;
display: flex;
}
.ticket-num {
font-size: 22rpx;
color: #bfa100;
}
}
}
.checkin-btn {
width: 600rpx;
background: linear-gradient(90deg, #ffe16b, #ffd700);
color: #333;
font-size: 30rpx;
border-radius: 46rpx;
padding: 18rpx 0;
font-weight: bold;
margin-top: 8rpx;
transition: background 0.2s;
}
}
.checked-btn {
background: linear-gradient(90deg, #e0e0e0, #bdbdbd) !important;
color: #444 !important;
cursor: not-allowed;
}
.more-tasks {
background: #faffea;
border-radius: 20rpx;
margin: 0 24rpx;
padding: 24rpx 24rpx 8rpx 24rpx;
margin-top: 100rpx;
.more-header {
font-size: 28rpx;
color: #bfa100;
font-weight: 600;
margin-bottom: 18rpx;
}
.task-list {
.task-item {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 0;
margin: 0;
padding: 18rpx 20rpx 10rpx 20rpx;
border-bottom: 1rpx solid #f2f2f2;
.task-info {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 1;
min-width: 0;
margin-top: 30rpx;
.task-title {
font-size: 26rpx;
color: #222;
font-weight: bold;
}
.task-desc {
font-size: 20rpx;
color: #bbb;
margin-top: 4rpx;
}
}
.get-btn {
background: #ffd700;
color: #fff;
font-size: 24rpx;
border-radius: 24rpx;
padding: 0 28rpx;
font-weight: bold;
border: none;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
white-space: nowrap;
margin-left: 18rpx;
transition: background 0.2s;
}
.received-btn {
background: linear-gradient(90deg, #e0e0e0, #bdbdbd) !important;
color: #444 !important;
cursor: not-allowed;
}
&.no-border {
border-bottom: none;
}
}
}
}
</style>

+ 10
- 1
pages_order/novel/Walletflow.vue View File

@ -2,7 +2,11 @@
<template>
<view class="walletflow-page">
<!-- 顶部导航栏 -->
<uv-navbar title="钱包流水" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false" />
<uv-navbar title="钱包流水" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false">
<template #left>
<BackArrow :size="56" color="#333" />
</template>
</uv-navbar>
<!-- 账户余额卡片 -->
<view class="balance-card">
@ -54,7 +58,12 @@
</template>
<script>
import BackArrow from './components/BackArrow.vue';
export default {
components: {
BackArrow,
},
data() {
return {
balance: 34532,


+ 7
- 2
pages_order/novel/chapterList.vue View File

@ -2,8 +2,8 @@
<view class="chapter-container">
<view class="header">
<view class="nav-bar" style="position: relative; height: 44px;">
<view class="back" @click="goBack">
<uv-icon name="arrow-left" color="black" size="48"></uv-icon>
<view class="back">
<BackArrow :size="56" color="black" @back="goBack" />
</view>
<view class="title">兽王进化：从被小萝莉...</view>
<view class="right-icons"></view>
@ -32,7 +32,12 @@
</template>
<script>
import BackArrow from './components/BackArrow.vue';
export default {
components: {
BackArrow,
},
data() {
return {
activeTab: 'draft',


+ 39
- 0
pages_order/novel/components/AgreementCheck.vue View File

@ -0,0 +1,39 @@
<template>
<div class="agreement-check">
<input type="checkbox" v-model="checked" @change="$emit('update:checked', checked)" id="agreement" />
<label for="agreement">
<slot />
</label>
</div>
</template>
<script>
export default {
name: 'AgreementCheck',
props: {
checked: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped>
.agreement-check {
display: flex;
align-items: center;
font-size: 14px;
color: #b3b3b3;
margin-top: 16px;
}
.agreement-check input[type='checkbox'] {
margin-right: 6px;
accent-color: #183b6b;
}
.agreement-check a {
color: #183b6b;
text-decoration: underline;
margin: 0 2px;
}
</style>

+ 28
- 0
pages_order/novel/components/BackArrow.vue View File

@ -0,0 +1,28 @@
<template>
<uv-icon name="arrow-left" :size="44" :color="color" @click="goBack" />
</template>
<script>
export default {
name: 'BackArrow',
props: {
size: {
type: [String, Number],
default: 56
},
color: {
type: String,
default: '#333'
}
},
methods: {
goBack() {
this.$emit('back');
if (this.$listeners.back) return;
if (typeof uni !== 'undefined' && uni.navigateBack) {
uni.navigateBack();
}
}
}
}
</script>

+ 45
- 0
pages_order/novel/components/LoginButton.vue View File

@ -0,0 +1,45 @@
<template>
<button :class="['login-btn', type]" @click="$emit('click')">
<slot />
</button>
</template>
<script>
export default {
name: 'LoginButton',
props: {
type: {
type: String,
default: ''
}
}
}
</script>
<style scoped>
.login-btn {
width: 80%;
height: 44px;
border-radius: 22px;
font-size: 18px;
font-weight: 500;
margin: 12px 0;
outline: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.login-btn.primary {
background: #183b6b;
color: #fff;
}
.login-btn.secondary {
background: #fff;
color: #183b6b;
border: 2px solid #183b6b;
position: relative;
}
</style>

+ 11
- 1
pages_order/novel/creator.vue View File

@ -1,6 +1,11 @@
<template>
<!-- 申请成为作者页面 -->
<view class="creator-page">
<uv-navbar title="请成为创作者" fixed placeholder></uv-navbar>
<uv-navbar title="请成为创作者" fixed placeholder>
<template #left>
<BackArrow :size="56" color="#333" />
</template>
</uv-navbar>
<view class="form-card">
<view class="form-item">
<text class="required">*</text>
@ -20,7 +25,12 @@
</template>
<script>
import BackArrow from './components/BackArrow.vue';
export default {
components: {
BackArrow,
},
data() {
return {
penName: '',


+ 109
- 0
pages_order/novel/login.vue View File

@ -0,0 +1,109 @@
<template>
<div class="login-page">
<div class="logo-box">
<img class="logo" src="/static/auth/headImage.png" alt="logo" />
</div>
<div class="title">瀚涵中文网</div>
<LoginButton type="primary" @click="onLogin">登录</LoginButton>
<div class="cancel-row">
<LoginButton type="secondary" @click="onCancel">取消登录</LoginButton>
<span class="arrow-icon">◆</span>
<span class="dashed-line"></span>
</div>
<AgreementCheck v-model:checked="checked">
我已阅读并同意<a href="#">《服务协议》</a>和<a href="#">《隐私政策》</a>
</AgreementCheck>
<div class="book-bg"></div>
</div>
</template>
<script>
import LoginButton from './components/LoginButton.vue';
import AgreementCheck from './components/AgreementCheck.vue';
export default {
name: 'NovelLogin',
components: { LoginButton, AgreementCheck },
data() {
return {
checked: false
};
},
methods: {
onLogin() {
if (!this.checked) {
this.$toast && this.$toast('请先同意协议');
return;
}
// 登录逻辑
},
onCancel() {
// 取消登录逻辑
}
}
};
</script>
<style scoped>
.login-page {
min-height: 100vh;
background: #eef2fc;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding-top: 60px;
}
.logo-box {
width: 120px;
height: 120px;
background: #fff;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
box-shadow: 0 2px 8px #e0e6f6;
}
.logo {
width: 80px;
height: 80px;
object-fit: contain;
}
.title {
font-size: 22px;
font-weight: bold;
color: #222;
margin-bottom: 32px;
}
.cancel-row {
width: 80%;
display: flex;
align-items: center;
position: relative;
margin-bottom: 8px;
}
.arrow-icon {
color: #fd7e14;
font-size: 18px;
margin: 0 6px;
z-index: 2;
}
.dashed-line {
flex: 1;
border-bottom: 2px dashed #fd7e14;
height: 0;
margin-left: -8px;
}
.book-bg {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 220px;
height: 180px;
background: url('/static/auth/headImage.png') no-repeat center/contain;
opacity: 0.08;
z-index: 0;
}
</style>

+ 4
- 2
pages_order/novel/novelDetail.vue View File

@ -4,7 +4,7 @@
<!-- 顶部返回导航 -->
<uv-navbar title="小说详情" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false">
<template #left>
<uv-icon name="arrow-left" size="46" color="#333" @click="goBack" />
<BackArrow :size="56" color="#333" @back="goBack" />
</template>
</uv-navbar>
@ -188,11 +188,13 @@
<script>
import catalogpopup from '@/components/novel/CatalogPopup.vue'
import BackArrow from './components/BackArrow.vue'
export default {
components: {
'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue'),
'uv-icon': () => import('@/uni_modules/uv-icon/components/uv-icon/uv-icon.vue'),
catalogpopup
catalogpopup,
BackArrow
},
data() {
return {


+ 4
- 1
pages_order/novel/readnovels.vue View File

@ -3,7 +3,7 @@
<view class="reader-container" @click.native="toggleFullScreen">
<uv-navbar title="这游戏也太真实了" :autoBack="true" fixed placeholder titleStyle="color: #333; font-weight: 700;" :border="false">
<template #left>
<uv-icon name="arrow-left" size="46" color="#333" @click="$emit('back')" />
<BackArrow :size="56" color="#333" @back="$emit('back')" />
</template>
</uv-navbar>
<view class="chapter-title">第1章 2004</view>
@ -100,8 +100,11 @@
</template>
<script>
import BackArrow from './components/BackArrow.vue';
export default {
components: {
BackArrow,
'uv-popup': () => import('@/uni_modules/uv-popup/components/uv-popup/uv-popup.vue')
},
data() {


Write Preview
Loading…
Cancel
Save