kola-web
2 weeks ago
42 changed files with 2104 additions and 18 deletions
@ -0,0 +1,6 @@ |
|||||||
|
{ |
||||||
|
"component": true, |
||||||
|
"usingComponents": { |
||||||
|
"van-popup": "@vant/weapp/popup/index" |
||||||
|
} |
||||||
|
} |
||||||
@ -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 @@ |
|||||||
|
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 @@ |
|||||||
|
<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 @@ |
|||||||
{ |
{ |
||||||
|
"navigationBarTitleText": "创建活动", |
||||||
|
"navigationStyle": "default", |
||||||
"usingComponents": {} |
"usingComponents": {} |
||||||
} |
} |
||||||
|
|||||||
@ -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 @@ |
|||||||
const _app = getApp<IAppOption>(); |
const app = getApp<IAppOption>() |
||||||
|
|
||||||
|
interface AgendaItem { |
||||||
|
id: number |
||||||
|
time: string |
||||||
|
title: string |
||||||
|
desc: string |
||||||
|
} |
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: {}, |
data: { |
||||||
onLoad() {}, |
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 {} |
export {} |
||||||
|
|||||||
@ -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 @@ |
|||||||
|
{ |
||||||
|
"navigationBarTitleText": "活动申请", |
||||||
|
"navigationStyle": "default", |
||||||
|
"usingComponents": {} |
||||||
|
} |
||||||
@ -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 @@ |
|||||||
|
const _app = getApp<IAppOption>(); |
||||||
|
|
||||||
|
Page({ |
||||||
|
data: {}, |
||||||
|
onLoad() {}, |
||||||
|
}); |
||||||
|
|
||||||
|
export {} |
||||||
@ -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 @@ |
|||||||
const _app = getApp<IAppOption>(); |
const _app = getApp<IAppOption>() |
||||||
|
|
||||||
Page({ |
Page({ |
||||||
data: {}, |
data: { |
||||||
|
popupShow: false, |
||||||
|
popupType: 'popup1', // 签到成功弹窗
|
||||||
|
popupParams: {} as any, |
||||||
|
}, |
||||||
onLoad() {}, |
onLoad() {}, |
||||||
}); |
handlePopupOk() { |
||||||
|
const { popupType } = this.data |
||||||
|
if (popupType === 'argument') { |
||||||
|
} |
||||||
|
}, |
||||||
|
handlePopupCancel() { |
||||||
|
const { popupType } = this.data |
||||||
|
if (popupType === 'conformBindDoctorConform') { |
||||||
|
} |
||||||
|
this.setData({ |
||||||
|
popupShow: false, |
||||||
|
popupType: 'i', |
||||||
|
}) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
export {} |
export {} |
||||||
|
|||||||
@ -1,3 +1,5 @@ |
|||||||
{ |
{ |
||||||
|
"navigationStyle": "default", |
||||||
|
"navigationBarTitleText": "活动详情", |
||||||
"usingComponents": {} |
"usingComponents": {} |
||||||
} |
} |
||||||
|
|||||||
@ -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 @@ |
|||||||
|
<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