zhangminghao
1 month ago
13 changed files with 9873 additions and 2 deletions
@ -0,0 +1,71 @@ |
|||||
|
<template> |
||||
|
<view class="battery-container"> |
||||
|
<view class="battery-body"> |
||||
|
<view class="battery" :style="{width: `${level}%`}"></view> |
||||
|
<text class="iconfont charging" v-if="charging"></text> |
||||
|
</view> |
||||
|
<view class="battery-head"></view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props:{ |
||||
|
level: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
charging: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.battery-container{ |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 25px; |
||||
|
height: 10px; |
||||
|
.battery-body{ |
||||
|
position: relative; |
||||
|
padding: 1px; |
||||
|
width: 22px; |
||||
|
height: 100%; |
||||
|
border-radius: 1px; |
||||
|
border: $minor-text-color solid 1px; |
||||
|
.battery{ |
||||
|
height: 100%; |
||||
|
background-color: $minor-text-color; |
||||
|
} |
||||
|
.charging{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
height: 12px; |
||||
|
line-height: 12px; |
||||
|
font-size: 15px; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
.battery-head{ |
||||
|
width: 2px; |
||||
|
height: 6px; |
||||
|
background-color: $minor-text-color; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,455 @@ |
|||||
|
const chaptersList = [ |
||||
|
{ |
||||
|
index: 0, |
||||
|
chapterId: '1', |
||||
|
name: '第1章 考研失败是有原因的' |
||||
|
}, |
||||
|
{ |
||||
|
index: 1, |
||||
|
chapterId: '2', |
||||
|
name: '第2章 收服上古神兽' |
||||
|
}, |
||||
|
{ |
||||
|
index: 2, |
||||
|
chapterId: '3', |
||||
|
name: '第3章 宗门选拔' |
||||
|
}, |
||||
|
{ |
||||
|
index: 3, |
||||
|
chapterId: '4', |
||||
|
name: '第4章 成功登百阶' |
||||
|
}, |
||||
|
{ |
||||
|
index: 4, |
||||
|
chapterId: '5', |
||||
|
name: '第5章 你们求不得的我应有尽有' |
||||
|
}, |
||||
|
{ |
||||
|
index: 5, |
||||
|
chapterId: '6', |
||||
|
name: '第6章 月华果的主人居然是他？' |
||||
|
}, |
||||
|
{ |
||||
|
index: 6, |
||||
|
chapterId: '7', |
||||
|
name: '第7章 大师姐的黑暗料理' |
||||
|
}, |
||||
|
{ |
||||
|
index: 7, |
||||
|
chapterId: '8', |
||||
|
name: '第8章 有钱的无为宗' |
||||
|
}, |
||||
|
{ |
||||
|
index: 8, |
||||
|
chapterId: '9', |
||||
|
name: '第9章 天下武修第一人' |
||||
|
}, |
||||
|
{ |
||||
|
index: 9, |
||||
|
chapterId: '10', |
||||
|
name: '第10章 虽然没灵力，但我有外挂' |
||||
|
}, |
||||
|
{ |
||||
|
index: 10, |
||||
|
chapterId: '11', |
||||
|
name: '第11章 前尘往事难道破' |
||||
|
}, |
||||
|
{ |
||||
|
index: 11, |
||||
|
chapterId: '12', |
||||
|
name: '第12章 鬼艮的秘密' |
||||
|
}, |
||||
|
{ |
||||
|
index: 12, |
||||
|
chapterId: '13', |
||||
|
name: '第13章 屎中添花' |
||||
|
}, |
||||
|
{ |
||||
|
index: 13, |
||||
|
chapterId: '14', |
||||
|
name: '第14章 强盗一般的人物' |
||||
|
}, |
||||
|
{ |
||||
|
index: 14, |
||||
|
chapterId: '15', |
||||
|
name: '第15章 恶人先告状' |
||||
|
}, |
||||
|
{ |
||||
|
index: 15, |
||||
|
chapterId: '16', |
||||
|
name: '第16章 被关惩戒堂' |
||||
|
}, |
||||
|
{ |
||||
|
index: 16, |
||||
|
chapterId: '17', |
||||
|
name: '第17章 惩戒堂里的东西' |
||||
|
}, |
||||
|
{ |
||||
|
index: 17, |
||||
|
chapterId: '18', |
||||
|
name: '第18章 一举拿下魄' |
||||
|
}, |
||||
|
{ |
||||
|
index: 18, |
||||
|
chapterId: '19', |
||||
|
name: '第19章 掌门掐架' |
||||
|
}, |
||||
|
{ |
||||
|
index: 19, |
||||
|
chapterId: '20', |
||||
|
name: '第20章 无为道法' |
||||
|
}, |
||||
|
{ |
||||
|
index: 20, |
||||
|
chapterId: '21', |
||||
|
name: '第21章 他的精神力是最上乘' |
||||
|
}, |
||||
|
{ |
||||
|
index: 21, |
||||
|
chapterId: '22', |
||||
|
name: '第22章 时空回溯的能力' |
||||
|
}, |
||||
|
{ |
||||
|
index: 22, |
||||
|
chapterId: '23', |
||||
|
name: '第23章 碧波龙鳞扇' |
||||
|
}, |
||||
|
{ |
||||
|
index: 23, |
||||
|
chapterId: '24', |
||||
|
name: '第24章 萧玉林当他的贴身保镖' |
||||
|
}, |
||||
|
{ |
||||
|
index: 24, |
||||
|
chapterId: '25', |
||||
|
name: '第25章 大师姐的饭菜' |
||||
|
}, |
||||
|
{ |
||||
|
index: 25, |
||||
|
chapterId: '26', |
||||
|
name: '第26章 张景轩是登徒子' |
||||
|
}, |
||||
|
{ |
||||
|
index: 26, |
||||
|
chapterId: '27', |
||||
|
name: '第27章 言出法随，风动' |
||||
|
}, |
||||
|
{ |
||||
|
index: 27, |
||||
|
chapterId: '28', |
||||
|
name: '第28章 师父给的压力' |
||||
|
}, |
||||
|
{ |
||||
|
index: 28, |
||||
|
chapterId: '29', |
||||
|
name: '第29章 新徒比试大会（一）' |
||||
|
}, |
||||
|
{ |
||||
|
index: 29, |
||||
|
chapterId: '30', |
||||
|
name: '第30章 新徒比试大会（二）' |
||||
|
}, |
||||
|
{ |
||||
|
index: 30, |
||||
|
chapterId: '31', |
||||
|
name: '第31章 新徒比试大会（三）' |
||||
|
}, |
||||
|
{ |
||||
|
index: 31, |
||||
|
chapterId: '32', |
||||
|
name: '第32章 走后门' |
||||
|
}, |
||||
|
{ |
||||
|
index: 32, |
||||
|
chapterId: '33', |
||||
|
name: '第33章 把魄当狗遛' |
||||
|
}, |
||||
|
{ |
||||
|
index: 33, |
||||
|
chapterId: '34', |
||||
|
name: '第34章 万事不要逞强' |
||||
|
}, |
||||
|
{ |
||||
|
index: 34, |
||||
|
chapterId: '35', |
||||
|
name: '第35章 进入侯林' |
||||
|
}, |
||||
|
{ |
||||
|
index: 35, |
||||
|
chapterId: '36', |
||||
|
name: '第36章 侯林密林，第二境无觅处' |
||||
|
}, |
||||
|
{ |
||||
|
index: 36, |
||||
|
chapterId: '37', |
||||
|
name: '第37章 灵草收集完' |
||||
|
}, |
||||
|
{ |
||||
|
index: 37, |
||||
|
chapterId: '38', |
||||
|
name: '第38章 赛博武器' |
||||
|
}, |
||||
|
{ |
||||
|
index: 38, |
||||
|
chapterId: '39', |
||||
|
name: '第39章 起阵画符得心应手' |
||||
|
}, |
||||
|
{ |
||||
|
index: 39, |
||||
|
chapterId: '40', |
||||
|
name: '第40章 窥天镜异动' |
||||
|
}, |
||||
|
{ |
||||
|
index: 40, |
||||
|
chapterId: '41', |
||||
|
name: '第41章 姜思张锁仙对战' |
||||
|
}, |
||||
|
{ |
||||
|
index: 41, |
||||
|
chapterId: '42', |
||||
|
name: '第42章 有人跟踪他' |
||||
|
}, |
||||
|
{ |
||||
|
index: 42, |
||||
|
chapterId: '43', |
||||
|
name: '第43章 灵狼求救' |
||||
|
}, |
||||
|
{ |
||||
|
index: 43, |
||||
|
chapterId: '44', |
||||
|
name: '第44章 无奈当奶妈' |
||||
|
}, |
||||
|
{ |
||||
|
index: 44, |
||||
|
chapterId: '45', |
||||
|
name: '第45章 误入留园' |
||||
|
}, |
||||
|
{ |
||||
|
index: 45, |
||||
|
chapterId: '46', |
||||
|
name: '第46章 青芽决' |
||||
|
}, |
||||
|
{ |
||||
|
index: 46, |
||||
|
chapterId: '47', |
||||
|
name: '第47章 仙缘初现' |
||||
|
}, |
||||
|
{ |
||||
|
index: 47, |
||||
|
chapterId: '48', |
||||
|
name: '第48章 青木长生' |
||||
|
}, |
||||
|
{ |
||||
|
index: 48, |
||||
|
chapterId: '49', |
||||
|
name: '第49章 封印解密' |
||||
|
}, |
||||
|
{ |
||||
|
index: 49, |
||||
|
chapterId: '50', |
||||
|
name: '第50章 临时小队' |
||||
|
}, |
||||
|
{ |
||||
|
index: 50, |
||||
|
chapterId: '51', |
||||
|
name: '第51章 梦中警示' |
||||
|
}, |
||||
|
{ |
||||
|
index: 51, |
||||
|
chapterId: '52', |
||||
|
name: '第52章 封印松动' |
||||
|
}, |
||||
|
{ |
||||
|
index: 52, |
||||
|
chapterId: '53', |
||||
|
name: '第53章 血脉真相' |
||||
|
}, |
||||
|
{ |
||||
|
index: 53, |
||||
|
chapterId: '54', |
||||
|
name: '第54章 故人重逢' |
||||
|
}, |
||||
|
{ |
||||
|
index: 54, |
||||
|
chapterId: '55', |
||||
|
name: '第55章 青帝遗藏' |
||||
|
}, |
||||
|
{ |
||||
|
index: 55, |
||||
|
chapterId: '56', |
||||
|
name: '第56章 青帝归来' |
||||
|
}, |
||||
|
{ |
||||
|
index: 56, |
||||
|
chapterId: '57', |
||||
|
name: '第57章 继承' |
||||
|
}, |
||||
|
{ |
||||
|
index: 57, |
||||
|
chapterId: '58', |
||||
|
name: '第58章 月食' |
||||
|
}, |
||||
|
{ |
||||
|
index: 58, |
||||
|
chapterId: '59', |
||||
|
name: '第59章 异变' |
||||
|
}, |
||||
|
{ |
||||
|
index: 59, |
||||
|
chapterId: '60', |
||||
|
name: '第60章 躁动' |
||||
|
}, |
||||
|
{ |
||||
|
index: 60, |
||||
|
chapterId: '61', |
||||
|
name: '第61章 血池' |
||||
|
}, |
||||
|
{ |
||||
|
index: 61, |
||||
|
chapterId: '62', |
||||
|
name: '第62章 共鸣' |
||||
|
}, |
||||
|
{ |
||||
|
index: 62, |
||||
|
chapterId: '63', |
||||
|
name: '第63章 轮回' |
||||
|
}, |
||||
|
{ |
||||
|
index: 63, |
||||
|
chapterId: '64', |
||||
|
name: '第64章 囚徒' |
||||
|
}, |
||||
|
{ |
||||
|
index: 64, |
||||
|
chapterId: '65', |
||||
|
name: '第65章 分裂的同盟' |
||||
|
}, |
||||
|
{ |
||||
|
index: 65, |
||||
|
chapterId: '66', |
||||
|
name: '第66章 祭祀' |
||||
|
}, |
||||
|
{ |
||||
|
index: 66, |
||||
|
chapterId: '67', |
||||
|
name: '第67章 千毒窟救援' |
||||
|
}, |
||||
|
{ |
||||
|
index: 67, |
||||
|
chapterId: '68', |
||||
|
name: '第68章 白帝城' |
||||
|
}, |
||||
|
{ |
||||
|
index: 68, |
||||
|
chapterId: '69', |
||||
|
name: '第69章 白帝疑云' |
||||
|
}, |
||||
|
{ |
||||
|
index: 69, |
||||
|
chapterId: '70', |
||||
|
name: '第70章 白帝七卫' |
||||
|
}, |
||||
|
{ |
||||
|
index: 70, |
||||
|
chapterId: '71', |
||||
|
name: '第71章 核心' |
||||
|
}, |
||||
|
{ |
||||
|
index: 71, |
||||
|
chapterId: '72', |
||||
|
name: '第72章 平衡' |
||||
|
}, |
||||
|
{ |
||||
|
index: 72, |
||||
|
chapterId: '73', |
||||
|
name: '第73章 数据' |
||||
|
}, |
||||
|
{ |
||||
|
index: 73, |
||||
|
chapterId: '74', |
||||
|
name: '第74章 中枢密室' |
||||
|
}, |
||||
|
{ |
||||
|
index: 74, |
||||
|
chapterId: '75', |
||||
|
name: '第75章 崩塌' |
||||
|
}, |
||||
|
{ |
||||
|
index: 75, |
||||
|
chapterId: '76', |
||||
|
name: '第76章 异星迷途' |
||||
|
}, |
||||
|
{ |
||||
|
index: 76, |
||||
|
chapterId: '77', |
||||
|
name: '第77章 卫星避难所' |
||||
|
}, |
||||
|
{ |
||||
|
index: 77, |
||||
|
chapterId: '78', |
||||
|
name: '第78章 启动' |
||||
|
}, |
||||
|
{ |
||||
|
index: 78, |
||||
|
chapterId: '79', |
||||
|
name: '第79章 玄冰劫火' |
||||
|
}, |
||||
|
{ |
||||
|
index: 79, |
||||
|
chapterId: '80', |
||||
|
name: '第80章 晶劫之战' |
||||
|
}, |
||||
|
{ |
||||
|
index: 80, |
||||
|
chapterId: '81', |
||||
|
name: '第81章 归墟之秘' |
||||
|
}, |
||||
|
{ |
||||
|
index: 81, |
||||
|
chapterId: '82', |
||||
|
name: '第82章 两界之子' |
||||
|
}, |
||||
|
{ |
||||
|
index: 82, |
||||
|
chapterId: '83', |
||||
|
name: '第83章 北冥寒渊' |
||||
|
}, |
||||
|
{ |
||||
|
index: 83, |
||||
|
chapterId: '84', |
||||
|
name: '第84章 最后一块' |
||||
|
}, |
||||
|
{ |
||||
|
index: 84, |
||||
|
chapterId: '85', |
||||
|
name: '第85章 终局之战' |
||||
|
}, |
||||
|
{ |
||||
|
index: 85, |
||||
|
chapterId: '86', |
||||
|
name: '第86章 异常' |
||||
|
}, |
||||
|
{ |
||||
|
index: 86, |
||||
|
chapterId: '87', |
||||
|
name: '第87章 遗址' |
||||
|
}, |
||||
|
{ |
||||
|
index: 87, |
||||
|
chapterId: '88', |
||||
|
name: '第88章 灵晶潮汐' |
||||
|
}, |
||||
|
{ |
||||
|
index: 88, |
||||
|
chapterId: '89', |
||||
|
name: '第89章 晶界迷踪' |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
// 正确导出模块
|
||||
|
export default { |
||||
|
chaptersList |
||||
|
}; |
||||
|
|
||||
|
// 也支持默认导出
|
||||
|
export { chaptersList }; |
||||
@ -0,0 +1,124 @@ |
|||||
|
<template> |
||||
|
<view class="progress-container"> |
||||
|
<view class="progress-container2" id="progress" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove"> |
||||
|
<view class="progress-box"> |
||||
|
<progress :percent="percent" activeColor="#000" backgroundColor="#1c1c1c" stroke-width="3"/> |
||||
|
</view> |
||||
|
<view class="ball-box" :class="{bigger: isTouch, shadow: isTouch}" :style="{left: `${percent}%`}"></view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props:{ |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
index: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
left: 0, //进度条最左侧位置 |
||||
|
right: 0, //进度条最右侧位置 |
||||
|
isTouch: false, |
||||
|
// touchTimer: null, //用于触摸节流 |
||||
|
percent: 0, |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
index() { |
||||
|
this.percent = this.index / this.total * 100 |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.percent = this.index / this.total * 100 |
||||
|
this.getLocation() |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
getLocation() { |
||||
|
const query = uni.createSelectorQuery().in(this); |
||||
|
query.select('#progress').boundingClientRect(data => { |
||||
|
this.left = data.left |
||||
|
this.right = data.right |
||||
|
}).exec(); |
||||
|
}, |
||||
|
|
||||
|
touchstart() { |
||||
|
this.isTouch = true |
||||
|
this.$emit('progressStart') |
||||
|
}, |
||||
|
|
||||
|
touchend(e) { |
||||
|
this.isTouch = false |
||||
|
let index = this.calcIndex(e.changedTouches[0].clientX) |
||||
|
this.$emit('progressEnd', index) |
||||
|
this.percent = index / this.total * 100 |
||||
|
}, |
||||
|
|
||||
|
touchmove(e) { |
||||
|
// if (!this.touchTimer) { |
||||
|
let index = this.calcIndex(e.touches[0].clientX) |
||||
|
this.$emit('indexChange', index) |
||||
|
this.percent = index / this.total * 100 |
||||
|
// this.touchTimer = setTimeout(() => { |
||||
|
// this.touchTimer = null; |
||||
|
// }, 100) |
||||
|
// } |
||||
|
}, |
||||
|
|
||||
|
/** |
||||
|
* 输入位置计算index |
||||
|
**/ |
||||
|
calcIndex(px) { |
||||
|
let single = (this.right - this.left) / this.total |
||||
|
let index = Math.round((px - this.left) / single) |
||||
|
index = index < 0 ? 0 : index |
||||
|
index = index > this.total ? this.total : index |
||||
|
return index |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.progress-container{ |
||||
|
padding: 0 10px; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.progress-container2{ |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.progress-box{ |
||||
|
width: 100%; |
||||
|
} |
||||
|
.ball-box{ |
||||
|
position: absolute; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #000; |
||||
|
transform: translateX(-50%); |
||||
|
} |
||||
|
.shadow{ |
||||
|
box-shadow: 0px 0px 1px 5px rgba(#888,.4); |
||||
|
} |
||||
|
.bigger{ |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,134 @@ |
|||||
|
<template> |
||||
|
<view class="virtual-list" style="position: relative;"> |
||||
|
<movable-area style="position: absolute;right: 0;width: 30px;height: 100%;"> |
||||
|
<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false"> |
||||
|
<view style="border-bottom: #000 solid 2px;width: 100%;"></view> |
||||
|
<view style="border-bottom: #000 solid 2px;width: 100%;"></view> |
||||
|
</movable-view> |
||||
|
</movable-area> |
||||
|
<scroll-view scroll-y="true" |
||||
|
:style="{ |
||||
|
'height': scrollHeight + 'px', |
||||
|
'position': 'relative', |
||||
|
'zIndex': 1 |
||||
|
}" |
||||
|
@scroll="handleScroll" :scroll-top="scrollTop" :show-scrollbar="false"> |
||||
|
|
||||
|
<view class="scroll-bar" |
||||
|
:style="{ |
||||
|
'height': localHeight + 'px' |
||||
|
}"></view> |
||||
|
<view class="list" |
||||
|
:style="{ |
||||
|
'transform': `translateY(${offset}px)` |
||||
|
}"> |
||||
|
<view class="item-wrap" |
||||
|
v-for="(item, index) in visibleData" |
||||
|
:key="index"> |
||||
|
<slot :item="item" :active="active"></slot> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'VirtualList', |
||||
|
props: { |
||||
|
// 所有的items |
||||
|
items: Array, |
||||
|
// 可视区域的item数量 |
||||
|
remain: Number, |
||||
|
// item大小 |
||||
|
size: Number, |
||||
|
// 当前章节 |
||||
|
active: Number, |
||||
|
// 可使区域高度 |
||||
|
scrollHeight: Number |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// 起始 |
||||
|
start: 0, |
||||
|
// 结束 |
||||
|
end: this.remain, |
||||
|
// list 偏移量 |
||||
|
offset: 0, |
||||
|
scrollTop: 0, |
||||
|
y: 0 |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
//当前章节滚动至顶部 |
||||
|
this.scrollTop = this.size * this.active |
||||
|
}, |
||||
|
computed: { |
||||
|
// 预留项 |
||||
|
preCount() { |
||||
|
return Math.min(this.start, this.remain); |
||||
|
}, |
||||
|
nextCount() { |
||||
|
return Math.min(this.items.length - this.end, this.remain); |
||||
|
}, |
||||
|
// 可视区域的item |
||||
|
visibleData() { |
||||
|
const start = this.start - this.preCount; |
||||
|
const end = this.end + this.nextCount; |
||||
|
console.log(this.items,'this.items.slice(start, end)'); |
||||
|
return this.items.slice(start, end); |
||||
|
}, |
||||
|
localHeight() { |
||||
|
return this.items.length * this.size |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
change(e) { |
||||
|
if (e.detail.source !== 'touch') { |
||||
|
return |
||||
|
} |
||||
|
let y = e.detail.y; |
||||
|
let scroll = y/(this.scrollHeight-40)*(this.localHeight-this.scrollHeight); |
||||
|
scroll = scroll < 0 ? 0 : scroll; |
||||
|
this.scrollTop = scroll; |
||||
|
}, |
||||
|
handleScroll(ev) { |
||||
|
const scrollTop = ev.detail.scrollTop; |
||||
|
this.y = scrollTop/(this.localHeight-this.scrollHeight)*(this.scrollHeight-40) |
||||
|
// 开始位置 |
||||
|
const start = Math.floor(scrollTop / this.size) |
||||
|
this.start = start < 0 ? 0 : start; |
||||
|
// 结束位置 |
||||
|
this.end = this.start + this.remain; |
||||
|
// 计算偏移 |
||||
|
const offset = scrollTop - (scrollTop % this.size) - this.preCount * this.size |
||||
|
this.offset = offset < 0 ? 0 : offset; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
|
||||
|
.list { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.action-bar-box{ |
||||
|
padding: 3px; |
||||
|
display: flex; |
||||
|
flex-flow: column; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
background-color: transparent; |
||||
|
border-radius: 10rpx; |
||||
|
box-shadow: 0 0 5px #000; |
||||
|
width: 20px; |
||||
|
height: 40px; |
||||
|
z-index:2; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,249 @@ |
|||||
|
// ... existing code ... |
||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<!-- 顶部导航 --> |
||||
|
<!-- <view class="top-nav"> |
||||
|
<view class="back-btn" @click="goBack">返回</view> |
||||
|
<view class="add-book-btn" @click="addToBookshelf">+ 加入书架</view> |
||||
|
</view> --> |
||||
|
<BackButton /> |
||||
|
<!-- 封面图 --> |
||||
|
<image class="cover-image" :src="showImg('/uploads/20250918/478322390dfe8befd6fb30643e1b5cb1.png')" |
||||
|
mode="aspectFill"></image> |
||||
|
|
||||
|
<!-- 小说信息 --> |
||||
|
<view class="book-info"> |
||||
|
<text class="title">{{ bookTitle }}</text> |
||||
|
<view class="info-row"> |
||||
|
<text class="info-text">{{ updateInfo }} | 字数: {{ wordCount }}万字</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 更新进度 --> |
||||
|
<view class="progress-row"> |
||||
|
<text class="progress-label">更新进度:</text> |
||||
|
<text class="progress-text">{{ progressText }}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 分类标签 --> |
||||
|
<view class="tags-container"> |
||||
|
<view class="tag-item" v-for="tag in tags" :key="tag">{{ tag }}</view> |
||||
|
</view> |
||||
|
<view class="line"> |
||||
|
|
||||
|
</view> |
||||
|
<!-- 简介 --> |
||||
|
<view class="intro-container"> |
||||
|
<text class="intro-text">{{ intro }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 按钮组 --> |
||||
|
<view class="button-group"> |
||||
|
<view class="read-btn" @click="startReading"> |
||||
|
<text class="btn-icon">📖</text> |
||||
|
<text class="btn-text">开始阅读</text> |
||||
|
</view> |
||||
|
<view class="read-btn" @click="playAudio"> |
||||
|
<text class="btn-icon">🎧</text> |
||||
|
<text class="btn-text">点击播放</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
bookTitle: '《园门修真传》', |
||||
|
updateInfo: '1天前更新', |
||||
|
wordCount: '20', |
||||
|
progressText: '第八十九章(未完结)', |
||||
|
tags: ['穿越玄幻', '修真进阶', '古典园林', '热血爽文'], |
||||
|
intro: '张锁仙意外穿越修仙世界，凭借着自己的扫地圣体本以为会在宗门大开杀戒，没想到竟被扔到山门做个杂役弟子？从此过上了钓鱼种田的不被卷生活。可偏偏宗门大会要拉他一个没有灵力的人上场看笑话？' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
goBack() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
addToBookshelf() { |
||||
|
uni.showToast({ |
||||
|
title: '已加入书架', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
}, |
||||
|
startReading() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/other/read' |
||||
|
}); |
||||
|
}, |
||||
|
playAudio() { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/other/novelCatalog' |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 20rpx; |
||||
|
background-color: #F6EBD4; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
.top-nav { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20rpx 30rpx; |
||||
|
position: relative; |
||||
|
z-index: 10; |
||||
|
background-color: #ffffff; |
||||
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.back-btn { |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.add-book-btn { |
||||
|
font-size: 28rpx; |
||||
|
color: #e64340; |
||||
|
background-color: #fff; |
||||
|
border: 1rpx solid #e64340; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
} |
||||
|
|
||||
|
.cover-image { |
||||
|
width: 300rpx; |
||||
|
height: 400rpx; |
||||
|
margin: 30rpx auto; |
||||
|
border-radius: 16rpx; |
||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1); |
||||
|
} |
||||
|
|
||||
|
.book-info { |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
padding: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 48rpx; |
||||
|
font-weight: bold; |
||||
|
color: #333; |
||||
|
line-height: 1.4; |
||||
|
} |
||||
|
|
||||
|
.info-row { |
||||
|
font-size: 28rpx; |
||||
|
color: #666; |
||||
|
margin: 10rpx 0; |
||||
|
} |
||||
|
|
||||
|
.progress-row { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
color: #999; |
||||
|
margin-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.progress-label { |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.progress-text { |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
.tags-container { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: center; |
||||
|
gap: 15rpx; |
||||
|
margin: 30rpx 0; |
||||
|
} |
||||
|
|
||||
|
.tag-item { |
||||
|
background-color: #76352D; |
||||
|
color: #fff; |
||||
|
padding: 6rpx 12rpx; |
||||
|
border-radius: 12rpx; |
||||
|
font-size: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.line { |
||||
|
width: 100%; |
||||
|
height: 1rpx; |
||||
|
/* border: 1rpx solid #d3d3d3; */ |
||||
|
background: #d3d3d3; |
||||
|
margin: 20rpx 0; |
||||
|
} |
||||
|
|
||||
|
.intro-container { |
||||
|
width: 100%; |
||||
|
padding: 20rpx 40rpx; |
||||
|
/* background-color: #ffffff; */ |
||||
|
border-radius: 16rpx; |
||||
|
/* box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1); */ |
||||
|
margin-bottom: 40rpx; |
||||
|
} |
||||
|
|
||||
|
.intro-text { |
||||
|
font-size: 22rpx; |
||||
|
color: #333; |
||||
|
line-height: 1.8; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.button-group { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
gap: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.read-btn, |
||||
|
.play-btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 300rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 32rpx; |
||||
|
color: #333; |
||||
|
background-color: #ffffff; |
||||
|
border: 1rpx solid #ddd; |
||||
|
} |
||||
|
|
||||
|
.read-btn { |
||||
|
border-color: #e64340; |
||||
|
color: #e64340; |
||||
|
} |
||||
|
|
||||
|
.play-btn { |
||||
|
border-color: #888; |
||||
|
color: #888; |
||||
|
} |
||||
|
|
||||
|
.btn-icon { |
||||
|
font-size: 36rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,48 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<!-- <BackButton /> |
||||
|
<view class=""> |
||||
|
园门修真转 |
||||
|
</view> --> |
||||
|
|
||||
|
<scroll-view scroll-y="true" @scroll="handleScroll" :scroll-top="scrollTop" :show-scrollbar="false"> |
||||
|
<view class="chapter" v-for="item in directoryList" :key="item.chapterId" @click="changePlay"> |
||||
|
<view class=""> |
||||
|
{{item.name}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import directoryModule from './components/directory.js' |
||||
|
// 正确解构 directoryList |
||||
|
const directoryListJs = directoryModule.chaptersList || directoryModule.default?.chaptersList || []; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
directoryList: directoryListJs, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
changePlay(){ |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/other/playNovel' |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.content{ |
||||
|
padding: 30rpx; |
||||
|
background: #595959; |
||||
|
color: #fff; |
||||
|
.chapter{ |
||||
|
padding-bottom: 30rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,448 @@ |
|||||
|
<template> |
||||
|
<view class="novel-player-container"> |
||||
|
<!-- 1. 小说封面图区域（适配多端屏幕比例） --> |
||||
|
<view class="novel-cover-wrapper"> |
||||
|
<!-- 封面图：加载态+失败备用 --> |
||||
|
<image |
||||
|
class="novel-cover" |
||||
|
:class="{ 'cover-loading': isCoverLoading }" |
||||
|
:src="showImg('/uploads/20250918/478322390dfe8befd6fb30643e1b5cb1.png')" |
||||
|
mode="widthFix" |
||||
|
@load="isCoverLoading = false" |
||||
|
@error="handleCoverError" |
||||
|
lazy-load |
||||
|
></image> |
||||
|
<!-- 封面加载失败备用视图 --> |
||||
|
<view class="cover-fallback" v-if="isCoverError"> |
||||
|
<uni-icons type="image" size="40" color="#999"></uni-icons> |
||||
|
<text class="fallback-text">封面加载失败</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 2. 小说信息区域 --> |
||||
|
<view class="novel-info"> |
||||
|
<text class="novel-title">园界修真传</text> |
||||
|
<text class="novel-chapter">第1章：考研失败是有原因的</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 3. 音频核心控制区域 --> |
||||
|
<view class="audio-player"> |
||||
|
<!-- Uniapp 音频组件（替代原生audio，支持多端） --> |
||||
|
<uni-audio |
||||
|
ref="audioRef" |
||||
|
:src="audioUrl" |
||||
|
:preload="preloadMode" |
||||
|
:initial-time="0" |
||||
|
@play="updatePlayStatus(true)" |
||||
|
@pause="updatePlayStatus(false)" |
||||
|
@ended="handleAudioEnd" |
||||
|
@timeupdate="updateProgress" |
||||
|
@error="handleAudioError" |
||||
|
hidden |
||||
|
></uni-audio> |
||||
|
|
||||
|
<!-- 播放/暂停按钮 --> |
||||
|
<button |
||||
|
class="play-btn" |
||||
|
:disabled="isAudioLoading" |
||||
|
@click="togglePlayPause" |
||||
|
hover-class="play-btn-hover" |
||||
|
> |
||||
|
<uni-icons |
||||
|
:type="isPlaying ? 'pause' : 'play'" |
||||
|
size="24" |
||||
|
color="#fff" |
||||
|
></uni-icons> |
||||
|
</button> |
||||
|
|
||||
|
<!-- 进度条控制（支持点击+拖动） --> |
||||
|
<view class="progress-container" @click="handleProgressClick"> |
||||
|
<!-- 已播放进度 --> |
||||
|
<view |
||||
|
class="progress-played" |
||||
|
:style="{ width: `${progressPercent}%` }" |
||||
|
></view> |
||||
|
<!-- 进度滑块 --> |
||||
|
<view |
||||
|
class="progress-thumb" |
||||
|
:style="{ left: `${progressPercent}%` }" |
||||
|
@touchstart="startDragProgress" |
||||
|
@touchmove="onDragProgress" |
||||
|
@touchend="endDragProgress" |
||||
|
></view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 时间显示（已播放/总时长） --> |
||||
|
<view class="time-display"> |
||||
|
<text>{{ formatTime(currentTime) }}</text> |
||||
|
<text class="time-split">/</text> |
||||
|
<text>{{ formatTime(totalTime) }}</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 音量控制 --> |
||||
|
<view class="volume-control"> |
||||
|
<uni-icons |
||||
|
:type="isMuted ? 'volume-off' : 'volume-up'" |
||||
|
size="18" |
||||
|
color="#666" |
||||
|
@click="toggleMute" |
||||
|
></uni-icons> |
||||
|
<slider |
||||
|
class="volume-slider" |
||||
|
min="0" |
||||
|
max="100" |
||||
|
:value="currentVolume" |
||||
|
@change="adjustVolume" |
||||
|
activeColor="#32c5ff" |
||||
|
></slider> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 清晰度选择（模拟多音质切换） --> |
||||
|
<view class="quality-select"> |
||||
|
<text class="quality-label">清晰度：</text> |
||||
|
<picker |
||||
|
class="quality-picker" |
||||
|
:value="selectedQuality" |
||||
|
:range="qualityOptions" |
||||
|
:range-key="'label'" |
||||
|
@change="switchAudioQuality" |
||||
|
> |
||||
|
<text>{{ qualityOptions.find(item => item.value === selectedQuality).label }}</text> |
||||
|
<uni-icons type="down" size="14" color="#666" class="picker-icon"></uni-icons> |
||||
|
</picker> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PlayNovel', |
||||
|
data() { |
||||
|
return { |
||||
|
// 图片配置 |
||||
|
coverUrl: '/static/image.png', // 封面图路径（Uniapp 静态资源放static目录） |
||||
|
isCoverLoading: true, // 封面加载状态 |
||||
|
isCoverError: false, // 封面加载失败状态 |
||||
|
|
||||
|
// 音频配置 |
||||
|
audioUrl: 'https://des.js-dyyj.com/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3', // 音频文件路径（需替换为实际地址，支持本地/CDN） |
||||
|
preloadMode: 'auto', // 预加载策略：auto/metadata/none |
||||
|
isAudioLoading: false, // 音频加载状态 |
||||
|
isPlaying: false, // 播放状态 |
||||
|
currentTime: 0, // 当前播放时间（秒） |
||||
|
totalTime: 0, // 音频总时长（秒） |
||||
|
progressPercent: 0, // 播放进度百分比（0-100） |
||||
|
currentVolume: 80, // 当前音量（0-100） |
||||
|
isMuted: false, // 静音状态 |
||||
|
isDragging: false, // 进度条拖动状态 |
||||
|
|
||||
|
// 清晰度配置（需后端提供对应音质的音频地址） |
||||
|
qualityOptions: [ |
||||
|
{ label: '标准', value: 'low' }, |
||||
|
{ label: '高清', value: 'medium' }, |
||||
|
{ label: '无损', value: 'high' } |
||||
|
], |
||||
|
selectedQuality: 'medium' // 默认高清 |
||||
|
}; |
||||
|
}, |
||||
|
onReady() { |
||||
|
// Uniapp 组件就绪后获取音频实例 |
||||
|
this.audioRef = this.$refs.audioRef; |
||||
|
// 初始化音量 |
||||
|
this.audioRef.setVolume(this.currentVolume / 100); |
||||
|
// 初始化音频地址（可根据清晰度默认值设置） |
||||
|
this.switchAudioQuality({ detail: { value: 'medium' } }); |
||||
|
}, |
||||
|
onUnload() { |
||||
|
// 页面卸载时停止播放，释放资源 |
||||
|
if (this.audioRef) { |
||||
|
this.audioRef.pause(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// ---------------------- 图片相关方法 ---------------------- |
||||
|
handleCoverError() { |
||||
|
this.isCoverLoading = false; |
||||
|
this.isCoverError = true; |
||||
|
}, |
||||
|
|
||||
|
// ---------------------- 音频核心控制 ---------------------- |
||||
|
// 切换播放/暂停 |
||||
|
togglePlayPause() { |
||||
|
if (this.isPlaying) { |
||||
|
this.audioRef.pause(); |
||||
|
} else { |
||||
|
this.isAudioLoading = true; |
||||
|
this.audioRef.play().catch(err => { |
||||
|
console.error('播放失败：', err); |
||||
|
this.isAudioLoading = false; |
||||
|
uni.showToast({ title: '音频播放失败', icon: 'none' }); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 更新播放状态 |
||||
|
updatePlayStatus(isPlaying) { |
||||
|
this.isPlaying = isPlaying; |
||||
|
this.isAudioLoading = false; |
||||
|
}, |
||||
|
|
||||
|
// 音频播放完毕（可扩展下一章逻辑） |
||||
|
handleAudioEnd() { |
||||
|
this.isPlaying = false; |
||||
|
this.currentTime = 0; |
||||
|
this.progressPercent = 0; |
||||
|
uni.showToast({ title: '本章播放完毕', icon: 'none' }); |
||||
|
// 如需自动下一章，可在此处调用章节切换逻辑 |
||||
|
}, |
||||
|
|
||||
|
// 音频加载失败 |
||||
|
handleAudioError() { |
||||
|
this.isAudioLoading = false; |
||||
|
uni.showToast({ title: '音频加载失败', icon: 'none' }); |
||||
|
}, |
||||
|
|
||||
|
// ---------------------- 进度条控制 ---------------------- |
||||
|
// 实时更新进度 |
||||
|
updateProgress() { |
||||
|
if (!this.isDragging) { |
||||
|
this.currentTime = this.audioRef.currentTime; |
||||
|
this.totalTime = this.audioRef.duration || 0; |
||||
|
this.progressPercent = (this.currentTime / this.totalTime) * 100 || 0; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 点击进度条跳转 |
||||
|
handleProgressClick(e) { |
||||
|
const containerWidth = e.currentTarget.offsetWidth; |
||||
|
const clickLeft = e.touches[0].clientX - e.currentTarget.offsetLeft; |
||||
|
const percent = (clickLeft / containerWidth) * 100; |
||||
|
this.setProgress(percent); |
||||
|
}, |
||||
|
|
||||
|
// 开始拖动进度条 |
||||
|
startDragProgress() { |
||||
|
this.isDragging = true; |
||||
|
}, |
||||
|
|
||||
|
// 拖动进度条中 |
||||
|
onDragProgress(e) { |
||||
|
if (!this.isDragging) return; |
||||
|
const containerWidth = e.currentTarget.offsetWidth; |
||||
|
const dragLeft = e.touches[0].clientX - e.currentTarget.offsetLeft; |
||||
|
let percent = (dragLeft / containerWidth) * 100; |
||||
|
// 限制进度在0-100之间 |
||||
|
percent = Math.max(0, Math.min(100, percent)); |
||||
|
this.progressPercent = percent; |
||||
|
}, |
||||
|
|
||||
|
// 结束拖动进度条 |
||||
|
endDragProgress() { |
||||
|
this.isDragging = false; |
||||
|
this.setProgress(this.progressPercent); |
||||
|
}, |
||||
|
|
||||
|
// 设置进度（通用方法） |
||||
|
setProgress(percent) { |
||||
|
const targetTime = (percent / 100) * this.totalTime; |
||||
|
this.audioRef.seek(targetTime); |
||||
|
this.currentTime = targetTime; |
||||
|
this.progressPercent = percent; |
||||
|
}, |
||||
|
|
||||
|
// ---------------------- 音量控制 ---------------------- |
||||
|
// 切换静音 |
||||
|
toggleMute() { |
||||
|
this.isMuted = !this.isMuted; |
||||
|
this.audioRef.setMuted(this.isMuted); |
||||
|
}, |
||||
|
|
||||
|
// 调节音量 |
||||
|
adjustVolume(e) { |
||||
|
this.currentVolume = e.detail.value; |
||||
|
this.audioRef.setVolume(this.currentVolume / 100); |
||||
|
// 调节音量时自动取消静音 |
||||
|
if (this.isMuted && this.currentVolume > 0) { |
||||
|
this.isMuted = false; |
||||
|
this.audioRef.setMuted(false); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// ---------------------- 清晰度切换 ---------------------- |
||||
|
switchAudioQuality(e) { |
||||
|
const quality = e.detail.value; |
||||
|
this.selectedQuality = quality; |
||||
|
// 此处需替换为实际音质对应的音频地址（示例格式） |
||||
|
const audioMap = { |
||||
|
low: '/static/audio/chapter1-low.mp3', |
||||
|
medium: '/static/audio/chapter1-medium.mp3', |
||||
|
high: '/static/audio/chapter1-high.mp3' |
||||
|
}; |
||||
|
this.audioUrl = audioMap[quality]; |
||||
|
// 切换音频后保持播放状态 |
||||
|
if (this.isPlaying) { |
||||
|
this.audioRef.play(); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// ---------------------- 工具方法 ---------------------- |
||||
|
// 格式化时间（秒 → 分:秒，如 8:16） |
||||
|
formatTime(seconds) { |
||||
|
if (!seconds) return '00:00'; |
||||
|
const min = Math.floor(seconds / 60); |
||||
|
const sec = Math.floor(seconds % 60); |
||||
|
// 补零处理（如 1 → 01） |
||||
|
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 容器整体样式 */ |
||||
|
.novel-player-container { |
||||
|
padding: 20rpx; |
||||
|
background: #595959; |
||||
|
min-height: 100vh; |
||||
|
} |
||||
|
|
||||
|
/* 封面图样式 */ |
||||
|
.novel-cover-wrapper { |
||||
|
width: 100%; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 30rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
.novel-cover { |
||||
|
width: 100%; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
.cover-loading { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
.cover-fallback { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
background-color: #f5f5f5; |
||||
|
} |
||||
|
.fallback-text { |
||||
|
margin-top: 20rpx; |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
} |
||||
|
|
||||
|
/* 小说信息样式 */ |
||||
|
.novel-info { |
||||
|
margin-bottom: 30rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.novel-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: #fff; |
||||
|
margin-bottom: 10rpx; |
||||
|
display: block; |
||||
|
} |
||||
|
.novel-chapter { |
||||
|
font-size: 28rpx; |
||||
|
color: #fff; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
/* 音频播放器样式 */ |
||||
|
.audio-player { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 25rpx; |
||||
|
} |
||||
|
|
||||
|
/* 播放按钮样式 */ |
||||
|
.play-btn { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #32c5ff; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.play-btn-hover { |
||||
|
background-color: #28a4e0; |
||||
|
} |
||||
|
|
||||
|
/* 进度条样式 */ |
||||
|
.progress-container { |
||||
|
width: 100%; |
||||
|
height: 12rpx; |
||||
|
background-color: #eee; |
||||
|
border-radius: 6rpx; |
||||
|
position: relative; |
||||
|
touch-action: none; /* 防止移动端默认触摸行为 */ |
||||
|
} |
||||
|
.progress-played { |
||||
|
height: 100%; |
||||
|
background-color: #32c5ff; |
||||
|
border-radius: 6rpx; |
||||
|
} |
||||
|
.progress-thumb { |
||||
|
width: 24rpx; |
||||
|
height: 24rpx; |
||||
|
border-radius: 50%; |
||||
|
background-color: #32c5ff; |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
margin-left: -12rpx; |
||||
|
box-shadow: 0 0 10rpx rgba(50, 197, 255, 0.5); |
||||
|
} |
||||
|
|
||||
|
/* 时间显示样式 */ |
||||
|
.time-display { |
||||
|
font-size: 24rpx; |
||||
|
color: #999; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.time-split { |
||||
|
margin: 0 10rpx; |
||||
|
} |
||||
|
|
||||
|
/* 音量控制样式 */ |
||||
|
.volume-control { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15rpx; |
||||
|
} |
||||
|
.volume-slider { |
||||
|
flex: 1; |
||||
|
height: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 清晰度选择样式 */ |
||||
|
.quality-select { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
.quality-picker { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
|
color: #32c5ff; |
||||
|
} |
||||
|
.picker-icon { |
||||
|
margin-top: 4rpx; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
Loading…
Reference in new issue