kola-web
15 hours ago
86 changed files with 2758 additions and 382 deletions
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 364 KiB |
|
Before Width: | Height: | Size: 291 KiB After Width: | Height: | Size: 792 KiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 750 B |
|
Before Width: | Height: | Size: 750 B After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 640 B |
|
Before Width: | Height: | Size: 700 B After Width: | Height: | Size: 910 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 615 B |
|
After Width: | Height: | Size: 684 B |
|
After Width: | Height: | Size: 783 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,9 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"popup": "/components/popup/index", |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"van-popup": "@vant/weapp/popup/index", |
||||||
|
"van-icon": "@vant/weapp/icon/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,354 @@ |
|||||||
|
page { |
||||||
|
background-color: #f7fafc; |
||||||
|
} |
||||||
|
|
||||||
|
.page-title { |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
padding-right: 100rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.page { |
||||||
|
padding-bottom: 260rpx; |
||||||
|
.hero { |
||||||
|
padding: 0 40rpx; |
||||||
|
display: flex; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.hero-text { |
||||||
|
padding-top: 78rpx; |
||||||
|
.hero-title1 { |
||||||
|
display: block; |
||||||
|
width: 233rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.hero-title2 { |
||||||
|
margin-top: 20rpx; |
||||||
|
display: block; |
||||||
|
width: 353rpx; |
||||||
|
height: 56rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.hero-sub { |
||||||
|
margin-top: 24rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #64748b; |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.hero-decor { |
||||||
|
margin-top: 48rpx; |
||||||
|
width: 356rpx; |
||||||
|
height: 356rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card { |
||||||
|
margin: 30rpx; |
||||||
|
padding: 0; |
||||||
|
border-radius: 32rpx; |
||||||
|
border: 2rpx solid #fff; |
||||||
|
background: rgba(255, 255, 255, 0.7); |
||||||
|
box-shadow: 0 8rpx 64rpx 0 rgba(0, 99, 132, 0.08); |
||||||
|
backdrop-filter: blur(10rpx); |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.step { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 24rpx; |
||||||
|
padding: 24rpx 32rpx; |
||||||
|
background: rgba(47, 130, 169, 0.08); |
||||||
|
border: 2rpx solid #fff; |
||||||
|
border-radius: 24rpx; |
||||||
|
margin: 32rpx 32rpx 0; |
||||||
|
|
||||||
|
.step-badge { |
||||||
|
width: 64rpx; |
||||||
|
height: 64rpx; |
||||||
|
border-radius: 50%; |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 29rpx; |
||||||
|
font-weight: 700; |
||||||
|
line-height: 44rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.step-title { |
||||||
|
font-size: 36rpx; |
||||||
|
font-weight: 500; |
||||||
|
color: #2f82a9; |
||||||
|
line-height: 44rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card-body { |
||||||
|
padding: 48rpx 32rpx 54rpx; |
||||||
|
|
||||||
|
.card-desc { |
||||||
|
padding-left: 12rpx; |
||||||
|
width: 400rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: #64748b; |
||||||
|
line-height: 38rpx; |
||||||
|
padding-right: 20rpx; |
||||||
|
white-space: pre-line; |
||||||
|
} |
||||||
|
.upload-grid { |
||||||
|
margin-top: 53rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.rejected { |
||||||
|
margin-top: 24rpx; |
||||||
|
padding: 16rpx 24rpx; |
||||||
|
border-radius: 16rpx; |
||||||
|
background: rgba(186, 26, 26, 0.08); |
||||||
|
box-sizing: border-box; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(186, 26, 26, 1); |
||||||
|
line-height: 40rpx; |
||||||
|
display: flex; |
||||||
|
.icon { |
||||||
|
margin-top: 4rpx; |
||||||
|
display: inline-block; |
||||||
|
flex-shrink: 0; |
||||||
|
margin-right: 16rpx; |
||||||
|
width: 32rpx; |
||||||
|
height: 32rpx; |
||||||
|
vertical-align: -4rpx; |
||||||
|
} |
||||||
|
.blod { |
||||||
|
display: inline-block; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.upload-grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(3, 1fr); |
||||||
|
gap: 24rpx; |
||||||
|
.upload-item { |
||||||
|
aspect-ratio: 1 / 1; |
||||||
|
.upload-empty { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 24rpx; |
||||||
|
background: #f7fafc; |
||||||
|
border: 2rpx dashed rgba(148, 163, 184, 0.26); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
gap: 16rpx; |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.upload-icon { |
||||||
|
width: 56rpx; |
||||||
|
height: 56rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-placeholder { |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(148, 163, 184, 0.51); |
||||||
|
} |
||||||
|
} |
||||||
|
.upload { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
border-radius: 24rpx; |
||||||
|
overflow: hidden; |
||||||
|
.u-img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.mask { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: rgba(0, 0, 0, 0.29); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.icon { |
||||||
|
width: 44rpx; |
||||||
|
height: 44rpx; |
||||||
|
} |
||||||
|
.status { |
||||||
|
margin-top: 12rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.del { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
z-index: 9; |
||||||
|
background-color: rgba(4, 4, 4, 0.31); |
||||||
|
border-radius: 0 16rpx; |
||||||
|
color: #fff; |
||||||
|
font-size: 28rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card-body2 { |
||||||
|
padding: 36rpx 32rpx 32rpx; |
||||||
|
.c-item { |
||||||
|
display: flex; |
||||||
|
gap: 20rpx; |
||||||
|
&.c-item2 { |
||||||
|
margin-top: 50rpx; |
||||||
|
} |
||||||
|
.aside { |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
gap: 16rpx; |
||||||
|
padding-bottom: 23rpx; |
||||||
|
.order { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
border-radius: 50%; |
||||||
|
font-size: 24rpx; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
.line { |
||||||
|
flex: 1; |
||||||
|
border-right: 1px dashed rgba(47, 130, 169, 0.38); |
||||||
|
} |
||||||
|
} |
||||||
|
.container { |
||||||
|
flex: 1; |
||||||
|
.title { |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(30, 41, 59, 1); |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
.content { |
||||||
|
width: 338rpx; |
||||||
|
margin-top: 12rpx; |
||||||
|
font-size: 28rpx; |
||||||
|
line-height: 40rpx; |
||||||
|
color: rgba(100, 116, 139, 1); |
||||||
|
.high { |
||||||
|
display: inline; |
||||||
|
color: rgba(47, 130, 169, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
.share { |
||||||
|
margin-top: 24rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 34rpx; |
||||||
|
.share-img { |
||||||
|
width: 212rpx; |
||||||
|
height: 318rpx; |
||||||
|
border-radius: 32rpx; |
||||||
|
} |
||||||
|
.btn { |
||||||
|
padding: 8rpx 16rpx; |
||||||
|
font-size: 32rpx; |
||||||
|
color: rgba(47, 130, 169, 1); |
||||||
|
line-height: 48rpx; |
||||||
|
border-radius: 12rpx; |
||||||
|
border: 1px solid rgba(47, 130, 169, 0.16); |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
} |
||||||
|
.upload-grid { |
||||||
|
margin-top: 24rpx; |
||||||
|
gap: 22rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.consent { |
||||||
|
margin: 32rpx 30rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: rgba(148, 163, 184, 1); |
||||||
|
line-height: 40rpx; |
||||||
|
.check-content { |
||||||
|
padding-top: 4rpx; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.wx-checkbox-input { |
||||||
|
width: 32rpx; |
||||||
|
height: 32rpx; |
||||||
|
border-radius: 8rpx; |
||||||
|
&.wx-checkbox-input-checked { |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
border-color: transparent; |
||||||
|
&::before { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
display: flex; |
||||||
|
gap: 24rpx; |
||||||
|
padding: 24rpx 30rpx calc(env(safe-area-inset-bottom) + 24rpx); |
||||||
|
box-sizing: border-box; |
||||||
|
|
||||||
|
.btn { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
padding: 24rpx 0; |
||||||
|
border-radius: 24rpx; |
||||||
|
|
||||||
|
.btn-title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 700; |
||||||
|
color: #fff; |
||||||
|
line-height: 44rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-sub { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #fff; |
||||||
|
line-height: 40rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.btn-disabled { |
||||||
|
background: rgba(148, 163, 184, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary { |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
type UploadStatus = 'reviewing' | 'approved' | 'rejected' |
||||||
|
|
||||||
|
interface UploadItem { |
||||||
|
url: string |
||||||
|
status: UploadStatus |
||||||
|
rejectReason?: string |
||||||
|
} |
||||||
|
|
||||||
|
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: { |
||||||
|
popupShow: false, |
||||||
|
popupType: 'popup4', |
||||||
|
popupParams: { |
||||||
|
position: 'center', |
||||||
|
close: true, |
||||||
|
} as any, |
||||||
|
|
||||||
|
id: '', |
||||||
|
detail: {} as any, |
||||||
|
|
||||||
|
// 上传列表（已上传项），null 表示空位待上传
|
||||||
|
step1Slots: [null, null, null] as (UploadItem | null)[], |
||||||
|
step2Slots: [null, null, null] as (UploadItem | null)[], |
||||||
|
agreed: false, |
||||||
|
}, |
||||||
|
onLoad() {}, |
||||||
|
onShow() {}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
|
||||||
|
// 选择并上传图片
|
||||||
|
handleChooseMedia(e: any) { |
||||||
|
const { step, index } = e.currentTarget.dataset |
||||||
|
const key = step === 1 ? 'step1Slots' : 'step2Slots' |
||||||
|
const slots = [...this.data[key]] |
||||||
|
|
||||||
|
wx.chooseMedia({ |
||||||
|
count: 1, |
||||||
|
mediaType: ['image'], |
||||||
|
sourceType: ['album', 'camera'], |
||||||
|
sizeType: ['original', 'compressed'], |
||||||
|
success: (res) => { |
||||||
|
const tempFile = res.tempFiles[0] |
||||||
|
this.uploadImage(tempFile.tempFilePath, key, index, slots) |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 上传图片到服务器
|
||||||
|
uploadImage(filePath: string, key: string, index: number, slots: (UploadItem | null)[]) { |
||||||
|
wx.showLoading({ title: '正在上传' }) |
||||||
|
const url = `${app.globalData.upFileUrl}?r=file-service/upload-img` |
||||||
|
wx.uploadFile({ |
||||||
|
filePath, |
||||||
|
name: 'file', |
||||||
|
url, |
||||||
|
success: (res) => { |
||||||
|
const data = JSON.parse(res.data) |
||||||
|
const imgUrl = data.data.Url |
||||||
|
// 新上传默认为审核中状态
|
||||||
|
slots[index] = { url: imgUrl, status: 'reviewing' } |
||||||
|
this.setData({ [key]: [...slots] }) |
||||||
|
}, |
||||||
|
fail: () => { |
||||||
|
wx.showToast({ title: '上传失败', icon: 'error' }) |
||||||
|
}, |
||||||
|
complete: () => { |
||||||
|
wx.hideLoading() |
||||||
|
}, |
||||||
|
}) |
||||||
|
}, |
||||||
|
|
||||||
|
// 预览图片
|
||||||
|
handlePreviewImage(e: any) { |
||||||
|
const { step, index } = e.currentTarget.dataset |
||||||
|
const key = step === 1 ? 'step1Slots' : 'step2Slots' |
||||||
|
const slots = this.data[key] as (UploadItem | null)[] |
||||||
|
const urls = slots.filter((item): item is UploadItem => !!item).map((item) => item.url) |
||||||
|
wx.previewImage({ current: urls[index] || urls[0], urls }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 删除上传项（仅审核中、驳回可删）
|
||||||
|
handleDeleteUpload(e: any) { |
||||||
|
const { step, index } = e.currentTarget.dataset |
||||||
|
const key = step === 1 ? 'step1Slots' : 'step2Slots' |
||||||
|
const slots = [...this.data[key]] |
||||||
|
slots[index] = null |
||||||
|
this.setData({ [key]: [...slots] }) |
||||||
|
}, |
||||||
|
|
||||||
|
toggleAgree() { |
||||||
|
this.setData({ agreed: !this.data.agreed }) |
||||||
|
}, |
||||||
|
|
||||||
|
handleDownloadPoster() { |
||||||
|
wx.showToast({ title: '海报下载开发中', icon: 'none' }) |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取已上传（非驳回）的图片 URL 列表
|
||||||
|
getValidImages(slots: (UploadItem | null)[]): string[] { |
||||||
|
return slots |
||||||
|
.filter((item): item is UploadItem => !!item && item.status !== 'rejected') |
||||||
|
.map((item) => item.url) |
||||||
|
}, |
||||||
|
|
||||||
|
handleStep1Submit() { |
||||||
|
const { step1Slots, agreed } = this.data |
||||||
|
const validImages = this.getValidImages(step1Slots as (UploadItem | null)[]) |
||||||
|
if (!validImages.length) { |
||||||
|
wx.showToast({ title: '请先上传病例', icon: 'none' }) |
||||||
|
return |
||||||
|
} |
||||||
|
if (!agreed) { |
||||||
|
wx.showToast({ title: '请先勾选确认', icon: 'none' }) |
||||||
|
return |
||||||
|
} |
||||||
|
wx.showToast({ title: '提交开发中', icon: 'none' }) |
||||||
|
}, |
||||||
|
|
||||||
|
handleAllSubmit() { |
||||||
|
const { step1Slots, step2Slots, agreed } = this.data |
||||||
|
const valid1 = this.getValidImages(step1Slots as (UploadItem | null)[]) |
||||||
|
const valid2 = this.getValidImages(step2Slots as (UploadItem | null)[]) |
||||||
|
if (!valid1.length || !valid2.length) { |
||||||
|
wx.showToast({ title: '请完成全部任务', icon: 'none' }) |
||||||
|
return |
||||||
|
} |
||||||
|
if (!agreed) { |
||||||
|
wx.showToast({ title: '请先勾选确认', icon: 'none' }) |
||||||
|
return |
||||||
|
} |
||||||
|
wx.showToast({ title: '提交开发中', icon: 'none' }) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,144 @@ |
|||||||
|
<navbar fixed custom-style="background:{{background}}" back> |
||||||
|
<view class="page-title" slot="left" bind:tap="handleBack"> |
||||||
|
<van-icon name="arrow-left" /> |
||||||
|
</view> |
||||||
|
</navbar> |
||||||
|
|
||||||
|
<view |
||||||
|
class="page" |
||||||
|
style="background: url('{{imageUrl}}bg6.png?t={{Timestamp}}') no-repeat top center/100% 478rpx;padding-top: {{pageTop}}px;" |
||||||
|
> |
||||||
|
<view class="hero"> |
||||||
|
<view class="hero-text"> |
||||||
|
<image class="hero-title1" mode="widthFix" src="{{imageUrl}}title1.png?t={{Timestamp}}"></image> |
||||||
|
<image class="hero-title2" mode="widthFix" src="{{imageUrl}}title2.png?t={{Timestamp}}"></image> |
||||||
|
<view class="hero-sub"> |
||||||
|
上传病例并完成任务，领取 |
||||||
|
<view></view> |
||||||
|
安心随行礼包 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<image class="hero-decor" src="{{imageUrl}}bg19.png?t={{Timestamp}}" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="card" style="background: url('{{imageUrl}}bg18.png?t={{Timestamp}}') no-repeat top 100rpx right -53rpx/385rpx 355rpx"> |
||||||
|
<view class="step"> |
||||||
|
<view class="step-badge">1</view> |
||||||
|
<view class="step-title">上传病例，获得随行小礼</view> |
||||||
|
</view> |
||||||
|
<view class="card-body"> |
||||||
|
<view class="card-desc">上传您的病例即可获得专属随行小礼哦~病历，诊断证明，心电图照片 任意一项</view> |
||||||
|
<view class="upload-grid"> |
||||||
|
<view class="upload-item" wx:for="{{step1Slots}}" wx:key="index" data-step="1" data-index="{{index}}"> |
||||||
|
<view class="upload-empty" bind:tap="handleChooseMedia" data-step="1" data-index="{{index}}" wx:if="{{item}}"> |
||||||
|
<image class="upload-icon" src="{{imageUrl}}icon44.png?t={{Timestamp}}" mode="aspectFit"></image> |
||||||
|
<view class="upload-placeholder">待上传</view> |
||||||
|
</view> |
||||||
|
<view class="upload"> |
||||||
|
<image class="u-img" src="{{imageUrl}}bg1.png?t={{Timestamp}}"></image> |
||||||
|
<view class="mask"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon45.png?t={{Timestamp}}"></image> |
||||||
|
<view class="status">审核中</view> |
||||||
|
<!-- <image class="icon" src="{{imageUrl}}icon45.png?t={{Timestamp}}"></image> --> |
||||||
|
<!-- <view class="status">驳回</view> --> |
||||||
|
<!-- <image class="icon" src="{{imageUrl}}icon46.png?t={{Timestamp}}"></image> --> |
||||||
|
<!-- <view class="status">审核通过</view> --> |
||||||
|
</view> |
||||||
|
<view class="del"> |
||||||
|
<van-icon name="cross" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="rejected"> |
||||||
|
<image class="icon" src="{{imageUrl}}icon39.png?t={{Timestamp}}"></image> |
||||||
|
<view> |
||||||
|
<view class="blod">驳回原因：</view> |
||||||
|
驳回原因：清上传病例、诊断证明心点图照片确诊信息 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="card"> |
||||||
|
<view class="step"> |
||||||
|
<view class="step-badge">2</view> |
||||||
|
<view class="step-title">分享星动守护 解锁安心随行礼</view> |
||||||
|
</view> |
||||||
|
<view class="card-body2" style="background: url('{{imageUrl}}bg19.png?t={{Timestamp}}') no-repeat top 0 right 8rpx/252rpx 234rpx"> |
||||||
|
<view class="c-item"> |
||||||
|
<view class="aside"> |
||||||
|
<view class="order">1</view> |
||||||
|
<view class="line"></view> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="title">发布到小红书</view> |
||||||
|
<view class="content"> |
||||||
|
推荐星动守护平台分享到小红书，带上话题： |
||||||
|
<view class="high">#星动守护PSVT小助手</view> |
||||||
|
</view> |
||||||
|
<view class="share"> |
||||||
|
<image class="share-img" mode="aspectFill" src="{{imageUrl}}share-img1.png?t={{Timestamp}}"></image> |
||||||
|
<view class="btn">一键下载</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="c-item c-item2"> |
||||||
|
<view class="aside"> |
||||||
|
<view class="order">2</view> |
||||||
|
</view> |
||||||
|
<view class="container"> |
||||||
|
<view class="title">上传发布截图</view> |
||||||
|
<view class="content">用于确认任务是否完成</view> |
||||||
|
<view class="upload-grid"> |
||||||
|
<view class="upload-item" wx:for="{{step1Slots}}" wx:key="index" data-step="1" data-index="{{index}}"> |
||||||
|
<view |
||||||
|
class="upload-empty" |
||||||
|
bind:tap="handleChooseMedia" |
||||||
|
data-step="1" |
||||||
|
data-index="{{index}}" |
||||||
|
wx:if="{{!item}}" |
||||||
|
> |
||||||
|
<image class="upload-icon" src="{{imageUrl}}icon44.png?t={{Timestamp}}" mode="aspectFit"></image> |
||||||
|
<view class="upload-placeholder">待上传</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="consent"> |
||||||
|
<checkbox class="check"> |
||||||
|
<view class="check-content">我已确认上传内容真实有效，并同意用于活动资格审核。</view> |
||||||
|
</checkbox> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="footer"> |
||||||
|
<block wx:if="{{true}}"> |
||||||
|
<view class="btn btn-disabled" bind:tap="handleStep1Submit"> |
||||||
|
<view class="btn-title">完成第1步任务</view> |
||||||
|
<view class="btn-sub">领取随心小礼＞</view> |
||||||
|
</view> |
||||||
|
<view class="btn btn-primary" bind:tap="handleAllSubmit"> |
||||||
|
<view class="btn-title">完成全部任务</view> |
||||||
|
<view class="btn-sub">领取随行大礼包＞</view> |
||||||
|
</view> |
||||||
|
</block> |
||||||
|
<view class="btn btn-primary" wx:elif="{{false}}"> |
||||||
|
<view class="btn-title">添加客服，获得审批结果＞</view> |
||||||
|
</view> |
||||||
|
<view class="btn btn-primary" wx:elif="{{false}}"> |
||||||
|
<view class="btn-title">重新提交</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<popup |
||||||
|
show="{{popupShow}}" |
||||||
|
type="{{popupType}}" |
||||||
|
params="{{popupParams}}" |
||||||
|
bind:ok="handlePopupOk" |
||||||
|
bind:cancel="handlePopupCancel" |
||||||
|
></popup> |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
{ |
||||||
|
"navigationStyle": "custom", |
||||||
|
"usingComponents": { |
||||||
|
"navbar": "/components/navbar/index", |
||||||
|
"van-icon": "@vant/weapp/icon/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
page { |
||||||
|
background-color: #f7fafc; |
||||||
|
} |
||||||
|
|
||||||
|
.page-title { |
||||||
|
font-size: 36rpx; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
padding-right: 100rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.page { |
||||||
|
position: relative; |
||||||
|
min-height: 100vh; |
||||||
|
padding-bottom: 60rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.bg-pattern { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
height: 692rpx; |
||||||
|
opacity: 0.68; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
// 吉祥物区域 |
||||||
|
.mascot-wrap { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
margin-top: 32rpx; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.greeting-bubble { |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 304rpx; |
||||||
|
height: 98rpx; |
||||||
|
|
||||||
|
.greeting-bg { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.greeting-text { |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 700; |
||||||
|
color: #fff; |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mascot { |
||||||
|
width: 302rpx; |
||||||
|
height: 384rpx; |
||||||
|
margin-top: 12rpx; |
||||||
|
} |
||||||
|
|
||||||
|
// 信息卡片 |
||||||
|
.info-card { |
||||||
|
margin: 24rpx 30rpx 0; |
||||||
|
padding: 32rpx; |
||||||
|
background: #fff; |
||||||
|
border-radius: 32rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.card-header { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 14rpx; |
||||||
|
margin-bottom: 24rpx; |
||||||
|
|
||||||
|
.card-icon { |
||||||
|
width: 40rpx; |
||||||
|
height: 40rpx; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.card-title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: 700; |
||||||
|
color: #2f82a9; |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.card-desc { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #475569; |
||||||
|
line-height: 48rpx; |
||||||
|
} |
||||||
|
|
||||||
|
// 升级按钮 |
||||||
|
.upgrade-btn { |
||||||
|
margin: 48rpx auto 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 434rpx; |
||||||
|
padding: 16rpx 0; |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
border-radius: 32rpx; |
||||||
|
|
||||||
|
.upgrade-line1 { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 700; |
||||||
|
color: #fff; |
||||||
|
line-height: 42rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.upgrade-line2 { |
||||||
|
font-size: 28rpx; |
||||||
|
font-weight: 400; |
||||||
|
color: #fff; |
||||||
|
line-height: 42rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 通知勾选 |
||||||
|
.notify { |
||||||
|
margin: 32rpx 30rpx; |
||||||
|
font-size: 26rpx; |
||||||
|
color: rgba(148, 163, 184, 1); |
||||||
|
line-height: 40rpx; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
.check-content { |
||||||
|
padding-top: 4rpx; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.wx-checkbox-input { |
||||||
|
width: 32rpx; |
||||||
|
height: 32rpx; |
||||||
|
border-radius: 8rpx; |
||||||
|
&.wx-checkbox-input-checked { |
||||||
|
background: linear-gradient(270deg, #439fc7 0%, #2f82a9 100%); |
||||||
|
border-color: transparent; |
||||||
|
&::before { |
||||||
|
font-size: 28rpx; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
Page({ |
||||||
|
data: { |
||||||
|
notifyChecked: false, |
||||||
|
}, |
||||||
|
onLoad() {}, |
||||||
|
onShow() {}, |
||||||
|
handleBack() { |
||||||
|
wx.navigateBack() |
||||||
|
}, |
||||||
|
toggleNotify() { |
||||||
|
const notifyChecked = !this.data.notifyChecked |
||||||
|
this.setData({ notifyChecked }) |
||||||
|
if (notifyChecked) { |
||||||
|
wx.showToast({ title: '已开启上线通知', icon: 'none' }) |
||||||
|
} |
||||||
|
}, |
||||||
|
handleNotify() { |
||||||
|
if (!this.data.notifyChecked) { |
||||||
|
this.setData({ notifyChecked: true }) |
||||||
|
wx.showToast({ title: '已开启上线通知', icon: 'none' }) |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
export {} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
<navbar fixed custom-style="background:{{background}}" back> |
||||||
|
<view class="page-title" slot="left" bind:tap="handleBack"> |
||||||
|
<van-icon name="arrow-left" /> |
||||||
|
</view> |
||||||
|
</navbar> |
||||||
|
|
||||||
|
<view |
||||||
|
class="page" |
||||||
|
style="background: url('{{imageUrl}}bg6.png?t={{Timestamp}}') no-repeat top center/100% 478rpx;padding-top: {{pageTop}}px;" |
||||||
|
> |
||||||
|
<!-- 背景装饰 --> |
||||||
|
<image class="bg-pattern" src="{{imageUrl}}chat/chat-bg.svg?t={{Timestamp}}" mode="aspectFill"></image> |
||||||
|
|
||||||
|
<!-- 吉祥物 + 问候气泡 --> |
||||||
|
<view class="mascot-wrap"> |
||||||
|
<view class="greeting-bubble"> |
||||||
|
<image class="greeting-bg" src="{{imageUrl}}chat/chat-btn-bg.svg?t={{Timestamp}}" mode="aspectFill"></image> |
||||||
|
<text class="greeting-text">Hello，我是小豚</text> |
||||||
|
</view> |
||||||
|
<image class="mascot" src="{{imageUrl}}chat/chat-mascot.png?t={{Timestamp}}" mode="aspectFill"></image> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 卡片：我是谁 --> |
||||||
|
<view class="info-card"> |
||||||
|
<view class="card-header"> |
||||||
|
<image class="card-icon" src="{{imageUrl}}chat/icon-who.svg?t={{Timestamp}}" mode="aspectFit"></image> |
||||||
|
<text class="card-title">我是谁</text> |
||||||
|
</view> |
||||||
|
<view class="card-desc">hello，我是你的智能助手小豚，为你提供阵发性 室上速健康科普与慢病管理服务。</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 卡片：我能干嘛 --> |
||||||
|
<view class="info-card"> |
||||||
|
<view class="card-header"> |
||||||
|
<image class="card-icon" src="{{imageUrl}}chat/icon-what.svg?t={{Timestamp}}" mode="aspectFit"></image> |
||||||
|
<text class="card-title">我能干嘛</text> |
||||||
|
</view> |
||||||
|
<view class="card-desc"> |
||||||
|
作为阵发性室上速（PSVT）智能助手，我将为你 提供解答疾病问题、指导急性发作处理、提醒定 |
||||||
|
期复诊等全周期健康管理服务，你有任何关于 PSVT的问题都可随时咨询我。往后日常生活里， |
||||||
|
我将长久相伴，全程守护你的健康。 |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 升级中按钮 --> |
||||||
|
<view class="upgrade-btn" bind:tap="handleNotify"> |
||||||
|
<view class="upgrade-line1">我在努力学习升级中,</view> |
||||||
|
<view class="upgrade-line2">很快就和您见面啦！</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<!-- 上线通知勾选 --> |
||||||
|
<view class="notify" bind:tap="toggleNotify"> |
||||||
|
<checkbox class="check">上线时通知我</checkbox> |
||||||
|
</view> |
||||||
|
</view> |
||||||
Loading…
Reference in new issue