|
@@ -0,0 +1,362 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="common_page adffc" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
|
|
|
|
|
+ <cus-header title="报名信息填写" bgColor="transparent"></cus-header>
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/19/54b75bc8-d926-449b-95a5-1126f700b481.png" class="top_bg_img" mode="widthFix"></image>
|
|
|
|
|
+ <div class="box box1">
|
|
|
|
|
+ <div class="box1-top">
|
|
|
|
|
+ <div class="title">{{'环保知识知多少?让孩子成为大自然的守护者!'}}</div>
|
|
|
|
|
+ <div class="tip">活动时间:{{'2025年06月01日 12:00'}}</div>
|
|
|
|
|
+ <div class="tip">活动地点:{{'深圳市南山区南山街道丰潭路'}}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box1-bottom adfac">
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/0f8ec76b-5c24-4d79-a77e-354d3e70bb36.png"></image>
|
|
|
|
|
+ <text>报名时间截止前可取消并返还爱心值,截止后不可取消。</text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box box2">
|
|
|
|
|
+ <div class="box2-title">报名信息</div>
|
|
|
|
|
+ <div class="box2-members" v-if="selectMemberList.length">
|
|
|
|
|
+ <div class="box2-members-pre adfacjb" v-for="(item,index) in selectMemberList" :key="index">
|
|
|
|
|
+ <div class="box2-members-pre-left">
|
|
|
|
|
+ <div class="ltop adfac">
|
|
|
|
|
+ <div class="name">{{'张琳琳'}}</div>
|
|
|
|
|
+ <image class="sex" v-if="item.sex==2" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b6d1fcb3-55ba-4104-b8cd-756b963a4da8.png"></image>
|
|
|
|
|
+ <image class="sex" v-else-if="item.sex==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a1899fd0-c468-48d9-b554-2f17b75a4157.png"></image>
|
|
|
|
|
+ <div class="age" :class="{'women':item.sex==2,'man':item.sex==1}">{{46}}岁</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="lbottom">
|
|
|
|
|
+ 身份证 {{'340123**********09'}}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box2-members-pre-right">
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/bf4876c8-43bf-4eeb-a153-1414e567ed10.png"></image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box2-add adfacjc" @tap="handleAdd">
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/9aa7a091-d1fe-40a9-9a7e-846decf2d4e0.png"></image>
|
|
|
|
|
+ <text>添加</text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box box3">
|
|
|
|
|
+ <div class="box3-pre adfacjb">
|
|
|
|
|
+ <div class="box3-pre-left">联系人姓名</div>
|
|
|
|
|
+ <div class="box3-pre-right">
|
|
|
|
|
+ <up-input v-model="submitDto.name" border="none" style="font-size: 30rpx;color: #151B29;text-align: right;" placeholder="请输入联系人姓名"></up-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box3-pre adfacjb">
|
|
|
|
|
+ <div class="box3-pre-left">联系人电话</div>
|
|
|
|
|
+ <div class="box3-pre-right">
|
|
|
|
|
+ <up-input v-model="submitDto.phone" border="none" style="font-size: 30rpx;color: #151B29;text-align: right;" placeholder="请输入联系人电话"></up-input>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box box4 adfacjb">
|
|
|
|
|
+ <div class="box4-left">专享券抵扣</div>
|
|
|
|
|
+ <div class="box4-right adfac" @tap="handleSelectTicket">
|
|
|
|
|
+ <text>{{'暂无可用专享券'}}</text>
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/4d3329f1-7421-4bde-a7dd-5175a7748f8f.png"></image>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cbottom">
|
|
|
|
|
+ <div class="cbottom-top adfac" @tap="changeAgree">
|
|
|
|
|
+ <image v-if="agree" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/87b5b244-d14f-43cd-991b-4ac9f48d909e.png"></image>
|
|
|
|
|
+ <image v-else src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/b8a5cabd-57f8-4ad7-9677-f6372423c50a.png"></image>
|
|
|
|
|
+ <text>我已知晓并同意活动组织方获取以上我所提交的报名信息。</text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cbottom-btn adfacjb">
|
|
|
|
|
+ <div class="cbottom-btn-left adffcac">
|
|
|
|
|
+ <div class="heart adfac">
|
|
|
|
|
+ <image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/ab188fd0-afcc-4d76-a1d6-de367af3e756.png"></image>
|
|
|
|
|
+ <text>{{300}}</text>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text">爱心值</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="cbottom-btn-right" @click="handleApply">确定报名</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script setup name="">
|
|
|
|
|
+ import CusHeader from '@/components/CusHeader/index.vue'
|
|
|
|
|
+ import { ref } from 'vue'
|
|
|
|
|
+
|
|
|
|
|
+ const selectMemberList = ref([{sex:1},{sex:2}])
|
|
|
|
|
+ const submitDto = ref({
|
|
|
|
|
+ name:'',
|
|
|
|
|
+ phone:''
|
|
|
|
|
+ })
|
|
|
|
|
+ const agree = ref(false)
|
|
|
|
|
+
|
|
|
|
|
+ const handleAdd = () => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url:'/pagesHome/applyMember'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleSelectTicket = () => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url:'/pagesMy/exclusiveScroll'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleApply = () => {
|
|
|
|
|
+ uni.navigateTo({
|
|
|
|
|
+ url:'/pagesHome/applyResult'
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const changeAgree = () => {
|
|
|
|
|
+ agree.value = !agree.value;
|
|
|
|
|
+ }
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+ ::v-deep .u-input__content__field-wrapper__field{
|
|
|
|
|
+ text-align: right !important;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .common_page{
|
|
|
|
|
+ padding-bottom: 248rpx;
|
|
|
|
|
+
|
|
|
|
|
+ .box{
|
|
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box1{
|
|
|
|
|
+ &-top{
|
|
|
|
|
+ padding: 36rpx 24rpx 24rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #E5E7EB;
|
|
|
|
|
+ &>.title{
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ &>.tip{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ line-height: 24rpx;
|
|
|
|
|
+ margin-top: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ &-bottom{
|
|
|
|
|
+ padding: 26rpx 24rpx;
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 20rpx;
|
|
|
|
|
+ height: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ text{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #C9A771;
|
|
|
|
|
+ line-height: 24rpx;
|
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box2{
|
|
|
|
|
+ padding: 40rpx 24rpx 48rpx;
|
|
|
|
|
+ &-title{
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
|
+ margin-bottom: 26rpx;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+ &-members{
|
|
|
|
|
+ &-pre{
|
|
|
|
|
+ padding: 36rpx 0;
|
|
|
|
|
+ box-shadow: inset 0rpx -1rpx 0rpx 0rpx #F2F2F2;
|
|
|
|
|
+ &-left{
|
|
|
|
|
+ .ltop{
|
|
|
|
|
+ .name{
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 32rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .sex{
|
|
|
|
|
+ width: 44rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ .age{
|
|
|
|
|
+ border-radius: 13rpx;
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 20rpx;
|
|
|
|
|
+ line-height: 24rpx;
|
|
|
|
|
+ padding: 4rpx 10rpx;
|
|
|
|
|
+ margin-left: 13rpx;
|
|
|
|
|
+ &.women{
|
|
|
|
|
+ background: rgba(244,101,122,0.14);
|
|
|
|
|
+ color: #F4657A;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.man{
|
|
|
|
|
+ background: rgba(5,169,254,0.12);
|
|
|
|
|
+ color: #05A9FE;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .lbottom{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #989998;
|
|
|
|
|
+ line-height: 24rpx;
|
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ &-right{
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ &-add{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 78rpx;
|
|
|
|
|
+ background: rgba(112,207,82,0.08);
|
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
|
+ border: 1rpx dotted #70CF52;
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ text{
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
|
+ color: #70CF52;
|
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
|
+ margin-left: 10rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box3{
|
|
|
|
|
+ &-pre{
|
|
|
|
|
+ padding: 36rpx 24rpx;
|
|
|
|
|
+ &:first-child{
|
|
|
|
|
+ box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
|
|
|
|
|
+ }
|
|
|
|
|
+ &-left{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .box4{
|
|
|
|
|
+ padding: 36rpx 24rpx;
|
|
|
|
|
+ &-left{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 30rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ &-right{
|
|
|
|
|
+ text{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #989998;
|
|
|
|
|
+ line-height: 33rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 32rpx;
|
|
|
|
|
+ height: 32rpx;
|
|
|
|
|
+ margin-left: 20rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .cbottom{
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ &-top{
|
|
|
|
|
+ padding: 0 30rpx;
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 36rpx;
|
|
|
|
|
+ height: 36rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ text{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #989998;
|
|
|
|
|
+ line-height: 33rpx;
|
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ &-btn{
|
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
|
+ padding: 20rpx 30rpx 44rpx 36rpx;
|
|
|
|
|
+ margin-top: 40rpx;
|
|
|
|
|
+ &-left{
|
|
|
|
|
+ .heart{
|
|
|
|
|
+ image{
|
|
|
|
|
+ width: 30rpx;
|
|
|
|
|
+ height: 30rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ text{
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 36rpx;
|
|
|
|
|
+ color: #F4657A;
|
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
|
+ margin-left: 2rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .text{
|
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
|
+ font-weight: 400;
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
|
|
+ color: #252525;
|
|
|
|
|
+ line-height: 24rpx;
|
|
|
|
|
+ margin-top: 11rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ &-right{
|
|
|
|
|
+ width: 528rpx;
|
|
|
|
|
+ height: 90rpx;
|
|
|
|
|
+ background: #B7F358;
|
|
|
|
|
+ border-radius: 45rpx;
|
|
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
|
+ color: #151B29;
|
|
|
|
|
+ line-height: 90rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ letter-spacing: 2rpx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+</style>
|