kola-web
3 months ago
22 changed files with 597 additions and 69 deletions
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 551 B |
@ -1,14 +1,185 @@ |
|||||||
.page { |
.page { |
||||||
padding: 48rpx 32rpx; |
padding: 48rpx 32rpx 200rpx; |
||||||
|
|
||||||
.page-title { |
.page-title { |
||||||
font-size: 44rpx; |
font-size: 44rpx; |
||||||
color: #222222; |
color: #222222; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
line-height: 48rpx; |
line-height: 48rpx; |
||||||
} |
} |
||||||
.page-date{ |
|
||||||
|
.page-date { |
||||||
margin-top: 24rpx; |
margin-top: 24rpx; |
||||||
font-size: 28rpx; |
font-size: 28rpx; |
||||||
color: #999999; |
color: #999999; |
||||||
} |
} |
||||||
|
|
||||||
|
.audio-bar { |
||||||
|
margin-top: 32rpx; |
||||||
|
padding: 32rpx; |
||||||
|
--slider-disabled-opacity: 1; |
||||||
|
background-color: #f9fafb; |
||||||
|
border-radius: 24rpx; |
||||||
|
|
||||||
|
.a-header { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.wrap { |
||||||
|
line-height: 1; |
||||||
|
|
||||||
|
.name { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #000000; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.date { |
||||||
|
margin-top: 12rpx; |
||||||
|
font-size: 24rpx; |
||||||
|
color: #65686c; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 42rpx; |
||||||
|
height: 42rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.progress { |
||||||
|
display: block; |
||||||
|
margin-top: 30rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rich { |
||||||
|
margin-top: 32rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.quick-article { |
||||||
|
margin-top: 24rpx; |
||||||
|
padding: 26rpx 32rpx; |
||||||
|
background: #f9fafb; |
||||||
|
line-height: 48rpx; |
||||||
|
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||||
|
|
||||||
|
.label { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #3795f7; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.type { |
||||||
|
margin-top: 48rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 24rpx; |
||||||
|
|
||||||
|
.label { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
padding: 6rpx 24rpx; |
||||||
|
border-radius: 40rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #fff; |
||||||
|
background-color: #3795f7; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom)); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
box-shadow: 0 -6rpx 32.8rpx rgba(0, 0, 0, 0.1); |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
.item { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 12rpx; |
||||||
|
|
||||||
|
.icon { |
||||||
|
width: 56rpx; |
||||||
|
height: 56rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.popup-directory { |
||||||
|
.p-close-line { |
||||||
|
padding: 36rpx 32rpx; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-end; |
||||||
|
.option { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #999999; |
||||||
|
.icon { |
||||||
|
width: 24rpx; |
||||||
|
height: 24rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.p-title { |
||||||
|
padding: 0 32rpx; |
||||||
|
font-size: 44rpx; |
||||||
|
color: #222222; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.p-type { |
||||||
|
padding: 32rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 24rpx; |
||||||
|
|
||||||
|
.label { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #999999; |
||||||
|
} |
||||||
|
|
||||||
|
.item { |
||||||
|
padding: 6rpx 24rpx; |
||||||
|
border-radius: 40rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #fff; |
||||||
|
background-color: #3795f7; |
||||||
|
} |
||||||
|
} |
||||||
|
.p-scroll { |
||||||
|
max-height: 50vh; |
||||||
|
padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); |
||||||
|
.row { |
||||||
|
padding: 32rpx; |
||||||
|
position: relative; |
||||||
|
&::after { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 32rpx; |
||||||
|
content: ''; |
||||||
|
width: calc(100% - 64rpx); |
||||||
|
height: 1px; |
||||||
|
background-color: #f0f0f0; |
||||||
|
} |
||||||
|
&:last-of-type::after { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
&.current { |
||||||
|
background: rgba(55, 149, 247, 0.06); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,8 +1,79 @@ |
|||||||
const _app = getApp<IAppOption>(); |
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: {}, |
data: { |
||||||
onLoad() {}, |
show: false, |
||||||
|
|
||||||
|
progress: 0, |
||||||
|
url: 'http://m10.music.126.net/20241126110303/3f2481d2d6d50acd2009359539eadda0/ymusic/5353/0f0f/0358/d99739615f8e5153d77042092f07fd77.mp3', |
||||||
|
play: false, |
||||||
|
time: '00:01/00:00', |
||||||
|
}, |
||||||
|
innerAudioContext: null as WechatMiniprogram.InnerAudioContext | null, |
||||||
|
onLoad() { |
||||||
|
this.innerAudioContext = wx.createInnerAudioContext(); |
||||||
|
}, |
||||||
|
onUnload() { |
||||||
|
if (this.innerAudioContext) { |
||||||
|
this.innerAudioContext?.stop(); |
||||||
|
this.innerAudioContext.destroy(); |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePlay() { |
||||||
|
const { url, play } = this.data; |
||||||
|
if (this.innerAudioContext) { |
||||||
|
if (play) { |
||||||
|
this.innerAudioContext.stop(); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.innerAudioContext.stop(); |
||||||
|
this.innerAudioContext.src = url; |
||||||
|
this.innerAudioContext.play(); |
||||||
|
this.setData({ |
||||||
|
play: true, |
||||||
|
}); |
||||||
|
const listener = () => { |
||||||
|
if (this.innerAudioContext) { |
||||||
|
const { currentTime, duration } = this.innerAudioContext; |
||||||
|
const time = `${this.formatTime(currentTime)}/${this.formatTime(duration)}`; |
||||||
|
const progress = (currentTime / duration) * 100; |
||||||
|
this.setData({ |
||||||
|
time, |
||||||
|
progress, |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
this.innerAudioContext.onTimeUpdate(listener); |
||||||
|
this.innerAudioContext.onEnded(() => { |
||||||
|
this.setData({ |
||||||
|
play: false, |
||||||
|
}); |
||||||
|
}); |
||||||
|
this.innerAudioContext.onStop(() => { |
||||||
|
this.setData({ |
||||||
|
play: false, |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePause() { |
||||||
|
if (this.innerAudioContext) { |
||||||
|
this.innerAudioContext.pause(); |
||||||
|
this.setData({ |
||||||
|
play: false, |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
formatTime(time: number) { |
||||||
|
const minutes = Math.floor(time / 60); |
||||||
|
const seconds = Math.floor(time % 60); |
||||||
|
return `${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; |
||||||
|
}, |
||||||
|
onClose() { |
||||||
|
this.setData({ |
||||||
|
show: false, |
||||||
|
}); |
||||||
|
}, |
||||||
}); |
}); |
||||||
|
|
||||||
export {} |
export {}; |
||||||
|
|||||||
@ -0,0 +1,5 @@ |
|||||||
|
{ |
||||||
|
"navigationBarTitleText": "用户隐私协议", |
||||||
|
"navigationStyle": "default", |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -0,0 +1,8 @@ |
|||||||
|
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() {}, |
||||||
|
}); |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"usingComponents": { |
||||||
|
"van-nav-bar": "@vant/weapp/nav-bar/index", |
||||||
|
"van-icon": "@vant/weapp/icon/index", |
||||||
|
"pagination":"/components/pagination/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,99 @@ |
|||||||
|
page { |
||||||
|
background-color: #f3f4f5; |
||||||
|
} |
||||||
|
.page { |
||||||
|
padding-bottom: 80rpx; |
||||||
|
.search { |
||||||
|
margin: 34rpx 32rpx 0; |
||||||
|
padding: 0 0 0 24rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background: linear-gradient(158deg, #ffffff 0%, #f2f9fe 100%); |
||||||
|
border-radius: 106rpx 106rpx 106rpx 106rpx; |
||||||
|
border: 1px solid #ffffff; |
||||||
|
.icon { |
||||||
|
width: 36rpx; |
||||||
|
height: 36rpx; |
||||||
|
} |
||||||
|
.input { |
||||||
|
flex: 1; |
||||||
|
padding: 16rpx; |
||||||
|
line-height: 40rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
} |
||||||
|
.place-input { |
||||||
|
color: #c9cdd4; |
||||||
|
} |
||||||
|
} |
||||||
|
.tip { |
||||||
|
margin: 52rpx 32rpx 0; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #222222; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.card { |
||||||
|
padding: 24rpx; |
||||||
|
margin: 24rpx 32rpx 0; |
||||||
|
display: flex; |
||||||
|
gap: 24rpx; |
||||||
|
background: linear-gradient(173deg, #ffffff 0%, #eff7ff 100%); |
||||||
|
border-radius: 24rpx 24rpx 24rpx 24rpx; |
||||||
|
border: 2rpx solid #ffffff; |
||||||
|
.photo { |
||||||
|
flex-shrink: 0; |
||||||
|
width: 218rpx; |
||||||
|
height: 218rpx; |
||||||
|
border-radius: 16rpx; |
||||||
|
} |
||||||
|
.c-container { |
||||||
|
flex: 1; |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #222222; |
||||||
|
font-weight: bold; |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
.type { |
||||||
|
margin-top: 16rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #999999; |
||||||
|
line-height: 28rpx; |
||||||
|
} |
||||||
|
.stat { |
||||||
|
margin-top: 42rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 40rpx; |
||||||
|
.s-item { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 8rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #999999; |
||||||
|
.icon { |
||||||
|
width: 28rpx; |
||||||
|
height: 28rpx; |
||||||
|
} |
||||||
|
&.active { |
||||||
|
color: #3795f7; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.empty-search { |
||||||
|
.e-icon { |
||||||
|
margin: 186rpx auto 0; |
||||||
|
display: block; |
||||||
|
width: 217rpx; |
||||||
|
height: 236rpx; |
||||||
|
} |
||||||
|
.content { |
||||||
|
margin-top: 44rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
line-height: 48rpx; |
||||||
|
color: #999999; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
background: "transparent", |
||||||
|
|
||||||
|
pagination: { |
||||||
|
page: 1, |
||||||
|
pages: 1, |
||||||
|
count: 1, |
||||||
|
}, |
||||||
|
list: [], |
||||||
|
}, |
||||||
|
onLoad() {}, |
||||||
|
getList(newPage = 1) { |
||||||
|
// wx.ajax({
|
||||||
|
// method: "GET",
|
||||||
|
// url: `?r=takeda/case/get-list`,
|
||||||
|
// data: {
|
||||||
|
// page: newPage,
|
||||||
|
// },
|
||||||
|
// }).then((res) => {
|
||||||
|
// const list = res.page === 1 ? res.list : [...this.data.list, ...res.list];
|
||||||
|
// this.setData({
|
||||||
|
// list,
|
||||||
|
// pagination: {
|
||||||
|
// page: res.page,
|
||||||
|
// pages: res.pages,
|
||||||
|
// count: res.count,
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
}, |
||||||
|
onReachBottom() { |
||||||
|
const { page, pages } = this.data.pagination; |
||||||
|
if (pages > page && this.data.list.length) { |
||||||
|
this.getList(page + 1); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack(); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export {}; |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
<van-nav-bar |
||||||
|
title="搜索" |
||||||
|
border="{{false}}" |
||||||
|
custom-style="background:{{background}}" |
||||||
|
bind:click-left="handleBack" |
||||||
|
fixed |
||||||
|
> |
||||||
|
<van-icon name="arrow-left" slot="left" color="#000" size="46rpx" /> |
||||||
|
</van-nav-bar> |
||||||
|
|
||||||
|
<view class="page" style="padding-top:{{menuButtonInfo.bottom}}px;"> |
||||||
|
<view class="search"> |
||||||
|
<image class="icon" src="/images/icon-search.png"></image> |
||||||
|
<input |
||||||
|
type="text" |
||||||
|
class="input" |
||||||
|
placeholder-class="place-input" |
||||||
|
confirm-type="search" |
||||||
|
bindconfirm="handleSearch" |
||||||
|
placeholder="请输入要搜索的内容" |
||||||
|
/> |
||||||
|
</view> |
||||||
|
<view class="tip">以下为搜到的内容</view> |
||||||
|
<view class="card"> |
||||||
|
<image class="photo" mode="aspectFill" src="/images/place.png"></image> |
||||||
|
<view class="c-container"> |
||||||
|
<view class="title">骨密度是骨健康的关键指标，我们检查对吗？</view> |
||||||
|
<view class="type">健康管理/口腔</view> |
||||||
|
<view class="stat"> |
||||||
|
<view class="s-item"> |
||||||
|
<image class="icon" src="/images/icon-eye.png"></image> |
||||||
|
123 |
||||||
|
</view> |
||||||
|
<view class="s-item active"> |
||||||
|
<image class="icon" src="/images/icon-collection-active.png"></image> |
||||||
|
取消收藏 |
||||||
|
</view> |
||||||
|
<view class="s-item"> |
||||||
|
<image class="icon" src="/images/icon-collection.png"></image> |
||||||
|
收藏 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="empty-search" wx:if="{{search && pagination.count===0}}"> |
||||||
|
<image class="e-icon" src="/images/empty-1.png"></image> |
||||||
|
<view class="content"> |
||||||
|
抱歉，未搜到相关内容 |
||||||
|
<view></view> |
||||||
|
换个词试试吧 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<pagination wx:else pagination="{{pagination}}"></pagination> |
||||||
|
</view> |
||||||
Loading…
Reference in new issue