kola-web
2 weeks ago
42 changed files with 2104 additions and 18 deletions
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{ |
||||
"component": true, |
||||
"usingComponents": { |
||||
"van-popup": "@vant/weapp/popup/index" |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
.popup1 { |
||||
.icon { |
||||
position: relative; |
||||
display: block; |
||||
margin: 0 auto -84rpx; |
||||
width: 315rpx; |
||||
height: 226rpx; |
||||
} |
||||
.container { |
||||
padding: 101rpx 55rpx 55rpx; |
||||
background: linear-gradient(180deg, #e9f6ff 0%, #ffffff 32.53%, #ffffff 100%); |
||||
border-radius: 32rpx; |
||||
width: 600rpx; |
||||
height: 270rpx; |
||||
box-sizing: border-box; |
||||
.title { |
||||
font-size: 40rpx; |
||||
color: rgba(17, 24, 39, 1); |
||||
font-weight: bold; |
||||
text-align: center; |
||||
} |
||||
.content { |
||||
margin-top: 16rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(100, 116, 139, 1); |
||||
text-align: center; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.close { |
||||
margin: 32rpx auto 0; |
||||
display: block; |
||||
width: 64rpx; |
||||
height: 64rpx; |
||||
} |
||||
@ -0,0 +1,165 @@
@@ -0,0 +1,165 @@
|
||||
const app = getApp<IAppOption>() |
||||
|
||||
Component({ |
||||
properties: { |
||||
show: { |
||||
type: Boolean, |
||||
value: false, |
||||
}, |
||||
type: String, |
||||
params: { |
||||
type: Object, |
||||
value() { |
||||
return {} |
||||
}, |
||||
}, |
||||
top: { |
||||
type: Number, |
||||
value: 50, |
||||
}, |
||||
}, |
||||
observers: { |
||||
show(val) { |
||||
if (val) { |
||||
if (this.data.type === 'TCenter') { |
||||
this.setData({ |
||||
TCenterId: this.data.params.hospitalId, |
||||
}) |
||||
} |
||||
if (this.data.type === 'inhibitors') { |
||||
this.setData({ |
||||
inhibitorsId: this.data.params.drugId || '', |
||||
inhibitorsName: this.data.params.drugName || '', |
||||
inhibitorsContent: this.data.params.content || '', |
||||
}) |
||||
} |
||||
if (this.data.type === 'publicCard') { |
||||
this.getCodeImg() |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
|
||||
data: { |
||||
popup1Check1: false, |
||||
|
||||
TCenterId: '', |
||||
|
||||
inhibitorsId: '', |
||||
inhibitorsName: '', |
||||
inhibitorsContent: '', |
||||
|
||||
selectDoctorId: '', |
||||
|
||||
codeImg: '', |
||||
|
||||
imageUrl: app.globalData.imageUrl, |
||||
Timestamp: app.globalData.Timestamp, |
||||
}, |
||||
methods: { |
||||
handleOk() { |
||||
const { type, inhibitorsId, inhibitorsName, inhibitorsContent } = this.data |
||||
if (type === 'argument' && !this.data.popup1Check1) { |
||||
wx.showToast({ |
||||
title: '请同意隐私政策', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
if (type === 'TCenter') { |
||||
if (!this.data.TCenterId) { |
||||
wx.showToast({ |
||||
title: '请选择治疗中心', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
this.triggerEvent('ok', { id: this.data.TCenterId }) |
||||
return |
||||
} |
||||
|
||||
if (type === 'inhibitors') { |
||||
if (!inhibitorsId) { |
||||
wx.showToast({ |
||||
title: '请选择抑制剂', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
if (inhibitorsName === '其他' && !inhibitorsContent) { |
||||
wx.showToast({ |
||||
title: '请填写其他抑制剂', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
|
||||
this.triggerEvent('ok', { id: inhibitorsId, name: inhibitorsName, content: inhibitorsContent }) |
||||
return |
||||
} |
||||
|
||||
if (type === 'selectDoctor') { |
||||
if (!this.data.selectDoctorId) { |
||||
wx.showToast({ |
||||
title: '请选择医生', |
||||
icon: 'none', |
||||
}) |
||||
return |
||||
} |
||||
this.triggerEvent('ok', { id: this.data.selectDoctorId }) |
||||
return |
||||
} |
||||
this.triggerEvent('ok') |
||||
}, |
||||
handleCancel() { |
||||
this.triggerEvent('cancel') |
||||
}, |
||||
routerTo(e: any) { |
||||
const { url } = e.currentTarget.dataset |
||||
wx.navigateTo({ |
||||
url, |
||||
}) |
||||
}, |
||||
handlePopup1Check1() { |
||||
if (this.data.popup1Check1) { |
||||
app.mpBehavior({ PageName: 'BTN_PATIENTPRIVACY' }) |
||||
} |
||||
}, |
||||
handleSelectStatus(e) { |
||||
const { status } = e.currentTarget.dataset |
||||
this.triggerEvent('ok', { type: 'selectStatusComplete', status }) |
||||
}, |
||||
handleSelectTCenter(e) { |
||||
const { id } = e.currentTarget.dataset |
||||
this.setData({ |
||||
TCenterId: id, |
||||
}) |
||||
}, |
||||
handleSelectDoctor(e) { |
||||
const { id } = e.currentTarget.dataset |
||||
this.setData({ |
||||
selectDoctorId: id, |
||||
}) |
||||
}, |
||||
handleSelectInhibitors(e) { |
||||
const { id, name } = e.currentTarget.dataset |
||||
this.setData({ |
||||
inhibitorsId: id, |
||||
inhibitorsName: name, |
||||
}) |
||||
}, |
||||
getCodeImg() { |
||||
wx.ajax({ |
||||
method: 'GET', |
||||
url: '?r=wtx/common/get-channel-wx-code', |
||||
data: { |
||||
ChannelType: 2, |
||||
}, |
||||
}).then((res) => { |
||||
this.setData({ |
||||
codeImg: res, |
||||
}) |
||||
}) |
||||
}, |
||||
}, |
||||
}) |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
<van-popup |
||||
wx:if="{{show}}" |
||||
bind:click-overlay="handleCancel" |
||||
round |
||||
z-index="{{100000}}" |
||||
show="{{ true }}" |
||||
custom-style="background:transparent;{{!params.position ? 'top:'+top+'%' : ''}}" |
||||
position="{{params.position || 'center'}}" |
||||
safe-area-inset-bottom="{{false}}" |
||||
root-portal |
||||
> |
||||
<view class="popup1" wx:if="{{type==='popup1'}}"> |
||||
<image class="icon" src="/images/icon41.png"></image> |
||||
<view class="container"> |
||||
<view class="title">签到成功</view> |
||||
<view class="content">活动即将开始，请有序进场</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<image |
||||
wx:if="{{params.close}}" |
||||
class="close" |
||||
src="{{imageUrl}}icon25.png?t={{Timestamp}}" |
||||
bind:tap="handleCancel" |
||||
></image> |
||||
</van-popup> |
||||
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 178 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 6.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 526 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 119 KiB |
|
After Width: | Height: | Size: 834 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 406 B |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1002 B |
@ -1,3 +1,5 @@
@@ -1,3 +1,5 @@
|
||||
{ |
||||
"navigationBarTitleText": "创建活动", |
||||
"navigationStyle": "default", |
||||
"usingComponents": {} |
||||
} |
||||
|
||||
@ -0,0 +1,722 @@
@@ -0,0 +1,722 @@
|
||||
page { |
||||
background-color: #f5f7fa; |
||||
} |
||||
|
||||
.page { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
background: #f5f7fa; |
||||
} |
||||
|
||||
/* ========== 步骤条 ========== */ |
||||
.step-bar { |
||||
flex-shrink: 0; |
||||
padding: 30rpx 60rpx 24rpx; |
||||
background: #fff; |
||||
|
||||
.step-list { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
} |
||||
|
||||
.step-item { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
&:not(:last-child)::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 32rpx; |
||||
left: 50%; |
||||
right: -50%; |
||||
height: 2rpx; |
||||
background: rgba(247, 248, 250, 1); |
||||
z-index: 0; |
||||
} |
||||
|
||||
&.is-done:not(:last-child)::after { |
||||
background: #3b82f6; |
||||
} |
||||
|
||||
.step-circle { |
||||
width: 62rpx; |
||||
height: 62rpx; |
||||
border-radius: 50%; |
||||
background: rgba(247, 248, 250, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.step-num { |
||||
font-size: 26rpx; |
||||
color: rgba(148, 163, 184, 1); |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.step-check { |
||||
font-size: 22rpx; |
||||
color: rgba(148, 163, 184, 0.5); |
||||
font-weight: 700; |
||||
} |
||||
|
||||
&.is-active, |
||||
&.is-done { |
||||
.step-circle { |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
box-shadow: 0rpx 19rpx 28rpx -4rpx rgba(20, 164, 255, 0.2); |
||||
} |
||||
|
||||
.step-num, |
||||
.step-check { |
||||
color: #fff; |
||||
} |
||||
|
||||
.step-label { |
||||
color: rgba(74, 184, 253, 1); |
||||
} |
||||
} |
||||
|
||||
.step-label { |
||||
margin-top: 10rpx; |
||||
font-size: 20rpx; |
||||
color: rgba(148, 163, 184, 1); |
||||
text-align: center; |
||||
line-height: 1.3; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 表单滚动区 ========== */ |
||||
.form-scroll { |
||||
flex: 1; |
||||
padding: 24rpx 32rpx; |
||||
box-sizing: border-box; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
/* ========== 表单卡片 ========== */ |
||||
.form-card { |
||||
background: #fff; |
||||
border-radius: 24rpx; |
||||
padding: 32rpx; |
||||
margin-bottom: 24rpx; |
||||
} |
||||
|
||||
/* ========== 表单字段 ========== */ |
||||
.form-field { |
||||
margin-bottom: 38rpx; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.form-label { |
||||
font-size: 32rpx; |
||||
color: rgba(25, 28, 30, 1); |
||||
font-weight: bold; |
||||
margin-bottom: 20rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.required { |
||||
color: rgba(253, 91, 89, 1); |
||||
margin-left: 6rpx; |
||||
font-size: 28rpx; |
||||
} |
||||
} |
||||
|
||||
.input-wrap { |
||||
position: relative; |
||||
.form-input { |
||||
width: 100%; |
||||
height: 88rpx; |
||||
background: #f7f8fa; |
||||
border-radius: 16rpx; |
||||
padding: 0 140rpx 0 24rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(71, 85, 105, 1); |
||||
box-sizing: border-box; |
||||
} |
||||
.form-input-place { |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
.char-count--inline { |
||||
position: absolute; |
||||
right: 24rpx; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
font-size: 28rpx; |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
} |
||||
|
||||
.textarea-wrap { |
||||
position: relative; |
||||
|
||||
.form-textarea { |
||||
width: 100%; |
||||
height: 327rpx; |
||||
background: #f7f8fa; |
||||
border-radius: 16rpx; |
||||
padding: 20rpx 24rpx 40rpx; |
||||
font-size: 32rpx; |
||||
color: #1f2937; |
||||
box-sizing: border-box; |
||||
} |
||||
.form-textarea-place { |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
|
||||
.char-count { |
||||
position: absolute; |
||||
right: 24rpx; |
||||
bottom: 12rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
} |
||||
|
||||
.form-picker { |
||||
width: 100%; |
||||
height: 88rpx; |
||||
background: #f7f8fa; |
||||
border-radius: 16rpx; |
||||
padding: 0 24rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
margin-bottom: 24rpx; |
||||
|
||||
.picker-value { |
||||
font-size: 32rpx; |
||||
color: rgba(71, 85, 105, 1); |
||||
|
||||
&.is-placeholder { |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.picker-icon { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
.icon-calendar { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border: 2rpx solid rgba(148, 163, 184, 0.5); |
||||
border-radius: 6rpx; |
||||
position: relative; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 6rpx; |
||||
left: 4rpx; |
||||
right: 4rpx; |
||||
height: 2rpx; |
||||
background: rgba(148, 163, 184, 0.5); |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: -6rpx; |
||||
left: 6rpx; |
||||
width: 4rpx; |
||||
height: 8rpx; |
||||
background: rgba(148, 163, 184, 0.5); |
||||
border-radius: 2rpx; |
||||
} |
||||
} |
||||
|
||||
/* ========== 上传 ========== */ |
||||
.upload-box { |
||||
height: 220rpx; |
||||
height: 350rpx; |
||||
border: 2rpx dashed #d1d5db; |
||||
border-radius: 16rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
overflow: hidden; |
||||
background-color: rgba(247, 249, 251, 1); |
||||
|
||||
&.has-image { |
||||
border-style: solid; |
||||
border-color: transparent; |
||||
} |
||||
|
||||
.upload-inner { |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
.upload-camera { |
||||
width: 45rpx; |
||||
height: 45rpx; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
.upload-text { |
||||
font-size: 24rpx; |
||||
color: rgba(148, 163, 184, 0.5); |
||||
} |
||||
} |
||||
|
||||
.upload-img { |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 16rpx; |
||||
} |
||||
} |
||||
|
||||
/* ========== 标签选择 ========== */ |
||||
.tag-list { |
||||
display: grid; |
||||
grid-template-columns: repeat(3, 1fr); |
||||
gap: 24rpx 22rpx; |
||||
.tag { |
||||
padding: 20rpx; |
||||
border-radius: 16rpx; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
color: rgba(100, 116, 139, 1); |
||||
background: rgba(247, 248, 250, 1); |
||||
transition: all 0.2s; |
||||
|
||||
&.is-active { |
||||
background: rgba(74, 184, 253, 1); |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 议程列表头部 ========== */ |
||||
.section-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 28rpx 0; |
||||
border-radius: 24rpx; |
||||
margin-bottom: 16rpx; |
||||
|
||||
.section-title-wrap { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.section-title { |
||||
font-size: 36rpx; |
||||
font-weight: bold; |
||||
color: rgba(31, 41, 55, 1); |
||||
} |
||||
|
||||
.section-info { |
||||
margin-left: 8rpx; |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
} |
||||
|
||||
.add-btn { |
||||
padding: 18rpx 26rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
color: rgba(74, 184, 253, 1); |
||||
font-size: 28rpx; |
||||
border: 1px solid rgba(74, 184, 253, 0.26); |
||||
border-radius: 16rpx; |
||||
|
||||
.add-icon { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
|
||||
.add-text { |
||||
font-size: 26rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 议程卡片 ========== */ |
||||
.agenda-card { |
||||
background: #fff; |
||||
border-radius: 24rpx; |
||||
overflow: hidden; |
||||
margin-bottom: 30rpx; |
||||
|
||||
.agenda-header { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 24rpx 32rpx; |
||||
} |
||||
|
||||
.agenda-name { |
||||
font-size: 30rpx; |
||||
font-weight: 600; |
||||
color: #1f2937; |
||||
} |
||||
|
||||
.agenda-del { |
||||
font-size: 26rpx; |
||||
color: #ef4444; |
||||
font-weight: 500; |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
.icon { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
} |
||||
} |
||||
|
||||
.agenda-body { |
||||
padding: 24rpx 32rpx; |
||||
} |
||||
|
||||
.agenda-group { |
||||
margin-bottom: 16rpx; |
||||
padding: 0; |
||||
background: transparent; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 切换按钮 ========== */ |
||||
.toggle-group { |
||||
display: flex; |
||||
gap: 20rpx; |
||||
margin-bottom: 24rpx; |
||||
.toggle-btn { |
||||
flex: 1; |
||||
height: 76rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 16rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(100, 116, 139, 1); |
||||
background: rgba(247, 248, 250, 1); |
||||
transition: all 0.2s; |
||||
|
||||
&.is-active { |
||||
background: rgba(74, 184, 253, 1); |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 子区块标题 ========== */ |
||||
.sub-section { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 24rpx; |
||||
|
||||
.sub-icon-wrap { |
||||
width: 86rpx; |
||||
height: 86rpx; |
||||
border-radius: 16rpx; |
||||
background: rgba(239, 249, 255, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-right: 23rpx; |
||||
flex-shrink: 0; |
||||
.icon { |
||||
width: 46rpx; |
||||
height: 46rpx; |
||||
} |
||||
} |
||||
|
||||
.sub-icon { |
||||
width: 36rpx; |
||||
height: 36rpx; |
||||
background: #3b82f6; |
||||
border-radius: 8rpx; |
||||
|
||||
&--checkin { |
||||
width: 32rpx; |
||||
height: 32rpx; |
||||
border-radius: 50%; |
||||
border: 4rpx solid #3b82f6; |
||||
background: transparent; |
||||
position: relative; |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 12rpx; |
||||
height: 12rpx; |
||||
background: #3b82f6; |
||||
border-radius: 50%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.sub-text-wrap { |
||||
.sub-title { |
||||
font-size: 32rpx; |
||||
font-weight: 600; |
||||
color: rgba(17, 24, 39, 1); |
||||
display: block; |
||||
} |
||||
|
||||
.sub-desc { |
||||
font-size: 24rpx; |
||||
color: rgba(148, 163, 184, 1); |
||||
margin-top: 8rpx; |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 签到方式 ========== */ |
||||
.checkin-list { |
||||
display: flex; |
||||
gap: 20rpx; |
||||
} |
||||
|
||||
.checkin-item { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
padding: 28rpx 12rpx; |
||||
border-radius: 16rpx; |
||||
border: 2rpx solid #e5e7eb; |
||||
background: #fff; |
||||
transition: all 0.2s; |
||||
|
||||
&.is-active { |
||||
border-color: #3b82f6; |
||||
background: #eff6ff; |
||||
} |
||||
|
||||
.checkin-icon-wrap { |
||||
width: 72rpx; |
||||
height: 72rpx; |
||||
border-radius: 16rpx; |
||||
background: #f3f4f6; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 12rpx; |
||||
} |
||||
|
||||
.checkin-icon { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
border-radius: 8rpx; |
||||
position: relative; |
||||
|
||||
&--dynamic { |
||||
background: #d1d5db; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 6rpx; |
||||
left: 6rpx; |
||||
width: 12rpx; |
||||
height: 12rpx; |
||||
background: rgba(148, 163, 184, 0.5); |
||||
border-radius: 2rpx; |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
bottom: 6rpx; |
||||
right: 6rpx; |
||||
width: 16rpx; |
||||
height: 16rpx; |
||||
border: 2rpx solid rgba(148, 163, 184, 0.5); |
||||
border-radius: 2rpx; |
||||
} |
||||
} |
||||
|
||||
&--fixed { |
||||
background: #d1d5db; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%); |
||||
width: 24rpx; |
||||
height: 24rpx; |
||||
border: 2rpx solid rgba(148, 163, 184, 0.5); |
||||
border-radius: 2rpx; |
||||
} |
||||
} |
||||
|
||||
&--none { |
||||
background: transparent; |
||||
border: 2rpx solid #d1d5db; |
||||
|
||||
&::before { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%) rotate(45deg); |
||||
width: 2rpx; |
||||
height: 24rpx; |
||||
background: rgba(148, 163, 184, 0.5); |
||||
} |
||||
|
||||
&::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 50%; |
||||
left: 50%; |
||||
transform: translate(-50%, -50%) rotate(-45deg); |
||||
width: 2rpx; |
||||
height: 24rpx; |
||||
background: rgba(148, 163, 184, 0.5); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.checkin-name { |
||||
font-size: 24rpx; |
||||
color: #6b7280; |
||||
} |
||||
} |
||||
|
||||
/* ========== 提示文字 ========== */ |
||||
.form-tip { |
||||
display: flex; |
||||
align-items: flex-start; |
||||
padding: 18rpx 26rpx; |
||||
background-color: rgba(241, 249, 255, 1); |
||||
border: 1px solid rgba(74, 184, 253, 0.25); |
||||
border-radius: 16rpx; |
||||
|
||||
.form-tip-icon { |
||||
font-size: 24rpx; |
||||
color: #3b82f6; |
||||
margin-right: 8rpx; |
||||
margin-top: 2rpx; |
||||
flex-shrink: 0; |
||||
} |
||||
|
||||
.form-tip-text { |
||||
font-size: 26rpx; |
||||
color: rgba(148, 163, 184, 1); |
||||
line-height: 32rpx; |
||||
} |
||||
} |
||||
|
||||
/* ========== 底部按钮 ========== */ |
||||
.action-bar { |
||||
flex-shrink: 0; |
||||
padding: 24rpx 32rpx; |
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); |
||||
background: #fff; |
||||
display: flex; |
||||
gap: 20rpx; |
||||
.btn { |
||||
height: 94rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 12rpx; |
||||
font-size: 32rpx; |
||||
box-sizing: border-box; |
||||
|
||||
&.btn-primary { |
||||
flex: 1; |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
box-shadow: 0rpx 15rpx 30rpx -6rpx rgba(74, 172, 219, 0.4); |
||||
color: #fff; |
||||
|
||||
&:active { |
||||
opacity: 0.9; |
||||
} |
||||
} |
||||
|
||||
&.btn-default { |
||||
flex: 1; |
||||
background: #fff; |
||||
color: rgba(74, 184, 253, 1); |
||||
border: 1px solid rgba(74, 184, 253, 1); |
||||
|
||||
&:active { |
||||
background: #eff6ff; |
||||
} |
||||
} |
||||
|
||||
&.btn--large { |
||||
width: 80%; |
||||
margin: 0 auto; |
||||
flex: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* ========== 结果页 ========== */ |
||||
.result-page { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
padding: 60rpx; |
||||
background: #f5f7fa; |
||||
|
||||
.result-circle { |
||||
width: 160rpx; |
||||
height: 160rpx; |
||||
border-radius: 50%; |
||||
background: #3b82f6; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
margin-bottom: 40rpx; |
||||
box-shadow: 0 8rpx 32rpx rgba(59, 130, 246, 0.3); |
||||
} |
||||
|
||||
.result-check { |
||||
font-size: 80rpx; |
||||
color: #fff; |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.result-title { |
||||
font-size: 40rpx; |
||||
font-weight: 600; |
||||
color: #1f2937; |
||||
margin-bottom: 16rpx; |
||||
} |
||||
|
||||
.result-desc { |
||||
font-size: 28rpx; |
||||
color: #6b7280; |
||||
margin-bottom: 60rpx; |
||||
} |
||||
} |
||||
|
||||
.bottom-safe { |
||||
height: 40rpx; |
||||
} |
||||
@ -1,8 +1,185 @@
@@ -1,8 +1,185 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
const app = getApp<IAppOption>() |
||||
|
||||
interface AgendaItem { |
||||
id: number |
||||
time: string |
||||
title: string |
||||
desc: string |
||||
} |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
data: { |
||||
currentStep: 1, |
||||
steps: [ |
||||
{ label: '基本信息', field: 'basic' }, |
||||
{ label: '报名签到设置', field: 'signup' }, |
||||
{ label: '活动议程', field: 'agenda' }, |
||||
], |
||||
|
||||
// 步骤1 基本信息
|
||||
coverImage: '', |
||||
title: '', |
||||
startTime: '', |
||||
endTime: '', |
||||
detail: '', |
||||
level: '', |
||||
levels: ['校级', '院级', '系级', '班级', '其他'], |
||||
category: '', |
||||
categories: ['讲座', '比赛', '社团活动', '志愿服务', '文体活动', '学术交流', '其他'], |
||||
location: '', |
||||
organizer: '', |
||||
contactName: '', |
||||
contactPhone: '', |
||||
|
||||
// 步骤2 活动议程
|
||||
agendas: [{ id: 1, time: '', title: '', desc: '' }] as AgendaItem[], |
||||
nextAgendaId: 2, |
||||
|
||||
// 步骤3 报名签到设置
|
||||
needRegister: true, |
||||
registerStartTime: '', |
||||
registerEndTime: '', |
||||
registerLimit: 'unlimited', |
||||
registerLimitCount: '', |
||||
registerCondition: '', |
||||
|
||||
checkinWay: 'dynamic', |
||||
checkinStartTime: '', |
||||
checkinEndTime: '', |
||||
}, |
||||
|
||||
onLoad() { |
||||
app.waitLogin() |
||||
}, |
||||
|
||||
// ========== 步骤切换 ==========
|
||||
goStep(step: number) { |
||||
if (step < 1 || step > 4) return |
||||
this.setData({ currentStep: step }) |
||||
}, |
||||
|
||||
onNextStep() { |
||||
const next = this.data.currentStep + 1 |
||||
if (next <= 4) this.setData({ currentStep: next }) |
||||
}, |
||||
|
||||
onPrevStep() { |
||||
const prev = this.data.currentStep - 1 |
||||
if (prev >= 1) this.setData({ currentStep: prev }) |
||||
}, |
||||
|
||||
// ========== 图片上传 ==========
|
||||
onChooseImage() { |
||||
wx.chooseMedia({ |
||||
count: 1, |
||||
mediaType: ['image'], |
||||
sourceType: ['album', 'camera'], |
||||
success: (res) => { |
||||
const tempFile = res.tempFiles[0]?.tempFilePath |
||||
if (tempFile) this.setData({ coverImage: tempFile }) |
||||
}, |
||||
}) |
||||
}, |
||||
|
||||
// ========== 输入绑定 ==========
|
||||
onInputChange(e: WechatMiniprogram.Input) { |
||||
const { field } = e.currentTarget.dataset |
||||
this.setData({ [field]: e.detail.value }) |
||||
}, |
||||
|
||||
onTextareaChange(e: WechatMiniprogram.TextareaInput) { |
||||
const { field } = e.currentTarget.dataset |
||||
this.setData({ [field]: e.detail.value }) |
||||
}, |
||||
|
||||
// ========== 时间选择 ==========
|
||||
onPickTime(e: WechatMiniprogram.PickerChange) { |
||||
const { field } = e.currentTarget.dataset |
||||
this.setData({ [field]: e.detail.value }) |
||||
}, |
||||
|
||||
// ========== 标签选择 ==========
|
||||
onSelectLevel(e: WechatMiniprogram.TouchEvent) { |
||||
const { value } = e.currentTarget.dataset |
||||
this.setData({ level: value }) |
||||
}, |
||||
|
||||
onSelectCategory(e: WechatMiniprogram.TouchEvent) { |
||||
const { value } = e.currentTarget.dataset |
||||
this.setData({ category: value }) |
||||
}, |
||||
|
||||
// ========== 议程管理 ==========
|
||||
onAddAgenda() { |
||||
const agendas = this.data.agendas |
||||
agendas.push({ |
||||
id: this.data.nextAgendaId, |
||||
time: '', |
||||
title: '', |
||||
desc: '', |
||||
}) |
||||
this.setData({ |
||||
agendas, |
||||
nextAgendaId: this.data.nextAgendaId + 1, |
||||
}) |
||||
}, |
||||
|
||||
onRemoveAgenda(e: WechatMiniprogram.TouchEvent) { |
||||
const { index } = e.currentTarget.dataset |
||||
const agendas = this.data.agendas.filter((_, i) => i !== index) |
||||
this.setData({ agendas }) |
||||
}, |
||||
|
||||
onAgendaInput(e: WechatMiniprogram.Input | WechatMiniprogram.TextareaInput) { |
||||
const { index, field } = e.currentTarget.dataset |
||||
const agendas = this.data.agendas |
||||
agendas[index][field] = e.detail.value |
||||
this.setData({ agendas }) |
||||
}, |
||||
|
||||
onAgendaTime(e: WechatMiniprogram.PickerChange) { |
||||
const { index } = e.currentTarget.dataset |
||||
const agendas = this.data.agendas |
||||
agendas[index].time = e.detail.value as string |
||||
this.setData({ agendas }) |
||||
}, |
||||
|
||||
// ========== 报名签到设置 ==========
|
||||
onToggleRegister(e: WechatMiniprogram.TouchEvent) { |
||||
const { value } = e.currentTarget.dataset |
||||
this.setData({ needRegister: value === 'yes' }) |
||||
}, |
||||
|
||||
onToggleRegisterLimit(e: WechatMiniprogram.TouchEvent) { |
||||
const { value } = e.currentTarget.dataset |
||||
this.setData({ registerLimit: value }) |
||||
}, |
||||
|
||||
onSelectCheckinWay(e: WechatMiniprogram.TouchEvent) { |
||||
const { value } = e.currentTarget.dataset |
||||
this.setData({ checkinWay: value }) |
||||
}, |
||||
|
||||
// ========== 底部操作 ==========
|
||||
onSaveDraft() { |
||||
wx.showToast({ title: '已保存草稿', icon: 'success' }) |
||||
}, |
||||
|
||||
onSubmit() { |
||||
wx.showModal({ |
||||
title: '确认提交', |
||||
content: '提交后将进入审核流程，是否继续？', |
||||
success: (res) => { |
||||
if (res.confirm) { |
||||
this.setData({ currentStep: 4 }) |
||||
} |
||||
}, |
||||
}) |
||||
}, |
||||
|
||||
onGoHome() { |
||||
wx.switchTab({ url: '/pages/index/index' }) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
|
||||
@ -0,0 +1,487 @@
@@ -0,0 +1,487 @@
|
||||
<view class="page"> |
||||
<!-- 步骤进度条 --> |
||||
<view class="step-bar"> |
||||
<view class="step-list"> |
||||
<view |
||||
class="step-item {{currentStep > index + 1 ? 'is-done' : ''}} {{currentStep === index + 1 ? 'is-active' : ''}}" |
||||
wx:for="{{steps}}" |
||||
wx:key="field" |
||||
> |
||||
<view class="step-circle"> |
||||
<text wx:if="{{currentStep > index + 1}}" class="step-check">✓</text> |
||||
<text wx:else class="step-num">{{index + 1}}</text> |
||||
</view> |
||||
<text class="step-label">{{item.label}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- ========== 步骤1 基本信息 ========== --> |
||||
<block wx:if="{{currentStep === 1}}"> |
||||
<scroll-view class="form-scroll" scroll-y enhanced show-scrollbar="{{false}}"> |
||||
<!-- 必填信息块 --> |
||||
<view class="form-card"> |
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>活动头图</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<view class="upload-box {{coverImage ? 'has-image' : ''}}" bindtap="onChooseImage"> |
||||
<image wx:if="{{coverImage}}" class="upload-img" src="{{coverImage}}" mode="aspectFill" /> |
||||
<block wx:else> |
||||
<view class="upload-inner"> |
||||
<image class="upload-camera" src="/images/icon35.png"></image> |
||||
<text class="upload-text">点击上传</text> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>活动标题</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
placeholder-class="form-input-place" |
||||
placeholder="请输入活动标题，1-50字" |
||||
value="{{title}}" |
||||
data-field="title" |
||||
bindinput="onInputChange" |
||||
maxlength="50" |
||||
/> |
||||
<text class="char-count--inline">{{title.length || 0}}/50</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>活动时间</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<picker mode="date" value="{{startTime}}" data-field="startTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<text class="picker-value {{startTime ? '' : 'is-placeholder'}}">{{startTime || '请选择开始时间'}}</text> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
<picker mode="date" value="{{endTime}}" data-field="endTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<text class="picker-value {{endTime ? '' : 'is-placeholder'}}">{{endTime || '请选择结束时间'}}</text> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>活动详情</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<view class="textarea-wrap"> |
||||
<textarea |
||||
class="form-textarea" |
||||
placeholder-class="form-textarea-place" |
||||
placeholder="请输入活动详情，1-2000字" |
||||
value="{{detail}}" |
||||
data-field="detail" |
||||
bindinput="onTextareaChange" |
||||
maxlength="2000" |
||||
/> |
||||
<text class="char-count">{{detail.length || 0}}/2000</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 活动属性块 --> |
||||
<view class="form-card"> |
||||
<view class="form-field"> |
||||
<view class="form-label">活动等级</view> |
||||
<view class="tag-list"> |
||||
<view |
||||
class="tag {{level === item ? 'is-active' : ''}}" |
||||
wx:for="{{levels}}" |
||||
wx:key="*this" |
||||
bindtap="onSelectLevel" |
||||
data-value="{{item}}" |
||||
> |
||||
{{item}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label">活动分类</view> |
||||
<view class="tag-list"> |
||||
<view |
||||
class="tag {{category === item ? 'is-active' : ''}}" |
||||
wx:for="{{categories}}" |
||||
wx:key="*this" |
||||
bindtap="onSelectCategory" |
||||
data-value="{{item}}" |
||||
> |
||||
{{item}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label">活动地点</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
placeholder="请输入活动地点，1-100字" |
||||
value="{{location}}" |
||||
data-field="location" |
||||
bindinput="onInputChange" |
||||
maxlength="100" |
||||
/> |
||||
<text class="char-count--inline">{{location.length || 0}}/100</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label">主办方</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
placeholder="请输入主办方，1-30字" |
||||
value="{{organizer}}" |
||||
data-field="organizer" |
||||
bindinput="onInputChange" |
||||
maxlength="30" |
||||
/> |
||||
<text class="char-count--inline">{{organizer.length || 0}}/30</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 联系方式块 --> |
||||
<view class="form-card"> |
||||
<view class="form-field"> |
||||
<view class="form-label">联系人</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
placeholder="请输入联系人姓名" |
||||
value="{{contactName}}" |
||||
data-field="contactName" |
||||
bindinput="onInputChange" |
||||
/> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="form-field"> |
||||
<view class="form-label">联系方式</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
type="number" |
||||
placeholder="请输入11位手机号码" |
||||
value="{{contactPhone}}" |
||||
data-field="contactPhone" |
||||
bindinput="onInputChange" |
||||
maxlength="11" |
||||
/> |
||||
<text class="char-count--inline">{{contactPhone.length || 0}}/11</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="bottom-safe"></view> |
||||
</scroll-view> |
||||
|
||||
<view class="action-bar"> |
||||
<view class="btn btn-primary" bindtap="onNextStep">下一步</view> |
||||
</view> |
||||
</block> |
||||
|
||||
<!-- ========== 步骤2 报名签到设置 ========== --> |
||||
<block wx:if="{{currentStep === 2}}"> |
||||
<scroll-view class="form-scroll" scroll-y enhanced show-scrollbar="{{false}}"> |
||||
<!-- 报名设置块 --> |
||||
<view class="form-card"> |
||||
<!-- 是否需要报名 --> |
||||
<view class="form-field"> |
||||
<view class="form-label">是否需要报名</view> |
||||
<view class="toggle-group"> |
||||
<view class="toggle-btn {{needRegister ? 'is-active' : ''}}" bindtap="onToggleRegister" data-value="yes"> |
||||
是 |
||||
</view> |
||||
<view class="toggle-btn {{!needRegister ? 'is-active' : ''}}" bindtap="onToggleRegister" data-value="no"> |
||||
否 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<block wx:if="{{needRegister}}"> |
||||
<!-- 报名设置说明 --> |
||||
<view class="sub-section"> |
||||
<view class="sub-icon-wrap"> |
||||
<image class="icon" src="/images/icon36.png"></image> |
||||
</view> |
||||
<view class="sub-text-wrap"> |
||||
<text class="sub-title">报名设置</text> |
||||
<text class="sub-desc">设置活动报名相关规则</text> |
||||
</view> |
||||
</view> |
||||
<!-- 报名时间 --> |
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>报名时间</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<picker mode="date" value="{{registerStartTime}}" data-field="registerStartTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<view class="picker-value {{registerStartTime ? '' : 'is-placeholder'}}"> |
||||
{{registerStartTime || '请选择开始时间'}} |
||||
</view> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
<picker mode="date" value="{{registerEndTime}}" data-field="registerEndTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<view class="picker-value {{registerEndTime ? '' : 'is-placeholder'}}"> |
||||
{{registerEndTime || '请选择结束时间'}} |
||||
</view> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
|
||||
<!-- 报名人数限制 --> |
||||
<view class="form-field"> |
||||
<view class="form-label">报名人数限制</view> |
||||
<view class="toggle-group"> |
||||
<view |
||||
class="toggle-btn {{registerLimit === 'unlimited' ? 'is-active' : ''}}" |
||||
bindtap="onToggleRegisterLimit" |
||||
data-value="unlimited" |
||||
> |
||||
不限名额 |
||||
</view> |
||||
<view |
||||
class="toggle-btn {{registerLimit === 'limited' ? 'is-active' : ''}}" |
||||
bindtap="onToggleRegisterLimit" |
||||
data-value="limited" |
||||
> |
||||
限制名额 |
||||
</view> |
||||
</view> |
||||
<view class="input-wrap" wx:if="{{registerLimit === 'limited'}}"> |
||||
<input |
||||
class="form-input" |
||||
type="number" |
||||
placeholder="请输入限制人数" |
||||
value="{{registerLimitCount}}" |
||||
data-field="registerLimitCount" |
||||
bindinput="onInputChange" |
||||
/> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 报名条件 --> |
||||
<view class="form-field"> |
||||
<view class="form-label">报名条件</view> |
||||
<view class="textarea-wrap"> |
||||
<textarea |
||||
class="form-textarea" |
||||
placeholder="请输入报名条件，最多200字" |
||||
value="{{registerCondition}}" |
||||
data-field="registerCondition" |
||||
bindinput="onTextareaChange" |
||||
maxlength="200" |
||||
/> |
||||
<text class="char-count">{{registerCondition.length || 0}}/200</text> |
||||
</view> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
|
||||
<!-- 签到设置块 --> |
||||
<view class="form-card"> |
||||
<!-- 签到设置说明 --> |
||||
<view class="sub-section"> |
||||
<view class="sub-icon-wrap"> |
||||
<image class="icon" src="/images/icon37.png"></image> |
||||
</view> |
||||
<view class="sub-text-wrap"> |
||||
<text class="sub-title">签到设置</text> |
||||
<text class="sub-desc">设置活动签到相关规则</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 签到方式 --> |
||||
<view class="form-field"> |
||||
<view class="form-label">签到方式</view> |
||||
<view class="checkin-list"> |
||||
<view |
||||
class="checkin-item {{checkinWay === 'dynamic' ? 'is-active' : ''}}" |
||||
bindtap="onSelectCheckinWay" |
||||
data-value="dynamic" |
||||
> |
||||
<view class="checkin-icon-wrap"> |
||||
<view class="checkin-icon checkin-icon--dynamic"></view> |
||||
</view> |
||||
<text class="checkin-name">动态二维码</text> |
||||
</view> |
||||
<view |
||||
class="checkin-item {{checkinWay === 'fixed' ? 'is-active' : ''}}" |
||||
bindtap="onSelectCheckinWay" |
||||
data-value="fixed" |
||||
> |
||||
<view class="checkin-icon-wrap"> |
||||
<view class="checkin-icon checkin-icon--fixed"></view> |
||||
</view> |
||||
<text class="checkin-name">固定二维码</text> |
||||
</view> |
||||
<view |
||||
class="checkin-item {{checkinWay === 'none' ? 'is-active' : ''}}" |
||||
bindtap="onSelectCheckinWay" |
||||
data-value="none" |
||||
> |
||||
<view class="checkin-icon-wrap"> |
||||
<view class="checkin-icon checkin-icon--none"></view> |
||||
</view> |
||||
<text class="checkin-name">无需签到</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<!-- 签到时间 --> |
||||
<block wx:if="{{checkinWay !== 'none'}}"> |
||||
<view class="form-field"> |
||||
<view class="form-label"> |
||||
<text>签到时间</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<picker mode="date" value="{{checkinStartTime}}" data-field="checkinStartTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<view class="picker-value {{checkinStartTime ? '' : 'is-placeholder'}}"> |
||||
{{checkinStartTime || '请选择签到开始时间'}} |
||||
</view> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
<picker mode="date" value="{{checkinEndTime}}" data-field="checkinEndTime" bindchange="onPickTime"> |
||||
<view class="form-picker"> |
||||
<view class="picker-value {{checkinEndTime ? '' : 'is-placeholder'}}"> |
||||
{{checkinEndTime || '请选择签到结束时间'}} |
||||
</view> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
|
||||
<view class="form-tip"> |
||||
<text class="form-tip-icon">ⓘ</text> |
||||
<text class="form-tip-text">报名与签到设置完成后，活动发布后需审批通过后执行</text> |
||||
</view> |
||||
|
||||
<view class="bottom-safe"></view> |
||||
</scroll-view> |
||||
|
||||
<view class="action-bar action-bar--multi"> |
||||
<view class="btn btn-default" bindtap="onPrevStep">存草搞</view> |
||||
<view class="btn btn-default" bindtap="onPrevStep">上一步</view> |
||||
<view class="btn btn-primary" bindtap="onNextStep">下一步</view> |
||||
</view> |
||||
</block> |
||||
|
||||
<!-- ========== 步骤3 活动议程 ========== --> |
||||
<block wx:if="{{currentStep === 3}}"> |
||||
<scroll-view class="form-scroll" scroll-y enhanced show-scrollbar="{{false}}"> |
||||
<view class="section-header"> |
||||
<view class="section-title-wrap"> |
||||
<text class="section-title">议程列表</text> |
||||
<image class="section-info" src="/images/icon40.png"></image> |
||||
</view> |
||||
<view class="add-btn" bindtap="onAddAgenda"> |
||||
<image class="add-icon" src="/images/icon39.png"></image> |
||||
<text class="add-text">添加议程</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="agenda-card" wx:for="{{agendas}}" wx:key="id"> |
||||
<view class="agenda-header"> |
||||
<view class="agenda-name">议程 {{index + 1}}</view> |
||||
<view class="agenda-del" bindtap="onRemoveAgenda" data-index="{{index}}"> |
||||
<image class="icon" src="/images/icon38.png"></image> |
||||
删除 |
||||
</view> |
||||
</view> |
||||
<view class="agenda-body"> |
||||
<view class="form-group agenda-group"> |
||||
<view class="form-label"> |
||||
<text>议程时间</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<picker mode="date" value="{{item.time}}" data-index="{{index}}" bindchange="onAgendaTime"> |
||||
<view class="form-picker"> |
||||
<text class="picker-value {{item.time ? '' : 'is-placeholder'}}">{{item.time || '请选择时间'}}</text> |
||||
<image class="picker-icon" src="/images/icon17.png"></image> |
||||
</view> |
||||
</picker> |
||||
</view> |
||||
<view class="form-group agenda-group"> |
||||
<view class="form-label"> |
||||
<text>标题</text> |
||||
<text class="required">*</text> |
||||
</view> |
||||
<view class="input-wrap"> |
||||
<input |
||||
class="form-input" |
||||
placeholder="请输入议程标题，1-30字" |
||||
value="{{item.title}}" |
||||
data-index="{{index}}" |
||||
data-field="title" |
||||
bindinput="onAgendaInput" |
||||
maxlength="30" |
||||
/> |
||||
<text class="char-count--inline">{{item.title.length || 0}}/30</text> |
||||
</view> |
||||
</view> |
||||
<view class="form-group agenda-group"> |
||||
<view class="form-label">描述</view> |
||||
<view class="textarea-wrap"> |
||||
<textarea |
||||
class="form-textarea" |
||||
placeholder="请输入议程描述，1-200字" |
||||
value="{{item.desc}}" |
||||
data-index="{{index}}" |
||||
data-field="desc" |
||||
bindinput="onAgendaInput" |
||||
maxlength="200" |
||||
/> |
||||
<text class="char-count">{{item.desc.length || 0}}/200</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
<view class="bottom-safe"></view> |
||||
</scroll-view> |
||||
|
||||
<view class="action-bar action-bar--multi"> |
||||
<view class="btn btn-default" bindtap="onPrevStep">存草搞</view> |
||||
<view class="btn btn-default" bindtap="onPrevStep">上一步</view> |
||||
<view class="btn btn-primary" bindtap="onSubmit">提交</view> |
||||
</view> |
||||
</block> |
||||
|
||||
<!-- ========== 步骤4 完成 ========== --> |
||||
<block wx:if="{{currentStep === 4}}"> |
||||
<view class="result-page"> |
||||
<view class="result-circle"> |
||||
<text class="result-check">✓</text> |
||||
</view> |
||||
<text class="result-title">提交成功</text> |
||||
<text class="result-desc">活动已提交审核，请耐心等待</text> |
||||
<view class="btn btn-primary btn--large" bindtap="onGoHome">返回首页</view> |
||||
</view> |
||||
</block> |
||||
</view> |
||||
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
{ |
||||
"navigationBarTitleText": "活动申请", |
||||
"navigationStyle": "default", |
||||
"usingComponents": {} |
||||
} |
||||
@ -0,0 +1,75 @@
@@ -0,0 +1,75 @@
|
||||
.page { |
||||
padding: 0 38rpx; |
||||
.status-icon { |
||||
margin: 70rpx auto 0; |
||||
display: block; |
||||
width: 180rpx; |
||||
height: 180rpx; |
||||
} |
||||
.status { |
||||
margin-top: 24rpx; |
||||
font-size: 46rpx; |
||||
color: rgba(74, 184, 253, 1); |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
.content { |
||||
margin: 30rpx 30rpx 0; |
||||
font-size: 28rpx; |
||||
color: rgba(75, 85, 99, 1); |
||||
line-height: 42rpx; |
||||
text-align: center; |
||||
} |
||||
.btn { |
||||
margin: 35rpx 0 0; |
||||
height: 96rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
} |
||||
.back { |
||||
margin-top: 25rpx; |
||||
padding: 30rpx 0; |
||||
text-align: center; |
||||
font-size: 32rpx; |
||||
color: rgba(74, 184, 253, 1); |
||||
} |
||||
.official { |
||||
margin: 20rpx auto 0; |
||||
width: 383rpx; |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
border-radius: 24rpx; |
||||
.title { |
||||
padding: 14rpx 0 10rpx; |
||||
font-size: 34rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
text-align: center; |
||||
} |
||||
.o-container { |
||||
padding: 30rpx; |
||||
border-radius: 22rpx; |
||||
background-color: #fff; |
||||
box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(0, 0, 0, 0.07); |
||||
.code { |
||||
margin: 0 auto; |
||||
width: 300rpx; |
||||
height: 300rpx; |
||||
display: block; |
||||
} |
||||
.tip { |
||||
margin: 24rpx auto 0; |
||||
width: 270rpx; |
||||
text-align: center; |
||||
line-height: 54rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
border-radius: 60rpx; |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
|
||||
Page({ |
||||
data: {}, |
||||
onLoad() {}, |
||||
}); |
||||
|
||||
export {} |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
<view class="page"> |
||||
<image class="status-icon" src="/images/icon33.png"></image> |
||||
<view class="status">申请提交成功</view> |
||||
<view class="content">我们将会在 7 个工作日内完成审核，结果将通过公 众号发送给你，请注意查收～</view> |
||||
<view class="btn">继续发布</view> |
||||
<view class="back">返回活动页</view> |
||||
<view class="official"> |
||||
<view class="title">关注xxx公众号</view> |
||||
<view class="o-container"> |
||||
<image class="code" src="/images/bg1.png" show-menu-by-longpress></image> |
||||
<view class="tip">长按识别二维码</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
@ -1,8 +1,26 @@
@@ -1,8 +1,26 @@
|
||||
const _app = getApp<IAppOption>(); |
||||
const _app = getApp<IAppOption>() |
||||
|
||||
Page({ |
||||
data: {}, |
||||
data: { |
||||
popupShow: false, |
||||
popupType: 'popup1', // 签到成功弹窗
|
||||
popupParams: {} as any, |
||||
}, |
||||
onLoad() {}, |
||||
}); |
||||
handlePopupOk() { |
||||
const { popupType } = this.data |
||||
if (popupType === 'argument') { |
||||
} |
||||
}, |
||||
handlePopupCancel() { |
||||
const { popupType } = this.data |
||||
if (popupType === 'conformBindDoctorConform') { |
||||
} |
||||
this.setData({ |
||||
popupShow: false, |
||||
popupType: 'i', |
||||
}) |
||||
}, |
||||
}) |
||||
|
||||
export {} |
||||
|
||||
@ -1,3 +1,5 @@
@@ -1,3 +1,5 @@
|
||||
{ |
||||
"navigationStyle": "default", |
||||
"navigationBarTitleText": "活动详情", |
||||
"usingComponents": {} |
||||
} |
||||
|
||||
@ -0,0 +1,146 @@
@@ -0,0 +1,146 @@
|
||||
page { |
||||
background-color: rgba(247, 248, 250, 1); |
||||
} |
||||
|
||||
.page { |
||||
padding: 30rpx 30rpx 80rpx; |
||||
.container { |
||||
margin-top: 130rpx; |
||||
padding: 0 30rpx 56rpx; |
||||
position: relative; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
.status-icon { |
||||
position: absolute; |
||||
top: -115rpx; |
||||
left: 50%; |
||||
transform: translateX(-50%); |
||||
display: block; |
||||
width: 230rpx; |
||||
height: 230rpx; |
||||
} |
||||
.status { |
||||
padding-top: 138rpx; |
||||
font-size: 42rpx; |
||||
color: rgba(17, 24, 39, 1); |
||||
text-align: center; |
||||
} |
||||
.content { |
||||
margin-top: 16rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(71, 85, 105, 1); |
||||
line-height: 42rpx; |
||||
} |
||||
.code-wrap { |
||||
margin: 32rpx auto 0; |
||||
width: 290rpx; |
||||
height: 290rpx; |
||||
padding: 15rpx; |
||||
box-sizing: border-box; |
||||
.code { |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.btn { |
||||
margin: 42rpx auto 0; |
||||
width: 330rpx; |
||||
height: 96rpx; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 32rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background: linear-gradient(90deg, #9ddffd 0%, #4ab8fd 100%); |
||||
box-shadow: 0rpx 15rpx 30rpx -6rpx rgba(74, 172, 219, 0.4); |
||||
border-radius: 16rpx 16rpx 16rpx 16rpx; |
||||
} |
||||
} |
||||
.act { |
||||
margin-top: 42rpx; |
||||
.a-title { |
||||
font-size: 36rpx; |
||||
color: rgba(17, 24, 39, 1); |
||||
font-weight: bold; |
||||
} |
||||
.a-list { |
||||
.card { |
||||
margin-top: 24rpx; |
||||
padding: 24rpx; |
||||
display: flex; |
||||
gap: 24rpx; |
||||
background-color: #fff; |
||||
border-radius: 24rpx; |
||||
&:last-of-type { |
||||
border: none; |
||||
} |
||||
.photo { |
||||
flex-shrink: 0; |
||||
position: relative; |
||||
width: 262rpx; |
||||
height: 196rpx; |
||||
border-radius: 16rpx; |
||||
overflow: hidden; |
||||
.status { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
padding: 8rpx 16rpx; |
||||
font-size: 22rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background: #feb54a; |
||||
border-radius: 16rpx 0rpx 16rpx 0rpx; |
||||
} |
||||
.p-img { |
||||
border-radius: 16rpx; |
||||
display: block; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.user { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
box-sizing: border-box; |
||||
text-align: center; |
||||
line-height: 44rpx; |
||||
font-size: 24rpx; |
||||
color: rgba(255, 255, 255, 1); |
||||
background-color: rgba(0, 0, 0, 0.36); |
||||
backdrop-filter: blur(8rpx); |
||||
} |
||||
} |
||||
.wrap { |
||||
.title { |
||||
margin-bottom: 28rpx; |
||||
font-size: 32rpx; |
||||
color: rgba(17, 24, 39, 1); |
||||
line-height: 48rpx; |
||||
font-weight: bold; |
||||
height: 96rpx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-box-orient: vertical; |
||||
-webkit-line-clamp: 2; |
||||
} |
||||
.date, |
||||
.site { |
||||
margin-top: 12rpx; |
||||
font-size: 28rpx; |
||||
color: rgba(100, 116, 139, 1); |
||||
display: flex; |
||||
align-items: center; |
||||
gap: 8rpx; |
||||
.icon { |
||||
width: 22rpx; |
||||
height: 22rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@
@@ -0,0 +1,36 @@
|
||||
<view class="page"> |
||||
<view class="container"> |
||||
<image class="status-icon" src="/images/icon34.png"></image> |
||||
<view class="status">报名成功</view> |
||||
<view class="content">活动将于2026年7月1日19:00开始， 请记得准时参加</view> |
||||
<view class="code-wrap" style="background: url('/images/bg2.png') no-repeat center/cover"> |
||||
<image class="code" src="/images/bg1.png"></image> |
||||
</view> |
||||
<view class="btn">返回活动页</view> |
||||
</view> |
||||
<view class="act"> |
||||
<view class="a-title">你可能感兴趣的活动</view> |
||||
<view class="a-list"> |
||||
<view class="card" wx:for="{{2}}" wx:key="index" bind:tap="handleDetail"> |
||||
<view class="photo"> |
||||
<view class="status">进行中</view> |
||||
<image class="p-img" src="/images/bg1.png"></image> |
||||
<view class="user">128人已报名</view> |
||||
</view> |
||||
<view class="wrap"> |
||||
<view class="title"> |
||||
深职大第十五届校园歌手大赛深职大第十五届校园歌手大深职大第十五届校园歌手大深职大第十五届校园歌手大赛赛赛 |
||||
</view> |
||||
<view class="date"> |
||||
<image class="icon" src="/images/icon3.png"></image> |
||||
<view class="content">2026.04.01-2026.05.30</view> |
||||
</view> |
||||
<view class="site"> |
||||
<image class="icon" src="/images/icon15.png"></image> |
||||
<view class="content">留仙洞校区音乐厅</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
Loading…
Reference in new issue