|
|
@@ -87,7 +87,39 @@
|
|
|
<up-icon name="share-square" color="#252525" size="48rpx"></up-icon>
|
|
|
<text>分享</text>
|
|
|
</div>
|
|
|
- <div class="right">取消报名</div>
|
|
|
+ <div class="right" @click="handleCancel">取消报名</div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog" v-if="show">
|
|
|
+ <div class="dbox">
|
|
|
+ <div class="dbox-title">报名信息</div>
|
|
|
+ <image class="close" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/10/10/7d1c7cf4-199a-4008-8114-ee0e1a8f0cc3.png" @click="show=false"></image>
|
|
|
+ <div class="dbox-select adfacjb">
|
|
|
+ <div class="dbox-select-left">请选择人员</div>
|
|
|
+ <div class="dbox-select-right adfac" v-if="multiple">
|
|
|
+ <text>全选</text>
|
|
|
+ <image v-if="selectAll" 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dbox-list">
|
|
|
+ <div class="dbox-list-item adfacjb" v-for="(item,index) in selectUsers" :key="index" @click="handleSelectUser(item,index)">
|
|
|
+ <div class="dbox-list-item-left">
|
|
|
+ <div class="dbox-list-item-left-top 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="dbox-list-item-left-bottom">身份证 {{'340123**********09'}}</div>
|
|
|
+ </div>
|
|
|
+ <div class="dbox-list-item-right">
|
|
|
+ <image v-if="item.select" 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dbox-btn">{{'取消报名'}}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -103,6 +135,10 @@
|
|
|
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？<br>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
|
|
|
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
|
|
|
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
|
|
|
+ const show = ref(false)
|
|
|
+ const multiple = ref(false)
|
|
|
+ const selectAll = ref(false)
|
|
|
+ const selectUsers = ref([{sex:2,select:false},{sex:2,select:false}])
|
|
|
|
|
|
const handleShare = () => {
|
|
|
uni.showToast({
|
|
|
@@ -111,6 +147,10 @@
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const handleCancel = () => {
|
|
|
+ show.value = true;
|
|
|
+ }
|
|
|
+
|
|
|
onShareAppMessage(() => {
|
|
|
return {
|
|
|
title: '公益活动详情',
|
|
|
@@ -356,5 +396,134 @@
|
|
|
letter-spacing: 2rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .dialog{
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0,0,0,0.4);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .dbox{
|
|
|
+ position: relative;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 24rpx 24rpx 0rpx 0rpx;
|
|
|
+ padding: 40rpx 0 64rpx;
|
|
|
+ &-title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ width: 27rpx;
|
|
|
+ height: 27rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 40rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ }
|
|
|
+ &-select{
|
|
|
+ margin-top: 57rpx;
|
|
|
+ padding: 27rpx 30rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ &-left{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ text{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #151B29;
|
|
|
+ line-height: 36rpx;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-list{
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 820rpx;
|
|
|
+ overflow-y: auto;
|
|
|
+ &-item{
|
|
|
+ padding: 36rpx 0;
|
|
|
+ box-shadow: inset 0rpx -1rpx 0rpx 0rpx #E5E7EB;
|
|
|
+ &-left{
|
|
|
+ &-top{
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #989998;
|
|
|
+ line-height: 24rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-right{
|
|
|
+ image{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-btn{
|
|
|
+ margin: 43rpx 40rpx 0;
|
|
|
+ width: calc(100% - 80rpx);
|
|
|
+ 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>
|
