kola-web
4 days ago
50 changed files with 635 additions and 185 deletions
@ -0,0 +1,8 @@ |
|||||||
|
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() {}, |
||||||
|
}); |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
<!--pages/story/index.wxml--> |
||||||
|
<text>pages/story/index.wxml</text> |
||||||
|
After Width: | Height: | Size: 180 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 4.8 MiB |
@ -1,8 +1,76 @@ |
|||||||
const _app = getApp<IAppOption>(); |
const licia = require('miniprogram-licia') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: {}, |
data: { |
||||||
onLoad() {}, |
id: '', |
||||||
}); |
detail: {} as any, |
||||||
|
LikeTimes: 0, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
id: options.id, |
||||||
|
}) |
||||||
|
app.waitLogin().then(() => { |
||||||
|
this.handleView() |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleView() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/view', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
|
}, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/knowledge/detail', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
this.setData({ |
||||||
|
detail: res, |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleLike() { |
||||||
|
this.setData({ |
||||||
|
'detail.LikeTimes': Number(this.data.detail.LikeTimes) + 1, |
||||||
|
LikeTimes: this.data.LikeTimes + 1, |
||||||
|
}) |
||||||
|
this.likePost() |
||||||
|
}, |
||||||
|
likePost: licia.debounce(function (this: any) { |
||||||
|
const { id, LikeTimes } = this.data |
||||||
|
this.setData({ |
||||||
|
LikeTimes: 0, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/like', |
||||||
|
data: { |
||||||
|
Id: id, |
||||||
|
LikeTimes, |
||||||
|
}, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, 1000), |
||||||
|
onShareAppMessage() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/share', |
||||||
|
data: { Id: this.data.id }, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
export {} |
export {} |
||||||
|
|||||||
@ -1,22 +1,22 @@ |
|||||||
<view class="page"> |
<view class="page"> |
||||||
<view class="title">一图读懂基因疗法治疗血友病B</view> |
<view class="title">{{detail.Title}}</view> |
||||||
<view class="info"> |
<view class="info"> |
||||||
<view class="date">2025-04-01</view> |
<view class="date">{{detail.UpdateTime}}</view> |
||||||
<view class="eye"> |
<view class="eye"> |
||||||
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
<image class="icon" src="{{imageUrl}}icon6.png?t={{Timestamp}}"></image> |
||||||
<view class="num">12</view> |
<view class="num" wx:if="{{detail.ViewNum > 0}}">{{detail.ViewTimes}}</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
<mp-html class="mp-html" content="111111111"></mp-html> |
<mp-html class="mp-html" content="{{detail.Content}}"></mp-html> |
||||||
<view class="footer"> |
<view class="footer"> |
||||||
<button class="btn" open-type="share"> |
<button class="btn" open-type="share"> |
||||||
<image class="icon" src="{{imageUrl}}icon7.png?t={{Timestamp}}"></image> |
<image class="icon" src="{{imageUrl}}icon7.png?t={{Timestamp}}"></image> |
||||||
<view class="num">10</view> |
<view class="num" wx:if="{{detail.ShareTimes>0}}">{{detail.ShareTimes}}</view> |
||||||
</button> |
</button> |
||||||
<view class="line"></view> |
<view class="line"></view> |
||||||
<view class="btn" bindtap="onDetail"> |
<view class="btn" bindtap="handleLike"> |
||||||
<image class="icon" src="{{imageUrl}}icon8.png?t={{Timestamp}}"></image> |
<image class="icon" src="{{imageUrl}}icon8.png?t={{Timestamp}}"></image> |
||||||
<view class="num">12</view> |
<view class="num" wx:if="{{detail.LikeTimes>0}}">{{detail.LikeTimes}}</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
|||||||
@ -1,6 +1,7 @@ |
|||||||
{ |
{ |
||||||
"navigationStyle": "custom", |
"navigationStyle": "custom", |
||||||
"usingComponents": { |
"usingComponents": { |
||||||
"mp-video-swiper": "@miniprogram-component-plus/video-swiper" |
"mp-video-swiper": "@miniprogram-component-plus/video-swiper", |
||||||
|
"navbar": "/components/navbar/index" |
||||||
} |
} |
||||||
} |
} |
||||||
|
|||||||
@ -1,26 +1,157 @@ |
|||||||
const _app = getApp<IAppOption>() |
const licia = require('miniprogram-licia') |
||||||
|
const app = getApp<IAppOption>() |
||||||
|
// 组件说明文档 https://github.com/wechat-miniprogram/miniprogram-component-plus/blob/master/docs/video-swiper.md
|
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: { |
data: { |
||||||
videoList: [ |
id: '', |
||||||
{ |
activeId: '', |
||||||
id: '3', |
LikeTimes: 0, |
||||||
url: 'https://circlehbsaas.oss-cn-beijing.aliyuncs.com/video/20250219819_tmp_e2ec2711a0532b331bf4308476e5f76e.mp4', |
|
||||||
objectFit: 'cover', |
current: 0, |
||||||
|
videoList: [] as any, |
||||||
|
|
||||||
|
beforeLoading: false, |
||||||
|
beforeEnd: false, |
||||||
|
afterLoading: false, |
||||||
|
afterEnd: false, |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.setData({ |
||||||
|
id: options.id, |
||||||
|
activeId: options.id, |
||||||
|
}) |
||||||
|
app.waitLogin().then(() => { |
||||||
|
this.handleView() |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleView() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/view', |
||||||
|
data: { |
||||||
|
Id: this.data.activeId, |
||||||
|
}, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
|
}, |
||||||
|
getDetail() { |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/knowledge/detail', |
||||||
|
data: { |
||||||
|
Id: this.data.id, |
||||||
}, |
}, |
||||||
{ |
}).then((res) => { |
||||||
id: '1', |
this.setData({ |
||||||
url: 'https://circlehbsaas.oss-cn-beijing.aliyuncs.com/video/20250217708_B0z8keBB6vlJ7ec6b4d3bd8cad5088ae4fd5e8dd428f.mp4', |
videoList: [res], |
||||||
objectFit: 'contain', |
afterLoading: true, |
||||||
|
beforeLoading: true, |
||||||
|
}) |
||||||
|
this.playCurrentVideo() |
||||||
|
this.getList('before') |
||||||
|
this.getList('after') |
||||||
|
}) |
||||||
|
}, |
||||||
|
getList(sort: 'before' | 'after') { |
||||||
|
const { videoList, id, current } = this.data |
||||||
|
wx.ajax({ |
||||||
|
method: 'GET', |
||||||
|
url: '?r=wtx/knowledge/video-sort-list', |
||||||
|
data: { |
||||||
|
Id: id, |
||||||
|
sort, |
||||||
|
}, |
||||||
|
}).then((res) => { |
||||||
|
if (sort === 'before') { |
||||||
|
const newVideoList = [...res.list, ...videoList] |
||||||
|
this.setData({ |
||||||
|
videoList: newVideoList, |
||||||
|
beforeLoading: false, |
||||||
|
current: newVideoList.length - 1 + current, |
||||||
|
beforeEnd: res.length === 0, |
||||||
|
}) |
||||||
|
} |
||||||
|
if (sort === 'after') { |
||||||
|
this.setData({ |
||||||
|
videoList: videoList.concat(res.list), |
||||||
|
afterLoading: false, |
||||||
|
afterEnd: res.length === 0, |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleChange(e: any) { |
||||||
|
const { beforeLoading, afterLoading, beforeEnd, afterEnd, videoList } = this.data |
||||||
|
const { current } = e.detail |
||||||
|
this.setData({ |
||||||
|
current, |
||||||
|
}) |
||||||
|
if (current === 0 && !beforeLoading && beforeEnd) { |
||||||
|
this.setData({ |
||||||
|
beforeLoading: true, |
||||||
|
}) |
||||||
|
this.getList('before') |
||||||
|
} |
||||||
|
if (current === videoList.length - 1 && !afterLoading && afterEnd) { |
||||||
|
this.setData({ |
||||||
|
afterLoading: true, |
||||||
|
}) |
||||||
|
this.getList('after') |
||||||
|
} |
||||||
|
this.playCurrentVideo() |
||||||
|
}, |
||||||
|
playCurrentVideo() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
videoList.forEach((item: any, index: number) => { |
||||||
|
if (!item.ctx) { |
||||||
|
item.ctx = wx.createVideoContext(`video-${item.Id}`) |
||||||
|
} |
||||||
|
if (index === current) { |
||||||
|
item.ctx.play() |
||||||
|
} else { |
||||||
|
item.ctx.pause() |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
handleLike() { |
||||||
|
const { current, videoList } = this.data |
||||||
|
const currentVideo = videoList[current] |
||||||
|
const LikeTimes = Number(currentVideo.LikeTimes) + 1 |
||||||
|
const key = `videoList[${current}].LikeTimes` |
||||||
|
this.setData({ |
||||||
|
LikeTimes: this.data.LikeTimes + 1, |
||||||
|
[key]: LikeTimes, |
||||||
|
}) |
||||||
|
this.likePost() |
||||||
|
}, |
||||||
|
likePost: licia.debounce(function (this: any) { |
||||||
|
const { activeId, LikeTimes } = this.data |
||||||
|
this.setData({ |
||||||
|
LikeTimes: 0, |
||||||
|
}) |
||||||
|
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/like', |
||||||
|
data: { |
||||||
|
Id: activeId, |
||||||
|
LikeTimes, |
||||||
}, |
}, |
||||||
{ |
}) |
||||||
id: '2', |
}, 1000), |
||||||
url: 'https://circlehbsaas.oss-cn-beijing.aliyuncs.com/video/20250217596_TFyXNoEMijg67ec6b4d3bd8cad5088ae4fd5e8dd428f.mp4', |
onShareAppMessage() { |
||||||
objectFit: 'contain', |
wx.ajax({ |
||||||
|
method: 'POST', |
||||||
|
url: '?r=wtx/knowledge/share', |
||||||
|
data: { Id: this.data.activeId }, |
||||||
|
}).then(() => { |
||||||
|
this.getDetail() |
||||||
|
}) |
||||||
}, |
}, |
||||||
], |
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
}, |
}, |
||||||
onLoad() {}, |
|
||||||
}) |
}) |
||||||
|
|
||||||
export {} |
export {} |
||||||
|
|||||||
@ -1,26 +1,41 @@ |
|||||||
<!-- https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/video-swiper.html --> |
<navbar fixed custom-style="background:{{background}};color:#fff"> |
||||||
|
<van-icon name="arrow-left" slot="left" size="18px" color="#fff" bind:tap="handleBack"/> |
||||||
|
<view slot="title" style="color: #fff">视频</view> |
||||||
|
</navbar> |
||||||
<view class="page"> |
<view class="page"> |
||||||
<mp-video-swiper class="swiper" video-list="{{videoList}}"></mp-video-swiper> |
<swiper class="swiper" vertical="{{true}}" current="{{current}}" bindchange="handleChange"> |
||||||
<view class="page-footer"> |
<swiper-item class="swiper-item" wx:for="{{videoList}}" wx:key="Id"> |
||||||
<view class="title">你关心的基因治疗一个视频帮您介绍清楚</view> |
<video |
||||||
|
id="video-{{item.Id}}" |
||||||
|
class="video" |
||||||
|
src="{{item.VideoSrc}}" |
||||||
|
poster="{{item.CoverImg}}" |
||||||
|
loop |
||||||
|
object-fit="cover" |
||||||
|
enable-play-gesture |
||||||
|
enable-progress-gesture |
||||||
|
show-center-play-btn="{{false}}" |
||||||
|
controls="{{false}}" |
||||||
|
></video> |
||||||
|
<view class="swiper-item-footer"> |
||||||
|
<view class="title">{{item.Title}}{{item.Id}}</view> |
||||||
<view class="container"> |
<view class="container"> |
||||||
<view class="user"> |
<view class="user"> |
||||||
<image |
<image class="avatar" src="/images/logo1.png"></image> |
||||||
class="avatar" |
|
||||||
src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567" |
|
||||||
></image> |
|
||||||
<view class="name">基因知识库</view> |
<view class="name">基因知识库</view> |
||||||
</view> |
</view> |
||||||
<view class="options"> |
<view class="options"> |
||||||
<view class="o-item"> |
<button class="o-item" open-type="share"> |
||||||
<image class="icon" src="{{imageUrl}}icon9.png?t={{Timestamp}}"></image> |
<image class="icon" src="{{imageUrl}}icon9.png?t={{Timestamp}}"></image> |
||||||
<view class="num">12</view> |
<view class="num">{{item.ShareTimes}}</view> |
||||||
</view> |
</button> |
||||||
<view class="o-item"> |
<view class="o-item" bind:tap="handleLike"> |
||||||
<image class="icon" src="{{imageUrl}}icon10.png?t={{Timestamp}}"></image> |
<image class="icon" src="{{imageUrl}}icon10.png?t={{Timestamp}}"></image> |
||||||
<view class="num">12</view> |
<view class="num">{{item.LikeTimes}}</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
</view> |
</view> |
||||||
|
</swiper-item> |
||||||
|
</swiper> |
||||||
</view> |
</view> |
||||||
|
|||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
.page { |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
position: relative; |
||||||
|
.container { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
padding: 0 60rpx 120rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
.logo { |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
width: 164rpx; |
||||||
|
height: 164rpx; |
||||||
|
} |
||||||
|
.title { |
||||||
|
width: 352rpx; |
||||||
|
height: 108rpx; |
||||||
|
display: block; |
||||||
|
margin: 36rpx auto 0; |
||||||
|
} |
||||||
|
.btn { |
||||||
|
margin: 90rpx auto 0; |
||||||
|
border: none; |
||||||
|
border: none; |
||||||
|
outline: none; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 96rpx; |
||||||
|
background: linear-gradient(356deg, #f23a2f 0%, #fc684f 100%); |
||||||
|
border-radius: 84rpx 84rpx 84rpx 84rpx; |
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
const _app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() {}, |
||||||
|
handlePhone(e) { |
||||||
|
console.log(e) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
<view class="page" style="background: url('/images/bg5.png') no-repeat top center/cover;"> |
||||||
|
<view class="container"> |
||||||
|
<image class="logo" src="/images/logo1.png"></image> |
||||||
|
<image class="title" src="/images/login-title1.png"></image> |
||||||
|
<button class="btn" open-type="getPhoneNumber" bindgetphonenumber="handlePhone">手机号快速授权</button> |
||||||
|
</view> |
||||||
|
</view> |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -0,0 +1,4 @@ |
|||||||
|
.page{ |
||||||
|
width: 100vw; |
||||||
|
height: 100vh; |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
const _app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() { |
||||||
|
setTimeout(() => { |
||||||
|
wx.reLaunch({ |
||||||
|
url: '/pages/index/index', |
||||||
|
}) |
||||||
|
}, 1500) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<image src="{{imageUrl}}start.png?t={{Timestamp}}" mode="aspectFill" class="page"></image> |
||||||
Loading…
Reference in new issue